{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "title": "Date Picker",
  "description": "The nx-ui Date Picker component.",
  "dependencies": [
    "@base-ui/react@^1.6.0",
    "@untitledui/icons@^0.0.22",
    "date-fns@^4.4.0",
    "react-day-picker@^10.0.1"
  ],
  "registryDependencies": [
    "@nx-ui/utils",
    "@nx-ui/button",
    "@nx-ui/calendar",
    "@nx-ui/popover"
  ],
  "files": [
    {
      "path": "components/ui/date-picker.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { DateRange } from \"react-day-picker\"\nimport {\n  endOfMonth,\n  endOfWeek,\n  endOfYear,\n  format,\n  startOfMonth,\n  startOfWeek,\n  startOfYear,\n  subDays,\n  subMonths,\n  subYears,\n} from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Popover, PopoverTrigger } from \"@/components/ui/popover\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\n/**\n * DatePicker / DateRangePicker — the full Untitled UI date-picker UX, rebuilt on\n * nx-ui primitives (popover + calendar + button) instead of react-aria.\n *\n * - A secondary Button trigger shows the formatted date (or range), leading with\n *   a calendar icon.\n * - Clicking opens a popover panel (`rounded-2xl … shadow-xl ring`) with the\n *   calendar and a Cancel / Apply footer. Selection is held in draft state and\n *   only committed on Apply — the popover never auto-closes on a day click,\n *   matching UUI's `shouldCloseOnSelect={false}`.\n * - The range variant adds a left preset rail (Today, Yesterday, This week, Last\n *   7/30 days, This month, Custom…) and a dual-month calendar.\n *\n * Presets are computed with `date-fns` (already a `calendar` dependency).\n */\n\nconst panelClassName =\n  \"rounded-2xl border-0 bg-background p-0 shadow-xl ring-1 ring-border w-auto gap-0\"\n\n// ---------------------------------------------------------------------------\n// Single date picker\n// ---------------------------------------------------------------------------\n\nfunction DatePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  placeholder = \"Select date\",\n  size = \"sm\",\n  disabled,\n  className,\n  ...props\n}: {\n  /** Controlled selected date. */\n  value?: Date\n  /** Uncontrolled initial date. */\n  defaultValue?: Date\n  /** Called with the newly-applied date (or undefined when cleared). */\n  onValueChange?: (date: Date | undefined) => void\n  placeholder?: string\n  size?: React.ComponentProps<typeof Button>[\"size\"]\n  disabled?: boolean\n  className?: string\n} & Omit<React.ComponentProps<typeof Button>, \"value\" | \"defaultValue\" | \"size\">) {\n  const isControlled = value !== undefined\n  const [internal, setInternal] = React.useState<Date | undefined>(defaultValue)\n  const selected = isControlled ? value : internal\n\n  const [open, setOpen] = React.useState(false)\n  const [draft, setDraft] = React.useState<Date | undefined>(selected)\n\n  React.useEffect(() => {\n    if (open) setDraft(selected)\n  }, [open, selected])\n\n  const apply = () => {\n    if (!isControlled) setInternal(draft)\n    onValueChange?.(draft)\n    setOpen(false)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        render={<Button variant=\"secondary\" size={size} disabled={disabled} />}\n        className={className}\n        {...props}\n      >\n        <CalendarIcon data-icon=\"inline-start\" />\n        {selected ? format(selected, \"d MMM yyyy\") : placeholder}\n      </PopoverTrigger>\n      <DatePickerPanel side=\"bottom\" align=\"end\">\n        <div className=\"flex px-6 py-5\">\n          <Calendar\n            mode=\"single\"\n            selected={draft}\n            onSelect={setDraft}\n            defaultMonth={draft}\n            autoFocus\n          />\n        </div>\n        <DatePickerFooter onCancel={() => setOpen(false)} onApply={apply} />\n      </DatePickerPanel>\n    </Popover>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Range picker with presets\n// ---------------------------------------------------------------------------\n\ntype RangePreset = { label: string; range: () => DateRange }\n\nfunction buildPresets(): RangePreset[] {\n  const now = new Date()\n  return [\n    { label: \"Today\", range: () => ({ from: now, to: now }) },\n    {\n      label: \"Yesterday\",\n      range: () => ({ from: subDays(now, 1), to: subDays(now, 1) }),\n    },\n    {\n      label: \"This week\",\n      range: () => ({ from: startOfWeek(now), to: endOfWeek(now) }),\n    },\n    { label: \"Last 7 days\", range: () => ({ from: subDays(now, 6), to: now }) },\n    { label: \"Last 30 days\", range: () => ({ from: subDays(now, 29), to: now }) },\n    {\n      label: \"This month\",\n      range: () => ({ from: startOfMonth(now), to: endOfMonth(now) }),\n    },\n    {\n      label: \"Last month\",\n      range: () => {\n        const prev = subMonths(now, 1)\n        return { from: startOfMonth(prev), to: endOfMonth(prev) }\n      },\n    },\n    {\n      label: \"This year\",\n      range: () => ({ from: startOfYear(now), to: endOfYear(now) }),\n    },\n    {\n      label: \"Last year\",\n      range: () => {\n        const prev = subYears(now, 1)\n        return { from: startOfYear(prev), to: endOfYear(prev) }\n      },\n    },\n  ]\n}\n\nfunction rangesEqual(a?: DateRange, b?: DateRange) {\n  if (!a || !b) return false\n  const same = (x?: Date, y?: Date) =>\n    (!x && !y) || (!!x && !!y && x.toDateString() === y.toDateString())\n  return same(a.from, b.from) && same(a.to, b.to)\n}\n\nfunction DateRangePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  placeholder = \"Select dates\",\n  size = \"sm\",\n  numberOfMonths = 2,\n  disabled,\n  className,\n  ...props\n}: {\n  value?: DateRange\n  defaultValue?: DateRange\n  onValueChange?: (range: DateRange | undefined) => void\n  placeholder?: string\n  size?: React.ComponentProps<typeof Button>[\"size\"]\n  numberOfMonths?: number\n  disabled?: boolean\n  className?: string\n} & Omit<\n  React.ComponentProps<typeof Button>,\n  \"value\" | \"defaultValue\" | \"size\"\n>) {\n  const isControlled = value !== undefined\n  const [internal, setInternal] = React.useState<DateRange | undefined>(\n    defaultValue\n  )\n  const selected = isControlled ? value : internal\n\n  const [open, setOpen] = React.useState(false)\n  const [draft, setDraft] = React.useState<DateRange | undefined>(selected)\n  const presets = React.useMemo(buildPresets, [])\n\n  React.useEffect(() => {\n    if (open) setDraft(selected)\n  }, [open, selected])\n\n  const apply = () => {\n    if (!isControlled) setInternal(draft)\n    onValueChange?.(draft)\n    setOpen(false)\n  }\n\n  const activePreset = presets.find((p) => rangesEqual(p.range(), draft))?.label\n\n  const label = (() => {\n    if (!selected?.from) return placeholder\n    const from = format(selected.from, \"d MMM yyyy\")\n    const to = selected.to ? format(selected.to, \"d MMM yyyy\") : from\n    return `${from} – ${to}`\n  })()\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        render={<Button variant=\"secondary\" size={size} disabled={disabled} />}\n        className={className}\n        {...props}\n      >\n        <CalendarIcon data-icon=\"inline-start\" />\n        <span className={cn(!selected?.from && \"text-muted-foreground\")}>\n          {label}\n        </span>\n      </PopoverTrigger>\n      <DatePickerPanel side=\"bottom\" align=\"end\">\n        <div className=\"flex\">\n          <div className=\"hidden w-40 flex-col gap-0.5 border-r border-border p-3 lg:flex\">\n            {presets.map((preset) => {\n              const isActive = activePreset === preset.label\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => setDraft(preset.range())}\n                  className={cn(\n                    \"cursor-pointer rounded-md px-3 py-2 text-left text-sm font-medium outline-none transition focus-visible:ring-2 focus-visible:ring-ring/40\",\n                    isActive\n                      ? \"bg-bg-active text-foreground\"\n                      : \"text-secondary-foreground hover:bg-muted hover:text-foreground\"\n                  )}\n                >\n                  {preset.label}\n                </button>\n              )\n            })}\n            <button\n              type=\"button\"\n              onClick={() => setDraft(undefined)}\n              className={cn(\n                \"cursor-pointer rounded-md px-3 py-2 text-left text-sm font-medium outline-none transition focus-visible:ring-2 focus-visible:ring-ring/40\",\n                !activePreset && draft?.from\n                  ? \"bg-bg-active text-foreground\"\n                  : \"text-secondary-foreground hover:bg-muted hover:text-foreground\"\n              )}\n            >\n              Custom…\n            </button>\n          </div>\n          <div className=\"flex flex-col\">\n            <div className=\"flex px-6 py-5\">\n              <Calendar\n                mode=\"range\"\n                numberOfMonths={numberOfMonths}\n                selected={draft}\n                onSelect={setDraft}\n                defaultMonth={draft?.from}\n                autoFocus\n              />\n            </div>\n          </div>\n        </div>\n        <DatePickerFooter onCancel={() => setOpen(false)} onApply={apply} />\n      </DatePickerPanel>\n    </Popover>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Shared panel + footer\n// ---------------------------------------------------------------------------\n\nfunction DatePickerPanel({\n  children,\n  side = \"bottom\",\n  align = \"end\",\n}: {\n  children: React.ReactNode\n  side?: PopoverPrimitive.Positioner.Props[\"side\"]\n  align?: PopoverPrimitive.Positioner.Props[\"align\"]\n}) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={8}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"date-picker-panel\"\n          className={cn(\n            \"z-50 origin-(--transform-origin) overflow-hidden text-sm text-popover-foreground outline-hidden duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            panelClassName\n          )}\n        >\n          {children}\n        </PopoverPrimitive.Popup>\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction DatePickerFooter({\n  onCancel,\n  onApply,\n}: {\n  onCancel: () => void\n  onApply: () => void\n}) {\n  return (\n    <div className=\"grid grid-cols-2 gap-3 border-t border-border p-4\">\n      <Button variant=\"secondary\" onClick={onCancel}>\n        Cancel\n      </Button>\n      <Button onClick={onApply}>Apply</Button>\n    </div>\n  )\n}\n\nexport { DatePicker, DateRangePicker }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}