{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "type": "registry:ui",
  "title": "Date Picker",
  "description": "Controlled/uncontrolled single-date input — Button + Popover + single-mode Calendar.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/date-picker.tsx",
      "type": "registry:ui",
      "content": "// @draft\n\"use client\"\n\n/**\n * @fileoverview Saasflare DatePicker — controlled/uncontrolled single-date\n * input. Sibling to DateRangePicker. Composes the existing Button, Popover,\n * and Calendar (in single mode).\n * @author Saasflare™\n *\n * @module packages/ui/components/ui/date-picker\n * @package ui\n * @layer core\n *\n * @example\n * const [date, setDate] = useState<Date | undefined>();\n * <DatePicker value={date} onChange={setDate} />\n */\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { Button } from \"@saasflare/ui\"\nimport { Calendar } from \"@saasflare/ui/calendar\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@saasflare/ui\"\n\n/** Inline calendar glyph — local phosphor barrel doesn't ship one. */\nfunction CalendarIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n            {...props}\n        >\n            <rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\" />\n            <line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\" />\n            <line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\" />\n            <line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\" />\n        </svg>\n    )\n}\n\n/** Props for the DatePicker component. */\nexport interface DatePickerProps extends SaasflareComponentProps {\n    /** Controlled value. Pass `null` for a controlled-but-empty picker. */\n    value?: Date | null\n    /** Uncontrolled default value. */\n    defaultValue?: Date\n    /** Called when the user picks a date (`undefined` on deselect — writing it back to state keeps the picker controlled and clears it). */\n    onChange?: (date: Date | undefined) => void\n    /** Placeholder shown when no date is set. */\n    placeholder?: string\n    /** Earliest pickable date. */\n    minDate?: Date\n    /** Latest pickable date. */\n    maxDate?: Date\n    /** Disable the trigger. */\n    disabled?: boolean\n    /** Format function for the trigger label. Default: locale-aware. */\n    formatDate?: (date: Date) => string\n    /** Additional class names on the trigger. */\n    className?: string\n}\n\nfunction defaultFormat(d: Date): string {\n    return d.toLocaleDateString(undefined, {\n        year: \"numeric\",\n        month: \"short\",\n        day: \"numeric\",\n    })\n}\n\n/**\n * Single-date input + popover calendar. Composes Button + Popover + Calendar.\n *\n * @component\n * @layer core\n */\nexport function DatePicker({\n    value,\n    defaultValue,\n    onChange,\n    placeholder = \"Pick a date\",\n    minDate,\n    maxDate,\n    disabled = false,\n    formatDate = defaultFormat,\n    className,\n    surface,\n    radius,\n    animated,\n    iconWeight,\n}: DatePickerProps) {\n    const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n    /* Latched controlled-ness: once a defined `value` (or explicit null) has\n     * been seen, the component stays controlled even when the parent stores\n     * the `undefined` emitted on deselect — otherwise clearing silently flips\n     * the picker to uncontrolled and the stale internal date keeps rendering. */\n    const wasControlled = React.useRef(value !== undefined)\n    if (value !== undefined) wasControlled.current = true\n    const isControlled = wasControlled.current\n    const [internal, setInternal] = useState<Date | undefined>(defaultValue)\n    const date = isControlled ? (value ?? undefined) : internal\n\n    const handleSelect = (next: Date | undefined) => {\n        if (!isControlled) setInternal(next)\n        onChange?.(next)\n    }\n\n    return (\n        <Popover>\n            <PopoverTrigger asChild>\n                <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    intent=\"neutral\"\n                    disabled={disabled}\n                    surface={sf.surface}\n                    radius={sf.radius}\n                    animated={sf.animated}\n                    iconWeight={sf.iconWeight}\n                    data-slot=\"date-picker-trigger\"\n                    className={cn(\n                        \"min-w-44 justify-start gap-2 font-normal\",\n                        !date && \"text-muted-foreground\",\n                        className,\n                    )}\n                >\n                    <CalendarIcon className=\"size-4\" />\n                    <span className=\"truncate\">{date ? formatDate(date) : placeholder}</span>\n                </Button>\n            </PopoverTrigger>\n            <PopoverContent\n                data-slot=\"date-picker-content\"\n                align=\"start\"\n                className=\"w-auto p-0\"\n            >\n                <Calendar\n                    mode=\"single\"\n                    selected={date}\n                    onSelect={handleSelect}\n                    iconWeight={sf.iconWeight}\n                    defaultMonth={date ?? new Date()}\n                    disabled={\n                        minDate || maxDate\n                            ? (d: Date) =>\n                                  (minDate ? d < minDate : false) ||\n                                  (maxDate ? d > maxDate : false)\n                            : undefined\n                    }\n                />\n            </PopoverContent>\n        </Popover>\n    )\n}\n",
      "target": "components/ui/date-picker.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/date-picker.json"
  }
}