@undevy-org/tablewright 0.1.0

package/dist/es/components/data-table/ColumnHeaderMenu.js

@@ -0,0 +1,144 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../ui/dropdown-menu.js";
+import { ChevronDown, ListFilter, EyeOff, ArrowUp, ArrowDown, Check } from "lucide-react";
+const DEFAULT_LABELS = {
+  sort: "Sort",
+  sortByColumn: (label) => `Sort by ${label}`,
+  ascending: "Ascending",
+  descending: "Descending",
+  filterByColumn: "Filter by this column",
+  hideColumn: "Hide column"
+};
+const sectionLabelClass = "px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--text-tertiary)] first:pt-1";
+const itemClass = "gap-2.5 rounded-md px-2.5 py-2";
+const iconClass = "h-3.5 w-3.5 shrink-0 text-[var(--text-secondary)]";
+function SortItems({
+  label,
+  sorted,
+  onSort,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: sectionLabelClass, children: label ? labels.sortByColumn(label) : labels.sort }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        className: `${itemClass}${sorted === "asc" ? " bg-[var(--bg-tertiary)]" : ""}`,
+        onClick: () => onSort("asc"),
+        children: [
+          /* @__PURE__ */ jsx(ArrowUp, { className: iconClass }),
+          labels.ascending,
+          sorted === "asc" && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-3 w-3 text-[var(--text-tertiary)]" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        className: `${itemClass}${sorted === "desc" ? " bg-[var(--bg-tertiary)]" : ""}`,
+        onClick: () => onSort("desc"),
+        children: [
+          /* @__PURE__ */ jsx(ArrowDown, { className: iconClass }),
+          labels.descending,
+          sorted === "desc" && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-3 w-3 text-[var(--text-tertiary)]" })
+        ]
+      }
+    )
+  ] });
+}
+function ColumnHeaderMenu({
+  label,
+  primaryLabel,
+  secondaryLabel,
+  sorted,
+  onSort,
+  primarySorted,
+  onPrimarySort,
+  secondarySorted,
+  onSecondarySort,
+  hasFilter,
+  onFilterClick,
+  onHide,
+  labels: labelOverrides,
+  menuWidth = "w-[200px]"
+}) {
+  const [open, setOpen] = useState(false);
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+  const isStacked = !!primaryLabel;
+  const isSingleSortable = !!label && !!onSort;
+  const isSortable = isStacked || isSingleSortable;
+  const hasActions = hasFilter || !!onHide;
+  const labelContent = isStacked ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col leading-none", children: [
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: [
+      primaryLabel,
+      primarySorted === "asc" && /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 shrink-0" }),
+      primarySorted === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 shrink-0" })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "mt-1 inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-tertiary)]", children: [
+      secondaryLabel,
+      secondarySorted === "asc" && /* @__PURE__ */ jsx(ArrowUp, { className: "h-2.5 w-2.5 shrink-0" }),
+      secondarySorted === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: "h-2.5 w-2.5 shrink-0" })
+    ] })
+  ] }) : /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: [
+    label,
+    sorted === "asc" && /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 shrink-0" }),
+    sorted === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 shrink-0" })
+  ] });
+  return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "pointer-events-none invisible flex items-center gap-1.5 py-1", children: [
+      labelContent,
+      /* @__PURE__ */ jsx("span", { className: "h-3 w-3 shrink-0" })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `absolute inset-0 flex cursor-pointer select-none items-center gap-1.5 px-4 text-left transition-colors hover:bg-[var(--bg-hover)]${open ? " bg-[var(--bg-hover)]" : ""}`,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          labelContent,
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `h-3 w-3 shrink-0 text-[var(--text-tertiary)] transition-transform duration-200${open ? " rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: `${menuWidth} p-1.5`, children: [
+      isSingleSortable && /* @__PURE__ */ jsx(SortItems, { sorted: sorted ?? false, onSort, labels }),
+      isStacked && onPrimarySort && /* @__PURE__ */ jsx(
+        SortItems,
+        {
+          label: primaryLabel,
+          sorted: primarySorted ?? false,
+          onSort: onPrimarySort,
+          labels
+        }
+      ),
+      isStacked && onSecondarySort && /* @__PURE__ */ jsx(
+        SortItems,
+        {
+          label: secondaryLabel,
+          sorted: secondarySorted ?? false,
+          onSort: onSecondarySort,
+          labels
+        }
+      ),
+      isSortable && hasActions && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
+      hasFilter && onFilterClick && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: itemClass, onClick: onFilterClick, children: [
+        /* @__PURE__ */ jsx(ListFilter, { className: iconClass }),
+        labels.filterByColumn
+      ] }),
+      onHide && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: itemClass, onClick: onHide, children: [
+        /* @__PURE__ */ jsx(EyeOff, { className: iconClass }),
+        labels.hideColumn
+      ] })
+    ] })
+  ] });
+}
+export {
+  ColumnHeaderMenu
+};

package/dist/es/components/data-table/CompoundFilterPopover.js

@@ -0,0 +1,508 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Input } from "../ui/input.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
+import { FilterChip } from "./FilterChip.js";
+import { FilterPopoverFooter } from "./FilterPopoverFooter.js";
+const DEFAULT_LABELS = {
+  searchPlaceholder: "Search...",
+  addPlaceholder: "Add...",
+  contains: "Contains",
+  chipMin: "min",
+  chipMax: "max",
+  statsAllPrefix: "All:",
+  statsFilteredPrefix: "Filt:"
+};
+function isCompoundEmpty(value) {
+  if (typeof value !== "object" || Array.isArray(value) || value === null) return true;
+  const obj = value;
+  return Object.keys(obj).every((k) => isSubValueEmpty(obj[k]));
+}
+function isSubValueEmpty(value) {
+  if (value === void 0 || value === null) return true;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === "string") return value.length === 0;
+  if (typeof value === "object") {
+    const obj = value;
+    return obj.from === void 0 && obj.to === void 0;
+  }
+  return true;
+}
+function initDraft(sub, compound) {
+  const val = compound[sub.key];
+  if (sub.type === "number-range") {
+    const range = typeof val === "object" && !Array.isArray(val) ? val : {};
+    return {
+      type: "number-range",
+      from: range.from !== void 0 ? String(range.from) : "",
+      to: range.to !== void 0 ? String(range.to) : ""
+    };
+  }
+  if (sub.type === "enum") {
+    return { type: "enum", selected: Array.isArray(val) ? val : [] };
+  }
+  return {
+    type: "text",
+    tags: Array.isArray(val) ? val : [],
+    input: ""
+  };
+}
+function draftToValue(draft) {
+  if (draft.type === "number-range") {
+    const from = draft.from.trim() !== "" ? Number(draft.from) : void 0;
+    const to = draft.to.trim() !== "" ? Number(draft.to) : void 0;
+    if (from === void 0 && to === void 0) return void 0;
+    return { from, to };
+  }
+  if (draft.type === "enum") {
+    return draft.selected.length > 0 ? draft.selected : void 0;
+  }
+  const trimmed = draft.input.trim();
+  const all = trimmed.length > 0 && !draft.tags.includes(trimmed) ? [...draft.tags, trimmed] : [...draft.tags];
+  return all.length > 0 ? all : void 0;
+}
+function formatSubDisplay(sub, val) {
+  if (isSubValueEmpty(val)) return null;
+  if (sub.type === "number-range" && typeof val === "object" && !Array.isArray(val)) {
+    const { from, to } = val;
+    const label = sub.label.replace(/\s+/g, " ").split(" ").pop() ?? sub.label;
+    if (from !== void 0 && to !== void 0) return `${label}: ${from}–${to}`;
+    if (from !== void 0) return `${label}: ≥${from}`;
+    if (to !== void 0) return `${label}: ≤${to}`;
+  }
+  if (sub.type === "enum" && Array.isArray(val) && val.length > 0) {
+    if (val.length === 1) {
+      const label = sub.options?.find((o) => o.value === val[0])?.label ?? val[0];
+      return `${sub.label}: ${label}`;
+    }
+    return `${sub.label}: ${val.length} selected`;
+  }
+  if (Array.isArray(val) && val.length > 0) {
+    if (val.length === 1) {
+      const display = val[0].length > 15 ? `${val[0].slice(0, 15)}…` : val[0];
+      return `${sub.label}: ${display}`;
+    }
+    return `${sub.label}: ${val.length} values`;
+  }
+  return null;
+}
+function CompoundFilterPopover({
+  config,
+  filter,
+  onChange,
+  onRemove,
+  initialOpen = false,
+  chipClassName,
+  columnFilterStats,
+  requestOpen,
+  onRequestOpenHandled
+}) {
+  const subFilters = config.subFilters ?? [];
+  const compound = typeof filter.value === "object" && !Array.isArray(filter.value) ? filter.value : {};
+  const [isOpen, setIsOpen] = useState(false);
+  const onRequestOpenHandledRef = useRef(onRequestOpenHandled);
+  useEffect(() => {
+    onRequestOpenHandledRef.current = onRequestOpenHandled;
+  });
+  const [drafts, setDrafts] = useState(() => {
+    const d = {};
+    for (const sub of subFilters) d[sub.key] = initDraft(sub, compound);
+    return d;
+  });
+  useEffect(() => {
+    if (!initialOpen) return;
+    const id = setTimeout(() => setIsOpen(true), 0);
+    return () => clearTimeout(id);
+  }, []);
+  useEffect(() => {
+    if (!requestOpen) return;
+    const id = setTimeout(() => {
+      setIsOpen(true);
+      onRequestOpenHandledRef.current?.();
+    }, 0);
+    return () => clearTimeout(id);
+  }, [requestOpen]);
+  const handleOpenChange = (nextOpen) => {
+    if (!nextOpen) {
+      if (isCompoundEmpty(filter.value)) {
+        onRemove();
+        return;
+      }
+      const d = {};
+      for (const sub of subFilters) d[sub.key] = initDraft(sub, compound);
+      setDrafts(d);
+    }
+    setIsOpen(nextOpen);
+  };
+  const handleApply = () => {
+    const result = {};
+    for (const sub of subFilters) {
+      const val = draftToValue(drafts[sub.key]);
+      if (val !== void 0) result[sub.key] = val;
+    }
+    if (Object.keys(result).length === 0) {
+      onRemove();
+    } else {
+      onChange(result);
+    }
+    setIsOpen(false);
+  };
+  const handleClearAll = () => {
+    const d = {};
+    for (const sub of subFilters) {
+      d[sub.key] = sub.type === "number-range" ? { type: "number-range", from: "", to: "" } : sub.type === "enum" ? { type: "enum", selected: [] } : { type: "text", tags: [], input: "" };
+    }
+    setDrafts(d);
+  };
+  const handleResetSection = (key) => {
+    setDrafts((prev) => {
+      const sub = subFilters.find((s) => s.key === key);
+      if (!sub) return prev;
+      return {
+        ...prev,
+        [key]: sub.type === "number-range" ? { type: "number-range", from: "", to: "" } : sub.type === "enum" ? { type: "enum", selected: [] } : { type: "text", tags: [], input: "" }
+      };
+    });
+  };
+  const getDisplayValue = () => {
+    if (isCompoundEmpty(filter.value)) return void 0;
+    const parts = [];
+    for (const sub of subFilters) {
+      const display = formatSubDisplay(sub, compound[sub.key]);
+      if (display) parts.push(display);
+    }
+    if (parts.length === 0) return void 0;
+    const joined = parts.join(" & ");
+    return joined.length > 30 ? `${parts.length} filters` : joined;
+  };
+  const updateDraft = (key, updater) => {
+    setDrafts((prev) => ({ ...prev, [key]: updater(prev[key]) }));
+  };
+  const renderNumberRangeSection = (sub, draft) => {
+    const statsKey = `${filter.columnId}:${sub.key}`;
+    const stats = columnFilterStats?.[statsKey];
+    const allNum = stats?.all?.type === "number-range" ? stats.all : null;
+    const filtNum = stats?.filtered?.type === "number-range" ? stats.filtered : null;
+    const chipCls = (active) => active ? "rounded border border-[var(--tag-blue-text)]/20 bg-[var(--tag-blue-bg)] px-1.5 py-0.5 text-[11px] text-[var(--tag-blue-text)] cursor-pointer transition-colors" : "rounded border border-[var(--border-subtle)] bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] cursor-pointer transition-colors";
+    const renderNumRow = (label, numStats) => {
+      if (!numStats) return null;
+      const { min, max } = numStats;
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[40px]", children: label }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: chipCls(draft.from === String(min)),
+            onClick: () => updateDraft(sub.key, (d) => ({ ...d, from: String(min) })),
+            children: [
+              DEFAULT_LABELS.chipMin,
+              " ",
+              min.toLocaleString()
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: chipCls(draft.to === String(max)),
+            onClick: () => updateDraft(sub.key, (d) => ({ ...d, to: String(max) })),
+            children: [
+              DEFAULT_LABELS.chipMax,
+              " ",
+              max.toLocaleString()
+            ]
+          }
+        )
+      ] });
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block", children: DEFAULT_LABELS.chipMin }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              autoFocus: subFilters.indexOf(sub) === 0,
+              placeholder: allNum ? String(allNum.min) : "0",
+              value: draft.from,
+              onChange: (e) => updateDraft(sub.key, (prev) => ({
+                ...prev,
+                from: e.target.value
+              })),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleApply();
+                }
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block", children: DEFAULT_LABELS.chipMax }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              placeholder: allNum ? String(allNum.max) : "0",
+              value: draft.to,
+              onChange: (e) => updateDraft(sub.key, (prev) => ({
+                ...prev,
+                to: e.target.value
+              })),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleApply();
+                }
+              }
+            }
+          )
+        ] })
+      ] }),
+      allNum && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] mt-3 pt-2 space-y-2", children: [
+        renderNumRow(DEFAULT_LABELS.statsAllPrefix, allNum),
+        filtNum && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderNumRow(DEFAULT_LABELS.statsFilteredPrefix, filtNum) })
+      ] })
+    ] });
+  };
+  const renderTextSection = (sub, draft) => {
+    const statsKey = `${filter.columnId}:${sub.key}`;
+    const stats = columnFilterStats?.[statsKey];
+    const allText = stats?.all?.type === "text" ? stats.all : null;
+    const filtText = stats?.filtered?.type === "text" ? stats.filtered : null;
+    const inTagsCls = "rounded border border-[var(--tag-blue-text)]/20 bg-[var(--tag-blue-bg)] px-1.5 py-0.5 text-[11px] text-[var(--tag-blue-text)] opacity-60 cursor-pointer transition-colors";
+    const chipCls = (active) => active ? "rounded border border-[var(--tag-blue-text)]/20 bg-[var(--tag-blue-bg)] px-1.5 py-0.5 text-[11px] text-[var(--tag-blue-text)] cursor-pointer transition-colors" : "rounded border border-[var(--border-subtle)] bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] cursor-pointer transition-colors";
+    const toggleTag = (s) => {
+      updateDraft(sub.key, (d) => {
+        const td = d;
+        const tags = td.tags.includes(s) ? td.tags.filter((t) => t !== s) : [...td.tags, s];
+        return { ...td, tags };
+      });
+    };
+    const addTag = (raw) => {
+      const trimmed = raw.trim();
+      if (trimmed.length === 0 || draft.tags.includes(trimmed)) return false;
+      updateDraft(sub.key, (d) => {
+        const td = d;
+        return { ...td, tags: [...td.tags, trimmed], input: "" };
+      });
+      return true;
+    };
+    const applyWithPendingInput = () => {
+      const result = {};
+      for (const sf of subFilters) {
+        if (sf.key === sub.key) {
+          const trimmed = draft.input.trim();
+          const tags = trimmed.length > 0 && !draft.tags.includes(trimmed) ? [...draft.tags, trimmed] : [...draft.tags];
+          if (tags.length > 0) result[sf.key] = tags;
+        } else {
+          const val = draftToValue(drafts[sf.key]);
+          if (val !== void 0) result[sf.key] = val;
+        }
+      }
+      if (Object.keys(result).length === 0) {
+        onRemove();
+      } else {
+        onChange(result);
+      }
+      setIsOpen(false);
+    };
+    const handleTextKeyDown = (e) => {
+      const isModEnter = e.key === "Enter" && (e.metaKey || e.ctrlKey);
+      if (isModEnter) {
+        e.preventDefault();
+        applyWithPendingInput();
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (draft.input.trim().length === 0) {
+          handleApply();
+        } else if (draft.tags.length === 0) {
+          addTag(draft.input);
+          applyWithPendingInput();
+        } else {
+          addTag(draft.input);
+        }
+        return;
+      }
+      if (e.key === "Backspace" && draft.input.length === 0 && draft.tags.length > 0) {
+        updateDraft(sub.key, (d) => {
+          const td = d;
+          return { ...td, tags: td.tags.slice(0, -1) };
+        });
+      }
+    };
+    const truncate = (s, max = 18) => s.length > max ? s.slice(0, max) + "…" : s;
+    const renderTextRow = (label, textStats) => {
+      if (!textStats) return null;
+      const { samples, totalUnique } = textStats;
+      const remaining = totalUnique - samples.length;
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[40px]", children: label }),
+        samples.map((s) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: draft.tags.includes(s) ? inTagsCls : chipCls(false),
+            onClick: () => toggleTag(s),
+            children: truncate(s)
+          },
+          s
+        )),
+        remaining > 0 && /* @__PURE__ */ jsxs("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[9px] text-[var(--text-tertiary)]", children: [
+          "+",
+          remaining
+        ] })
+      ] });
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block mb-2", children: [
+        DEFAULT_LABELS.contains,
+        draft.tags.length >= 2 && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] font-semibold text-[var(--tag-blue-text)] bg-[var(--tag-blue-bg)] rounded px-1 py-0.5 uppercase", children: "OR" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 rounded-md border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-2 py-1.5 focus-within:border-[var(--border-focus)]", children: [
+        draft.tags.map((tag) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex items-center gap-0.5 rounded bg-[var(--tag-blue-bg)] px-1.5 py-0.5 text-[11px] text-[var(--tag-blue-text)] max-w-[120px]",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: tag }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ml-0.5 text-[var(--tag-blue-text)]/60 hover:text-[var(--tag-blue-text)] text-xs leading-none",
+                  onClick: () => updateDraft(sub.key, (d) => {
+                    const td = d;
+                    return { ...td, tags: td.tags.filter((t) => t !== tag) };
+                  }),
+                  children: "✕"
+                }
+              )
+            ]
+          },
+          tag
+        )),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            autoFocus: subFilters.indexOf(sub) === 0,
+            className: "flex-1 min-w-[50px] bg-transparent text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-tertiary)]",
+            placeholder: draft.tags.length === 0 ? DEFAULT_LABELS.searchPlaceholder : DEFAULT_LABELS.addPlaceholder,
+            value: draft.input,
+            onChange: (e) => updateDraft(sub.key, (prev) => ({ ...prev, input: e.target.value })),
+            onKeyDown: handleTextKeyDown
+          }
+        )
+      ] }),
+      allText && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] mt-3 pt-2 space-y-2", children: [
+        renderTextRow(DEFAULT_LABELS.statsAllPrefix, allText),
+        filtText && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderTextRow(DEFAULT_LABELS.statsFilteredPrefix, filtText) })
+      ] })
+    ] });
+  };
+  const renderEnumSection = (sub, draft) => {
+    const statsKey = `${filter.columnId}:${sub.key}`;
+    const stats = columnFilterStats?.[statsKey];
+    const allEnum = stats?.all?.type === "enum" ? stats.all : null;
+    const filtEnum = stats?.filtered?.type === "enum" ? stats.filtered : null;
+    return /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: sub.options?.map((option) => {
+      const allCount = allEnum?.counts[option.value];
+      const filtCount = filtEnum?.counts[option.value];
+      return /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex items-center gap-2 px-2 py-1.5 hover:bg-[var(--bg-secondary)] rounded-md cursor-pointer transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: draft.selected.includes(option.value),
+                onCheckedChange: (checked) => {
+                  if (checked === "indeterminate") return;
+                  updateDraft(sub.key, (d) => {
+                    const ed = d;
+                    return {
+                      ...ed,
+                      selected: checked ? [...ed.selected, option.value] : ed.selected.filter((v) => v !== option.value)
+                    };
+                  });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm text-[var(--text-primary)]", children: option.label }),
+            allCount !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[var(--text-tertiary)] tabular-nums", children: filtCount !== void 0 ? `${filtCount} / ${allCount}` : allCount })
+          ]
+        },
+        option.value
+      );
+    }) });
+  };
+  const hasSectionValue = (key) => {
+    const draft = drafts[key];
+    if (!draft) return false;
+    if (draft.type === "number-range") return draft.from.trim() !== "" || draft.to.trim() !== "";
+    if (draft.type === "enum") return draft.selected.length > 0;
+    return draft.tags.length > 0 || draft.input.trim().length > 0;
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      FilterChip,
+      {
+        label: config.label,
+        value: getDisplayValue(),
+        onRemove,
+        active: !!getDisplayValue(),
+        className: chipClassName
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "start",
+        collisionPadding: 8,
+        className: "w-auto p-0 [box-shadow:var(--shadow-menu)] border-[var(--border-subtle)] flex flex-col max-h-[min(var(--radix-popover-content-available-height),520px)] overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 min-h-0 overflow-hidden", children: subFilters.map((sub, idx) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `p-3 w-60 flex flex-col min-h-0 overflow-y-auto overscroll-contain ${idx > 0 ? "border-l border-[var(--border-subtle)]" : ""}`,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-[var(--text-primary)]", children: sub.label }),
+                    sub.badge && /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-tertiary)]", children: sub.badge })
+                  ] }),
+                  hasSectionValue(sub.key) && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "text-[11px] text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] transition-colors",
+                      onClick: () => handleResetSection(sub.key),
+                      title: `Reset ${sub.label}`,
+                      children: "✕"
+                    }
+                  )
+                ] }),
+                drafts[sub.key]?.type === "number-range" && renderNumberRangeSection(sub, drafts[sub.key]),
+                drafts[sub.key]?.type === "text" && renderTextSection(sub, drafts[sub.key]),
+                drafts[sub.key]?.type === "enum" && renderEnumSection(sub, drafts[sub.key])
+              ]
+            },
+            sub.key
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 bg-[var(--bg-surface)]", children: /* @__PURE__ */ jsx(FilterPopoverFooter, { onApply: handleApply, onClear: handleClearAll }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CompoundFilterPopover
+};

package/dist/es/components/data-table/CopyButton.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+function CopyButton({
+  text,
+  className,
+  iconClassName,
+  title = "Copy value"
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = (event) => {
+    event.stopPropagation();
+    void navigator.clipboard.writeText(text);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "ml-1.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-[var(--text-tertiary)] opacity-0 transition-all hover:text-[var(--text-primary)] focus-visible:opacity-100 group-hover:opacity-100",
+        className
+      ),
+      onClick: handleCopy,
+      title,
+      "aria-label": copied ? "Copied" : title,
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: cn("h-3 w-3 text-[var(--tag-green-text)]", iconClassName) }) : /* @__PURE__ */ jsx(Copy, { className: cn("h-3 w-3", iconClassName) })
+    }
+  );
+}
+export {
+  CopyButton
+};