{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "calendar",
  "title": "calendar",
  "description": "calendar",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "tailwind-merge"
  ],
  "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 { twMerge } from 'tailwind-merge'\nimport { Button } from './button'\nimport { Select, SelectContent, SelectItem, SelectLabel, SelectTrigger } from './select'\n\ninterface CalendarProps<T extends DateValue> extends CalendarPrimitiveProps<T> {\n  className?: string\n}\n\nconst 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                  twMerge(\n                    'relative flex size-11 cursor-default items-center justify-center rounded-lg text-fg tabular-nums outline-hidden hover:bg-secondary-fg/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-fg hover:bg-primary/90 data-invalid:bg-danger data-invalid:text-danger-fg forced-colors:bg-[Highlight] forced-colors:text-[Highlight] forced-colors:data-invalid:bg-[Mark]',\n                    isDisabled && 'text-muted-fg 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-fg focus-visible:after:bg-primary-fg',\n                    className\n                  )\n              )}\n            />\n          )}\n        </CalendarGridBody>\n      </CalendarGrid>\n    </CalendarPrimitive>\n  )\n}\n\nconst CalendarHeader = ({ className, ...props }: React.ComponentProps<'header'>) => {\n  const { direction } = useLocale()\n  return (\n    <header\n      data-slot=\"calendar-header\"\n      className={twMerge(\n        'flex w-full justify-between gap-1.5 ps-1.5 pe-1 pt-1 pb-5 sm:pb-4',\n        className\n      )}\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-fg\"\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-fg\"\n          isCircle\n          intent=\"plain\"\n          slot=\"next\"\n        >\n          {direction === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />}\n        </Button>\n      </div>\n    </header>\n  )\n}\n\nconst CalendarGridHeader = () => {\n  return (\n    <CalendarGridHeaderPrimitive>\n      {(day) => (\n        <CalendarHeaderCell className=\"pb-2 text-center font-semibold text-muted-fg text-sm/6 sm:px-0 sm:py-0.5 lg:text-xs\">\n          {day}\n        </CalendarHeaderCell>\n      )}\n    </CalendarGridHeaderPrimitive>\n  )\n}\n\nexport type { CalendarProps }\nexport { Calendar, CalendarGridHeader, CalendarHeader }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}