@zyncat/ui 0.8.0

package/dist/table.js

@@ -0,0 +1,262 @@
+'use client';import { useScrollEdges } from './chunk-BIDVNLJO.js';
+import { Motion } from './chunk-36WVAQKL.js';
+import './chunk-W3SHPKSB.js';
+import './chunk-JSKXZMLH.js';
+import './chunk-L3Q3VDIW.js';
+import { Icon } from './chunk-3SBCBYB7.js';
+import { Odometer } from './chunk-CONSWNIV.js';
+import { UIMotion } from './chunk-S5ZTZANS.js';
+import { Button } from './chunk-U5QQZC3U.js';
+import { Checkbox } from './chunk-QDK66S4G.js';
+import './chunk-NNXJCLTV.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './table.css';
+import { useState, useRef, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function tblCompare(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+function Table({
+  columns = [],
+  rows = [],
+  rowKey = "id",
+  ariaLabel,
+  selectable = false,
+  onSelectionChange,
+  bulkActions,
+  selectionLabel,
+  defaultSort = null,
+  onSortChange,
+  density = "cozy",
+  pinFirst = true,
+  loading = false,
+  empty,
+  footer,
+  onRowClick,
+  className = "",
+  htmlProps
+}) {
+  const [sort, setSort] = useState(defaultSort);
+  const [selected, setSelected] = useState(() => /* @__PURE__ */ new Set());
+  const wrapRef = useRef(null);
+  const scrollRef = useRef(null);
+  const lastIdxRef = useRef(-1);
+  const shiftRef = useRef(false);
+  const lastCountRef = useRef(0);
+  const keyOf = (row) => row[rowKey];
+  const sortedRows = useMemo(() => {
+    if (!sort) return rows;
+    const col = columns.find((c) => c.key === sort.key);
+    if (!col) return rows;
+    const get = typeof col.sortBy === "function" ? col.sortBy : col.sortBy ? (r) => r[col.sortBy] : (r) => r[col.key];
+    const dir = sort.dir === "desc" ? -1 : 1;
+    return rows.slice().sort((a, b) => dir * tblCompare(get(a), get(b)));
+  }, [rows, columns, sort]);
+  function cycleSort(col) {
+    const next = sort && sort.key === col.key ? { key: col.key, dir: sort.dir === "asc" ? "desc" : "asc" } : { key: col.key, dir: "asc" };
+    setSort(next);
+    if (onSortChange) onSortChange(next);
+  }
+  const allSelected = sortedRows.length > 0 && sortedRows.every((r) => selected.has(keyOf(r)));
+  const someSelected = selected.size > 0 && !allSelected;
+  function commitSelection(next) {
+    setSelected(next);
+    if (onSelectionChange) onSelectionChange(Array.from(next));
+  }
+  function clearSelection() {
+    lastIdxRef.current = -1;
+    commitSelection(/* @__PURE__ */ new Set());
+  }
+  function toggleAll() {
+    const next = /* @__PURE__ */ new Set();
+    if (!allSelected) sortedRows.forEach((r) => next.add(keyOf(r)));
+    commitSelection(next);
+  }
+  function toggleRow(idx) {
+    const next = new Set(selected);
+    const on = !next.has(keyOf(sortedRows[idx]));
+    if (shiftRef.current && lastIdxRef.current >= 0 && lastIdxRef.current !== idx) {
+      const lo = Math.min(lastIdxRef.current, idx);
+      const hi = Math.max(lastIdxRef.current, idx);
+      for (let i = lo; i <= hi; i++) {
+        const k = keyOf(sortedRows[i]);
+        if (on) next.add(k);
+        else next.delete(k);
+      }
+    } else if (on) {
+      next.add(keyOf(sortedRows[idx]));
+    } else {
+      next.delete(keyOf(sortedRows[idx]));
+    }
+    lastIdxRef.current = idx;
+    shiftRef.current = false;
+    commitSelection(next);
+  }
+  useScrollEdges(
+    scrollRef,
+    (edges, el) => {
+      const w = wrapRef.current;
+      if (!w) return;
+      const set = (attr, on) => {
+        if (on) w.setAttribute(attr, "");
+        else w.removeAttribute(attr);
+      };
+      set("data-scrolled", el.scrollTop > 0);
+      set("data-x-back", edges.left);
+      set("data-x-more", edges.right);
+    },
+    { content: true }
+  );
+  function cellMods(col, i) {
+    const a = [];
+    if (col.align === "end") a.push("tbl__cell--end");
+    if (col.align === "center") a.push("tbl__cell--center");
+    if (col.grow) a.push("tbl__cell--grow");
+    if (col.hideBelow) a.push("tbl__cell--hide-" + col.hideBelow);
+    if (pinFirst && i === 0) {
+      a.push("tbl__cell--pin", "tbl__cell--pinEdge");
+      if (selectable) a.push("tbl__cell--pinOff");
+    }
+    return a;
+  }
+  const t = UIMotion.t;
+  const colCount = columns.length + (selectable ? 1 : 0);
+  const showEmpty = !loading && sortedRows.length === 0;
+  const checkCellCls = "tbl__cell--check" + (pinFirst ? " tbl__cell--pin" : "");
+  const checkSize = density === "compact" ? "sm" : "md";
+  const bulkOpen = selectable && selected.size > 0;
+  if (selected.size > 0) lastCountRef.current = selected.size;
+  const rootCls = cx(
+    "tbl",
+    density === "compact" && "tbl--compact",
+    pinFirst && "tbl--pin",
+    loading && "tbl--loading",
+    onRowClick && "tbl--clickable",
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: rootCls, ...htmlProps, children: [
+    selectable ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "tbl__bulk",
+        "data-open": bulkOpen ? "" : void 0,
+        "aria-hidden": bulkOpen ? void 0 : true,
+        role: "toolbar",
+        "aria-label": "Selection actions",
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              className: "tbl__cbx",
+              size: checkSize,
+              checked: allSelected,
+              indeterminate: someSelected,
+              htmlProps: { "aria-label": "Select all rows" },
+              onChange: toggleAll
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "tbl__bulkCount", "aria-live": "polite", "aria-atomic": "true", children: [
+            /* @__PURE__ */ jsx(Odometer, { value: bulkOpen ? selected.size : lastCountRef.current }),
+            /* @__PURE__ */ jsx("span", { children: " selected" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "tbl__bulkSpacer" }),
+          bulkActions ? bulkActions(Array.from(selected), clearSelection) : null,
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: clearSelection, children: "Clear" })
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: "tbl__viewport", children: [
+      /* @__PURE__ */ jsx("div", { className: "tbl__scroll", ref: scrollRef, children: /* @__PURE__ */ jsxs("table", { className: "tbl__table", "aria-label": ariaLabel, "aria-busy": loading || void 0, children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          selectable ? /* @__PURE__ */ jsx("th", { scope: "col", className: checkCellCls, children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              className: "tbl__cbx",
+              size: checkSize,
+              checked: allSelected,
+              indeterminate: someSelected,
+              htmlProps: { "aria-label": "Select all rows" },
+              onChange: toggleAll
+            }
+          ) }) : null,
+          columns.map((c, i) => {
+            const active = sort && sort.key === c.key;
+            const cls = (c.sortable ? ["tbl__cell--sortable"] : []).concat(cellMods(c, i));
+            return /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "col",
+                className: cls.join(" "),
+                "aria-sort": active ? sort.dir === "asc" ? "ascending" : "descending" : void 0,
+                children: c.sortable ? /* @__PURE__ */ jsxs("button", { type: "button", className: "tbl__sort", onClick: () => cycleSort(c), children: [
+                  /* @__PURE__ */ jsx("span", { className: "tbl__sortLbl", children: c.label }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "tbl__sortIcon" + (active ? " is-on" : "") + (active && sort.dir === "desc" ? " is-desc" : ""),
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx(Icon, { name: "arrow-up", size: "sm" })
+                    }
+                  )
+                ] }) : c.label != null ? /* @__PURE__ */ jsx("span", { className: "tbl__hLbl", children: c.label }) : null
+              },
+              c.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: showEmpty ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: "tbl__emptyCell", children: empty != null ? empty : "Nothing to show" }) }) : sortedRows.map((row, idx) => {
+          const k = keyOf(row);
+          const isSel = selected.has(k);
+          return /* @__PURE__ */ jsxs(
+            Motion,
+            {
+              as: "tr",
+              layout: { timing: t.layout },
+              className: "tbl__row",
+              "data-selected": isSel ? "" : void 0,
+              onClick: onRowClick ? () => onRowClick(row) : void 0,
+              children: [
+                selectable ? /* @__PURE__ */ jsx("td", { className: checkCellCls, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    className: "tbl__cbx",
+                    size: checkSize,
+                    checked: isSel,
+                    htmlProps: {
+                      "aria-label": selectionLabel ? selectionLabel(row) : "Select row",
+                      onClick: (e) => {
+                        shiftRef.current = e.shiftKey;
+                      }
+                    },
+                    onChange: () => toggleRow(idx)
+                  }
+                ) }) : null,
+                columns.map((c, i) => /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: cellMods(c, i).concat(c.mono ? ["tbl__cell--mono"] : []).concat(c.strong ? ["tbl__cell--strong"] : []).join(" "),
+                    children: c.render ? c.render(row) : row[c.key]
+                  },
+                  c.key
+                ))
+              ]
+            },
+            k
+          );
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "tbl__edge tbl__edge--l", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("div", { className: "tbl__edge tbl__edge--r", "aria-hidden": "true" })
+    ] }),
+    footer ? /* @__PURE__ */ jsx("div", { className: "tbl__foot", children: footer }) : null
+  ] });
+}
+
+export { Table };
+//# sourceMappingURL=table.js.map
+//# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/table/Table.tsx"],"names":[],"mappings":"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","file":"table.js","sourcesContent":["'use client';\n\nimport './table.css';\nimport { useMemo, useRef, useState, type HTMLAttributes, type ReactNode } from 'react';\nimport { Motion } from '../../../motion/element';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { Icon } from '../../internal/icon/Icon';\nimport type { DataAttributes } from '../../../dom-props';\nimport { Button } from '../../primitives/button/Button';\nimport { Checkbox } from '../../primitives/checkbox/Checkbox';\nimport { Odometer } from '../../primitives/badge/odometer';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport { cx } from '../../internal/utils/cx';\n\nexport type TableAlign = 'start' | 'end' | 'center';\nexport type TableHideBelow = 'sm' | 'md';\n\nexport interface TableColumn<Row = any> {\n  /** Unique column id; also the default data accessor (row[key]). */\n  key: string;\n  /** Header cell content; omit for a header-less column (e.g. an actions column). */\n  label?: ReactNode;\n  /** Cell + header alignment. Default 'start'. */\n  align?: TableAlign;\n  /** Mono + tabular numerals (timestamps, counts, IDs - section E). */\n  mono?: boolean;\n  /** Identity emphasis: strong text, medium weight. */\n  strong?: boolean;\n  /** The one greedy column - absorbs slack width. Others size to content. */\n  grow?: boolean;\n  /** Header becomes a sort control. Sort is local; asc - desc, no third state. */\n  sortable?: boolean;\n  /** Sort accessor: a row property name, or a function. Defaults to row[key]. */\n  sortBy?: string | ((row: Row) => unknown);\n  /** Collapse this column below a container breakpoint (30rem / 42rem). */\n  hideBelow?: TableHideBelow;\n  /** Custom cell renderer. Defaults to row[key]. */\n  render?: (row: Row) => ReactNode;\n}\n\nexport interface TableSort {\n  /** `key` of the column being sorted by. */\n  key: string;\n  /** Sort direction - `asc` or `desc`. */\n  dir: 'asc' | 'desc';\n}\n\nexport interface TableProps<Row = any> {\n  /** Column defs, rendered left to right. */\n  columns: TableColumn<Row>[];\n  /** The row data; sorted locally per the active sort before render. */\n  rows: Row[];\n  /** Row identity property. Default 'id'. Must be unique and stable. */\n  rowKey?: string;\n  /** Accessible name for the <table>. */\n  ariaLabel?: string;\n\n  /** Checkbox column + bulk bar. Selection is a Set of row keys, owned here. */\n  selectable?: boolean;\n  /** Fires with the selected row keys after every selection change. */\n  onSelectionChange?: (keys: Array<string | number>) => void;\n  /** Rendered in the bulk bar between the count and the built-in Clear. */\n  bulkActions?: (keys: Array<string | number>, clear: () => void) => ReactNode;\n  /** Per-row checkbox aria-label. Default 'Select row'. */\n  selectionLabel?: (row: Row) => string;\n\n  /** Initial sort; sorting stays local and uncontrolled after that. */\n  defaultSort?: TableSort | null;\n  /** Notification only - fires after the local sort updates. */\n  onSortChange?: (sort: TableSort) => void;\n\n  /** Row rhythm. Default 'cozy' (46px rows); 'compact' is 38px. */\n  density?: 'cozy' | 'compact';\n  /** Pin checkbox + first column under horizontal overflow. Default true. */\n  pinFirst?: boolean;\n\n  /** Rows recede and go inert (list-fetch convention). */\n  loading?: boolean;\n  /** Shown when rows is empty and not loading. Default 'Nothing to show'. */\n  empty?: ReactNode;\n  /** Footer strip - pagination, summaries. */\n  footer?: ReactNode;\n\n  /** Makes rows clickable (checkbox cell excluded). */\n  onRowClick?: (row: Row) => void;\n  /** Size the table here - the internal scroller absorbs the constraint. */\n  className?: string;\n  /** Standard <div> attributes (style, data-*, aria-*, ...) forwarded to the table wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className'> & DataAttributes;\n}\n\nfunction tblCompare(a: unknown, b: unknown) {\n  if (a == null && b == null) return 0;\n  if (a == null) return 1;\n  if (b == null) return -1;\n  if (typeof a === 'number' && typeof b === 'number') return a - b;\n  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' });\n}\n\nexport function Table<Row = any>({\n  columns = [],\n  rows = [],\n  rowKey = 'id',\n  ariaLabel,\n  selectable = false,\n  onSelectionChange,\n  bulkActions,\n  selectionLabel,\n  defaultSort = null,\n  onSortChange,\n  density = 'cozy',\n  pinFirst = true,\n  loading = false,\n  empty,\n  footer,\n  onRowClick,\n  className = '',\n  htmlProps,\n}: TableProps<Row>) {\n  const [sort, setSort] = useState<TableSort | null>(defaultSort);\n  const [selected, setSelected] = useState<Set<string | number>>(() => new Set());\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const lastIdxRef = useRef(-1);\n  const shiftRef = useRef(false);\n  const lastCountRef = useRef(0);\n\n  const keyOf = (row: Row): string | number => (row as Record<string, string | number>)[rowKey];\n\n  const sortedRows = useMemo(() => {\n    if (!sort) return rows;\n    const col = columns.find((c) => c.key === sort.key);\n    if (!col) return rows;\n    const get =\n      typeof col.sortBy === 'function'\n        ? col.sortBy\n        : col.sortBy\n          ? (r: Row) => (r as Record<string, unknown>)[col.sortBy as string]\n          : (r: Row) => (r as Record<string, unknown>)[col.key];\n    const dir = sort.dir === 'desc' ? -1 : 1;\n    return rows.slice().sort((a, b) => dir * tblCompare(get(a), get(b)));\n  }, [rows, columns, sort]);\n\n  function cycleSort(col: TableColumn<Row>) {\n    const next: TableSort =\n      sort && sort.key === col.key\n        ? { key: col.key, dir: sort.dir === 'asc' ? 'desc' : 'asc' }\n        : { key: col.key, dir: 'asc' };\n    setSort(next);\n    if (onSortChange) onSortChange(next);\n  }\n\n  const allSelected = sortedRows.length > 0 && sortedRows.every((r) => selected.has(keyOf(r)));\n  const someSelected = selected.size > 0 && !allSelected;\n\n  function commitSelection(next: Set<string | number>) {\n    setSelected(next);\n    if (onSelectionChange) onSelectionChange(Array.from(next));\n  }\n  function clearSelection() {\n    lastIdxRef.current = -1;\n    commitSelection(new Set());\n  }\n  function toggleAll() {\n    const next = new Set<string | number>();\n    if (!allSelected) sortedRows.forEach((r) => next.add(keyOf(r)));\n    commitSelection(next);\n  }\n  function toggleRow(idx: number) {\n    const next = new Set(selected);\n    const on = !next.has(keyOf(sortedRows[idx]));\n    if (shiftRef.current && lastIdxRef.current >= 0 && lastIdxRef.current !== idx) {\n      const lo = Math.min(lastIdxRef.current, idx);\n      const hi = Math.max(lastIdxRef.current, idx);\n      for (let i = lo; i <= hi; i++) {\n        const k = keyOf(sortedRows[i]);\n        if (on) next.add(k);\n        else next.delete(k);\n      }\n    } else if (on) {\n      next.add(keyOf(sortedRows[idx]));\n    } else {\n      next.delete(keyOf(sortedRows[idx]));\n    }\n    lastIdxRef.current = idx;\n    shiftRef.current = false;\n    commitSelection(next);\n  }\n\n  useScrollEdges(\n    scrollRef,\n    (edges, el) => {\n      const w = wrapRef.current;\n      if (!w) return;\n      const set = (attr: string, on: boolean) => {\n        if (on) w.setAttribute(attr, '');\n        else w.removeAttribute(attr);\n      };\n      set('data-scrolled', el.scrollTop > 0);\n      set('data-x-back', edges.left);\n      set('data-x-more', edges.right);\n    },\n    { content: true },\n  );\n\n  function cellMods(col: TableColumn<Row>, i: number) {\n    const a: string[] = [];\n    if (col.align === 'end') a.push('tbl__cell--end');\n    if (col.align === 'center') a.push('tbl__cell--center');\n    if (col.grow) a.push('tbl__cell--grow');\n    if (col.hideBelow) a.push('tbl__cell--hide-' + col.hideBelow);\n    if (pinFirst && i === 0) {\n      a.push('tbl__cell--pin', 'tbl__cell--pinEdge');\n      if (selectable) a.push('tbl__cell--pinOff');\n    }\n    return a;\n  }\n\n  const t = UIMotion.t;\n  const colCount = columns.length + (selectable ? 1 : 0);\n  const showEmpty = !loading && sortedRows.length === 0;\n  const checkCellCls = 'tbl__cell--check' + (pinFirst ? ' tbl__cell--pin' : '');\n\n  const checkSize = density === 'compact' ? 'sm' : 'md';\n  const bulkOpen = selectable && selected.size > 0;\n  if (selected.size > 0) lastCountRef.current = selected.size;\n\n  const rootCls = cx(\n    'tbl',\n    density === 'compact' && 'tbl--compact',\n    pinFirst && 'tbl--pin',\n    loading && 'tbl--loading',\n    onRowClick && 'tbl--clickable',\n    className,\n  );\n\n  return (\n    <div ref={wrapRef} className={rootCls} {...htmlProps}>\n      {selectable ? (\n        <div\n          className=\"tbl__bulk\"\n          data-open={bulkOpen ? '' : undefined}\n          aria-hidden={bulkOpen ? undefined : true}\n          role=\"toolbar\"\n          aria-label=\"Selection actions\"\n        >\n          <Checkbox\n            className=\"tbl__cbx\"\n            size={checkSize}\n            checked={allSelected}\n            indeterminate={someSelected}\n            htmlProps={{ 'aria-label': 'Select all rows' }}\n            onChange={toggleAll}\n          />\n          <span className=\"tbl__bulkCount\" aria-live=\"polite\" aria-atomic=\"true\">\n            <Odometer value={bulkOpen ? selected.size : lastCountRef.current} />\n            <span> selected</span>\n          </span>\n          <span className=\"tbl__bulkSpacer\"></span>\n          {bulkActions ? bulkActions(Array.from(selected), clearSelection) : null}\n          <Button variant=\"ghost\" size=\"sm\" onClick={clearSelection}>\n            Clear\n          </Button>\n        </div>\n      ) : null}\n\n      <div className=\"tbl__viewport\">\n        <div className=\"tbl__scroll\" ref={scrollRef}>\n          <table className=\"tbl__table\" aria-label={ariaLabel} aria-busy={loading || undefined}>\n            <thead>\n              <tr>\n                {selectable ? (\n                  <th scope=\"col\" className={checkCellCls}>\n                    <Checkbox\n                      className=\"tbl__cbx\"\n                      size={checkSize}\n                      checked={allSelected}\n                      indeterminate={someSelected}\n                      htmlProps={{ 'aria-label': 'Select all rows' }}\n                      onChange={toggleAll}\n                    />\n                  </th>\n                ) : null}\n                {columns.map((c, i) => {\n                  const active = sort && sort.key === c.key;\n                  const cls = (c.sortable ? ['tbl__cell--sortable'] : []).concat(cellMods(c, i));\n                  return (\n                    <th\n                      key={c.key}\n                      scope=\"col\"\n                      className={cls.join(' ')}\n                      aria-sort={active ? (sort.dir === 'asc' ? 'ascending' : 'descending') : undefined}\n                    >\n                      {c.sortable ? (\n                        <button type=\"button\" className=\"tbl__sort\" onClick={() => cycleSort(c)}>\n                          <span className=\"tbl__sortLbl\">{c.label}</span>\n                          <span\n                            className={\n                              'tbl__sortIcon' +\n                              (active ? ' is-on' : '') +\n                              (active && sort.dir === 'desc' ? ' is-desc' : '')\n                            }\n                            aria-hidden=\"true\"\n                          >\n                            <Icon name=\"arrow-up\" size=\"sm\" />\n                          </span>\n                        </button>\n                      ) : c.label != null ? (\n                        <span className=\"tbl__hLbl\">{c.label}</span>\n                      ) : null}\n                    </th>\n                  );\n                })}\n              </tr>\n            </thead>\n            <tbody>\n              {showEmpty ? (\n                <tr>\n                  <td colSpan={colCount} className=\"tbl__emptyCell\">\n                    {empty != null ? empty : 'Nothing to show'}\n                  </td>\n                </tr>\n              ) : (\n                sortedRows.map((row, idx) => {\n                  const k = keyOf(row);\n                  const isSel = selected.has(k);\n                  return (\n                    <Motion\n                      as=\"tr\"\n                      key={k}\n                      layout={{ timing: t.layout }}\n                      className=\"tbl__row\"\n                      data-selected={isSel ? '' : undefined}\n                      onClick={onRowClick ? () => onRowClick(row) : undefined}\n                    >\n                      {selectable ? (\n                        <td className={checkCellCls} onClick={(e) => e.stopPropagation()}>\n                          <Checkbox\n                            className=\"tbl__cbx\"\n                            size={checkSize}\n                            checked={isSel}\n                            htmlProps={{\n                              'aria-label': selectionLabel ? selectionLabel(row) : 'Select row',\n                              onClick: (e) => {\n                                shiftRef.current = e.shiftKey;\n                              },\n                            }}\n                            onChange={() => toggleRow(idx)}\n                          />\n                        </td>\n                      ) : null}\n                      {columns.map((c, i) => (\n                        <td\n                          key={c.key}\n                          className={cellMods(c, i)\n                            .concat(c.mono ? ['tbl__cell--mono'] : [])\n                            .concat(c.strong ? ['tbl__cell--strong'] : [])\n                            .join(' ')}\n                        >\n                          {c.render ? c.render(row) : (row as Record<string, ReactNode>)[c.key]}\n                        </td>\n                      ))}\n                    </Motion>\n                  );\n                })\n              )}\n            </tbody>\n          </table>\n        </div>\n        <div className=\"tbl__edge tbl__edge--l\" aria-hidden=\"true\"></div>\n        <div className=\"tbl__edge tbl__edge--r\" aria-hidden=\"true\"></div>\n      </div>\n\n      {footer ? <div className=\"tbl__foot\">{footer}</div> : null}\n    </div>\n  );\n}\n"]}

