{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "type": "registry:component",
  "title": "Date Picker",
  "author": "Toby Belhome",
  "description": "A styled date picker component built using calendar.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "calendar",
    "label",
    "popover"
  ],
  "files": [
    {
      "path": "examples/components/date-picker/01/page.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Label } from \"@/components/ui/label\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\n\nexport default function DatePickerDemo() {\n  const [open, setOpen] = React.useState(false);\n  const [date, setDate] = React.useState<Date | undefined>(undefined);\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" id=\"date\" className=\"w-48 justify-between font-normal\">\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date);\n              setOpen(false);\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/date-picker.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}