@kanzo-tech/ui 0.0.1-alpha

package/dist/table/data-table-content.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import { flexRender as i } from "@tanstack/react-table";
+import { cn as C } from "../lib/cn.js";
+import { Table as T, TableHeader as D, TableRow as n, TableHead as v, TableBody as w, TableCell as d, TableFooter as y } from "../simples/table.js";
+import { useDataTableContext as k } from "./data-table-root.js";
+const H = (a) => a ? "overflow-clip" : "overflow-hidden";
+function j(a) {
+  const {
+    empty: u = "No results.",
+    onRowClick: l,
+    className: f,
+    stickyHeader: c = !1,
+    maxHeight: s,
+    ...h
+  } = a, r = k(), p = c && s === void 0, m = r.getRowModel().rows, b = r.getVisibleLeafColumns().length || 1, g = r.getFooterGroups().some((o) => o.headers.some((e) => e.column.columnDef.footer));
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: C(H(p), "rounded-lg border border-border", f),
+      "data-slot": "data-table-content",
+      children: /* @__PURE__ */ x(T, { maxHeight: s, stickyHeader: c, ...h, children: [
+        /* @__PURE__ */ t(D, { children: r.getHeaderGroups().map((o) => /* @__PURE__ */ t(n, { children: o.headers.map((e) => /* @__PURE__ */ t(v, { children: e.isPlaceholder ? null : i(e.column.columnDef.header, e.getContext()) }, e.id)) }, o.id)) }),
+        /* @__PURE__ */ t(w, { children: m.length ? m.map((o) => /* @__PURE__ */ t(
+          n,
+          {
+            className: l ? "cursor-pointer" : void 0,
+            "data-state": o.getIsSelected() ? "selected" : void 0,
+            onClick: l ? () => l(o.original) : void 0,
+            onKeyDown: l ? (e) => {
+              e.target === e.currentTarget && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), l(o.original)));
+            } : void 0,
+            tabIndex: l ? 0 : void 0,
+            children: o.getVisibleCells().map((e) => /* @__PURE__ */ t(d, { children: i(e.column.columnDef.cell, e.getContext()) }, e.id))
+          },
+          o.id
+        )) : /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
+          d,
+          {
+            className: "h-24 whitespace-normal text-center text-muted-foreground",
+            colSpan: b,
+            children: u
+          }
+        ) }) }),
+        g && /* @__PURE__ */ t(y, { children: r.getFooterGroups().map((o) => /* @__PURE__ */ t(n, { children: o.headers.map((e) => /* @__PURE__ */ t(d, { children: e.isPlaceholder ? null : i(e.column.columnDef.footer, e.getContext()) }, e.id)) }, o.id)) })
+      ] })
+    }
+  );
+}
+export {
+  j as DataTableContent
+};
+//# sourceMappingURL=data-table-content.js.map

package/dist/table/data-table-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-content.js","sources":["../../src/table/data-table-content.tsx"],"sourcesContent":["\"use client\";\n\nimport { flexRender } from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../simples/table.js\";\nimport { useDataTableContext } from \"./data-table-root.js\";\n\nexport interface DataTableContentProps<TData = unknown>\n  extends Omit<React.ComponentProps<typeof Table>, \"children\"> {\n  /** Shown in place of the body when there are no rows. */\n  empty?: React.ReactNode;\n  /** Row activation. Cells that stop propagation still win. */\n  onRowClick?: (row: TData) => void;\n  /** Applied to the bordered box; the remaining props reach the `<table>`. */\n  className?: string;\n}\n\n/**\n * `clip` rather than `hidden`, but only when the header pins to the ENCLOSING region: `hidden`\n * makes this box a scroll container, so a sticky `th` would pin to it instead of to whatever\n * scrolls. `clip` still clips the rounded corners without being one, so the stickiness passes\n * through. Given a `maxHeight` the wrapper inside is the scroll container, and this box is back to\n * being nothing but a border.\n */\nconst boxOverflow = (regionScrolled: boolean) =>\n  regionScrolled ? \"overflow-clip\" : \"overflow-hidden\";\n\n/**\n * ARIA contract for `onRowClick`: a `<tr>` is not an interactive role, so the row is made\n * reachable (`tabIndex=0`) and activatable (Enter/Space) rather than being a mouse-only\n * target. Activation is ignored when the key lands on a control inside the row, which keeps\n * a button or checkbox cell behaving as itself.\n */\nexport function DataTableContent<TData = unknown>(props: DataTableContentProps<TData>) {\n  const {\n    empty = \"No results.\",\n    onRowClick,\n    className,\n    stickyHeader = false,\n    maxHeight,\n    ...rest\n  } = props;\n  const table = useDataTableContext<TData>();\n  const regionScrolled = stickyHeader && maxHeight === undefined;\n\n  const rows = table.getRowModel().rows;\n  const colSpan = table.getVisibleLeafColumns().length || 1;\n  const hasFooter = table\n    .getFooterGroups()\n    .some((group) => group.headers.some((header) => header.column.columnDef.footer));\n\n  return (\n    <div\n      className={cn(boxOverflow(regionScrolled), \"rounded-lg border border-border\", className)}\n      data-slot=\"data-table-content\"\n    >\n      <Table maxHeight={maxHeight} stickyHeader={stickyHeader} {...rest}>\n        <TableHeader>\n          {table.getHeaderGroups().map((group) => (\n            <TableRow key={group.id}>\n              {group.headers.map((header) => (\n                <TableHead key={header.id}>\n                  {header.isPlaceholder\n                    ? null\n                    : flexRender(header.column.columnDef.header, header.getContext())}\n                </TableHead>\n              ))}\n            </TableRow>\n          ))}\n        </TableHeader>\n\n        <TableBody>\n          {rows.length ? (\n            rows.map((row) => (\n              <TableRow\n                className={onRowClick ? \"cursor-pointer\" : undefined}\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n                onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n                onKeyDown={\n                  onRowClick\n                    ? (event) => {\n                        if (event.target !== event.currentTarget) return;\n                        if (event.key !== \"Enter\" && event.key !== \" \") return;\n                        event.preventDefault();\n                        onRowClick(row.original);\n                      }\n                    : undefined\n                }\n                tabIndex={onRowClick ? 0 : undefined}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell\n                className=\"h-24 whitespace-normal text-center text-muted-foreground\"\n                colSpan={colSpan}\n              >\n                {empty}\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n\n        {/* Only render a <tfoot> when a column actually defines a `footer` — TanStack's\n            getFooterGroups() always returns groups, so an unguarded map would emit an empty\n            footer row on every table. */}\n        {hasFooter && (\n          <TableFooter>\n            {table.getFooterGroups().map((group) => (\n              <TableRow key={group.id}>\n                {group.headers.map((header) => (\n                  <TableCell key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.footer, header.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableFooter>\n        )}\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAiCA;AASO;AACL;AAAM;AACI;AACR;AACA;AACe;AACf;AACG;AAWL;AACE;AAAC;AAAA;AACwF;AAC7E;AAGR;AAYA;AAKM;AAAC;AAAA;AAC4C;AACI;AAEQ;AAI/C;AAGuB;AAEzB;AAEqB;AAM1B;AAAA;AAlBQ;AAuBX;AAAC;AAAA;AACW;AACV;AAEC;AAAA;AAIT;AAkBE;AAEJ;AAAA;AAGN;;;;"}

