{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "title": "Date Picker",
  "description": "A controlled date field composed from Calendar and Popover.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@rivelle/utils",
    "@rivelle/button",
    "@rivelle/calendar",
    "@rivelle/popover"
  ],
  "files": [
    {
      "path": "registry/nova/ui/date-picker.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { CalendarDays, X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\n\nfunction DatePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  placeholder = \"Pick a date\",\n  locale = \"en-US\",\n  disabled,\n  clearable = false,\n  className,\n}: {\n  value?: Date;\n  defaultValue?: Date;\n  onValueChange?: (date: Date | undefined) => void;\n  placeholder?: string;\n  locale?: string;\n  disabled?: boolean;\n  clearable?: boolean;\n  className?: string;\n}) {\n  const [open, setOpen] = React.useState(false);\n  const [internalValue, setInternalValue] = React.useState<Date | undefined>(\n    defaultValue,\n  );\n  const selected = value ?? internalValue;\n\n  function update(next: Date | undefined) {\n    if (value === undefined) setInternalValue(next);\n    onValueChange?.(next);\n    if (next) setOpen(false);\n  }\n\n  return (\n    <div data-slot=\"date-picker\" className={cn(\"relative w-full\", className)}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            disabled={disabled}\n            variant=\"outline\"\n            className={cn(\n              \"h-11.5 w-full justify-start px-4 text-left font-medium hover:-translate-y-0\",\n              !selected && \"text-muted-foreground\",\n              clearable && selected && \"pr-11\",\n            )}\n          >\n            <CalendarDays className=\"text-primary\" />\n            {selected\n              ? new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" }).format(\n                  selected,\n                )\n              : placeholder}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" className=\"w-auto p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={selected}\n            onSelect={update}\n            autoFocus\n          />\n        </PopoverContent>\n      </Popover>\n      {clearable && selected && !disabled && (\n        <button\n          type=\"button\"\n          aria-label=\"Clear date\"\n          className=\"absolute right-2 top-1/2 z-10 grid size-7 -translate-y-1/2 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-foreground/[.055] hover:text-foreground\"\n          onClick={() => update(undefined)}\n        >\n          <X className=\"size-3.5\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { DatePicker };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}