{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "calendar",
  "title": "calendar",
  "description": "calendar",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/button",
    "https://intentui.com/r/select"
  ],
  "files": [
    {
      "path": "src/components/ui/calendar.tsx",
      "content": "\"use client\"\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@heroicons/react/24/solid\"\nimport {\n  Calendar as CalendarPrimitive,\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridHeader as CalendarGridHeaderPrimitive,\n  CalendarHeaderCell,\n  CalendarMonthPicker,\n  type CalendarProps as CalendarPrimitiveProps,\n  CalendarYearPicker,\n  type DateValue,\n} from \"react-aria-components/Calendar\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport { Heading } from \"react-aria-components/Heading\"\nimport { useLocale } from \"react-aria-components/I18nProvider\"\nimport { cn } from \"cn\"\nimport { Button } from \"./button\"\nimport { Select, SelectContent, SelectItem, SelectLabel, SelectTrigger } from \"./select\"\n\nexport interface CalendarProps<T extends DateValue> extends CalendarPrimitiveProps<T> {\n  className?: string\n}\n\nexport function Calendar<T extends DateValue>({ className, ...props }: CalendarProps<T>) {\n  return (\n    <CalendarPrimitive data-slot=\"calendar\" {...props}>\n      <CalendarHeader />\n      <CalendarGrid>\n        <CalendarGridHeader />\n        <CalendarGridBody>\n          {(date) => (\n            <CalendarCell\n              date={date}\n              className={composeRenderProps(\n                className,\n                (className, { isSelected, isToday, isDisabled }) =>\n                  cn(\n                    \"relative flex size-11 cursor-default items-center justify-center rounded-lg text-foreground tabular-nums outline-hidden hover:bg-secondary-foreground/15 sm:size-9 sm:text-sm/6 forced-colors:text-[ButtonText] forced-colors:outline-0\",\n                    isSelected &&\n                      \"bg-primary pressed:bg-primary text-primary-foreground hover:bg-primary/90 data-invalid:bg-danger data-invalid:text-danger-foreground forced-colors:bg-[Highlight] forced-colors:text-[Highlight] forced-colors:data-invalid:bg-[Mark]\",\n                    isDisabled && \"text-muted-foreground forced-colors:text-[GrayText]\",\n                    isToday &&\n                      \"after:pointer-events-none after:absolute after:bottom-1 after:left-1/2 after:z-10 after:size-0.75 after:-translate-x-1/2 after:rounded-full after:bg-primary selected:after:bg-primary-foreground focus-visible:after:bg-primary-foreground\",\n                    className\n                  )\n              )}\n            />\n          )}\n        </CalendarGridBody>\n      </CalendarGrid>\n    </CalendarPrimitive>\n  )\n}\n\nexport function CalendarHeader({ className, ...props }: React.ComponentProps<\"header\">) {\n  const { direction } = useLocale()\n  return (\n    <header\n      data-slot=\"calendar-header\"\n      className={cn(\"flex w-full justify-between gap-1.5 ps-1.5 pe-1 pt-1 pb-5 sm:pb-4\", className)}\n      {...props}\n    >\n      <div className=\"flex items-center gap-1.5\">\n        <CalendarMonthPicker>\n          {({ items, ...props }) => (\n            <Select {...props}>\n              <SelectTrigger />\n              <SelectContent items={items}>\n                {(item) => (\n                  <SelectItem textValue={item.formatted}>\n                    <SelectLabel>{item.formatted}</SelectLabel>\n                  </SelectItem>\n                )}\n              </SelectContent>\n            </Select>\n          )}\n        </CalendarMonthPicker>\n        <CalendarYearPicker>\n          {({ items, ...props }) => (\n            <Select {...props}>\n              <SelectTrigger />\n              <SelectContent items={items}>\n                {(item) => (\n                  <SelectItem textValue={item.formatted}>\n                    <SelectLabel>{item.formatted}</SelectLabel>\n                  </SelectItem>\n                )}\n              </SelectContent>\n            </Select>\n          )}\n        </CalendarYearPicker>\n      </div>\n      <Heading className=\"sr-only\" />\n      <div className=\"flex items-center gap-1\">\n        <Button\n          size=\"sq-sm\"\n          className=\"size-8 sm:size-7 **:[svg]:text-foreground\"\n          isCircle\n          intent=\"plain\"\n          slot=\"previous\"\n        >\n          {direction === \"rtl\" ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n        </Button>\n        <Button\n          size=\"sq-sm\"\n          className=\"size-8 sm:size-7 **:[svg]:text-foreground\"\n          isCircle\n          intent=\"plain\"\n          slot=\"next\"\n        >\n          {direction === \"rtl\" ? <ChevronLeftIcon /> : <ChevronRightIcon />}\n        </Button>\n      </div>\n    </header>\n  )\n}\n\nexport function CalendarGridHeader() {\n  return (\n    <CalendarGridHeaderPrimitive>\n      {(day) => (\n        <CalendarHeaderCell className=\"pb-2 text-center font-semibold text-muted-foreground text-sm/6 sm:px-0 sm:py-0.5 lg:text-xs\">\n          {day}\n        </CalendarHeaderCell>\n      )}\n    </CalendarGridHeaderPrimitive>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}