@epilot/zenith-react 0.1.0-next.0

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

@@ -0,0 +1,79 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as b from "react";
+import { shorthands as n } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as w } from "../../styles/make-styles.js";
+import { Button as D } from "../button/button.js";
+import { DropdownMenu as y, DropdownMenuTrigger as C, DropdownMenuContent as x, DropdownMenuLabel as T, DropdownMenuSeparator as M, DropdownMenuCheckboxItem as V } from "../dropdown-menu/dropdown-menu.js";
+import { useDataTable as v } from "./hooks/use-data-table.js";
+const S = (r) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 -960 960 960",
+    fill: "currentColor",
+    ...r,
+    children: /* @__PURE__ */ t("path", { d: "M413.09-65.87q-16.26 0-28.68-9.85Q372-85.56 370-101.83l-15-94.56q-15.61-5.31-34.07-15.89-18.45-10.59-31.63-21.33l-85.43 40q-15.7 6.57-31.96 1.78-16.26-4.78-24.82-20.04l-65.92-118.7q-9.13-14.13-5.34-30.1 3.78-15.98 17.47-26.11l79.44-59q-1.44-7.31-1.94-17.11-.5-9.81-.5-17.11 0-7.3.5-17.11.5-9.8 1.94-17.11L93.3-572.65q-14.26-10.13-17.76-26.11-3.5-15.98 5.63-30.67l65.92-118.7q8.56-14.13 24.54-19.48 15.98-5.35 31.67 1.22l87.13 40q12.61-10.18 30.79-20.48 18.17-10.3 33.78-15.17l15-95.57q2-16.83 14.41-26.96 12.42-10.13 28.68-10.13h133.82q16.26 0 28.68 10.13Q588-874.44 590-857.61l15 94.57q15.61 5.87 34.28 15.67 18.68 9.8 31.42 20.98l85.43-40q15.7-6.57 31.46-1.22 15.76 5.35 24.32 19.48l67.48 118.7q8.57 14.69 5.07 31.17-3.5 16.48-17.76 25.61l-80 56.43q1.43 8.31 2.21 18.11.79 9.81.79 18.11 0 8.3-.79 17.61-.78 9.3-2.21 17.61l80 57.43q14.26 9.13 17.76 25.61 3.5 16.48-5.07 31.17l-66.48 118.7q-8.56 14.7-24.54 19.76-15.98 5.07-31.67-1.5l-86.57-40q-13.17 10.74-30.85 21.55-17.67 10.8-34.28 15.67l-15 94.56q-2 16.27-14.41 26.11-12.42 9.85-28.68 9.85H413.09Zm27.43-79.22h78.39l14.57-111.43q33.56-8 63.91-25 30.35-17 54.35-42.7l106 46 34.91-64.65-92.87-67.87q4-17.56 6.78-34.63 2.79-17.06 2.79-34.63 0-17.57-2.29-34.63-2.28-17.07-7.28-34.63l93.44-67.87-35.48-64.65-105.44 46q-23-27.13-53.13-45.48-30.13-18.35-65.69-22.78l-14-110.87h-78.96l-13.43 110.87q-35.13 6.43-65.76 24.28-30.63 17.85-54.2 43.98l-104.87-46-35.48 64.65 92.31 67.3q-4 17.57-6.79 34.92-2.78 17.34-2.78 34.91 0 17.57 2.78 35.2 2.79 17.63 6.79 34.63l-92.31 67.3 35.48 64.65 104.87-46q24.57 25.13 55.2 42.7 30.63 17.56 64.76 25.56l13.43 110.87ZM478.87-350q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38ZM480-480Z" })
+  }
+), Z = w({
+  icon: {
+    width: "1rem",
+    height: "1rem"
+  },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    ...n.padding(0),
+    ...n.margin("-1px"),
+    ...n.overflow("hidden"),
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap"
+  }
+}), H = b.forwardRef(function({ icon: d, trigger: h, label: o, contentClassName: m, align: c = "end", ...p }, q) {
+  const { table: f } = v(), a = Z(), s = f.getAllColumns().filter((e) => e.getCanHide());
+  return s.length === 0 ? null : /* @__PURE__ */ l(y, { ref: q, ...p, children: [
+    /* @__PURE__ */ t(C, { asChild: !0, children: h ?? /* @__PURE__ */ l(
+      D,
+      {
+        variant: "tertiary",
+        size: "sm",
+        "data-fs-element": "DataTable-ColumnVisibility-Trigger",
+        children: [
+          d ?? /* @__PURE__ */ t(S, { className: a.icon }),
+          /* @__PURE__ */ t("span", { className: a.srOnly, children: o })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ l(
+      x,
+      {
+        align: c,
+        className: m,
+        "data-fs-element": "DataTable-ColumnVisibility-Content",
+        children: [
+          /* @__PURE__ */ t(T, { children: o }),
+          /* @__PURE__ */ t(M, {}),
+          s.map((e) => {
+            const i = e.columnDef.meta, g = (i == null ? void 0 : i.visibilityLabel) ?? (typeof e.columnDef.header == "string" ? e.columnDef.header : e.id);
+            return /* @__PURE__ */ t(
+              V,
+              {
+                checked: e.getIsVisible(),
+                onCheckedChange: (u) => e.toggleVisibility(!!u),
+                "data-fs-element": "DataTable-ColumnVisibility-Item",
+                children: g
+              },
+              e.id
+            );
+          })
+        ]
+      }
+    )
+  ] });
+});
+export {
+  H as DataTableColumnVisibility
+};
+//# sourceMappingURL=data-table-column-visibility.js.map

package/dist/components/data-table/data-table-column-visibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-visibility.js","sources":["../../../src/components/data-table/data-table-column-visibility.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { Button } from \"../button/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Settings/gear icon (default)\nconst IconSettings = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 -960 960 960\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M413.09-65.87q-16.26 0-28.68-9.85Q372-85.56 370-101.83l-15-94.56q-15.61-5.31-34.07-15.89-18.45-10.59-31.63-21.33l-85.43 40q-15.7 6.57-31.96 1.78-16.26-4.78-24.82-20.04l-65.92-118.7q-9.13-14.13-5.34-30.1 3.78-15.98 17.47-26.11l79.44-59q-1.44-7.31-1.94-17.11-.5-9.81-.5-17.11 0-7.3.5-17.11.5-9.8 1.94-17.11L93.3-572.65q-14.26-10.13-17.76-26.11-3.5-15.98 5.63-30.67l65.92-118.7q8.56-14.13 24.54-19.48 15.98-5.35 31.67 1.22l87.13 40q12.61-10.18 30.79-20.48 18.17-10.3 33.78-15.17l15-95.57q2-16.83 14.41-26.96 12.42-10.13 28.68-10.13h133.82q16.26 0 28.68 10.13Q588-874.44 590-857.61l15 94.57q15.61 5.87 34.28 15.67 18.68 9.8 31.42 20.98l85.43-40q15.7-6.57 31.46-1.22 15.76 5.35 24.32 19.48l67.48 118.7q8.57 14.69 5.07 31.17-3.5 16.48-17.76 25.61l-80 56.43q1.43 8.31 2.21 18.11.79 9.81.79 18.11 0 8.3-.79 17.61-.78 9.3-2.21 17.61l80 57.43q14.26 9.13 17.76 25.61 3.5 16.48-5.07 31.17l-66.48 118.7q-8.56 14.7-24.54 19.76-15.98 5.07-31.67-1.5l-86.57-40q-13.17 10.74-30.85 21.55-17.67 10.8-34.28 15.67l-15 94.56q-2 16.27-14.41 26.11-12.42 9.85-28.68 9.85H413.09Zm27.43-79.22h78.39l14.57-111.43q33.56-8 63.91-25 30.35-17 54.35-42.7l106 46 34.91-64.65-92.87-67.87q4-17.56 6.78-34.63 2.79-17.06 2.79-34.63 0-17.57-2.29-34.63-2.28-17.07-7.28-34.63l93.44-67.87-35.48-64.65-105.44 46q-23-27.13-53.13-45.48-30.13-18.35-65.69-22.78l-14-110.87h-78.96l-13.43 110.87q-35.13 6.43-65.76 24.28-30.63 17.85-54.2 43.98l-104.87-46-35.48 64.65 92.31 67.3q-4 17.57-6.79 34.92-2.78 17.34-2.78 34.91 0 17.57 2.78 35.2 2.79 17.63 6.79 34.63l-92.31 67.3 35.48 64.65 104.87-46q24.57 25.13 55.2 42.7 30.63 17.56 64.76 25.56l13.43 110.87ZM478.87-350q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38ZM480-480Z\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  icon: {\n    width: \"1rem\",\n    height: \"1rem\",\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    ...shorthands.padding(0),\n    ...shorthands.margin(\"-1px\"),\n    ...shorthands.overflow(\"hidden\"),\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nexport type DataTableColumnVisibilityProps = {\n  /** Custom icon for the default trigger button. Falls back to settings gear icon. */\n  icon?: ReactNode\n  /** Custom trigger element. Defaults to a settings icon button. */\n  trigger?: ReactNode\n  /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n  label: string\n  /** Additional class name for the dropdown content */\n  contentClassName?: string\n  /** Alignment of dropdown relative to trigger. Default: \"end\" */\n  align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/**\n * A dropdown menu for toggling column visibility in DataTable.\n * Shows checkboxes for each column that can be hidden.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnVisibility = React.forwardRef<\n  HTMLElement,\n  DataTableColumnVisibilityProps\n>(function DataTableColumnVisibility(\n  { icon, trigger, label, contentClassName, align = \"end\", ...props },\n  ref\n) {\n  const { table } = useDataTable()\n  const styles = useStyles()\n\n  // Get columns that can be hidden (excludes selection column, etc.)\n  const columns = table.getAllColumns().filter((column) => column.getCanHide())\n\n  // If no hideable columns, don't render anything\n  if (columns.length === 0) {\n    return null\n  }\n\n  return (\n    <DropdownMenu ref={ref} {...props}>\n      <DropdownMenuTrigger asChild>\n        {trigger ?? (\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            data-fs-element=\"DataTable-ColumnVisibility-Trigger\"\n          >\n            {icon ?? <IconSettings className={styles.icon} />}\n            <span className={styles.srOnly}>{label}</span>\n          </Button>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align={align}\n        className={contentClassName}\n        data-fs-element=\"DataTable-ColumnVisibility-Content\"\n      >\n        <DropdownMenuLabel>{label}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {columns.map((column) => {\n          // Get column header text for display\n          // Priority: meta.visibilityLabel > string header > column.id\n          const columnMeta = column.columnDef.meta as\n            { visibilityLabel?: string } | undefined\n          const headerText =\n            columnMeta?.visibilityLabel ??\n            (typeof column.columnDef.header === \"string\"\n              ? column.columnDef.header\n              : column.id)\n\n          return (\n            <DropdownMenuCheckboxItem\n              key={column.id}\n              checked={column.getIsVisible()}\n              onCheckedChange={(value) => column.toggleVisibility(!!value)}\n              data-fs-element=\"DataTable-ColumnVisibility-Item\"\n            >\n              {headerText}\n            </DropdownMenuCheckboxItem>\n          )\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n})\n"],"names":["IconSettings","props","jsx","useStyles","makeZenithStyles","shorthands","DataTableColumnVisibility","React","icon","trigger","label","contentClassName","align","ref","table","useDataTable","styles","columns","column","jsxs","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","columnMeta","headerText","DropdownMenuCheckboxItem","value"],"mappings":";;;;;;;AAiBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,iqDAAA,CAAiqD;AAAA,EAAA;AAC3qD,GAGIC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAGC,EAAW,QAAQ,CAAC;AAAA,IACvB,GAAGA,EAAW,OAAO,MAAM;AAAA,IAC3B,GAAGA,EAAW,SAAS,QAAQ;AAAA,IAC/B,MAAM;AAAA,IACN,YAAY;AAAA,EAAA;AAEhB,CAAC,GAoBYC,IAA4BC,EAAM,WAG7C,SACA,EAAE,MAAAC,GAAM,SAAAC,GAAS,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,IAAQ,OAAO,GAAGX,EAAA,GAC5DY,GACA;AACA,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZC,IAASb,EAAA,GAGTc,IAAUH,EAAM,cAAA,EAAgB,OAAO,CAACI,MAAWA,EAAO,YAAY;AAG5E,SAAID,EAAQ,WAAW,IACd,OAIP,gBAAAE,EAACC,GAAA,EAAa,KAAAP,GAAW,GAAGZ,GAC1B,UAAA;AAAA,IAAA,gBAAAC,EAACmB,GAAA,EAAoB,SAAO,IACzB,UAAAZ,KACC,gBAAAU;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,mBAAgB;AAAA,QAEf,UAAA;AAAA,UAAAd,KAAQ,gBAAAN,EAACF,GAAA,EAAa,WAAWgB,EAAO,MAAM;AAAA,UAC/C,gBAAAd,EAAC,QAAA,EAAK,WAAWc,EAAO,QAAS,UAAAN,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAG7C;AAAA,IACA,gBAAAS;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,OAAAX;AAAA,QACA,WAAWD;AAAA,QACX,mBAAgB;AAAA,QAEhB,UAAA;AAAA,UAAA,gBAAAT,EAACsB,KAAmB,UAAAd,EAAA,CAAM;AAAA,4BACzBe,GAAA,EAAsB;AAAA,UACtBR,EAAQ,IAAI,CAACC,MAAW;AAGvB,kBAAMQ,IAAaR,EAAO,UAAU,MAE9BS,KACJD,KAAA,gBAAAA,EAAY,qBACX,OAAOR,EAAO,UAAU,UAAW,WAChCA,EAAO,UAAU,SACjBA,EAAO;AAEb,mBACE,gBAAAhB;AAAA,cAAC0B;AAAA,cAAA;AAAA,gBAEC,SAASV,EAAO,aAAA;AAAA,gBAChB,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,gBAC3D,mBAAgB;AAAA,gBAEf,UAAAF;AAAA,cAAA;AAAA,cALIT,EAAO;AAAA,YAAA;AAAA,UAQlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

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

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

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

@@ -0,0 +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 { 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 { DataTableContentContext } 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}\n\n/**\n * Container component for DataTable that handles the table structure.\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 }, ref) {\n  const styles = useStyles()\n  const { table, 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\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  // 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  return (\n    <DataTableContentContext.Provider value={contentContextValue}>\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      >\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    </DataTableContentContext.Provider>\n  )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeZenithStyles","shorthands","tokens.textSm","tokens.leadingSm","DataTableContent","React","children","className","ref","styles","table","disableColumnResizing","useDataTable","isResizing","_a","internalContainerRef","useRef","tableRef","hasSyncedWidths","setHasSyncedWidths","useState","containerWidth","setContainerWidth","handleRef","useCallback","node","useEffect","container","observer","entries","syncColumnWidthsBeforeResize","headerCells","columns","newSizing","cell","index","column","flushSync","prev","columnSizing","columnVisibility","calculatedColumnSum","useMemo","sum","col","WIDTH_BUFFER","tableWidth","spacerWidth","content","jsxs","Fragment","jsx","DataTableHeader","DataTableBody","contentContextValue","DataTableContentContext","SLOT_ATTR","mergeClasses"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import { createContext as t } from "react";
+const n = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  t(null)
+), o = t(null);
+export {
+  o as DataTableContentContext,
+  n as DataTableContext
+};
+//# sourceMappingURL=data-table-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-context.js","sources":["../../../src/components/data-table/data-table-context.tsx"],"sourcesContent":["import { createContext } from \"react\"\nimport type { MouseEvent } from \"react\"\nimport type {\n  Table as TanstackTable,\n  PaginationState,\n  Row,\n} from \"@tanstack/react-table\"\n\n// =============================================================================\n// Configuration Constants\n// =============================================================================\n\n/**\n * @no-host-element Constant configuration value.\n */\nexport const DEFAULT_ROW_HEIGHT = 48\n\n/**\n * @no-host-element Constant configuration value.\n */\nexport const DEFAULT_OVERSCAN = 10\n\n/**\n * @no-host-element Constant configuration value.\n */\nexport const DEFAULT_CONTAINER_HEIGHT = 600\n\n/** Controls how cell content handles overflow */\nexport type DataTableCellOverflow = \"grow\" | \"wrap\" | \"truncate\"\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type DataTablePaginationConfig = {\n  /** Controlled page index (0-indexed) */\n  pageIndex?: number\n  /** Page size (items per page). Default: 10 */\n  pageSize?: number\n  /** Available page size options. Default: [10, 25, 50, 100] */\n  pageSizeOptions?: number[]\n  /** Total items count for server-side pagination */\n  totalItems?: number\n  /** Total page count for server-side pagination (optional if totalItems provided) */\n  pageCount?: number\n  /** Callback for pagination state changes */\n  onPaginationChange?: (state: PaginationState) => void\n}\n\nexport type DataTableContextValue<TData> = {\n  table: TanstackTable<TData>\n  pagination?: DataTablePaginationConfig\n  /** Handler called when a row is clicked. Enables clickable row mode. */\n  onRowClick?: (row: Row<TData>, event: MouseEvent<HTMLTableRowElement>) => void\n  /** Custom hover class for clickable rows. Default: 'hover:bg-accent-a3' */\n  clickableRowClassName?: string\n  /** Custom class for selected rows. Default: 'data-[state=selected]:bg-accent-a3' */\n  selectedRowClassName?: string\n  /** Controls how cell content handles overflow. 'grow' expands cells (default), 'wrap' wraps text, 'truncate' shows ellipsis. */\n  cellOverflow?: DataTableCellOverflow\n  /** Whether column resizing is disabled (enabled by default) */\n  disableColumnResizing?: boolean\n  /** Show bottom border on header row. Default: true */\n  showHeaderBorder?: boolean\n  /** Show bottom borders on data rows. Default: true */\n  showRowBorders?: boolean\n  /** Ensure columns have minimum width to fit header content (prevents hover clipping on sortable headers) */\n  fitHeaderWidth?: boolean\n}\n\nexport type DataTableContentContextValue = {\n  /** Sync column widths to visual values before resize starts (prevents snap/jump) */\n  syncColumnWidthsBeforeResize: () => void\n  /** Width of the spacer column to fill remaining container space (0 if columns fill or exceed container) */\n  spacerWidth: number\n} | null\n\n// =============================================================================\n// Context\n// =============================================================================\n\n/**\n * Context for accessing table instance in compound components\n * @no-host-element Context object, renders no DOM element.\n */\nexport const DataTableContext =\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  createContext<DataTableContextValue<any> | null>(null)\n\n/**\n * Context for content-level functions (sync widths before resize)\n * @no-host-element Context object, renders no DOM element.\n */\nexport const DataTableContentContext =\n  createContext<DataTableContentContextValue>(null)\n"],"names":["DataTableContext","createContext","DataTableContentContext"],"mappings":";AAqFO,MAAMA;AAAA;AAAA,EAEXC,EAAiD,IAAI;AAAA,GAM1CC,IACXD,EAA4C,IAAI;"}

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

@@ -0,0 +1,82 @@
+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(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px",
+    fill: "currentColor",
+    ...o,
+    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({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: E,
+    ...r.paddingBlock(N),
+    textAlign: "center"
+  },
+  icon: {
+    width: "2.5rem",
+    height: "2.5rem",
+    color: A,
+    marginBottom: Z
+  },
+  title: {
+    fontSize: B,
+    lineHeight: S,
+    fontWeight: v,
+    color: w,
+    ...r.margin(0)
+  },
+  description: {
+    fontSize: y,
+    lineHeight: u,
+    color: x,
+    maxWidth: "28rem",
+    ...r.margin(0)
+  },
+  retry: {
+    marginTop: f
+  }
+}), I = p.forwardRef(function({ title: n, description: i, retryLabel: l, onRetry: a, className: s, children: m }, c) {
+  const e = j();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: c,
+      "data-slot": "data-table-error",
+      [T]: "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,
+          {
+            variant: "secondary",
+            size: "sm",
+            onClick: a,
+            className: e.retry,
+            children: l
+          }
+        )
+      ] })
+    }
+  );
+});
+export {
+  I as DataTableError
+};
+//# sourceMappingURL=data-table-error.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,98 @@
+import { jsx as a, jsxs as L } from "react/jsx-runtime";
+import * as P from "react";
+import { flexRender as W } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
+import { SLOT_ATTR as z, shorthands as I, mergeClasses as k } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as O } from "../../styles/make-styles.js";
+import { grayA6 as _, gray2 as A, fontWeightSemibold as F } from "../../tokens/index.js";
+import { TableHeader as N, TableRow as $, TableHead as g } from "../table/table.js";
+import { getPinnedColumnOffset as j, isLastLeftPinnedColumn as U, isFirstRightPinnedColumn as E } from "./data-table-pinning-utils.js";
+import { useDataTable as Z } from "./hooks/use-data-table.js";
+import { useDataTableContent as q } from "./hooks/use-data-table-content.js";
+const B = 150, G = O({
+  headerTitle: {
+    display: "block",
+    ...I.overflow("hidden"),
+    whiteSpace: "nowrap",
+    fontWeight: F
+  },
+  shadowLeft: {
+    boxShadow: "2px 0 5px -2px rgba(0,0,0,0.1)"
+  },
+  shadowRight: {
+    boxShadow: "-2px 0 5px -2px rgba(0,0,0,0.1)"
+  }
+}), it = P.forwardRef(function({ className: u, sticky: h = !1, stickyBackground: c = A }, b) {
+  const d = G(), { table: i, disableColumnResizing: x, showHeaderBorder: S, fitHeaderWidth: v } = Z(), m = !x, l = q(), p = (l == null ? void 0 : l.spacerWidth) ?? 0, o = h, w = (s) => s.map((t) => {
+    const e = t.column.getIsPinned(), f = e ? j(t.column, i) : void 0, T = U(t.column, i), R = E(t.column, i), r = t.column.columnDef.meta, y = r == null ? void 0 : r.align, C = {
+      width: m || t.getSize() !== B ? t.getSize() : void 0,
+      minWidth: v ? "max-content" : void 0,
+      backgroundColor: o || e ? c : void 0,
+      position: o || e ? "sticky" : m ? "relative" : void 0,
+      top: o ? 0 : void 0,
+      left: e === "left" ? `${f}px` : void 0,
+      right: e === "right" ? `${f}px` : void 0,
+      zIndex: e ? 30 : o ? 10 : void 0,
+      // Reduce padding for sortable headers
+      ...(() => {
+        const n = t.column.columnDef.meta;
+        return (n == null ? void 0 : n._sortableHeaderWrapped) || t.column.getCanSort() && typeof t.column.columnDef.header == "function" ? (n == null ? void 0 : n.align) === "right" ? { paddingRight: 8 } : { paddingLeft: 8 } : {};
+      })()
+    }, H = t.column.getIsSorted() === "asc" ? "ascending" : t.column.getIsSorted() === "desc" ? "descending" : t.column.getCanSort() ? "none" : void 0, D = /* @__PURE__ */ a("span", { className: d.headerTitle, children: t.isPlaceholder ? null : W(t.column.columnDef.header, t.getContext()) });
+    return /* @__PURE__ */ a(
+      g,
+      {
+        align: y,
+        "aria-sort": H,
+        style: C,
+        className: k(
+          T && d.shadowLeft,
+          R && d.shadowRight
+        ),
+        children: D
+      },
+      t.id
+    );
+  });
+  return /* @__PURE__ */ a(
+    N,
+    {
+      ref: b,
+      "data-slot": "data-table-header",
+      [z]: "data-table-header",
+      "data-fs-element": "DataTable-Header",
+      className: u,
+      children: i.getHeaderGroups().map((s) => /* @__PURE__ */ L(
+        $,
+        {
+          noHover: !0,
+          style: {
+            boxShadow: S !== !1 ? `inset 0 -1px 0 0 ${_}` : "none"
+          },
+          children: [
+            w(s.headers),
+            p > 0 && /* @__PURE__ */ a(
+              g,
+              {
+                "data-spacer": !0,
+                "aria-hidden": "true",
+                style: {
+                  width: p,
+                  padding: 0,
+                  backgroundColor: o ? c : void 0,
+                  position: o ? "sticky" : void 0,
+                  top: o ? 0 : void 0,
+                  zIndex: o ? 5 : void 0
+                }
+              }
+            )
+          ]
+        },
+        s.id
+      ))
+    }
+  );
+});
+export {
+  it as DataTableHeader
+};
+//# sourceMappingURL=data-table-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header.js","sources":["../../../src/components/data-table/data-table-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { flexRender, type Header } 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 { TableHeader, TableRow, TableHead } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeZenithStyles({\n  headerTitle: {\n    display: \"block\",\n    ...shorthands.overflow(\"hidden\"),\n    whiteSpace: \"nowrap\",\n    fontWeight: tokens.fontWeightSemibold,\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 DataTableHeaderProps = {\n  /** Additional class name */\n  className?: string\n  /** Whether to make header sticky */\n  sticky?: boolean\n  /** Background color for sticky header. Default: tokens.gray2 */\n  stickyBackground?: string\n}\n\n/**\n * Renders the table header with column headers.\n * Must be used within a DataTable component.\n */\nexport const DataTableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableHeaderProps\n>(function DataTableHeader(\n  { className, sticky = false, stickyBackground = tokens.gray2 },\n  ref\n) {\n  const styles = useStyles()\n  const { table, disableColumnResizing, showHeaderBorder, fitHeaderWidth } =\n    useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const isSticky = sticky\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const renderHeaders = (headers: Header<any, unknown>[]) =>\n    headers.map((header) => {\n      const isPinned = header.column.getIsPinned()\n      const pinnedOffset = isPinned\n        ? getPinnedColumnOffset(header.column, table)\n        : undefined\n      const isLastLeft = isLastLeftPinnedColumn(header.column, table)\n      const isFirstRight = isFirstRightPinnedColumn(header.column, table)\n      const columnMeta = header.column.columnDef.meta as\n        { align?: \"left\" | \"center\" | \"right\" } | undefined\n      const align = columnMeta?.align\n\n      const cellStyle: React.CSSProperties = {\n        width: enableColumnResizing\n          ? header.getSize()\n          : header.getSize() !== DEFAULT_COLUMN_WIDTH\n            ? header.getSize()\n            : undefined,\n        minWidth: fitHeaderWidth ? \"max-content\" : undefined,\n        backgroundColor: isSticky || isPinned ? stickyBackground : undefined,\n        position:\n          isSticky || isPinned\n            ? \"sticky\"\n            : enableColumnResizing\n              ? \"relative\"\n              : undefined,\n        top: isSticky ? 0 : undefined,\n        left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n        right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n        zIndex: isPinned ? 30 : isSticky ? 10 : undefined,\n        // Reduce padding for sortable headers\n        ...(() => {\n          const meta = header.column.columnDef.meta as\n            | {\n                _sortableHeaderWrapped?: boolean\n                align?: \"left\" | \"right\" | \"center\"\n              }\n            | undefined\n          const shouldReducePadding =\n            meta?._sortableHeaderWrapped ||\n            (header.column.getCanSort() &&\n              typeof header.column.columnDef.header === \"function\")\n          if (!shouldReducePadding) return {}\n          return meta?.align === \"right\"\n            ? { paddingRight: 8 }\n            : { paddingLeft: 8 }\n        })(),\n      }\n\n      const ariaSort =\n        header.column.getIsSorted() === \"asc\"\n          ? (\"ascending\" as const)\n          : header.column.getIsSorted() === \"desc\"\n            ? (\"descending\" as const)\n            : header.column.getCanSort()\n              ? (\"none\" as const)\n              : undefined\n\n      const headerContent = (\n        <span className={styles.headerTitle}>\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n      )\n\n      return (\n        <TableHead\n          key={header.id}\n          align={align}\n          aria-sort={ariaSort}\n          style={cellStyle}\n          className={mergeClasses(\n            isLastLeft && styles.shadowLeft,\n            isFirstRight && styles.shadowRight\n          )}\n        >\n          {headerContent}\n        </TableHead>\n      )\n    })\n\n  return (\n    <TableHeader\n      ref={ref}\n      data-slot=\"data-table-header\"\n      {...{ [SLOT_ATTR]: \"data-table-header\" }}\n      data-fs-element=\"DataTable-Header\"\n      className={className}\n    >\n      {table.getHeaderGroups().map((headerGroup) => (\n        <TableRow\n          key={headerGroup.id}\n          noHover\n          style={{\n            boxShadow:\n              showHeaderBorder !== false\n                ? `inset 0 -1px 0 0 ${tokens.grayA6}`\n                : \"none\",\n          }}\n        >\n          {renderHeaders(headerGroup.headers)}\n          {/* Spacer cell - absorbs remaining width when columns < container */}\n          {spacerWidth > 0 && (\n            <TableHead\n              data-spacer\n              aria-hidden=\"true\"\n              style={{\n                width: spacerWidth,\n                padding: 0,\n                backgroundColor: isSticky ? stickyBackground : undefined,\n                position: isSticky ? \"sticky\" : undefined,\n                top: isSticky ? 0 : undefined,\n                zIndex: isSticky ? 5 : undefined,\n              }}\n            />\n          )}\n        </TableRow>\n      ))}\n    </TableHeader>\n  )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeZenithStyles","shorthands","tokens.fontWeightSemibold","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","useDataTable","enableColumnResizing","contentContext","useDataTableContent","spacerWidth","isSticky","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","meta","ariaSort","headerContent","jsx","flexRender","TableHead","mergeClasses","TableHeader","SLOT_ATTR","headerGroup","jsxs","TableRow","tokens.grayA6"],"mappings":";;;;;;;;;;AAgBA,MAAMA,IAAuB,KAEvBC,IAAYC,EAAiB;AAAA,EACjC,aAAa;AAAA,IACX,SAAS;AAAA,IACT,GAAGC,EAAW,SAAS,QAAQ;AAAA,IAC/B,YAAY;AAAA,IACZ,YAAYC;AAAAA,EAAO;AAAA,EAErB,YAAY;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAEf,CAAC,GAeYC,KAAkBC,EAAM,WAGnC,SACA,EAAE,WAAAC,GAAW,QAAAC,IAAS,IAAO,kBAAAC,IAAmBC,EAAO,GACvDC,GACA;AACA,QAAMC,IAASX,EAAA,GACT,EAAE,OAAAY,GAAO,uBAAAC,GAAuB,kBAAAC,GAAkB,gBAAAC,EAAA,IACtDC,EAAA,GACIC,IAAuB,CAACJ,GACxBK,IAAiBC,EAAA,GACjBC,KAAcF,KAAA,gBAAAA,EAAgB,gBAAe,GAE7CG,IAAWd,GAGXe,IAAgB,CAACC,MACrBA,EAAQ,IAAI,CAACC,MAAW;AACtB,UAAMC,IAAWD,EAAO,OAAO,YAAA,GACzBE,IAAeD,IACjBE,EAAsBH,EAAO,QAAQZ,CAAK,IAC1C,QACEgB,IAAaC,EAAuBL,EAAO,QAAQZ,CAAK,GACxDkB,IAAeC,EAAyBP,EAAO,QAAQZ,CAAK,GAC5DoB,IAAaR,EAAO,OAAO,UAAU,MAErCS,IAAQD,KAAA,gBAAAA,EAAY,OAEpBE,IAAiC;AAAA,MACrC,OAAOjB,KAEHO,EAAO,QAAA,MAAczB,IADrByB,EAAO,YAGL;AAAA,MACN,UAAUT,IAAiB,gBAAgB;AAAA,MAC3C,iBAAiBM,KAAYI,IAAWjB,IAAmB;AAAA,MAC3D,UACEa,KAAYI,IACR,WACAR,IACE,aACA;AAAA,MACR,KAAKI,IAAW,IAAI;AAAA,MACpB,MAAMI,MAAa,SAAS,GAAGC,CAAY,OAAO;AAAA,MAClD,OAAOD,MAAa,UAAU,GAAGC,CAAY,OAAO;AAAA,MACpD,QAAQD,IAAW,KAAKJ,IAAW,KAAK;AAAA;AAAA,MAExC,IAAI,MAAM;AACR,cAAMc,IAAOX,EAAO,OAAO,UAAU;AAUrC,gBAHEW,KAAA,gBAAAA,EAAM,2BACLX,EAAO,OAAO,WAAA,KACb,OAAOA,EAAO,OAAO,UAAU,UAAW,cAEvCW,KAAA,gBAAAA,EAAM,WAAU,UACnB,EAAE,cAAc,EAAA,IAChB,EAAE,aAAa,EAAA,IAHc,CAAA;AAAA,MAInC,GAAA;AAAA,IAAG,GAGCC,IACJZ,EAAO,OAAO,YAAA,MAAkB,QAC3B,cACDA,EAAO,OAAO,YAAA,MAAkB,SAC7B,eACDA,EAAO,OAAO,WAAA,IACX,SACD,QAEJa,IACJ,gBAAAC,EAAC,QAAA,EAAK,WAAW3B,EAAO,aACrB,UAAAa,EAAO,gBACJ,OACAe,EAAWf,EAAO,OAAO,UAAU,QAAQA,EAAO,WAAA,CAAY,GACpE;AAGF,WACE,gBAAAc;AAAA,MAACE;AAAA,MAAA;AAAA,QAEC,OAAAP;AAAA,QACA,aAAWG;AAAA,QACX,OAAOF;AAAA,QACP,WAAWO;AAAA,UACTb,KAAcjB,EAAO;AAAA,UACrBmB,KAAgBnB,EAAO;AAAA,QAAA;AAAA,QAGxB,UAAA0B;AAAA,MAAA;AAAA,MATIb,EAAO;AAAA,IAAA;AAAA,EAYlB,CAAC;AAEH,SACE,gBAAAc;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,KAAAhC;AAAA,MACA,aAAU;AAAA,MACJ,CAACiC,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAArC;AAAA,MAEC,UAAAM,EAAM,gBAAA,EAAkB,IAAI,CAACgC,MAC5B,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UAEC,SAAO;AAAA,UACP,OAAO;AAAA,YACL,WACEhC,MAAqB,KACjB,oBAAoBiC,CAAa,KACjC;AAAA,UAAA;AAAA,UAGP,UAAA;AAAA,YAAAzB,EAAcsB,EAAY,OAAO;AAAA,YAEjCxB,IAAc,KACb,gBAAAkB;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,eAAW;AAAA,gBACX,eAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,OAAOpB;AAAA,kBACP,SAAS;AAAA,kBACT,iBAAiBC,IAAWb,IAAmB;AAAA,kBAC/C,UAAUa,IAAW,WAAW;AAAA,kBAChC,KAAKA,IAAW,IAAI;AAAA,kBACpB,QAAQA,IAAW,IAAI;AAAA,gBAAA;AAAA,cACzB;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAvBGuB,EAAY;AAAA,MAAA,CA0BpB;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -0,0 +1,37 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as n from "react";
+import { mergeClasses as i, SLOT_ATTR as s, shorthands as l } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as m } from "../../styles/make-styles.js";
+import { grayA11 as c, spacingElement2 as d, spacingLayout2 as p } from "../../tokens/index.js";
+import { Spinner as f } from "../spinner/spinner.js";
+const g = m({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: d,
+    ...l.paddingBlock(p)
+  },
+  spinner: {
+    width: "2.5rem",
+    height: "2.5rem",
+    color: c
+  }
+}), L = n.forwardRef(function({ className: a, children: o }, r) {
+  const t = g();
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: r,
+      "data-slot": "data-table-loading",
+      [s]: "data-table-loading",
+      className: i(t.root, a),
+      children: o ?? /* @__PURE__ */ e(f, { className: t.spinner })
+    }
+  );
+});
+export {
+  L as DataTableLoading
+};
+//# sourceMappingURL=data-table-loading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-loading.js","sources":["../../../src/components/data-table/data-table-loading.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 { Spinner } from \"../spinner/spinner\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement2,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n  },\n  spinner: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableLoadingProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom loading content (overrides default spinner) */\n  children?: ReactNode\n}\n\n/**\n * Loading state display for DataTable.\n * Renders a centered spinner by default, or custom content when children are provided.\n */\nexport const DataTableLoading = React.forwardRef<\n  HTMLDivElement,\n  DataTableLoadingProps\n>(function DataTableLoading({ className, children }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-loading\"\n      {...{ [SLOT_ATTR]: \"data-table-loading\" }}\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? <Spinner className={styles.spinner} />}\n    </div>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.spacingElement2","shorthands","tokens.spacingLayout2","tokens.grayA11","DataTableLoading","React","className","children","ref","styles","jsx","SLOT_ATTR","mergeClasses","Spinner"],"mappings":";;;;;;AASA,MAAMA,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,EAAA;AAAA,EAElD,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOC;AAAAA,EAAO;AAElB,CAAC,GAaYC,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,EAAA,GAAYC,GAAK;AACxD,QAAMC,IAASX,EAAA;AAEf,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMH,CAAS;AAAA,MAE7C,UAAAC,KAAY,gBAAAG,EAACG,GAAA,EAAQ,WAAWJ,EAAO,QAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}

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

