{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar",
  "type": "registry:ui",
  "dependencies": [
    "lucide-react",
    "react-day-picker"
  ],
  "files": [
    {
      "path": "components/ui/calendar.tsx",
      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport {\r\n  ChevronDownIcon,\r\n  ChevronLeftIcon,\r\n  ChevronRightIcon,\r\n} from \"lucide-react\"\r\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button, buttonVariants } from \"@/components/ui/button\"\r\n\r\nfunction Calendar({\r\n  className,\r\n  classNames,\r\n  showOutsideDays = true,\r\n  captionLayout = \"label\",\r\n  buttonVariant = \"ghost\",\r\n  formatters,\r\n  components,\r\n  ...props\r\n}: React.ComponentProps<typeof DayPicker> & {\r\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\r\n}) {\r\n  const defaultClassNames = getDefaultClassNames()\r\n\r\n  return (\r\n    <DayPicker\r\n      showOutsideDays={showOutsideDays}\r\n      className={cn(\r\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\r\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\r\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\r\n        className\r\n      )}\r\n      captionLayout={captionLayout}\r\n      formatters={{\r\n        formatMonthDropdown: (date) =>\r\n          date.toLocaleString(\"default\", { month: \"short\" }),\r\n        ...formatters,\r\n      }}\r\n      classNames={{\r\n        root: cn(\"w-fit\", defaultClassNames.root),\r\n        months: cn(\r\n          \"flex gap-4 flex-col md:flex-row relative\",\r\n          defaultClassNames.months\r\n        ),\r\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\r\n        nav: cn(\r\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\r\n          defaultClassNames.nav\r\n        ),\r\n        button_previous: cn(\r\n          buttonVariants({ variant: buttonVariant }),\r\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\r\n          defaultClassNames.button_previous\r\n        ),\r\n        button_next: cn(\r\n          buttonVariants({ variant: buttonVariant }),\r\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\r\n          defaultClassNames.button_next\r\n        ),\r\n        month_caption: cn(\r\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\r\n          defaultClassNames.month_caption\r\n        ),\r\n        dropdowns: cn(\r\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\r\n          defaultClassNames.dropdowns\r\n        ),\r\n        dropdown_root: cn(\r\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\r\n          defaultClassNames.dropdown_root\r\n        ),\r\n        dropdown: cn(\r\n          \"absolute bg-popover inset-0 opacity-0\",\r\n          defaultClassNames.dropdown\r\n        ),\r\n        caption_label: cn(\r\n          \"select-none font-medium\",\r\n          captionLayout === \"label\"\r\n            ? \"text-sm\"\r\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\r\n          defaultClassNames.caption_label\r\n        ),\r\n        table: \"w-full border-collapse\",\r\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\r\n        weekday: cn(\r\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\r\n          defaultClassNames.weekday\r\n        ),\r\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\r\n        week_number_header: cn(\r\n          \"select-none w-(--cell-size)\",\r\n          defaultClassNames.week_number_header\r\n        ),\r\n        week_number: cn(\r\n          \"text-[0.8rem] select-none text-muted-foreground\",\r\n          defaultClassNames.week_number\r\n        ),\r\n        day: cn(\r\n          \"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\r\n          props.showWeekNumber\r\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md\"\r\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-md\",\r\n          defaultClassNames.day\r\n        ),\r\n        range_start: cn(\r\n          \"rounded-l-md bg-accent\",\r\n          defaultClassNames.range_start\r\n        ),\r\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\r\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\r\n        today: cn(\r\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\r\n          defaultClassNames.today\r\n        ),\r\n        outside: cn(\r\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\r\n          defaultClassNames.outside\r\n        ),\r\n        disabled: cn(\r\n          \"text-muted-foreground opacity-50\",\r\n          defaultClassNames.disabled\r\n        ),\r\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\r\n        ...classNames,\r\n      }}\r\n      components={{\r\n        Root: ({ className, rootRef, ...props }) => {\r\n          return (\r\n            <div\r\n              data-slot=\"calendar\"\r\n              ref={rootRef}\r\n              className={cn(className)}\r\n              {...props}\r\n            />\r\n          )\r\n        },\r\n        Chevron: ({ className, orientation, ...props }) => {\r\n          if (orientation === \"left\") {\r\n            return (\r\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\r\n            )\r\n          }\r\n\r\n          if (orientation === \"right\") {\r\n            return (\r\n              <ChevronRightIcon\r\n                className={cn(\"size-4\", className)}\r\n                {...props}\r\n              />\r\n            )\r\n          }\r\n\r\n          return (\r\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\r\n          )\r\n        },\r\n        DayButton: CalendarDayButton,\r\n        WeekNumber: ({ children, ...props }) => {\r\n          return (\r\n            <td {...props}>\r\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\r\n                {children}\r\n              </div>\r\n            </td>\r\n          )\r\n        },\r\n        ...components,\r\n      }}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction CalendarDayButton({\r\n  className,\r\n  day,\r\n  modifiers,\r\n  ...props\r\n}: React.ComponentProps<typeof DayButton>) {\r\n  const defaultClassNames = getDefaultClassNames()\r\n\r\n  const ref = React.useRef<HTMLButtonElement>(null)\r\n  React.useEffect(() => {\r\n    if (modifiers.focused) ref.current?.focus()\r\n  }, [modifiers.focused])\r\n\r\n  return (\r\n    <Button\r\n      ref={ref}\r\n      variant=\"ghost\"\r\n      size=\"icon\"\r\n      data-day={day.date.toLocaleDateString()}\r\n      data-selected-single={\r\n        modifiers.selected &&\r\n        !modifiers.range_start &&\r\n        !modifiers.range_end &&\r\n        !modifiers.range_middle\r\n      }\r\n      data-range-start={modifiers.range_start}\r\n      data-range-end={modifiers.range_end}\r\n      data-range-middle={modifiers.range_middle}\r\n      className={cn(\r\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\r\n        defaultClassNames.day,\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Calendar, CalendarDayButton }\r\n",
      "type": "registry:ui",
      "target": "components/ui/calendar.tsx"
    }
  ]
}