@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/calendar.json

@@ -6,6 +6,504 @@
     "Calendar",
     "CalendarDayButton"
   ],
+  "parts": [
+    {
+      "name": "Calendar",
+      "props": [
+        {
+          "name": "buttonVariant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "default": "\"ghost\"",
+          "description": "Button variant used for the navigation buttons.",
+          "from": "arkcn"
+        },
+        {
+          "name": "animate",
+          "type": "boolean",
+          "required": false,
+          "description": "Animate navigating between months.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "description": "The aria-label attribute to add to the container element.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "required": false,
+          "description": "The aria-labelledby attribute to add to the container element.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "required": false,
+          "description": "When a selection mode is set, DayPicker will focus the first selected day\n(if set) or today's date (if not disabled).\n\nUse this prop when you need to focus DayPicker after a user action, for\nimproved accessibility.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "broadcastCalendar",
+          "type": "boolean",
+          "required": false,
+          "description": "Display the weeks in the month following the broadcast calendar. Setting\nthis prop will ignore {@link weekStartsOn} (always Monday) and\n{@link showOutsideDays} will default to true.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "captionLayout",
+          "type": "\"label\" | \"dropdown\" | \"dropdown-months\" | \"dropdown-years\"",
+          "required": false,
+          "default": "\"label\"",
+          "description": "Show dropdowns to navigate between months or years.\n\n- `label`: Displays the month and year as a label. Default value.\n- `dropdown`: Displays dropdowns for both month and year navigation.\n- `dropdown-months`: Displays a dropdown only for the month navigation.\n- `dropdown-years`: Displays a dropdown only for the year navigation.\n\n**Note:** By default, showing the dropdown will set the {@link startMonth}\nto 100 years ago and {@link endMonth} to the end of the current year. You\ncan override this behavior by explicitly setting `startMonth` and\n`endMonth`.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Class name to add to the root element.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "classNames",
+          "type": "Partial<ClassNames>",
+          "required": false,
+          "description": "Change the class names used by DayPicker.\n\nUse this prop when you need to change the default class names — for\nexample, when importing the style via CSS modules or when using a CSS\nframework.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "components",
+          "type": "Partial<CustomComponents>",
+          "required": false,
+          "description": "Change the components used for rendering the calendar elements.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "dateLib",
+          "type": "Partial<DateLib>",
+          "required": false,
+          "description": "Replace the default date library with a custom one. Experimental: not\nguaranteed to be stable (may not respect semver).",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "defaultMonth",
+          "type": "Date",
+          "required": false,
+          "description": "The initial month to show in the calendar.\n\nUse this prop to let DayPicker control the current month. If you need to\nset the month programmatically, use {@link month} and {@link onMonthChange}.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "dir",
+          "type": "string",
+          "required": false,
+          "description": "The text direction of the calendar. Use `ltr` for left-to-right (default)\nor `rtl` for right-to-left.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "disabled",
+          "type": "Matcher | Matcher[]",
+          "required": false,
+          "description": "Apply the `disabled` modifier to the matching days. Disabled days cannot be\nselected when in a selection mode is set.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "disableNavigation",
+          "type": "boolean",
+          "required": false,
+          "description": "Disable the navigation between months. This prop won't hide the navigation:\nto hide the navigation, use {@link hideNavigation}.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "endMonth",
+          "type": "Date",
+          "required": false,
+          "description": "The latest month to end the month navigation.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "firstWeekContainsDate",
+          "type": "1 | 4",
+          "required": false,
+          "description": "The day of January that is always in the first week of the year.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "fixedWeeks",
+          "type": "boolean",
+          "required": false,
+          "description": "Display always 6 weeks per each month, regardless of the month’s number of\nweeks. Weeks will be filled with the days from the next month.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Add a footer to the calendar, acting as a live region.\n\nUse this prop to communicate the calendar's status to screen readers.\nPrefer strings over complex UI elements.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "formatters",
+          "type": "Partial<Formatters>",
+          "required": false,
+          "description": "Formatters used to format dates to strings. Use this prop to override the\ndefault functions.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "hidden",
+          "type": "Matcher | Matcher[]",
+          "required": false,
+          "description": "Apply the `hidden` modifier to the matching days. Will hide them from the\ncalendar.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "hideNavigation",
+          "type": "boolean",
+          "required": false,
+          "description": "Hide the navigation buttons. This prop won't disable the navigation: to\ndisable the navigation, use {@link disableNavigation}.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "hideWeekdays",
+          "type": "boolean",
+          "required": false,
+          "description": "Hide the row displaying the weekday row header.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "A unique id to add to the root element.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "ISOWeek",
+          "type": "boolean",
+          "required": false,
+          "description": "Use ISO week dates instead of the locale setting. Setting this prop will\nignore `weekStartsOn` and `firstWeekContainsDate`.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "labels",
+          "type": "Partial<Labels>",
+          "required": false,
+          "description": "Labels creators to override the defaults. Use this prop to customize the\naria-label attributes in DayPicker.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "lang",
+          "type": "string",
+          "required": false,
+          "description": "Add the language tag to the container element.\n\nWhen omitted, DayPicker uses the active locale code (`locale.code`). Set\nthis prop to override the language tag.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "locale",
+          "type": "Partial<DayPickerLocale>",
+          "required": false,
+          "description": "The locale object used to localize dates. Pass a locale from\n`react-day-picker/locale` to localize the calendar.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "mode",
+          "type": "\"multiple\" | \"single\" | \"range\"",
+          "required": false,
+          "description": "Enable the selection of a single day, multiple days, or a range of days.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "modifiers",
+          "type": "Record<string, Matcher | Matcher[] | undefined>",
+          "required": false,
+          "description": "Add modifiers to the matching days.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "modifiersClassNames",
+          "type": "ModifiersClassNames",
+          "required": false,
+          "description": "Change the class name for the day matching the `modifiers`.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "modifiersStyles",
+          "type": "ModifiersStyles",
+          "required": false,
+          "description": "Change the class name for the day matching the {@link modifiers}.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "month",
+          "type": "Date",
+          "required": false,
+          "description": "The month displayed in the calendar.\n\nAs opposed to `defaultMonth`, use this prop with `onMonthChange` to change\nthe month programmatically.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "navLayout",
+          "type": "\"around\" | \"after\"",
+          "required": false,
+          "description": "Adjust the positioning of the navigation buttons.\n\n- `around`: Displays the buttons on either side of the caption.\n- `after`: Displays the buttons after the caption. This ensures the tab order\n  matches the visual order.\n\nIf not set, DayPicker preserves its legacy layout, but the tab order may\nnot align with the visual order when using `captionLayout=\"dropdown\"`.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "nonce",
+          "type": "string",
+          "required": false,
+          "description": "A cryptographic nonce (\"number used once\") which can be used by Content\nSecurity Policy for the inline `style` attributes.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "noonSafe",
+          "type": "boolean",
+          "required": false,
+          "description": "Keep calendar math at noon in the configured {@link timeZone} to avoid\nhistorical second-level offsets drifting dates across midnight.\n\nThis prop sets the time of the dates to noon (12:00).",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "numberOfMonths",
+          "type": "number",
+          "required": false,
+          "description": "The number of displayed months.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "numerals",
+          "type": "Numerals",
+          "required": false,
+          "description": "The numeral system to use when formatting dates.\n\n- `latn`: Latin (Western Arabic)\n- `arab`: Arabic-Indic\n- `arabext`: Eastern Arabic-Indic (Persian)\n- `deva`: Devanagari\n- `beng`: Bengali\n- `guru`: Gurmukhi\n- `gujr`: Gujarati\n- `orya`: Oriya\n- `tamldec`: Tamil\n- `telu`: Telugu\n- `knda`: Kannada\n- `mlym`: Malayalam",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "onDayBlur",
+          "type": "DayEventHandler<FocusEvent<Element, Element>>",
+          "required": false,
+          "description": "Event handler when a day is blurred.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "onDayClick",
+          "type": "DayEventHandler<MouseEvent<Element, MouseEvent>>",
+          "required": false,
+          "description": "Event handler when a day is clicked.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "onDayFocus",
+          "type": "DayEventHandler<FocusEvent<Element, Element>>",
+          "required": false,
+          "description": "Event handler when a day is focused.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "onDayKeyDown",
+          "type": "DayEventHandler<KeyboardEvent<Element>>",
+          "required": false,
+          "description": "Event handler when a key is pressed on a day.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "onDayMouseEnter",
+          "type": "DayEventHandler<MouseEvent<Element, MouseEvent>>",
+          "required": false,
+          "description": "Event handler when the mouse enters a day.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "onDayMouseLeave",
+          "type": "DayEventHandler<MouseEvent<Element, MouseEvent>>",
+          "required": false,
+          "description": "Event handler when the mouse leaves a day.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "onMonthChange",
+          "type": "MonthChangeEventHandler",
+          "required": false,
+          "description": "Event fired when the user navigates between months.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "onNextClick",
+          "type": "MonthChangeEventHandler",
+          "required": false,
+          "description": "Event handler when the next month button is clicked.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "onPrevClick",
+          "type": "MonthChangeEventHandler",
+          "required": false,
+          "description": "Event handler when the previous month button is clicked.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "pagedNavigation",
+          "type": "boolean",
+          "required": false,
+          "description": "Paginate the month navigation displaying the `numberOfMonths` at a time.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the selection is required.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "reverseMonths",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the months in reversed order (when {@link numberOfMonths} is set) to\ndisplay the most recent month first.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "reverseYears",
+          "type": "boolean",
+          "required": false,
+          "description": "Reverse the order of years in the dropdown when using\n`captionLayout=\"dropdown\"` or `captionLayout=\"dropdown-years\"`.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "role",
+          "type": "\"dialog\" | \"application\"",
+          "required": false,
+          "description": "The role attribute to add to the container element.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "showOutsideDays",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Show the outside days (days falling in the next or the previous month).\n\n**Note:** when a {@link broadcastCalendar} is set, this prop defaults to\ntrue.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "showWeekNumber",
+          "type": "boolean",
+          "required": false,
+          "description": "Show the week numbers column. Weeks are numbered according to the local\nweek index.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "startMonth",
+          "type": "Date",
+          "required": false,
+          "description": "The earliest month to start the month navigation.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Style to apply to the root element.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "styles",
+          "type": "Partial<Styles>",
+          "required": false,
+          "description": "Change the inline styles of the HTML elements.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "timeZone",
+          "type": "string",
+          "required": false,
+          "description": "The time zone (IANA or UTC offset) to use in the calendar (experimental).\n\nSee\n[Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)\nfor the possible values.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "description": "Add a `title` attribute to the container element.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "today",
+          "type": "Date",
+          "required": false,
+          "description": "The today’s date. Default is the current date. This date will get the\n`today` modifier to style the day.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "useAdditionalDayOfYearTokens",
+          "type": "boolean",
+          "required": false,
+          "description": "Enable `YY` and `YYYY` for day of year tokens when formatting or parsing\ndates.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "useAdditionalWeekYearTokens",
+          "type": "boolean",
+          "required": false,
+          "description": "Enable `DD` and `DDDD` for week year tokens when formatting or parsing\ndates.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "weekStartsOn",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+          "required": false,
+          "description": "The index of the first day of the week (0 - Sunday). Overrides the locale's\ndefault.",
+          "from": "react-day-picker"
+        }
+      ]
+    },
+    {
+      "name": "CalendarDayButton",
+      "props": [
+        {
+          "name": "locale",
+          "type": "Partial<DayPickerLocale>",
+          "required": false,
+          "description": "date-fns locale for month and weekday names.",
+          "from": "arkcn"
+        },
+        {
+          "name": "day",
+          "type": "CalendarDay",
+          "required": true,
+          "description": "The day to render.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "modifiers",
+          "type": "Modifiers",
+          "required": true,
+          "description": "The modifiers to apply to the day.",
+          "from": "react-day-picker"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "lucide-react": "^1.41.0",
     "react-day-picker": "^10.0.1"
@@ -17,7 +515,7 @@
   "files": [
     {
       "path": "components/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { DayPicker, getDefaultClassNames, type DayButton, type Locale } from \"react-day-picker\"\n\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from \"lucide-react\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\"relative flex flex-col gap-4 md:flex-row\", defaultClassNames.months),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\", defaultClassNames.nav),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\"relative rounded-(--cell-radius)\", defaultClassNames.dropdown_root),\n        dropdown: cn(\"absolute inset-0 bg-popover opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        month_grid: cn(\"w-full border-collapse\", defaultClassNames.month_grid),\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\"w-(--cell-size) select-none\", defaultClassNames.week_number_header),\n        week_number: cn(\"text-[0.8rem] text-muted-foreground select-none\", defaultClassNames.week_number),\n        day: cn(\n          \"group/day relative aspect-square size-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\"text-muted-foreground aria-selected:text-muted-foreground\", defaultClassNames.outside),\n        disabled: cn(\"text-muted-foreground opacity-50\", defaultClassNames.disabled),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n          }\n\n          if (orientation === \"right\") {\n            return <ChevronRightIcon className={cn(\"size-4\", className)} {...props} />\n          }\n\n          return <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n        },\n        DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">{children}</div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { DayPicker, getDefaultClassNames, type DayButton, type Locale } from \"react-day-picker\"\n\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from \"lucide-react\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  /** Button variant used for the navigation buttons. */\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\"relative flex flex-col gap-4 md:flex-row\", defaultClassNames.months),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\", defaultClassNames.nav),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\"relative rounded-(--cell-radius)\", defaultClassNames.dropdown_root),\n        dropdown: cn(\"absolute inset-0 bg-popover opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        month_grid: cn(\"w-full border-collapse\", defaultClassNames.month_grid),\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\"w-(--cell-size) select-none\", defaultClassNames.week_number_header),\n        week_number: cn(\"text-[0.8rem] text-muted-foreground select-none\", defaultClassNames.week_number),\n        day: cn(\n          \"group/day relative aspect-square size-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\"text-muted-foreground aria-selected:text-muted-foreground\", defaultClassNames.outside),\n        disabled: cn(\"text-muted-foreground opacity-50\", defaultClassNames.disabled),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n          }\n\n          if (orientation === \"right\") {\n            return <ChevronRightIcon className={cn(\"size-4\", className)} {...props} />\n          }\n\n          return <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n        },\n        DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">{children}</div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n"
     }
   ]
 }