package/dist/table/data-table-pagination.d.ts

@@ -0,0 +1,8 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+export interface DataTablePaginationProps extends React.ComponentProps<typeof ark.div> {
+    /** Offer a rows-per-page selector with these sizes. Omitted = no selector. */
+    pageSizes?: number[];
+}
+export declare const DataTablePagination: (props: DataTablePaginationProps) => React.JSX.Element | null;
+//# sourceMappingURL=data-table-pagination.d.ts.map

package/dist/table/data-table-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.d.ts","sourceRoot":"","sources":["../../src/table/data-table-pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACpF,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,6BA0DlE,CAAC"}

package/dist/table/data-table-pagination.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsxs as i, jsx as e, Fragment as d } from "react/jsx-runtime";
+import { ark as u } from "@ark-ui/react/factory";
+import { cn as f } from "../lib/cn.js";
+import { NativeSelect as h, NativeSelectOption as P } from "../simples/native-select.js";
+import { Pagination as v, PaginationPrevTrigger as x, PaginationNextTrigger as N, usePagination as b, PaginationItem as w, PaginationEllipsis as S } from "../simples/pagination.js";
+import { useDataTableContext as C } from "./data-table-root.js";
+const z = (l) => {
+  const { pageSizes: t, className: o, slot: c, ...m } = l, a = C(), { pageIndex: p, pageSize: s } = a.getState().pagination, r = a.getFilteredSelectedRowModel().rows.length, g = a.getPageCount() > 1;
+  return !g && r === 0 && !t ? null : /* @__PURE__ */ i(
+    u.div,
+    {
+      className: f("flex items-center gap-3", o),
+      ...m,
+      "data-slot": c ?? "data-table-pagination",
+      children: [
+        r > 0 && /* @__PURE__ */ i("span", { className: "text-muted-foreground text-sm", "data-slot": "data-table-selected-count", children: [
+          r,
+          " of ",
+          a.getFilteredRowModel().rows.length,
+          " row(s) selected."
+        ] }),
+        /* @__PURE__ */ i("div", { className: "ms-auto flex items-center gap-3", children: [
+          t && /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm", children: "Rows per page" }),
+            /* @__PURE__ */ e(
+              h,
+              {
+                "aria-label": "Rows per page",
+                onChange: (n) => a.setPageSize(Number(n.target.value)),
+                size: "sm",
+                value: s,
+                children: t.map((n) => /* @__PURE__ */ e(P, { value: n, children: n }, n))
+              }
+            )
+          ] }),
+          g && /* @__PURE__ */ i(
+            v,
+            {
+              count: a.getRowCount(),
+              onPageChange: (n) => a.setPageIndex(n.page - 1),
+              page: p + 1,
+              pageSize: s,
+              children: [
+                /* @__PURE__ */ e(x, {}),
+                /* @__PURE__ */ e(R, {}),
+                /* @__PURE__ */ e(N, {})
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+function R() {
+  const l = b();
+  return /* @__PURE__ */ e(d, { children: l.pages.map(
+    (t, o) => t.type === "page" ? /* @__PURE__ */ e(w, { type: "page", value: t.value, children: t.value }, t.value) : /* @__PURE__ */ e(S, { index: o }, `ellipsis-${o}`)
+  ) });
+}
+export {
+  z as DataTablePagination
+};
+//# sourceMappingURL=data-table-pagination.js.map

package/dist/table/data-table-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.js","sources":["../../src/table/data-table-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { NativeSelect, NativeSelectOption } from \"../simples/native-select.js\";\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationNextTrigger,\n  PaginationPrevTrigger,\n  usePagination,\n} from \"../simples/pagination.js\";\nimport { useDataTableContext } from \"./data-table-root.js\";\n\nexport interface DataTablePaginationProps extends React.ComponentProps<typeof ark.div> {\n  /** Offer a rows-per-page selector with these sizes. Omitted = no selector. */\n  pageSizes?: number[];\n}\n\nexport const DataTablePagination = (props: DataTablePaginationProps) => {\n  const { pageSizes, className, slot, ...rest } = props;\n  const table = useDataTableContext();\n\n  const { pageIndex, pageSize } = table.getState().pagination;\n  const selected = table.getFilteredSelectedRowModel().rows.length;\n  const multiPage = table.getPageCount() > 1;\n\n  // Nothing to page, nothing selected, no size selector: the row would be empty chrome.\n  if (!multiPage && selected === 0 && !pageSizes) return null;\n\n  return (\n    <ark.div\n      className={cn(\"flex items-center gap-3\", className)}\n      {...rest}\n      data-slot={slot ?? \"data-table-pagination\"}\n    >\n      {selected > 0 && (\n        <span className=\"text-muted-foreground text-sm\" data-slot=\"data-table-selected-count\">\n          {selected} of {table.getFilteredRowModel().rows.length} row(s) selected.\n        </span>\n      )}\n\n      <div className=\"ms-auto flex items-center gap-3\">\n        {pageSizes && (\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-muted-foreground text-sm\">Rows per page</span>\n            <NativeSelect\n              aria-label=\"Rows per page\"\n              onChange={(event) => table.setPageSize(Number(event.target.value))}\n              size=\"sm\"\n              value={pageSize}\n            >\n              {pageSizes.map((size) => (\n                <NativeSelectOption key={size} value={size}>\n                  {size}\n                </NativeSelectOption>\n              ))}\n            </NativeSelect>\n          </div>\n        )}\n\n        {/* Ark is 1-based, TanStack 0-based: page = pageIndex + 1 closes the loop. */}\n        {multiPage && (\n          <Pagination\n            count={table.getRowCount()}\n            onPageChange={(details) => table.setPageIndex(details.page - 1)}\n            page={pageIndex + 1}\n            pageSize={pageSize}\n          >\n            <PaginationPrevTrigger />\n            <DataTablePages />\n            <PaginationNextTrigger />\n          </Pagination>\n        )}\n      </div>\n    </ark.div>\n  );\n};\n\nfunction DataTablePages() {\n  const pagination = usePagination();\n\n  return (\n    <>\n      {pagination.pages.map((page, index) =>\n        page.type === \"page\" ? (\n          <PaginationItem key={page.value} type=\"page\" value={page.value}>\n            {page.value}\n          </PaginationItem>\n        ) : (\n          <PaginationEllipsis index={index} key={`ellipsis-${index}`} />\n        ),\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAqBO;AACL;AAQA;AAGE;AAAK;AAAJ;AACmD;AAC9C;AACe;AAElB;AAEI;AAAA;AAAS;AAAsC;AAAO;AACzD;AAIC;AAEG;AAA6D;AAC7D;AAAC;AAAA;AACY;AACsD;AAC5D;AACE;AAMN;AAAA;AAAA;AAEL;AAKA;AAAC;AAAA;AACc;AACiD;AAC5C;AAClB;AAEA;AAAuB;AACP;AACO;AAAA;AAAA;AAAA;AAG7B;AAAA;AAAA;AAGN;AAEA;AACE;AAEA;AAEsB;AAM8C;AAKtE;;;;"}

package/dist/table/data-table-root.d.ts

@@ -0,0 +1,10 @@
+import { ark } from '@ark-ui/react/factory';
+import { Table } from '@tanstack/react-table';
+import { default as React } from 'react';
+export interface DataTableRootProps<TData> extends React.ComponentProps<typeof ark.div> {
+    table: Table<TData>;
+}
+export declare function DataTableRoot<TData>(props: DataTableRootProps<TData>): React.JSX.Element;
+/** The table instance of the enclosing `DataTableRoot`, typed by the caller's row type. */
+export declare function useDataTableContext<TData = unknown>(): Table<TData>;
+//# sourceMappingURL=data-table-root.d.ts.map

package/dist/table/data-table-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-root.d.ts","sourceRoot":"","sources":["../../src/table/data-table-root.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,kBAAkB,CAAC,KAAK,CAAE,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACrF,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,qBAYpE;AAED,2FAA2F;AAC3F,wBAAgB,mBAAmB,CAAC,KAAK,GAAG,OAAO,KAAK,KAAK,CAAC,KAAK,CAAC,CAMnE"}

package/dist/table/data-table-root.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { ark as l } from "@ark-ui/react/factory";
+import { useContext as c, createContext as i } from "react";
+import { cn as m } from "../lib/cn.js";
+const a = i(null);
+function f(t) {
+  const { table: o, className: r, slot: n, ...s } = t;
+  return /* @__PURE__ */ e(a.Provider, { value: { table: o }, children: /* @__PURE__ */ e(l.div, { className: m("space-y-3", r), ...s, "data-slot": n ?? "data-table" }) });
+}
+function p() {
+  const t = c(a);
+  if (!t)
+    throw new Error("useDataTableContext must be used inside <DataTableRoot>");
+  return t.table;
+}
+export {
+  f as DataTableRoot,
+  p as useDataTableContext
+};
+//# sourceMappingURL=data-table-root.js.map

package/dist/table/data-table-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-root.js","sources":["../../src/table/data-table-root.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type { Table } from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\n// React contexts cannot be generic, so the row type is erased on the way in and restored by\n// the typed reader below. Both casts live here; no consumer ever sees the `unknown`.\nconst DataTableContext = createContext<{ table: Table<unknown> } | null>(null);\n\nexport interface DataTableRootProps<TData> extends React.ComponentProps<typeof ark.div> {\n  table: Table<TData>;\n}\n\nexport function DataTableRoot<TData>(props: DataTableRootProps<TData>) {\n  const { table, className, slot, ...rest } = props;\n\n  // Deliberately a fresh object per render, never memoised: TanStack keeps ONE table\n  // instance and mutates it, so a context value of `table` alone never changes identity and\n  // parts handed down as `children` (whose element reference React reuses) would keep\n  // rendering the state they first saw.\n  return (\n    <DataTableContext.Provider value={{ table: table as unknown as Table<unknown> }}>\n      <ark.div className={cn(\"space-y-3\", className)} {...rest} data-slot={slot ?? \"data-table\"} />\n    </DataTableContext.Provider>\n  );\n}\n\n/** The table instance of the enclosing `DataTableRoot`, typed by the caller's row type. */\nexport function useDataTableContext<TData = unknown>(): Table<TData> {\n  const context = useContext(DataTableContext);\n  if (!context) {\n    throw new Error(\"useDataTableContext must be used inside <DataTableRoot>\");\n  }\n  return context.table as unknown as Table<TData>;\n}\n"],"names":[],"mappings":";;;;;AAUA;AAMO;AACL;AAMA;AAKF;AAGO;AACL;AACA;AACE;AAEF;AACF;;;;;"}

package/dist/table/data-table-toolbar.d.ts

@@ -0,0 +1,44 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { Button } from '../simples/button.js';
+import { InputGroupInput } from '../simples/input-group.js';
+export declare const DataTableToolbar: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export interface DataTableSearchProps extends Omit<React.ComponentProps<typeof InputGroupInput>, "onChange" | "value"> {
+    /** Column id to filter on. Omit to drive the table's global filter instead. */
+    column?: string;
+}
+/** `className` sizes the input group (the visible box); everything else lands on the input. */
+export declare const DataTableSearch: (props: DataTableSearchProps) => React.JSX.Element;
+export interface DataTableFacetOption {
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    label?: React.ReactNode;
+    value: string;
+}
+export interface DataTableFacetFilterProps extends Omit<React.ComponentProps<typeof Button>, "children"> {
+    /** Column id. Its `filterFn` must be `facetFilterFn`. */
+    column: string;
+    /** Trigger label. Defaults to the column id. */
+    label?: React.ReactNode;
+    /**
+     * Values to offer. Defaults to every faceted value of the column. Ordering is not yours either
+     * way — `FacetFilter` draws the rows by label.
+     */
+    options?: DataTableFacetOption[];
+    /**
+     * Draw a filter field above the values. Honest here: TanStack facets the rows the table already
+     * holds, so the field searches every value the column has, not a fetched page of them.
+     *
+     * @default false
+     */
+    searchable?: boolean;
+}
+/** A `FacetFilter` over one column's faceted values: TanStack on one side, the listbox on the other. */
+export declare const DataTableFacetFilter: (props: DataTableFacetFilterProps) => React.JSX.Element;
+export interface DataTableViewOptionsProps extends Omit<React.ComponentProps<typeof Button>, "children"> {
+    /** Trigger label. Default "View". */
+    label?: React.ReactNode;
+}
+export declare const DataTableViewOptions: (props: DataTableViewOptionsProps) => React.JSX.Element;
+//# sourceMappingURL=data-table-toolbar.d.ts.map

package/dist/table/data-table-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-toolbar.d.ts","sourceRoot":"","sources":["../../src/table/data-table-toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAG5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAA+B,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAUzF,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAU3E,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChF,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,+FAA+F;AAC/F,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBA0B1D,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7D,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wGAAwG;AACxG,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,sBA4BpE,CAAC;AAEF,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7D,qCAAqC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAQD,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,sBA+BpE,CAAC"}

package/dist/table/data-table-toolbar.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import { ark as g } from "@ark-ui/react/factory";
+import { SearchIcon as C, Settings2Icon as v } from "lucide-react";
+import { cn as p } from "../lib/cn.js";
+import { Button as F } from "../simples/button.js";
+import { FacetFilter as V } from "../simples/FacetFilter.js";
+import { InputGroup as x, InputGroupAddon as D, InputGroupInput as I } from "../simples/input-group.js";
+import { Menu as T, MenuTrigger as S, MenuContent as M, MenuGroup as k, MenuCheckboxItem as w } from "../simples/menu.js";
+import { useDataTableContext as b } from "./data-table-root.js";
+const U = (l) => {
+  const { className: t, slot: s, ...r } = l;
+  return /* @__PURE__ */ a(
+    g.div,
+    {
+      className: p("flex items-center gap-2", t),
+      ...r,
+      "data-slot": s ?? "data-table-toolbar"
+    }
+  );
+}, E = (l) => {
+  const { column: t, className: s, placeholder: r = "Search…", ...u } = l, i = b(), e = t ? i.getColumn(t) : void 0, m = t ? (e == null ? void 0 : e.getFilterValue()) ?? "" : i.getState().globalFilter ?? "";
+  return /* @__PURE__ */ d(x, { className: p("h-8 max-w-xs", s), slot: "data-table-search", children: [
+    /* @__PURE__ */ a(D, { children: /* @__PURE__ */ a(C, {}) }),
+    /* @__PURE__ */ a(
+      I,
+      {
+        onChange: (o) => {
+          const c = o.target.value;
+          t ? e == null || e.setFilterValue(c) : i.setGlobalFilter(c);
+        },
+        placeholder: r,
+        value: m,
+        ...u
+      }
+    )
+  ] });
+}, J = (l) => {
+  const { column: t, label: s, options: r, searchable: u, slot: i, ...e } = l, o = b().getColumn(t), c = /* @__PURE__ */ new Map();
+  for (const [n, h] of (o == null ? void 0 : o.getFacetedUniqueValues()) ?? [])
+    c.set(String(n), h);
+  const f = (r ?? [...c.keys()].map((n) => ({ value: n }))).map((n) => ({
+    ...n,
+    count: c.get(n.value)
+  }));
+  return /* @__PURE__ */ a(
+    V,
+    {
+      ...e,
+      slot: i ?? "data-table-facet-filter",
+      items: f,
+      label: s ?? t,
+      onValueChange: (n) => o == null ? void 0 : o.setFilterValue(n.length ? n : void 0),
+      searchable: u,
+      value: (o == null ? void 0 : o.getFilterValue()) ?? []
+    }
+  );
+}, G = (l) => {
+  var t;
+  return ((t = l.columnDef.meta) == null ? void 0 : t.label) ?? (typeof l.columnDef.header == "string" ? l.columnDef.header : l.id);
+}, K = (l) => {
+  const { label: t = "View", slot: s, ...r } = l, i = b().getAllLeafColumns().filter((e) => e.getCanHide());
+  return /* @__PURE__ */ d(T, { children: [
+    /* @__PURE__ */ a(S, { asChild: !0, children: /* @__PURE__ */ d(F, { size: "sm", variant: "outline", ...r, slot: s ?? "data-table-view-options", children: [
+      /* @__PURE__ */ a(v, {}),
+      t
+    ] }) }),
+    /* @__PURE__ */ a(M, { children: /* @__PURE__ */ a(k, { heading: "Toggle columns", children: i.map((e) => /* @__PURE__ */ a(
+      w,
+      {
+        checked: e.getIsVisible(),
+        closeOnSelect: !1,
+        onCheckedChange: (m) => e.toggleVisibility(m),
+        value: e.id,
+        children: G(e)
+      },
+      e.id
+    )) }) })
+  ] });
+};
+export {
+  J as DataTableFacetFilter,
+  E as DataTableSearch,
+  U as DataTableToolbar,
+  K as DataTableViewOptions
+};
+//# sourceMappingURL=data-table-toolbar.js.map

package/dist/table/data-table-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-toolbar.js","sources":["../../src/table/data-table-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { SearchIcon, Settings2Icon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { Button } from \"../simples/button.js\";\nimport { FacetFilter, type FacetFilterItem } from \"../simples/FacetFilter.js\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"../simples/input-group.js\";\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuContent,\n  MenuGroup,\n  MenuTrigger,\n} from \"../simples/menu.js\";\nimport { useDataTableContext } from \"./data-table-root.js\";\n\nexport const DataTableToolbar = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"flex items-center gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"data-table-toolbar\"}\n    />\n  );\n};\n\nexport interface DataTableSearchProps\n  extends Omit<React.ComponentProps<typeof InputGroupInput>, \"onChange\" | \"value\"> {\n  /** Column id to filter on. Omit to drive the table's global filter instead. */\n  column?: string;\n}\n\n/** `className` sizes the input group (the visible box); everything else lands on the input. */\nexport const DataTableSearch = (props: DataTableSearchProps) => {\n  const { column, className, placeholder = \"Search…\", ...rest } = props;\n  const table = useDataTableContext();\n  const target = column ? table.getColumn(column) : undefined;\n\n  const value = column\n    ? ((target?.getFilterValue() as string | undefined) ?? \"\")\n    : ((table.getState().globalFilter as string | undefined) ?? \"\");\n\n  return (\n    <InputGroup className={cn(\"h-8 max-w-xs\", className)} slot=\"data-table-search\">\n      <InputGroupAddon>\n        <SearchIcon />\n      </InputGroupAddon>\n      <InputGroupInput\n        onChange={(event) => {\n          const next = event.target.value;\n          if (column) target?.setFilterValue(next);\n          else table.setGlobalFilter(next);\n        }}\n        placeholder={placeholder}\n        value={value}\n        {...rest}\n      />\n    </InputGroup>\n  );\n};\n\nexport interface DataTableFacetOption {\n  icon?: React.ComponentType<{ className?: string }>;\n  label?: React.ReactNode;\n  value: string;\n}\n\nexport interface DataTableFacetFilterProps\n  extends Omit<React.ComponentProps<typeof Button>, \"children\"> {\n  /** Column id. Its `filterFn` must be `facetFilterFn`. */\n  column: string;\n  /** Trigger label. Defaults to the column id. */\n  label?: React.ReactNode;\n  /**\n   * Values to offer. Defaults to every faceted value of the column. Ordering is not yours either\n   * way — `FacetFilter` draws the rows by label.\n   */\n  options?: DataTableFacetOption[];\n  /**\n   * Draw a filter field above the values. Honest here: TanStack facets the rows the table already\n   * holds, so the field searches every value the column has, not a fetched page of them.\n   *\n   * @default false\n   */\n  searchable?: boolean;\n}\n\n/** A `FacetFilter` over one column's faceted values: TanStack on one side, the listbox on the other. */\nexport const DataTableFacetFilter = (props: DataTableFacetFilterProps) => {\n  const { column, label, options, searchable, slot, ...rest } = props;\n  const table = useDataTableContext();\n  const target = table.getColumn(column);\n\n  // Facet keys are raw cell values; the filter carries strings, so both sides get stringified.\n  const counts = new Map<string, number>();\n  for (const [value, count] of target?.getFacetedUniqueValues() ?? []) {\n    counts.set(String(value), count);\n  }\n\n  const offered = options ?? [...counts.keys()].map((value) => ({ value }));\n  const items: FacetFilterItem[] = offered.map((option) => ({\n    ...option,\n    count: counts.get(option.value),\n  }));\n\n  return (\n    <FacetFilter\n      {...rest}\n      slot={slot ?? \"data-table-facet-filter\"}\n      items={items}\n      label={label ?? column}\n      onValueChange={(next) => target?.setFilterValue(next.length ? next : undefined)}\n      searchable={searchable}\n      value={(target?.getFilterValue() as string[] | undefined) ?? []}\n    />\n  );\n};\n\nexport interface DataTableViewOptionsProps\n  extends Omit<React.ComponentProps<typeof Button>, \"children\"> {\n  /** Trigger label. Default \"View\". */\n  label?: React.ReactNode;\n}\n\n// `meta.label` first, because a column with a `sortableHeader` has a component for a `header` and\n// would otherwise be listed by its raw id — exactly the column someone wants to hide.\nconst columnLabel = (column: Column<unknown, unknown>) =>\n  column.columnDef.meta?.label ??\n  (typeof column.columnDef.header === \"string\" ? column.columnDef.header : column.id);\n\nexport const DataTableViewOptions = (props: DataTableViewOptionsProps) => {\n  const { label = \"View\", slot, ...rest } = props;\n  const table = useDataTableContext();\n  const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());\n\n  return (\n    <Menu>\n      <MenuTrigger asChild>\n        <Button size=\"sm\" variant=\"outline\" {...rest} slot={slot ?? \"data-table-view-options\"}>\n          <Settings2Icon />\n          {label}\n        </Button>\n      </MenuTrigger>\n\n      <MenuContent>\n        <MenuGroup heading=\"Toggle columns\">\n          {columns.map((column) => (\n            <MenuCheckboxItem\n              checked={column.getIsVisible()}\n              closeOnSelect={false}\n              key={column.id}\n              onCheckedChange={(checked) => column.toggleVisibility(checked)}\n              value={column.id}\n            >\n              {columnLabel(column)}\n            </MenuCheckboxItem>\n          ))}\n        </MenuGroup>\n      </MenuContent>\n    </Menu>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAmBO;AACL;AAEA;AACE;AAAK;AAAJ;AACmD;AAC9C;AACe;AAAA;AAGzB;AAUE;AAQA;AAEI;AAEA;AACA;AAAC;AAAA;AAEG;AACA;AAC+B;AACjC;AACA;AACA;AACI;AAAA;AAAA;AAIZ;AA8BE;AAMA;AACE;AAIF;AAA0D;AACrD;AAC2B;AAGhC;AACE;AAAC;AAAA;AACK;AACU;AACd;AACgB;AACqD;AACrE;AAC6D;AAAC;AAGpE;;AAWE;AACgF;AAGhF;AAIA;AAEI;AAEI;AAAe;AACd;AAEL;AAKM;AAAC;AAAA;AACiB;AACD;AAE8C;AAC/C;AAEK;AAAA;AAJP;AAQpB;AAGN;;;;;;;"}

package/dist/table/select-column.d.ts

@@ -0,0 +1,16 @@
+import { ColumnDef, Row } from '@tanstack/react-table';
+export interface SelectColumnOptions<TData> {
+    /** aria-label for the header checkbox. */
+    headerLabel?: string;
+    /** Column id. Default "select". */
+    id?: string;
+    /** aria-label for a row checkbox. Default `Select row <n>`. */
+    rowLabel?: (row: Row<TData>) => string;
+}
+/**
+ * A leading checkbox column. The header reflects a partial page as `indeterminate`, and both
+ * checkboxes carry a real label — the visual column has no header text to borrow. The cell
+ * stops click propagation so it stays inert under `DataTableContent`'s `onRowClick`.
+ */
+export declare function selectColumn<TData>(options?: SelectColumnOptions<TData>): ColumnDef<TData, unknown>;
+//# sourceMappingURL=select-column.d.ts.map

package/dist/table/select-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-column.d.ts","sourceRoot":"","sources":["../../src/table/select-column.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAG5D,MAAM,WAAW,mBAAmB,CAAC,KAAK;IACxC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC;CACxC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAChC,OAAO,GAAE,mBAAmB,CAAC,KAAK,CAAM,GACvC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAoC3B"}

package/dist/table/select-column.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { Checkbox as a } from "../simples/checkbox.js";
+function g(c = {}) {
+  const {
+    headerLabel: o = "Select all rows on this page",
+    id: d = "select",
+    rowLabel: s = (e) => `Select row ${e.index + 1}`
+  } = c;
+  return {
+    cell: ({ row: e }) => /* @__PURE__ */ t(
+      a,
+      {
+        "aria-label": s(e),
+        checked: e.getIsSelected(),
+        slot: "data-table-select-row",
+        disabled: !e.getCanSelect(),
+        onCheckedChange: (l) => e.toggleSelected(l.checked === !0),
+        onClick: (l) => l.stopPropagation()
+      }
+    ),
+    enableHiding: !1,
+    enableSorting: !1,
+    header: ({ table: e }) => /* @__PURE__ */ t(
+      a,
+      {
+        "aria-label": o,
+        checked: e.getIsAllPageRowsSelected() ? !0 : e.getIsSomePageRowsSelected() ? "indeterminate" : !1,
+        slot: "data-table-select-all",
+        onCheckedChange: (l) => e.toggleAllPageRowsSelected(l.checked === !0)
+      }
+    ),
+    id: d
+  };
+}
+export {
+  g as selectColumn
+};
+//# sourceMappingURL=select-column.js.map

package/dist/table/select-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-column.js","sources":["../../src/table/select-column.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ColumnDef, Row } from \"@tanstack/react-table\";\nimport { Checkbox } from \"../simples/checkbox.js\";\n\nexport interface SelectColumnOptions<TData> {\n  /** aria-label for the header checkbox. */\n  headerLabel?: string;\n  /** Column id. Default \"select\". */\n  id?: string;\n  /** aria-label for a row checkbox. Default `Select row <n>`. */\n  rowLabel?: (row: Row<TData>) => string;\n}\n\n/**\n * A leading checkbox column. The header reflects a partial page as `indeterminate`, and both\n * checkboxes carry a real label — the visual column has no header text to borrow. The cell\n * stops click propagation so it stays inert under `DataTableContent`'s `onRowClick`.\n */\nexport function selectColumn<TData>(\n  options: SelectColumnOptions<TData> = {},\n): ColumnDef<TData, unknown> {\n  const {\n    headerLabel = \"Select all rows on this page\",\n    id = \"select\",\n    rowLabel = (row: Row<TData>) => `Select row ${row.index + 1}`,\n  } = options;\n\n  return {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label={rowLabel(row)}\n        checked={row.getIsSelected()}\n        slot=\"data-table-select-row\"\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(details) => row.toggleSelected(details.checked === true)}\n        onClick={(event) => event.stopPropagation()}\n      />\n    ),\n    enableHiding: false,\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label={headerLabel}\n        checked={\n          table.getIsAllPageRowsSelected()\n            ? true\n            : table.getIsSomePageRowsSelected()\n              ? \"indeterminate\"\n              : false\n        }\n        slot=\"data-table-select-all\"\n        onCheckedChange={(details) => table.toggleAllPageRowsSelected(details.checked === true)}\n      />\n    ),\n    id,\n  };\n}\n"],"names":[],"mappings":";;;AAmBO;AAGL;AAAM;AACU;AACT;AACsD;AAG7D;AAAO;AAEH;AAAC;AAAA;AACyB;AACX;AACR;AACU;AAC0D;AAC/C;AAAgB;AAAA;AAGhC;AACC;AAEb;AAAC;AAAA;AACa;AAMJ;AAEH;AACiF;AAAA;AAAA;AAG1F;AAEJ;;;;"}

package/dist/table/sortableHeader.d.ts

@@ -0,0 +1,25 @@
+import { HeaderContext } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+export interface SortableHeaderOptions {
+    /**
+     * Which edge the header hugs. Use `end` over end-aligned figures (`tabular-nums` money,
+     * counts) so the label sits above the digits. Logical: mirrors under RTL.
+     *
+     * @default "start"
+     */
+    align?: "start" | "end";
+}
+/**
+ * A sortable column header: a button that toggles the column's sort and shows the
+ * direction glyph.
+ *
+ * Sorting is opt-in PER COLUMN by using this helper for the header — a plain-string header
+ * stays inert even though TanStack marks every column sortable by default. This mirrors the
+ * 4 keasy call sites (`header: sortableHeader("Name")`) exactly, so adopting the DS table
+ * needs zero column-definition churn.
+ *
+ * `sortableHeader("Runs", { align: "end" })` puts it over an end-aligned numeric column without
+ * a wrapper; the cell's own alignment stays the caller's business.
+ */
+export declare function sortableHeader<TData, TValue>(label: ReactNode, { align }?: SortableHeaderOptions): ({ column }: HeaderContext<TData, TValue>) => import("react").JSX.Element;
+//# sourceMappingURL=sortableHeader.d.ts.map

package/dist/table/sortableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortableHeader.d.ts","sourceRoot":"","sources":["../../src/table/sortableHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBvC,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AASD;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAC1C,KAAK,EAAE,SAAS,EAChB,EAAE,KAAe,EAAE,GAAE,qBAA0B,IAEhB,YAAY,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,iCAcxE"}

package/dist/table/sortableHeader.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { ChevronUpIcon as s, ChevronDownIcon as i, ChevronsUpDownIcon as d } from "lucide-react";
+import { tv as c } from "tailwind-variants";
+import { cn as o } from "../lib/cn.js";
+const l = c({
+  base: "inline-flex h-7 items-center gap-1 rounded-md px-1 font-medium text-muted-foreground transition-colors hover:text-foreground",
+  variants: {
+    align: {
+      start: "-ms-1",
+      // `w-full` is what makes the header hug the column's trailing edge: the cell is as wide
+      // as the column, the button is not, so without it `justify-end` has nothing to push against.
+      end: "-me-1 w-full justify-end"
+    }
+  },
+  defaultVariants: { align: "start" }
+});
+function f({ dir: e }) {
+  const t = "size-3.5 shrink-0";
+  return e === "asc" ? /* @__PURE__ */ r(s, { className: o(t, "text-foreground") }) : e === "desc" ? /* @__PURE__ */ r(i, { className: o(t, "text-foreground") }) : /* @__PURE__ */ r(d, { className: o(t, "opacity-50") });
+}
+function x(e, { align: t = "start" } = {}) {
+  return function({ column: n }) {
+    return /* @__PURE__ */ a(
+      "button",
+      {
+        className: o(l({ align: t })),
+        "data-align": t,
+        "data-slot": "sortable-header",
+        onClick: () => n.toggleSorting(n.getIsSorted() === "asc"),
+        type: "button",
+        children: [
+          e,
+          /* @__PURE__ */ r(f, { dir: n.getIsSorted() })
+        ]
+      }
+    );
+  };
+}
+export {
+  x as sortableHeader
+};
+//# sourceMappingURL=sortableHeader.js.map

package/dist/table/sortableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortableHeader.js","sources":["../../src/table/sortableHeader.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HeaderContext } from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn.js\";\n\nconst sortableHeaderVariants = tv({\n  base: \"inline-flex h-7 items-center gap-1 rounded-md px-1 font-medium text-muted-foreground transition-colors hover:text-foreground\",\n  variants: {\n    align: {\n      start: \"-ms-1\",\n      // `w-full` is what makes the header hug the column's trailing edge: the cell is as wide\n      // as the column, the button is not, so without it `justify-end` has nothing to push against.\n      end: \"-me-1 w-full justify-end\",\n    },\n  },\n  defaultVariants: { align: \"start\" },\n});\n\nexport interface SortableHeaderOptions {\n  /**\n   * Which edge the header hugs. Use `end` over end-aligned figures (`tabular-nums` money,\n   * counts) so the label sits above the digits. Logical: mirrors under RTL.\n   *\n   * @default \"start\"\n   */\n  align?: \"start\" | \"end\";\n}\n\nfunction SortGlyph({ dir }: { dir: false | \"asc\" | \"desc\" }) {\n  const cls = \"size-3.5 shrink-0\";\n  if (dir === \"asc\") return <ChevronUpIcon className={cn(cls, \"text-foreground\")} />;\n  if (dir === \"desc\") return <ChevronDownIcon className={cn(cls, \"text-foreground\")} />;\n  return <ChevronsUpDownIcon className={cn(cls, \"opacity-50\")} />;\n}\n\n/**\n * A sortable column header: a button that toggles the column's sort and shows the\n * direction glyph.\n *\n * Sorting is opt-in PER COLUMN by using this helper for the header — a plain-string header\n * stays inert even though TanStack marks every column sortable by default. This mirrors the\n * 4 keasy call sites (`header: sortableHeader(\"Name\")`) exactly, so adopting the DS table\n * needs zero column-definition churn.\n *\n * `sortableHeader(\"Runs\", { align: \"end\" })` puts it over an end-aligned numeric column without\n * a wrapper; the cell's own alignment stays the caller's business.\n */\nexport function sortableHeader<TData, TValue>(\n  label: ReactNode,\n  { align = \"start\" }: SortableHeaderOptions = {},\n) {\n  return function SortableHeader({ column }: HeaderContext<TData, TValue>) {\n    return (\n      <button\n        className={cn(sortableHeaderVariants({ align }))}\n        data-align={align}\n        data-slot=\"sortable-header\"\n        onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n        type=\"button\"\n      >\n        {label}\n        <SortGlyph dir={column.getIsSorted()} />\n      </button>\n    );\n  };\n}\n"],"names":[],"mappings":";;;;;AAYA;AAAkC;AAC1B;AACI;AACD;AACE;AAAA;AAAA;AAGF;AAAA;AACP;AAGJ;AAYA;AACE;AACA;AAGF;AAcO;AAIL;AACE;AACE;AAAC;AAAA;AACgD;AACnC;AACF;AACwD;AAC7D;AAEJ;AAAA;AACqC;AAAA;AAAA;AAAA;AAI9C;;;;"}

