{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "type": "registry:component",
  "title": "Date Picker",
  "description": "Single-date picker built with the shared calendar and popover primitives.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/date-picker/date-picker.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { CalendarIcon } from \"lucide-react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\nimport { Calendar, type CalendarProps } from \"@vllnt/ui\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@vllnt/ui\";\n\nconst defaultDateFormatter = new Intl.DateTimeFormat(\"en-US\", {\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n});\n\nexport type DatePickerProps = {\n  buttonClassName?: string;\n  calendarProps?: Omit<CalendarProps, \"mode\" | \"onSelect\" | \"selected\">;\n  className?: string;\n  onValueChange?: (date?: Date) => void;\n  placeholder?: string;\n  value?: Date;\n};\n\nconst DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(\n  (\n    {\n      buttonClassName,\n      calendarProps,\n      className,\n      onValueChange,\n      placeholder = \"Pick a date\",\n      value,\n    },\n    reference,\n  ) => {\n    const [open, setOpen] = React.useState(false);\n    const [internalValue, setInternalValue] = React.useState<Date | undefined>(\n      value,\n    );\n    const selectedDate = value ?? internalValue;\n\n    React.useEffect(() => {\n      if (value !== undefined) {\n        setInternalValue(value);\n      }\n    }, [value]);\n\n    const handleSelect = (nextDate: Date | undefined) => {\n      if (value === undefined) {\n        setInternalValue(nextDate);\n      }\n\n      onValueChange?.(nextDate);\n\n      if (nextDate) {\n        setOpen(false);\n      }\n    };\n\n    return (\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverTrigger asChild>\n          <Button\n            className={cn(\n              \"w-full justify-start text-left font-normal\",\n              !selectedDate && \"text-muted-foreground\",\n              buttonClassName,\n            )}\n            ref={reference}\n            variant=\"outline\"\n          >\n            <CalendarIcon className=\"mr-2 size-4\" />\n            {selectedDate\n              ? defaultDateFormatter.format(selectedDate)\n              : placeholder}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" className={cn(\"w-auto p-0\", className)}>\n          <Calendar\n            mode=\"single\"\n            onSelect={handleSelect}\n            selected={selectedDate}\n            {...calendarProps}\n          />\n        </PopoverContent>\n      </Popover>\n    );\n  },\n);\nDatePicker.displayName = \"DatePicker\";\n\nexport { DatePicker };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}