@campminder/ds 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -18,6 +18,7 @@ var zod = require('zod');
 var input = require('@base-ui/react/input');
 var select = require('@base-ui/react/select');
 var checkbox = require('@base-ui/react/checkbox');
+var popover = require('@base-ui/react/popover');
 var cmdk = require('cmdk');
 var dialog = require('@base-ui/react/dialog');
 var menu = require('@base-ui/react/menu');
@@ -25,7 +26,6 @@ var separator = require('@base-ui/react/separator');
 var RPNInput = require('react-phone-number-input');
 var flags = require('react-phone-number-input/flags');
 var en = require('react-phone-number-input/locale/en.json');
-var popover = require('@base-ui/react/popover');
 var scrollArea = require('@base-ui/react/scroll-area');
 var progress = require('@base-ui/react/progress');
 var radioGroup = require('@base-ui/react/radio-group');
@@ -1202,6 +1202,397 @@ function Checkbox({ className, ...props }) {
     }
   );
 }
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    popover.Popover.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        popover.Popover.Popup,
+        {
+          "data-slot": "popover-content",
+          className: cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function PopoverHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "popover-header",
+      className: cn("flex flex-col gap-0.5 text-sm", className),
+      ...props
+    }
+  );
+}
+function PopoverTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    popover.Popover.Title,
+    {
+      "data-slot": "popover-title",
+      className: cn("font-medium", className),
+      ...props
+    }
+  );
+}
+function PopoverDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    popover.Popover.Description,
+    {
+      "data-slot": "popover-description",
+      className: cn("text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+var ALL_GROUPS = "__all__";
+function ColumnCustomizer({
+  columns,
+  value,
+  onApply,
+  groupOrder,
+  title = "Customize columns",
+  searchPlaceholder = "Search for a column",
+  allGroupsLabel = "All columns",
+  align = "end",
+  trigger
+}) {
+  const [open, setOpen] = React3.useState(false);
+  const [draft, setDraft] = React3.useState(value);
+  const [query, setQuery] = React3.useState("");
+  const [group, setGroup] = React3.useState(ALL_GROUPS);
+  const [dragIndex, setDragIndex] = React3.useState(null);
+  const q = query.trim().toLowerCase();
+  const searching = q !== "";
+  const labelFor = React3.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const c of columns) m.set(c.key, c.label);
+    return m;
+  }, [columns]);
+  const groupKeys = React3.useMemo(() => {
+    if (groupOrder?.length) return groupOrder;
+    const seen = [];
+    for (const c of columns) if (!seen.includes(c.group)) seen.push(c.group);
+    return seen;
+  }, [columns, groupOrder]);
+  const groups = React3.useMemo(
+    () => [
+      { key: ALL_GROUPS, label: allGroupsLabel, count: columns.length },
+      ...groupKeys.map((g) => ({
+        key: g,
+        label: g,
+        count: columns.filter((c) => c.group === g).length
+      }))
+    ],
+    [columns, groupKeys, allGroupsLabel]
+  );
+  const handleOpenChange = (next) => {
+    if (next) {
+      setDraft(value);
+      setQuery("");
+      setGroup(ALL_GROUPS);
+    }
+    setOpen(next);
+  };
+  const toggle = (k) => setDraft(
+    (cur) => cur.includes(k) ? cur.filter((c) => c !== k) : [...cur, k]
+  );
+  const remove = (k) => setDraft((cur) => cur.filter((c) => c !== k));
+  const reorder = (from, to) => setDraft((cur) => {
+    const next = [...cur];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    return next;
+  });
+  const visibleCols = React3.useMemo(() => {
+    const base = searching || group === ALL_GROUPS ? columns : columns.filter((c) => c.group === group);
+    return searching ? base.filter((c) => c.label.toLowerCase().includes(q)) : base;
+  }, [columns, q, group, searching]);
+  const showSource = searching || group === ALL_GROUPS;
+  const allChecked = visibleCols.length > 0 && visibleCols.every((c) => draft.includes(c.key));
+  const toggleAll = () => setDraft(
+    (cur) => allChecked ? cur.filter((k) => !visibleCols.some((c) => c.key === k)) : [
+      ...cur,
+      ...visibleCols.map((c) => c.key).filter((k) => !cur.includes(k))
+    ]
+  );
+  const activeGroupLabel = groups.find((g) => g.key === group)?.label;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    trigger ? /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { render: trigger }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      PopoverTrigger,
+      {
+        type: "button",
+        className: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-9 gap-1.5 text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns3, { className: "size-4" }),
+          "Columns"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PopoverContent,
+      {
+        align,
+        className: "w-[720px] max-w-[calc(100vw-2rem)] gap-0 p-0",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverTitle, { className: "px-4 pt-4 pb-3 text-sm font-semibold", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder: searchPlaceholder,
+                "aria-label": searchPlaceholder,
+                className: "h-10 pl-9"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid h-[380px] grid-cols-[12rem_1fr_16rem] border-y", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto border-r p-2", children: groups.map((gr) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                disabled: searching,
+                onClick: () => setGroup(gr.key),
+                className: cn(
+                  "flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-left text-sm hover:bg-muted/60",
+                  !searching && group === gr.key && "bg-muted font-medium",
+                  searching && "opacity-40"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: gr.label }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded-md bg-muted px-1.5 text-xs tabular-nums text-muted-foreground", children: gr.count })
+                ]
+              },
+              gr.key
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 overflow-y-auto p-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1 pb-1 text-sm font-semibold", children: searching ? "Search results" : activeGroupLabel }),
+              !searching && visibleCols.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex cursor-pointer items-center gap-2.5 border-b px-1 py-2 text-sm", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox,
+                  {
+                    checked: allChecked,
+                    onCheckedChange: () => toggleAll()
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Select all" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-1", children: visibleCols.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-1 py-6 text-center text-sm text-muted-foreground", children: [
+                "No columns match \u201C",
+                query,
+                "\u201D."
+              ] }) : visibleCols.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "label",
+                {
+                  className: "flex cursor-pointer items-center gap-2.5 rounded-md px-1 py-2 text-sm hover:bg-muted/60",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Checkbox,
+                      {
+                        checked: draft.includes(c.key),
+                        onCheckedChange: () => toggle(c.key)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: c.label }),
+                    showSource && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: c.group })
+                  ]
+                },
+                c.key
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col border-l", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold", children: [
+                  draft.length,
+                  " selected"
+                ] }),
+                draft.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setDraft([]),
+                    className: "text-xs font-medium text-primary hover:underline",
+                    children: "Clear all"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 space-y-1.5 overflow-y-auto px-3 pb-3", children: draft.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1 py-6 text-center text-sm text-muted-foreground", children: "No columns selected." }) : draft.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  draggable: true,
+                  onDragStart: () => setDragIndex(i),
+                  onDragOver: (e) => e.preventDefault(),
+                  onDrop: () => {
+                    if (dragIndex !== null && dragIndex !== i)
+                      reorder(dragIndex, i);
+                    setDragIndex(null);
+                  },
+                  onDragEnd: () => setDragIndex(null),
+                  className: cn(
+                    "flex items-center gap-2 rounded-md border bg-background px-2.5 py-2 text-sm",
+                    dragIndex === i && "opacity-50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "size-3.5 shrink-0 cursor-grab text-muted-foreground" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labelFor.get(k) ?? k }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => remove(k),
+                        "aria-label": `Remove ${labelFor.get(k) ?? k}`,
+                        className: "shrink-0 rounded-sm p-0.5 text-muted-foreground hover:text-foreground",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" })
+                      }
+                    )
+                  ]
+                },
+                k
+              )) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 px-4 py-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: "Cancel" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                onClick: () => {
+                  onApply(draft);
+                  setOpen(false);
+                },
+                children: "Apply"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function ColumnPicker({
+  columns,
+  value,
+  onChange,
+  title = "Columns",
+  searchPlaceholder = "Search columns",
+  align = "end",
+  trigger
+}) {
+  const [query, setQuery] = React3.useState("");
+  const q = query.trim().toLowerCase();
+  const visible = React3.useMemo(() => new Set(value), [value]);
+  const filtered = React3.useMemo(
+    () => q ? columns.filter((c) => c.label.toLowerCase().includes(q)) : columns,
+    [columns, q]
+  );
+  const emit = (next) => onChange(columns.filter((c) => next.has(c.key)).map((c) => c.key));
+  const toggle = (key) => {
+    const next = new Set(visible);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    emit(next);
+  };
+  const allChecked = filtered.length > 0 && filtered.every((c) => visible.has(c.key));
+  const toggleAll = () => {
+    const next = new Set(visible);
+    for (const c of filtered) {
+      if (allChecked) next.delete(c.key);
+      else next.add(c.key);
+    }
+    emit(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    trigger ? /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { render: trigger }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      PopoverTrigger,
+      {
+        type: "button",
+        className: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-9 gap-1.5 text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns3, { className: "size-4" }),
+          "Columns"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align, className: "w-72 gap-0 p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverTitle, { className: "px-3 pt-3 pb-2 text-sm font-semibold", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            className: "h-9 pl-9"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[320px] overflow-y-auto border-t px-1.5 py-1.5", children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-6 text-center text-sm text-muted-foreground", children: [
+        "No columns match \u201C",
+        query,
+        "\u201D."
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-sm hover:bg-muted/60", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: allChecked, onCheckedChange: () => toggleAll() }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Select all" })
+        ] }),
+        filtered.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-sm hover:bg-muted/60",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Checkbox,
+                {
+                  checked: visible.has(c.key),
+                  onCheckedChange: () => toggle(c.key)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: c.label })
+            ]
+          },
+          c.key
+        ))
+      ] }) })
+    ] })
+  ] });
+}
 function Dialog({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { "data-slot": "dialog", ...props });
 }
