{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "title": "Date picker",
  "description": "The shadcn date-picker recipe assembled from the kit's own Popover and Calendar: an Input-family 44px trigger showing the formatted date or a muted placeholder, opening the branded month grid; selecting a day closes it. The focus ring is --text; aria-invalid draws a 2px --danger edge, the border plus a solid 1px ring, never an opacity fade, measured at 4.38:1 or better on every ground.",
  "dependencies": [
    "lucide-react@1.33.0"
  ],
  "registryDependencies": [
    "@waimakers/utils",
    "@waimakers/theme",
    "@waimakers/popover",
    "@waimakers/calendar"
  ],
  "files": [
    {
      "path": "src/components/ui/date-picker.tsx",
      "content": "import { CalendarIcon } from \"lucide-react\";\nimport { type AriaAttributes, useState } from \"react\";\n\nimport { cn, focusRing, invalidRing } from \"../../lib/utils\";\nimport { Calendar } from \"./calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\ninterface DatePickerProps {\n  value?: Date | null;\n  defaultValue?: Date | null;\n  onValueChange?: (date: Date) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  disabledDate?: (date: Date) => boolean;\n  locale?: string;\n  weekStartsOn?: 0 | 1;\n  formatDate?: (date: Date) => string;\n  id?: string;\n  className?: string;\n  \"aria-label\"?: string;\n  \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n}\n\nfunction DatePicker({\n  value,\n  defaultValue = null,\n  onValueChange,\n  placeholder = \"Pick a date\",\n  disabled = false,\n  disabledDate,\n  locale = \"en-US\",\n  weekStartsOn = 0,\n  formatDate,\n  id,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-invalid\": ariaInvalid,\n}: DatePickerProps) {\n  const isControlled = value !== undefined;\n  const [uncontrolled, setUncontrolled] = useState<Date | null>(defaultValue);\n  const selected = isControlled ? value : uncontrolled;\n  const [open, setOpen] = useState(false);\n\n  const format =\n    formatDate ??\n    ((date: Date) => new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" }).format(date));\n\n  function handleSelect(date: Date | undefined): void {\n    if (!date) {\n      return;\n    }\n    if (!isControlled) {\n      setUncontrolled(date);\n    }\n    onValueChange?.(date);\n    setOpen(false);\n  }\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        id={id}\n        disabled={disabled}\n        aria-label={ariaLabel ?? placeholder}\n        aria-invalid={ariaInvalid}\n        data-slot=\"date-picker-trigger\"\n        className={cn(\n          \"flex h-11 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors ease-brand\",\n          \"data-popup-open:bg-muted\",\n          focusRing,\n          invalidRing,\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n      >\n        <span className={cn(\"truncate\", selected ? \"text-foreground\" : \"text-muted-foreground\")}>\n          {selected ? format(selected) : placeholder}\n        </span>\n        <CalendarIcon className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden />\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          selected={selected ?? undefined}\n          defaultMonth={selected ?? undefined}\n          onSelect={handleSelect}\n          disabled={disabledDate}\n          weekStartsOn={weekStartsOn}\n          autoFocus\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { DatePicker };\nexport type { DatePickerProps };\n",
      "type": "registry:ui",
      "target": "components/ui/date-picker.tsx"
    }
  ],
  "type": "registry:ui"
}