package/dist/tabs.css

@@ -0,0 +1,208 @@
+/* tabs.css - line tabs for VIEW SWITCHING (overview / activity / settings), sitting on a
+   hairline baseline. NOT a form control: pick Segmented control for 2-3 filter options.
+
+   Anatomy:  .tabs > .tabs__list[role=tablist] > .tab__hover? + .tab* + .tabs__ink
+             .tab > .tab__pad ( Icon? + .tab__label + .tab__count? )
+   States:   :hover - :active - :focus-visible - :disabled - .is-selected
+
+   Two motions, both driven from Tabs.tsx - nothing here transitions them:
+   - the ink ("reaches, then releases"): one persistent node; the edge facing the
+     destination travels first, then the trailing edge settles. animate() keyframes on
+     x + measured width (destination width is unknowable to transforms; scaleX would
+     distort the radius).
+   - the gliding hover: one persistent pill (../motion/glide) that fades in under the
+     first tab touched, springs between pads, and fades out where it rests on leave.
+   Label color, icon weight and press dip remain trivial-tier CSS. */
+
+/* -- Shell - owns the full-width baseline ----------------------------------
+   The hairline is a ::after on the shell (not a border on the scroller) so it
+   spans edge-to-edge while the scroller above it clips, masks and scrolls
+   freely. The scroller gets z-index:1 so the ink paints OVER the hairline. */
+.tabs {
+  position: relative;
+}
+.tabs::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--border-hairline);
+  background: var(--border-default);
+}
+
+/* -- Scroller - the tablist ------------------------------------------------
+   Overflow is honest: the row scrolls (scrollbar hidden) and the clipped edge
+   fades out via a mask. The fade lengths are two custom props flipped by
+   data-fade (set from scroll geometry in Tabs.jsx) - at 0px the mask is fully
+   opaque, i.e. a no-op. Negative margin + matching padding align the first
+   label flush with the container edge while the hover pill still has room. */
+.tabs__list {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  gap: var(--space-1);
+  overflow-x: auto;
+  scrollbar-width: none;
+  margin-inline: calc(var(--space-2) * -1);
+  padding-inline: var(--space-2);
+
+  --tabs-fade-start: 0px;
+  --tabs-fade-end: 0px;
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--tabs-fade-start),
+    black calc(100% - var(--tabs-fade-end)),
+    transparent
+  );
+}
+.tabs__list::-webkit-scrollbar {
+  display: none;
+}
+.tabs__list[data-fade~='start'] {
+  --tabs-fade-start: var(--space-8);
+}
+.tabs__list[data-fade~='end'] {
+  --tabs-fade-end: var(--space-8);
+}
+
+/* -- Tab - the hit target --------------------------------------------------
+   The button is pill + a bottom gap down to the baseline (total height 36px).
+   All visual feedback lives on the inner pill so hover/press/focus read as a
+   soft inset shape, while the ink below stays anchored to the baseline. */
+.tab {
+  appearance: none;
+  border: 0;
+  background: none;
+  margin: 0;
+  padding: 0 0 var(--space-2);
+  flex: none;
+  display: block;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.tab:focus-visible {
+  outline: none;
+}
+
+.tab__pad {
+  position: relative; /* positioned so every pad paints above the shared glide
+                             pill (z-index 0, first child of the list) */
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: var(--control-height-sm); /* 28 */
+  padding-inline: var(--space-2);
+  border-radius: var(--radius-md);
+  font: var(--type-micro);
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--text-subtle);
+  transition:
+    var(--transition-control),
+    transform var(--duration-fast) var(--ease-standard);
+}
+.tab__pad .icon {
+  display: inline-flex;
+}
+
+/* States - hover strengthens the label (the shared glide pill supplies the
+   background), press dips 1px on a darker fill (tactile, like Button), focus
+   is the composed accent ring, selection is text-strong + the ink. */
+.tab:hover:not(:disabled) .tab__pad {
+  color: var(--text-body);
+}
+.tab:active:not(:disabled) .tab__pad {
+  background: var(--neutral-wash-press);
+  transform: translateY(var(--space-px));
+}
+.tab.is-selected .tab__pad,
+.tab.is-selected:hover:not(:disabled) .tab__pad {
+  color: var(--text-strong);
+}
+.tab:focus-visible .tab__pad {
+  box-shadow: var(--ring-accent);
+}
+.tab:disabled {
+  cursor: not-allowed;
+}
+.tab:disabled .tab__pad {
+  color: var(--text-disabled);
+}
+
+/* -- Count - always mono, always tabular -----------------------------------*/
+.tab__count {
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  background: var(--bg-muted);
+  padding: var(--space-1);
+  border-radius: var(--radius-sm);
+  transition: var(--transition-colors);
+}
+.tab.is-selected .tab__count {
+  color: var(--text-accent);
+  background: var(--accent-wash);
+}
+.tab:disabled .tab__count {
+  color: var(--text-disabled);
+  background: var(--bg-subtle);
+}
+
+/* -- The gliding hover ------------------------------------------------------
+   One persistent pill, first child of the scroller (../motion/glide writes
+   x/y/width/height/opacity inline; coordinates include scrollLeft, so it
+   scrolls with its tab). z-index 0 + DOM order keep it under every tab's
+   positioned pad in both travel directions. Nothing transitions here. */
+.tab__hover {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  border-radius: var(--radius-md);
+  background: var(--neutral-wash);
+  pointer-events: none;
+  will-change: transform, opacity;
+}
+
+/* -- The ink ---------------------------------------------------------------
+   Positioned in the scroller's layout coordinates (offsetLeft space), so it
+   scrolls WITH its tab. Motion writes transform + width at runtime; resting
+   geometry is set the same way, so there is nothing to transition here.
+   EXCEPTION (intentional, mirrors RadioGroup's dot dims): 2px ink height is a
+   bespoke control dim - elevation.css reserves 2px for selected emphasis, but
+   ships no width token for it (--border-emphasis is 1.5px, which renders as
+   sub-pixel fuzz on 1x screens). Do not "fix" it to a token. */
+.tabs__ink {
+  --tabs-ink-h: 2px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: var(--tabs-ink-h);
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  pointer-events: none;
+  will-change: transform, width;
+}
+
+/* -- Panel -----------------------------------------------------------------
+   The panel ROOT is static chrome - borders, padding, background put on it
+   by the consumer never move. Only .tab-panel__inner (the content) enters
+   from the direction of travel (Motion, TabPanel). The root is focusable per
+   the APG (tabindex=0) so keyboard users land on content right after the
+   tablist; the ring shows only for keyboard focus. */
+.tab-panel {
+  outline: none;
+  overflow: hidden;
+}
+.tab-panel:focus-visible {
+  box-shadow: var(--ring-accent);
+  border-radius: var(--radius-md);
+}
+.tab-panel__inner {
+  will-change: transform, opacity;
+}

