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

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

@@ -1,112 +1,115 @@
-import { jsx as a, jsxs as $, Fragment as j } from "react/jsx-runtime";
-import * as k from "react";
-import { useRef as T, useState as v, useCallback as y, useEffect as P, useMemo as u } from "react";
-import { flushSync as q } from "react-dom";
-import { useVirtualizer as G } from "../../vendor/.bun/@tanstack_react-virtual@3.11.2_6f4b9a1cfb20c0ae/vendor/@tanstack/react-virtual/dist/esm/index.js";
-import { SLOT_ATTR as x, mergeClasses as Z, shorthands as J } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as K } from "../../styles/make-styles.js";
-import { leadingSm as Q, textSm as X } from "../../tokens/index.js";
-import { DEFAULT_OVERSCAN as Y, DataTableContentContext as ee, DataTableVirtualizerContext as te, DEFAULT_ROW_HEIGHT as ne } from "./data-table-context.js";
-import { DataTableHeader as oe } from "./data-table-header.js";
-import { DataTableBody as ie } from "./data-table-body.js";
-import { useDataTable as re } from "./hooks/use-data-table.js";
-const ae = 150, se = K({
+import { jsx as a, jsxs as j, Fragment as k } from "react/jsx-runtime";
+import * as P from "react";
+import { useRef as T, useState as v, useCallback as y, useEffect as q, useMemo as u } from "react";
+import { flushSync as G } from "react-dom";
+import { useVirtualizer as Z } from "../../vendor/.bun/@tanstack_react-virtual@3.11.2_6f4b9a1cfb20c0ae/vendor/@tanstack/react-virtual/dist/esm/index.js";
+import { SLOT_ATTR as x, mergeClasses as J, shorthands as K } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as Q } from "../../styles/make-styles.js";
+import { boxModel as D } from "../../styles/host-reset.js";
+import { leadingSm as X, textSm as Y } from "../../tokens/index.js";
+import { DEFAULT_OVERSCAN as ee, DataTableContentContext as te, DataTableVirtualizerContext as ne, DEFAULT_ROW_HEIGHT as oe } from "./data-table-context.js";
+import { DataTableHeader as ie } from "./data-table-header.js";
+import { DataTableBody as re } from "./data-table-body.js";
+import { useDataTable as ae } from "./hooks/use-data-table.js";
+const se = 150, le = Q({
   container: {
+    ...D,
     position: "relative",
     width: "100%",
-    ...J.overflow("auto")
+    ...K.overflow("auto")
   },
   resizing: {
     cursor: "col-resize",
     userSelect: "none"
   },
   table: {
+    ...D,
     tableLayout: "fixed",
     borderCollapse: "separate",
     borderSpacing: 0,
-    fontSize: X,
-    lineHeight: Q
+    fontSize: Y,
+    lineHeight: X
   }
-}), Re = k.forwardRef(function({ children: D, className: w, style: W }, s) {
+}), ve = P.forwardRef(function({ children: w, className: W, style: V }, s) {
   var z;
-  const d = se(), { table: n, config: e, disableColumnResizing: V } = re(), E = !V && ((z = n.getState().columnSizingInfo) == null ? void 0 : z.isResizingColumn), m = T(null), h = T(null), [i, H] = v(!1), [f, L] = v(0), _ = n.getRowModel().rows, A = y(
+  const d = le(), { table: n, config: e, disableColumnResizing: E } = ae(), H = !E && ((z = n.getState().columnSizingInfo) == null ? void 0 : z.isResizingColumn), m = T(null), f = T(null), [i, L] = v(!1), [h, _] = v(0), A = n.getRowModel().rows, F = y(
     (t) => {
       m.current = t, typeof s == "function" ? s(t) : s && (s.current = t);
     },
     [s]
   );
-  P(() => {
+  q(() => {
     const t = m.current;
     if (!t || typeof ResizeObserver > "u") return;
     const o = new ResizeObserver((r) => {
-      L(r[0].contentRect.width);
+      _(r[0].contentRect.width);
     });
     return o.observe(t), () => o.disconnect();
   }, []);
   const C = y(() => {
-    if (h.current && !i) {
-      const t = h.current.querySelectorAll(
+    if (f.current && !i) {
+      const t = f.current.querySelectorAll(
         "th:not([data-spacer])"
       ), o = n.getVisibleLeafColumns();
       if (t.length === o.length) {
         const r = {};
-        t.forEach((b, N) => {
-          const R = o[N];
+        t.forEach((b, $) => {
+          const R = o[$];
           R && (r[R.id] = Math.round(
             b.getBoundingClientRect().width
           ));
-        }), q(() => {
-          H(!0), n.setColumnSizing((b) => ({ ...b, ...r }));
+        }), G(() => {
+          L(!0), n.setColumnSizing((b) => ({ ...b, ...r }));
         });
       }
     }
-  }, [n, i]), l = !!(e != null && e.enableVirtualization), g = G({
-    count: l ? _.length : 0,
+  }, [n, i]), l = !!(e != null && e.enableVirtualization), g = Z({
+    count: l ? A.length : 0,
     getScrollElement: () => m.current,
-    estimateSize: () => (e == null ? void 0 : e.estimateRowHeight) ?? ne,
-    overscan: (e == null ? void 0 : e.overscan) ?? Y,
+    estimateSize: () => (e == null ? void 0 : e.estimateRowHeight) ?? oe,
+    overscan: (e == null ? void 0 : e.overscan) ?? ee,
     enabled: l
-  }), F = n.getState().columnSizing, O = n.getState().columnVisibility, c = u(() => n.getVisibleLeafColumns().reduce((o, r) => o + (r.getSize() ?? ae), 0), [n, F, O]), S = 4, B = u(() => i ? c ? `${c}px` : `calc(100% - ${S}px)` : `calc(100% - ${S}px)`, [i, c]), p = u(() => !i || !f ? 0 : Math.max(0, f - c), [i, f, c]), M = D ?? /* @__PURE__ */ $(j, { children: [
-    /* @__PURE__ */ a(oe, {}),
-    /* @__PURE__ */ a(ie, {})
-  ] }), U = u(
+  }), M = n.getState().columnSizing, O = n.getState().columnVisibility, c = u(() => n.getVisibleLeafColumns().reduce((o, r) => o + (r.getSize() ?? se), 0), [n, M, O]), S = 4, B = u(() => i ? c ? `${c}px` : `calc(100% - ${S}px)` : `calc(100% - ${S}px)`, [i, c]), p = u(() => !i || !h ? 0 : Math.max(0, h - c), [i, h, c]), U = w ?? /* @__PURE__ */ j(k, { children: [
+    /* @__PURE__ */ a(ie, {}),
+    /* @__PURE__ */ a(re, {})
+  ] }), I = u(
     () => ({ syncColumnWidthsBeforeResize: C, spacerWidth: p }),
     [C, p]
-  ), I = u(
+  ), N = u(
     () => l ? { virtualizer: g, scrollContainerRef: m } : null,
     [l, g]
   );
-  return /* @__PURE__ */ a(ee.Provider, { value: U, children: /* @__PURE__ */ a(te.Provider, { value: I, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(te.Provider, { value: I, children: /* @__PURE__ */ a(ne.Provider, { value: N, children: /* @__PURE__ */ a(
     "div",
     {
-      ref: A,
+      ref: F,
       "data-slot": "data-table-content",
       [x]: "data-table-content",
       "data-fs-element": "DataTable-Content",
-      className: Z(
+      className: J(
         d.container,
-        E && d.resizing,
-        w
+        H && d.resizing,
+        W
       ),
       style: {
         height: l ? e == null ? void 0 : e.containerHeight : void 0,
-        ...W
+        ...V
       },
       children: /* @__PURE__ */ a(
         "table",
         {
-          ref: h,
+          ref: f,
           "data-slot": "table",
           [x]: "table",
           className: d.table,
           style: { width: B },
-          children: M
+          children: U
         }
       )
     }
   ) }) });
 });
 export {
-  Re as DataTableContent
+  ve as DataTableContent
 };
 //# sourceMappingURL=data-table-content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-content.js","sources":["../../../src/components/data-table/data-table-content.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRef, useMemo, useCallback, useState, useEffect } from \"react\"\nimport { flushSync } from \"react-dom\"\nimport type { ReactNode } from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\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 { useDataTable } from \"./hooks\"\nimport {\n  DataTableContentContext,\n  DataTableVirtualizerContext,\n  DEFAULT_ROW_HEIGHT,\n  DEFAULT_OVERSCAN,\n} from \"./data-table-context\"\nimport { DataTableHeader } from \"./data-table-header\"\nimport { DataTableBody } from \"./data-table-body\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeZenithStyles({\n  container: {\n    position: \"relative\",\n    width: \"100%\",\n    ...shorthands.overflow(\"auto\"),\n  },\n  resizing: {\n    cursor: \"col-resize\",\n    userSelect: \"none\",\n  },\n  table: {\n    tableLayout: \"fixed\",\n    borderCollapse: \"separate\",\n    borderSpacing: 0,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n})\n\nexport type DataTableContentProps = {\n  /** Children to render inside the table (DataTableHeader, DataTableBody) */\n  children?: ReactNode\n  /** Additional class name */\n  className?: string\n  /** Additional style */\n  style?: React.CSSProperties\n}\n\n/**\n * Container component for DataTable that handles the table structure and virtualization.\n * When virtualization is enabled, this component manages the scroll container.\n *\n * If no children are provided, renders DataTableHeader and DataTableBody by default.\n */\nexport const DataTableContent = React.forwardRef<\n  HTMLDivElement,\n  DataTableContentProps\n>(function DataTableContent({ children, className, style }, ref) {\n  const styles = useStyles()\n  const { table, config, disableColumnResizing } = useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n\n  const isResizing =\n    enableColumnResizing && table.getState().columnSizingInfo?.isResizingColumn\n  const internalContainerRef = useRef<HTMLDivElement>(null!)\n  const tableRef = useRef<HTMLTableElement>(null)\n  const [hasSyncedWidths, setHasSyncedWidths] = useState(false)\n  const [containerWidth, setContainerWidth] = useState(0)\n  const rows = table.getRowModel().rows\n\n  // Attach ref to internal ref or forwarded ref\n  const handleRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      internalContainerRef.current = node!\n      if (typeof ref === \"function\") {\n        ref(node)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      }\n    },\n    [ref]\n  )\n\n  // Track container width for spacer calculation\n  useEffect(() => {\n    const container = internalContainerRef.current\n    if (!container || typeof ResizeObserver === \"undefined\") return\n\n    const observer = new ResizeObserver((entries) => {\n      setContainerWidth(entries[0].contentRect.width)\n    })\n    observer.observe(container)\n    return () => observer.disconnect()\n  }, [])\n\n  // Sync visual column widths to stored widths BEFORE resize starts\n  const syncColumnWidthsBeforeResize = useCallback(() => {\n    if (tableRef.current && !hasSyncedWidths) {\n      const headerCells = tableRef.current.querySelectorAll(\n        \"th:not([data-spacer])\"\n      )\n      const columns = table.getVisibleLeafColumns()\n\n      if (headerCells.length === columns.length) {\n        const newSizing: Record<string, number> = {}\n\n        headerCells.forEach((cell, index) => {\n          const column = columns[index]\n          if (column) {\n            newSizing[column.id] = Math.round(\n              cell.getBoundingClientRect().width\n            )\n          }\n        })\n\n        flushSync(() => {\n          setHasSyncedWidths(true)\n          table.setColumnSizing((prev) => ({ ...prev, ...newSizing }))\n        })\n      }\n    }\n  }, [table, hasSyncedWidths])\n\n  const isVirtual = Boolean(config?.enableVirtualization)\n\n  // Always call useVirtualizer to follow React hooks rules\n  // When virtualization is disabled, count=0 makes it effectively a no-op\n  const virtualizer = useVirtualizer({\n    count: isVirtual ? rows.length : 0,\n    getScrollElement: () => internalContainerRef.current,\n    estimateSize: () => config?.estimateRowHeight ?? DEFAULT_ROW_HEIGHT,\n    overscan: config?.overscan ?? DEFAULT_OVERSCAN,\n    enabled: isVirtual,\n  })\n\n  // Get column sizing and visibility state to trigger recalculation\n  const columnSizing = table.getState().columnSizing\n  const columnVisibility = table.getState().columnVisibility\n\n  // Calculate total column width from visible columns\n  const calculatedColumnSum = useMemo(() => {\n    const totalWidth = table.getVisibleLeafColumns().reduce((sum, col) => {\n      return sum + (col.getSize() ?? DEFAULT_COLUMN_WIDTH)\n    }, 0)\n    return totalWidth\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table, columnSizing, columnVisibility])\n\n  const WIDTH_BUFFER = 4\n  const tableWidth = useMemo(() => {\n    if (!hasSyncedWidths) {\n      return `calc(100% - ${WIDTH_BUFFER}px)`\n    }\n    return calculatedColumnSum\n      ? `${calculatedColumnSum}px`\n      : `calc(100% - ${WIDTH_BUFFER}px)`\n  }, [hasSyncedWidths, calculatedColumnSum])\n\n  // Calculate spacer width to fill remaining container space after resize\n  const spacerWidth = useMemo(() => {\n    if (!hasSyncedWidths || !containerWidth) return 0\n    return Math.max(0, containerWidth - calculatedColumnSum)\n  }, [hasSyncedWidths, containerWidth, calculatedColumnSum])\n\n  // If no children, render default header + body\n  const content = children ?? (\n    <>\n      <DataTableHeader />\n      <DataTableBody />\n    </>\n  )\n\n  const contentContextValue = useMemo(\n    () => ({ syncColumnWidthsBeforeResize, spacerWidth }),\n    [syncColumnWidthsBeforeResize, spacerWidth]\n  )\n\n  const virtualizerContextValue = useMemo(\n    () =>\n      isVirtual\n        ? { virtualizer, scrollContainerRef: internalContainerRef }\n        : null,\n    [isVirtual, virtualizer]\n  )\n\n  return (\n    <DataTableContentContext.Provider value={contentContextValue}>\n      <DataTableVirtualizerContext.Provider value={virtualizerContextValue}>\n        <div\n          ref={handleRef}\n          data-slot=\"data-table-content\"\n          {...{ [SLOT_ATTR]: \"data-table-content\" }}\n          data-fs-element=\"DataTable-Content\"\n          className={mergeClasses(\n            styles.container,\n            isResizing && styles.resizing,\n            className\n          )}\n          style={{\n            height: isVirtual ? config?.containerHeight : undefined,\n            ...style,\n          }}\n        >\n          <table\n            ref={tableRef}\n            data-slot=\"table\"\n            {...{ [SLOT_ATTR]: \"table\" }}\n            className={styles.table}\n            style={{ width: tableWidth }}\n          >\n            {content}\n          </table>\n        </div>\n      </DataTableVirtualizerContext.Provider>\n    </DataTableContentContext.Provider>\n  )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeZenithStyles","shorthands","tokens.textSm","tokens.leadingSm","DataTableContent","React","children","className","style","ref","styles","table","config","disableColumnResizing","useDataTable","isResizing","_a","internalContainerRef","useRef","tableRef","hasSyncedWidths","setHasSyncedWidths","useState","containerWidth","setContainerWidth","rows","handleRef","useCallback","node","useEffect","container","observer","entries","syncColumnWidthsBeforeResize","headerCells","columns","newSizing","cell","index","column","flushSync","prev","isVirtual","virtualizer","useVirtualizer","DEFAULT_ROW_HEIGHT","DEFAULT_OVERSCAN","columnSizing","columnVisibility","calculatedColumnSum","useMemo","sum","col","WIDTH_BUFFER","tableWidth","spacerWidth","content","jsxs","Fragment","jsx","DataTableHeader","DataTableBody","contentContextValue","virtualizerContextValue","DataTableContentContext","DataTableVirtualizerContext","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;;;;;;AAqBA,MAAMA,KAAuB,KAEvBC,KAAYC,EAAiB;AAAA,EACjC,WAAW;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAGC,EAAW,SAAS,MAAM;AAAA,EAAA;AAAA,EAE/B,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EAAA;AAAA,EAEd,OAAO;AAAA,IACL,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAUC;AAAAA,IACV,YAAYC;AAAAA,EAAO;AAEvB,CAAC,GAiBYC,KAAmBC,EAAM,WAGpC,SAA0B,EAAE,UAAAC,GAAU,WAAAC,GAAW,OAAAC,EAAA,GAASC,GAAK;;AAC/D,QAAMC,IAASX,GAAA,GACT,EAAE,OAAAY,GAAO,QAAAC,GAAQ,uBAAAC,EAAA,IAA0BC,GAAA,GAG3CC,IAFuB,CAACF,OAGJG,IAAAL,EAAM,SAAA,EAAW,qBAAjB,gBAAAK,EAAmC,mBACvDC,IAAuBC,EAAuB,IAAK,GACnDC,IAAWD,EAAyB,IAAI,GACxC,CAACE,GAAiBC,CAAkB,IAAIC,EAAS,EAAK,GACtD,CAACC,GAAgBC,CAAiB,IAAIF,EAAS,CAAC,GAChDG,IAAOd,EAAM,YAAA,EAAc,MAG3Be,IAAYC;AAAA,IAChB,CAACC,MAAgC;AAC/B,MAAAX,EAAqB,UAAUW,GAC3B,OAAOnB,KAAQ,aACjBA,EAAImB,CAAI,IACCnB,MACPA,EAAsD,UAAUmB;AAAA,IAEtE;AAAA,IACA,CAACnB,CAAG;AAAA,EAAA;AAIN,EAAAoB,EAAU,MAAM;AACd,UAAMC,IAAYb,EAAqB;AACvC,QAAI,CAACa,KAAa,OAAO,iBAAmB,IAAa;AAEzD,UAAMC,IAAW,IAAI,eAAe,CAACC,MAAY;AAC/C,MAAAR,EAAkBQ,EAAQ,CAAC,EAAE,YAAY,KAAK;AAAA,IAChD,CAAC;AACD,WAAAD,EAAS,QAAQD,CAAS,GACnB,MAAMC,EAAS,WAAA;AAAA,EACxB,GAAG,CAAA,CAAE;AAGL,QAAME,IAA+BN,EAAY,MAAM;AACrD,QAAIR,EAAS,WAAW,CAACC,GAAiB;AACxC,YAAMc,IAAcf,EAAS,QAAQ;AAAA,QACnC;AAAA,MAAA,GAEIgB,IAAUxB,EAAM,sBAAA;AAEtB,UAAIuB,EAAY,WAAWC,EAAQ,QAAQ;AACzC,cAAMC,IAAoC,CAAA;AAE1C,QAAAF,EAAY,QAAQ,CAACG,GAAMC,MAAU;AACnC,gBAAMC,IAASJ,EAAQG,CAAK;AAC5B,UAAIC,MACFH,EAAUG,EAAO,EAAE,IAAI,KAAK;AAAA,YAC1BF,EAAK,wBAAwB;AAAA,UAAA;AAAA,QAGnC,CAAC,GAEDG,EAAU,MAAM;AACd,UAAAnB,EAAmB,EAAI,GACvBV,EAAM,gBAAgB,CAAC8B,OAAU,EAAE,GAAGA,GAAM,GAAGL,IAAY;AAAA,QAC7D,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAACzB,GAAOS,CAAe,CAAC,GAErBsB,IAAY,GAAQ9B,KAAA,QAAAA,EAAQ,uBAI5B+B,IAAcC,EAAe;AAAA,IACjC,OAAOF,IAAYjB,EAAK,SAAS;AAAA,IACjC,kBAAkB,MAAMR,EAAqB;AAAA,IAC7C,cAAc,OAAML,KAAA,gBAAAA,EAAQ,sBAAqBiC;AAAA,IACjD,WAAUjC,KAAA,gBAAAA,EAAQ,aAAYkC;AAAA,IAC9B,SAASJ;AAAA,EAAA,CACV,GAGKK,IAAepC,EAAM,SAAA,EAAW,cAChCqC,IAAmBrC,EAAM,SAAA,EAAW,kBAGpCsC,IAAsBC,EAAQ,MACfvC,EAAM,sBAAA,EAAwB,OAAO,CAACwC,GAAKC,MACrDD,KAAOC,EAAI,QAAA,KAAatD,KAC9B,CAAC,GAGH,CAACa,GAAOoC,GAAcC,CAAgB,CAAC,GAEpCK,IAAe,GACfC,IAAaJ,EAAQ,MACpB9B,IAGE6B,IACH,GAAGA,CAAmB,OACtB,eAAeI,CAAY,QAJtB,eAAeA,CAAY,OAKnC,CAACjC,GAAiB6B,CAAmB,CAAC,GAGnCM,IAAcL,EAAQ,MACtB,CAAC9B,KAAmB,CAACG,IAAuB,IACzC,KAAK,IAAI,GAAGA,IAAiB0B,CAAmB,GACtD,CAAC7B,GAAiBG,GAAgB0B,CAAmB,CAAC,GAGnDO,IAAUlD,KACd,gBAAAmD,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAACC,IAAA,EAAgB;AAAA,sBAChBC,IAAA,CAAA,CAAc;AAAA,EAAA,GACjB,GAGIC,IAAsBZ;AAAA,IAC1B,OAAO,EAAE,8BAAAjB,GAA8B,aAAAsB;IACvC,CAACtB,GAA8BsB,CAAW;AAAA,EAAA,GAGtCQ,IAA0Bb;AAAA,IAC9B,MACER,IACI,EAAE,aAAAC,GAAa,oBAAoB1B,MACnC;AAAA,IACN,CAACyB,GAAWC,CAAW;AAAA,EAAA;AAGzB,SACE,gBAAAgB,EAACK,GAAwB,UAAxB,EAAiC,OAAOF,GACvC,UAAA,gBAAAH,EAACM,GAA4B,UAA5B,EAAqC,OAAOF,GAC3C,UAAA,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKjC;AAAA,MACL,aAAU;AAAA,MACJ,CAACwC,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAWC;AAAA,QACTzD,EAAO;AAAA,QACPK,KAAcL,EAAO;AAAA,QACrBH;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,QAAQmC,IAAY9B,KAAA,gBAAAA,EAAQ,kBAAkB;AAAA,QAC9C,GAAGJ;AAAA,MAAA;AAAA,MAGL,UAAA,gBAAAmD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKxC;AAAA,UACL,aAAU;AAAA,UACJ,CAAC+C,CAAS,GAAG;AAAA,UACnB,WAAWxD,EAAO;AAAA,UAClB,OAAO,EAAE,OAAO4C,EAAA;AAAA,UAEf,UAAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,GAEJ,EAAA,CACF;AAEJ,CAAC;"}
+{"version":3,"file":"data-table-content.js","sources":["../../../src/components/data-table/data-table-content.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRef, useMemo, useCallback, useState, useEffect } from \"react\"\nimport { flushSync } from \"react-dom\"\nimport type { ReactNode } from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\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 { useDataTable } from \"./hooks\"\nimport {\n  DataTableContentContext,\n  DataTableVirtualizerContext,\n  DEFAULT_ROW_HEIGHT,\n  DEFAULT_OVERSCAN,\n} from \"./data-table-context\"\nimport { DataTableHeader } from \"./data-table-header\"\nimport { DataTableBody } from \"./data-table-body\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeZenithStyles({\n  container: {\n    ...boxModel,\n    position: \"relative\",\n    width: \"100%\",\n    ...shorthands.overflow(\"auto\"),\n  },\n  resizing: {\n    cursor: \"col-resize\",\n    userSelect: \"none\",\n  },\n  table: {\n    ...boxModel,\n    tableLayout: \"fixed\",\n    borderCollapse: \"separate\",\n    borderSpacing: 0,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n})\n\nexport type DataTableContentProps = {\n  /** Children to render inside the table (DataTableHeader, DataTableBody) */\n  children?: ReactNode\n  /** Additional class name */\n  className?: string\n  /** Additional style */\n  style?: React.CSSProperties\n}\n\n/**\n * Container component for DataTable that handles the table structure and virtualization.\n * When virtualization is enabled, this component manages the scroll container.\n *\n * If no children are provided, renders DataTableHeader and DataTableBody by default.\n */\nexport const DataTableContent = React.forwardRef<\n  HTMLDivElement,\n  DataTableContentProps\n>(function DataTableContent({ children, className, style }, ref) {\n  const styles = useStyles()\n  const { table, config, disableColumnResizing } = useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n\n  const isResizing =\n    enableColumnResizing && table.getState().columnSizingInfo?.isResizingColumn\n  const internalContainerRef = useRef<HTMLDivElement>(null!)\n  const tableRef = useRef<HTMLTableElement>(null)\n  const [hasSyncedWidths, setHasSyncedWidths] = useState(false)\n  const [containerWidth, setContainerWidth] = useState(0)\n  const rows = table.getRowModel().rows\n\n  // Attach ref to internal ref or forwarded ref\n  const handleRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      internalContainerRef.current = node!\n      if (typeof ref === \"function\") {\n        ref(node)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      }\n    },\n    [ref]\n  )\n\n  // Track container width for spacer calculation\n  useEffect(() => {\n    const container = internalContainerRef.current\n    if (!container || typeof ResizeObserver === \"undefined\") return\n\n    const observer = new ResizeObserver((entries) => {\n      setContainerWidth(entries[0].contentRect.width)\n    })\n    observer.observe(container)\n    return () => observer.disconnect()\n  }, [])\n\n  // Sync visual column widths to stored widths BEFORE resize starts\n  const syncColumnWidthsBeforeResize = useCallback(() => {\n    if (tableRef.current && !hasSyncedWidths) {\n      const headerCells = tableRef.current.querySelectorAll(\n        \"th:not([data-spacer])\"\n      )\n      const columns = table.getVisibleLeafColumns()\n\n      if (headerCells.length === columns.length) {\n        const newSizing: Record<string, number> = {}\n\n        headerCells.forEach((cell, index) => {\n          const column = columns[index]\n          if (column) {\n            newSizing[column.id] = Math.round(\n              cell.getBoundingClientRect().width\n            )\n          }\n        })\n\n        flushSync(() => {\n          setHasSyncedWidths(true)\n          table.setColumnSizing((prev) => ({ ...prev, ...newSizing }))\n        })\n      }\n    }\n  }, [table, hasSyncedWidths])\n\n  const isVirtual = Boolean(config?.enableVirtualization)\n\n  // Always call useVirtualizer to follow React hooks rules\n  // When virtualization is disabled, count=0 makes it effectively a no-op\n  const virtualizer = useVirtualizer({\n    count: isVirtual ? rows.length : 0,\n    getScrollElement: () => internalContainerRef.current,\n    estimateSize: () => config?.estimateRowHeight ?? DEFAULT_ROW_HEIGHT,\n    overscan: config?.overscan ?? DEFAULT_OVERSCAN,\n    enabled: isVirtual,\n  })\n\n  // Get column sizing and visibility state to trigger recalculation\n  const columnSizing = table.getState().columnSizing\n  const columnVisibility = table.getState().columnVisibility\n\n  // Calculate total column width from visible columns\n  const calculatedColumnSum = useMemo(() => {\n    const totalWidth = table.getVisibleLeafColumns().reduce((sum, col) => {\n      return sum + (col.getSize() ?? DEFAULT_COLUMN_WIDTH)\n    }, 0)\n    return totalWidth\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table, columnSizing, columnVisibility])\n\n  const WIDTH_BUFFER = 4\n  const tableWidth = useMemo(() => {\n    if (!hasSyncedWidths) {\n      return `calc(100% - ${WIDTH_BUFFER}px)`\n    }\n    return calculatedColumnSum\n      ? `${calculatedColumnSum}px`\n      : `calc(100% - ${WIDTH_BUFFER}px)`\n  }, [hasSyncedWidths, calculatedColumnSum])\n\n  // Calculate spacer width to fill remaining container space after resize\n  const spacerWidth = useMemo(() => {\n    if (!hasSyncedWidths || !containerWidth) return 0\n    return Math.max(0, containerWidth - calculatedColumnSum)\n  }, [hasSyncedWidths, containerWidth, calculatedColumnSum])\n\n  // If no children, render default header + body\n  const content = children ?? (\n    <>\n      <DataTableHeader />\n      <DataTableBody />\n    </>\n  )\n\n  const contentContextValue = useMemo(\n    () => ({ syncColumnWidthsBeforeResize, spacerWidth }),\n    [syncColumnWidthsBeforeResize, spacerWidth]\n  )\n\n  const virtualizerContextValue = useMemo(\n    () =>\n      isVirtual\n        ? { virtualizer, scrollContainerRef: internalContainerRef }\n        : null,\n    [isVirtual, virtualizer]\n  )\n\n  return (\n    <DataTableContentContext.Provider value={contentContextValue}>\n      <DataTableVirtualizerContext.Provider value={virtualizerContextValue}>\n        <div\n          ref={handleRef}\n          data-slot=\"data-table-content\"\n          {...{ [SLOT_ATTR]: \"data-table-content\" }}\n          data-fs-element=\"DataTable-Content\"\n          className={mergeClasses(\n            styles.container,\n            isResizing && styles.resizing,\n            className\n          )}\n          style={{\n            height: isVirtual ? config?.containerHeight : undefined,\n            ...style,\n          }}\n        >\n          <table\n            ref={tableRef}\n            data-slot=\"table\"\n            {...{ [SLOT_ATTR]: \"table\" }}\n            className={styles.table}\n            style={{ width: tableWidth }}\n          >\n            {content}\n          </table>\n        </div>\n      </DataTableVirtualizerContext.Provider>\n    </DataTableContentContext.Provider>\n  )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeZenithStyles","boxModel","shorthands","tokens.textSm","tokens.leadingSm","DataTableContent","React","children","className","style","ref","styles","table","config","disableColumnResizing","useDataTable","isResizing","_a","internalContainerRef","useRef","tableRef","hasSyncedWidths","setHasSyncedWidths","useState","containerWidth","setContainerWidth","rows","handleRef","useCallback","node","useEffect","container","observer","entries","syncColumnWidthsBeforeResize","headerCells","columns","newSizing","cell","index","column","flushSync","prev","isVirtual","virtualizer","useVirtualizer","DEFAULT_ROW_HEIGHT","DEFAULT_OVERSCAN","columnSizing","columnVisibility","calculatedColumnSum","useMemo","sum","col","WIDTH_BUFFER","tableWidth","spacerWidth","content","jsxs","Fragment","jsx","DataTableHeader","DataTableBody","contentContextValue","virtualizerContextValue","DataTableContentContext","DataTableVirtualizerContext","SLOT_ATTR","mergeClasses"],"mappings":"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"}

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

@@ -1,10 +1,11 @@
-import { jsx as t, jsxs as g, Fragment as d } from "react/jsx-runtime";
-import * as p from "react";
-import { mergeClasses as h, SLOT_ATTR as T, shorthands as r } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as q } from "../../styles/make-styles.js";
-import { spacingGroup1 as f, grayA11 as x, leadingSm as u, textSm as y, grayA12 as w, fontWeightMedium as v, leadingBase as S, textBase as B, spacingElement2 as Z, errorA11 as A, spacingElement1 as E, spacingLayout2 as N } from "../../tokens/index.js";
-import { Button as b } from "../button/button.js";
-const C = (o) => /* @__PURE__ */ t(
+import { jsx as t, jsxs as d, Fragment as p } from "react/jsx-runtime";
+import * as h from "react";
+import { mergeClasses as T, SLOT_ATTR as q, shorthands as r } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as f } from "../../styles/make-styles.js";
+import { boxModel as o } from "../../styles/host-reset.js";
+import { spacingGroup1 as x, grayA11 as u, leadingSm as y, textSm as w, grayA12 as v, fontWeightMedium as S, leadingBase as B, textBase as Z, spacingElement2 as b, errorA11 as A, spacingElement1 as E, spacingLayout2 as N } from "../../tokens/index.js";
+import { Button as C } from "../button/button.js";
+const j = (i) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12,11 +13,12 @@ const C = (o) => /* @__PURE__ */ t(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...o,
+    ...i,
     children: /* @__PURE__ */ t("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" })
   }
-), j = q({
+), k = f({
   root: {
+    ...o,
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -26,50 +28,52 @@ const C = (o) => /* @__PURE__ */ t(
     textAlign: "center"
   },
   icon: {
+    ...o,
     width: "2.5rem",
     height: "2.5rem",
     color: A,
-    marginBottom: Z
+    marginBottom: b
   },
   title: {
-    fontSize: B,
-    lineHeight: S,
-    fontWeight: v,
-    color: w,
+    fontSize: Z,
+    lineHeight: B,
+    fontWeight: S,
+    color: v,
     ...r.margin(0)
   },
   description: {
-    fontSize: y,
-    lineHeight: u,
-    color: x,
+    ...o,
+    fontSize: w,
+    lineHeight: y,
+    color: u,
     maxWidth: "28rem",
     ...r.margin(0)
   },
   retry: {
-    marginTop: f
+    marginTop: x
   }
-}), I = p.forwardRef(function({ title: n, description: i, retryLabel: l, onRetry: a, className: s, children: m }, c) {
-  const e = j();
+}), L = h.forwardRef(function({ title: l, description: a, retryLabel: s, onRetry: n, className: m, children: c }, g) {
+  const e = k();
   return /* @__PURE__ */ t(
     "div",
     {
-      ref: c,
+      ref: g,
       "data-slot": "data-table-error",
-      [T]: "data-table-error",
+      [q]: "data-table-error",
       role: "alert",
-      className: h(e.root, s),
-      children: m ?? /* @__PURE__ */ g(d, { children: [
-        /* @__PURE__ */ t(C, { className: e.icon }),
-        /* @__PURE__ */ t("p", { className: e.title, children: n }),
-        i && /* @__PURE__ */ t("p", { className: e.description, children: i }),
-        a && /* @__PURE__ */ t(
-          b,
+      className: T(e.root, m),
+      children: c ?? /* @__PURE__ */ d(p, { children: [
+        /* @__PURE__ */ t(j, { className: e.icon }),
+        /* @__PURE__ */ t("p", { className: e.title, children: l }),
+        a && /* @__PURE__ */ t("p", { className: e.description, children: a }),
+        n && /* @__PURE__ */ t(
+          C,
           {
             variant: "secondary",
             size: "sm",
-            onClick: a,
+            onClick: n,
             className: e.retry,
-            children: l
+            children: s
           }
         )
       ] })
@@ -77,6 +81,6 @@ const C = (o) => /* @__PURE__ */ t(
   );
 });
 export {
-  I as DataTableError
+  L as DataTableError
 };
 //# sourceMappingURL=data-table-error.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-error.js","sources":["../../../src/components/data-table/data-table-error.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } 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\"\nimport { Button } from \"../button/button\"\n\nconst ErrorIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement1,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n    textAlign: \"center\",\n  },\n  icon: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.errorA11,\n    marginBottom: tokens.spacingElement2,\n  },\n  title: {\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightMedium,\n    color: tokens.grayA12,\n    ...shorthands.margin(0),\n  },\n  description: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n    maxWidth: \"28rem\",\n    ...shorthands.margin(0),\n  },\n  retry: {\n    marginTop: tokens.spacingGroup1,\n  },\n})\n\nexport type DataTableErrorProps = {\n  /** Error title text */\n  title?: string\n  /** Error description/message */\n  description?: ReactNode\n  /** Retry button text */\n  retryLabel?: string\n  /** Callback when retry is clicked */\n  onRetry?: () => void\n  /** Additional class name */\n  className?: string\n  /** Custom error content (overrides default error display) */\n  children?: ReactNode\n}\n\n/**\n * Error state display for DataTable.\n * Shows an error icon, message, and optional retry button.\n */\nexport const DataTableError = React.forwardRef<\n  HTMLDivElement,\n  DataTableErrorProps\n>(function DataTableError(\n  { title, description, retryLabel, onRetry, className, children },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-error\"\n      {...{ [SLOT_ATTR]: \"data-table-error\" }}\n      role=\"alert\"\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? (\n        <>\n          <ErrorIcon className={styles.icon} />\n          <p className={styles.title}>{title}</p>\n          {description && <p className={styles.description}>{description}</p>}\n          {onRetry && (\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={onRetry}\n              className={styles.retry}\n            >\n              {retryLabel}\n            </Button>\n          )}\n        </>\n      )}\n    </div>\n  )\n})\n"],"names":["ErrorIcon","props","jsx","useStyles","makeZenithStyles","tokens.spacingElement1","shorthands","tokens.spacingLayout2","tokens.errorA11","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.fontWeightMedium","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.spacingGroup1","DataTableError","React","title","description","retryLabel","onRetry","className","children","ref","styles","SLOT_ATTR","mergeClasses","jsxs","Fragment","Button"],"mappings":";;;;;;AASA,MAAMA,IAAY,CAACC,MACjB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,kfAAA,CAAkf;AAAA,EAAA;AAC5f,GAGIC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,IAChD,WAAW;AAAA,EAAA;AAAA,EAEb,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOC;AAAAA,IACP,cAAcC;AAAAA,EAAO;AAAA,EAEvB,OAAO;AAAA,IACL,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,IACP,GAAGP,EAAW,OAAO,CAAC;AAAA,EAAA;AAAA,EAExB,aAAa;AAAA,IACX,UAAUQ;AAAAA,IACV,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,IACP,UAAU;AAAA,IACV,GAAGV,EAAW,OAAO,CAAC;AAAA,EAAA;AAAA,EAExB,OAAO;AAAA,IACL,WAAWW;AAAAA,EAAO;AAEtB,CAAC,GAqBYC,IAAiBC,EAAM,WAGlC,SACA,EAAE,OAAAC,GAAO,aAAAC,GAAa,YAAAC,GAAY,SAAAC,GAAS,WAAAC,GAAW,UAAAC,EAAA,GACtDC,GACA;AACA,QAAMC,IAASxB,EAAA;AAEf,SACE,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAwB;AAAA,MACA,aAAU;AAAA,MACJ,CAACE,CAAS,GAAG;AAAA,MACnB,MAAK;AAAA,MACL,WAAWC,EAAaF,EAAO,MAAMH,CAAS;AAAA,MAE7C,eACC,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAA7B,EAACF,GAAA,EAAU,WAAW2B,EAAO,KAAA,CAAM;AAAA,QACnC,gBAAAzB,EAAC,KAAA,EAAE,WAAWyB,EAAO,OAAQ,UAAAP,GAAM;AAAA,QAClCC,KAAe,gBAAAnB,EAAC,KAAA,EAAE,WAAWyB,EAAO,aAAc,UAAAN,GAAY;AAAA,QAC9DE,KACC,gBAAArB;AAAA,UAAC8B;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAST;AAAA,YACT,WAAWI,EAAO;AAAA,YAEjB,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"data-table-error.js","sources":["../../../src/components/data-table/data-table-error.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } 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\"\nimport { Button } from \"../button/button\"\n\nconst ErrorIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement1,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n    textAlign: \"center\",\n  },\n  icon: {\n    ...boxModel,\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.errorA11,\n    marginBottom: tokens.spacingElement2,\n  },\n  title: {\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightMedium,\n    color: tokens.grayA12,\n    ...shorthands.margin(0),\n  },\n  description: {\n    ...boxModel,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n    maxWidth: \"28rem\",\n    ...shorthands.margin(0),\n  },\n  retry: {\n    marginTop: tokens.spacingGroup1,\n  },\n})\n\nexport type DataTableErrorProps = {\n  /** Error title text */\n  title?: string\n  /** Error description/message */\n  description?: ReactNode\n  /** Retry button text */\n  retryLabel?: string\n  /** Callback when retry is clicked */\n  onRetry?: () => void\n  /** Additional class name */\n  className?: string\n  /** Custom error content (overrides default error display) */\n  children?: ReactNode\n}\n\n/**\n * Error state display for DataTable.\n * Shows an error icon, message, and optional retry button.\n */\nexport const DataTableError = React.forwardRef<\n  HTMLDivElement,\n  DataTableErrorProps\n>(function DataTableError(\n  { title, description, retryLabel, onRetry, className, children },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-error\"\n      {...{ [SLOT_ATTR]: \"data-table-error\" }}\n      role=\"alert\"\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? (\n        <>\n          <ErrorIcon className={styles.icon} />\n          <p className={styles.title}>{title}</p>\n          {description && <p className={styles.description}>{description}</p>}\n          {onRetry && (\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={onRetry}\n              className={styles.retry}\n            >\n              {retryLabel}\n            </Button>\n          )}\n        </>\n      )}\n    </div>\n  )\n})\n"],"names":["ErrorIcon","props","jsx","useStyles","makeZenithStyles","boxModel","tokens.spacingElement1","shorthands","tokens.spacingLayout2","tokens.errorA11","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.fontWeightMedium","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.spacingGroup1","DataTableError","React","title","description","retryLabel","onRetry","className","children","ref","styles","SLOT_ATTR","mergeClasses","jsxs","Fragment","Button"],"mappings":";;;;;;;AAUA,MAAMA,IAAY,CAACC,MACjB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,kfAAA,CAAkf;AAAA,EAAA;AAC5f,GAGIC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,IAChD,WAAW;AAAA,EAAA;AAAA,EAEb,MAAM;AAAA,IACJ,GAAGH;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOI;AAAAA,IACP,cAAcC;AAAAA,EAAO;AAAA,EAEvB,OAAO;AAAA,IACL,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,IACP,GAAGP,EAAW,OAAO,CAAC;AAAA,EAAA;AAAA,EAExB,aAAa;AAAA,IACX,GAAGF;AAAA,IACH,UAAUU;AAAAA,IACV,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,IACP,UAAU;AAAA,IACV,GAAGV,EAAW,OAAO,CAAC;AAAA,EAAA;AAAA,EAExB,OAAO;AAAA,IACL,WAAWW;AAAAA,EAAO;AAEtB,CAAC,GAqBYC,IAAiBC,EAAM,WAGlC,SACA,EAAE,OAAAC,GAAO,aAAAC,GAAa,YAAAC,GAAY,SAAAC,GAAS,WAAAC,GAAW,UAAAC,EAAA,GACtDC,GACA;AACA,QAAMC,IAASzB,EAAA;AAEf,SACE,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAyB;AAAA,MACA,aAAU;AAAA,MACJ,CAACE,CAAS,GAAG;AAAA,MACnB,MAAK;AAAA,MACL,WAAWC,EAAaF,EAAO,MAAMH,CAAS;AAAA,MAE7C,eACC,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAA9B,EAACF,GAAA,EAAU,WAAW4B,EAAO,KAAA,CAAM;AAAA,QACnC,gBAAA1B,EAAC,KAAA,EAAE,WAAW0B,EAAO,OAAQ,UAAAP,GAAM;AAAA,QAClCC,KAAe,gBAAApB,EAAC,KAAA,EAAE,WAAW0B,EAAO,aAAc,UAAAN,GAAY;AAAA,QAC9DE,KACC,gBAAAtB;AAAA,UAAC+B;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAST;AAAA,YACT,WAAWI,EAAO;AAAA,YAEjB,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

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

@@ -2,30 +2,32 @@ import { jsx as s } from "react/jsx-runtime";
 import * as l from "react";
 import { mergeClasses as m, SLOT_ATTR as n, shorthands as i } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as f } from "../../styles/make-styles.js";
-import { spacingGroup2 as p, spacingElement3 as c } from "../../tokens/index.js";
-const d = f({
+import { boxModel as p } from "../../styles/host-reset.js";
+import { spacingGroup2 as d, spacingElement3 as c } from "../../tokens/index.js";
+const b = f({
   root: {
+    ...p,
     display: "flex",
     alignItems: "center",
-    gap: p,
+    gap: d,
     ...i.paddingBlock(c)
   }
-}), h = l.forwardRef(function({ className: t, children: o, ...a }, e) {
-  const r = d();
+}), D = l.forwardRef(function({ className: t, children: o, ...e }, a) {
+  const r = b();
   return /* @__PURE__ */ s(
     "div",
     {
-      ref: e,
+      ref: a,
       "data-slot": "data-table-footer",
       [n]: "data-table-footer",
       "data-fs-element": "DataTable-Footer",
       className: m(r.root, t),
-      ...a,
+      ...e,
       children: o
     }
   );
 });
 export {
-  h as DataTableFooter
+  D as DataTableFooter
 };
 //# sourceMappingURL=data-table-footer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-footer.js","sources":["../../../src/components/data-table/data-table-footer.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    gap: tokens.spacingGroup2,\n    ...shorthands.paddingBlock(tokens.spacingElement3),\n  },\n})\n\nexport type DataTableFooterProps = React.ComponentProps<\"div\">\n\n/**\n * A footer wrapper for DataTable that sits between the table content and pagination.\n * Use for custom actions like \"Show more\" links or summary information.\n */\nexport const DataTableFooter = React.forwardRef<\n  HTMLDivElement,\n  DataTableFooterProps\n>(function DataTableFooter({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-footer\"\n      {...{ [SLOT_ATTR]: \"data-table-footer\" }}\n      data-fs-element=\"DataTable-Footer\"\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.spacingGroup2","shorthands","tokens.spacingElement3","DataTableFooter","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,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAsB;AAAA,EAAA;AAErD,CAAC,GAQYC,IAAkBC,EAAM,WAGnC,SAAyB,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AACjE,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-footer.js","sources":["../../../src/components/data-table/data-table-footer.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    gap: tokens.spacingGroup2,\n    ...shorthands.paddingBlock(tokens.spacingElement3),\n  },\n})\n\nexport type DataTableFooterProps = React.ComponentProps<\"div\">\n\n/**\n * A footer wrapper for DataTable that sits between the table content and pagination.\n * Use for custom actions like \"Show more\" links or summary information.\n */\nexport const DataTableFooter = React.forwardRef<\n  HTMLDivElement,\n  DataTableFooterProps\n>(function DataTableFooter({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-footer\"\n      {...{ [SLOT_ATTR]: \"data-table-footer\" }}\n      data-fs-element=\"DataTable-Footer\"\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.spacingGroup2","shorthands","tokens.spacingElement3","DataTableFooter","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,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAsB;AAAA,EAAA;AAErD,CAAC,GAQYC,IAAkBC,EAAM,WAGnC,SAAyB,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AACjE,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-header-draggable.js

@@ -1,12 +1,13 @@
-import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
 import * as c from "react";
-import { useSortable as D } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
-import { CSS as T } from "../../vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js";
-import { SLOT_ATTR as r, mergeClasses as C, shorthands as s } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as H } from "../../styles/make-styles.js";
-import { accentA8 as N, grayA12 as R, grayA8 as k } from "../../tokens/index.js";
-import { TableHead as A } from "../table/table.js";
-const I = (n) => /* @__PURE__ */ d(
+import { useSortable as T } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
+import { CSS as C } from "../../vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js";
+import { SLOT_ATTR as r, mergeClasses as H, shorthands as s } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as N } from "../../styles/make-styles.js";
+import { boxModel as d, nativeControl as R } from "../../styles/host-reset.js";
+import { accentA8 as k, grayA12 as A, grayA8 as I } from "../../tokens/index.js";
+import { TableHead as W } from "../table/table.js";
+const j = (n) => /* @__PURE__ */ g(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -24,7 +25,7 @@ const I = (n) => /* @__PURE__ */ d(
       /* @__PURE__ */ a("circle", { cx: "15", cy: "19", r: "1.5" })
     ]
   }
-), W = H({
+), B = N({
   root: {
     // When not disabled, hovering over the cell reveals the drag handle
     [`&:hover [${r}="data-table-header-drag-handle"]`]: {
@@ -36,12 +37,13 @@ const I = (n) => /* @__PURE__ */ d(
     alignItems: "center"
   },
   dragHandle: {
+    ...R,
     display: "inline-flex",
     flexShrink: 0,
     cursor: "grab",
     touchAction: "none",
     alignItems: "center",
-    color: k,
+    color: I,
     opacity: 0,
     transitionProperty: "opacity",
     transitionDuration: "150ms",
@@ -51,66 +53,68 @@ const I = (n) => /* @__PURE__ */ d(
     ...s.borderWidth(0),
     ...s.padding(0),
     "&:hover": {
-      color: R
+      color: A
     },
     "&:focus-visible": {
       opacity: 1,
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: N
+      outlineColor: k
     },
     "&:active": {
       cursor: "grabbing"
     }
   },
   content: {
+    ...d,
     minWidth: 0,
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%"
   },
   icon: {
+    ...d,
     width: "14px",
     height: "14px"
   }
-}), V = c.forwardRef(function({
-  headerId: g,
+}), _ = c.forwardRef(function({
+  headerId: m,
   disabled: o = !1,
   children: h,
-  style: m,
-  className: b,
-  ...f
+  style: b,
+  className: f,
+  ...p
 }, e) {
-  const t = W(), {
-    attributes: p,
-    listeners: x,
+  const t = B(), {
+    attributes: x,
+    listeners: y,
     setNodeRef: i,
-    transform: y,
-    transition: u,
+    transform: u,
+    transition: v,
     isDragging: S
-  } = D({ id: g, disabled: o }), v = c.useCallback(
+  } = T({ id: m, disabled: o }), w = c.useCallback(
     (l) => {
       i(l), typeof e == "function" ? e(l) : e && (e.current = l);
     },
     [i, e]
-  ), w = {
-    ...m,
-    transform: T.Transform.toString(y),
-    transition: u,
+  ), D = {
+    ...b,
+    transform: C.Transform.toString(u),
+    transition: v,
     ...S && { zIndex: 50, opacity: 0.8 }
   };
   return /* @__PURE__ */ a(
-    A,
+    W,
     {
-      ref: v,
-      style: w,
-      className: C(!o && t.root, b),
+      ref: w,
+      style: D,
+      className: H(!o && t.root, f),
       "data-slot": "data-table-header-draggable",
       [r]: "data-table-header-draggable",
       "data-fs-element": "DataTable-Header-Draggable",
-      ...f,
-      children: /* @__PURE__ */ d(
+      ...p,
+      children: /* @__PURE__ */ g(
         "div",
         {
           className: t.inner,
@@ -125,9 +129,9 @@ const I = (n) => /* @__PURE__ */ d(
                 "data-slot": "data-table-header-drag-handle",
                 [r]: "data-table-header-drag-handle",
                 "aria-label": "Drag to reorder column",
-                ...p,
                 ...x,
-                children: /* @__PURE__ */ a(I, { className: t.icon })
+                ...y,
+                children: /* @__PURE__ */ a(j, { className: t.icon })
               }
             ),
             /* @__PURE__ */ a(
@@ -146,6 +150,6 @@ const I = (n) => /* @__PURE__ */ d(
   );
 });
 export {
-  V as DataTableHeaderDraggable
+  _ as DataTableHeaderDraggable
 };
 //# sourceMappingURL=data-table-header-draggable.js.map