{
  "name": "rhf-date-range-field",
  "type": "registry:ui",
  "dependencies": [
    "@hookform/lenses",
    "date-fns",
    "lucide-react",
    "react",
    "react-day-picker",
    "react-hook-form"
  ],
  "registryDependencies": [
    "button",
    "calendar",
    "field",
    "popover"
  ],
  "files": [
    {
      "path": "./items/react-hook-form/date-range-field/component.tsx",
      "type": "registry:ui",
      "target": "./components/ui/shuip/react-hook-form/date-range-field.tsx",
      "content": "'use client';\n\nimport type { Lens } from '@hookform/lenses';\nimport type { Locale } from 'date-fns';\nimport { format } from 'date-fns';\nimport { CalendarIcon } from 'lucide-react';\nimport * as React from 'react';\nimport type { DateRange } from 'react-day-picker';\nimport { useController } from 'react-hook-form';\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { cn } from '@/lib/utils';\n\nexport interface DateRangeFieldProps {\n  lens: Lens<DateRange | undefined>;\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  minDate?: Date;\n  maxDate?: Date;\n  locale?: Locale;\n  disabled?: boolean;\n}\n\nfunction formatRange(value: DateRange | undefined, locale: Locale | undefined): string | null {\n  if (!value?.from) return null;\n  const fromLabel = format(value.from, 'PPP', { locale });\n  if (!value.to) return fromLabel;\n  return `${fromLabel} – ${format(value.to, 'PPP', { locale })}`;\n}\n\nexport function DateRangeField({\n  lens,\n  label,\n  description,\n  placeholder = 'Pick a date range',\n  minDate,\n  maxDate,\n  locale,\n  disabled,\n}: DateRangeFieldProps) {\n  const { field, fieldState } = useController(lens.interop());\n  const value = field.value as DateRange | undefined;\n  const [open, setOpen] = React.useState(false);\n\n  const disabledMatcher = React.useMemo(() => {\n    if (!minDate && !maxDate) return undefined;\n    return { ...(minDate ? { before: minDate } : {}), ...(maxDate ? { after: maxDate } : {}) };\n  }, [minDate, maxDate]);\n\n  const triggerLabel = formatRange(value, locale);\n\n  return (\n    <Field className='gap-2' data-invalid={fieldState.invalid}>\n      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            id={field.name}\n            type='button'\n            variant='outline'\n            disabled={disabled}\n            onBlur={field.onBlur}\n            aria-invalid={fieldState.invalid}\n            className={cn('w-full justify-between font-normal', !triggerLabel && 'text-muted-foreground')}\n          >\n            <span className='truncate'>{triggerLabel ?? placeholder}</span>\n            <CalendarIcon className='size-4 opacity-60' />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className='w-auto p-0' align='start'>\n          <Calendar\n            mode='range'\n            selected={value}\n            onSelect={(range) => field.onChange(range)}\n            numberOfMonths={2}\n            defaultMonth={value?.from ?? minDate}\n            disabled={disabledMatcher}\n            locale={locale}\n            autoFocus\n          />\n        </PopoverContent>\n      </Popover>\n      {fieldState.invalid && <FieldError className='text-xs text-left' errors={[fieldState.error]} />}\n      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}\n    </Field>\n  );\n}\n"
    }
  ],
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}