{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-rangecalendar",
  "type": "registry:ui",
  "title": "RangeCalendar",
  "dependencies": [
    "react",
    "lucide-react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-button.json",
    "https://react-aria.adobe.com/registry/tailwind-calendar.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/RangeCalendar.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {ChevronLeft, ChevronRight} from 'lucide-react';\nimport {\n  RangeCalendar as AriaRangeCalendar,\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarHeading,\n  Text,\n  type DateValue,\n  type RangeCalendarProps as AriaRangeCalendarProps\n} from 'react-aria-components/RangeCalendar';\nimport {useLocale} from 'react-aria-components/I18nProvider';\nimport {tv} from 'tailwind-variants';\nimport {Button} from '@/registry/react-aria/ui/Button';\nimport {CalendarGridHeader} from '@/registry/react-aria/ui/Calendar';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\nexport interface RangeCalendarProps<T extends DateValue> extends AriaRangeCalendarProps<T> {\n  errorMessage?: string;\n}\n\nconst cell = tv({\n  extend: focusRing,\n  base: 'w-full h-full flex items-center justify-center rounded-full forced-color-adjust-none text-neutral-900 dark:text-neutral-200',\n  variants: {\n    selectionState: {\n      none: 'group-hover:bg-neutral-200 dark:group-hover:bg-neutral-700 group-pressed:bg-neutral-300 dark:group-pressed:bg-neutral-600',\n      middle: [\n        'group-hover:bg-blue-200 dark:group-hover:bg-blue-900 forced-colors:group-hover:bg-[Highlight]',\n        'group-invalid:group-hover:bg-red-200 dark:group-invalid:group-hover:bg-red-900 forced-colors:group-invalid:group-hover:bg-[Mark]',\n        'group-pressed:bg-blue-300 dark:group-pressed:bg-blue-800 forced-colors:group-pressed:bg-[Highlight] forced-colors:text-[HighlightText]',\n        'group-invalid:group-pressed:bg-red-300 dark:group-invalid:group-pressed:bg-red-800 forced-colors:group-invalid:group-pressed:bg-[Mark]'\n      ],\n      cap: 'bg-blue-600 group-invalid:bg-red-600 forced-colors:bg-[Highlight] forced-colors:group-invalid:bg-[Mark] text-white forced-colors:text-[HighlightText]'\n    },\n    isDisabled: {\n      true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'\n    }\n  }\n});\n\nexport function RangeCalendar<T extends DateValue>({\n  errorMessage,\n  ...props\n}: RangeCalendarProps<T>) {\n  let {direction} = useLocale();\n  let months = props.visibleDuration?.months || 1;\n  return (\n    <AriaRangeCalendar\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'flex font-sans w-full max-w-fit overflow-auto gap-3'\n      )}>\n      {Array.from({length: months}, (_, i) => (\n        <div key={i} className=\"@container flex flex-col w-[calc(9*var(--spacing)*7)]\">\n          <header className=\"flex items-center mb-4\">\n            {i === 0 && (\n              <Button variant=\"quiet\" slot=\"previous\">\n                {direction === 'rtl' ? (\n                  <ChevronRight aria-hidden size={18} />\n                ) : (\n                  <ChevronLeft aria-hidden size={18} />\n                )}\n              </Button>\n            )}\n            <CalendarHeading\n              offset={{months: i}}\n              className=\"flex-1 font-sans font-semibold [font-variation-settings:normal] text-base text-center mx-2 my-0 text-neutral-900 dark:text-neutral-200\"\n            />\n            {i === months - 1 && (\n              <Button variant=\"quiet\" slot=\"next\">\n                {direction === 'rtl' ? (\n                  <ChevronLeft aria-hidden size={18} />\n                ) : (\n                  <ChevronRight aria-hidden size={18} />\n                )}\n              </Button>\n            )}\n          </header>\n          <CalendarGrid offset={{months: i}} className=\"[&_td]:px-0 [&_td]:py-px border-spacing-0\">\n            <CalendarGridHeader />\n            <CalendarGridBody>\n              {date => (\n                <CalendarCell\n                  date={date}\n                  className=\"group w-[calc(100cqw/7)] aspect-square text-sm outline outline-0 cursor-default outside-month:text-neutral-300 selected:bg-blue-100 dark:selected:bg-blue-700/30 forced-colors:selected:bg-[Highlight] invalid:selected:bg-red-100 dark:invalid:selected:bg-red-700/30 forced-colors:invalid:selected:bg-[Mark] [td:first-child_&]:rounded-s-full selection-start:rounded-s-full [td:last-child_&]:rounded-e-full selection-end:rounded-e-full [-webkit-tap-highlight-color:transparent]\">\n                  {({\n                    formattedDate,\n                    isSelected,\n                    isSelectionStart,\n                    isSelectionEnd,\n                    isFocusVisible,\n                    isDisabled\n                  }) => (\n                    <span\n                      className={cell({\n                        selectionState:\n                          isSelected && (isSelectionStart || isSelectionEnd)\n                            ? 'cap'\n                            : isSelected\n                              ? 'middle'\n                              : 'none',\n                        isDisabled,\n                        isFocusVisible\n                      })}>\n                      {formattedDate}\n                    </span>\n                  )}\n                </CalendarCell>\n              )}\n            </CalendarGridBody>\n          </CalendarGrid>\n        </div>\n      ))}\n      {errorMessage && (\n        <Text slot=\"errorMessage\" className=\"text-sm text-red-600\">\n          {errorMessage}\n        </Text>\n      )}\n    </AriaRangeCalendar>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}