@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.3

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

@@ -1,22 +1,23 @@
-import { jsxs as W, jsx as b } from "react/jsx-runtime";
-import * as A from "react";
-import { flexRender as B } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
-import { mergeClasses as p, SLOT_ATTR as f, shorthands as h } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as N } from "../../styles/make-styles.js";
-import { grayA6 as P, accentA3 as g } from "../../tokens/index.js";
-import { TableRow as $, TableCell as x } from "../table/table.js";
-import { getPinnedColumnOffset as z, isLastLeftPinnedColumn as j, isFirstRightPinnedColumn as F } from "./data-table-pinning-utils.js";
-import { useDataTable as K } from "./hooks/use-data-table.js";
-import { useDataTableContent as V } from "./hooks/use-data-table-content.js";
-function _(t, a) {
+import { jsxs as A, jsx as p } from "react/jsx-runtime";
+import * as B from "react";
+import { flexRender as N } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
+import { mergeClasses as w, SLOT_ATTR as u, shorthands as g } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as $ } from "../../styles/make-styles.js";
+import { boxModel as h } from "../../styles/host-reset.js";
+import { grayA6 as k, accentA3 as x } from "../../tokens/index.js";
+import { TableRow as z, TableCell as C } from "../table/table.js";
+import { getPinnedColumnOffset as j, isLastLeftPinnedColumn as F, isFirstRightPinnedColumn as K } from "./data-table-pinning-utils.js";
+import { useDataTable as V } from "./hooks/use-data-table.js";
+import { useDataTableContent as _ } from "./hooks/use-data-table-content.js";
+function Z(t, a) {
   const n = t.column.columnDef.meta;
   return (n == null ? void 0 : n.cellOverflow) ?? a;
 }
