{"name":"rhf-date-picker-field","title":"RHF Date Picker Field","description":"Date picker field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-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/date-picker-field.tsx","target":"components/ui/rhf-inputs/date-picker-field.tsx","type":"registry:ui","content":"import { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\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 DatePickerFieldProps<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 DatePickerField<T extends FieldValues>({\n  control,\n  name,\n  label,\n  description,\n  disableFieldError = false,\n  required,\n  placeholder = \"Pick a date\",\n  formatString,\n  calendarProps,\n  buttonProps,\n}: DatePickerFieldProps<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        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant={variant ?? \"outline\"}\n                data-empty={!field.value}\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            {field.value ? (\n              formatString ? (\n                format(field.value as Date, formatString)\n              ) : (\n                formatter.format(field.value as Date)\n              )\n            ) : (\n              <span>{placeholder}</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"p-0 w-auto\">\n            <Calendar\n              autoFocus\n              {...calendarProps}\n              mode=\"single\"\n              selected={field.value as Date | undefined}\n              onSelect={(date) => field.onChange(date ?? undefined)}\n            />\n          </PopoverContent>\n        </Popover>\n      )}\n    </BaseController>\n  );\n}\n"}]}