{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-date-picker-3",
  "description": "Date picker with field and dropdown navigation",
  "dependencies": [
    "date-fns",
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/button",
    "@coss/calendar",
    "@coss/combobox",
    "@coss/field",
    "@coss/popover"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-date-picker-3.tsx",
      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>();\n  const id = React.useId();\n  return (\n    <Field>\n      <FieldLabel htmlFor={id}>Start date</FieldLabel>\n      <Popover>\n        <PopoverTrigger\n          id={id}\n          render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n        >\n          <CalendarIcon aria-hidden=\"true\" />\n          {date ? format(date, \"PPP\") : \"Pick a date\"}\n        </PopoverTrigger>\n        <PopoverPopup>\n          <Calendar\n            captionLayout=\"dropdown\"\n            components={{ Dropdown: CalendarDropdown }}\n            defaultMonth={date}\n            endMonth={new Date()}\n            mode=\"single\"\n            onSelect={setDate}\n            selected={date}\n            startMonth={new Date(1900, 0)}\n          />\n        </PopoverPopup>\n      </Popover>\n    </Field>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "date picker",
    "calendar",
    "popover",
    "button",
    "field",
    "combobox"
  ],
  "type": "registry:block"
}