{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"calendar","type":"registry:ui","title":"Calendar","description":"A date grid for picking a day or a range, built on DayPicker.","dependencies":["@daypicker/react","lucide-react"],"registryDependencies":["https://dashral.com/r/utils.json","https://dashral.com/r/lib-locale.json","https://dashral.com/r/button.json"],"files":[{"path":"registry/dashral/calendar.tsx","type":"registry:file","target":"components/dashral/calendar.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { DayPicker, getDefaultClassNames, type DayButtonProps } from \"@daypicker/react\"\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { useLocale } from \"./lib/locale\"\nimport { cn } from \"./lib/utils\"\nimport { buttonVariants } from \"./button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker>) {\n  const defaults = getDefaultClassNames()\n  // Month and day names, the first day of the week and right to left come from the LocaleProvider (a prop wins).\n  const { dir, dateLocale } = useLocale()\n\n  return (\n    <DayPicker\n      data-slot=\"calendar\"\n      dir={dir}\n      {...(dateLocale ? { locale: dateLocale as React.ComponentProps<typeof DayPicker>[\"locale\"] } : {})}\n      showOutsideDays={showOutsideDays}\n      className={cn(\"w-fit bg-background p-3 [--cell-size:2.25rem] [[data-slot=popover-content]_&]:bg-transparent\", className)}\n      classNames={{\n        root: cn(\"w-fit\", defaults.root),\n        months: cn(\"relative flex flex-col gap-4 sm:flex-row\", defaults.months),\n        month: cn(\"flex w-full flex-col gap-4\", defaults.month),\n        nav: cn(\"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\", defaults.nav),\n        button_previous: cn(\n          buttonVariants({ variant: \"ghost\", size: \"icon\" }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaults.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: \"ghost\", size: \"icon\" }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaults.button_next\n        ),\n        month_caption: cn(\"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\", defaults.month_caption),\n        caption_label: cn(\"text-sm font-medium select-none\", defaults.caption_label),\n        month_grid: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaults.weekdays),\n        weekday: cn(\"flex-1 text-[0.8rem] font-normal text-muted-foreground select-none\", defaults.weekday),\n        week: cn(\"mt-1 flex w-full\", defaults.week),\n        day: cn(\"group/day relative aspect-square size-(--cell-size) p-0 text-center select-none\", defaults.day),\n        range_start: cn(\"rounded-s-md bg-accent\", defaults.range_start),\n        range_middle: cn(\"rounded-none bg-accent\", defaults.range_middle),\n        range_end: cn(\"rounded-e-md bg-accent\", defaults.range_end),\n        today: cn(\"[&>button]:font-semibold [&>button]:text-primary-text\", defaults.today),\n        outside: cn(\"text-muted-foreground opacity-60\", defaults.outside),\n        disabled: cn(\"text-muted-foreground opacity-50\", defaults.disabled),\n        hidden: cn(\"invisible\", defaults.hidden),\n        ...classNames,\n      }}\n      components={{\n        Chevron: ({ className, orientation }) => {\n          const Icon =\n            orientation === \"left\" ? ChevronLeftIcon : orientation === \"right\" ? ChevronRightIcon : ChevronDownIcon\n          return <Icon className={cn(\"size-4\", className)} aria-hidden />\n        },\n        DayButton: CalendarDayButton,\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({ className, day, modifiers, ...props }: DayButtonProps) {\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  const single = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle\n\n  return (\n    <button\n      ref={ref}\n      data-selected-single={single || undefined}\n      data-range-start={modifiers.range_start || undefined}\n      data-range-end={modifiers.range_end || undefined}\n      data-range-middle={modifiers.range_middle || undefined}\n      className={cn(\n        \"flex size-(--cell-size) items-center justify-center rounded-md text-sm font-normal tabular-nums transition-[color,background-color,scale] duration-(--duration-fast) ease-spring outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50 active:scale-90 motion-reduce:active:scale-100\",\n        \"data-[selected-single]:bg-primary data-[selected-single]:text-primary-foreground data-[selected-single]:hover:bg-primary/90\",\n        \"data-[range-start]:bg-primary data-[range-start]:text-primary-foreground data-[range-end]:bg-primary data-[range-end]:text-primary-foreground\",\n        \"data-[range-middle]:rounded-none data-[range-middle]:bg-transparent data-[range-middle]:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\nexport type { DateRange } from \"@daypicker/react\"\n"}],"cssVars":{"theme":{"color-primary-text":"var(--primary-text, var(--primary))","ease-standard":"var(--ease-standard)","ease-enter":"var(--ease-enter)","ease-exit":"var(--ease-exit)","ease-spring":"var(--ease-spring)"},"light":{"duration-fast":"160ms","duration-standard":"240ms","duration-considered":"480ms","ease-standard":"cubic-bezier(0.2, 0, 0, 1)","ease-enter":"cubic-bezier(0, 0, 0, 1)","ease-exit":"cubic-bezier(0.3, 0, 1, 1)","ease-spring":"linear(0, 0.071 4%, 0.234 8%, 0.433 12%, 0.626 17%, 0.791 21%, 0.917 25%, 1.004 29%, 1.055 33%, 1.079 38%, 1.083 42%, 1.075 46%, 1.06 50%, 1.043 54%, 1.027 58%, 1.015 62%, 1.005 67%, 0.998 71%, 0.995 75%, 0.993 79%, 0.993 83%, 0.994 88%, 0.995 92%, 0.997 96%, 1)"},"dark":{}}}