-function Z(t) {
+function q(t) {
   const a = t.column.columnDef.meta;
   return a == null ? void 0 : a.align;
 }
-const C = [
+const R = [
   "button",
   "a",
   "input",
@@ -35,32 +36,43 @@ const C = [
   '[role="switch"]',
   '[role="tab"]',
   "[data-radix-collection-item]",
-  `[${f}="checkbox"]`
-], q = N({
+  `[${u}="checkbox"]`
+], G = $({
   rowClickable: {
     cursor: "pointer",
     ":hover": {
-      backgroundColor: g
+      backgroundColor: x
     }
   },
   rowSelected: {
-    backgroundColor: g
+    backgroundColor: x
   },
+  // The rule is painted on the cells: WebKit draws no box-shadow on a <tr>,
+  // and row borders don't paint under DataTableContent's
+  // `border-collapse: separate`. A background image also stays clear of the
+  // pinned cells' own box-shadow and adds no height.
   rowBorder: {
-    boxShadow: `inset 0 -1px 0 0 ${P}`,
-    "&:last-child": {
-      boxShadow: "none"
+    "& > td": {
+      backgroundImage: `linear-gradient(${k}, ${k})`,
+      backgroundSize: "100% 1px",
+      backgroundPosition: "bottom",
+      backgroundRepeat: "no-repeat"
+    },
+    "&:last-child > td": {
+      backgroundImage: "none"
     }
   },
   cellTruncate: {
+    ...h,
     maxWidth: 0,
-    ...h.overflow("hidden"),
+    ...g.overflow("hidden"),
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
   cellWrap: {
+    ...h,
     maxWidth: 0,
-    ...h.overflow("hidden"),
+    ...g.overflow("hidden"),
     overflowWrap: "break-word",
     wordBreak: "break-word"
   },
@@ -71,91 +83,91 @@ const C = [
     boxShadow: "-2px 0 5px -2px rgba(0,0,0,0.1)"
   }
 });
-function G({ row: t, style: a, className: n }, k) {
-  const r = q(), {
+function H({ row: t, style: a, className: n }, v) {
+  const r = G(), {
     table: c,
     onRowClick: i,
-    clickableRowClassName: v,
-    selectedRowClassName: R,
-    cellOverflow: T = "truncate",
-    showRowBorders: S,
-    disableColumnResizing: D
-  } = K(), d = V(), u = (d == null ? void 0 : d.spacerWidth) ?? 0, I = !D, s = !!i, y = (e) => {
+    clickableRowClassName: T,
+    selectedRowClassName: S,
+    cellOverflow: I = "truncate",
+    showRowBorders: D,
+    disableColumnResizing: y
+  } = V(), d = _(), f = (d == null ? void 0 : d.spacerWidth) ?? 0, E = !y, s = !!i, O = (e) => {
     if (!i) return;
     const l = e.target;
-    C.some(
+    R.some(
       (o) => l.closest(o)
     ) || i(t, e);
-  }, E = (e) => {
+  }, L = (e) => {
     if (i && (e.key === "Enter" || e.key === " ")) {
       const l = e.target;
-      if (C.some(
+      if (R.some(
         (o) => l.closest(o)
       ))
         return;
       e.preventDefault(), i(t, e);
     }
   };
-  return /* @__PURE__ */ W(
-    $,
+  return /* @__PURE__ */ A(
+    z,
     {
-      ref: k,
+      ref: v,
       "data-slot": "data-table-row",
-      [f]: "data-table-row",
+      [u]: "data-table-row",
       "data-fs-element": "DataTable-Row",
       "data-state": t.getIsSelected() ? "selected" : void 0,
       "data-clickable": s ? "true" : void 0,
       style: a,
-      className: p(
-        S !== !1 && r.rowBorder,
-        s && (v ?? r.rowClickable),
-        t.getIsSelected() && (R ?? r.rowSelected),
+      className: w(
+        D !== !1 && r.rowBorder,
+        s && (T ?? r.rowClickable),
+        t.getIsSelected() && (S ?? r.rowSelected),
         n
       ),
-      onClick: s ? y : void 0,
+      onClick: s ? O : void 0,
       tabIndex: s ? 0 : void 0,
-      onKeyDown: s ? E : void 0,
+      onKeyDown: s ? L : void 0,
       children: [
         t.getVisibleCells().map((e) => {
-          const l = _(e, T), m = Z(e), o = e.column.getIsPinned(), w = o ? z(e.column, c) : void 0, O = j(e.column, c), L = F(e.column, c);
-          return /* @__PURE__ */ b(
-            x,
+          const l = Z(e, I), m = q(e), o = e.column.getIsPinned(), b = o ? j(e.column, c) : void 0, W = F(e.column, c), P = K(e.column, c);
+          return /* @__PURE__ */ p(
+            C,
             {
               "data-slot": "data-table-cell",
-              [f]: "data-table-cell",
+              [u]: "data-table-cell",
               "data-fs-element": "DataTable-Cell",
               "data-pinned": o || void 0,
               align: m,
               style: {
-                width: I || o ? e.column.getSize() : void 0,
-                left: o === "left" ? `${w}px` : void 0,
-                right: o === "right" ? `${w}px` : void 0
+                width: E || o ? e.column.getSize() : void 0,
+                left: o === "left" ? `${b}px` : void 0,
+                right: o === "right" ? `${b}px` : void 0
               },
-              className: p(
+              className: w(
                 l === "truncate" && r.cellTruncate,
                 l === "wrap" && r.cellWrap,
-                O && r.shadowLeft,
-                L && r.shadowRight
+                W && r.shadowLeft,
+                P && r.shadowRight
               ),
-              children: B(e.column.columnDef.cell, e.getContext())
+              children: N(e.column.columnDef.cell, e.getContext())
             },
             e.id
           );
         }),
-        u > 0 && /* @__PURE__ */ b(
-          x,
+        f > 0 && /* @__PURE__ */ p(
+          C,
           {
             "data-spacer": !0,
             "aria-hidden": "true",
-            style: { width: u, padding: 0 }
+            style: { width: f, padding: 0 }
           }
         )
       ]
     }
   );
 }
-const oe = A.forwardRef(G);
+const re = B.forwardRef(H);
 export {
-  oe as DataTableRow
+  re as DataTableRow
 };
 //# sourceMappingURL=data-table-row.js.map

package/dist/components/data-table/data-table-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-row.js","sources":["../../../src/components/data-table/data-table-row.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, MouseEvent, KeyboardEvent } from \"react\"\nimport type { Row, Cell } from \"@tanstack/react-table\"\nimport { flexRender } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport type { DataTableCellOverflow } from \"./data-table-context\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\ntype CellAlign = \"left\" | \"center\" | \"right\"\n\n/**\n * Gets the cell overflow mode, checking column meta first, then falling back to table default.\n */\nfunction getCellOverflow<TData>(\n  cell: Cell<TData, unknown>,\n  tableDefault: DataTableCellOverflow\n): DataTableCellOverflow {\n  const columnMeta = cell.column.columnDef.meta as\n    { cellOverflow?: DataTableCellOverflow } | undefined\n  return columnMeta?.cellOverflow ?? tableDefault\n}\n\n/**\n * Gets the cell alignment from column meta.\n */\nfunction getCellAlign<TData>(\n  cell: Cell<TData, unknown>\n): CellAlign | undefined {\n  const columnMeta = cell.column.columnDef.meta as\n    { align?: CellAlign } | undefined\n  return columnMeta?.align\n}\n\n// Interactive element selectors that should NOT trigger row click\nconst INTERACTIVE_SELECTORS = [\n  \"button\",\n  \"a\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  '[role=\"button\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"link\"]',\n  '[role=\"menuitem\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]',\n  '[role=\"option\"]',\n  '[role=\"radio\"]',\n  '[role=\"slider\"]',\n  '[role=\"spinbutton\"]',\n  '[role=\"switch\"]',\n  '[role=\"tab\"]',\n  \"[data-radix-collection-item]\",\n  `[${SLOT_ATTR}=\"checkbox\"]`,\n]\n\nconst useStyles = makeZenithStyles({\n  rowClickable: {\n    cursor: \"pointer\",\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  rowSelected: {\n    backgroundColor: tokens.accentA3,\n  },\n  rowBorder: {\n    boxShadow: `inset 0 -1px 0 0 ${tokens.grayA6}`,\n    \"&:last-child\": {\n      boxShadow: \"none\",\n    },\n  },\n  cellTruncate: {\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  cellWrap: {\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    overflowWrap: \"break-word\",\n    wordBreak: \"break-word\",\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableRowProps<TData> = {\n  /** The row instance from TanStack Table */\n  row: Row<TData>\n  /** Optional style (used for virtualized row heights) */\n  style?: CSSProperties\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Renders a single table row with its cells.\n * Supports clickable rows when onRowClick is provided via DataTable context.\n */\nfunction DataTableRowInner<TData>(\n  { row, style, className }: DataTableRowProps<TData>,\n  ref: React.ForwardedRef<HTMLTableRowElement>\n) {\n  const styles = useStyles()\n  const {\n    table,\n    onRowClick,\n    clickableRowClassName,\n    selectedRowClassName,\n    cellOverflow: tableCellOverflow = \"truncate\",\n    showRowBorders,\n    disableColumnResizing,\n  } = useDataTable<TData>()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const enableColumnResizing = !disableColumnResizing\n  const isClickable = Boolean(onRowClick)\n\n  const handleClick = (event: MouseEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    // Check if click originated from an interactive element\n    const target = event.target as HTMLElement\n    const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n      target.closest(selector)\n    )\n\n    if (isInteractiveElement) {\n      return // Don't trigger row click for interactive elements\n    }\n\n    onRowClick(row, event)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      // Check if key event originated from an interactive element\n      const target = event.target as HTMLElement\n      const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n        target.closest(selector)\n      )\n\n      if (isInteractiveElement) {\n        return // Let the interactive element handle the event\n      }\n\n      event.preventDefault()\n      onRowClick(row, event as unknown as MouseEvent<HTMLTableRowElement>)\n    }\n  }\n\n  return (\n    <TableRow\n      ref={ref}\n      data-slot=\"data-table-row\"\n      {...{ [SLOT_ATTR]: \"data-table-row\" }}\n      data-fs-element=\"DataTable-Row\"\n      data-state={row.getIsSelected() ? \"selected\" : undefined}\n      data-clickable={isClickable ? \"true\" : undefined}\n      style={style}\n      className={mergeClasses(\n        showRowBorders !== false && styles.rowBorder,\n        isClickable && (clickableRowClassName ?? styles.rowClickable),\n        row.getIsSelected() && (selectedRowClassName ?? styles.rowSelected),\n        className\n      )}\n      onClick={isClickable ? handleClick : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={isClickable ? handleKeyDown : undefined}\n    >\n      {row.getVisibleCells().map((cell) => {\n        const overflow = getCellOverflow(cell, tableCellOverflow)\n        const align = getCellAlign(cell)\n        const isPinned = cell.column.getIsPinned()\n        const pinnedOffset = isPinned\n          ? getPinnedColumnOffset(cell.column, table)\n          : undefined\n        const isLastLeft = isLastLeftPinnedColumn(cell.column, table)\n        const isFirstRight = isFirstRightPinnedColumn(cell.column, table)\n\n        return (\n          <TableCell\n            key={cell.id}\n            data-slot=\"data-table-cell\"\n            {...{ [SLOT_ATTR]: \"data-table-cell\" }}\n            data-fs-element=\"DataTable-Cell\"\n            data-pinned={isPinned || undefined}\n            align={align}\n            style={{\n              width:\n                enableColumnResizing || isPinned\n                  ? cell.column.getSize()\n                  : undefined,\n              left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n              right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n            }}\n            className={mergeClasses(\n              overflow === \"truncate\" && styles.cellTruncate,\n              overflow === \"wrap\" && styles.cellWrap,\n              isLastLeft && styles.shadowLeft,\n              isFirstRight && styles.shadowRight\n            )}\n          >\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </TableCell>\n        )\n      })}\n      {/* Spacer cell - matches header spacer column */}\n      {spacerWidth > 0 && (\n        <TableCell\n          data-spacer\n          aria-hidden=\"true\"\n          style={{ width: spacerWidth, padding: 0 }}\n        />\n      )}\n    </TableRow>\n  )\n}\n\nexport const DataTableRow = React.forwardRef(DataTableRowInner) as <TData>(\n  props: DataTableRowProps<TData> & {\n    ref?: React.Ref<HTMLTableRowElement>\n  }\n) => React.ReactElement | null\n"],"names":["getCellOverflow","cell","tableDefault","columnMeta","getCellAlign","INTERACTIVE_SELECTORS","SLOT_ATTR","useStyles","makeZenithStyles","tokens.accentA3","tokens.grayA6","shorthands","DataTableRowInner","row","style","className","ref","styles","table","onRowClick","clickableRowClassName","selectedRowClassName","tableCellOverflow","showRowBorders","disableColumnResizing","useDataTable","contentContext","useDataTableContent","spacerWidth","enableColumnResizing","isClickable","handleClick","event","target","selector","handleKeyDown","jsxs","TableRow","mergeClasses","overflow","align","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","jsx","TableCell","DataTableRow","React"],"mappings":"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"}
+{"version":3,"file":"data-table-row.js","sources":["../../../src/components/data-table/data-table-row.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, MouseEvent, KeyboardEvent } from \"react\"\nimport type { Row, Cell } from \"@tanstack/react-table\"\nimport { flexRender } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport type { DataTableCellOverflow } from \"./data-table-context\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\ntype CellAlign = \"left\" | \"center\" | \"right\"\n\n/**\n * Gets the cell overflow mode, checking column meta first, then falling back to table default.\n */\nfunction getCellOverflow<TData>(\n  cell: Cell<TData, unknown>,\n  tableDefault: DataTableCellOverflow\n): DataTableCellOverflow {\n  const columnMeta = cell.column.columnDef.meta as\n    { cellOverflow?: DataTableCellOverflow } | undefined\n  return columnMeta?.cellOverflow ?? tableDefault\n}\n\n/**\n * Gets the cell alignment from column meta.\n */\nfunction getCellAlign<TData>(\n  cell: Cell<TData, unknown>\n): CellAlign | undefined {\n  const columnMeta = cell.column.columnDef.meta as\n    { align?: CellAlign } | undefined\n  return columnMeta?.align\n}\n\n// Interactive element selectors that should NOT trigger row click\nconst INTERACTIVE_SELECTORS = [\n  \"button\",\n  \"a\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  '[role=\"button\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"link\"]',\n  '[role=\"menuitem\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]',\n  '[role=\"option\"]',\n  '[role=\"radio\"]',\n  '[role=\"slider\"]',\n  '[role=\"spinbutton\"]',\n  '[role=\"switch\"]',\n  '[role=\"tab\"]',\n  \"[data-radix-collection-item]\",\n  `[${SLOT_ATTR}=\"checkbox\"]`,\n]\n\nconst useStyles = makeZenithStyles({\n  rowClickable: {\n    cursor: \"pointer\",\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  rowSelected: {\n    backgroundColor: tokens.accentA3,\n  },\n  // The rule is painted on the cells: WebKit draws no box-shadow on a <tr>,\n  // and row borders don't paint under DataTableContent's\n  // `border-collapse: separate`. A background image also stays clear of the\n  // pinned cells' own box-shadow and adds no height.\n  rowBorder: {\n    \"& > td\": {\n      backgroundImage: `linear-gradient(${tokens.grayA6}, ${tokens.grayA6})`,\n      backgroundSize: \"100% 1px\",\n      backgroundPosition: \"bottom\",\n      backgroundRepeat: \"no-repeat\",\n    },\n    \"&:last-child > td\": {\n      backgroundImage: \"none\",\n    },\n  },\n  cellTruncate: {\n    ...boxModel,\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  cellWrap: {\n    ...boxModel,\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    overflowWrap: \"break-word\",\n    wordBreak: \"break-word\",\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableRowProps<TData> = {\n  /** The row instance from TanStack Table */\n  row: Row<TData>\n  /** Optional style (used for virtualized row heights) */\n  style?: CSSProperties\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Renders a single table row with its cells.\n * Supports clickable rows when onRowClick is provided via DataTable context.\n */\nfunction DataTableRowInner<TData>(\n  { row, style, className }: DataTableRowProps<TData>,\n  ref: React.ForwardedRef<HTMLTableRowElement>\n) {\n  const styles = useStyles()\n  const {\n    table,\n    onRowClick,\n    clickableRowClassName,\n    selectedRowClassName,\n    cellOverflow: tableCellOverflow = \"truncate\",\n    showRowBorders,\n    disableColumnResizing,\n  } = useDataTable<TData>()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const enableColumnResizing = !disableColumnResizing\n  const isClickable = Boolean(onRowClick)\n\n  const handleClick = (event: MouseEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    // Check if click originated from an interactive element\n    const target = event.target as HTMLElement\n    const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n      target.closest(selector)\n    )\n\n    if (isInteractiveElement) {\n      return // Don't trigger row click for interactive elements\n    }\n\n    onRowClick(row, event)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      // Check if key event originated from an interactive element\n      const target = event.target as HTMLElement\n      const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n        target.closest(selector)\n      )\n\n      if (isInteractiveElement) {\n        return // Let the interactive element handle the event\n      }\n\n      event.preventDefault()\n      onRowClick(row, event as unknown as MouseEvent<HTMLTableRowElement>)\n    }\n  }\n\n  return (\n    <TableRow\n      ref={ref}\n      data-slot=\"data-table-row\"\n      {...{ [SLOT_ATTR]: \"data-table-row\" }}\n      data-fs-element=\"DataTable-Row\"\n      data-state={row.getIsSelected() ? \"selected\" : undefined}\n      data-clickable={isClickable ? \"true\" : undefined}\n      style={style}\n      className={mergeClasses(\n        showRowBorders !== false && styles.rowBorder,\n        isClickable && (clickableRowClassName ?? styles.rowClickable),\n        row.getIsSelected() && (selectedRowClassName ?? styles.rowSelected),\n        className\n      )}\n      onClick={isClickable ? handleClick : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={isClickable ? handleKeyDown : undefined}\n    >\n      {row.getVisibleCells().map((cell) => {\n        const overflow = getCellOverflow(cell, tableCellOverflow)\n        const align = getCellAlign(cell)\n        const isPinned = cell.column.getIsPinned()\n        const pinnedOffset = isPinned\n          ? getPinnedColumnOffset(cell.column, table)\n          : undefined\n        const isLastLeft = isLastLeftPinnedColumn(cell.column, table)\n        const isFirstRight = isFirstRightPinnedColumn(cell.column, table)\n\n        return (\n          <TableCell\n            key={cell.id}\n            data-slot=\"data-table-cell\"\n            {...{ [SLOT_ATTR]: \"data-table-cell\" }}\n            data-fs-element=\"DataTable-Cell\"\n            data-pinned={isPinned || undefined}\n            align={align}\n            style={{\n              width:\n                enableColumnResizing || isPinned\n                  ? cell.column.getSize()\n                  : undefined,\n              left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n              right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n            }}\n            className={mergeClasses(\n              overflow === \"truncate\" && styles.cellTruncate,\n              overflow === \"wrap\" && styles.cellWrap,\n              isLastLeft && styles.shadowLeft,\n              isFirstRight && styles.shadowRight\n            )}\n          >\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </TableCell>\n        )\n      })}\n      {/* Spacer cell - matches header spacer column */}\n      {spacerWidth > 0 && (\n        <TableCell\n          data-spacer\n          aria-hidden=\"true\"\n          style={{ width: spacerWidth, padding: 0 }}\n        />\n      )}\n    </TableRow>\n  )\n}\n\nexport const DataTableRow = React.forwardRef(DataTableRowInner) as <TData>(\n  props: DataTableRowProps<TData> & {\n    ref?: React.Ref<HTMLTableRowElement>\n  }\n) => React.ReactElement | null\n"],"names":["getCellOverflow","cell","tableDefault","columnMeta","getCellAlign","INTERACTIVE_SELECTORS","SLOT_ATTR","useStyles","makeZenithStyles","tokens.accentA3","tokens.grayA6","boxModel","shorthands","DataTableRowInner","row","style","className","ref","styles","table","onRowClick","clickableRowClassName","selectedRowClassName","tableCellOverflow","showRowBorders","disableColumnResizing","useDataTable","contentContext","useDataTableContent","spacerWidth","enableColumnResizing","isClickable","handleClick","event","target","selector","handleKeyDown","jsxs","TableRow","mergeClasses","overflow","align","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","jsx","TableCell","DataTableRow","React"],"mappings":"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"}

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

@@ -1,18 +1,20 @@
 import { jsx as n } from "react/jsx-runtime";
-import * as i from "react";
-import { mergeClasses as m, SLOT_ATTR as p, shorthands as a } from "@epilot/zenith-runtime/v1";
+import * as m from "react";
+import { mergeClasses as i, SLOT_ATTR as p, shorthands as a } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as d } from "../../styles/make-styles.js";
-import { spacingGroup1 as t, spacingElement1 as b } from "../../tokens/index.js";
+import { boxModel as b } from "../../styles/host-reset.js";
+import { spacingGroup1 as t, spacingElement1 as f } from "../../tokens/index.js";
 const c = d({
   root: {
+    ...b,
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     gap: t,
-    ...a.paddingInline(b),
+    ...a.paddingInline(f),
     ...a.paddingBlock(t)
   }
-}), h = i.forwardRef(function({ className: o, children: e, ...r }, s) {
+}), D = m.forwardRef(function({ className: o, children: e, ...r }, s) {
   const l = c();
   return /* @__PURE__ */ n(
     "div",
@@ -21,13 +23,13 @@ const c = d({
       "data-slot": "data-table-toolbar",
       [p]: "data-table-toolbar",
       "data-fs-element": "DataTable-Toolbar",
-      className: m(l.root, o),
+      className: i(l.root, o),
       ...r,
       children: e
     }
   );
 });
 export {
-  h as DataTableToolbar
+  D as DataTableToolbar
 };
 //# sourceMappingURL=data-table-toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-toolbar.js","sources":["../../../src/components/data-table/data-table-toolbar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: tokens.spacingGroup1,\n    ...shorthands.paddingInline(tokens.spacingElement1),\n    ...shorthands.paddingBlock(tokens.spacingGroup1),\n  },\n})\n\nexport type DataTableToolbarProps = React.ComponentProps<\"div\">\n\n/**\n * A toolbar wrapper for DataTable that contains filters, search, and actions.\n * Place above the table for consistent layout.\n */\nexport const DataTableToolbar = React.forwardRef<\n  HTMLDivElement,\n  DataTableToolbarProps\n>(function DataTableToolbar({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-toolbar\"\n      {...{ [SLOT_ATTR]: \"data-table-toolbar\" }}\n      data-fs-element=\"DataTable-Toolbar\"\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.spacingGroup1","shorthands","tokens.spacingElement1","DataTableToolbar","React","className","children","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;AAOA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,cAAcC,CAAsB;AAAA,IAClD,GAAGD,EAAW,aAAaD,CAAoB;AAAA,EAAA;AAEnD,CAAC,GAQYG,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAClE,QAAMC,IAASX,EAAA;AAEf,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAWC,EAAaH,EAAO,MAAMJ,CAAS;AAAA,MAC7C,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"data-table-toolbar.js","sources":["../../../src/components/data-table/data-table-toolbar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: tokens.spacingGroup1,\n    ...shorthands.paddingInline(tokens.spacingElement1),\n    ...shorthands.paddingBlock(tokens.spacingGroup1),\n  },\n})\n\nexport type DataTableToolbarProps = React.ComponentProps<\"div\">\n\n/**\n * A toolbar wrapper for DataTable that contains filters, search, and actions.\n * Place above the table for consistent layout.\n */\nexport const DataTableToolbar = React.forwardRef<\n  HTMLDivElement,\n  DataTableToolbarProps\n>(function DataTableToolbar({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-toolbar\"\n      {...{ [SLOT_ATTR]: \"data-table-toolbar\" }}\n      data-fs-element=\"DataTable-Toolbar\"\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.spacingGroup1","shorthands","tokens.spacingElement1","DataTableToolbar","React","className","children","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;AAQA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,cAAcC,CAAsB;AAAA,IAClD,GAAGD,EAAW,aAAaD,CAAoB;AAAA,EAAA;AAEnD,CAAC,GAQYG,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAClE,QAAMC,IAASZ,EAAA;AAEf,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAWC,EAAaH,EAAO,MAAMJ,CAAS;AAAA,MAC7C,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -1,15 +1,16 @@
 import { jsx as n } from "react/jsx-runtime";
 import * as Je from "react";
-import { useState as f, useRef as Ke, useEffect as h, useMemo as u, useCallback as Qe } from "react";
+import { useState as o, useRef as Ke, useEffect as h, useMemo as u, useCallback as Qe } from "react";
 import { useReactTable as Xe } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
 import { mergeClasses as Ye, SLOT_ATTR as $e } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as Ce } from "../../styles/make-styles.js";
+import { boxModel as ze } from "../../styles/host-reset.js";
 import { Checkbox as ee } from "../checkbox/checkbox.js";
-import { DensityContextBoundary as ze, canonicalDensity as ve } from "../density-provider/density-provider.js";
-import { DEFAULT_CONTAINER_HEIGHT as ge, DEFAULT_OVERSCAN as ae, DEFAULT_ROW_HEIGHT as ie, DataTableContext as pe } from "./data-table-context.js";
-import { DataTableColumnHeader as et } from "./data-table-column-header.js";
-import { getPaginationRowModel as tt, getFilteredRowModel as st, getSortedRowModel as lt, getCoreRowModel as ct } from "../../vendor/.bun/@tanstack_table-core@8.21.3/vendor/@tanstack/table-core/build/lib/index.js";
-function rt(d, T) {
+import { DensityContextBoundary as ve, canonicalDensity as ge } from "../density-provider/density-provider.js";
+import { DEFAULT_CONTAINER_HEIGHT as ae, DEFAULT_OVERSCAN as ie, DEFAULT_ROW_HEIGHT as pe, DataTableContext as et } from "./data-table-context.js";
+import { DataTableColumnHeader as tt } from "./data-table-column-header.js";
+import { getPaginationRowModel as st, getFilteredRowModel as lt, getSortedRowModel as ct, getCoreRowModel as rt } from "../../vendor/.bun/@tanstack_table-core@8.21.3/vendor/@tanstack/table-core/build/lib/index.js";
+function ot(d, T) {
   return T ? d.map((c) => {
     var r;
     if (c.enableSorting === !1 || typeof c.header != "string")
@@ -17,7 +18,7 @@ function rt(d, T) {
     const I = c.header;
     return {
       ...c,
-      header: ({ column: m }) => /* @__PURE__ */ n(et, { column: m, title: I }),
+      header: ({ column: m }) => /* @__PURE__ */ n(tt, { column: m, title: I }),
       meta: {
         ...c.meta,
         // Preserve original header for visibility dropdown fallback
@@ -30,11 +31,12 @@ function rt(d, T) {
 }
 const ft = Ce({
   root: {
+    ...ze,
     width: "100%",
     maxWidth: "100%"
   }
 });
-function ot({
+function nt({
   columns: d,
   data: T,
   children: c,
@@ -51,8 +53,8 @@ function ot({
   defaultSorting: ce = [],
   rowSelection: re,
   onRowSelectionChange: w,
-  defaultRowSelection: fe = {},
-  columnFilters: oe,
+  defaultRowSelection: oe = {},
+  columnFilters: fe,
   onColumnFiltersChange: D,
   columnVisibility: ne,
   onColumnVisibilityChange: R,
@@ -66,16 +68,16 @@ function ot({
   resizeHandleVisibility: Z = "onHeaderHover",
   columnResizeMode: me = "onChange",
   columnSizing: Se,
-  onColumnSizingChange: F,
+  onColumnSizingChange: M,
   defaultColumnSizing: ue = {},
   columnPinning: Ie,
-  onColumnPinningChange: M,
-  defaultColumnPinning: Pe = { left: [], right: [] },
+  onColumnPinningChange: F,
+  defaultColumnPinning: be = { left: [], right: [] },
   autoPinSelection: q,
   showHeaderBorder: J = !0,
   showRowBorders: K = !0,
   fitHeaderWidth: Q = !1,
-  columnOrder: be,
+  columnOrder: Pe,
   onColumnOrderChange: E,
   defaultColumnOrder: ye = [],
   enableColumnOrdering: X = !1,
@@ -83,10 +85,10 @@ function ot({
   density: _,
   className: Te
 }, xe) {
-  const we = ft(), [De, Re] = f(ce), [Ae, He] = f(fe), [Fe, Me] = f([]), [Ee, _e] = f({}), [ke, Le] = f(""), [Oe, Ve] = f(ue), [he, Ue] = f(Pe), [je, Ge] = f(ye), Ne = {
+  const we = ft(), [De, Re] = o(ce), [Ae, He] = o(oe), [Me, Fe] = o([]), [Ee, _e] = o({}), [ke, Le] = o(""), [Oe, Ve] = o(ue), [he, Ue] = o(be), [je, Ge] = o(ye), Ne = {
     pageIndex: (t == null ? void 0 : t.pageIndex) ?? 0,
     pageSize: (t == null ? void 0 : t.pageSize) ?? 10
-  }, [k, L] = f(Ne), O = Ke(!1);
+  }, [k, L] = o(Ne), O = Ke(!1);
   h(() => {
     if ((t == null ? void 0 : t.pageIndex) === void 0)
       return;
@@ -102,15 +104,15 @@ function ot({
       (s) => s.pageSize === e ? s : { ...s, pageSize: e }
     );
   }, [t == null ? void 0 : t.pageSize]);
-  const Y = !H, $ = le ?? De, P = re ?? Ae, C = oe ?? Fe, z = ne ?? Ee, v = de ?? ke, b = Se ?? Oe, o = Ie ?? he, y = be ?? je, We = u(() => {
-    if (!(r && q && Object.keys(P).length > 0))
-      return o;
-    const s = o.left ?? [];
-    return s.includes("select") ? o : {
-      ...o,
+  const Y = !H, $ = le ?? De, b = re ?? Ae, C = fe ?? Me, z = ne ?? Ee, v = de ?? ke, P = Se ?? Oe, f = Ie ?? he, y = Pe ?? je, We = u(() => {
+    if (!(r && q && Object.keys(b).length > 0))
+      return f;
+    const s = f.left ?? [];
+    return s.includes("select") ? f : {
+      ...f,
       left: ["select", ...s]
     };
-  }, [o, P, r, q]), g = u(
+  }, [f, b, r, q]), g = u(
     () => ({
       id: "select",
       header: ({ table: e }) => /* @__PURE__ */ n(
@@ -138,7 +140,7 @@ function ot({
       size: 40
     }),
     []
-  ), V = u(() => rt(d, m), [d, m]), Be = u(() => r ? [g, ...V] : V, [V, r, g]), S = !!t, a = !!(l != null && l.enabled && !S), i = S && ((t == null ? void 0 : t.totalItems) !== void 0 || (t == null ? void 0 : t.pageCount) !== void 0), Ze = Qe(
+  ), V = u(() => ot(d, m), [d, m]), Be = u(() => r ? [g, ...V] : V, [V, r, g]), S = !!t, a = !!(l != null && l.enabled && !S), i = S && ((t == null ? void 0 : t.totalItems) !== void 0 || (t == null ? void 0 : t.pageCount) !== void 0), Ze = Qe(
     (e) => {
       O.current = !0, L((s) => typeof e == "function" ? e(s) : e);
     },
@@ -152,21 +154,21 @@ function ot({
     data: T,
     columns: Be,
     getRowId: I,
-    getCoreRowModel: ct(),
+    getCoreRowModel: rt(),
     // Default column configuration
     defaultColumn: {
       minSize: 50
     },
     // Sorting
     ...m && !U && {
-      getSortedRowModel: lt()
+      getSortedRowModel: ct()
     },
     ...U && {
       manualSorting: !0
     },
     state: {
       sorting: $,
-      rowSelection: P,
+      rowSelection: b,
       columnFilters: C,
       columnVisibility: z,
       globalFilter: v,
@@ -176,7 +178,7 @@ function ot({
         pagination: k
       },
       ...Y && {
-        columnSizing: b
+        columnSizing: P
       }
     },
     onSortingChange: (e) => {
@@ -186,19 +188,19 @@ function ot({
     // Row selection
     enableRowSelection: typeof r == "function" ? (e) => r(e) : r,
     onRowSelectionChange: (e) => {
-      const s = typeof e == "function" ? e(P) : e;
+      const s = typeof e == "function" ? e(b) : e;
       He(s), w == null || w(s);
     },
     // Filtering
     ...(te || se) && !j && {
-      getFilteredRowModel: st()
+      getFilteredRowModel: lt()
     },
     ...j && {
       manualFiltering: !0
     },
     onColumnFiltersChange: (e) => {
       const s = typeof e == "function" ? e(C) : e;
-      Me(s), D == null || D(s);
+      Fe(s), D == null || D(s);
     },
     onColumnVisibilityChange: (e) => {
       const s = typeof e == "function" ? e(z) : e;
@@ -217,17 +219,17 @@ function ot({
     enableColumnResizing: Y,
     columnResizeMode: me,
     onColumnSizingChange: (e) => {
-      const s = typeof e == "function" ? e(b) : e;
-      Ve(s), F == null || F(s);
+      const s = typeof e == "function" ? e(P) : e;
+      Ve(s), M == null || M(s);
     },
     // Column pinning
     onColumnPinningChange: (e) => {
-      const s = typeof e == "function" ? e(o) : e;
-      Ue(s), M == null || M(s);
+      const s = typeof e == "function" ? e(f) : e;
+      Ue(s), F == null || F(s);
     },
     // Pagination
     ...S && !i && {
-      getPaginationRowModel: tt()
+      getPaginationRowModel: st()
     },
     ...i && {
       manualPagination: !0,
@@ -243,9 +245,9 @@ function ot({
       pagination: t,
       config: {
         enableVirtualization: a,
-        estimateRowHeight: (l == null ? void 0 : l.estimateRowHeight) ?? ie,
-        overscan: (l == null ? void 0 : l.overscan) ?? ae,
-        containerHeight: (l == null ? void 0 : l.containerHeight) ?? ge
+        estimateRowHeight: (l == null ? void 0 : l.estimateRowHeight) ?? pe,
+        overscan: (l == null ? void 0 : l.overscan) ?? ie,
+        containerHeight: (l == null ? void 0 : l.containerHeight) ?? ae
       },
       onRowClick: G,
       clickableRowClassName: N,
@@ -256,7 +258,7 @@ function ot({
       showHeaderBorder: J,
       showRowBorders: K,
       fitHeaderWidth: Q,
-      columnSizing: b,
+      columnSizing: P,
       enableColumnOrdering: X,
       columnOrder: y
     }),
@@ -274,12 +276,12 @@ function ot({
       J,
       K,
       Q,
-      b,
+      P,
       X,
       y
     ]
   );
-  return /* @__PURE__ */ n(pe.Provider, { value: qe, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(et.Provider, { value: qe, children: /* @__PURE__ */ n(
     "div",
     {
       ref: xe,
@@ -287,13 +289,13 @@ function ot({
       [$e]: "data-table",
       "data-fs-element": "DataTable",
       className: Ye(we.root, Te),
-      ..._ !== void 0 ? { "data-density": ve(_) } : {},
-      children: /* @__PURE__ */ n(ze, { density: _, children: c })
+      ..._ !== void 0 ? { "data-density": ge(_) } : {},
+      children: /* @__PURE__ */ n(ve, { density: _, children: c })
     }
   ) });
 }
-const wt = Je.forwardRef(ot);
+const Rt = Je.forwardRef(nt);
 export {
-  wt as DataTable
+  Rt as DataTable
 };
 //# sourceMappingURL=data-table.js.map