{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-daterangepicker",
  "type": "registry:ui",
  "title": "DateRangePicker",
  "dependencies": [
    "lucide-react",
    "react",
    "react-aria-components",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-datefield.json",
    "https://react-aria.adobe.com/registry/tailwind-field.json",
    "https://react-aria.adobe.com/registry/tailwind-popover.json",
    "https://react-aria.adobe.com/registry/tailwind-rangecalendar.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json",
    "https://react-aria.adobe.com/registry/tailwind-fieldbutton.json"
  ],
  "files": [
    {
      "path": "components/ui/DateRangePicker.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {CalendarIcon} from 'lucide-react';\nimport React from 'react';\nimport {\n  DateRangePicker as AriaDateRangePicker,\n  type DateRangePickerProps as AriaDateRangePickerProps,\n  type DateValue,\n  type ValidationResult\n} from 'react-aria-components/DateRangePicker';\nimport {DateInput} from '@/registry/react-aria/ui/DateField';\nimport {Description, FieldError, FieldGroup, Label} from '@/registry/react-aria/ui/Field';\nimport {Popover} from '@/registry/react-aria/ui/Popover';\nimport {RangeCalendar} from '@/registry/react-aria/ui/RangeCalendar';\nimport {composeTailwindRenderProps} from '@/registry/react-aria/lib/react-aria-utils';\nimport {FieldButton} from '@/registry/react-aria/ui/FieldButton';\n\nexport interface DateRangePickerProps<T extends DateValue> extends AriaDateRangePickerProps<T> {\n  label?: string;\n  description?: string;\n  errorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nexport function DateRangePicker<T extends DateValue>({\n  label,\n  description,\n  errorMessage,\n  ...props\n}: DateRangePickerProps<T>) {\n  return (\n    <AriaDateRangePicker\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'group flex flex-col gap-1 font-sans max-w-full'\n      )}>\n      {label && <Label>{label}</Label>}\n      <FieldGroup className=\"min-w-[208px] w-auto cursor-text disabled:cursor-default\">\n        <div className=\"flex-1 w-fit flex items-center overflow-x-auto overflow-y-clip [scrollbar-width:none]\">\n          <DateInput slot=\"start\" className=\"ps-3 pe-2 text-sm\" />\n          <span\n            aria-hidden=\"true\"\n            className=\"text-neutral-800 dark:text-neutral-200 forced-colors:text-[ButtonText] group-disabled:text-neutral-200 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText]\">\n            –\n          </span>\n          <DateInput slot=\"end\" className=\"flex-1 ps-2 pe-3 text-sm\" />\n        </div>\n        <FieldButton className=\"w-6 mr-1 outline-offset-0\">\n          <CalendarIcon aria-hidden className=\"w-4 h-4\" />\n        </FieldButton>\n      </FieldGroup>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n      <Popover className=\"p-2\">\n        <RangeCalendar />\n      </Popover>\n    </AriaDateRangePicker>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}