{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-date-picker-5",
  "description": "Date picker with input",
  "dependencies": [
    "date-fns",
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/button",
    "@coss/calendar",
    "@coss/input-group",
    "@coss/popover"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-date-picker-5.tsx",
      "content": "\"use client\";\n\nimport { format, isValid, parse } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>();\n  const [inputValue, setInputValue] = useState(\"\");\n  const [month, setMonth] = useState<Date>(() => new Date());\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    setInputValue(value);\n\n    if (value) {\n      const parsedDate = parse(value, \"yyyy-MM-dd\", new Date());\n      if (isValid(parsedDate)) {\n        setDate(parsedDate);\n        setMonth(parsedDate);\n      }\n    } else {\n      setDate(undefined);\n    }\n  };\n\n  const handleSelect = (selectedDate: Date | undefined) => {\n    setDate(selectedDate);\n    if (selectedDate) {\n      setInputValue(format(selectedDate, \"yyyy-MM-dd\"));\n      setMonth(selectedDate);\n    } else {\n      setInputValue(\"\");\n    }\n  };\n\n  return (\n    <Popover>\n      <InputGroup>\n        <InputGroupInput\n          aria-label=\"Select date\"\n          className=\"*:[input]:[&::-webkit-calendar-picker-indicator]:hidden *:[input]:[&::-webkit-calendar-picker-indicator]:appearance-none\"\n          onChange={handleInputChange}\n          onClick={(e) => e.stopPropagation()}\n          type=\"date\"\n          value={inputValue}\n        />\n        <InputGroupAddon>\n          <PopoverTrigger\n            aria-label=\"Select date\"\n            render={\n              <Button aria-label=\"Select date\" size=\"icon-xs\" variant=\"ghost\" />\n            }\n          >\n            <CalendarIcon aria-hidden=\"true\" />\n          </PopoverTrigger>\n        </InputGroupAddon>\n      </InputGroup>\n      <PopoverPopup align=\"start\" alignOffset={-4} sideOffset={8}>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          onSelect={handleSelect}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\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",
    "input"
  ],
  "type": "registry:block"
}