@@ -0,0 +1,30 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as m from "react";
+import { TablePagination as S } from "../table/table-pagination.js";
+import { useDataTable as c } from "./hooks/use-data-table.js";
+const f = [10, 25, 50, 100], z = m.forwardRef(function({ pageSizeOptions: n, siblingCount: s, labels: g, className: i }, l) {
+  const { table: t, pagination: e } = c(), r = n ?? (e == null ? void 0 : e.pageSizeOptions) ?? f, { pageIndex: p, pageSize: o } = t.getState().pagination, P = (e == null ? void 0 : e.totalItems) ?? ((e == null ? void 0 : e.pageCount) !== void 0 && e.pageCount >= 0 ? e.pageCount * o : t.getFilteredRowModel().rows.length);
+  return /* @__PURE__ */ d(
+    S,
+    {
+      ref: l,
+      "data-slot": "data-table-pagination",
+      "data-fs-element": "DataTable-Pagination",
+      page: p + 1,
+      totalItems: P,
+      pageSize: o,
+      onPageChange: (a) => t.setPageIndex(a - 1),
+      onPageSizeChange: (a) => {
+        t.setPageSize(a), t.setPageIndex(0);
+      },
+      pageSizeOptions: r,
+      siblingCount: s,
+      labels: g,
+      className: i
+    }
+  );
+});
+export {
+  z as DataTablePagination
+};
+//# sourceMappingURL=data-table-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.js","sources":["../../../src/components/data-table/data-table-pagination.tsx"],"sourcesContent":["import * as React from \"react\"\nimport {\n  TablePagination,\n  type TablePaginationLabels,\n} from \"../table/table-pagination\"\nimport { useDataTable } from \"./hooks\"\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100]\n\nexport type DataTablePaginationProps = {\n  /** Available page size options */\n  pageSizeOptions?: number[]\n  /** Number of sibling pages to show on each side of current page */\n  siblingCount?: number\n  /** Labels for i18n. See TablePaginationLabels for available options. */\n  labels?: TablePaginationLabels\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Pagination component that integrates with DataTable's Tanstack Table instance.\n * Must be used within a DataTable component.\n */\nexport const DataTablePagination = React.forwardRef<\n  HTMLDivElement,\n  DataTablePaginationProps\n>(function DataTablePagination(\n  { pageSizeOptions, siblingCount, labels, className },\n  ref\n) {\n  const { table, pagination } = useDataTable()\n\n  // Prop takes precedence, then pagination config, then default\n  const resolvedPageSizeOptions =\n    pageSizeOptions ?? pagination?.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS\n\n  const { pageIndex, pageSize } = table.getState().pagination\n\n  // For server-side pagination, use totalItems from config\n  // For client-side pagination, use filtered row count\n  const totalRows =\n    pagination?.totalItems ??\n    (pagination?.pageCount !== undefined && pagination.pageCount >= 0\n      ? pagination.pageCount * pageSize\n      : table.getFilteredRowModel().rows.length)\n\n  return (\n    <TablePagination\n      ref={ref}\n      data-slot=\"data-table-pagination\"\n      data-fs-element=\"DataTable-Pagination\"\n      page={pageIndex + 1} // Convert to 1-indexed\n      totalItems={totalRows}\n      pageSize={pageSize}\n      onPageChange={(page) => table.setPageIndex(page - 1)} // Convert back to 0-indexed\n      onPageSizeChange={(size) => {\n        table.setPageSize(size)\n        table.setPageIndex(0) // Reset to first page\n      }}\n      pageSizeOptions={resolvedPageSizeOptions}\n      siblingCount={siblingCount}\n      labels={labels}\n      className={className}\n    />\n  )\n})\n"],"names":["DEFAULT_PAGE_SIZE_OPTIONS","DataTablePagination","React","pageSizeOptions","siblingCount","labels","className","ref","table","pagination","useDataTable","resolvedPageSizeOptions","pageIndex","pageSize","totalRows","jsx","TablePagination","page","size"],"mappings":";;;;AAOA,MAAMA,IAA4B,CAAC,IAAI,IAAI,IAAI,GAAG,GAiBrCC,IAAsBC,EAAM,WAGvC,SACA,EAAE,iBAAAC,GAAiB,cAAAC,GAAc,QAAAC,GAAQ,WAAAC,EAAA,GACzCC,GACA;AACA,QAAM,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAA,GAGxBC,IACJR,MAAmBM,KAAA,gBAAAA,EAAY,oBAAmBT,GAE9C,EAAE,WAAAY,GAAW,UAAAC,EAAA,IAAaL,EAAM,WAAW,YAI3CM,KACJL,KAAA,gBAAAA,EAAY,iBACXA,KAAA,gBAAAA,EAAY,eAAc,UAAaA,EAAW,aAAa,IAC5DA,EAAW,YAAYI,IACvBL,EAAM,oBAAA,EAAsB,KAAK;AAEvC,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAT;AAAA,MACA,aAAU;AAAA,MACV,mBAAgB;AAAA,MAChB,MAAMK,IAAY;AAAA,MAClB,YAAYE;AAAA,MACZ,UAAAD;AAAA,MACA,cAAc,CAACI,MAAST,EAAM,aAAaS,IAAO,CAAC;AAAA,MACnD,kBAAkB,CAACC,MAAS;AAC1B,QAAAV,EAAM,YAAYU,CAAI,GACtBV,EAAM,aAAa,CAAC;AAAA,MACtB;AAAA,MACA,iBAAiBG;AAAA,MACjB,cAAAP;AAAA,MACA,QAAAC;AAAA,MACA,WAAAC;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -0,0 +1,25 @@
+function r(n, i) {
+  const s = n.getIsPinned();
+  if (!s) return 0;
+  const e = s === "left" ? i.getLeftLeafColumns() : i.getRightLeafColumns(), t = e.findIndex((o) => o.id === n.id);
+  let f = 0;
+  for (let o = 0; o < t; o++)
+    f += e[o].getSize();
+  return f;
+}
+function u(n, i) {
+  var t;
+  if (n.getIsPinned() !== "left") return !1;
+  const e = i.getLeftLeafColumns();
+  return ((t = e[e.length - 1]) == null ? void 0 : t.id) === n.id;
+}
+function d(n, i) {
+  var t;
+  return n.getIsPinned() !== "right" ? !1 : ((t = i.getRightLeafColumns()[0]) == null ? void 0 : t.id) === n.id;
+}
+export {
+  r as getPinnedColumnOffset,
+  d as isFirstRightPinnedColumn,
+  u as isLastLeftPinnedColumn
+};
+//# sourceMappingURL=data-table-pinning-utils.js.map

