{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "type": "registry:block",
  "title": "Date Picker",
  "description": "A complete date picker primitive with a calendar popover. Supports single, range, and multiple date selection modes. Includes preset shortcuts, time picker, and month/year quick-navigation.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "@base-ui/react",
    "@tabler/icons-react",
    "clsx",
    "framer-motion",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "@wensity/calendar"
  ],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/date-picker.tsx",
      "type": "registry:component",
      "target": "@components/wensity/date-picker.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { IconCalendar, IconClock, IconX } from \"@tabler/icons-react\";\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { cn } from \"@/lib/utils\";\nimport { Calendar, type DateRange } from \"@/components/wensity/calendar\";\n\nexport type { DateRange };\n\n/* ─── Types ─────────────────────────────────────────────────── */\n\nexport interface DatePreset {\n  label: string;\n  getValue: () => Date | DateRange | Date[];\n}\n\nexport type DatePickerMode = \"single\" | \"range\" | \"multiple\";\n\ninterface DatePickerBaseProps {\n  /** Selection mode. */\n  mode?: DatePickerMode;\n  /** Placeholder text in the trigger when no date is selected. */\n  placeholder?: string;\n  /** Disabled state. */\n  disabled?: boolean;\n  /** Return true to disable specific dates. */\n  dateDisabled?: (date: Date) => boolean;\n  /** 0 = Sunday, 1 = Monday. Default 0. */\n  weekStartsOn?: 0 | 1;\n  /** Earliest selectable date. */\n  fromDate?: Date;\n  /** Latest selectable date. */\n  toDate?: Date;\n\n  /* ── Variant toggles ── */\n\n  /** Show preset quick-selection buttons. Pass an array to customize or `true` for defaults. Default: `true`. */\n  presets?: boolean | DatePreset[];\n  /** Show time picker (hours + minutes) alongside the calendar. */\n  dateTime?: boolean;\n  /** Enable month and year quick-nav pickers. Default: `true`. */\n  monthYear?: boolean;\n\n  /** Additional class name for the root wrapper. */\n  className?: string;\n}\n\ninterface DatePickerSingleProps extends DatePickerBaseProps {\n  mode?: \"single\";\n  /** Controlled value. */\n  value?: Date;\n  /** Uncontrolled default value. */\n  defaultValue?: Date;\n  /** Called when selection changes. */\n  onChange?: (value: Date | undefined) => void;\n}\n\ninterface DatePickerRangeProps extends DatePickerBaseProps {\n  mode: \"range\";\n  /** Controlled value. */\n  value?: DateRange;\n  /** Uncontrolled default value. */\n  defaultValue?: DateRange;\n  /** Called when selection changes. */\n  onChange?: (value: DateRange | undefined) => void;\n}\n\ninterface DatePickerMultipleProps extends DatePickerBaseProps {\n  mode: \"multiple\";\n  /** Controlled value. */\n  value?: Date[];\n  /** Uncontrolled default value. */\n  defaultValue?: Date[];\n  /** Called when selection changes. */\n  onChange?: (value: Date[]) => void;\n}\n\nexport type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps | DatePickerMultipleProps;\n\n/* ─── Constants ─────────────────────────────────────────────── */\n\nconst TRIGGER_SURFACE = cn(\n  \"inline-flex h-[var(--primitive-control-height-md)] min-h-[var(--primitive-control-height-md)] items-center gap-2\",\n  \"rounded-[var(--primitive-radius-control)] border border-[var(--border)] px-3 text-sm\",\n  \"bg-[var(--background)] text-[var(--foreground)]\",\n  \"transition-[border-color,background-color,box-shadow] duration-150 ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n  \"hover:border-[color-mix(in_srgb,var(--foreground)_14%,transparent)]\",\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]\",\n  \"disabled:pointer-events-none disabled:opacity-40\",\n  \"data-[open]:border-[color-mix(in_srgb,var(--foreground)_24%,transparent)]\",\n);\n\nconst POPOVER_CONTENT_CLASS = cn(\n  \"rounded-[var(--primitive-radius-surface)] border border-[var(--border)] p-3\",\n  \"bg-[var(--primitive-surface-overlay)] text-[var(--foreground)]\",\n  \"[box-shadow:var(--primitive-shadow-overlay)]\",\n  \"z-[var(--primitive-z-popover)] origin-[var(--transform-origin)] transform-gpu outline-none\",\n  \"transition-[opacity,scale] duration-[180ms] ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n  \"data-[ending-style]:duration-[120ms]\",\n  \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\n  \"data-[starting-style]:scale-[0.96] data-[ending-style]:scale-[0.96]\",\n  \"motion-reduce:transition-none motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100\",\n);\n\nconst PRESET_ITEM_CLASS = cn(\n  \"rounded-[var(--primitive-radius-item)] px-2 py-1.5 text-left text-xs font-medium\",\n  \"text-[var(--muted-foreground)] transition-colors duration-150\",\n  \"hover:bg-[var(--primitive-surface-selected)] hover:text-[var(--foreground)]\",\n  \"focus-visible:outline-none focus-visible:bg-[var(--primitive-surface-selected)] focus-visible:text-[var(--foreground)]\",\n);\n\nconst TIME_FIELD_CLASS = cn(\n  \"rounded-[var(--primitive-radius-control)] border border-[var(--border)] bg-transparent px-1.5 py-0.5\",\n  \"text-[var(--foreground)] outline-none\",\n  \"focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)]\",\n);\n\n/* ─── Date Helpers ──────────────────────────────────────────── */\n\nfunction startOfDay(d: Date): Date {\n  return new Date(d.getFullYear(), d.getMonth(), d.getDate());\n}\n\nfunction isBefore(a: Date, b: Date): boolean {\n  return startOfDay(a).getTime() < startOfDay(b).getTime();\n}\n\n/* ─── Formatting ────────────────────────────────────────────── */\n\nfunction formatDate(d: Date): string {\n  const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n  return `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;\n}\n\nfunction formatShortDate(d: Date): string {\n  const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n  return `${months[d.getMonth()]} ${d.getDate()}`;\n}\n\nfunction formatDateRange(range: DateRange): string {\n  if (range.from && range.to) {\n    return `${formatShortDate(range.from)} – ${formatShortDate(range.to)}`;\n  }\n  if (range.from) return formatDate(range.from);\n  return \"\";\n}\n\nfunction formatMultipleDates(dates: Date[]): string {\n  if (dates.length === 0) return \"\";\n  if (dates.length === 1) return formatDate(dates[0]);\n  return `${dates.length} dates selected`;\n}\n\n/* ─── Presets ────────────────────────────────────────────────── */\n\nfunction buildDefaultPresets(mode: DatePickerMode): DatePreset[] {\n  const today = startOfDay(new Date());\n  const yesterday = new Date(today);\n  yesterday.setDate(yesterday.getDate() - 1);\n\n  if (mode === \"multiple\") {\n    return [\n      { label: \"Today\", getValue: () => [today] },\n      { label: \"Tomorrow\", getValue: () => { const d = new Date(today); d.setDate(d.getDate() + 1); return [d]; } },\n      { label: \"Yesterday\", getValue: () => [yesterday] },\n    ];\n  }\n\n  if (mode === \"single\") {\n    return [\n      { label: \"Today\", getValue: () => today },\n      { label: \"Tomorrow\", getValue: () => { const d = new Date(today); d.setDate(d.getDate() + 1); return d; } },\n      { label: \"Yesterday\", getValue: () => yesterday },\n    ];\n  }\n\n  return [\n    {\n      label: \"Today\",\n      getValue: () => ({ from: today, to: today }),\n    },\n    {\n      label: \"Last 7 days\",\n      getValue: () => {\n        const from = new Date(today);\n        from.setDate(from.getDate() - 6);\n        return { from, to: today };\n      },\n    },\n    {\n      label: \"Last 30 days\",\n      getValue: () => {\n        const from = new Date(today);\n        from.setDate(from.getDate() - 29);\n        return { from, to: today };\n      },\n    },\n    {\n      label: \"This month\",\n      getValue: () => {\n        const from = new Date(today.getFullYear(), today.getMonth(), 1);\n        const to = new Date(today.getFullYear(), today.getMonth() + 1, 0);\n        return { from, to };\n      },\n    },\n  ];\n}\n\n/* ─── Time Picker Sub-component ─────────────────────────────── */\n\nfunction TimePicker({\n  value,\n  onChange,\n}: {\n  value: Date;\n  onChange: (date: Date) => void;\n}) {\n  const hours = value.getHours();\n  const minutes = value.getMinutes();\n\n  return (\n    <div data-wensity-primitive=\"\" className=\"flex items-center gap-1.5 border-t border-[var(--border)] pt-2.5\">\n      <IconClock size={14} stroke={1.75} className=\"shrink-0 text-[var(--muted-foreground)]\" />\n      <div className=\"flex items-center gap-1 text-xs\">\n        <select\n          value={hours}\n          onChange={(e) => {\n            const d = new Date(value);\n            d.setHours(Number(e.target.value));\n            onChange(d);\n          }}\n          className={TIME_FIELD_CLASS}\n        >\n          {Array.from({ length: 24 }, (_, i) => (\n            <option key={i} value={i}>\n              {String(i).padStart(2, \"0\")}\n            </option>\n          ))}\n        </select>\n        <span className=\"text-[var(--muted-foreground)]\">:</span>\n        <select\n          value={minutes}\n          onChange={(e) => {\n            const d = new Date(value);\n            d.setMinutes(Number(e.target.value));\n            onChange(d);\n          }}\n          className={TIME_FIELD_CLASS}\n        >\n          {Array.from({ length: 60 }, (_, i) => (\n            <option key={i} value={i}>\n              {String(i).padStart(2, \"0\")}\n            </option>\n          ))}\n        </select>\n      </div>\n    </div>\n  );\n}\n\n/* ─── DatePicker ────────────────────────────────────────────── */\n\nfunction DatePickerInner(props: DatePickerProps) {\n  const {\n    mode = \"single\",\n    placeholder = \"Pick a date\",\n    disabled: isDisabled = false,\n    dateDisabled,\n    weekStartsOn = 0,\n    fromDate,\n    toDate,\n    presets: presetsProp = true,\n    dateTime = false,\n    monthYear = true,\n    className,\n  } = props as DatePickerBaseProps;\n\n  const {\n    value: controlledValue,\n    defaultValue,\n    onChange,\n  } = props as {\n    value?: Date | DateRange | Date[];\n    defaultValue?: Date | DateRange | Date[];\n    onChange?: (value: Date | DateRange | Date[] | undefined) => void;\n  };\n\n  const [open, setOpen] = React.useState(false);\n\n  const isControlled = \"value\" in props;\n\n  const [internalSingle, setInternalSingle] = React.useState<Date | undefined>(\n    mode === \"single\" ? (defaultValue as Date | undefined) : undefined,\n  );\n  const [internalRange, setInternalRange] = React.useState<DateRange | undefined>(\n    mode === \"range\" ? (defaultValue as DateRange | undefined) : undefined,\n  );\n  const [internalMultiple, setInternalMultiple] = React.useState<Date[]>(\n    mode === \"multiple\" ? ((defaultValue as Date[] | undefined) ?? []) : [],\n  );\n\n  const currentSingle = mode === \"single\"\n    ? ((isControlled ? controlledValue : internalSingle) as Date | undefined)\n    : undefined;\n  const currentRange = mode === \"range\"\n    ? ((isControlled ? controlledValue : internalRange) as DateRange | undefined)\n    : undefined;\n  const currentMultiple = mode === \"multiple\"\n    ? (Array.isArray(isControlled ? controlledValue : internalMultiple)\n      ? ((isControlled ? controlledValue : internalMultiple) as Date[])\n      : [])\n    : [];\n\n  const [displayMonth, setDisplayMonth] = React.useState(() => {\n    if (mode === \"single\" && currentSingle) return startOfDay(currentSingle);\n    if (mode === \"range\" && currentRange?.from) return startOfDay(currentRange.from);\n    if (mode === \"multiple\" && currentMultiple.length > 0) return startOfDay(currentMultiple[0]);\n    if (fromDate) return startOfDay(fromDate);\n    return startOfDay(new Date());\n  });\n\n  const prevControlledRef = React.useRef(controlledValue);\n  React.useEffect(() => {\n    if (prevControlledRef.current !== controlledValue) {\n      prevControlledRef.current = controlledValue;\n      if (mode === \"single\" && controlledValue) {\n        setDisplayMonth(startOfDay(controlledValue as Date));\n      } else if (mode === \"range\" && (controlledValue as DateRange)?.from) {\n        setDisplayMonth(startOfDay((controlledValue as DateRange).from!));\n      } else if (mode === \"multiple\" && (controlledValue as Date[])?.length > 0) {\n        setDisplayMonth(startOfDay((controlledValue as Date[])[0]));\n      }\n    }\n  }, [controlledValue, mode]);\n\n  function commit(value: Date | DateRange | Date[] | undefined) {\n    if (!isControlled) {\n      if (mode === \"single\") setInternalSingle(value as Date | undefined);\n      else if (mode === \"range\") setInternalRange(value as DateRange | undefined);\n      else setInternalMultiple((value as Date[]) ?? []);\n    }\n    onChange?.(value);\n  }\n\n  function isDateDisabled(date: Date): boolean {\n    if (fromDate && isBefore(date, startOfDay(fromDate))) return true;\n    if (toDate && isBefore(startOfDay(toDate), date)) return true;\n    return dateDisabled?.(date) ?? false;\n  }\n\n  function handleCalendarSelect(value: Date | Date[] | DateRange | undefined) {\n    if (mode === \"single\") {\n      let next = value as Date | undefined;\n      if (next && dateTime) {\n        const merged = new Date(next);\n        merged.setHours(selectedTime.getHours(), selectedTime.getMinutes(), 0, 0);\n        next = merged;\n      }\n      commit(next);\n      if (next) setOpen(false);\n      return;\n    }\n\n    if (mode === \"multiple\") {\n      commit((value as Date[]) ?? []);\n      return;\n    }\n\n    const next = value as DateRange | undefined;\n    commit(next);\n    if (next?.from && next?.to) setOpen(false);\n  }\n\n  function handlePreset(preset: DatePreset) {\n    const val = preset.getValue();\n    if (mode === \"single\") commit(val as Date);\n    else if (mode === \"range\") commit(val as DateRange);\n    else commit(Array.isArray(val) ? val : [val as Date]);\n    setOpen(false);\n  }\n\n  function clearSelection() {\n    commit(mode === \"multiple\" ? [] : undefined);\n  }\n\n  const showPresets = presetsProp !== false;\n  const presets: DatePreset[] = React.useMemo(\n    () => (Array.isArray(presetsProp) ? presetsProp : buildDefaultPresets(mode)),\n    [presetsProp, mode],\n  );\n\n  const [selectedTime, setSelectedTime] = React.useState<Date>(() => {\n    if (mode === \"single\" && currentSingle) return new Date(currentSingle);\n    return new Date();\n  });\n\n  React.useEffect(() => {\n    if (dateTime && mode === \"single\" && currentSingle) {\n      setSelectedTime(new Date(currentSingle));\n    }\n  }, [dateTime, mode, currentSingle]);\n\n  const triggerLabel = React.useMemo(() => {\n    if (mode === \"single\") {\n      return currentSingle ? formatDate(currentSingle) : null;\n    }\n    if (mode === \"range\") {\n      return currentRange?.from ? formatDateRange(currentRange) : null;\n    }\n    return currentMultiple.length > 0 ? formatMultipleDates(currentMultiple) : null;\n  }, [mode, currentSingle, currentRange, currentMultiple]);\n\n  const calendarSelected =\n    mode === \"single\"\n      ? currentSingle\n      : mode === \"range\"\n        ? currentRange\n        : currentMultiple;\n\n  return (\n    <BasePopover.Root open={open} onOpenChange={setOpen}>\n      <div className={cn(\"relative inline-flex items-center gap-1.5\", className)}>\n        <BasePopover.Trigger\n          disabled={isDisabled}\n          className={cn(TRIGGER_SURFACE, \"min-w-[180px] justify-between\")}\n        >\n          <span className={cn(!triggerLabel && \"text-[var(--primitive-text-placeholder,var(--muted-foreground))]\")}>\n            {triggerLabel ?? placeholder}\n          </span>\n          <IconCalendar size={15} stroke={1.75} className=\"shrink-0 text-[var(--muted-foreground)]\" />\n        </BasePopover.Trigger>\n\n        {triggerLabel ? (\n          <button\n            type=\"button\"\n            aria-label=\"Clear selection\"\n            disabled={isDisabled}\n            onClick={clearSelection}\n            className=\"flex size-5 shrink-0 items-center justify-center rounded-[var(--primitive-radius-control-sm)] text-[var(--muted-foreground)] transition-colors duration-150 hover:bg-[var(--primitive-surface-hover)] hover:text-[var(--foreground)] disabled:pointer-events-none disabled:opacity-40\"\n          >\n            <IconX size={12} stroke={2} />\n          </button>\n        ) : null}\n      </div>\n\n      <BasePopover.Portal>\n        <BasePopover.Positioner\n          side=\"bottom\"\n          align=\"start\"\n          sideOffset={6}\n          collisionPadding={12}\n          className=\"z-[var(--primitive-z-popover)] outline-none\"\n        >\n          <BasePopover.Popup data-wensity-primitive=\"\"\n            className={cn(POPOVER_CONTENT_CLASS, showPresets ? \"w-[364px]\" : \"w-[288px]\")}\n          >\n            <div className={cn(\"flex\", showPresets && \"gap-3\")}>\n              {showPresets ? (\n                <div className=\"flex w-[100px] shrink-0 flex-col gap-0.5 border-r border-[var(--border)] pr-2\">\n                  {presets.map((preset) => (\n                    <button\n                      key={preset.label}\n                      type=\"button\"\n                      onClick={() => handlePreset(preset)}\n                      className={PRESET_ITEM_CLASS}\n                    >\n                      {preset.label}\n                    </button>\n                  ))}\n                </div>\n              ) : null}\n\n              <div className=\"flex-1\">\n                {mode === \"single\" ? (\n                  <Calendar\n                    mode=\"single\"\n                    selected={calendarSelected as Date | undefined}\n                    onSelect={handleCalendarSelect}\n                    month={displayMonth}\n                    onMonthChange={setDisplayMonth}\n                    quickNav={monthYear}\n                    weekStartsOn={weekStartsOn}\n                    disabled={isDateDisabled}\n                    className=\"max-w-none border-0 bg-transparent p-0\"\n                  />\n                ) : mode === \"range\" ? (\n                  <Calendar\n                    mode=\"range\"\n                    selected={calendarSelected as DateRange | undefined}\n                    onSelect={handleCalendarSelect}\n                    month={displayMonth}\n                    onMonthChange={setDisplayMonth}\n                    quickNav={monthYear}\n                    weekStartsOn={weekStartsOn}\n                    disabled={isDateDisabled}\n                    className=\"max-w-none border-0 bg-transparent p-0\"\n                  />\n                ) : (\n                  <Calendar\n                    mode=\"multiple\"\n                    selected={calendarSelected as Date[]}\n                    onSelect={handleCalendarSelect}\n                    month={displayMonth}\n                    onMonthChange={setDisplayMonth}\n                    quickNav={monthYear}\n                    weekStartsOn={weekStartsOn}\n                    disabled={isDateDisabled}\n                    className=\"max-w-none border-0 bg-transparent p-0\"\n                  />\n                )}\n\n                {dateTime ? (\n                  <TimePicker\n                    value={selectedTime}\n                    onChange={(d) => {\n                      setSelectedTime(d);\n                      if (currentSingle) {\n                        const merged = new Date(currentSingle);\n                        merged.setHours(d.getHours(), d.getMinutes(), 0, 0);\n                        commit(merged);\n                      }\n                    }}\n                  />\n                ) : null}\n              </div>\n            </div>\n          </BasePopover.Popup>\n        </BasePopover.Positioner>\n      </BasePopover.Portal>\n    </BasePopover.Root>\n  );\n}\n\n/* ─── Export ────────────────────────────────────────────────── */\n\nexport const DatePicker = DatePickerInner as {\n  (props: DatePickerSingleProps): React.ReactElement;\n  (props: DatePickerRangeProps): React.ReactElement;\n  (props: DatePickerMultipleProps): React.ReactElement;\n};\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/date-picker.tsx. For Pro components and updates, use pnpm dlx wensity@latest add date-picker.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "date-picker",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/date-picker",
      "shadcnUrl": "https://ui.wensity.com/r/date-picker",
      "cliInstall": "pnpm dlx wensity@latest add date-picker"
    }
  }
}