@bricks-toolkit/toolkit 0.1.18 → 0.1.20

package/dist/chunk-E6KUCC56.mjs

@@ -0,0 +1,804 @@
+import { parseISODate, toISODateString, buildCalendarGrid, getYearRange, MONTH_NAMES, DAY_NAMES_SHORT, isSameDay, isDisabledDate, MONTH_NAMES_SHORT, formatDate } from './chunk-4PRNRENN.mjs';
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { useId, useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import { CalendarIcon, XMarkIcon, ClockIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function parseTime(v) {
+  const parts = (v || "00:00").split(":");
+  const numbers = parts.map(Number);
+  const h = numbers[0];
+  const m = numbers[1];
+  return {
+    hours: h === void 0 || isNaN(h) ? 0 : h,
+    minutes: m === void 0 || isNaN(m) ? 0 : m
+  };
+}
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+function toTimeString(h, m) {
+  return `${pad(h)}:${pad(m)}`;
+}
+function formatTimeDisplay(v, use12) {
+  if (!v) return "";
+  const { hours, minutes } = parseTime(v);
+  if (use12) {
+    const ap = hours >= 12 ? "PM" : "AM";
+    return `${pad(hours % 12 || 12)}:${pad(minutes)} ${ap}`;
+  }
+  return toTimeString(hours, minutes);
+}
+function parseDT(v) {
+  if (!v) return { date: "", time: "" };
+  const [date, time] = v.split("T");
+  return { date: date ?? "", time: time ?? "" };
+}
+function formatDTDisplay(v, locale, use12) {
+  if (!v) return "";
+  const { date, time } = parseDT(v);
+  const d = parseISODate(date);
+  const datePart = d ? formatDate(d, locale) : date;
+  const timePart = formatTimeDisplay(time, use12);
+  return timePart ? `${datePart}  ${timePart}` : datePart;
+}
+var ITEM_H = 36;
+var sizeClasses = {
+  xs: "h-6 px-2 text-xs",
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-3 text-sm",
+  lg: "h-11 px-4 text-base",
+  xl: "h-12 px-4 text-lg"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+var variantClasses = {
+  default: "rounded-md border border-border bg-surface shadow-sm focus-within:ring-2 focus-within:ring-primary/40 transition-all duration-200",
+  filled: "rounded-md border border-transparent bg-surface-secondary focus-within:bg-surface focus-within:ring-2 focus-within:ring-primary/40 transition-all duration-200",
+  flushed: "rounded-none border-0 border-b border-border bg-transparent",
+  unstyled: "border-0 bg-transparent p-0"
+};
+var stateVariantClasses = {
+  default: {
+    default: "border-border focus-within:border-primary",
+    filled: "focus-within:border-primary",
+    flushed: "border-border",
+    unstyled: ""
+  },
+  error: {
+    default: "border-error focus-within:ring-error/20",
+    filled: "bg-error/5 focus-within:ring-error/20",
+    flushed: "border-error",
+    unstyled: ""
+  },
+  success: {
+    default: "border-success focus-within:ring-success/20",
+    filled: "bg-success/5 focus-within:ring-success/20",
+    flushed: "border-success",
+    unstyled: ""
+  },
+  warning: {
+    default: "border-warning focus-within:ring-warning/20",
+    filled: "bg-warning/5 focus-within:ring-warning/20",
+    flushed: "border-warning",
+    unstyled: ""
+  }
+};
+var stateMsgClasses = {
+  default: "text-text-muted",
+  error: "text-error font-medium",
+  success: "text-success font-medium",
+  warning: "text-warning font-medium"
+};
+function ScrollColumn({
+  items,
+  selected,
+  onSelect,
+  label
+}) {
+  const ref = useRef(null);
+  const scrollTo = useCallback(
+    (beh = "smooth") => {
+      if (!ref.current) return;
+      const idx = items.indexOf(selected);
+      if (idx < 0) return;
+      if (typeof ref.current.scrollTo === "function") {
+        ref.current.scrollTo({ top: Math.max(0, idx * ITEM_H - ITEM_H * 2), behavior: beh });
+      }
+    },
+    [items, selected]
+  );
+  useEffect(() => {
+    scrollTo("instant");
+  }, []);
+  useEffect(() => {
+    scrollTo("smooth");
+  }, [scrollTo]);
+  const step = (dir) => {
+    const idx = items.indexOf(selected);
+    const next = items[(idx + dir + items.length) % items.length];
+    if (next) onSelect(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5", role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          step(-1);
+        },
+        className: "p-1 rounded hover:bg-hover text-text-secondary",
+        "aria-label": `Prev ${label}`,
+        children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-x-0 rounded-lg bg-primary/10 border-y border-primary/20 pointer-events-none",
+          style: { top: ITEM_H * 2, height: ITEM_H }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { ref, className: "overflow-y-auto", style: { height: ITEM_H * 5, width: 52 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { height: ITEM_H * 2 } }),
+        items.map((item) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onSelect(item);
+            },
+            style: { height: ITEM_H },
+            className: cn(
+              "w-full flex items-center justify-center rounded-lg text-sm font-medium hover:bg-hover transition-colors",
+              selected === item ? "text-primary font-bold" : "text-text-secondary"
+            ),
+            "aria-pressed": selected === item,
+            children: item
+          },
+          item
+        )),
+        /* @__PURE__ */ jsx("div", { style: { height: ITEM_H * 2 } })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          step(1);
+        },
+        className: "p-1 rounded hover:bg-hover text-text-secondary",
+        "aria-label": `Next ${label}`,
+        children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-4 h-4" })
+      }
+    )
+  ] });
+}
+function AddonIcon({
+  children,
+  side,
+  size,
+  onClick,
+  asButton = false,
+  ariaLabel
+}) {
+  const sz = {
+    xs: "w-3.5 h-3.5",
+    sm: "w-4 h-4",
+    md: "w-4 h-4",
+    lg: "w-5 h-5",
+    xl: "w-5 h-5"
+  };
+  const base = cn(
+    "absolute top-1/2 -translate-y-1/2 text-text-secondary flex items-center justify-center",
+    side === "left" ? "left-3" : "right-3",
+    sz[size]
+  );
+  if (asButton && onClick)
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: cn(base, "cursor-pointer hover:text-text"),
+        tabIndex: -1,
+        "aria-label": ariaLabel,
+        children
+      }
+    );
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(base, "pointer-events-none"), "aria-label": ariaLabel, children });
+}
+function DateTimePicker({
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  variant = "default",
+  size = "md",
+  state = "default",
+  fullWidth = true,
+  leftElement,
+  rightElement,
+  prefix,
+  suffix,
+  wrapperClassName,
+  inputGroupClassName,
+  inputClassName,
+  labelClassName,
+  helperClassName,
+  className,
+  clearable,
+  isLoading,
+  disabled,
+  value,
+  defaultValue,
+  onChange,
+  onDateTimeChange,
+  placeholder = "Select date & time",
+  locale = "en-US",
+  minDate,
+  maxDate,
+  disabledDates,
+  minuteStep = 1,
+  use12Hour = false,
+  id: idProp,
+  name,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedby
+}) {
+  const genId = useId();
+  const inputId = idProp ?? genId;
+  const popoverId = `${inputId}-popover`;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const displayValue = isControlled ? value : internalValue;
+  const { date: selDateStr, time: selTimeStr } = parseDT(displayValue);
+  const selDate = parseISODate(selDateStr);
+  const [isOpen, setIsOpen] = useState(false);
+  const [tab, setTab] = useState("date");
+  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const [viewYear, setViewYear] = useState(selDate?.getFullYear() ?? today.getFullYear());
+  const [viewMonth, setViewMonth] = useState(selDate?.getMonth() ?? today.getMonth());
+  const [viewMode, setViewMode] = useState("day");
+  const { hours: sH, minutes: sM } = parseTime(selTimeStr || "00:00");
+  const [pickerHour, setPickerHour] = useState(pad(use12Hour ? sH % 12 || 12 : sH));
+  const [pickerMinute, setPickerMinute] = useState(pad(sM));
+  const [pickerAmpm, setPickerAmpm] = useState(sH >= 12 ? "PM" : "AM");
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    const h = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setViewMode("day");
+      }
+    };
+    document.addEventListener("mousedown", h);
+    return () => {
+      document.removeEventListener("mousedown", h);
+    };
+  }, [isOpen]);
+  const [prevVal, setPrevVal] = useState(displayValue);
+  if (displayValue !== prevVal) {
+    setPrevVal(displayValue);
+    if (selDate) {
+      setViewYear(selDate.getFullYear());
+      setViewMonth(selDate.getMonth());
+    }
+    const { hours, minutes } = parseTime(selTimeStr || "00:00");
+    setPickerHour(pad(use12Hour ? hours % 12 || 12 : hours));
+    setPickerMinute(pad(minutes));
+    setPickerAmpm(hours >= 12 ? "PM" : "AM");
+  }
+  const commit = useCallback(
+    (dateStr, timeStr) => {
+      const combined = `${dateStr}T${timeStr}`;
+      if (!isControlled) setInternalValue(combined);
+      onChange?.(combined);
+      const d = parseISODate(dateStr);
+      if (d) {
+        const { hours, minutes } = parseTime(timeStr);
+        d.setHours(hours, minutes);
+        onDateTimeChange?.(d);
+      }
+    },
+    [isControlled, onChange, onDateTimeChange]
+  );
+  const handleDateSelect = (date) => {
+    if (isDisabledDate(date, minDate, maxDate, disabledDates)) return;
+    const time = selTimeStr || toTimeString(parseInt(pickerHour), parseInt(pickerMinute));
+    commit(toISODateString(date), time);
+    setTab("time");
+  };
+  const applyTime = useCallback(
+    (h, m, ap) => {
+      let hours24 = parseInt(h);
+      if (use12Hour) {
+        if (ap === "AM" && hours24 === 12) hours24 = 0;
+        if (ap === "PM" && hours24 !== 12) hours24 += 12;
+      }
+      const dateStr = selDateStr || toISODateString(today);
+      commit(dateStr, toTimeString(hours24, parseInt(m)));
+    },
+    [use12Hour, selDateStr, commit, today]
+  );
+  const handleHour = (h) => {
+    setPickerHour(h);
+    applyTime(h, pickerMinute, pickerAmpm);
+  };
+  const handleMinute = (m) => {
+    setPickerMinute(m);
+    applyTime(pickerHour, m, pickerAmpm);
+  };
+  const handleAmpm = (ap) => {
+    const a = ap;
+    setPickerAmpm(a);
+    applyTime(pickerHour, pickerMinute, a);
+  };
+  const handleNow = () => {
+    const now = /* @__PURE__ */ new Date();
+    const dateStr = toISODateString(now);
+    const timeStr = toTimeString(now.getHours(), now.getMinutes());
+    if (!isControlled) setInternalValue(`${dateStr}T${timeStr}`);
+    onChange?.(`${dateStr}T${timeStr}`);
+    onDateTimeChange?.(now);
+    setIsOpen(false);
+  };
+  const handleClear = () => {
+    if (!isControlled) setInternalValue("");
+    onChange?.("");
+    onDateTimeChange?.(null);
+  };
+  const hourItems = use12Hour ? Array.from({ length: 12 }, (_, i) => pad(i + 1)) : Array.from({ length: 24 }, (_, i) => pad(i));
+  const minuteItems = Array.from(
+    { length: Math.ceil(60 / minuteStep) },
+    (_, i) => pad(i * minuteStep)
+  );
+  const showClear = clearable && displayValue.length > 0 && !disabled && !isLoading;
+  const rightPad = {
+    xs: "pr-6",
+    sm: "pr-8",
+    md: "pr-9",
+    lg: "pr-10",
+    xl: "pr-11"
+  };
+  const calendarGrid = buildCalendarGrid(viewYear, viewMonth);
+  const yearRange = getYearRange(viewYear);
+  const stateMessage = state === "error" ? errorMessage : state === "success" ? successMessage : state === "warning" ? warningMessage : void 0;
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null, ariaDescribedby ?? null].filter(Boolean).join(" ") || void 0;
+  const prevMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else setViewMonth((m) => m - 1);
+  };
+  const nextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else setViewMonth((m) => m + 1);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn(
+        "flex flex-col gap-1 relative",
+        fullWidth ? "w-full" : "w-fit",
+        wrapperClassName,
+        className
+      ),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn(
+              "font-black leading-none text-text uppercase tracking-widest",
+              labelSizeClasses[size],
+              labelClassName
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
+            children: [
+              prefix && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center border border-border bg-surface-secondary px-3 text-sm text-text-secondary rounded-l-md border-r-0", children: prefix }),
+              /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 items-center", children: [
+                /* @__PURE__ */ jsx(AddonIcon, { side: "left", size, children: leftElement ?? /* @__PURE__ */ jsx(CalendarIcon, { className: "w-full h-full" }) }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    id: inputId,
+                    type: "button",
+                    role: "combobox",
+                    "aria-expanded": isOpen,
+                    "aria-haspopup": "dialog",
+                    "aria-controls": popoverId,
+                    "aria-label": ariaLabel ?? label ?? "Date time picker",
+                    "aria-describedby": describedBy,
+                    "aria-required": required,
+                    "aria-invalid": state === "error" ? true : void 0,
+                    disabled: Boolean(disabled) || Boolean(isLoading),
+                    onClick: () => {
+                      if (!disabled && !isLoading) setIsOpen((p) => !p);
+                    },
+                    name,
+                    className: cn(
+                      "w-full flex items-center text-left cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+                      sizeClasses[size],
+                      variantClasses[variant],
+                      stateVariantClasses[state][variant],
+                      "pl-9",
+                      showClear || rightElement ? rightPad[size] : "",
+                      prefix && suffix ? "rounded-none" : prefix ? "rounded-l-none" : suffix ? "rounded-r-none" : "",
+                      inputClassName
+                    ),
+                    children: displayValue ? /* @__PURE__ */ jsx("span", { className: "text-text truncate", children: formatDTDisplay(displayValue, locale, use12Hour) }) : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder })
+                  }
+                ),
+                isLoading ? /* @__PURE__ */ jsx(AddonIcon, { side: "right", size, children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "animate-spin h-full w-full text-text-muted",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          className: "opacity-25",
+                          cx: "12",
+                          cy: "12",
+                          r: "10",
+                          stroke: "currentColor",
+                          strokeWidth: "4"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          className: "opacity-75",
+                          fill: "currentColor",
+                          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        }
+                      )
+                    ]
+                  }
+                ) }) : showClear ? /* @__PURE__ */ jsx(
+                  AddonIcon,
+                  {
+                    side: "right",
+                    size,
+                    asButton: true,
+                    onClick: handleClear,
+                    ariaLabel: "Clear date time",
+                    children: /* @__PURE__ */ jsx(XMarkIcon, { className: "w-full h-full", strokeWidth: 2.5 })
+                  }
+                ) : rightElement ? /* @__PURE__ */ jsx(AddonIcon, { side: "right", size, children: rightElement }) : null
+              ] }),
+              suffix && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center border border-border bg-surface-secondary px-3 text-sm text-text-secondary rounded-r-md border-l-0", children: suffix })
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: helperId,
+            className: cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
+            children: helperText
+          }
+        ),
+        stateMessage && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: stateMessageId,
+            role: state === "error" ? "alert" : void 0,
+            className: cn(
+              "text-xs leading-tight mt-0.5 font-medium",
+              stateMsgClasses[state],
+              helperClassName
+            ),
+            children: stateMessage
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: popoverId,
+            role: "dialog",
+            "aria-label": "Date and time picker",
+            "aria-modal": "true",
+            className: cn(
+              "absolute top-full left-0 z-50 mt-1 w-72 bg-surface border border-border rounded-xl shadow-xl",
+              "transition-all duration-200 origin-top",
+              isOpen ? "opacity-100 scale-100 pointer-events-auto" : "opacity-0 scale-95 pointer-events-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex border-b border-border", children: ["date", "time"].map((t) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setTab(t);
+                  },
+                  className: cn(
+                    "flex-1 flex items-center justify-center gap-1.5 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors",
+                    tab === t ? "text-primary border-b-2 border-primary -mb-px" : "text-text-muted hover:text-text"
+                  ),
+                  children: [
+                    t === "date" ? /* @__PURE__ */ jsx(CalendarIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(ClockIcon, { className: "w-3.5 h-3.5" }),
+                    t
+                  ]
+                },
+                t
+              )) }),
+              /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+                tab === "date" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  viewMode === "day" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: prevMonth,
+                          className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary",
+                          "aria-label": "Previous month",
+                          children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setViewMode("month");
+                          },
+                          className: "text-sm font-bold text-text hover:text-primary px-2 py-1 rounded-lg hover:bg-hover",
+                          children: [
+                            MONTH_NAMES[viewMonth],
+                            " ",
+                            viewYear
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: nextMonth,
+                          className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary",
+                          "aria-label": "Next month",
+                          children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 mb-1", children: DAY_NAMES_SHORT.map((d) => /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "text-center text-xs font-semibold text-text-muted py-1",
+                        children: d
+                      },
+                      d
+                    )) }),
+                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-y-0.5", children: calendarGrid.flat().map((date, idx) => {
+                      if (!date) return /* @__PURE__ */ jsx("div", {}, idx);
+                      const isSel = selDate ? isSameDay(date, selDate) : false;
+                      const isToday = isSameDay(date, today);
+                      const isDis = isDisabledDate(date, minDate, maxDate, disabledDates);
+                      return /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            handleDateSelect(date);
+                          },
+                          disabled: isDis,
+                          className: cn(
+                            "mx-auto flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-colors",
+                            isSel ? "bg-primary text-white font-bold" : isToday ? "ring-2 ring-primary text-primary" : "text-text hover:bg-hover",
+                            isDis && "opacity-30 cursor-not-allowed"
+                          ),
+                          children: date.getDate()
+                        },
+                        idx
+                      );
+                    }) })
+                  ] }),
+                  viewMode === "month" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setViewYear((y) => y - 1);
+                          },
+                          className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary",
+                          children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setViewMode("year");
+                          },
+                          className: "text-sm font-bold text-text hover:text-primary px-2 py-1 rounded-lg hover:bg-hover",
+                          children: viewYear
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setViewYear((y) => y + 1);
+                          },
+                          className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary",
+                          children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: MONTH_NAMES_SHORT.map((m, i) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          setViewMonth(i);
+                          setViewMode("day");
+                        },
+                        className: cn(
+                          "py-2 rounded-lg text-sm font-medium transition-colors",
+                          i === viewMonth ? "bg-primary text-white" : "text-text hover:bg-hover"
+                        ),
+                        children: m
+                      },
+                      m
+                    )) })
+                  ] }),
+                  viewMode === "year" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setViewYear((y) => y - 12);
+                          },
+                          className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary",
+                          children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold text-text", children: [
+                        yearRange[0],
+                        " \u2013 ",
+                        yearRange[yearRange.length - 1]
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setViewYear((y) => y + 12);
+                          },
+                          className: "p-1.5 rounded-lg hover:bg-hover text-text-secondary",
+                          children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: yearRange.map((yr) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          setViewYear(yr);
+                          setViewMode("month");
+                        },
+                        className: cn(
+                          "py-2 rounded-lg text-sm font-medium transition-colors",
+                          yr === selDate?.getFullYear() ? "bg-primary text-white" : "text-text hover:bg-hover",
+                          yr === today.getFullYear() && yr !== selDate?.getFullYear() ? "ring-1 ring-primary text-primary" : ""
+                        ),
+                        children: yr
+                      },
+                      yr
+                    )) })
+                  ] })
+                ] }),
+                tab === "time" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-text-muted uppercase tracking-widest mb-3", children: "Select Time" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+                    /* @__PURE__ */ jsx(
+                      ScrollColumn,
+                      {
+                        items: hourItems,
+                        selected: pickerHour,
+                        onSelect: handleHour,
+                        label: "Hour"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "flex items-center self-center text-text-muted font-bold text-lg pb-2",
+                        style: { height: ITEM_H },
+                        children: ":"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ScrollColumn,
+                      {
+                        items: minuteItems,
+                        selected: pickerMinute,
+                        onSelect: handleMinute,
+                        label: "Minute"
+                      }
+                    ),
+                    use12Hour && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("div", { className: "w-px self-stretch bg-border mx-1" }),
+                      /* @__PURE__ */ jsx(
+                        ScrollColumn,
+                        {
+                          items: ["AM", "PM"],
+                          selected: pickerAmpm,
+                          onSelect: handleAmpm,
+                          label: "AM/PM"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "mt-3 pt-3 border-t border-border w-full text-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-primary font-mono", children: selTimeStr ? formatTimeDisplay(selTimeStr, use12Hour) : "\u2013\u2013:\u2013\u2013" }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 pb-3 pt-1 gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleNow,
+                    className: "flex-1 py-1.5 rounded-lg text-xs font-bold text-primary border border-primary/30 hover:bg-primary/10 transition-colors",
+                    children: "Now"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setIsOpen(false);
+                      setViewMode("day");
+                    },
+                    className: "flex-1 py-1.5 rounded-lg text-xs font-bold bg-primary text-white hover:bg-primary/90 transition-colors",
+                    children: "Apply"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { DateTimePicker };