{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "title": "Date Picker",
  "description": "A date field component that allows users to enter and edit date.",
  "dependencies": [
    "react-day-picker",
    "date-fns",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/button.json",
    "https://optics.agusmayol.com.ar/r/calendar.json",
    "https://optics.agusmayol.com.ar/r/popover.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/date-picker.jsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\n\nimport { cn } from \"@/registry/optics/lib/utils\";\nimport { Button } from \"@/registry/optics/button\";\nimport { Calendar } from \"@/registry/optics/calendar\";\nimport {\n\tPopover,\n\tPopoverContent,\n\tPopoverTrigger,\n} from \"@/registry/optics/popover\";\n\nfunction DatePicker({\n\tdate = null,\n\tonDateChange = () => {},\n\tplaceholder = \"Pick a date\",\n\tvariant = \"outline\",\n\tclassName = \"\",\n\t...props\n}) {\n\treturn (\n\t\t<Popover>\n\t\t\t<PopoverTrigger\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant={variant || \"outline\"}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"w-[240px] justify-start text-left font-normal\",\n\t\t\t\t\t\t\t!date && \"text-muted-foreground\",\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\taria-label=\"Open date picker\"\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CalendarIcon />\n\t\t\t\t\t\t{date ? format(date, \"PPP\") : <span>{placeholder}</span>}\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<PopoverContent className=\"w-auto p-0\" align=\"start\">\n\t\t\t\t<Calendar\n\t\t\t\t\tmode=\"single\"\n\t\t\t\t\tselected={date}\n\t\t\t\t\tonSelect={onDateChange}\n\t\t\t\t\tinitialFocus\n\t\t\t\t/>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\nDatePicker.displayName = \"DatePicker\";\n\nexport { DatePicker };\n",
      "type": "registry:component",
      "target": "components/optics/date-picker.jsx"
    }
  ],
  "type": "registry:component"
}