package/dist/table/use-data-table.d.ts

@@ -0,0 +1,40 @@
+import { ColumnDef, ColumnFiltersState, Row, RowData, RowSelectionState, SortingState, Table, TableOptions, VisibilityState } from '@tanstack/react-table';
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        label?: string;
+    }
+}
+export interface UseDataTableOptions<TData, TValue = unknown> extends Omit<Partial<TableOptions<TData>>, "columns" | "data"> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    initialColumnFilters?: ColumnFiltersState;
+    initialColumnVisibility?: VisibilityState;
+    initialGlobalFilter?: string;
+    /** Zero-based first page, for deep-linking into a table. Default 0. */
+    initialPage?: number;
+    initialRowSelection?: RowSelectionState;
+    initialSorting?: SortingState;
+    /** Rows per page. Default 20. */
+    pageSize?: number;
+}
+/**
+ * `useReactTable` with every row model wired, the filter/sort/visibility/selection slices
+ * held as state, and everything else passed straight through — including `manualPagination`
+ * / `manualSorting` / `manualFiltering` + `rowCount` for server-driven tables, where the
+ * matching row model steps aside on its own.
+ *
+ * Every slice lives in `useState` and is never derived during render. That is load-bearing,
+ * not style: handing TanStack a fresh `columnFilters` array on each render makes the
+ * filtered row model always look stale, recomputing it trips `autoReset*`, which resets the
+ * page index → re-render → new identity → an infinite loop that hard-freezes the tab. React
+ * never reports it, because the cycle runs through the table's own `onStateChange` rather
+ * than a setState during render, so there is no "maximum update depth" error to catch.
+ */
+export declare function useDataTable<TData, TValue = unknown>(options: UseDataTableOptions<TData, TValue>): Table<TData>;
+/**
+ * Column `filterFn` for `DataTableFacetFilter`: keeps rows whose value is one of the
+ * selected facets. TanStack's built-in `arrIncludesSome` expects the *cell* to be the
+ * array, and on a scalar cell degrades to substring matching ("inactive" matches "active").
+ */
+export declare function facetFilterFn<TData>(row: Row<TData>, columnId: string, filterValue: unknown): boolean;
+//# sourceMappingURL=use-data-table.d.ts.map

