@payglocal_ui/flux-ui 0.3.0 → 0.3.1

package/dist/index.js

@@ -2568,7 +2568,7 @@ function useSpotlight(steps, initialStep = 0) {
       else setCurrentStep((s) => s + 1);
     },
     goBack: () => setCurrentStep((s) => Math.max(0, s - 1)),
-    goTo: (step) => setCurrentStep(Math.max(0, Math.min(step, steps.length - 1)))
+    goTo: (step2) => setCurrentStep(Math.max(0, Math.min(step2, steps.length - 1)))
   };
 }
 
@@ -3613,20 +3613,20 @@ var Progress = React36.forwardRef(({ className, value, variant = "default", size
 ] }));
 Progress.displayName = "Progress";
 var ProgressTracker = React36.forwardRef(
-  ({ className, steps, ...props }, ref) => /* @__PURE__ */ jsx47("div", { ref, className: cn("flex items-start", className), ...props, children: steps.map((step, i) => /* @__PURE__ */ jsxs28(React36.Fragment, { children: [
+  ({ className, steps, ...props }, ref) => /* @__PURE__ */ jsx47("div", { ref, className: cn("flex items-start", className), ...props, children: steps.map((step2, i) => /* @__PURE__ */ jsxs28(React36.Fragment, { children: [
     /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-1.5 min-w-0", children: [
       /* @__PURE__ */ jsx47("div", { className: cn(
         "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors",
-        step.status === "complete" && "bg-primary border-primary text-primary-foreground",
-        step.status === "current" && "bg-primary/10 border-primary text-primary",
-        step.status === "upcoming" && "bg-card border-border text-muted-foreground"
-      ), children: step.status === "complete" ? /* @__PURE__ */ jsx47(Check7, { className: "size-4", strokeWidth: 2.5 }) : i + 1 }),
+        step2.status === "complete" && "bg-primary border-primary text-primary-foreground",
+        step2.status === "current" && "bg-primary/10 border-primary text-primary",
+        step2.status === "upcoming" && "bg-card border-border text-muted-foreground"
+      ), children: step2.status === "complete" ? /* @__PURE__ */ jsx47(Check7, { className: "size-4", strokeWidth: 2.5 }) : i + 1 }),
       /* @__PURE__ */ jsxs28("div", { className: "text-center px-1", children: [
-        /* @__PURE__ */ jsx47("p", { className: cn("text-xs font-medium", step.status === "upcoming" ? "text-muted-foreground" : "text-foreground"), children: step.label }),
-        step.description && /* @__PURE__ */ jsx47("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: step.description })
+        /* @__PURE__ */ jsx47("p", { className: cn("text-xs font-medium", step2.status === "upcoming" ? "text-muted-foreground" : "text-foreground"), children: step2.label }),
+        step2.description && /* @__PURE__ */ jsx47("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: step2.description })
       ] })
     ] }),
-    i < steps.length - 1 && /* @__PURE__ */ jsx47("div", { className: "flex-1 mt-4 mx-1", children: /* @__PURE__ */ jsx47("div", { className: cn("h-0.5 w-full rounded-full transition-colors", step.status === "complete" ? "bg-primary" : "bg-border") }) })
+    i < steps.length - 1 && /* @__PURE__ */ jsx47("div", { className: "flex-1 mt-4 mx-1", children: /* @__PURE__ */ jsx47("div", { className: cn("h-0.5 w-full rounded-full transition-colors", step2.status === "complete" ? "bg-primary" : "bg-border") }) })
   ] }, i)) })
 );
 ProgressTracker.displayName = "ProgressTracker";
@@ -4247,7 +4247,7 @@ var PAGE_BUTTON = "w-7 h-7 rounded-md flex items-center justify-center text-[12p
 var PAGE_BUTTON_IDLE = "text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed";
 var PAGE_BUTTON_ACTIVE = "bg-primary text-primary-foreground shadow-sm";
 function DataTableFooter({
-  pad: pad2,
+  pad: pad3,
   summary,
   countLabels,
   leading,
@@ -4288,7 +4288,7 @@ function DataTableFooter({
     {
       className: cn(
         "flex items-center gap-4 flex-wrap border-t border-border",
-        pad2,
+        pad3,
         summary === "none" && !showRowsPerPage && !leading ? "justify-end" : "justify-between"
       ),
       children: [
@@ -4636,7 +4636,7 @@ function CopyableCell({
     valueClassName
   );
   const elided = display !== void 0 && display !== value;
-  const copyHint = copied ? "Copied" : elided ? `Copy ${value}` : `Copy ${label}`;
+  const copyHint = copied ? "Copied" : `Copy ${label}`;
   if (variant === "cell") {
     return /* @__PURE__ */ jsx53(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
       /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs34(
@@ -4674,31 +4674,45 @@ function CopyableCell({
       /* @__PURE__ */ jsx53(TooltipContent, { side: "top", className: "text-xs", children: copied ? "Copied" : "Copy" })
     ] }) });
   }
+  const valueNode = onClick ? (
+    // A bare <button>, deliberately, where the rest of flux would reach for
+    // `Button variant="link"`. That variant hard-codes `text-[15px]`, and
+    // the obvious override — `text-[inherit]` — does not beat it: Tailwind
+    // and tailwind-merge read `text-[<non-length>]` as a COLOUR, so the
+    // size class survives and the cell renders 2px larger than every other
+    // cell in the row. Preflight already gives a bare button `font: inherit`,
+    // so this simply inherits the cell's size at whatever density the table
+    // is using, which is what a cell should do.
+    /* @__PURE__ */ jsx53(
+      "button",
+      {
+        type: "button",
+        onClick,
+        title: elided ? void 0 : value,
+        "aria-label": elided ? value : void 0,
+        className: cn(
+          "cursor-pointer bg-transparent p-0 text-left underline-offset-4",
+          "hover:underline focus-visible:underline focus-visible:outline-none",
+          text
+        ),
+        children: display ?? value
+      }
+    )
+  ) : /* @__PURE__ */ jsx53(
+    "span",
+    {
+      className: text,
+      title: elided ? void 0 : value,
+      "aria-hidden": elided || void 0,
+      children: display ?? value
+    }
+  );
   return /* @__PURE__ */ jsxs34("div", { className: cn("group/copy flex min-w-0 items-center gap-1", className), children: [
-    onClick ? (
-      // A bare <button>, deliberately, where the rest of flux would reach for
-      // `Button variant="link"`. That variant hard-codes `text-[15px]`, and
-      // the obvious override — `text-[inherit]` — does not beat it: Tailwind
-      // and tailwind-merge read `text-[<non-length>]` as a COLOUR, so the
-      // size class survives and the cell renders 2px larger than every other
-      // cell in the row. Preflight already gives a bare button `font: inherit`,
-      // so this simply inherits the cell's size at whatever density the table
-      // is using, which is what a cell should do.
-      /* @__PURE__ */ jsx53(
-        "button",
-        {
-          type: "button",
-          onClick,
-          title: value,
-          className: cn(
-            "cursor-pointer bg-transparent p-0 text-left underline-offset-4",
-            "hover:underline focus-visible:underline focus-visible:outline-none",
-            text
-          ),
-          children: display ?? value
-        }
-      )
-    ) : /* @__PURE__ */ jsx53("span", { className: text, title: value, children: display ?? value }),
+    elided ? /* @__PURE__ */ jsx53(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
+      /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: valueNode }),
+      /* @__PURE__ */ jsx53(TooltipContent, { side: "top", className: "text-xs", children: value })
+    ] }) }) : valueNode,
+    elided && !onClick && /* @__PURE__ */ jsx53("span", { className: "sr-only", children: value }),
     /* @__PURE__ */ jsx53(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
       /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
         Button,
@@ -5652,11 +5666,12 @@ function CalendarDayButton({
 }
 
 // src/date-picker.tsx
-import { useState as useState12, useRef as useRef8, useEffect as useEffect8 } from "react";
+import { useState as useState12, useRef as useRef8, useEffect as useEffect8, useMemo as useMemo7, useCallback as useCallback5 } from "react";
 import { createPortal } from "react-dom";
+import { RemoveScroll } from "react-remove-scroll";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight8, ChevronDown as ChevronDown8, CalendarDays } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
-import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
 var MONTHS = [
   "January",
   "February",
@@ -5673,30 +5688,117 @@ var MONTHS = [
 ];
 var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 var PRIMARY = "#0061E3";
-var PANEL_W = 296;
+var CALENDAR_W = 296;
+var TIME_COL_W = 58;
+var TIME_ITEM_H = 28;
+var TIME_COL_H = 232;
 function daysInMonth(y, m) {
   return new Date(y, m + 1, 0).getDate();
 }
 function firstDayOf(y, m) {
   return new Date(y, m, 1).getDay();
 }
-function parseYMD(s) {
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+function parseValue(s) {
   if (!s) return null;
-  const [y, m, d] = s.split("-").map(Number);
+  const [datePart, timePart = ""] = s.trim().split(/[ T]/);
+  const [y, m, d] = datePart.split("-").map(Number);
   if (!y || !m || !d) return null;
-  return { y, m: m - 1, d };
+  const [hh = 0, mm = 0, ss = 0] = timePart ? timePart.split(":").map(Number) : [];
+  return {
+    y,
+    m: m - 1,
+    d,
+    hh: Number.isFinite(hh) ? hh : 0,
+    mm: Number.isFinite(mm) ? mm : 0,
+    ss: Number.isFinite(ss) ? ss : 0
+  };
+}
+function parseYMD(s) {
+  const p = parseValue(s);
+  return p ? { y: p.y, m: p.m, d: p.d } : null;
 }
 function toYMD(y, m, d) {
-  return `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+  return `${y}-${pad(m + 1)}-${pad(d)}`;
+}
+function formatValue(p, showTime, showSecond) {
+  const date = toYMD(p.y, p.m, p.d);
+  if (!showTime) return date;
+  return showSecond ? `${date} ${pad(p.hh)}:${pad(p.mm)}:${pad(p.ss)}` : `${date} ${pad(p.hh)}:${pad(p.mm)}`;
 }
-function displayDate(ymd) {
-  const p = parseYMD(ymd);
+function displayTime(p, showSecond) {
+  const period = p.hh < 12 ? "AM" : "PM";
+  const h12 = p.hh % 12 === 0 ? 12 : p.hh % 12;
+  const base = showSecond ? `${pad(h12)}:${pad(p.mm)}:${pad(p.ss)}` : `${pad(h12)}:${pad(p.mm)}`;
+  return `${base} ${period}`;
+}
+function displayValue(value, showTime, showSecond) {
+  const p = parseValue(value);
   if (!p) return "";
-  return `${String(p.d).padStart(2, "0")} ${MONTHS[p.m].slice(0, 3)} ${p.y}`;
+  const date = `${pad(p.d)} ${MONTHS[p.m].slice(0, 3)} ${p.y}`;
+  return showTime ? `${date}, ${displayTime(p, showSecond)}` : date;
+}
+function step(n) {
+  return Math.max(1, Math.floor(n ?? 1));
 }
-function DatePicker({ value, onChange, placeholder = "Select date", className, min, max, label }) {
+function TimeColumn({
+  label,
+  items,
+  selected,
+  onSelect,
+  render
+}) {
+  const ref = useRef8(null);
+  const index = items.indexOf(selected);
+  useEffect8(() => {
+    const el = ref.current;
+    if (!el || index < 0) return;
+    el.scrollTo({ top: index * TIME_ITEM_H, behavior: "smooth" });
+  }, [index]);
+  return /* @__PURE__ */ jsxs41("div", { className: "flex flex-col border-l border-border", style: { width: TIME_COL_W }, children: [
+    /* @__PURE__ */ jsx62("div", { className: "py-1 text-center text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70", children: label }),
+    /* @__PURE__ */ jsxs41(
+      "div",
+      {
+        ref,
+        className: "overflow-y-auto",
+        style: { height: TIME_COL_H, scrollbarWidth: "none", msOverflowStyle: "none" },
+        children: [
+          items.map((item) => {
+            const active = item === selected;
+            return /* @__PURE__ */ jsx62(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(item),
+                className: cn(
+                  "flex w-full items-center justify-center rounded-md text-[13px] font-medium transition-colors",
+                  active ? "font-semibold text-white" : "text-foreground hover:bg-muted"
+                ),
+                style: { height: TIME_ITEM_H, background: active ? PRIMARY : void 0 },
+                children: render ? render(item) : String(item)
+              },
+              String(item)
+            );
+          }),
+          /* @__PURE__ */ jsx62("div", { style: { height: TIME_COL_H - TIME_ITEM_H } })
+        ]
+      }
+    )
+  ] });
+}
+function DatePicker({ value, onChange, placeholder = "Select date", className, min, max, label, showTime = false, showNow = true }) {
   const today = /* @__PURE__ */ new Date();
-  const parsed = parseYMD(value);
+  const parsed = parseValue(value);
+  const timeOptions = useMemo7(
+    () => typeof showTime === "object" ? showTime : {},
+    [showTime]
+  );
+  const withTime = showTime !== false && showTime !== void 0;
+  const use12Hours = timeOptions.use12Hours ?? true;
+  const showSecond = timeOptions.showSecond ?? false;
   const [open, setOpen] = useState12(false);
   const [panelPos, setPanelPos] = useState12({ top: 0, left: 0 });
   const [viewYear, setViewYear] = useState12(parsed?.y ?? today.getFullYear());
@@ -5715,34 +5817,39 @@ function DatePicker({ value, onChange, placeholder = "Select date", className, m
       setViewMonth(parsed.m);
     }
   }, [value]);
+  const columnCount = withTime ? (showSecond ? 3 : 2) + (use12Hours ? 1 : 0) : 0;
+  const PANEL_W2 = CALENDAR_W + columnCount * TIME_COL_W;
+  const PANEL_H2 = withTime ? 392 : 340;
   function openPanel() {
     if (!triggerRef.current) return;
     const trigger = triggerRef.current;
     const vw = window.innerWidth;
     const vh = window.innerHeight;
-    const PANEL_H2 = 340;
     trigger.scrollIntoView({ block: "center", behavior: "auto" });
     requestAnimationFrame(() => {
       if (!triggerRef.current) return;
       const rect = triggerRef.current.getBoundingClientRect();
       let left = rect.left;
-      if (left + PANEL_W > vw - 8) left = vw - PANEL_W - 8;
+      if (left + PANEL_W2 > vw - 8) left = vw - PANEL_W2 - 8;
+      if (left < 8) left = 8;
       let top = rect.bottom + 6;
       if (top + PANEL_H2 > vh - 8) top = rect.top - PANEL_H2 - 6;
+      if (top < 8) top = 8;
       setPanelPos({ top, left });
       setOpen(true);
     });
   }
+  function closePanel() {
+    setOpen(false);
+    setYearMenu(false);
+    setMonthMenu(false);
+  }
   useEffect8(() => {
     if (!open) return;
     function handler(e) {
       const inTrigger = triggerRef.current?.contains(e.target);
       const inPanel = panelRef.current?.contains(e.target);
-      if (!inTrigger && !inPanel) {
-        setOpen(false);
-        setYearMenu(false);
-        setMonthMenu(false);
-      }
+      if (!inTrigger && !inPanel) closePanel();
     }
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -5785,18 +5892,251 @@ function DatePicker({ value, onChange, placeholder = "Select date", className, m
     cells.push({ d, m, y, current: false });
   }
   const years = Array.from({ length: 15 }, (_, i) => today.getFullYear() - 2 + i);
+  const fallback = parseValue(`2000-01-01 ${timeOptions.defaultValue ?? "00:00"}`);
+  const current = parsed ?? {
+    y: today.getFullYear(),
+    m: today.getMonth(),
+    d: today.getDate(),
+    hh: fallback.hh,
+    mm: fallback.mm,
+    ss: fallback.ss
+  };
+  const emit = useCallback5(
+    (next) => onChange(formatValue(next, withTime, showSecond)),
+    [onChange, withTime, showSecond]
+  );
+  function patchTime(patch) {
+    emit({ ...current, ...patch });
+  }
+  const hourStep = step(timeOptions.hourStep);
+  const minuteStep = step(timeOptions.minuteStep);
+  const secondStep = step(timeOptions.secondStep);
+  const hourItems = use12Hours ? Array.from({ length: Math.ceil(12 / hourStep) }, (_, i) => i * hourStep % 12) : Array.from({ length: Math.ceil(24 / hourStep) }, (_, i) => i * hourStep);
+  const minuteItems = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
+  const secondItems = Array.from({ length: Math.ceil(60 / secondStep) }, (_, i) => i * secondStep);
+  const selectedHour = use12Hours ? current.hh % 12 : current.hh;
+  const selectedMeridiem = current.hh < 12 ? "AM" : "PM";
+  function selectHour(h) {
+    if (!use12Hours) return patchTime({ hh: h });
+    patchTime({ hh: selectedMeridiem === "AM" ? h : h + 12 });
+  }
+  function selectMeridiem(p) {
+    const base = current.hh % 12;
+    patchTime({ hh: p === "AM" ? base : base + 12 });
+  }
   function selectDay(cell) {
     if (!cell.current) {
       setViewYear(cell.y);
       setViewMonth(cell.m);
     }
     if (cell.current && isDisabled(cell.y, cell.m, cell.d)) return;
-    onChange(toYMD(cell.y, cell.m, cell.d));
-    setOpen(false);
+    emit({ y: cell.y, m: cell.m, d: cell.d, hh: current.hh, mm: current.mm, ss: current.ss });
+    if (!withTime) setOpen(false);
+  }
+  function selectNow() {
+    const n = /* @__PURE__ */ new Date();
+    if (isDisabled(n.getFullYear(), n.getMonth(), n.getDate())) return;
+    emit({
+      y: n.getFullYear(),
+      m: n.getMonth(),
+      d: n.getDate(),
+      hh: n.getHours(),
+      mm: n.getMinutes(),
+      ss: n.getSeconds()
+    });
+    closePanel();
   }
   const isToday = (c) => c.d === today.getDate() && c.m === today.getMonth() && c.y === today.getFullYear();
   const isSelected = (c) => !!parsed && c.d === parsed.d && c.m === parsed.m && c.y === parsed.y;
-  const panel = /* @__PURE__ */ jsx62(AnimatePresence, { children: open && /* @__PURE__ */ jsxs41(
+  const calendar = /* @__PURE__ */ jsxs41("div", { style: { width: CALENDAR_W }, className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between px-4 pt-4 pb-3", children: [
+      /* @__PURE__ */ jsx62(
+        "button",
+        {
+          type: "button",
+          onClick: prevMonth,
+          className: "w-8 h-8 rounded-full flex items-center justify-center text-muted-foreground hover:bg-muted transition-colors",
+          children: /* @__PURE__ */ jsx62(ChevronLeft6, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs41(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setMonthMenu((o) => !o);
+                setYearMenu(false);
+              },
+              className: "flex items-center gap-1 px-2 py-1 rounded-lg text-[14px] font-semibold text-foreground hover:bg-muted transition-colors",
+              children: [
+                MONTHS[viewMonth].slice(0, 3),
+                /* @__PURE__ */ jsx62(ChevronDown8, { className: "w-3 h-3 text-muted-foreground" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx62(AnimatePresence, { children: monthMenu && /* @__PURE__ */ jsx62(
+            motion.div,
+            {
+              initial: { opacity: 0, y: -4 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: -4 },
+              transition: { duration: 0.12 },
+              className: "absolute top-full left-0 z-[10000] mt-1 max-h-[220px] min-w-[130px] overflow-y-auto rounded-xl border border-border bg-popover py-1 shadow-lg",
+              children: MONTHS.map((mn, mi) => /* @__PURE__ */ jsx62(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setViewMonth(mi);
+                    setMonthMenu(false);
+                  },
+                  className: "w-full px-3 py-2 text-left text-[13px] text-foreground transition-colors hover:bg-muted",
+                  style: { fontWeight: mi === viewMonth ? 600 : 400, color: mi === viewMonth ? PRIMARY : void 0 },
+                  children: mn
+                },
+                mn
+              ))
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs41(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setYearMenu((o) => !o);
+                setMonthMenu(false);
+              },
+              className: "flex items-center gap-1 px-2 py-1 rounded-lg text-[14px] font-semibold text-foreground hover:bg-muted transition-colors",
+              children: [
+                viewYear,
+                /* @__PURE__ */ jsx62(ChevronDown8, { className: "w-3 h-3 text-muted-foreground" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx62(AnimatePresence, { children: yearMenu && /* @__PURE__ */ jsx62(
+            motion.div,
+            {
+              initial: { opacity: 0, y: -4 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: -4 },
+              transition: { duration: 0.12 },
+              className: "absolute top-full left-0 z-[10000] mt-1 max-h-[200px] min-w-[90px] overflow-y-auto rounded-xl border border-border bg-popover py-1 shadow-lg",
+              children: years.map((yr) => /* @__PURE__ */ jsx62(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setViewYear(yr);
+                    setYearMenu(false);
+                  },
+                  className: "w-full px-3 py-2 text-left text-[13px] text-foreground transition-colors hover:bg-muted",
+                  style: { fontWeight: yr === viewYear ? 600 : 400, color: yr === viewYear ? PRIMARY : void 0 },
+                  children: yr
+                },
+                yr
+              ))
+            }
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx62(
+        "button",
+        {
+          type: "button",
+          onClick: nextMonth,
+          className: "w-8 h-8 rounded-full flex items-center justify-center text-muted-foreground hover:bg-muted transition-colors",
+          children: /* @__PURE__ */ jsx62(ChevronRight8, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx62(
+      "div",
+      {
+        className: "px-3 pb-1",
+        style: { display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" },
+        children: DAYS.map((d) => /* @__PURE__ */ jsx62("div", { className: "py-1 text-center text-[11.5px] font-semibold text-muted-foreground", children: d }, d))
+      }
+    ),
+    /* @__PURE__ */ jsx62(
+      "div",
+      {
+        className: "gap-y-0.5 px-3 pb-4",
+        style: { display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" },
+        children: cells.map((cell, i) => {
+          const selected = isSelected(cell);
+          const tod = isToday(cell);
+          const disabled = cell.current && isDisabled(cell.y, cell.m, cell.d);
+          return /* @__PURE__ */ jsx62(
+            "button",
+            {
+              type: "button",
+              onClick: () => selectDay(cell),
+              disabled,
+              className: cn(
+                "h-9 w-9 mx-auto rounded-full text-[13px] font-medium flex items-center justify-center transition-all",
+                selected && "text-white font-semibold",
+                !selected && tod && "font-semibold",
+                !selected && !tod && cell.current && !disabled && "text-gray-800 hover:bg-gray-100",
+                !selected && !cell.current && "text-gray-300 hover:bg-gray-50",
+                disabled && "opacity-30 cursor-not-allowed"
+              ),
+              style: selected ? { background: PRIMARY } : tod ? { background: `${PRIMARY}18`, color: PRIMARY } : {},
+              children: cell.d
+            },
+            i
+          );
+        })
+      }
+    )
+  ] });
+  const timeColumns = withTime && /* @__PURE__ */ jsxs41("div", { className: "flex pt-3", children: [
+    /* @__PURE__ */ jsx62(
+      TimeColumn,
+      {
+        label: "Hr",
+        items: hourItems,
+        selected: selectedHour,
+        onSelect: selectHour,
+        render: (h) => pad(use12Hours && h === 0 ? 12 : h)
+      }
+    ),
+    /* @__PURE__ */ jsx62(TimeColumn, { label: "Min", items: minuteItems, selected: current.mm, onSelect: (m) => patchTime({ mm: m }), render: pad }),
+    showSecond && /* @__PURE__ */ jsx62(TimeColumn, { label: "Sec", items: secondItems, selected: current.ss, onSelect: (s) => patchTime({ ss: s }), render: pad }),
+    use12Hours && /* @__PURE__ */ jsx62(TimeColumn, { label: "AM/PM", items: ["AM", "PM"], selected: selectedMeridiem, onSelect: selectMeridiem })
+  ] });
+  const body = /* @__PURE__ */ jsxs41(Fragment8, { children: [
+    /* @__PURE__ */ jsxs41("div", { className: "flex", children: [
+      calendar,
+      timeColumns
+    ] }),
+    withTime && /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between border-t border-border px-4 py-2.5", children: [
+      showNow ? /* @__PURE__ */ jsx62(
+        "button",
+        {
+          type: "button",
+          onClick: selectNow,
+          className: "rounded-md px-1 text-[13px] font-medium transition-colors hover:underline",
+          style: { color: PRIMARY },
+          children: "Now"
+        }
+      ) : /* @__PURE__ */ jsx62("span", {}),
+      /* @__PURE__ */ jsx62(
+        "button",
+        {
+          type: "button",
+          onClick: closePanel,
+          className: "rounded-lg px-3 py-1.5 text-[13px] font-semibold text-white transition-opacity hover:opacity-90",
+          style: { background: PRIMARY },
+          children: "OK"
+        }
+      )
+    ] })
+  ] });
+  const panel = /* @__PURE__ */ jsx62(AnimatePresence, { children: open && /* @__PURE__ */ jsx62(
     motion.div,
     {
       ref: panelRef,
@@ -5809,149 +6149,21 @@ function DatePicker({ value, onChange, placeholder = "Select date", className, m
         position: "fixed",
         top: panelPos.top,
         left: panelPos.left,
-        width: PANEL_W,
+        width: PANEL_W2,
         zIndex: 2e4,
+        // A modal Radix Dialog sets `pointer-events: none` on <body> while
+        // it is open, and this panel is portaled to <body> — so without
+        // this every click on a day landed on nothing and the calendar
+        // looked frozen inside a Dialog or Drawer. Hit-testing is
+        // per-element, so re-enabling it here is enough; the page behind
+        // the dialog stays inert. The click still reaches the dialog's
+        // DismissableLayer through React's portal event propagation, so it
+        // is treated as inside and does not dismiss the dialog.
+        pointerEvents: "auto",
         backgroundColor: "var(--popover)",
         boxShadow: "0 16px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.07)"
       },
-      children: [
-        /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between px-4 pt-4 pb-3", children: [
-          /* @__PURE__ */ jsx62(
-            "button",
-            {
-              onClick: prevMonth,
-              className: "w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 transition-colors",
-              children: /* @__PURE__ */ jsx62(ChevronLeft6, { className: "w-4 h-4" })
-            }
-          ),
-          /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxs41(
-                "button",
-                {
-                  onClick: () => {
-                    setMonthMenu((o) => !o);
-                    setYearMenu(false);
-                  },
-                  className: "flex items-center gap-1 px-2 py-1 rounded-lg text-[14px] font-semibold text-gray-900 hover:bg-gray-100 transition-colors",
-                  children: [
-                    MONTHS[viewMonth].slice(0, 3),
-                    /* @__PURE__ */ jsx62(ChevronDown8, { className: "w-3 h-3 text-gray-400" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx62(AnimatePresence, { children: monthMenu && /* @__PURE__ */ jsx62(
-                motion.div,
-                {
-                  initial: { opacity: 0, y: -4 },
-                  animate: { opacity: 1, y: 0 },
-                  exit: { opacity: 0, y: -4 },
-                  transition: { duration: 0.12 },
-                  className: "absolute top-full left-0 z-[10000] mt-1 max-h-[220px] min-w-[130px] overflow-y-auto rounded-xl border border-border bg-popover py-1 shadow-lg",
-                  children: MONTHS.map((mn, mi) => /* @__PURE__ */ jsx62(
-                    "button",
-                    {
-                      onClick: () => {
-                        setViewMonth(mi);
-                        setMonthMenu(false);
-                      },
-                      className: "w-full px-3 py-2 text-left text-[13px] text-foreground transition-colors hover:bg-muted",
-                      style: { fontWeight: mi === viewMonth ? 600 : 400, color: mi === viewMonth ? PRIMARY : void 0 },
-                      children: mn
-                    },
-                    mn
-                  ))
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxs41(
-                "button",
-                {
-                  onClick: () => {
-                    setYearMenu((o) => !o);
-                    setMonthMenu(false);
-                  },
-                  className: "flex items-center gap-1 px-2 py-1 rounded-lg text-[14px] font-semibold text-gray-900 hover:bg-gray-100 transition-colors",
-                  children: [
-                    viewYear,
-                    /* @__PURE__ */ jsx62(ChevronDown8, { className: "w-3 h-3 text-gray-400" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx62(AnimatePresence, { children: yearMenu && /* @__PURE__ */ jsx62(
-                motion.div,
-                {
-                  initial: { opacity: 0, y: -4 },
-                  animate: { opacity: 1, y: 0 },
-                  exit: { opacity: 0, y: -4 },
-                  transition: { duration: 0.12 },
-                  className: "absolute top-full left-0 z-[10000] mt-1 max-h-[200px] min-w-[90px] overflow-y-auto rounded-xl border border-border bg-popover py-1 shadow-lg",
-                  children: years.map((yr) => /* @__PURE__ */ jsx62(
-                    "button",
-                    {
-                      onClick: () => {
-                        setViewYear(yr);
-                        setYearMenu(false);
-                      },
-                      className: "w-full px-3 py-2 text-left text-[13px] text-foreground transition-colors hover:bg-muted",
-                      style: { fontWeight: yr === viewYear ? 600 : 400, color: yr === viewYear ? PRIMARY : void 0 },
-                      children: yr
-                    },
-                    yr
-                  ))
-                }
-              ) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx62(
-            "button",
-            {
-              onClick: nextMonth,
-              className: "w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 transition-colors",
-              children: /* @__PURE__ */ jsx62(ChevronRight8, { className: "w-4 h-4" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx62(
-          "div",
-          {
-            className: "px-3 pb-1",
-            style: { display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" },
-            children: DAYS.map((d) => /* @__PURE__ */ jsx62("div", { className: "py-1 text-center text-[11.5px] font-semibold text-muted-foreground", children: d }, d))
-          }
-        ),
-        /* @__PURE__ */ jsx62(
-          "div",
-          {
-            className: "gap-y-0.5 px-3 pb-4",
-            style: { display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" },
-            children: cells.map((cell, i) => {
-              const selected = isSelected(cell);
-              const tod = isToday(cell);
-              const disabled = cell.current && isDisabled(cell.y, cell.m, cell.d);
-              return /* @__PURE__ */ jsx62(
-                "button",
-                {
-                  onClick: () => selectDay(cell),
-                  disabled,
-                  className: cn(
-                    "h-9 w-9 mx-auto rounded-full text-[13px] font-medium flex items-center justify-center transition-all",
-                    selected && "text-white font-semibold",
-                    !selected && tod && "font-semibold",
-                    !selected && !tod && cell.current && !disabled && "text-gray-800 hover:bg-gray-100",
-                    !selected && !cell.current && "text-gray-300 hover:bg-gray-50",
-                    disabled && "opacity-30 cursor-not-allowed"
-                  ),
-                  style: selected ? { background: PRIMARY } : tod ? { background: `${PRIMARY}18`, color: PRIMARY } : {},
-                  children: cell.d
-                },
-                i
-              );
-            })
-          }
-        )
-      ]
+      children: withTime ? /* @__PURE__ */ jsx62(RemoveScroll, { allowPinchZoom: true, children: body }) : body
     }
   ) });
   return /* @__PURE__ */ jsxs41("div", { className: cn("relative", className), children: [
@@ -5961,14 +6173,14 @@ function DatePicker({ value, onChange, placeholder = "Select date", className, m
       {
         ref: triggerRef,
         type: "button",
-        onClick: () => open ? setOpen(false) : openPanel(),
+        onClick: () => open ? closePanel() : openPanel(),
         className: cn(
           "flex h-12 min-h-12 w-full items-center gap-3 rounded-xl border border-border bg-card px-5 text-left text-[15px] shadow-sm transition-colors",
           open ? "border-ring ring-2 ring-ring/20" : "hover:border-muted-foreground/45"
         ),
         children: [
           /* @__PURE__ */ jsx62(CalendarDays, { className: "size-[1.125rem] shrink-0 text-muted-foreground" }),
-          /* @__PURE__ */ jsx62("span", { className: cn("flex-1", value ? "text-foreground" : "text-muted-foreground"), children: value ? displayDate(value) : placeholder }),
+          /* @__PURE__ */ jsx62("span", { className: cn("flex-1", value ? "text-foreground" : "text-muted-foreground"), children: value ? displayValue(value, withTime, showSecond) : placeholder }),
           /* @__PURE__ */ jsx62(ChevronDown8, { className: cn("size-[1.125rem] shrink-0 text-muted-foreground transition-transform", open && "rotate-180") })
         ]
       }
@@ -5980,7 +6192,7 @@ function DatePicker({ value, onChange, placeholder = "Select date", className, m
 // src/chart.tsx
 import * as React41 from "react";
 import * as RechartsPrimitive from "recharts";
-import { Fragment as Fragment8, jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
 var THEMES = { light: "", dark: ".dark" };
 var INITIAL_DIMENSION = { width: 320, height: 200 };
 var ChartContext = React41.createContext(null);
@@ -6114,7 +6326,7 @@ function ChartTooltipContent({
                 "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                 indicator === "dot" && "items-center"
               ),
-              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs42(Fragment8, { children: [
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs42(Fragment9, { children: [
                 itemConfig?.icon ? /* @__PURE__ */ jsx63(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx63(
                   "div",
                   {
@@ -6241,7 +6453,7 @@ import {
   Info as Info5,
   Minus as Minus2
 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
 var gridStroke = "color-mix(in srgb, var(--border) 65%, transparent)";
 var tickFill = "var(--muted-foreground)";
 function MetricSparklineCard({
@@ -6406,7 +6618,7 @@ function DashboardAreaChartTemplate({
         }
       ) : null
     ] }) }) }),
-    footer ? /* @__PURE__ */ jsxs43(Fragment9, { children: [
+    footer ? /* @__PURE__ */ jsxs43(Fragment10, { children: [
       /* @__PURE__ */ jsx64(Separator, {}),
       /* @__PURE__ */ jsx64("div", { className: "px-5 py-3", children: footer })
     ] }) : null
@@ -6653,7 +6865,7 @@ function Toaster({ theme, ...props }) {
 // src/inline-edit.tsx
 import * as React43 from "react";
 import { Check as Check10, Pencil, X as X8 } from "lucide-react";
-import { Fragment as Fragment10, jsx as jsx66, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx66, jsxs as jsxs44 } from "react/jsx-runtime";
 var InlineEdit = React43.forwardRef(
   ({
     value,
@@ -6727,7 +6939,7 @@ var InlineEdit = React43.forwardRef(
       "disabled:cursor-not-allowed disabled:opacity-50",
       inputClassName
     );
-    return /* @__PURE__ */ jsx66("div", { ref, "data-inline-edit": "", className: "relative inline-flex flex-col gap-1 max-w-full", children: editing ? /* @__PURE__ */ jsxs44(Fragment10, { children: [
+    return /* @__PURE__ */ jsx66("div", { ref, "data-inline-edit": "", className: "relative inline-flex flex-col gap-1 max-w-full", children: editing ? /* @__PURE__ */ jsxs44(Fragment11, { children: [
       multiline ? /* @__PURE__ */ jsx66(
         "textarea",
         {
@@ -7277,7 +7489,7 @@ function useBreakpoint() {
 import * as React47 from "react";
 import * as PopoverPrimitive4 from "@radix-ui/react-popover";
 import { Check as Check11, ChevronDown as ChevronDown9, Search as Search4 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx70, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx70, jsxs as jsxs47 } from "react/jsx-runtime";
 var COUNTRIES = [
   { code: "US", name: "United States", flag: "\u{1F1FA}\u{1F1F8}", dialCode: "+1" },
   { code: "GB", name: "United Kingdom", flag: "\u{1F1EC}\u{1F1E7}", dialCode: "+44" },
@@ -7359,7 +7571,7 @@ var CountrySelect = React47.forwardRef(
             className
           ),
           children: [
-            /* @__PURE__ */ jsx70("span", { className: "flex min-w-0 items-center gap-2.5", children: selected ? /* @__PURE__ */ jsxs47(Fragment11, { children: [
+            /* @__PURE__ */ jsx70("span", { className: "flex min-w-0 items-center gap-2.5", children: selected ? /* @__PURE__ */ jsxs47(Fragment12, { children: [
               /* @__PURE__ */ jsx70("span", { className: "text-base leading-none", "aria-hidden": "true", children: selected.flag }),
               /* @__PURE__ */ jsx70("span", { className: "truncate", children: selected.name }),
               showDialCode && /* @__PURE__ */ jsx70("span", { className: "shrink-0 text-muted-foreground", children: selected.dialCode })
@@ -7538,9 +7750,10 @@ IconButton.displayName = "IconButton";
 // src/time-picker.tsx
 import * as React48 from "react";
 import { createPortal as createPortal2 } from "react-dom";
+import { RemoveScroll as RemoveScroll2 } from "react-remove-scroll";
 import { Clock as Clock2, ChevronDown as ChevronDown10, X as X11 } from "lucide-react";
-import { Fragment as Fragment12, jsx as jsx72, jsxs as jsxs48 } from "react/jsx-runtime";
-function pad(n) {
+import { Fragment as Fragment13, jsx as jsx72, jsxs as jsxs48 } from "react/jsx-runtime";
+function pad2(n) {
   return String(n).padStart(2, "0");
 }
 function parseHHMM(v) {
@@ -7553,15 +7766,15 @@ function parseHHMM(v) {
   return { h, m };
 }
 function toHHMM(h, m) {
-  return `${pad(h)}:${pad(m)}`;
+  return `${pad2(h)}:${pad2(m)}`;
 }
-function displayTime(value, use24Hour) {
+function displayTime2(value, use24Hour) {
   const p = parseHHMM(value);
   if (!p) return "";
-  if (use24Hour) return `${pad(p.h)}:${pad(p.m)}`;
+  if (use24Hour) return `${pad2(p.h)}:${pad2(p.m)}`;
   const period = p.h < 12 ? "AM" : "PM";
   const displayH = p.h % 12 === 0 ? 12 : p.h % 12;
-  return `${pad(displayH)}:${pad(p.m)} ${period}`;
+  return `${pad2(displayH)}:${pad2(p.m)} ${period}`;
 }
 var ITEM_H = 36;
 var VISIBLE = 5;
@@ -7665,7 +7878,7 @@ function ScrollColumn({
     )
   ] });
 }
-var PANEL_W2 = 224;
+var PANEL_W = 224;
 var PANEL_H = 220;
 var TimePicker = React48.forwardRef(
   ({
@@ -7719,7 +7932,7 @@ var TimePicker = React48.forwardRef(
         const vw = window.innerWidth;
         const vh = window.innerHeight;
         let left = rect.left;
-        if (left + PANEL_W2 > vw - 8) left = vw - PANEL_W2 - 8;
+        if (left + PANEL_W > vw - 8) left = vw - PANEL_W - 8;
         let top = rect.bottom + 6;
         if (top + PANEL_H > vh - 8) top = rect.top - PANEL_H - 6;
         setPanelPos({ top, left });
@@ -7762,7 +7975,7 @@ var TimePicker = React48.forwardRef(
       e.stopPropagation();
       onValueChange("");
     }
-    const panel = open ? /* @__PURE__ */ jsxs48(
+    const panel = open ? /* @__PURE__ */ jsx72(RemoveScroll2, { allowPinchZoom: true, children: /* @__PURE__ */ jsxs48(
       "div",
       {
         ref: panelRef,
@@ -7774,13 +7987,17 @@ var TimePicker = React48.forwardRef(
           position: "fixed",
           top: panelPos.top,
           left: panelPos.left,
-          width: PANEL_W2,
-          zIndex: 2e4
+          width: PANEL_W,
+          zIndex: 2e4,
+          // See DatePicker: a modal Radix Dialog puts `pointer-events: none`
+          // on <body>, which this portaled panel would otherwise inherit —
+          // the columns rendered but no row could be clicked.
+          pointerEvents: "auto"
         },
         children: [
           /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-1.5 border-b border-border px-4 py-2.5", children: [
             /* @__PURE__ */ jsx72(Clock2, { className: "size-3.5 text-muted-foreground" }),
-            /* @__PURE__ */ jsx72("span", { className: "text-[13px] font-medium text-muted-foreground", children: value ? displayTime(value, use24Hour) : "\u2014" })
+            /* @__PURE__ */ jsx72("span", { className: "text-[13px] font-medium text-muted-foreground", children: value ? displayTime2(value, use24Hour) : "\u2014" })
           ] }),
           /* @__PURE__ */ jsxs48(
             "div",
@@ -7801,7 +8018,7 @@ var TimePicker = React48.forwardRef(
                 items: hours,
                 selected: hour,
                 onSelect: handleHourChange,
-                renderItem: (h) => pad(h),
+                renderItem: (h) => pad2(h),
                 getKey: (h) => h
               }
             ),
@@ -7812,11 +8029,11 @@ var TimePicker = React48.forwardRef(
                 items: minutes,
                 selected: minute,
                 onSelect: handleMinuteChange,
-                renderItem: (m) => pad(m),
+                renderItem: (m) => pad2(m),
                 getKey: (m) => m
               }
             ),
-            !use24Hour && /* @__PURE__ */ jsxs48(Fragment12, { children: [
+            !use24Hour && /* @__PURE__ */ jsxs48(Fragment13, { children: [
               /* @__PURE__ */ jsx72("div", { className: "w-px self-stretch bg-border mx-1" }),
               /* @__PURE__ */ jsx72(
                 ScrollColumn,
@@ -7832,7 +8049,7 @@ var TimePicker = React48.forwardRef(
           ] })
         ]
       }
-    ) : null;
+    ) }) : null;
     function mergeRef(el) {
       triggerRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -7864,7 +8081,7 @@ var TimePicker = React48.forwardRef(
                   "flex-1 truncate",
                   value ? "text-foreground" : "text-muted-foreground"
                 ),
-                children: value ? displayTime(value, use24Hour) : placeholder
+                children: value ? displayTime2(value, use24Hour) : placeholder
               }
             ),
             value && !disabled ? /* @__PURE__ */ jsx72(
@@ -8132,11 +8349,11 @@ VisuallyHidden.displayName = "VisuallyHidden";
 import {
   createContext as createContext5,
   forwardRef as forwardRef55,
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useContext as useContext4,
   useEffect as useEffect15,
   useId as useId3,
-  useMemo as useMemo9,
+  useMemo as useMemo10,
   useRef as useRef14,
   useState as useState19
 } from "react";
@@ -8235,7 +8452,7 @@ function formatMonthLabel(monthKey2) {
 }
 
 // src/filter-chips.tsx
-import { Fragment as Fragment13, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
 var POPOVER_FIT = "flex max-h-[var(--radix-popover-content-available-height)] flex-col overflow-hidden";
 var FILTER_SCROLL_AREA = "min-h-0 flex-1 overflow-y-auto";
 var FilterChipGroupContext = createContext5(null);
@@ -8247,11 +8464,11 @@ function FilterChipGroup({
   const openKeyRef = useRef14(null);
   const frameRef = useRef14(null);
   const handoffFromRef = useRef14(null);
-  const apply = useCallback10((next) => {
+  const apply = useCallback11((next) => {
     openKeyRef.current = next;
     setOpenKey(next);
   }, []);
-  const setOpen = useCallback10(
+  const setOpen = useCallback11(
     (key, open) => {
       if (frameRef.current !== null) {
         cancelAnimationFrame(frameRef.current);
@@ -8280,12 +8497,12 @@ function FilterChipGroup({
     },
     []
   );
-  const consumeHandoff = useCallback10((key) => {
+  const consumeHandoff = useCallback11((key) => {
     if (handoffFromRef.current !== key) return false;
     handoffFromRef.current = null;
     return true;
   }, []);
-  const value = useMemo9(
+  const value = useMemo10(
     () => ({ openKey, setOpen, consumeHandoff }),
     [openKey, setOpen, consumeHandoff]
   );
@@ -8295,7 +8512,7 @@ function useFilterChipState(key, controlled) {
   const group = useContext4(FilterChipGroupContext);
   const [localOpen, setLocalOpen] = useState19(false);
   const isControlled = controlled?.open !== void 0;
-  const onOpenChange = useCallback10(
+  const onOpenChange = useCallback11(
     (next) => {
       controlled?.onOpenChange?.(next);
       if (isControlled) return;
@@ -8305,7 +8522,7 @@ function useFilterChipState(key, controlled) {
     [controlled, isControlled, group, key]
   );
   const open = isControlled ? controlled.open : group ? group.openKey === key : localOpen;
-  const onCloseAutoFocus = useCallback10(
+  const onCloseAutoFocus = useCallback11(
     (event) => {
       if (group?.consumeHandoff(key)) {
         event.preventDefault();
@@ -8469,7 +8686,7 @@ function SelectFilterChip({
   const [query, setQuery] = useState19("");
   const supportsInvert = !!onInvertChange;
   const isActive = selected.length > 0;
-  const visible = useMemo9(() => {
+  const visible = useMemo10(() => {
     const q = query.trim().toLowerCase();
     if (!q) return options;
     return options.filter(
@@ -8746,7 +8963,7 @@ function DateRangeFilterChip({
                 className: "h-8 text-[12.5px]"
               }
             )
-          ] }, unit.key)) }) : /* @__PURE__ */ jsxs50(Fragment13, { children: [
+          ] }, unit.key)) }) : /* @__PURE__ */ jsxs50(Fragment14, { children: [
             /* @__PURE__ */ jsxs50("div", { className: "space-y-1", children: [
               /* @__PURE__ */ jsx76("p", { className: "text-[11px] font-medium text-muted-foreground", children: "From" }),
               /* @__PURE__ */ jsx76(
@@ -9107,7 +9324,7 @@ function AddFilterMenu({
   const listRef = useRef14(null);
   const listId = useId3();
   const q = query.trim().toLowerCase();
-  const rows = useMemo9(() => {
+  const rows = useMemo10(() => {
     const out = [];
     if (q) {
       const valueMatches = filters.flatMap(
@@ -9143,7 +9360,7 @@ function AddFilterMenu({
     }
     return out;
   }, [filters, q, onSelectValue, onRemoveFilter]);
-  const selectable = useMemo9(
+  const selectable = useMemo10(
     () => rows.map((r, i) => r.kind === "heading" ? -1 : i).filter((i) => i >= 0),
     [rows]
   );
@@ -9265,11 +9482,11 @@ function AddFilterMenu({
                           "flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-[12.5px] text-foreground",
                           i === cursor && "bg-muted"
                         ),
-                        children: row.kind === "value" ? /* @__PURE__ */ jsxs50(Fragment13, { children: [
+                        children: row.kind === "value" ? /* @__PURE__ */ jsxs50(Fragment14, { children: [
                           row.option.icon,
                           /* @__PURE__ */ jsx76("span", { className: "min-w-0 flex-1 truncate", children: row.option.label }),
                           /* @__PURE__ */ jsx76("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: row.filter.label })
-                        ] }) : /* @__PURE__ */ jsxs50(Fragment13, { children: [
+                        ] }) : /* @__PURE__ */ jsxs50(Fragment14, { children: [
                           /* @__PURE__ */ jsx76("span", { className: "min-w-0 flex-1 truncate", children: row.filter.label }),
                           row.filter.activeCount ? /* @__PURE__ */ jsx76("span", { className: "shrink-0 rounded-full bg-primary/15 px-1.5 text-[10px] font-semibold tabular-nums text-primary", children: row.filter.activeCount }) : null,
                           visibleKeys.includes(row.filter.key) ? /* @__PURE__ */ jsx76(