package/dist/components/data-table/data-table-pinning-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pinning-utils.js","sources":["../../../src/components/data-table/data-table-pinning-utils.ts"],"sourcesContent":["import type { Column, Table } from \"@tanstack/react-table\"\n\nexport type PinningPosition = \"left\" | \"right\" | false\n\n/**\n * Calculate the sticky offset for a pinned column based on the widths\n * of columns pinned before it.\n */\nexport function getPinnedColumnOffset<TData>(\n  column: Column<TData, unknown>,\n  table: Table<TData>\n): number {\n  const pinPosition = column.getIsPinned()\n  if (!pinPosition) return 0\n\n  const pinnedColumns =\n    pinPosition === \"left\"\n      ? table.getLeftLeafColumns()\n      : table.getRightLeafColumns()\n\n  const columnIndex = pinnedColumns.findIndex((col) => col.id === column.id)\n\n  // Sum widths of columns before this one\n  let offset = 0\n  for (let i = 0; i < columnIndex; i++) {\n    offset += pinnedColumns[i].getSize()\n  }\n\n  return offset\n}\n\n/**\n * Check if this column is the last pinned column on the left side.\n * Used for applying shadow separator on the right edge.\n */\nexport function isLastLeftPinnedColumn<TData>(\n  column: Column<TData, unknown>,\n  table: Table<TData>\n): boolean {\n  const pinPosition = column.getIsPinned()\n  if (pinPosition !== \"left\") return false\n\n  const leftColumns = table.getLeftLeafColumns()\n  return leftColumns[leftColumns.length - 1]?.id === column.id\n}\n\n/**\n * Check if this column is the first pinned column on the right side.\n * Used for applying shadow separator on the left edge.\n */\nexport function isFirstRightPinnedColumn<TData>(\n  column: Column<TData, unknown>,\n  table: Table<TData>\n): boolean {\n  const pinPosition = column.getIsPinned()\n  if (pinPosition !== \"right\") return false\n\n  const rightColumns = table.getRightLeafColumns()\n  return rightColumns[0]?.id === column.id\n}\n"],"names":["getPinnedColumnOffset","column","table","pinPosition","pinnedColumns","columnIndex","col","offset","i","isLastLeftPinnedColumn","_a","leftColumns","isFirstRightPinnedColumn"],"mappings":"AAQO,SAASA,EACdC,GACAC,GACQ;AACR,QAAMC,IAAcF,EAAO,YAAA;AAC3B,MAAI,CAACE,EAAa,QAAO;AAEzB,QAAMC,IACJD,MAAgB,SACZD,EAAM,mBAAA,IACNA,EAAM,oBAAA,GAENG,IAAcD,EAAc,UAAU,CAACE,MAAQA,EAAI,OAAOL,EAAO,EAAE;AAGzE,MAAIM,IAAS;AACb,WAASC,IAAI,GAAGA,IAAIH,GAAaG;AAC/B,IAAAD,KAAUH,EAAcI,CAAC,EAAE,QAAA;AAG7B,SAAOD;AACT;AAMO,SAASE,EACdR,GACAC,GACS;AA9BJ,MAAAQ;AAgCL,MADoBT,EAAO,YAAA,MACP,OAAQ,QAAO;AAEnC,QAAMU,IAAcT,EAAM,mBAAA;AAC1B,WAAOQ,IAAAC,EAAYA,EAAY,SAAS,CAAC,MAAlC,gBAAAD,EAAqC,QAAOT,EAAO;AAC5D;AAMO,SAASW,EACdX,GACAC,GACS;AA7CJ,MAAAQ;AA+CL,SADoBT,EAAO,YAAA,MACP,UAAgB,OAG7BS,IADcR,EAAM,oBAAA,EACP,CAAC,MAAd,gBAAAQ,EAAiB,QAAOT,EAAO;AACxC;"}