package/dist/tabs.d.ts

@@ -0,0 +1,71 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
+import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import './motion-scale-Canq4stZ.js';
+
+/** One tab in the row. */
+interface TabItem {
+    /** Stable identity - also used in the tab/panel id pair. */
+    value: string;
+    /** Visible tab text. */
+    label: ReactNode;
+    /** Leading icon - your own node. */
+    icon?: ReactNode;
+    /** Rendered mono + tabular. Pass a number or a preformatted string. */
+    count?: number | string;
+    /** Dims the tab, blocks selection, and skips it during arrow-key travel. */
+    disabled?: boolean;
+}
+interface TabsOwnProps {
+    /** The tab row, in order. @default [] */
+    items: TabItem[];
+    /** Controlled - the value of the active tab (null/undefined hides the ink). */
+    value: string | null | undefined;
+    /**
+     * Fires on click and on arrow-key travel (automatic activation).
+     * `dir` is the direction of travel (+1 right / -1 left) - hand it to
+     * TabPanel so content enters from the side the user moved toward.
+     */
+    onChange?: (value: string, dir: 1 | -1) => void;
+    /**
+     * Shared id prefix wiring tab and panel aria. Give Tabs and its TabPanel the
+     * same `name`; omit it when the tabs have no managed panel.
+     */
+    name?: string;
+    /** Accessible name for the tablist (e.g. "Section views"). */
+    ariaLabel?: string;
+    /** Extra class(es) merged onto the root. */
+    className?: string;
+    /** Inline styles merged onto the root. */
+    style?: CSSProperties;
+}
+interface TabsProps extends TabsOwnProps {
+    /** Standard <div> attributes (data-*, aria-*, ...) forwarded to the root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TabsOwnProps> & DataAttributes;
+}
+declare function Tabs({ items, value, onChange, name, ariaLabel, className, style, htmlProps }: TabsProps): react.JSX.Element;
+interface TabPanelOwnProps {
+    /** The active tab's value - changing it cuts to the new content. */
+    tab: string;
+    /** Same `name` as the paired Tabs - wires role/id/aria-labelledby. */
+    name?: string;
+    /** Direction of travel from Tabs' onChange; 0 = plain fade. */
+    dir?: -1 | 0 | 1;
+    /** Panel content - only this inner node animates in on `tab` change; the root chrome stays static. */
+    children?: ReactNode;
+    /** Entrance timing for the inner content - motion tokens only, or `null` to disable.
+     *  @default duration 'base' + ease 'entrance' */
+    animation?: DisableableAnimation;
+    /** Extra class(es) merged onto the root. */
+    className?: string;
+    /** Inline styles merged onto the root. */
+    style?: CSSProperties;
+}
+interface TabPanelProps extends TabPanelOwnProps {
+    /** Standard <div> attributes (data-*, aria-*, ...) forwarded to the root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TabPanelOwnProps> & DataAttributes;
+}
+declare function TabPanel({ tab, name, dir, className, style, children, animation, htmlProps }: TabPanelProps): react.JSX.Element;
+
+export { type TabItem, TabPanel, type TabPanelProps, Tabs, type TabsProps };