{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "title": "Date Picker",
  "author": "Poyraz Avsever",
  "description": "Poyraz Soft Glass date-picker with semantic states and composable variants.",
  "dependencies": [
    "lucide-react@^0.574.0"
  ],
  "registryDependencies": [
    "@poyraz/poyraz-utils",
    "@poyraz/poyraz-theme",
    "@poyraz/button",
    "@poyraz/calendar",
    "@poyraz/popover",
    "@poyraz/poyraz-recipes"
  ],
  "files": [
    {
      "path": "registry/poyraz/ui/phase7/molecules/date-picker.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { CalendarIcon, X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button, type ButtonProps } from \"@/components/ui/atoms/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/molecules/popover\";\nimport { Calendar, type CalendarSingleProps } from \"@/components/ui/molecules/calendar\";\nimport type { FloatingSurfaceProps } from \"@/components/ui/recipes\";\n\nexport interface DatePickerProps {\n  /** Controlled selection. Passing the prop makes selection controlled, including `undefined`. */\n  selected?: Date;\n  /** Initial value for uncontrolled usage. */\n  defaultSelected?: Date;\n  onSelect?: (date: Date | undefined) => void;\n  /** Controlled popover state. */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  placeholder?: string;\n  formatDate?: (date: Date) => string;\n  className?: string;\n  disabled?: boolean;\n  clearable?: boolean;\n  closeOnSelect?: boolean;\n  triggerVariant?: ButtonProps[\"variant\"];\n  triggerSize?: ButtonProps[\"size\"];\n  triggerRadius?: ButtonProps[\"radius\"];\n  popoverSurface?: NonNullable<FloatingSurfaceProps[\"surface\"]>;\n  popoverRadius?: NonNullable<FloatingSurfaceProps[\"radius\"]>;\n  calendarProps?: Omit<CalendarSingleProps, \"mode\" | \"selected\" | \"defaultSelected\" | \"onSelect\">;\n}\n\nfunction defaultFormat(date: Date): string {\n  return date.toLocaleDateString(undefined, { year: \"numeric\", month: \"long\", day: \"numeric\" });\n}\n\nfunction DatePicker(props: DatePickerProps) {\n  const {\n    calendarProps,\n    className,\n    clearable = false,\n    closeOnSelect = true,\n    defaultOpen = false,\n    defaultSelected,\n    disabled = false,\n    formatDate = defaultFormat,\n    onOpenChange,\n    onSelect,\n    placeholder = \"Pick a date\",\n    popoverRadius = \"xl\",\n    popoverSurface = \"glass\",\n    triggerRadius = \"md\",\n    triggerSize = \"default\",\n    triggerVariant = \"outline\",\n  } = props;\n  const selectionControlled = Object.prototype.hasOwnProperty.call(props, \"selected\");\n  const openControlled = Object.prototype.hasOwnProperty.call(props, \"open\");\n  const [internalSelected, setInternalSelected] = React.useState(defaultSelected);\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n  const selected = selectionControlled ? props.selected : internalSelected;\n  const open = openControlled ? (props.open ?? false) : internalOpen;\n\n  const setOpen = (next: boolean) => {\n    if (!openControlled) setInternalOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const setSelected = (next: Date | undefined) => {\n    if (!selectionControlled) setInternalSelected(next);\n    onSelect?.(next);\n  };\n\n  const handleSelect = (date: Date | undefined) => {\n    setSelected(date);\n    if (date && closeOnSelect) setOpen(false);\n  };\n\n  return (\n    <div\n      data-slot=\"date-picker\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(\"flex w-full items-center gap-2\", className)}\n    >\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant={triggerVariant}\n            size={triggerSize}\n            radius={triggerRadius}\n            disabled={disabled}\n            className={cn(\n              \"group flex-1 justify-start text-left font-normal\",\n              \"transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n              !selected && \"text-placeholder\",\n              open && \"border-primary ring-2 ring-ring/25\",\n            )}\n          >\n            <CalendarIcon className=\"mr-1 size-4 shrink-0 transition-transform duration-[var(--poyraz-motion-duration-base)] group-data-[state=open]:rotate-6 group-data-[state=open]:scale-110\" />\n            <span className=\"truncate\">{selected ? formatDate(selected) : placeholder}</span>\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          surface={popoverSurface}\n          radius={popoverRadius}\n          padding=\"none\"\n          className=\"w-auto\"\n          align=\"start\"\n        >\n          <Calendar\n            {...calendarProps}\n            mode=\"single\"\n            selected={selected}\n            onSelect={handleSelect}\n            surface=\"plain\"\n          />\n        </PopoverContent>\n      </Popover>\n      {clearable && selected && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          radius={triggerRadius}\n          aria-label=\"Clear date\"\n          onClick={() => setSelected(undefined)}\n        >\n          <X className=\"size-4\" />\n        </Button>\n      )}\n    </div>\n  );\n}\nDatePicker.displayName = \"DatePicker\";\n\nexport { DatePicker };\n",
      "type": "registry:ui",
      "target": "@ui/molecules/date-picker.tsx"
    }
  ],
  "meta": {
    "category": "phase-7-composite",
    "phase": "beta"
  },
  "type": "registry:ui"
}