{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "title": "Date picker",
  "description": "one date in a form · field-styled button → Calendar in a Popover · `value onChange disabled?`",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "@kit/button",
    "@kit/calendar",
    "popover"
  ],
  "files": [
    {
      "path": "components/kit/date-picker.tsx",
      "content": "'use client';\nimport { CalendarIcon } from 'lucide-react';\nimport { cn } from 'cn';\nimport * as React from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\ntype Props = {\n  value?: Date;\n  onChange: (date: Date | undefined) => void;\n  /** Shown when nothing is picked: say what the date is for (\"Pick a due date\"). */\n  placeholder?: string;\n  /** For a `<Label htmlFor>`. */\n  id?: string;\n  /** Days that cannot be picked, e.g. `(d) => d < today`. */\n  disabled?: (date: Date) => boolean;\n  'aria-invalid'?: boolean;\n  className?: string;\n};\n\nconst format = (date: Date) => date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });\n\n/** One date in a form: a field-styled button that opens a Calendar, and closes when a day is picked. */\nexport function DatePicker({ value, onChange, placeholder = 'Pick a date', id, disabled, className, ...rest }: Props) {\n  const [open, setOpen] = React.useState(false);\n  // A <Label htmlFor> becomes the button's name, which hides the date itself from screen readers; the\n  // value is attached as the description instead (\"Due date, button, 24 Jul 2026\").\n  const valueId = React.useId();\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          id={id}\n          variant=\"outline\"\n          aria-invalid={rest['aria-invalid']}\n          aria-describedby={valueId}\n          className={cn('w-full justify-start font-normal sm:w-60', !value && 'text-muted-foreground', className)}>\n          <CalendarIcon aria-hidden />\n          <span id={valueId}>{value ? format(value) : placeholder}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={value}\n          defaultMonth={value}\n          disabled={disabled}\n          onSelect={(date) => {\n            onChange(date);\n            setOpen(false);\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/date-picker.tsx"
    }
  ],
  "meta": {
    "exports": [
      "DatePicker"
    ],
    "api": "<DatePicker id value onChange placeholder? disabled? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "inputs"
  ],
  "type": "registry:component"
}