@@ -1296,7 +1687,7 @@ function DialogFooter({
     {
       "data-slot": "dialog-footer",
       className: cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end",
         className
       ),
       ...props,
@@ -1635,6 +2026,449 @@ function CommandShortcut({
     }
   );
 }
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("mt-4 text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+var SELECT_COL_PX = 48;
+var STICKY_UNDERLAP_PX = 8;
+var selectColStyle = {
+  width: SELECT_COL_PX,
+  minWidth: SELECT_COL_PX,
+  maxWidth: SELECT_COL_PX
+};
+var DEFAULT_STICKY_PX = 180;
+var HEADER_CELL_BG = "bg-[color-mix(in_oklab,var(--color-muted)_40%,var(--color-background))]";
+function alignClass(align) {
+  return align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+}
+function DataTable({
+  data,
+  columns,
+  rowKey,
+  selectable = false,
+  selected: selectedProp,
+  onSelectedChange,
+  bulkActions,
+  sort: sortProp,
+  defaultSort = null,
+  onSortChange,
+  paginated = false,
+  pageSize: pageSizeProp,
+  pageSizeOptions = [25, 50, 100],
+  page: pageProp,
+  onPageChange,
+  toolbar,
+  onRowClick,
+  emptyMessage = "No rows to show.",
+  rowClassName,
+  className
+}) {
+  const [selInner, setSelInner] = React3.useState(/* @__PURE__ */ new Set());
+  const selected = selectedProp ?? selInner;
+  const setSelected = (next) => {
+    onSelectedChange?.(next);
+    if (selectedProp === void 0) setSelInner(next);
+  };
+  const toggleRow = (id) => {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setSelected(next);
+  };
+  const clearSelection = () => setSelected(/* @__PURE__ */ new Set());
+  const [sortInner, setSortInner] = React3.useState(defaultSort);
+  const sort = sortProp !== void 0 ? sortProp : sortInner;
+  const colByKey = React3.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const c of columns) m.set(c.key, c);
+    return m;
+  }, [columns]);
+  const toggleSort = (key) => {
+    const next = sort?.key !== key ? { key, dir: "asc" } : sort.dir === "asc" ? { key, dir: "desc" } : null;
+    onSortChange?.(next);
+    if (sortProp === void 0) setSortInner(next);
+  };
+  const sorted = React3.useMemo(() => {
+    if (!sort) return data;
+    const col = colByKey.get(sort.key);
+    if (!col?.sortValue) return data;
+    const { sortValue } = col;
+    const arr = [...data];
+    arr.sort((a, b) => {
+      const av = sortValue(a);
+      const bv = sortValue(b);
+      const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv));
+      return sort.dir === "asc" ? cmp : -cmp;
+    });
+    return arr;
+  }, [data, sort, colByKey]);
+  const [pageSizeInner, setPageSizeInner] = React3.useState(pageSizeProp ?? 25);
+  const pageSize = paginated ? pageSizeInner : sorted.length || 1;
+  const [pageInner, setPageInner] = React3.useState(0);
+  const page = pageProp !== void 0 ? pageProp : pageInner;
+  const setPage = (p) => {
+    onPageChange?.(p);
+    if (pageProp === void 0) setPageInner(p);
+  };
+  const total = sorted.length;
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+  const safePage = Math.min(page, pageCount - 1);
+  const pageStart = paginated ? safePage * pageSize : 0;
+  const rows = paginated ? sorted.slice(pageStart, pageStart + pageSize) : sorted;
+  const pageIds = rows.map(rowKey);
+  const allChecked = pageIds.length > 0 && pageIds.every((id) => selected.has(id));
+  const toggleAll = () => {
+    const next = new Set(selected);
+    for (const id of pageIds) {
+      if (allChecked) next.delete(id);
+      else next.add(id);
+    }
+    setSelected(next);
+  };
+  const selectedCount = selected.size;
+  const stickyLeft = React3.useMemo(() => {
+    const offsets = /* @__PURE__ */ new Map();
+    let left = selectable ? SELECT_COL_PX - STICKY_UNDERLAP_PX : 0;
+    for (const col of columns) {
+      if (!col.sticky) continue;
+      offsets.set(col.key, left);
+      left += typeof col.width === "number" ? col.width : DEFAULT_STICKY_PX;
+    }
+    return offsets;
+  }, [columns, selectable]);
+  const colCount = (selectable ? 1 : 0) + columns.length + 1;
+  const sortIcon = (key) => {
+    if (sort?.key !== key)
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "size-3.5 text-muted-foreground/50 opacity-0 transition-opacity group-hover/sort:opacity-100" });
+    return sort.dir === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-3.5" });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2", className), children: [
+    toolbar,
+    bulkActions?.length && selectedCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-fit flex-wrap items-center gap-2 rounded-lg border border-primary/40 bg-primary/5 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium", children: [
+        selectedCount,
+        " selected"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "\xB7" }),
+      bulkActions.map(
+        (action, i) => action.options ? /* @__PURE__ */ jsxRuntime.jsxs(
+          Select,
+          {
+            value: "",
+            onValueChange: (v) => v && action.onPick?.(v),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SelectTrigger,
+                {
+                  "aria-label": action.label,
+                  className: "h-8 min-w-[130px] bg-background text-sm",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: action.label })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "w-auto min-w-(--anchor-width) max-w-[20rem]", children: action.options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
+            ]
+          },
+          i
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: action.onClick,
+            className: "inline-flex h-8 items-center rounded-md border bg-background px-2.5 text-sm hover:bg-muted",
+            children: action.label
+          },
+          i
+        )
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: clearSelection,
+          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" }),
+            "Clear"
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border bg-background overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: "border-separate border-spacing-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "text-xs uppercase tracking-wide text-muted-foreground", children: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(
+          TableHead,
+          {
+            style: selectColStyle,
+            className: cn(
+              "sticky left-0 z-30 px-0 py-2.5 border-b rounded-tl-xl",
+              HEADER_CELL_BG
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Checkbox,
+              {
+                checked: allChecked,
+                onCheckedChange: toggleAll,
+                "aria-label": "Select all"
+              }
+            ) })
+          }
+        ),
+        columns.map((col, colIndex) => {
+          const sortable = col.sortable && col.sortValue;
+          const left = stickyLeft.get(col.key);
+          const isFirstCol = !selectable && colIndex === 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TableHead,
+            {
+              style: col.sticky ? { left, minWidth: col.width } : { minWidth: col.width },
+              className: cn(
+                "px-4 py-2.5 border-b font-medium text-muted-foreground",
+                HEADER_CELL_BG,
+                alignClass(col.align),
+                col.sticky && "sticky z-20",
+                isFirstCol && "rounded-tl-xl",
+                col.headerClassName
+              ),
+              children: sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggleSort(col.key),
+                  className: "group/sort inline-flex items-center gap-1 hover:text-foreground",
+                  children: [
+                    col.header,
+                    sortIcon(col.key)
+                  ]
+                }
+              ) : col.header
+            },
+            col.key
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableHead, { "aria-hidden": true, className: cn("w-full border-b", HEADER_CELL_BG) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell,
+        {
+          colSpan: colCount,
+          className: "py-12 text-center text-sm text-muted-foreground rounded-bl-xl",
+          children: emptyMessage
+        }
+      ) }) : rows.map((row, rowIndex) => {
+        const id = rowKey(row);
+        const isSel = selected.has(id);
+        const rowBg = isSel ? "bg-muted" : "bg-background";
+        const isLastRow = rowIndex === rows.length - 1;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          TableRow,
+          {
+            className: cn(
+              "group",
+              rowBg,
+              "hover:bg-muted",
+              rowClassName?.(row)
+            ),
+            children: [
+              selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                TableCell,
+                {
+                  style: selectColStyle,
+                  className: cn(
+                    "sticky left-0 z-20 px-0 py-2.5 border-b group-hover:bg-muted",
+                    rowBg,
+                    isLastRow && "rounded-bl-xl"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Checkbox,
+                    {
+                      checked: isSel,
+                      onCheckedChange: () => toggleRow(id),
+                      "aria-label": "Select row"
+                    }
+                  ) })
+                }
+              ),
+              columns.map((col, colIndex) => {
+                const left = stickyLeft.get(col.key);
+                const isFirstCol = !selectable && colIndex === 0;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  TableCell,
+                  {
+                    style: col.sticky ? { left } : void 0,
+                    className: cn(
+                      "px-4 py-2.5 border-b align-middle",
+                      alignClass(col.align),
+                      col.sticky && cn("sticky z-10 group-hover:bg-muted", rowBg),
+                      isFirstCol && isLastRow && "rounded-bl-xl",
+                      col.className
+                    ),
+                    onClick: col.sticky && onRowClick ? () => onRowClick(row) : void 0,
+                    children: col.render(row)
+                  },
+                  col.key
+                );
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableCell, { "aria-hidden": true, className: "border-b" })
+            ]
+          },
+          id
+        );
+      }) })
+    ] }) }),
+    paginated && total > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 px-1 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Rows per page" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Select,
+          {
+            value: String(pageSize),
+            onValueChange: (v) => {
+              if (!v) return;
+              setPageSizeInner(Number(v));
+              setPage(0);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-label": "Rows per page", className: "h-8 w-[70px]", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: pageSizeOptions.map((n) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: String(n), children: n }, n)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tabular-nums whitespace-nowrap", children: [
+          pageStart + 1,
+          "\u2013",
+          Math.min(pageStart + pageSize, total),
+          " of ",
+          total
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setPage(safePage - 1),
+              disabled: safePage === 0,
+              "aria-label": "Previous page",
+              className: "inline-flex size-8 items-center justify-center rounded-md border bg-background hover:bg-muted disabled:pointer-events-none disabled:opacity-40",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setPage(safePage + 1),
+              disabled: safePage >= pageCount - 1,
+              "aria-label": "Next page",
+              className: "inline-flex size-8 items-center justify-center rounded-md border bg-background hover:bg-muted disabled:pointer-events-none disabled:opacity-40",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
 function DropdownMenu(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
 }
@@ -1955,47 +2789,406 @@ function FieldSeparator({
             "data-slot": "field-separator-content",
             children
           }
-        )
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = React3.useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsxRuntime.jsx("li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("text-sm font-normal text-destructive", className),
+      ...props,
+      children: content
+    }
+  );
+}
+function CheckIndicator({ checked }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors",
+        checked ? "border-primary bg-primary text-primary-foreground" : "border-input"
+      ),
+      children: checked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3.5" })
+    }
+  );
+}
+function FilterBar({
+  search,
+  onSearchChange,
+  searchPlaceholder = "Search by name\u2026",
+  showSearch = true,
+  facets = [],
+  values = {},
+  onValuesChange,
+  resultCount,
+  resultNoun = "result",
+  maxVisibleFacets = 3,
+  right,
+  left,
+  filterVariant = "inline",
+  className
+}) {
+  const visibleFacets = facets.slice(0, maxVisibleFacets);
+  const overflowFacets = facets.slice(maxVisibleFacets);
+  const toggle = (key, value) => {
+    const cur = values[key] ?? [];
+    const next = cur.includes(value) ? cur.filter((v) => v !== value) : [...cur, value];
+    onValuesChange?.({ ...values, [key]: next });
+  };
+  const clearAll = () => onValuesChange?.({});
+  const activeCount = Object.values(values).reduce((n, a) => n + a.length, 0);
+  const searchBox = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-56", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        value: search,
+        onChange: (e) => onSearchChange(e.target.value),
+        placeholder: searchPlaceholder,
+        "aria-label": searchPlaceholder,
+        className: "rounded-full bg-background pl-8 pr-8"
+      }
+    ),
+    search && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSearchChange(""),
+        "aria-label": "Clear search",
+        className: "absolute right-2 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    left,
+    filterVariant === "inline" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      showSearch && searchBox,
+      visibleFacets.map((facet) => /* @__PURE__ */ jsxRuntime.jsx(
+        FacetDropdown,
+        {
+          facet,
+          selected: values[facet.key] ?? [],
+          onToggle: (value) => toggle(facet.key, value),
+          onClear: () => onValuesChange?.({ ...values, [facet.key]: [] })
+        },
+        facet.key
+      )),
+      overflowFacets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        MoreFilters,
+        {
+          facets: overflowFacets,
+          values,
+          onToggle: toggle
+        }
+      ),
+      activeCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: clearAll,
+          "aria-label": "Clear all filters",
+          className: "inline-flex h-7 items-center gap-1 px-2 text-xs text-muted-foreground hover:text-foreground",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" }),
+            activeCount
+          ]
+        }
+      )
+    ] }),
+    filterVariant === "funnel" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      showSearch && searchBox,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FunnelFilter,
+        {
+          facets,
+          values,
+          onToggle: toggle,
+          onClearAll: clearAll
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+      typeof resultCount === "number" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "whitespace-nowrap text-sm text-muted-foreground", children: [
+        resultCount,
+        " ",
+        resultNoun,
+        resultCount === 1 ? "" : "s"
+      ] }),
+      right
+    ] })
+  ] }) });
+}
+function FacetDropdown({
+  facet,
+  selected,
+  onToggle,
+  onClear
+}) {
+  const count = selected.length;
+  const firstLabel = facet.options.find((o) => o.value === selected[0])?.label ?? selected[0];
+  const summary = count === 0 ? facet.label : `${facet.label}: ${firstLabel}${count > 1 ? ` (+${count - 1})` : ""}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverTrigger,
+      {
+        render: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "inline-flex h-7 max-w-[14rem] items-center gap-1 rounded-full border bg-background px-2.5 text-xs transition-colors",
+              count > 0 ? "border-primary/40 bg-primary/5 text-foreground" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: summary }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-3 shrink-0 opacity-60" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverContent,
+      {
+        className: "w-60 p-0",
+        align: "start",
+        "aria-label": `${facet.label} options`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+          facet.options.length > 6 && /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: `Search ${facet.label.toLowerCase()}\u2026` }),
+          /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No options." }),
+            /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: facet.options.map((opt) => {
+              const checked = selected.includes(opt.value);
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                CommandItem,
+                {
+                  value: opt.label,
+                  onSelect: () => onToggle(opt.value),
+                  className: "gap-2.5",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(CheckIndicator, { checked }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: opt.label }),
+                    checked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "selected" })
+                  ]
+                },
+                opt.value
+              );
+            }) })
+          ] }),
+          count > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              onClick: onClear,
+              className: "w-full justify-center text-primary",
+              children: "Clear"
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+}
+function FunnelFilter({
+  facets,
+  values,
+  onToggle,
+  onClearAll
+}) {
+  const [open, setOpen] = React3.useState(false);
+  const [drill, setDrill] = React3.useState(null);
+  const activeCount = Object.values(values).reduce((n, a) => n + a.length, 0);
+  const facet = facets.find((f) => f.key === drill);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: (o) => {
+        setOpen(o);
+        if (!o) setDrill(null);
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PopoverTrigger,
+          {
+            render: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "inline-flex h-9 items-center gap-1.5 rounded-md border bg-background px-3 text-sm transition-colors",
+                  activeCount > 0 ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilter, { className: "size-4" }),
+                  "Filter",
+                  activeCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "ml-0.5 h-5 bg-primary px-1.5 text-primary-foreground", children: activeCount })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-64 p-1", align: "end", "aria-label": "Filters", children: !facet ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Add filter" }),
+          facets.map((f) => {
+            const count = values[f.key]?.length ?? 0;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setDrill(f.key),
+                className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted/60",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: f.label }),
+                  count > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-primary", children: count }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-3.5 opacity-50" })
+                ]
+              },
+              f.key
+            );
+          }),
+          activeCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClearAll,
+                className: "w-full rounded-md px-2 py-1.5 text-left text-sm text-muted-foreground hover:bg-muted/60",
+                children: "Clear all filters"
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setDrill(null),
+              className: "flex w-full items-center gap-1 rounded-md px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-muted/60",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-3.5" }),
+                facet.label
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-64 overflow-y-auto", children: facet.options.map((opt) => {
+            const checked = (values[facet.key] ?? []).includes(opt.value);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onToggle(facet.key, opt.value),
+                className: "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted/60",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex size-4 shrink-0 items-center justify-center rounded border",
+                        checked ? "border-primary bg-primary text-primary-foreground" : "border-input"
+                      ),
+                      children: checked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: opt.label })
+                ]
+              },
+              opt.value
+            );
+          }) })
+        ] }) })
       ]
     }
   );
 }
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
+function MoreFilters({
+  facets,
+  values,
+  onToggle
 }) {
-  const content = React3.useMemo(() => {
-    if (children) {
-      return children;
-    }
-    if (!errors?.length) {
-      return null;
-    }
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values()
-    ];
-    if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
-      (error, index) => error?.message && /* @__PURE__ */ jsxRuntime.jsx("li", { children: error.message }, index)
-    ) });
-  }, [children, errors]);
-  if (!content) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "alert",
-      "data-slot": "field-error",
-      className: cn("text-sm font-normal text-destructive", className),
-      ...props,
-      children: content
-    }
+  const activeCount = facets.reduce(
+    (n, f) => n + (values[f.key]?.length ?? 0),
+    0
   );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverTrigger,
+      {
+        render: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "inline-flex h-7 items-center gap-1 rounded-full border bg-background px-2.5 text-xs transition-colors",
+              activeCount > 0 ? "border-primary/40 bg-primary/5 text-foreground" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilter, { className: "size-3.5" }),
+              "More",
+              activeCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "ml-0.5 h-4 bg-primary px-1.5 text-primary-foreground", children: activeCount })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-64 p-0", align: "start", "aria-label": "Filters", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+      facets.reduce((n, f) => n + f.options.length, 0) > 8 && /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: "Search filters\u2026" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { className: "max-h-[60vh]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No filters." }),
+        facets.map((facet) => /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { heading: facet.label, children: facet.options.map((opt) => {
+          const checked = (values[facet.key] ?? []).includes(opt.value);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            CommandItem,
+            {
+              value: `${facet.label} ${opt.label}`,
+              onSelect: () => onToggle(facet.key, opt.value),
+              className: "gap-2.5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CheckIndicator, { checked }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: opt.label }),
+                checked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "selected" })
+              ]
+            },
+            opt.value
+          );
+        }) }, facet.key))
+      ] })
+    ] }) })
+  ] });
 }
 function PackagePicker({
   packages,
@@ -2963,75 +4156,6 @@ function PersonDropdown({
     }
   );
 }
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    popover.Popover.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        popover.Popover.Popup,
-        {
-          "data-slot": "popover-content",
-          className: cn(
-            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  ) });
-}
-function PopoverHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "popover-header",
-      className: cn("flex flex-col gap-0.5 text-sm", className),
-      ...props
-    }
-  );
-}
-function PopoverTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    popover.Popover.Title,
-    {
-      "data-slot": "popover-title",
-      className: cn("font-medium", className),
-      ...props
-    }
-  );
-}
-function PopoverDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    popover.Popover.Description,
-    {
-      "data-slot": "popover-description",
-      className: cn("text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 function ScrollArea({
   className,
   children,
@@ -4215,7 +5339,7 @@ function SheetContent({
         "data-slot": "sheet-content",
         "data-side": side,
         className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "fixed z-50 flex flex-col gap-4 border-border bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
           className
         ),
         ...props,
@@ -5258,108 +6382,6 @@ function Switch({
     }
   );
 }
-function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "table-container",
-      className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "table",
-        {
-          "data-slot": "table",
-          className: cn("w-full caption-bottom text-sm", className),
-          ...props
-        }
-      )
-    }
-  );
-}
-function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "thead",
-    {
-      "data-slot": "table-header",
-      className: cn("[&_tr]:border-b", className),
-      ...props
-    }
-  );
-}
-function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tbody",
-    {
-      "data-slot": "table-body",
-      className: cn("[&_tr:last-child]:border-0", className),
-      ...props
-    }
-  );
-}
-function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tfoot",
-    {
-      "data-slot": "table-footer",
-      className: cn(
-        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tr",
-    {
-      "data-slot": "table-row",
-      className: cn(
-        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "th",
-    {
-      "data-slot": "table-head",
-      className: cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "td",
-    {
-      "data-slot": "table-cell",
-      className: cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function TableCaption({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "caption",
-    {
-      "data-slot": "table-caption",
-      className: cn("mt-4 text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 function Tabs({
   className,
   orientation = "horizontal",
@@ -5471,6 +6493,8 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.ColumnCustomizer = ColumnCustomizer;
+exports.ColumnPicker = ColumnPicker;
 exports.Command = Command;
 exports.CommandDialog = CommandDialog;
 exports.CommandEmpty = CommandEmpty;
@@ -5480,6 +6504,7 @@ exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
 exports.CommandSeparator = CommandSeparator;
 exports.CommandShortcut = CommandShortcut;
+exports.DataTable = DataTable;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
@@ -5514,6 +6539,7 @@ exports.FieldLegend = FieldLegend;
 exports.FieldSeparator = FieldSeparator;
 exports.FieldSet = FieldSet;
 exports.FieldTitle = FieldTitle;
+exports.FilterBar = FilterBar;
 exports.InlineAddonPicker = InlineAddonPicker;
 exports.InlineSessionPicker = InlineSessionPicker;
 exports.Input = Input;