{"name":"rhf-range-date-picker-field","title":"RHF Range Date Picker Field","description":"Range date picker field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-range-date-picker-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/calendar","https://pb-ui-five.vercel.app/registry/popover","https://pb-ui-five.vercel.app/registry/button"],"dependencies":["react-hook-form","date-fns"],"files":[{"path":"components/ui/rhf-inputs/range-date-picker-field.tsx","target":"components/ui/rhf-inputs/range-date-picker-field.tsx","type":"registry:ui","content":"import { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { DateRange } from \"react-day-picker\";\nimport { FieldValues } from \"react-hook-form\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\nimport { Calendar } from \"../calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype RangeDatePickerFieldProps<T extends FieldValues> = Omit<\n  BaseControllerProps<T>,\n  \"children\"\n> & {\n  placeholder?: string;\n  formatString?: string;\n  calendarProps?: React.ComponentProps<typeof Calendar>;\n  buttonProps?: React.ComponentProps<typeof Button>;\n};\n\nexport function RangeDatePickerField<T extends FieldValues>({\n  control,\n  name,\n  label,\n  description,\n  disableFieldError = false,\n  required,\n  placeholder = \"Pick a date range\",\n  formatString,\n  calendarProps,\n  buttonProps,\n}: RangeDatePickerFieldProps<T>) {\n  const formatter = React.useMemo(\n    () =>\n      new Intl.DateTimeFormat(\"it-IT\", {\n        day: \"2-digit\",\n        month: \"2-digit\",\n        year: \"numeric\",\n      }),\n    [],\n  );\n  const {\n    className: buttonClassName,\n    variant,\n    ...restButtonProps\n  } = buttonProps ?? {};\n\n  return (\n    <BaseController\n      control={control}\n      name={name}\n      label={label}\n      required={required}\n      description={description}\n      disableFieldError={disableFieldError}\n    >\n      {({ field, fieldState, ariaDescribedBy }) => {\n        const range = field.value as DateRange | undefined;\n        const hasValue = Boolean(range?.from);\n        const display = range?.from\n          ? range.to\n            ? formatString\n              ? `${format(range.from, formatString)} - ${format(range.to, formatString)}`\n              : `${formatter.format(range.from)} - ${formatter.format(range.to)}`\n            : formatString\n              ? format(range.from, formatString)\n              : formatter.format(range.from)\n          : null;\n\n        return (\n          <Popover>\n            <PopoverTrigger\n              render={\n                <Button\n                  variant={variant ?? \"outline\"}\n                  data-empty={!hasValue}\n                  aria-invalid={!!fieldState.error}\n                  aria-describedby={ariaDescribedBy}\n                  className={cn(\n                    \"justify-start font-normal data-[empty=true]:text-muted-foreground text-left\",\n                    buttonClassName,\n                    fieldState.error &&\n                      \"border-destructive focus-visible:border-destructive focus-visible:ring-destructive/50 focus-visible:ring-[3px] aria-invalid:ring-0\",\n                  )}\n                  {...restButtonProps}\n                />\n              }\n            >\n              <CalendarIcon className=\"me-2 size-4\" />\n              {display ? <span>{display}</span> : <span>{placeholder}</span>}\n            </PopoverTrigger>\n            <PopoverContent className=\"p-0 w-auto\">\n              <Calendar\n                autoFocus\n                {...calendarProps}\n                mode=\"range\"\n                selected={range}\n                onSelect={(nextRange) => field.onChange(nextRange ?? undefined)}\n              />\n            </PopoverContent>\n          </Popover>\n        );\n      }}\n    </BaseController>\n  );\n}\n"}]}