mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
feat: upgrade React DayPicker to v10 (#825)
* feat: upgrade React DayPicker to v10 Migrate coss packages, examples, registry output, and documentation to the preferred scoped package while keeping the origin app on v9. Co-authored-by: Cursor <cursoragent@cursor.com> * fix: emove redundant transition * docs: generalize DayPicker version reference Co-authored-by: Cursor <cursoragent@cursor.com> * update docs --------- Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Pasquale Vitiello
committed by
GitHub
GitHub
parent
aa2636c410
commit
6422daaca0
@@ -45,10 +45,10 @@ import {
|
||||
PopoverTrigger,
|
||||
} from "@coss/ui/components/popover";
|
||||
import { SelectButton } from "@coss/ui/components/select";
|
||||
import type { DateRange } from "@daypicker/react";
|
||||
import { ExternalLinkIcon, FileTextIcon, SearchIcon } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import type { DateRange } from "react-day-picker";
|
||||
import {
|
||||
AppHeader,
|
||||
AppHeaderContent,
|
||||
|
||||
@@ -7,10 +7,10 @@ import {
|
||||
PopoverPopup,
|
||||
PopoverTrigger,
|
||||
} from "@coss/ui/components/popover";
|
||||
import type { DateRange } from "@daypicker/react";
|
||||
import { ChevronsUpDownIcon } from "lucide-react";
|
||||
import type * as React from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { DateRange } from "react-day-picker";
|
||||
import { FilterChipShell } from "./filter-chip-shell";
|
||||
import type { ActiveFilter, FilterField } from "./filter-chip-types";
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"@coss/ui": "workspace:*",
|
||||
"@daypicker/react": "^10.0.1",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
|
||||
@@ -3,6 +3,27 @@ title: Changelog
|
||||
description: Breaking changes, migration guides, and notable updates.
|
||||
---
|
||||
|
||||
## July 26, 2026
|
||||
|
||||
### React DayPicker 10
|
||||
|
||||
coss ui now targets **`@daypicker/react@10`**. The legacy **`react-day-picker`** package name remains available for compatibility, but DayPicker recommends the scoped package for v10 and newer.
|
||||
|
||||
If you import DayPicker APIs directly, update the dependency and imports:
|
||||
|
||||
```diff
|
||||
- import { DayPicker, type DateRange } from "react-day-picker"
|
||||
+ import { DayPicker, type DateRange } from "@daypicker/react"
|
||||
```
|
||||
|
||||
DayPicker v10 removes APIs deprecated in v9, including legacy navigation props, aliases, component slots, and `classNames` / `styles` keys. Applications with custom calendar wrappers should follow the [DayPicker v10 migration guide](https://daypicker.dev/upgrading).
|
||||
|
||||
**Agent migration prompt:**
|
||||
|
||||
```text
|
||||
Upgrade React DayPicker to v10. Replace the react-day-picker dependency with @daypicker/react and update all imports, including style and locale imports. Audit custom Calendar and DatePicker wrappers for APIs removed in v10: replace deprecated navigation and focus props, aliases, component slots, and classNames/styles keys according to https://daypicker.dev/upgrading. If the app uses a non-Gregorian calendar, install the corresponding @daypicker/* add-on and update its imports. Run the typecheck and test affected date-picker screens after migrating.
|
||||
```
|
||||
|
||||
## June 22, 2026
|
||||
|
||||
### Base UI 1.6.0
|
||||
|
||||
@@ -31,7 +31,7 @@ npx shadcn@latest add @coss/calendar
|
||||
<Step>Install the following dependencies:</Step>
|
||||
|
||||
```bash
|
||||
npm install react-day-picker
|
||||
npm install @daypicker/react
|
||||
```
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
@@ -58,7 +58,7 @@ import { Calendar } from "@/components/ui/calendar"
|
||||
|
||||
## API Reference
|
||||
|
||||
This component wraps [react-day-picker](https://daypicker.dev/) with custom styling.
|
||||
This component wraps [@daypicker/react](https://daypicker.dev/) with custom styling.
|
||||
|
||||
### Calendar
|
||||
|
||||
@@ -77,7 +77,7 @@ A calendar component for date selection.
|
||||
| `classNames` | `object` | - | Custom class names for calendar parts |
|
||||
| `components` | `object` | - | Custom components to override defaults |
|
||||
|
||||
For the full list of props, see the [react-day-picker documentation](https://daypicker.dev/).
|
||||
For the full list of props, see the [@daypicker/react documentation](https://daypicker.dev/).
|
||||
|
||||
### Customizing Cell Size
|
||||
|
||||
@@ -126,3 +126,7 @@ Calendar with a custom Select component for month and year navigation:
|
||||
Calendar with a searchable Combobox for month and year navigation:
|
||||
|
||||
<ComponentPreview name="p-calendar-6" />
|
||||
|
||||
## Changelog
|
||||
|
||||
- [July 26, 2026](/ui/docs/changelog#react-daypicker-10) — Upgraded to **React DayPicker 10** and migrated from **`react-day-picker`** to **`@daypicker/react`**. Applications with custom calendar wrappers should follow the linked migration guide.
|
||||
|
||||
@@ -34,7 +34,7 @@ npx shadcn@latest add @coss/calendar @coss/popover @coss/button
|
||||
<Step>Install the following dependencies:</Step>
|
||||
|
||||
```bash
|
||||
npm install react-day-picker date-fns lucide-react @base-ui/react
|
||||
npm install @daypicker/react date-fns lucide-react @base-ui/react
|
||||
```
|
||||
|
||||
<Step>Copy the Calendar, Popover, and Button components to your project.</Step>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
"dependencies": {
|
||||
"@base-ui/react": "1.6.0",
|
||||
"@coss/ui": "workspace:*",
|
||||
"@daypicker/react": "10.0.1",
|
||||
"@hugeicons/core-free-icons": "^2.0.0",
|
||||
"@hugeicons/react": "^1.1.1",
|
||||
"@remixicon/react": "^4.7.0",
|
||||
@@ -15,7 +16,6 @@
|
||||
"lucide-react": "^0.555.0",
|
||||
"next": "16.2.5",
|
||||
"react": "^19.2.6",
|
||||
"react-day-picker": "^9.13.0",
|
||||
"react-dom": "^19.2.6",
|
||||
"shadcn": "^4.1.0",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -11,7 +11,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-10.tsx",
|
||||
"content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const today = new Date();\n const [date, setDate] = useState<DateRange | undefined>({\n from: today,\n to: addDays(today, 3),\n });\n\n return (\n <Calendar\n classNames={{\n day: \"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-end before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-start\",\n day_button:\n \"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\",\n }}\n mode=\"range\"\n onSelect={setDate}\n selected={date}\n />\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const today = new Date();\n const [date, setDate] = useState<DateRange | undefined>({\n from: today,\n to: addDays(today, 3),\n });\n\n return (\n <Calendar\n classNames={{\n day: \"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-end before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-start\",\n day_button:\n \"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\",\n }}\n mode=\"range\"\n onSelect={setDate}\n selected={date}\n />\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-12.tsx",
|
||||
"content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { WeekNumberProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const [date, setDate] = useState<Date | undefined>(new Date());\n\n return (\n <Calendar\n components={{\n WeekNumber: ({ week, ...props }: WeekNumberProps) => {\n return (\n <th {...props}>\n <span className=\"inline-flex size-(--cell-size) items-center justify-center\">\n {week.weekNumber}\n </span>\n </th>\n );\n },\n }}\n fixedWeeks\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n showWeekNumber\n />\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { WeekNumberProps } from \"@daypicker/react\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const [date, setDate] = useState<Date | undefined>(new Date());\n\n return (\n <Calendar\n components={{\n WeekNumber: ({ week, ...props }: WeekNumberProps) => {\n return (\n <th {...props}>\n <span className=\"inline-flex size-(--cell-size) items-center justify-center\">\n {week.weekNumber}\n </span>\n </th>\n );\n },\n }}\n fixedWeeks\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n showWeekNumber\n />\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-13.tsx",
|
||||
"content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Combobox,\n ComboboxEmpty,\n ComboboxInput,\n ComboboxItem,\n ComboboxList,\n ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n disabled?: boolean;\n label: string;\n value: string;\n}\n\nfunction YearDropdown(props: DropdownProps) {\n const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n const items: DropdownItem[] =\n options?.map((option) => ({\n disabled: option.disabled,\n label: option.label,\n value: option.value.toString(),\n })) ?? [];\n\n const selectedItem = items.find((item) => item.value === value?.toString());\n\n const handleValueChange = (newValue: DropdownItem | null) => {\n if (onChange && newValue) {\n const syntheticEvent = {\n target: { value: newValue.value },\n } as React.ChangeEvent<HTMLSelectElement>;\n onChange(syntheticEvent);\n }\n };\n\n return (\n <Combobox\n aria-label={ariaLabel}\n autoHighlight\n items={items}\n onValueChange={handleValueChange}\n value={selectedItem}\n >\n <ComboboxInput\n className=\"**:[input]:w-0 **:[input]:flex-1\"\n onFocus={(e) => e.currentTarget.select()}\n />\n <ComboboxPopup aria-label={ariaLabel}>\n <ComboboxEmpty>No items found.</ComboboxEmpty>\n <ComboboxList>\n {(item: DropdownItem) => (\n <ComboboxItem\n disabled={item.disabled}\n key={item.value}\n value={item}\n >\n {item.label}\n </ComboboxItem>\n )}\n </ComboboxList>\n </ComboboxPopup>\n </Combobox>\n );\n}\n\nexport default function Particle() {\n const [date, setDate] = React.useState<Date | undefined>(new Date());\n return (\n <Calendar\n captionLayout=\"dropdown-years\"\n classNames={{\n dropdowns: \"*:flex-1 *:[span]:text-center\",\n }}\n components={{ Dropdown: YearDropdown }}\n endMonth={new Date(2030, 11)}\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n startMonth={new Date(1930, 0)}\n />\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DropdownProps } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Combobox,\n ComboboxEmpty,\n ComboboxInput,\n ComboboxItem,\n ComboboxList,\n ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n disabled?: boolean;\n label: string;\n value: string;\n}\n\nfunction YearDropdown(props: DropdownProps) {\n const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n const items: DropdownItem[] =\n options?.map((option) => ({\n disabled: option.disabled,\n label: option.label,\n value: option.value.toString(),\n })) ?? [];\n\n const selectedItem = items.find((item) => item.value === value?.toString());\n\n const handleValueChange = (newValue: DropdownItem | null) => {\n if (onChange && newValue) {\n const syntheticEvent = {\n target: { value: newValue.value },\n } as React.ChangeEvent<HTMLSelectElement>;\n onChange(syntheticEvent);\n }\n };\n\n return (\n <Combobox\n aria-label={ariaLabel}\n autoHighlight\n items={items}\n onValueChange={handleValueChange}\n value={selectedItem}\n >\n <ComboboxInput\n className=\"**:[input]:w-0 **:[input]:flex-1\"\n onFocus={(e) => e.currentTarget.select()}\n />\n <ComboboxPopup aria-label={ariaLabel}>\n <ComboboxEmpty>No items found.</ComboboxEmpty>\n <ComboboxList>\n {(item: DropdownItem) => (\n <ComboboxItem\n disabled={item.disabled}\n key={item.value}\n value={item}\n >\n {item.label}\n </ComboboxItem>\n )}\n </ComboboxList>\n </ComboboxPopup>\n </Combobox>\n );\n}\n\nexport default function Particle() {\n const [date, setDate] = React.useState<Date | undefined>(new Date());\n return (\n <Calendar\n captionLayout=\"dropdown-years\"\n classNames={{\n dropdowns: \"*:flex-1 *:[span]:text-center\",\n }}\n components={{ Dropdown: YearDropdown }}\n endMonth={new Date(2030, 11)}\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n startMonth={new Date(1930, 0)}\n />\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-14.tsx",
|
||||
"content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { DropdownNavProps, DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Select,\n SelectItem,\n SelectPopup,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n const [date, setDate] = useState<Date | undefined>(new Date());\n\n const handleCalendarChange = (\n _value: string | number,\n _e: React.ChangeEventHandler<HTMLSelectElement>,\n ) => {\n const _event = {\n target: {\n value: String(_value),\n },\n } as React.ChangeEvent<HTMLSelectElement>;\n _e(_event);\n };\n\n return (\n <Calendar\n captionLayout=\"dropdown\"\n classNames={{\n month_caption: \"mx-0\",\n }}\n components={{\n Dropdown: (props: DropdownProps) => {\n const items =\n props.options?.map((option) => ({\n label: option.label,\n value: String(option.value),\n })) ?? [];\n\n return (\n <Select\n items={items}\n onValueChange={(value) => {\n if (props.onChange && value !== null) {\n handleCalendarChange(value, props.onChange);\n }\n }}\n value={String(props.value)}\n >\n <SelectTrigger className=\"min-w-none\">\n <SelectValue />\n </SelectTrigger>\n <SelectPopup>\n {items.map((item) => (\n <SelectItem key={item.value} value={item.value}>\n {item.label}\n </SelectItem>\n ))}\n </SelectPopup>\n </Select>\n );\n },\n DropdownNav: (props: DropdownNavProps) => {\n return (\n <div className=\"flex w-full items-center gap-2\">\n {props.children}\n </div>\n );\n },\n }}\n defaultMonth={new Date()}\n hideNavigation\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n startMonth={new Date(1980, 6)}\n />\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DropdownNavProps, DropdownProps } from \"@daypicker/react\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Select,\n SelectItem,\n SelectPopup,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n const [date, setDate] = useState<Date | undefined>(new Date());\n\n const handleCalendarChange = (\n _value: string | number,\n _e: React.ChangeEventHandler<HTMLSelectElement>,\n ) => {\n const _event = {\n target: {\n value: String(_value),\n },\n } as React.ChangeEvent<HTMLSelectElement>;\n _e(_event);\n };\n\n return (\n <Calendar\n captionLayout=\"dropdown\"\n classNames={{\n month_caption: \"mx-0\",\n }}\n components={{\n Dropdown: (props: DropdownProps) => {\n const items =\n props.options?.map((option) => ({\n label: option.label,\n value: String(option.value),\n })) ?? [];\n\n return (\n <Select\n items={items}\n onValueChange={(value) => {\n if (props.onChange && value !== null) {\n handleCalendarChange(value, props.onChange);\n }\n }}\n value={String(props.value)}\n >\n <SelectTrigger className=\"min-w-none\">\n <SelectValue />\n </SelectTrigger>\n <SelectPopup>\n {items.map((item) => (\n <SelectItem key={item.value} value={item.value}>\n {item.label}\n </SelectItem>\n ))}\n </SelectPopup>\n </Select>\n );\n },\n DropdownNav: (props: DropdownNavProps) => {\n return (\n <div className=\"flex w-full items-center gap-2\">\n {props.children}\n </div>\n );\n },\n }}\n defaultMonth={new Date()}\n hideNavigation\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n startMonth={new Date(1980, 6)}\n />\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-21.tsx",
|
||||
"content": "\"use client\";\n\nimport {\n endOfMonth,\n endOfYear,\n startOfMonth,\n startOfYear,\n subDays,\n subMonths,\n subYears,\n} from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const today = new Date();\n const yesterday = {\n from: subDays(today, 1),\n to: subDays(today, 1),\n };\n const last7Days = {\n from: subDays(today, 6),\n to: today,\n };\n const last30Days = {\n from: subDays(today, 29),\n to: today,\n };\n const monthToDate = {\n from: startOfMonth(today),\n to: today,\n };\n const lastMonth = {\n from: startOfMonth(subMonths(today, 1)),\n to: endOfMonth(subMonths(today, 1)),\n };\n const yearToDate = {\n from: startOfYear(today),\n to: today,\n };\n const lastYear = {\n from: startOfYear(subYears(today, 1)),\n to: endOfYear(subYears(today, 1)),\n };\n const [month, setMonth] = useState(today);\n const [date, setDate] = useState<DateRange | undefined>(last7Days);\n\n return (\n <div className=\"flex max-sm:flex-col\">\n <div className=\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\">\n <div className=\"flex h-full flex-col sm:border-e sm:pe-3\">\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate({\n from: today,\n to: today,\n });\n setMonth(today);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Today\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(yesterday);\n setMonth(yesterday.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Yesterday\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(last7Days);\n setMonth(last7Days.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Last 7 days\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(last30Days);\n setMonth(last30Days.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Last 30 days\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(monthToDate);\n setMonth(monthToDate.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Month to date\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(lastMonth);\n setMonth(lastMonth.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Last month\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(yearToDate);\n setMonth(yearToDate.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Year to date\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(lastYear);\n setMonth(lastYear.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Last year\n </Button>\n </div>\n </div>\n <Calendar\n className=\"max-sm:pb-3 sm:ps-5\"\n disabled={[{ after: today }]}\n mode=\"range\"\n month={month}\n onMonthChange={setMonth}\n onSelect={(newDate) => {\n if (newDate) {\n setDate(newDate);\n }\n }}\n selected={date}\n />\n </div>\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport {\n endOfMonth,\n endOfYear,\n startOfMonth,\n startOfYear,\n subDays,\n subMonths,\n subYears,\n} from \"date-fns\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const today = new Date();\n const yesterday = {\n from: subDays(today, 1),\n to: subDays(today, 1),\n };\n const last7Days = {\n from: subDays(today, 6),\n to: today,\n };\n const last30Days = {\n from: subDays(today, 29),\n to: today,\n };\n const monthToDate = {\n from: startOfMonth(today),\n to: today,\n };\n const lastMonth = {\n from: startOfMonth(subMonths(today, 1)),\n to: endOfMonth(subMonths(today, 1)),\n };\n const yearToDate = {\n from: startOfYear(today),\n to: today,\n };\n const lastYear = {\n from: startOfYear(subYears(today, 1)),\n to: endOfYear(subYears(today, 1)),\n };\n const [month, setMonth] = useState(today);\n const [date, setDate] = useState<DateRange | undefined>(last7Days);\n\n return (\n <div className=\"flex max-sm:flex-col\">\n <div className=\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\">\n <div className=\"flex h-full flex-col sm:border-e sm:pe-3\">\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate({\n from: today,\n to: today,\n });\n setMonth(today);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Today\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(yesterday);\n setMonth(yesterday.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Yesterday\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(last7Days);\n setMonth(last7Days.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Last 7 days\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(last30Days);\n setMonth(last30Days.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Last 30 days\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(monthToDate);\n setMonth(monthToDate.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Month to date\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(lastMonth);\n setMonth(lastMonth.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Last month\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(yearToDate);\n setMonth(yearToDate.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Year to date\n </Button>\n <Button\n className=\"w-full justify-start\"\n onClick={() => {\n setDate(lastYear);\n setMonth(lastYear.to);\n }}\n size=\"sm\"\n variant=\"ghost\"\n >\n Last year\n </Button>\n </div>\n </div>\n <Calendar\n className=\"max-sm:pb-3 sm:ps-5\"\n disabled={[{ after: today }]}\n mode=\"range\"\n month={month}\n onMonthChange={setMonth}\n onSelect={(newDate) => {\n if (newDate) {\n setDate(newDate);\n }\n }}\n selected={date}\n />\n </div>\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-22.tsx",
|
||||
"content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const today = new Date();\n const [date, setDate] = useState<DateRange | undefined>({\n from: today,\n to: addDays(today, 25),\n });\n\n return (\n <Calendar\n classNames={{\n month:\n \"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\",\n months: \"gap-8\",\n }}\n mode=\"range\"\n numberOfMonths={2}\n onSelect={setDate}\n pagedNavigation\n selected={date}\n showOutsideDays={false}\n />\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const today = new Date();\n const [date, setDate] = useState<DateRange | undefined>({\n from: today,\n to: addDays(today, 25),\n });\n\n return (\n <Calendar\n classNames={{\n month:\n \"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\",\n months: \"gap-8\",\n }}\n mode=\"range\"\n numberOfMonths={2}\n onSelect={setDate}\n pagedNavigation\n selected={date}\n showOutsideDays={false}\n />\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-23.tsx",
|
||||
"content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const today = new Date();\n const [date, setDate] = useState<DateRange | undefined>({\n from: today,\n to: addDays(today, 48),\n });\n\n return (\n <Calendar\n classNames={{\n month:\n \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n months: \"sm:flex-col md:flex-row gap-8\",\n }}\n mode=\"range\"\n numberOfMonths={3}\n onSelect={setDate}\n pagedNavigation\n selected={date}\n showOutsideDays={false}\n />\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const today = new Date();\n const [date, setDate] = useState<DateRange | undefined>({\n from: today,\n to: addDays(today, 48),\n });\n\n return (\n <Calendar\n classNames={{\n month:\n \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n months: \"sm:flex-col md:flex-row gap-8\",\n }}\n mode=\"range\"\n numberOfMonths={3}\n onSelect={setDate}\n pagedNavigation\n selected={date}\n showOutsideDays={false}\n />\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-24.tsx",
|
||||
"content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport type { DayButtonProps } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Particle() {\n const today = new Date();\n const [date, setDate] = useState<Date | undefined>(today);\n\n const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n {},\n );\n useEffect(() => {\n const generateMockPriceData = () => {\n const data: Record<string, number> = {};\n const todayDate = new Date();\n\n for (let i = 0; i < 180; i++) {\n const date = new Date(todayDate);\n date.setDate(todayDate.getDate() + i);\n const dateKey = format(date, \"yyyy-MM-dd\");\n const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n data[dateKey] = randomPrice;\n }\n return data;\n };\n setMockPriceData(generateMockPriceData());\n }, []);\n\n const isDateDisabled = (date: Date) => {\n return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n };\n\n return (\n <Calendar\n classNames={{\n day_button: \"size-12\",\n month:\n \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n months: \"sm:flex-col md:flex-row gap-8\",\n today: \"*:after:hidden\",\n weekday: \"w-12\",\n }}\n components={{\n DayButton: (props: DayButtonProps) => (\n <DayButton {...props} prices={mockPriceData} />\n ),\n }}\n disabled={isDateDisabled}\n mode=\"single\"\n numberOfMonths={2}\n onSelect={setDate}\n pagedNavigation\n selected={date}\n showOutsideDays={false}\n />\n );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n const { day, prices, modifiers: _modifiers, ...buttonProps } = props;\n const price = prices[format(day.date, \"yyyy-MM-dd\")];\n const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD;\n\n return (\n <button {...buttonProps}>\n <span className=\"flex flex-col\">\n {props.children}\n {price && (\n <span\n className={cn(\n \"font-normal text-xs\",\n isGoodPrice\n ? \"text-emerald-500\"\n : \"in-data-selected:text-primary-foreground/70 text-muted-foreground\",\n )}\n >\n ${price}\n </span>\n )}\n </span>\n </button>\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DayButtonProps } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Particle() {\n const today = new Date();\n const [date, setDate] = useState<Date | undefined>(today);\n\n const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n {},\n );\n useEffect(() => {\n const generateMockPriceData = () => {\n const data: Record<string, number> = {};\n const todayDate = new Date();\n\n for (let i = 0; i < 180; i++) {\n const date = new Date(todayDate);\n date.setDate(todayDate.getDate() + i);\n const dateKey = format(date, \"yyyy-MM-dd\");\n const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n data[dateKey] = randomPrice;\n }\n return data;\n };\n setMockPriceData(generateMockPriceData());\n }, []);\n\n const isDateDisabled = (date: Date) => {\n return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n };\n\n return (\n <Calendar\n classNames={{\n day_button: \"size-12\",\n month:\n \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n months: \"sm:flex-col md:flex-row gap-8\",\n today: \"*:after:hidden\",\n weekday: \"w-12\",\n }}\n components={{\n DayButton: (props: DayButtonProps) => (\n <DayButton {...props} prices={mockPriceData} />\n ),\n }}\n disabled={isDateDisabled}\n mode=\"single\"\n numberOfMonths={2}\n onSelect={setDate}\n pagedNavigation\n selected={date}\n showOutsideDays={false}\n />\n );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n const { day, prices, modifiers: _modifiers, ...buttonProps } = props;\n const price = prices[format(day.date, \"yyyy-MM-dd\")];\n const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD;\n\n return (\n <button {...buttonProps}>\n <span className=\"flex flex-col\">\n {props.children}\n {price && (\n <span\n className={cn(\n \"font-normal text-xs\",\n isGoodPrice\n ? \"text-emerald-500\"\n : \"in-data-selected:text-primary-foreground/70 text-muted-foreground\",\n )}\n >\n ${price}\n </span>\n )}\n </span>\n </button>\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-3.tsx",
|
||||
"content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const [range, setRange] = React.useState<DateRange | undefined>({\n from: new Date(),\n to: new Date(new Date().setDate(new Date().getDate() + 7)),\n });\n\n return <Calendar mode=\"range\" onSelect={setRange} selected={range} />;\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n const [range, setRange] = React.useState<DateRange | undefined>({\n from: new Date(),\n to: new Date(new Date().setDate(new Date().getDate() + 7)),\n });\n\n return <Calendar mode=\"range\" onSelect={setRange} selected={range} />;\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-5.tsx",
|
||||
"content": "\"use client\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Select,\n SelectItem,\n SelectPopup,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/default/ui/select\";\n\nfunction CalendarDropdown(props: DropdownProps) {\n const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n const handleValueChange = (newValue: string | null) => {\n if (onChange && newValue) {\n const syntheticEvent = {\n target: { value: newValue },\n } as React.ChangeEvent<HTMLSelectElement>;\n onChange(syntheticEvent);\n }\n };\n\n const items =\n options?.map((option) => ({\n disabled: option.disabled,\n label: option.label,\n value: option.value.toString(),\n })) ?? [];\n\n return (\n <Select\n aria-label={ariaLabel}\n items={items}\n onValueChange={handleValueChange}\n value={value?.toString()}\n >\n <SelectTrigger className=\"min-w-none\">\n <SelectValue />\n </SelectTrigger>\n <SelectPopup>\n {items.map((item) => (\n <SelectItem\n disabled={item.disabled}\n key={item.value}\n value={item.value}\n >\n {item.label}\n </SelectItem>\n ))}\n </SelectPopup>\n </Select>\n );\n}\n\nexport default function Particle() {\n const [date, setDate] = React.useState<Date | undefined>(new Date());\n return (\n <Calendar\n captionLayout=\"dropdown\"\n components={{ Dropdown: CalendarDropdown }}\n endMonth={new Date(2030, 11)}\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n startMonth={new Date(1930, 0)}\n />\n );\n}\n",
|
||||
"content": "\"use client\";\nimport type { DropdownProps } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Select,\n SelectItem,\n SelectPopup,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/default/ui/select\";\n\nfunction CalendarDropdown(props: DropdownProps) {\n const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n const handleValueChange = (newValue: string | null) => {\n if (onChange && newValue) {\n const syntheticEvent = {\n target: { value: newValue },\n } as React.ChangeEvent<HTMLSelectElement>;\n onChange(syntheticEvent);\n }\n };\n\n const items =\n options?.map((option) => ({\n disabled: option.disabled,\n label: option.label,\n value: option.value.toString(),\n })) ?? [];\n\n return (\n <Select\n aria-label={ariaLabel}\n items={items}\n onValueChange={handleValueChange}\n value={value?.toString()}\n >\n <SelectTrigger className=\"min-w-none\">\n <SelectValue />\n </SelectTrigger>\n <SelectPopup>\n {items.map((item) => (\n <SelectItem\n disabled={item.disabled}\n key={item.value}\n value={item.value}\n >\n {item.label}\n </SelectItem>\n ))}\n </SelectPopup>\n </Select>\n );\n}\n\nexport default function Particle() {\n const [date, setDate] = React.useState<Date | undefined>(new Date());\n return (\n <Calendar\n captionLayout=\"dropdown\"\n components={{ Dropdown: CalendarDropdown }}\n endMonth={new Date(2030, 11)}\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n startMonth={new Date(1930, 0)}\n />\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-calendar-6.tsx",
|
||||
"content": "\"use client\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Combobox,\n ComboboxEmpty,\n ComboboxInput,\n ComboboxItem,\n ComboboxList,\n ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n disabled?: boolean;\n label: string;\n value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n const items: DropdownItem[] =\n options?.map((option) => ({\n disabled: option.disabled,\n label: option.label,\n value: option.value.toString(),\n })) ?? [];\n\n const selectedItem = items.find((item) => item.value === value?.toString());\n\n const handleValueChange = (newValue: DropdownItem | null) => {\n if (onChange && newValue) {\n const syntheticEvent = {\n target: { value: newValue.value },\n } as React.ChangeEvent<HTMLSelectElement>;\n onChange(syntheticEvent);\n }\n };\n\n return (\n <Combobox\n aria-label={ariaLabel}\n autoHighlight\n items={items}\n onValueChange={handleValueChange}\n value={selectedItem}\n >\n <ComboboxInput\n className=\"**:[input]:w-0 **:[input]:flex-1\"\n onFocus={(e) => e.currentTarget.select()}\n />\n <ComboboxPopup aria-label={ariaLabel}>\n <ComboboxEmpty>No items found.</ComboboxEmpty>\n <ComboboxList>\n {(item: DropdownItem) => (\n <ComboboxItem\n disabled={item.disabled}\n key={item.value}\n value={item}\n >\n {item.label}\n </ComboboxItem>\n )}\n </ComboboxList>\n </ComboboxPopup>\n </Combobox>\n );\n}\n\nexport default function Particle() {\n const [date, setDate] = React.useState<Date | undefined>(new Date());\n return (\n <Calendar\n captionLayout=\"dropdown\"\n components={{ Dropdown: CalendarDropdown }}\n endMonth={new Date(2030, 11)}\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n startMonth={new Date(1930, 0)}\n />\n );\n}\n",
|
||||
"content": "\"use client\";\nimport type { DropdownProps } from \"@daypicker/react\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Combobox,\n ComboboxEmpty,\n ComboboxInput,\n ComboboxItem,\n ComboboxList,\n ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n disabled?: boolean;\n label: string;\n value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n const items: DropdownItem[] =\n options?.map((option) => ({\n disabled: option.disabled,\n label: option.label,\n value: option.value.toString(),\n })) ?? [];\n\n const selectedItem = items.find((item) => item.value === value?.toString());\n\n const handleValueChange = (newValue: DropdownItem | null) => {\n if (onChange && newValue) {\n const syntheticEvent = {\n target: { value: newValue.value },\n } as React.ChangeEvent<HTMLSelectElement>;\n onChange(syntheticEvent);\n }\n };\n\n return (\n <Combobox\n aria-label={ariaLabel}\n autoHighlight\n items={items}\n onValueChange={handleValueChange}\n value={selectedItem}\n >\n <ComboboxInput\n className=\"**:[input]:w-0 **:[input]:flex-1\"\n onFocus={(e) => e.currentTarget.select()}\n />\n <ComboboxPopup aria-label={ariaLabel}>\n <ComboboxEmpty>No items found.</ComboboxEmpty>\n <ComboboxList>\n {(item: DropdownItem) => (\n <ComboboxItem\n disabled={item.disabled}\n key={item.value}\n value={item}\n >\n {item.label}\n </ComboboxItem>\n )}\n </ComboboxList>\n </ComboboxPopup>\n </Combobox>\n );\n}\n\nexport default function Particle() {\n const [date, setDate] = React.useState<Date | undefined>(new Date());\n return (\n <Calendar\n captionLayout=\"dropdown\"\n components={{ Dropdown: CalendarDropdown }}\n endMonth={new Date(2030, 11)}\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n startMonth={new Date(1930, 0)}\n />\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-date-picker-2.tsx",
|
||||
"content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Popover,\n PopoverPopup,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n const [date, setDate] = useState<DateRange | undefined>();\n\n return (\n <Popover>\n <PopoverTrigger\n render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n >\n <CalendarIcon aria-hidden=\"true\" />\n {date?.from ? (\n date.to ? (\n <>\n {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n </>\n ) : (\n format(date.from, \"LLL dd, y\")\n )\n ) : (\n <span>Pick a date range</span>\n )}\n </PopoverTrigger>\n <PopoverPopup>\n <Calendar\n defaultMonth={date?.from}\n mode=\"range\"\n onSelect={setDate}\n selected={date}\n />\n </PopoverPopup>\n </Popover>\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Popover,\n PopoverPopup,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n const [date, setDate] = useState<DateRange | undefined>();\n\n return (\n <Popover>\n <PopoverTrigger\n render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n >\n <CalendarIcon aria-hidden=\"true\" />\n {date?.from ? (\n date.to ? (\n <>\n {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n </>\n ) : (\n format(date.from, \"LLL dd, y\")\n )\n ) : (\n <span>Pick a date range</span>\n )}\n </PopoverTrigger>\n <PopoverPopup>\n <Calendar\n defaultMonth={date?.from}\n mode=\"range\"\n onSelect={setDate}\n selected={date}\n />\n </PopoverPopup>\n </Popover>\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-date-picker-3.tsx",
|
||||
"content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Combobox,\n ComboboxEmpty,\n ComboboxInput,\n ComboboxItem,\n ComboboxList,\n ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n Popover,\n PopoverPopup,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\ninterface DropdownItem {\n disabled?: boolean;\n label: string;\n value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n const items: DropdownItem[] =\n options?.map((option) => ({\n disabled: option.disabled,\n label: option.label,\n value: option.value.toString(),\n })) ?? [];\n\n const selectedItem = items.find((item) => item.value === value?.toString());\n\n const handleValueChange = (newValue: DropdownItem | null) => {\n if (onChange && newValue) {\n const syntheticEvent = {\n target: { value: newValue.value },\n } as React.ChangeEvent<HTMLSelectElement>;\n onChange(syntheticEvent);\n }\n };\n\n return (\n <Combobox\n aria-label={ariaLabel}\n autoHighlight\n items={items}\n onValueChange={handleValueChange}\n value={selectedItem}\n >\n <ComboboxInput\n className=\"**:[input]:w-0 **:[input]:flex-1\"\n onFocus={(e) => e.currentTarget.select()}\n />\n <ComboboxPopup aria-label={ariaLabel}>\n <ComboboxEmpty>No items found.</ComboboxEmpty>\n <ComboboxList>\n {(item: DropdownItem) => (\n <ComboboxItem\n disabled={item.disabled}\n key={item.value}\n value={item}\n >\n {item.label}\n </ComboboxItem>\n )}\n </ComboboxList>\n </ComboboxPopup>\n </Combobox>\n );\n}\n\nexport default function Particle() {\n const [date, setDate] = React.useState<Date | undefined>();\n const id = React.useId();\n return (\n <Field>\n <FieldLabel htmlFor={id}>Start date</FieldLabel>\n <Popover>\n <PopoverTrigger\n id={id}\n render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n >\n <CalendarIcon aria-hidden=\"true\" />\n {date ? format(date, \"PPP\") : \"Pick a date\"}\n </PopoverTrigger>\n <PopoverPopup>\n <Calendar\n captionLayout=\"dropdown\"\n components={{ Dropdown: CalendarDropdown }}\n defaultMonth={date}\n endMonth={new Date()}\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n startMonth={new Date(1900, 0)}\n />\n </PopoverPopup>\n </Popover>\n </Field>\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DropdownProps } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Combobox,\n ComboboxEmpty,\n ComboboxInput,\n ComboboxItem,\n ComboboxList,\n ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n Popover,\n PopoverPopup,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\ninterface DropdownItem {\n disabled?: boolean;\n label: string;\n value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n const items: DropdownItem[] =\n options?.map((option) => ({\n disabled: option.disabled,\n label: option.label,\n value: option.value.toString(),\n })) ?? [];\n\n const selectedItem = items.find((item) => item.value === value?.toString());\n\n const handleValueChange = (newValue: DropdownItem | null) => {\n if (onChange && newValue) {\n const syntheticEvent = {\n target: { value: newValue.value },\n } as React.ChangeEvent<HTMLSelectElement>;\n onChange(syntheticEvent);\n }\n };\n\n return (\n <Combobox\n aria-label={ariaLabel}\n autoHighlight\n items={items}\n onValueChange={handleValueChange}\n value={selectedItem}\n >\n <ComboboxInput\n className=\"**:[input]:w-0 **:[input]:flex-1\"\n onFocus={(e) => e.currentTarget.select()}\n />\n <ComboboxPopup aria-label={ariaLabel}>\n <ComboboxEmpty>No items found.</ComboboxEmpty>\n <ComboboxList>\n {(item: DropdownItem) => (\n <ComboboxItem\n disabled={item.disabled}\n key={item.value}\n value={item}\n >\n {item.label}\n </ComboboxItem>\n )}\n </ComboboxList>\n </ComboboxPopup>\n </Combobox>\n );\n}\n\nexport default function Particle() {\n const [date, setDate] = React.useState<Date | undefined>();\n const id = React.useId();\n return (\n <Field>\n <FieldLabel htmlFor={id}>Start date</FieldLabel>\n <Popover>\n <PopoverTrigger\n id={id}\n render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n >\n <CalendarIcon aria-hidden=\"true\" />\n {date ? format(date, \"PPP\") : \"Pick a date\"}\n </PopoverTrigger>\n <PopoverPopup>\n <Calendar\n captionLayout=\"dropdown\"\n components={{ Dropdown: CalendarDropdown }}\n defaultMonth={date}\n endMonth={new Date()}\n mode=\"single\"\n onSelect={setDate}\n selected={date}\n startMonth={new Date(1900, 0)}\n />\n </PopoverPopup>\n </Popover>\n </Field>\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/default/particles/p-date-picker-9.tsx",
|
||||
"content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Popover,\n PopoverPopup,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n const [date, setDate] = useState<DateRange | undefined>();\n\n return (\n <Popover>\n <PopoverTrigger\n render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n >\n <CalendarIcon aria-hidden=\"true\" />\n {date?.from ? (\n date.to ? (\n <>\n {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n </>\n ) : (\n format(date.from, \"LLL dd, y\")\n )\n ) : (\n <span>Pick a date range</span>\n )}\n </PopoverTrigger>\n <PopoverPopup>\n <Calendar\n defaultMonth={date?.from}\n mode=\"range\"\n numberOfMonths={2}\n onSelect={setDate}\n selected={date}\n />\n </PopoverPopup>\n </Popover>\n );\n}\n",
|
||||
"content": "\"use client\";\n\nimport type { DateRange } from \"@daypicker/react\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n Popover,\n PopoverPopup,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n const [date, setDate] = useState<DateRange | undefined>();\n\n return (\n <Popover>\n <PopoverTrigger\n render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n >\n <CalendarIcon aria-hidden=\"true\" />\n {date?.from ? (\n date.to ? (\n <>\n {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n </>\n ) : (\n format(date.from, \"LLL dd, y\")\n )\n ) : (\n <span>Pick a date range</span>\n )}\n </PopoverTrigger>\n <PopoverPopup>\n <Calendar\n defaultMonth={date?.from}\n mode=\"range\"\n numberOfMonths={2}\n onSelect={setDate}\n selected={date}\n />\n </PopoverPopup>\n </Popover>\n );\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -219,7 +219,7 @@
|
||||
},
|
||||
{
|
||||
"dependencies": [
|
||||
"react-day-picker",
|
||||
"@daypicker/react",
|
||||
"lucide-react"
|
||||
],
|
||||
"files": [
|
||||
|
||||
@@ -219,7 +219,7 @@
|
||||
},
|
||||
{
|
||||
"dependencies": [
|
||||
"react-day-picker",
|
||||
"@daypicker/react",
|
||||
"lucide-react"
|
||||
],
|
||||
"files": [
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import type { DateRange } from "@daypicker/react";
|
||||
import { addDays } from "date-fns";
|
||||
import { useState } from "react";
|
||||
import type { DateRange } from "react-day-picker";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
|
||||
export default function Particle() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import type { WeekNumberProps } from "@daypicker/react";
|
||||
import { useState } from "react";
|
||||
import type { WeekNumberProps } from "react-day-picker";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
|
||||
export default function Particle() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import type { DropdownProps } from "@daypicker/react";
|
||||
import * as React from "react";
|
||||
import type { DropdownProps } from "react-day-picker";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
import {
|
||||
Combobox,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import type { DropdownNavProps, DropdownProps } from "@daypicker/react";
|
||||
import { useState } from "react";
|
||||
import type { DropdownNavProps, DropdownProps } from "react-day-picker";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
import {
|
||||
Select,
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import type { DateRange } from "@daypicker/react";
|
||||
import {
|
||||
endOfMonth,
|
||||
endOfYear,
|
||||
@@ -10,7 +11,6 @@ import {
|
||||
subYears,
|
||||
} from "date-fns";
|
||||
import { useState } from "react";
|
||||
import type { DateRange } from "react-day-picker";
|
||||
import { Button } from "@/registry/default/ui/button";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import type { DateRange } from "@daypicker/react";
|
||||
import { addDays } from "date-fns";
|
||||
import { useState } from "react";
|
||||
import type { DateRange } from "react-day-picker";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
|
||||
export default function Particle() {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import type { DateRange } from "@daypicker/react";
|
||||
import { addDays } from "date-fns";
|
||||
import { useState } from "react";
|
||||
import type { DateRange } from "react-day-picker";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
|
||||
export default function Particle() {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import type { DayButtonProps } from "@daypicker/react";
|
||||
import { format } from "date-fns";
|
||||
import { useEffect, useState } from "react";
|
||||
import type { DayButtonProps } from "react-day-picker";
|
||||
import { cn } from "@/registry/default/lib/utils";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import type { DateRange } from "@daypicker/react";
|
||||
import * as React from "react";
|
||||
import type { DateRange } from "react-day-picker";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
|
||||
export default function Particle() {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
import type { DropdownProps } from "@daypicker/react";
|
||||
import * as React from "react";
|
||||
import type { DropdownProps } from "react-day-picker";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
import {
|
||||
Select,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
import type { DropdownProps } from "@daypicker/react";
|
||||
import * as React from "react";
|
||||
import type { DropdownProps } from "react-day-picker";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
import {
|
||||
Combobox,
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import type { DateRange } from "@daypicker/react";
|
||||
import { format } from "date-fns";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import type { DateRange } from "react-day-picker";
|
||||
import { Button } from "@/registry/default/ui/button";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
import {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import type { DropdownProps } from "@daypicker/react";
|
||||
import { format } from "date-fns";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import type { DropdownProps } from "react-day-picker";
|
||||
import { Button } from "@/registry/default/ui/button";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
import {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import type { DateRange } from "@daypicker/react";
|
||||
import { format } from "date-fns";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import type { DateRange } from "react-day-picker";
|
||||
import { Button } from "@/registry/default/ui/button";
|
||||
import { Calendar } from "@/registry/default/ui/calendar";
|
||||
import {
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { DayPicker } from "@daypicker/react";
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
ChevronsUpDownIcon,
|
||||
} from "lucide-react";
|
||||
import type * as React from "react";
|
||||
import { DayPicker } from "react-day-picker";
|
||||
import { cn } from "@/registry/default/lib/utils";
|
||||
|
||||
const buttonClassNames =
|
||||
@@ -28,7 +28,7 @@ export function Calendar({
|
||||
day: "size-(--cell-size) text-sm py-px",
|
||||
day_button: cn(
|
||||
buttonClassNames,
|
||||
"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
|
||||
"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
|
||||
),
|
||||
dropdown: "absolute bg-popover inset-0 opacity-0",
|
||||
dropdown_root:
|
||||
@@ -47,7 +47,7 @@ export function Calendar({
|
||||
range_middle: "range-middle",
|
||||
range_start: "range-start",
|
||||
today:
|
||||
"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",
|
||||
"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30",
|
||||
week_number:
|
||||
"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",
|
||||
weekday:
|
||||
|
||||
@@ -199,7 +199,7 @@ export const ui: Registry["items"] = [
|
||||
type: "registry:ui",
|
||||
},
|
||||
{
|
||||
dependencies: ["react-day-picker", "lucide-react"],
|
||||
dependencies: ["@daypicker/react", "lucide-react"],
|
||||
files: [
|
||||
{
|
||||
path: "ui/calendar.tsx",
|
||||
|
||||
@@ -14,7 +14,7 @@ npx shadcn@latest add @coss/calendar
|
||||
Manual deps from docs:
|
||||
|
||||
```bash
|
||||
npm install react-day-picker
|
||||
npm install @daypicker/react
|
||||
```
|
||||
|
||||
## Canonical imports
|
||||
|
||||
@@ -3,9 +3,6 @@
|
||||
"workspaces": {
|
||||
"": {
|
||||
"name": "cosscom",
|
||||
"dependencies": {
|
||||
"react-day-picker": "^9.13.0",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "2.3.10",
|
||||
"husky": "^9.1.7",
|
||||
@@ -19,6 +16,7 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@coss/ui": "workspace:*",
|
||||
"@daypicker/react": "^10.0.1",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
@@ -108,6 +106,7 @@
|
||||
"dependencies": {
|
||||
"@base-ui/react": "1.6.0",
|
||||
"@coss/ui": "workspace:*",
|
||||
"@daypicker/react": "10.0.1",
|
||||
"@hugeicons/core-free-icons": "^2.0.0",
|
||||
"@hugeicons/react": "^1.1.1",
|
||||
"@remixicon/react": "^4.7.0",
|
||||
@@ -121,7 +120,6 @@
|
||||
"lucide-react": "^0.555.0",
|
||||
"next": "16.2.5",
|
||||
"react": "^19.2.6",
|
||||
"react-day-picker": "^9.13.0",
|
||||
"react-dom": "^19.2.6",
|
||||
"shadcn": "^4.1.0",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
@@ -175,6 +173,7 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@base-ui/react": "1.6.0",
|
||||
"@daypicker/react": "^10.0.1",
|
||||
"@hugeicons/core-free-icons": "^2.0.0",
|
||||
"@hugeicons/react": "^1.1.1",
|
||||
"@shikijs/transformers": "^3.15.0",
|
||||
@@ -303,6 +302,8 @@
|
||||
|
||||
"@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="],
|
||||
|
||||
"@daypicker/react": ["@daypicker/react@10.0.1", "", { "dependencies": { "react-day-picker": "10.0.1" }, "peerDependencies": { "@types/react": ">=16.8.0", "react": ">=16.8.0" }, "optionalPeers": ["@types/react"] }, "sha512-lH4YQz4iMBWP8hsI1bD9Eg0T7t503IkSUR/WDGGkV5mKZvwVv+ukCkJz7yN+uVFBv7vHTK+ww7a5EvlkeFwPYQ=="],
|
||||
|
||||
"@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "2.8.1" }, "peerDependencies": { "react": "19.2.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],
|
||||
|
||||
"@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "3.1.1", "@dnd-kit/utilities": "3.2.2", "tslib": "2.8.1" }, "peerDependencies": { "react": "19.2.0", "react-dom": "19.2.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
|
||||
@@ -903,6 +904,8 @@
|
||||
|
||||
"@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
|
||||
|
||||
"@tabby_ai/hijri-converter": ["@tabby_ai/hijri-converter@1.0.5", "", {}, "sha512-r5bClKrcIusDoo049dSL8CawnHR6mRdDwhlQuIgZRNty68q0x8k3Lf1BtPAMxRf/GgnHBnIO4ujd3+GQdLWzxQ=="],
|
||||
|
||||
"@tailwindcss/node": ["@tailwindcss/node@4.1.17", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.17" } }, "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg=="],
|
||||
|
||||
"@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.17", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.17", "@tailwindcss/oxide-darwin-arm64": "4.1.17", "@tailwindcss/oxide-darwin-x64": "4.1.17", "@tailwindcss/oxide-freebsd-x64": "4.1.17", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17", "@tailwindcss/oxide-linux-arm64-musl": "4.1.17", "@tailwindcss/oxide-linux-x64-gnu": "4.1.17", "@tailwindcss/oxide-linux-x64-musl": "4.1.17", "@tailwindcss/oxide-wasm32-wasi": "4.1.17", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17", "@tailwindcss/oxide-win32-x64-msvc": "4.1.17" } }, "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA=="],
|
||||
@@ -1887,7 +1890,7 @@
|
||||
|
||||
"react-aria-components": ["react-aria-components@1.13.0", "", { "dependencies": { "@internationalized/date": "^3.10.0", "@internationalized/string": "^3.2.7", "@react-aria/autocomplete": "3.0.0-rc.3", "@react-aria/collections": "^3.0.0", "@react-aria/dnd": "^3.11.3", "@react-aria/focus": "^3.21.2", "@react-aria/interactions": "^3.25.6", "@react-aria/live-announcer": "^3.4.4", "@react-aria/overlays": "^3.30.0", "@react-aria/ssr": "^3.9.10", "@react-aria/textfield": "^3.18.2", "@react-aria/toolbar": "3.0.0-beta.21", "@react-aria/utils": "^3.31.0", "@react-aria/virtualizer": "^4.1.10", "@react-stately/autocomplete": "3.0.0-beta.3", "@react-stately/layout": "^4.5.1", "@react-stately/selection": "^3.20.6", "@react-stately/table": "^3.15.1", "@react-stately/utils": "^3.10.8", "@react-stately/virtualizer": "^4.4.4", "@react-types/form": "^3.7.16", "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0", "client-only": "^0.0.1", "react-aria": "^3.44.0", "react-stately": "^3.42.0", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-t1mm3AVy/MjUJBZ7zrb+sFC5iya8Vvw3go3mGKtTm269bXGZho7BLA4IgT+0nOS3j+ku6ChVi8NEoQVFoYzJJA=="],
|
||||
|
||||
"react-day-picker": ["react-day-picker@9.13.0", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "date-fns": "^4.1.0", "date-fns-jalali": "^4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-euzj5Hlq+lOHqI53NiuNhCP8HWgsPf/bBAVijR50hNaY1XwjKjShAnIe8jm8RD2W9IJUvihDIZ+KrmqfFzNhFQ=="],
|
||||
"react-day-picker": ["react-day-picker@9.14.0", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "@tabby_ai/hijri-converter": "1.0.5", "date-fns": "^4.1.0", "date-fns-jalali": "4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA=="],
|
||||
|
||||
"react-dom": ["react-dom@19.2.6", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.6" } }, "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g=="],
|
||||
|
||||
@@ -2275,6 +2278,8 @@
|
||||
|
||||
"@cspotcode/source-map-support/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.9", "", { "dependencies": { "@jridgewell/resolve-uri": "3.1.2", "@jridgewell/sourcemap-codec": "1.5.4" } }, "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ=="],
|
||||
|
||||
"@daypicker/react/react-day-picker": ["react-day-picker@10.0.1", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "date-fns": "^4.1.0" }, "peerDependencies": { "@types/react": ">=16.8.0", "react": ">=16.8.0" }, "optionalPeers": ["@types/react"] }, "sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w=="],
|
||||
|
||||
"@dnd-kit/accessibility/react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
|
||||
|
||||
"@dnd-kit/core/react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
|
||||
|
||||
+2
-5
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"react-day-picker": "^9.13.0"
|
||||
},
|
||||
"name": "cosscom",
|
||||
"version": "0.0.1",
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "2.3.10",
|
||||
"husky": "^9.1.7",
|
||||
@@ -13,7 +12,6 @@
|
||||
"bun": ">=1.3.1"
|
||||
},
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"name": "cosscom",
|
||||
"packageManager": "bun@1.3.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -27,7 +25,6 @@
|
||||
"test": "bun test --pass-with-no-tests",
|
||||
"typecheck": "turbo run typecheck"
|
||||
},
|
||||
"version": "0.0.1",
|
||||
"workspaces": [
|
||||
"apps/*",
|
||||
"apps/examples/*",
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"@base-ui/react": "1.6.0",
|
||||
"@daypicker/react": "^10.0.1",
|
||||
"@hugeicons/core-free-icons": "^2.0.0",
|
||||
"@hugeicons/react": "^1.1.1",
|
||||
"@shikijs/transformers": "^3.15.0",
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@coss/ui/lib/utils";
|
||||
import { DayPicker } from "@daypicker/react";
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
ChevronsUpDownIcon,
|
||||
} from "lucide-react";
|
||||
import type * as React from "react";
|
||||
import { DayPicker } from "react-day-picker";
|
||||
|
||||
const buttonClassNames =
|
||||
"relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
|
||||
@@ -28,7 +28,7 @@ export function Calendar({
|
||||
day: "size-(--cell-size) text-sm py-px",
|
||||
day_button: cn(
|
||||
buttonClassNames,
|
||||
"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
|
||||
"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
|
||||
),
|
||||
dropdown: "absolute bg-popover inset-0 opacity-0",
|
||||
dropdown_root:
|
||||
@@ -47,7 +47,7 @@ export function Calendar({
|
||||
range_middle: "range-middle",
|
||||
range_start: "range-start",
|
||||
today:
|
||||
"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",
|
||||
"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30",
|
||||
week_number:
|
||||
"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",
|
||||
weekday:
|
||||
|
||||
Reference in New Issue
Block a user