{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar",
  "title": "Calendar",
  "description": "Date grid built on react-day-picker, used by the date pickers.",
  "dependencies": [
    "lucide-react@^1.48.0",
    "react-day-picker@^10.0.1"
  ],
  "registryDependencies": [
    "https://rdf.dev.360online.com/r/button.json"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/calendar/calendar.tsx",
      "content": "'use client'\n\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'\nimport * as React from 'react'\nimport { type DayButton, DayPicker, getDefaultClassNames, type Locale, useDayPicker } from 'react-day-picker'\n\nimport { Button, buttonVariants } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nfunction Calendar({\n\tclassName,\n\tclassNames,\n\tshowOutsideDays = true,\n\tcaptionLayout = 'label',\n\tbuttonVariant = 'ghost',\n\t// Weeks start on Monday by default, as in the Nordic countries; pass weekStartsOn to override\n\tweekStartsOn = 1,\n\tlocale,\n\tformatters,\n\tcomponents,\n\t...props\n}: React.ComponentProps<typeof DayPicker> & {\n\tbuttonVariant?: React.ComponentProps<typeof Button>['variant']\n}) {\n\tconst defaultClassNames = getDefaultClassNames()\n\n\treturn (\n\t\t<DayPicker\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\tweekStartsOn={weekStartsOn}\n\t\t\tclassName={cn(\n\t\t\t\t'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(9)] in-data-[slot=card-content]:bg-transparent in-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\tlocale={locale}\n\t\t\tformatters={{\n\t\t\t\tformatMonthDropdown: (date) => date.toLocaleString(locale?.code, { 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('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),\n\t\t\t\tmonth: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n\t\t\t\tnav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),\n\t\t\t\tbutton_previous: cn(\n\t\t\t\t\tbuttonVariants({ variant: buttonVariant }),\n\t\t\t\t\t'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',\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) p-0 select-none aria-disabled:opacity-50',\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 h-(--cell-size) w-full items-center justify-center 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'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',\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 rounded-(--cell-radius) has-focus:ring-3 has-focus:ring-ring',\n\t\t\t\t\tdefaultClassNames.dropdown_root,\n\t\t\t\t),\n\t\t\t\tdropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),\n\t\t\t\tcaption_label: cn(\n\t\t\t\t\t'font-medium select-none',\n\t\t\t\t\tcaptionLayout === 'label'\n\t\t\t\t\t\t? 'text-sm'\n\t\t\t\t\t\t: 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',\n\t\t\t\t\tdefaultClassNames.caption_label,\n\t\t\t\t),\n\t\t\t\tmonth_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n\t\t\t\tweekdays: cn('flex', defaultClassNames.weekdays),\n\t\t\t\tweekday: cn(\n\t\t\t\t\t'flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none',\n\t\t\t\t\tdefaultClassNames.weekday,\n\t\t\t\t),\n\t\t\t\tweek: cn('mt-2 flex w-full', defaultClassNames.week),\n\t\t\t\tweek_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),\n\t\t\t\tweek_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),\n\t\t\t\tday: cn(\n\t\t\t\t\t'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',\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'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\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'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\t\t\t\t\tdefaultClassNames.range_end,\n\t\t\t\t),\n\t\t\t\ttoday: cn(\n\t\t\t\t\t'rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none',\n\t\t\t\t\tdefaultClassNames.today,\n\t\t\t\t),\n\t\t\t\toutside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),\n\t\t\t\tdisabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),\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 <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />\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 <ChevronLeftIcon className={cn('size-4', className)} {...props} />\n\t\t\t\t\t}\n\n\t\t\t\t\tif (orientation === 'right') {\n\t\t\t\t\t\treturn <ChevronRightIcon className={cn('size-4', className)} {...props} />\n\t\t\t\t\t}\n\n\t\t\t\t\treturn <ChevronDownIcon className={cn('size-4', className)} {...props} />\n\t\t\t\t},\n\t\t\t\tDayButton: CalendarLocalizedDayButton,\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\">{children}</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\n/** The day button `Calendar` hands to DayPicker: a `CalendarDayButton` in the locale the calendar was given. */\nfunction CalendarLocalizedDayButton(props: Readonly<React.ComponentProps<typeof DayButton>>) {\n\tconst { dayPickerProps } = useDayPicker()\n\treturn <CalendarDayButton locale={dayPickerProps.locale} {...props} />\n}\n\nfunction CalendarDayButton({\n\tclassName,\n\tday,\n\tmodifiers,\n\tlocale,\n\t...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n\tconst defaultClassNames = getDefaultClassNames()\n\n\tconst ref = React.useRef<HTMLButtonElement>(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\tref={ref}\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"icon\"\n\t\t\tdata-day={day.date.toLocaleDateString(locale?.code)}\n\t\t\tdata-selected-single={\n\t\t\t\tmodifiers.selected && !modifiers.range_start && !modifiers.range_end && !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'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 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\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\nexport { Calendar, CalendarDayButton }\n",
      "type": "registry:ui",
      "target": "components/ui/calendar.tsx"
    }
  ],
  "type": "registry:ui"
}