@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/data-table-column-settings.js

@@ -0,0 +1,119 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Tooltip } from "./tooltip.js";
+import { ROW_ACTIONS_KEY } from "./data-table-row-actions.js";
+import { columnLabel } from "./data-table-shared.js";
+function ColumnSettingsPanel({
+  columns,
+  hiddenCols,
+  setHiddenCols,
+  showSettings,
+  setShowSettings,
+  columnsCountLabel,
+  labels,
+  autoSizeAll
+}) {
+  const columnsRail = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { label: columnsCountLabel, portal: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: columnsRail,
+        type: "button",
+        onClick: () => setShowSettings(true),
+        "aria-label": columnsCountLabel,
+        "aria-hidden": showSettings,
+        tabIndex: showSettings ? -1 : 0,
+        className: cn(
+          "group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out",
+          "border-s border-subtle",
+          "hover:bg-hover",
+          showSettings ? "w-0 border-s-0" : "w-8 cursor-pointer"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "whitespace-nowrap text-xs font-medium tracking-wide text-muted group-hover:text-secondary",
+            style: { writingMode: "vertical-rl", transform: "rotate(180deg)" },
+            children: columnsCountLabel
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        inert: !showSettings || void 0,
+        className: cn(
+          "shrink-0 overflow-hidden transition-[width] duration-200 ease-out",
+          showSettings ? "w-56" : "w-0"
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex w-56 flex-col border-s border-subtle p-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted", children: columnsCountLabel }),
+            /* @__PURE__ */ jsx(Tooltip, { label: labels.close, portal: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setShowSettings(false);
+                  columnsRail.current?.focus();
+                },
+                "aria-label": labels.close,
+                className: "rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: autoSizeAll,
+              className: "mb-2 rounded border border-subtle px-2 py-1 text-xs font-medium text-secondary hover:bg-hover",
+              children: labels.autoSize
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: columns.map((col) => {
+            if (col.key === ROW_ACTIONS_KEY) return null;
+            const checked = !hiddenCols.has(col.key);
+            const headerLabel = columnLabel(col);
+            return /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: "inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-hover",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: "size-3.5 shrink-0",
+                      checked,
+                      onChange: (e) => {
+                        setHiddenCols((s) => {
+                          const next = new Set(s);
+                          if (e.target.checked) next.delete(col.key);
+                          else next.add(col.key);
+                          return next;
+                        });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate-until-large", children: headerLabel })
+                ]
+              },
+              col.key
+            );
+          }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  ColumnSettingsPanel
+};
+//# sourceMappingURL=data-table-column-settings.js.map

package/dist/components/data-table-column-settings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-column-settings.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { ROW_ACTIONS_KEY } from \"./data-table-row-actions\";\nimport { columnLabel } from \"./data-table-shared\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's column settings on a wide screen: the vertical \"Columns (n/m)\" rail and\n// the drawer it opens, with \"Auto-size\" and a show/hide box per column. Moved out of\n// data-table.tsx whole (refactor audit 2026-10, MOD-3 step 5).\n\n/** The \"Columns\" rail and its drawer (`columnSettings`). */\nexport function ColumnSettingsPanel<T>({\n  columns,\n  hiddenCols,\n  setHiddenCols,\n  showSettings,\n  setShowSettings,\n  columnsCountLabel,\n  labels,\n  autoSizeAll,\n}: {\n  /** Every column, hidden ones included; the actions column is left out here. */\n  columns: DataTableColumn<T>[];\n  hiddenCols: Set<string>;\n  setHiddenCols: Dispatch<SetStateAction<Set<string>>>;\n  showSettings: boolean;\n  setShowSettings: (open: boolean) => void;\n  /** \"Columns (n/m)\", the rail's text and name. */\n  columnsCountLabel: string;\n  labels: DataTableLabels;\n  autoSizeAll: () => void;\n}) {\n  // The \"Columns\" rail button — where the drawer's X hands focus back (BUG-7a).\n  const columnsRail = useRef<HTMLButtonElement | null>(null);\n  return (\n    <>\n      <Tooltip label={columnsCountLabel} portal>\n        <button\n          ref={columnsRail}\n          type=\"button\"\n          onClick={() => setShowSettings(true)}\n          aria-label={columnsCountLabel}\n          aria-hidden={showSettings}\n          tabIndex={showSettings ? -1 : 0}\n          className={cn(\n            \"group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out\",\n            \"border-s border-subtle\",\n            \"hover:bg-hover\",\n            showSettings ? \"w-0 border-s-0\" : \"w-8 cursor-pointer\",\n          )}\n        >\n          <span\n            className=\"whitespace-nowrap text-xs font-medium tracking-wide text-muted group-hover:text-secondary\"\n            style={{ writingMode: \"vertical-rl\", transform: \"rotate(180deg)\" }}\n          >\n            {columnsCountLabel}\n          </span>\n        </button>\n      </Tooltip>\n      <div\n        // Closed, the drawer is only `w-0`: without `inert` its X, Auto-size and one\n        // checkbox per column stayed tab stops and in the accessibility tree, and Tab\n        // after the last cell walked into controls nobody could see (BUG-7a).\n        inert={!showSettings || undefined}\n        className={cn(\n          \"shrink-0 overflow-hidden transition-[width] duration-200 ease-out\",\n          showSettings ? \"w-56\" : \"w-0\",\n        )}\n      >\n        <div className=\"flex w-56 flex-col border-s border-subtle p-2\">\n          <div className=\"mb-2 flex items-center justify-between gap-1\">\n            <div className=\"text-xs font-medium uppercase tracking-wide text-muted\">\n              {columnsCountLabel}\n            </div>\n            <Tooltip label={labels.close} portal>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setShowSettings(false);\n                  // Back to the rail that opened it: the X is about to go inert, and\n                  // focus would fall to <body> with it (BUG-7a).\n                  columnsRail.current?.focus();\n                }}\n                aria-label={labels.close}\n                className=\"rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </Tooltip>\n          </div>\n          <button\n            type=\"button\"\n            onClick={autoSizeAll}\n            className=\"mb-2 rounded border border-subtle px-2 py-1 text-xs font-medium text-secondary hover:bg-hover\"\n          >\n            {labels.autoSize}\n          </button>\n          <div className=\"flex flex-col gap-0.5\">\n            {columns.map((col) => {\n              if (col.key === ROW_ACTIONS_KEY) return null;\n              const checked = !hiddenCols.has(col.key);\n              const headerLabel = columnLabel(col);\n              return (\n                <label\n                  key={col.key}\n                  className=\"inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-hover\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    className=\"size-3.5 shrink-0\"\n                    checked={checked}\n                    onChange={(e) => {\n                      setHiddenCols((s) => {\n                        const next = new Set(s);\n                        if (e.target.checked) next.delete(col.key);\n                        else next.add(col.key);\n                        return next;\n                      });\n                    }}\n                  />\n                  {/* The panel is `w-56`: a long column name wraps from Large up rather\n                      than reading \"Accoun…\" beside its box (text size §10.17, round\n                      0.34 T1). */}\n                  <span className=\"min-w-0 truncate-until-large\">{headerLabel}</span>\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":";AAuCI,mBAgBM,KAmBA,YAnCN;AAvCJ,SAAS,cAAc;AAEvB,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAQrB,SAAS,oBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AAED,QAAM,cAAc,OAAiC,IAAI;AACzD,SACE,iCACE;AAAA,wBAAC,WAAQ,OAAO,mBAAmB,QAAM,MACvC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS,MAAM,gBAAgB,IAAI;AAAA,QACnC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,UAAU,eAAe,KAAK;AAAA,QAC9B,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,eAAe,mBAAmB;AAAA,QACpC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,aAAa,eAAe,WAAW,iBAAiB;AAAA,YAEhE;AAAA;AAAA,QACH;AAAA;AAAA,IACF,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QAIC,OAAO,CAAC,gBAAgB;AAAA,QACxB,WAAW;AAAA,UACT;AAAA,UACA,eAAe,SAAS;AAAA,QAC1B;AAAA,QAEA,+BAAC,SAAI,WAAU,iDACb;AAAA,+BAAC,SAAI,WAAU,gDACb;AAAA,gCAAC,SAAI,WAAU,0DACZ,6BACH;AAAA,YACA,oBAAC,WAAQ,OAAO,OAAO,OAAO,QAAM,MAClC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AACb,kCAAgB,KAAK;AAGrB,8BAAY,SAAS,MAAM;AAAA,gBAC7B;AAAA,gBACA,cAAY,OAAO;AAAA,gBACnB,WAAU;AAAA,gBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,YACxB,GACF;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAU;AAAA,cAET,iBAAO;AAAA;AAAA,UACV;AAAA,UACA,oBAAC,SAAI,WAAU,yBACZ,kBAAQ,IAAI,CAAC,QAAQ;AACpB,gBAAI,IAAI,QAAQ,gBAAiB,QAAO;AACxC,kBAAM,UAAU,CAAC,WAAW,IAAI,IAAI,GAAG;AACvC,kBAAM,cAAc,YAAY,GAAG;AACnC,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAU;AAAA,gBAEV;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,WAAU;AAAA,sBACV;AAAA,sBACA,UAAU,CAAC,MAAM;AACf,sCAAc,CAAC,MAAM;AACnB,gCAAM,OAAO,IAAI,IAAI,CAAC;AACtB,8BAAI,EAAE,OAAO,QAAS,MAAK,OAAO,IAAI,GAAG;AAAA,8BACpC,MAAK,IAAI,IAAI,GAAG;AACrB,iCAAO;AAAA,wBACT,CAAC;AAAA,sBACH;AAAA;AAAA,kBACF;AAAA,kBAIA,oBAAC,UAAK,WAAU,gCAAgC,uBAAY;AAAA;AAAA;AAAA,cAnBvD,IAAI;AAAA,YAoBX;AAAA,UAEJ,CAAC,GACH;AAAA,WACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/data-table-filter-popover.d.ts

@@ -1,19 +1,6 @@
-import * as react from 'react';
-import { d as DataTableColumn, j as FilterValue, f as DataTableLabels } from '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './write-lock.js';
-
+import type { FilterValue } from "./data-table-filters.js";
+import type { DataTableColumn } from "./data-table.js";
+import type { DataTableLabels } from "./data-table-labels.js";
 interface FilterPopoverProps<T> {
     column: DataTableColumn<T>;
     state: FilterValue;
@@ -45,6 +32,5 @@ interface FilterPopoverProps<T> {
  * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs
  * toggle — driving the shared {@link FilterValue} state.
  */
-declare function FilterPopover<T>({ column, state, onChange, onClear, selectOptions, locale: localeProp, labels: labelsProp, autoFocus, }: FilterPopoverProps<T>): react.JSX.Element | null;
-
-export { FilterPopover };
+export declare function FilterPopover<T>({ column, state, onChange, onClear, selectOptions, locale: localeProp, labels: labelsProp, autoFocus, }: FilterPopoverProps<T>): import("react").JSX.Element | null;
+export {};

package/dist/components/data-table-filter-popover.js

@@ -1,14 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { FIELD_TOUCH_TEXT } from "./ui.js";
+import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks.js";
+import { FIELD_TOUCH_TEXT } from "./field-base.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { MiniCalendar } from "./mini-calendar.js";
 import { dateRangePresets } from "../lib/dates.js";
 import { resolveFilter } from "./data-table-filters.js";
-import { resolveDataTableLabels } from "./data-table-labels.js";
+import { resolveDataTableLabels } from "./data-table-shared.js";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels.js";
 function FilterPopover({
   column,
@@ -29,11 +30,13 @@ function FilterPopover({
     },
     [autoFocus]
   );
+  const mark = decimalMark(locale);
+  const [typed, setTyped] = useState({ min: null, max: null });
   const filter = resolveFilter(column);
   if (!filter) return null;
-  const inputBase = "block w-full rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-sm text-[var(--text-secondary)] placeholder:text-[var(--text-placeholder)] focus:border-[var(--border-strong)] focus:outline-none " + FOCUS_RING + " " + // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.
+  const inputBase = "block w-full rounded border border-subtle bg-surface px-2 py-1.5 text-sm text-secondary placeholder:text-placeholder focus:border-strong focus:outline-none " + FOCUS_RING + " " + // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.
   FIELD_TOUCH_TEXT;
-  const buttonBase = "rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
+  const buttonBase = "rounded border border-subtle bg-surface px-2 py-1 text-xs text-secondary hover:bg-hover";
   const clearRow = /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: onClear, className: cn(buttonBase, "flex items-center gap-1"), children: [
     /* @__PURE__ */ jsx(X, { className: "size-3" }),
     " ",
@@ -65,7 +68,7 @@ function FilterPopover({
       onChange({ type: "select", values: Array.from(set) });
     };
     return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted", children: [
         /* @__PURE__ */ jsx("span", { children: labels.selectFilter }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
           /* @__PURE__ */ jsx(
@@ -88,10 +91,10 @@ function FilterPopover({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("ul", { className: "max-h-56 overflow-y-auto rounded border border-[var(--border)]", children: [
+      /* @__PURE__ */ jsxs("ul", { className: "max-h-56 overflow-y-auto rounded border border-subtle", children: [
         selectOptions.map((o) => {
           const checked = v2.values.includes(o.value);
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-[var(--bg-hover)]", children: [
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-hover", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -104,7 +107,7 @@ function FilterPopover({
             /* @__PURE__ */ jsx("span", { className: "truncate", children: o.label })
           ] }) }, o.value);
         }),
-        selectOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-2 py-2 text-sm text-[var(--text-muted)]", children: "\u2014" })
+        selectOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-2 py-2 text-sm text-muted", children: "\u2014" })
       ] }),
       clearRow
     ] });
@@ -124,7 +127,7 @@ function FilterPopover({
             onClick: () => set(p.from, p.to),
             className: cn(
               "block rounded px-2 py-1 text-start transition-colors sm:w-full",
-              active ? "bg-[var(--brand-bg)] text-[var(--brand-muted)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
+              active ? "bg-brand-soft text-brand-muted" : "text-secondary hover:bg-hover"
             ),
             children: labels.presets[p.key] ?? p.key
           }
@@ -133,7 +136,7 @@ function FilterPopover({
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
         /* @__PURE__ */ jsx(MiniCalendar, { from: v2.from, to: v2.to, locale, onSelect: set }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-          /* @__PURE__ */ jsxs("label", { className: "text-xs text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsxs("label", { className: "text-xs text-muted", children: [
             labels.dateFrom,
             /* @__PURE__ */ jsx(
               "input",
@@ -145,7 +148,7 @@ function FilterPopover({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("label", { className: "text-xs text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsxs("label", { className: "text-xs text-muted", children: [
             labels.dateTo,
             /* @__PURE__ */ jsx(
               "input",
@@ -163,40 +166,54 @@ function FilterPopover({
     ] });
   }
   const v = state.type === "number" ? state : { type: "number", min: "", max: "", abs: false };
+  const shown = (bound) => {
+    const own = typed[bound];
+    return own !== null && showsTyped(own, mark, v[bound]) ? own : localizeMark(v[bound], mark);
+  };
+  const setBound = (bound, raw) => {
+    setTyped((t) => ({ ...t, [bound]: raw }));
+    const read = readTyped(raw, mark);
+    onChange({
+      type: "number",
+      min: bound === "min" ? read : v.min,
+      max: bound === "max" ? read : v.max,
+      abs: v.abs
+    });
+  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsxs("label", { className: "text-xs text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsxs("label", { className: "text-xs text-muted", children: [
         labels.numberMin,
         " (\u2265)",
         /* @__PURE__ */ jsx(
           "input",
           {
-            type: "number",
+            type: "text",
             inputMode: "decimal",
-            value: v.min,
-            onChange: (e) => onChange({ type: "number", min: e.target.value, max: v.max, abs: v.abs }),
-            onWheel: (e) => e.currentTarget.blur(),
+            autoComplete: "off",
+            value: shown("min"),
+            onChange: (e) => setBound("min", e.target.value),
             className: cn("mt-0.5", inputBase)
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("label", { className: "text-xs text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsxs("label", { className: "text-xs text-muted", children: [
         labels.numberMax,
         " (\u2264)",
         /* @__PURE__ */ jsx(
           "input",
           {
-            type: "number",
+            type: "text",
             inputMode: "decimal",
-            value: v.max,
-            onChange: (e) => onChange({ type: "number", min: v.min, max: e.target.value, abs: v.abs }),
-            onWheel: (e) => e.currentTarget.blur(),
+            autoComplete: "off",
+            value: shown("max"),
+            onChange: (e) => setBound("max", e.target.value),
             className: cn("mt-0.5", inputBase)
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]", children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-secondary", children: [
       /* @__PURE__ */ jsx(
         "input",
         {

package/dist/components/data-table-filter-popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-filter-popover.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./ui\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { MiniCalendar } from \"./mini-calendar\";\nimport { dateRangePresets } from \"../lib/dates\";\nimport { resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { DataTableColumn } from \"./data-table\";\nimport { resolveDataTableLabels, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLabelOverrides, useKitLocale } from \"../i18n/kit-labels\";\n\ninterface FilterPopoverProps<T> {\n  column: DataTableColumn<T>;\n  state: FilterValue;\n  onChange: (next: FilterValue) => void;\n  onClear: () => void;\n  selectOptions: { value: string; label: string }[];\n  /** BCP-47 locale for the date picker / labels. Falls back to the provider's. */\n  locale?: string;\n  /** Already resolved by {@link DataTable}. Standalone (it is exported), omit it and\n   *  the `dataTable` namespace of `<UiKitProvider labels>` is used. */\n  labels?: DataTableLabels;\n  /**\n   * Focus the text filter's input on mount. True, because that is right for the one\n   * place this component normally lives: a Popover opened by an explicit press on\n   * \"Filter\", which exists in order to be typed into and which the user has just asked\n   * for. It was hard-coded, which made it right there and wrong everywhere else — a\n   * browser scrolls whatever takes focus into view, so embedding this control in an\n   * ordinary page (the showcase documents it on one) landed the reader 25,000px down a\n   * page they had not scrolled. An embedder that is not a popover passes `false`.\n   */\n  autoFocus?: boolean;\n}\n\n/**\n * The contents of a column's filter Popover. Renders the right control set for\n * the column's filter type — text search, select checklist, date range (presets\n * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs\n * toggle — driving the shared {@link FilterValue} state.\n */\nexport function FilterPopover<T>({\n  column,\n  state,\n  onChange,\n  onClear,\n  selectOptions,\n  locale: localeProp,\n  labels: labelsProp,\n  autoFocus = true,\n}: FilterPopoverProps<T>) {\n  // Both hooks run before the early return below, unconditionally.\n  const overrides = useKitLabelOverrides(\"dataTable\");\n  const labels = labelsProp ?? resolveDataTableLabels(overrides);\n  // No `\"en\"` fallback any more: that pinned the calendar to English in a table that\n  // was never handed a locale, under a provider that had one.\n  const locale = useKitLocale(localeProp);\n  // What `autoFocus` did, done by hand: a callback ref runs in the same commit phase\n  // React's own autofocus does, once when the input mounts (it is stable across\n  // renders, so a re-render does not re-take focus).\n  const focusOnMount = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el && autoFocus) el.focus();\n    },\n    [autoFocus],\n  );\n  const filter = resolveFilter(column);\n  if (!filter) return null;\n\n  // `focus:outline-none` with only a 1px border tint to replace it is the same finding\n  // the audit records against the numpad's keys: on a panel of four identical fields a\n  // border going from --border to --border-strong is not a location. The ring is, and it\n  // is the package's brand focus colour, as on every field in ui.tsx.\n  const inputBase =\n    \"block w-full rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-sm text-[var(--text-secondary)] placeholder:text-[var(--text-placeholder)] focus:border-[var(--border-strong)] focus:outline-none \" +\n    FOCUS_RING +\n    \" \" +\n    // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.\n    FIELD_TOUCH_TEXT;\n  const buttonBase =\n    \"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\";\n\n  const clearRow = (\n    <div className=\"flex justify-end pt-1\">\n      <button type=\"button\" onClick={onClear} className={cn(buttonBase, \"flex items-center gap-1\")}>\n        <X className=\"size-3\" /> {labels.clearFilter}\n      </button>\n    </div>\n  );\n\n  if (filter.type === \"text\") {\n    const v = state.type === \"text\" ? state : { type: \"text\" as const, q: \"\" };\n    return (\n      <div className=\"space-y-2\">\n        <input\n          type=\"text\"\n          // A prop now, defaulting to what the popover needs; see `autoFocus` on the\n          // props above. Focused by `focusOnMount` rather than the `autoFocus`\n          // attribute, because here taking focus is the default, not an opt-in.\n          ref={focusOnMount}\n          value={v.q}\n          onChange={(e) => onChange({ type: \"text\", q: e.target.value })}\n          placeholder={labels.filterPlaceholder}\n          className={inputBase}\n        />\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"select\") {\n    const v = state.type === \"select\" ? state : { type: \"select\" as const, values: [] };\n    const toggle = (val: string) => {\n      const set = new Set(v.values);\n      if (set.has(val)) set.delete(val);\n      else set.add(val);\n      onChange({ type: \"select\", values: Array.from(set) });\n    };\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between text-xs text-[var(--text-muted)]\">\n          <span>{labels.selectFilter}</span>\n          <div className=\"flex gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: selectOptions.map((o) => o.value) })}\n              className={buttonBase}\n            >\n              {labels.selectAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: [] })}\n              className={buttonBase}\n            >\n              {labels.selectNone}\n            </button>\n          </div>\n        </div>\n        <ul className=\"max-h-56 overflow-y-auto rounded border border-[var(--border)]\">\n          {selectOptions.map((o) => {\n            const checked = v.values.includes(o.value);\n            return (\n              <li key={o.value}>\n                <label className=\"flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-[var(--bg-hover)]\">\n                  <input\n                    type=\"checkbox\"\n                    checked={checked}\n                    onChange={() => toggle(o.value)}\n                    className=\"size-3.5\"\n                  />\n                  <span className=\"truncate\">{o.label}</span>\n                </label>\n              </li>\n            );\n          })}\n          {selectOptions.length === 0 && (\n            <li className=\"px-2 py-2 text-sm text-[var(--text-muted)]\">—</li>\n          )}\n        </ul>\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"date\") {\n    const v = state.type === \"date\" ? state : { type: \"date\" as const, from: \"\", to: \"\" };\n    const set = (from: string, to: string) => onChange({ type: \"date\", from, to });\n    const presets = dateRangePresets();\n    const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;\n    // Side by side, the 7rem preset column leaves a phone's calendar and its two\n    // native date inputs ~180px, which clips \"mm/dd/yyyy\" mid-placeholder. Below `sm`\n    // the presets wrap as a row above the calendar, which then gets the panel's width.\n    return (\n      <div className=\"flex flex-col gap-3 sm:flex-row\">\n        <ul className=\"flex flex-wrap gap-0.5 text-xs sm:w-28 sm:shrink-0 sm:flex-col sm:flex-nowrap\">\n          {presets.map((p) => {\n            const active = isActivePreset(p);\n            return (\n              <li key={p.key}>\n                <button\n                  type=\"button\"\n                  onClick={() => set(p.from, p.to)}\n                  className={cn(\n                    \"block rounded px-2 py-1 text-start transition-colors sm:w-full\",\n                    active\n                      ? \"bg-[var(--brand-bg)] text-[var(--brand-muted)]\"\n                      : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                  )}\n                >\n                  {labels.presets[p.key] ?? p.key}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <div className=\"min-w-0 flex-1 space-y-2\">\n          {/* No `labels` here: the calendar reads `miniCalendar` from the provider\n              itself, which is the only way a calendar nested this deep was ever going\n              to be translated — the table has no prop to forward them through. */}\n          <MiniCalendar from={v.from} to={v.to} locale={locale} onSelect={set} />\n          <div className=\"grid grid-cols-2 gap-2\">\n            <label className=\"text-xs text-[var(--text-muted)]\">\n              {labels.dateFrom}\n              <input\n                type=\"date\"\n                value={v.from}\n                onChange={(e) => set(e.target.value, v.to)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n            <label className=\"text-xs text-[var(--text-muted)]\">\n              {labels.dateTo}\n              <input\n                type=\"date\"\n                value={v.to}\n                onChange={(e) => set(v.from, e.target.value)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n          </div>\n          {clearRow}\n        </div>\n      </div>\n    );\n  }\n\n  // number\n  const v = state.type === \"number\" ? state : { type: \"number\" as const, min: \"\", max: \"\", abs: false };\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"grid grid-cols-2 gap-2\">\n        <label className=\"text-xs text-[var(--text-muted)]\">\n          {labels.numberMin} (≥)\n          <input\n            type=\"number\"\n            inputMode=\"decimal\"\n            value={v.min}\n            onChange={(e) => onChange({ type: \"number\", min: e.target.value, max: v.max, abs: v.abs })}\n            onWheel={(e) => e.currentTarget.blur()}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n        <label className=\"text-xs text-[var(--text-muted)]\">\n          {labels.numberMax} (≤)\n          <input\n            type=\"number\"\n            inputMode=\"decimal\"\n            value={v.max}\n            onChange={(e) => onChange({ type: \"number\", min: v.min, max: e.target.value, abs: v.abs })}\n            onWheel={(e) => e.currentTarget.blur()}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n      </div>\n      <label className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\">\n        <input\n          type=\"checkbox\"\n          checked={v.abs}\n          onChange={(e) => onChange({ type: \"number\", min: v.min, max: v.max, abs: e.target.checked })}\n          className=\"size-3.5\"\n        />\n        {labels.numberAbs}\n      </label>\n      {clearRow}\n    </div>\n  );\n}\n"],"mappings":"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","names":["v"]}
+{"version":3,"sources":["../../src/components/data-table-filter-popover.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { MiniCalendar } from \"./mini-calendar\";\nimport { dateRangePresets } from \"../lib/dates\";\nimport { resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { DataTableColumn } from \"./data-table\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { resolveDataTableLabels } from \"./data-table-shared\";\nimport { useKitLabelOverrides, useKitLocale } from \"../i18n/kit-labels\";\n\ninterface FilterPopoverProps<T> {\n  column: DataTableColumn<T>;\n  state: FilterValue;\n  onChange: (next: FilterValue) => void;\n  onClear: () => void;\n  selectOptions: { value: string; label: string }[];\n  /** BCP-47 locale for the date picker / labels. Falls back to the provider's. */\n  locale?: string;\n  /** Already resolved by {@link DataTable}. Standalone (it is exported), omit it and\n   *  the `dataTable` namespace of `<UiKitProvider labels>` is used. */\n  labels?: DataTableLabels;\n  /**\n   * Focus the text filter's input on mount. True, because that is right for the one\n   * place this component normally lives: a Popover opened by an explicit press on\n   * \"Filter\", which exists in order to be typed into and which the user has just asked\n   * for. It was hard-coded, which made it right there and wrong everywhere else — a\n   * browser scrolls whatever takes focus into view, so embedding this control in an\n   * ordinary page (the showcase documents it on one) landed the reader 25,000px down a\n   * page they had not scrolled. An embedder that is not a popover passes `false`.\n   */\n  autoFocus?: boolean;\n}\n\n/**\n * The contents of a column's filter Popover. Renders the right control set for\n * the column's filter type — text search, select checklist, date range (presets\n * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs\n * toggle — driving the shared {@link FilterValue} state.\n */\nexport function FilterPopover<T>({\n  column,\n  state,\n  onChange,\n  onClear,\n  selectOptions,\n  locale: localeProp,\n  labels: labelsProp,\n  autoFocus = true,\n}: FilterPopoverProps<T>) {\n  // Both hooks run before the early return below, unconditionally.\n  const overrides = useKitLabelOverrides(\"dataTable\");\n  const labels = labelsProp ?? resolveDataTableLabels(overrides);\n  // No `\"en\"` fallback any more: that pinned the calendar to English in a table that\n  // was never handed a locale, under a provider that had one.\n  const locale = useKitLocale(localeProp);\n  // What `autoFocus` did, done by hand: a callback ref runs in the same commit phase\n  // React's own autofocus does, once when the input mounts (it is stable across\n  // renders, so a re-render does not re-take focus).\n  const focusOnMount = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el && autoFocus) el.focus();\n    },\n    [autoFocus],\n  );\n  // The number bounds' marks, and what the typist wrote in each box — see the number\n  // section below (BUG-10).\n  const mark = decimalMark(locale);\n  const [typed, setTyped] = useState<{ min: string | null; max: string | null }>({ min: null, max: null });\n  const filter = resolveFilter(column);\n  if (!filter) return null;\n\n  // `focus:outline-none` with only a 1px border tint to replace it is the same finding\n  // the audit records against the numpad's keys: on a panel of four identical fields a\n  // border going from --border to --border-strong is not a location. The ring is, and it\n  // is the package's brand focus colour, as on every field (field-base.tsx).\n  const inputBase =\n    \"block w-full rounded border border-subtle bg-surface px-2 py-1.5 text-sm text-secondary placeholder:text-placeholder focus:border-strong focus:outline-none \" +\n    FOCUS_RING +\n    \" \" +\n    // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.\n    FIELD_TOUCH_TEXT;\n  const buttonBase =\n    \"rounded border border-subtle bg-surface px-2 py-1 text-xs text-secondary hover:bg-hover\";\n\n  const clearRow = (\n    <div className=\"flex justify-end pt-1\">\n      <button type=\"button\" onClick={onClear} className={cn(buttonBase, \"flex items-center gap-1\")}>\n        <X className=\"size-3\" /> {labels.clearFilter}\n      </button>\n    </div>\n  );\n\n  if (filter.type === \"text\") {\n    const v = state.type === \"text\" ? state : { type: \"text\" as const, q: \"\" };\n    return (\n      <div className=\"space-y-2\">\n        <input\n          type=\"text\"\n          // A prop now, defaulting to what the popover needs; see `autoFocus` on the\n          // props above. Focused by `focusOnMount` rather than the `autoFocus`\n          // attribute, because here taking focus is the default, not an opt-in.\n          ref={focusOnMount}\n          value={v.q}\n          onChange={(e) => onChange({ type: \"text\", q: e.target.value })}\n          placeholder={labels.filterPlaceholder}\n          className={inputBase}\n        />\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"select\") {\n    const v = state.type === \"select\" ? state : { type: \"select\" as const, values: [] };\n    const toggle = (val: string) => {\n      const set = new Set(v.values);\n      if (set.has(val)) set.delete(val);\n      else set.add(val);\n      onChange({ type: \"select\", values: Array.from(set) });\n    };\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between text-xs text-muted\">\n          <span>{labels.selectFilter}</span>\n          <div className=\"flex gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: selectOptions.map((o) => o.value) })}\n              className={buttonBase}\n            >\n              {labels.selectAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: [] })}\n              className={buttonBase}\n            >\n              {labels.selectNone}\n            </button>\n          </div>\n        </div>\n        <ul className=\"max-h-56 overflow-y-auto rounded border border-subtle\">\n          {selectOptions.map((o) => {\n            const checked = v.values.includes(o.value);\n            return (\n              <li key={o.value}>\n                <label className=\"flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-hover\">\n                  <input\n                    type=\"checkbox\"\n                    checked={checked}\n                    onChange={() => toggle(o.value)}\n                    className=\"size-3.5\"\n                  />\n                  <span className=\"truncate\">{o.label}</span>\n                </label>\n              </li>\n            );\n          })}\n          {selectOptions.length === 0 && (\n            <li className=\"px-2 py-2 text-sm text-muted\">—</li>\n          )}\n        </ul>\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"date\") {\n    const v = state.type === \"date\" ? state : { type: \"date\" as const, from: \"\", to: \"\" };\n    const set = (from: string, to: string) => onChange({ type: \"date\", from, to });\n    const presets = dateRangePresets();\n    const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;\n    // Side by side, the 7rem preset column leaves a phone's calendar and its two\n    // native date inputs ~180px, which clips \"mm/dd/yyyy\" mid-placeholder. Below `sm`\n    // the presets wrap as a row above the calendar, which then gets the panel's width.\n    return (\n      <div className=\"flex flex-col gap-3 sm:flex-row\">\n        <ul className=\"flex flex-wrap gap-0.5 text-xs sm:w-28 sm:shrink-0 sm:flex-col sm:flex-nowrap\">\n          {presets.map((p) => {\n            const active = isActivePreset(p);\n            return (\n              <li key={p.key}>\n                <button\n                  type=\"button\"\n                  onClick={() => set(p.from, p.to)}\n                  className={cn(\n                    \"block rounded px-2 py-1 text-start transition-colors sm:w-full\",\n                    active\n                      ? \"bg-brand-soft text-brand-muted\"\n                      : \"text-secondary hover:bg-hover\",\n                  )}\n                >\n                  {labels.presets[p.key] ?? p.key}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <div className=\"min-w-0 flex-1 space-y-2\">\n          {/* No `labels` here: the calendar reads `miniCalendar` from the provider\n              itself, which is the only way a calendar nested this deep was ever going\n              to be translated — the table has no prop to forward them through. */}\n          <MiniCalendar from={v.from} to={v.to} locale={locale} onSelect={set} />\n          <div className=\"grid grid-cols-2 gap-2\">\n            <label className=\"text-xs text-muted\">\n              {labels.dateFrom}\n              <input\n                type=\"date\"\n                value={v.from}\n                onChange={(e) => set(e.target.value, v.to)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n            <label className=\"text-xs text-muted\">\n              {labels.dateTo}\n              <input\n                type=\"date\"\n                value={v.to}\n                onChange={(e) => set(v.from, e.target.value)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n          </div>\n          {clearRow}\n        </div>\n      </div>\n    );\n  }\n\n  // number\n  const v = state.type === \"number\" ? state : { type: \"number\" as const, min: \"\", max: \"\", abs: false };\n  // The bounds were native `type=\"number\"` inputs, the one numeric entry in the kit that\n  // bypassed decimal-marks (BUG-10, refactor audit 2026-10): where the browser refuses a\n  // comma, a German \"12,50\" read as empty and the filter silently stayed off while the box\n  // showed the text. A text box with the decimal keyboard now, read as NumberInput reads\n  // (`readTyped`): the state holds the dot-decimal figure, and the box keeps the typist's\n  // own text while it says the same (`showsTyped`), else the bound in the locale's mark.\n  const shown = (bound: \"min\" | \"max\") => {\n    const own = typed[bound];\n    return own !== null && showsTyped(own, mark, v[bound]) ? own : localizeMark(v[bound], mark);\n  };\n  const setBound = (bound: \"min\" | \"max\", raw: string) => {\n    setTyped((t) => ({ ...t, [bound]: raw }));\n    const read = readTyped(raw, mark);\n    onChange({\n      type: \"number\",\n      min: bound === \"min\" ? read : v.min,\n      max: bound === \"max\" ? read : v.max,\n      abs: v.abs,\n    });\n  };\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"grid grid-cols-2 gap-2\">\n        <label className=\"text-xs text-muted\">\n          {labels.numberMin} (≥)\n          <input\n            type=\"text\"\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            value={shown(\"min\")}\n            onChange={(e) => setBound(\"min\", e.target.value)}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n        <label className=\"text-xs text-muted\">\n          {labels.numberMax} (≤)\n          <input\n            type=\"text\"\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            value={shown(\"max\")}\n            onChange={(e) => setBound(\"max\", e.target.value)}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n      </div>\n      <label className=\"flex items-center gap-2 text-sm text-secondary\">\n        <input\n          type=\"checkbox\"\n          checked={v.abs}\n          onChange={(e) => onChange({ type: \"number\", min: v.min, max: v.max, abs: e.target.checked })}\n          className=\"size-3.5\"\n        />\n        {labels.numberAbs}\n      </label>\n      {clearRow}\n    </div>\n  );\n}\n"],"mappings":";AA2FM,SACE,KADF;AA3FN,SAAS,aAAa,gBAAgB;AACtC,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,aAAa,cAAc,WAAW,kBAAkB;AACjE,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAI9B,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,oBAAoB;AA+B5C,SAAS,cAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACd,GAA0B;AAExB,QAAM,YAAY,qBAAqB,WAAW;AAClD,QAAM,SAAS,cAAc,uBAAuB,SAAS;AAG7D,QAAM,SAAS,aAAa,UAAU;AAItC,QAAM,eAAe;AAAA,IACnB,CAAC,OAAgC;AAC/B,UAAI,MAAM,UAAW,IAAG,MAAM;AAAA,IAChC;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAGA,QAAM,OAAO,YAAY,MAAM;AAC/B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAqD,EAAE,KAAK,MAAM,KAAK,KAAK,CAAC;AACvG,QAAM,SAAS,cAAc,MAAM;AACnC,MAAI,CAAC,OAAQ,QAAO;AAMpB,QAAM,YACJ,iKACA,aACA;AAAA,EAEA;AACF,QAAM,aACJ;AAEF,QAAM,WACJ,oBAAC,SAAI,WAAU,yBACb,+BAAC,YAAO,MAAK,UAAS,SAAS,SAAS,WAAW,GAAG,YAAY,yBAAyB,GACzF;AAAA,wBAAC,KAAE,WAAU,UAAS;AAAA,IAAE;AAAA,IAAE,OAAO;AAAA,KACnC,GACF;AAGF,MAAI,OAAO,SAAS,QAAQ;AAC1B,UAAMA,KAAI,MAAM,SAAS,SAAS,QAAQ,EAAE,MAAM,QAAiB,GAAG,GAAG;AACzE,WACE,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UAIL,KAAK;AAAA,UACL,OAAOA,GAAE;AAAA,UACT,UAAU,CAAC,MAAM,SAAS,EAAE,MAAM,QAAQ,GAAG,EAAE,OAAO,MAAM,CAAC;AAAA,UAC7D,aAAa,OAAO;AAAA,UACpB,WAAW;AAAA;AAAA,MACb;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,UAAMA,KAAI,MAAM,SAAS,WAAW,QAAQ,EAAE,MAAM,UAAmB,QAAQ,CAAC,EAAE;AAClF,UAAM,SAAS,CAAC,QAAgB;AAC9B,YAAM,MAAM,IAAI,IAAIA,GAAE,MAAM;AAC5B,UAAI,IAAI,IAAI,GAAG,EAAG,KAAI,OAAO,GAAG;AAAA,UAC3B,KAAI,IAAI,GAAG;AAChB,eAAS,EAAE,MAAM,UAAU,QAAQ,MAAM,KAAK,GAAG,EAAE,CAAC;AAAA,IACtD;AACA,WACE,qBAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,wDACb;AAAA,4BAAC,UAAM,iBAAO,cAAa;AAAA,QAC3B,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,SAAS,EAAE,MAAM,UAAU,QAAQ,cAAc,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;AAAA,cACrF,WAAW;AAAA,cAEV,iBAAO;AAAA;AAAA,UACV;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,SAAS,EAAE,MAAM,UAAU,QAAQ,CAAC,EAAE,CAAC;AAAA,cACtD,WAAW;AAAA,cAEV,iBAAO;AAAA;AAAA,UACV;AAAA,WACF;AAAA,SACF;AAAA,MACA,qBAAC,QAAG,WAAU,yDACX;AAAA,sBAAc,IAAI,CAAC,MAAM;AACxB,gBAAM,UAAUA,GAAE,OAAO,SAAS,EAAE,KAAK;AACzC,iBACE,oBAAC,QACC,+BAAC,WAAM,WAAU,6EACf;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL;AAAA,gBACA,UAAU,MAAM,OAAO,EAAE,KAAK;AAAA,gBAC9B,WAAU;AAAA;AAAA,YACZ;AAAA,YACA,oBAAC,UAAK,WAAU,YAAY,YAAE,OAAM;AAAA,aACtC,KATO,EAAE,KAUX;AAAA,QAEJ,CAAC;AAAA,QACA,cAAc,WAAW,KACxB,oBAAC,QAAG,WAAU,gCAA+B,oBAAC;AAAA,SAElD;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,MAAI,OAAO,SAAS,QAAQ;AAC1B,UAAMA,KAAI,MAAM,SAAS,SAAS,QAAQ,EAAE,MAAM,QAAiB,MAAM,IAAI,IAAI,GAAG;AACpF,UAAM,MAAM,CAAC,MAAc,OAAe,SAAS,EAAE,MAAM,QAAQ,MAAM,GAAG,CAAC;AAC7E,UAAM,UAAU,iBAAiB;AACjC,UAAM,iBAAiB,CAAC,MAAoCA,GAAE,SAAS,EAAE,QAAQA,GAAE,OAAO,EAAE;AAI5F,WACE,qBAAC,SAAI,WAAU,mCACb;AAAA,0BAAC,QAAG,WAAU,iFACX,kBAAQ,IAAI,CAAC,MAAM;AAClB,cAAM,SAAS,eAAe,CAAC;AAC/B,eACE,oBAAC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,IAAI,EAAE,MAAM,EAAE,EAAE;AAAA,YAC/B,WAAW;AAAA,cACT;AAAA,cACA,SACI,mCACA;AAAA,YACN;AAAA,YAEC,iBAAO,QAAQ,EAAE,GAAG,KAAK,EAAE;AAAA;AAAA,QAC9B,KAZO,EAAE,GAaX;AAAA,MAEJ,CAAC,GACH;AAAA,MACA,qBAAC,SAAI,WAAU,4BAIb;AAAA,4BAAC,gBAAa,MAAMA,GAAE,MAAM,IAAIA,GAAE,IAAI,QAAgB,UAAU,KAAK;AAAA,QACrE,qBAAC,SAAI,WAAU,0BACb;AAAA,+BAAC,WAAM,WAAU,sBACd;AAAA,mBAAO;AAAA,YACR;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAOA,GAAE;AAAA,gBACT,UAAU,CAAC,MAAM,IAAI,EAAE,OAAO,OAAOA,GAAE,EAAE;AAAA,gBACzC,WAAW,GAAG,UAAU,SAAS;AAAA;AAAA,YACnC;AAAA,aACF;AAAA,UACA,qBAAC,WAAM,WAAU,sBACd;AAAA,mBAAO;AAAA,YACR;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAOA,GAAE;AAAA,gBACT,UAAU,CAAC,MAAM,IAAIA,GAAE,MAAM,EAAE,OAAO,KAAK;AAAA,gBAC3C,WAAW,GAAG,UAAU,SAAS;AAAA;AAAA,YACnC;AAAA,aACF;AAAA,WACF;AAAA,QACC;AAAA,SACH;AAAA,OACF;AAAA,EAEJ;AAGA,QAAM,IAAI,MAAM,SAAS,WAAW,QAAQ,EAAE,MAAM,UAAmB,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM;AAOpG,QAAM,QAAQ,CAAC,UAAyB;AACtC,UAAM,MAAM,MAAM,KAAK;AACvB,WAAO,QAAQ,QAAQ,WAAW,KAAK,MAAM,EAAE,KAAK,CAAC,IAAI,MAAM,aAAa,EAAE,KAAK,GAAG,IAAI;AAAA,EAC5F;AACA,QAAM,WAAW,CAAC,OAAsB,QAAgB;AACtD,aAAS,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,KAAK,GAAG,IAAI,EAAE;AACxC,UAAM,OAAO,UAAU,KAAK,IAAI;AAChC,aAAS;AAAA,MACP,MAAM;AAAA,MACN,KAAK,UAAU,QAAQ,OAAO,EAAE;AAAA,MAChC,KAAK,UAAU,QAAQ,OAAO,EAAE;AAAA,MAChC,KAAK,EAAE;AAAA,IACT,CAAC;AAAA,EACH;AACA,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,0BACb;AAAA,2BAAC,WAAM,WAAU,sBACd;AAAA,eAAO;AAAA,QAAU;AAAA,QAClB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAa;AAAA,YACb,OAAO,MAAM,KAAK;AAAA,YAClB,UAAU,CAAC,MAAM,SAAS,OAAO,EAAE,OAAO,KAAK;AAAA,YAC/C,WAAW,GAAG,UAAU,SAAS;AAAA;AAAA,QACnC;AAAA,SACF;AAAA,MACA,qBAAC,WAAM,WAAU,sBACd;AAAA,eAAO;AAAA,QAAU;AAAA,QAClB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAa;AAAA,YACb,OAAO,MAAM,KAAK;AAAA,YAClB,UAAU,CAAC,MAAM,SAAS,OAAO,EAAE,OAAO,KAAK;AAAA,YAC/C,WAAW,GAAG,UAAU,SAAS;AAAA;AAAA,QACnC;AAAA,SACF;AAAA,OACF;AAAA,IACA,qBAAC,WAAM,WAAU,kDACf;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,EAAE;AAAA,UACX,UAAU,CAAC,MAAM,SAAS,EAAE,MAAM,UAAU,KAAK,EAAE,KAAK,KAAK,EAAE,KAAK,KAAK,EAAE,OAAO,QAAQ,CAAC;AAAA,UAC3F,WAAU;AAAA;AAAA,MACZ;AAAA,MACC,OAAO;AAAA,OACV;AAAA,IACC;AAAA,KACH;AAEJ;","names":["v"]}

package/dist/components/data-table-filters.d.ts

@@ -1,15 +1,93 @@
-export { C as ColumnFilter, j as FilterValue, n as dateFilter, o as decodeFilterValue, p as decodeFilterValueOfType, q as defaultFilterState, r as encodeFilterValue, s as filterHref, t as isFilterActive, v as numberFilter, y as resolveFilter, z as rowMatches, A as selectFilter, B as textFilter } from '../data-table-labels-BJ5JE_X2.js';
-import 'react';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './write-lock.js';
+import type { DataTableColumn } from "./data-table.js";
+/** How a column is filtered. `text`/`select`/`date`/`number` each read a value
+ *  off the row and compare it against the user's {@link FilterValue}. */
+export type ColumnFilter<T> = {
+    type: "text";
+    getValue: (row: T) => string;
+} | {
+    type: "select";
+    getValue: (row: T) => string;
+    options?: {
+        value: string;
+        label?: string;
+    }[];
+} | {
+    type: "date";
+    getValue: (row: T) => string | null | undefined;
+} | {
+    type: "number";
+    getValue: (row: T) => number | null | undefined;
+};
+/** The current state of a column's filter (what the user has entered). */
+export type FilterValue = {
+    type: "text";
+    q: string;
+} | {
+    type: "select";
+    values: string[];
+} | {
+    type: "date";
+    from: string;
+    to: string;
+} | {
+    type: "number";
+    min: string;
+    max: string;
+    abs: boolean;
+};
+/** A column's filter config, falling back to a plain text filter over `filterBy`. */
+export declare function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null;
+/** Whether a filter value is actually narrowing anything (vs its empty default). */
+export declare function isFilterActive(v: FilterValue | undefined): boolean;
+/**
+ * Whether `row` passes column `col`'s filter given the user's `state`.
+ *
+ * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the
+ * root rules, under which a Turkish user typing "ırmak" does not find "IRMAK";
+ * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.
+ * The text filter folds as every kit list does ({@link foldForSearch}, DUP-5): accents
+ * off too, so "zurich" finds Zürich.
+ */
+export declare function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean;
+/** The empty filter state for a column's filter type. */
+export declare function defaultFilterState<T>(filter: ColumnFilter<T>): FilterValue;
+/** URL-safe encoding of a filter value (`f.<column>` param), null when empty. */
+export declare function encodeFilterValue(v: FilterValue): string | null;
+/** Inverse of {@link encodeFilterValue} given just the filter type — for
+ *  callers that know a column's type without holding its full config. */
+export declare function decodeFilterValueOfType(type: FilterValue["type"], raw: string): FilterValue;
+/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. */
+export declare function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue;
+/** A free-text filter over `getValue`. */
+export declare function textFilter<T>(getValue: (row: T) => string): ColumnFilter<T>;
+/**
+ * A multi-select filter. `options` is an options array, or a `{ value: label }` record
+ * (a translated status map) — kept in its key order. Left out, the table derives the
+ * options from the rows it holds.
+ */
+export declare function selectFilter<T>(getValue: (row: T) => string, options?: {
+    value: string;
+    label?: string;
+}[] | Record<string, string>): ColumnFilter<T>;
+/** A from/to date filter over an ISO date (or date-time) string. */
+export declare function dateFilter<T>(getValue: (row: T) => string | null | undefined): ColumnFilter<T>;
+/** A min/max (and absolute-value) filter over a number. */
+export declare function numberFilter<T>(getValue: (row: T) => number | null | undefined): ColumnFilter<T>;
+/**
+ * A link to a list page with one column filter already applied — in the table's own URL
+ * scheme (`f.<column>=<encoded>`), which a table with `urlSync` (or
+ * {@link useTableUrlState}) reads on mount. kastlan's `buildListUrl`, which had to
+ * restate the `f.` prefix to do it.
+ *
+ * `value` is a string for a text filter, an array for a select filter, or any
+ * {@link FilterValue}. A filter that narrows nothing returns `path` unchanged. A `path`
+ * that already carries a query keeps it; a `#fragment` stays at the end.
+ *
+ *     filterHref("/units", "status", ["vacant"]) // "/units?f.status=vacant"
+ */
+export declare function filterHref(path: string, column: string, value: string | string[] | FilterValue, 
+/** The target table's `urlSync` prefix, if it has one (`{ prefix: "inv." }` →
+ *  `inv.f.<column>`). */
+options?: {
+    prefix?: string;
+}): string;

package/dist/components/data-table-filters.js

@@ -1,4 +1,6 @@
 "use client";
+import { toLocalIso } from "../lib/dates.js";
+import { foldForSearch } from "../lib/text-match.js";
 function resolveFilter(col) {
   if (col.filter) return col.filter;
   if (col.filterBy) return { type: "text", getValue: col.filterBy };
@@ -14,16 +16,26 @@ function isFilterActive(v) {
     case "date":
       return !!v.from || !!v.to;
     case "number":
-      return v.min !== "" || v.max !== "" || v.abs;
+      return numberBound(v.min) !== null || numberBound(v.max) !== null || v.abs;
   }
 }
+function numberBound(raw) {
+  if (raw.trim() === "") return null;
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : null;
+}
+function localDay(raw) {
+  if (/^\d{4}-\d{2}-\d{2}$/.test(raw)) return raw;
+  const d = new Date(raw);
+  return Number.isNaN(d.getTime()) ? raw.slice(0, 10) : toLocalIso(d);
+}
 function rowMatches(col, row, state, locale) {
   const filter = resolveFilter(col);
   if (!filter) return true;
   switch (filter.type) {
     case "text": {
       if (state.type !== "text" || !state.q.trim()) return true;
-      return filter.getValue(row).toLocaleLowerCase(locale).includes(state.q.trim().toLocaleLowerCase(locale));
+      return foldForSearch(filter.getValue(row), locale).includes(foldForSearch(state.q.trim(), locale));
     }
     case "select": {
       if (state.type !== "select" || state.values.length === 0) return true;
@@ -33,7 +45,7 @@ function rowMatches(col, row, state, locale) {
       if (state.type !== "date") return true;
       const raw = filter.getValue(row);
       if (!raw) return !state.from && !state.to;
-      const v = raw.slice(0, 10);
+      const v = localDay(raw);
       if (state.from && v < state.from) return false;
       if (state.to && v > state.to) return false;
       return true;
@@ -41,10 +53,12 @@ function rowMatches(col, row, state, locale) {
     case "number": {
       if (state.type !== "number") return true;
       const raw = filter.getValue(row);
-      if (raw == null || Number.isNaN(raw)) return !state.min && !state.max;
+      const min = numberBound(state.min);
+      const max = numberBound(state.max);
+      if (raw == null || Number.isNaN(raw)) return min === null && max === null;
       const x = state.abs ? Math.abs(raw) : raw;
-      if (state.min !== "" && x < Number(state.min)) return false;
-      if (state.max !== "" && x > Number(state.max)) return false;
+      if (min !== null && x < min) return false;
+      if (max !== null && x > max) return false;
       return true;
     }
   }
@@ -100,7 +114,8 @@ function decodeFilterValueOfType(type, raw) {
       const abs = body.endsWith("!");
       if (abs) body = body.slice(0, -1);
       const [min = "", max = ""] = body.split("..");
-      return { type: "number", min, max, abs };
+      const kept = (s) => numberBound(s) === null ? "" : s;
+      return { type: "number", min: kept(min), max: kept(max), abs };
     }
   }
 }