{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar",
  "title": "Calendar",
  "description": "A date field component that allows users to enter and edit date.",
  "dependencies": [
    "react-day-picker",
    "date-fns",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/button.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/calendar.jsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { DayPicker, getDefaultClassNames } from \"react-day-picker\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button, buttonVariants } from \"@/registry/optics/button\";\nimport {\n\tChevronLeftIcon,\n\tChevronRightIcon,\n\tChevronDownIcon,\n} from \"lucide-react\";\n\nfunction Calendar({\n\tclassName = \"\",\n\tclassNames = undefined,\n\tshowOutsideDays = true,\n\tcaptionLayout = \"label\",\n\tbuttonVariant = \"ghost\",\n\tformatters = undefined,\n\tcomponents = undefined,\n\t...props\n}) {\n\tconst defaultClassNames = getDefaultClassNames();\n\n\treturn (\n\t\t<DayPicker\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\tclassName={cn(\n\t\t\t\t\"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n\t\t\t\tString.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n\t\t\t\tString.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tcaptionLayout={captionLayout}\n\t\t\tformatters={{\n\t\t\t\tformatMonthDropdown: (date) =>\n\t\t\t\t\tdate.toLocaleString(\"default\", { month: \"short\" }),\n\t\t\t\t...formatters,\n\t\t\t}}\n\t\t\tclassNames={{\n\t\t\t\troot: cn(\"w-fit\", defaultClassNames.root),\n\t\t\t\tmonths: cn(\n\t\t\t\t\t\"flex gap-4 flex-col md:flex-row relative\",\n\t\t\t\t\tdefaultClassNames.months,\n\t\t\t\t),\n\t\t\t\tmonth: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n\t\t\t\tnav: cn(\n\t\t\t\t\t\"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n\t\t\t\t\tdefaultClassNames.nav,\n\t\t\t\t),\n\t\t\t\tbutton_previous: cn(\n\t\t\t\t\tbuttonVariants({ variant: buttonVariant }),\n\t\t\t\t\t\"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n\t\t\t\t\tdefaultClassNames.button_previous,\n\t\t\t\t),\n\t\t\t\tbutton_next: cn(\n\t\t\t\t\tbuttonVariants({ variant: buttonVariant }),\n\t\t\t\t\t\"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n\t\t\t\t\tdefaultClassNames.button_next,\n\t\t\t\t),\n\t\t\t\tmonth_caption: cn(\n\t\t\t\t\t\"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n\t\t\t\t\tdefaultClassNames.month_caption,\n\t\t\t\t),\n\t\t\t\tdropdowns: cn(\n\t\t\t\t\t\"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n\t\t\t\t\tdefaultClassNames.dropdowns,\n\t\t\t\t),\n\t\t\t\tdropdown_root: cn(\n\t\t\t\t\t\"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n\t\t\t\t\tdefaultClassNames.dropdown_root,\n\t\t\t\t),\n\t\t\t\tdropdown: cn(\n\t\t\t\t\t\"absolute bg-popover inset-0 opacity-0\",\n\t\t\t\t\tdefaultClassNames.dropdown,\n\t\t\t\t),\n\t\t\t\tcaption_label: cn(\n\t\t\t\t\t\"select-none font-medium\",\n\t\t\t\t\tcaptionLayout === \"label\"\n\t\t\t\t\t\t? \"text-sm\"\n\t\t\t\t\t\t: \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n\t\t\t\t\tdefaultClassNames.caption_label,\n\t\t\t\t),\n\t\t\t\ttable: \"w-full border-collapse\",\n\t\t\t\tweekdays: cn(\"flex\", defaultClassNames.weekdays),\n\t\t\t\tweekday: cn(\n\t\t\t\t\t\"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n\t\t\t\t\tdefaultClassNames.weekday,\n\t\t\t\t),\n\t\t\t\tweek: cn(\"flex w-full mt-2\", defaultClassNames.week),\n\t\t\t\tweek_number_header: cn(\n\t\t\t\t\t\"select-none w-(--cell-size)\",\n\t\t\t\t\tdefaultClassNames.week_number_header,\n\t\t\t\t),\n\t\t\t\tweek_number: cn(\n\t\t\t\t\t\"text-[0.8rem] select-none text-muted-foreground\",\n\t\t\t\t\tdefaultClassNames.week_number,\n\t\t\t\t),\n\t\t\t\tday: cn(\n\t\t\t\t\t\"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n\t\t\t\t\tprops.showWeekNumber\n\t\t\t\t\t\t? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n\t\t\t\t\t\t: \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n\t\t\t\t\tdefaultClassNames.day,\n\t\t\t\t),\n\t\t\t\trange_start: cn(\n\t\t\t\t\t\"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n\t\t\t\t\tdefaultClassNames.range_start,\n\t\t\t\t),\n\t\t\t\trange_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n\t\t\t\trange_end: cn(\n\t\t\t\t\t\"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n\t\t\t\t\tdefaultClassNames.range_end,\n\t\t\t\t),\n\t\t\t\ttoday: cn(\n\t\t\t\t\t\"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n\t\t\t\t\tdefaultClassNames.today,\n\t\t\t\t),\n\t\t\t\toutside: cn(\n\t\t\t\t\t\"text-muted-foreground aria-selected:text-muted-foreground\",\n\t\t\t\t\tdefaultClassNames.outside,\n\t\t\t\t),\n\t\t\t\tdisabled: cn(\n\t\t\t\t\t\"text-muted-foreground opacity-50\",\n\t\t\t\t\tdefaultClassNames.disabled,\n\t\t\t\t),\n\t\t\t\thidden: cn(\"invisible\", defaultClassNames.hidden),\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tcomponents={{\n\t\t\t\tRoot: ({ className, rootRef, ...props }) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tdata-slot=\"calendar\"\n\t\t\t\t\t\t\tref={rootRef}\n\t\t\t\t\t\t\tclassName={cn(className)}\n\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\tChevron: ({ className, orientation, ...props }) => {\n\t\t\t\t\tif (orientation === \"left\") {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (orientation === \"right\") {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\tclassName={cn(\"size-4\", className)}\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\tDayButton: CalendarDayButton,\n\t\t\t\tWeekNumber: ({ children, ...props }) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<td {...props}>\n\t\t\t\t\t\t\t<div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t...components,\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CalendarDayButton({\n\tclassName = \"\",\n\tday = { date: new Date() },\n\tmodifiers = {},\n\t...props\n}) {\n\tconst defaultClassNames = getDefaultClassNames();\n\n\tconst ref = React.useRef(null);\n\tReact.useEffect(() => {\n\t\tif (modifiers.focused) ref.current?.focus();\n\t}, [modifiers.focused]);\n\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"icon\"\n\t\t\tdata-day={day.date.toLocaleDateString()}\n\t\t\tdata-selected-single={\n\t\t\t\tmodifiers.selected &&\n\t\t\t\t!modifiers.range_start &&\n\t\t\t\t!modifiers.range_end &&\n\t\t\t\t!modifiers.range_middle\n\t\t\t}\n\t\t\tdata-range-start={modifiers.range_start}\n\t\t\tdata-range-end={modifiers.range_end}\n\t\t\tdata-range-middle={modifiers.range_middle}\n\t\t\tclassName={cn(\n\t\t\t\t\"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-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-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n\t\t\t\tdefaultClassNames.day,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nCalendar.displayName = \"Calendar\";\nCalendarDayButton.displayName = \"CalendarDayButton\";\n\nexport { Calendar, CalendarDayButton };\n",
      "type": "registry:component",
      "target": "components/optics/calendar.jsx"
    }
  ],
  "type": "registry:component"
}