package/dist/table/use-data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table.d.ts","sourceRoot":"","sources":["../../src/table/use-data-table.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,kBAAkB,EAGvB,KAAK,GAAG,EACR,KAAK,OAAO,EACZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,KAAK,EACV,KAAK,YAAY,EACjB,KAAK,eAAe,EAQrB,MAAM,uBAAuB,CAAC;AAM/B,OAAO,QAAQ,uBAAuB,CAAC;IAIrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB;CACF;AAED,MAAM,WAAW,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAC1D,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC9D,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACpC,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,oBAAoB,CAAC,EAAE,kBAAkB,CAAC;IAC1C,uBAAuB,CAAC,EAAE,eAAe,CAAC;IAC1C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;IACxC,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAUD;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAClD,OAAO,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,CAAC,GAC1C,KAAK,CAAC,KAAK,CAAC,CAuDd;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EACjC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,OAAO,GACnB,OAAO,CAIT"}

package/dist/table/use-data-table.js

@@ -0,0 +1,65 @@
+"use client";
+import { useReactTable as U, getSortedRowModel as z, getPaginationRowModel as D, getFilteredRowModel as I, getFacetedUniqueValues as O, getFacetedRowModel as j, getCoreRowModel as k } from "@tanstack/react-table";
+import { useState as o } from "react";
+function i(n, t) {
+  return (e) => {
+    n(e), t == null || t(e);
+  };
+}
+function H(n) {
+  const {
+    columns: t,
+    data: e,
+    initialColumnFilters: l = [],
+    initialColumnVisibility: a = {},
+    initialGlobalFilter: g = "",
+    initialPage: r = 0,
+    initialRowSelection: s = {},
+    initialSorting: c = [],
+    onColumnFiltersChange: u,
+    onColumnVisibilityChange: C,
+    onGlobalFilterChange: d,
+    onPaginationChange: F,
+    onRowSelectionChange: m,
+    onSortingChange: w,
+    pageSize: R = 20,
+    state: S,
+    ...h
+  } = n, [b, M] = o(c), [y, P] = o(l), [V, f] = o(a), [p, G] = o(s), [q, v] = o(g), [A, T] = o({ pageIndex: r, pageSize: R });
+  return U({
+    getCoreRowModel: k(),
+    getFacetedRowModel: j(),
+    getFacetedUniqueValues: O(),
+    getFilteredRowModel: I(),
+    getPaginationRowModel: D(),
+    getSortedRowModel: z(),
+    ...h,
+    columns: t,
+    data: e,
+    onColumnFiltersChange: i(P, u),
+    onColumnVisibilityChange: i(f, C),
+    onGlobalFilterChange: i(v, d),
+    onPaginationChange: i(T, F),
+    onRowSelectionChange: i(G, m),
+    onSortingChange: i(M, w),
+    state: {
+      columnFilters: y,
+      columnVisibility: V,
+      globalFilter: q,
+      pagination: A,
+      rowSelection: p,
+      sorting: b,
+      ...S
+    }
+  });
+}
+function J(n, t, e) {
+  if (!Array.isArray(e) || e.length === 0) return !0;
+  const l = String(n.getValue(t));
+  return e.some((a) => String(a) === l);
+}
+export {
+  J as facetFilterFn,
+  H as useDataTable
+};
+//# sourceMappingURL=use-data-table.js.map