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

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

@@ -1,84 +1,138 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as h from "react";
-import { makeZenithStyles as D } from "../../styles/make-styles.js";
-import { grayA11 as g } from "../../tokens/index.js";
-import { TableBody as o, TableRow as B, TableCell as w } from "../table/table.js";
+import { jsx as t, jsxs as j } from "react/jsx-runtime";
+import * as k from "react";
+import { SLOT_ATTR as l, shorthands as h } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as A } from "../../styles/make-styles.js";
+import { grayA11 as E } from "../../tokens/index.js";
+import { TableBody as n, TableRow as R, TableCell as S } from "../table/table.js";
 import { DataTableRow as v } from "./data-table-row.js";
-import { DataTableLoading as C } from "./data-table-loading.js";
-import { useDataTable as R } from "./hooks/use-data-table.js";
-import { useDataTableContent as S } from "./hooks/use-data-table-content.js";
-import { SLOT_ATTR as l } from "@epilot/zenith-runtime/v1";
-const L = D({
+import { DataTableLoading as H } from "./data-table-loading.js";
+import { useDataTable as O } from "./hooks/use-data-table.js";
+import { useDataTableVirtualizer as P } from "./hooks/use-data-table-virtualizer.js";
+import { useDataTableContent as _ } from "./hooks/use-data-table-content.js";
+const z = A({
   stateCell: {
     height: "12rem",
-    color: g
+    color: E
+  },
+  paddingRow: {
+    ...h.borderWidth(0),
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
+  },
+  paddingCell: {
+    ...h.padding(0),
+    ...h.borderWidth(0)
   }
 });
-function i({
-  colSpan: b,
-  children: t
+function C({ height: i, colSpan: a }) {
+  const e = z();
+  return /* @__PURE__ */ t(R, { noHover: !0, className: e.paddingRow, children: /* @__PURE__ */ t(
+    S,
+    {
+      colSpan: a,
+      className: e.paddingCell,
+      style: { height: i, padding: 0, border: 0 }
+    }
+  ) });
+}
+function u({
+  colSpan: i,
+  children: a
 }) {
-  const r = L();
-  return /* @__PURE__ */ a(B, { noHover: !0, children: /* @__PURE__ */ a(w, { colSpan: b, align: "center", className: r.stateCell, children: t }) });
+  const e = z();
+  return /* @__PURE__ */ t(R, { noHover: !0, children: /* @__PURE__ */ t(S, { colSpan: i, align: "center", className: e.stateCell, children: a }) });
 }
-const M = h.forwardRef(function({
-  className: t,
-  emptyState: r,
-  loadingState: f,
-  isLoading: u = !1,
-  errorState: d,
-  isError: m = !1
-}, e) {
-  const { table: c } = R(), n = S(), T = (n == null ? void 0 : n.spacerWidth) ?? 0, p = c.getRowModel().rows, s = c.getVisibleLeafColumns().length + (T > 0 ? 1 : 0);
-  return process.env.NODE_ENV !== "production" && m && !d && console.warn(
+const U = k.forwardRef(function({
+  className: a,
+  emptyState: e,
+  loadingState: x,
+  isLoading: V = !1,
+  errorState: p,
+  isError: f = !1
+}, o) {
+  var T, D;
+  const { table: g } = O(), s = P(), m = _(), W = (m == null ? void 0 : m.spacerWidth) ?? 0, b = g.getRowModel().rows, d = g.getVisibleLeafColumns().length + (W > 0 ? 1 : 0);
+  if (process.env.NODE_ENV !== "production" && f && !p && console.warn(
     "DataTableBody: isError is true but no errorState was provided. Please provide an errorState prop to display error content."
-  ), m && d ? /* @__PURE__ */ a(
-    o,
-    {
-      ref: e,
-      "data-slot": "data-table-body",
-      [l]: "data-table-body",
-      "data-fs-element": "DataTable-Body",
-      "data-state": "error",
-      className: t,
-      children: /* @__PURE__ */ a(i, { colSpan: s, children: d })
-    }
-  ) : u ? /* @__PURE__ */ a(
-    o,
-    {
-      ref: e,
-      "data-slot": "data-table-body",
-      [l]: "data-table-body",
-      "data-fs-element": "DataTable-Body",
-      "data-state": "loading",
-      className: t,
-      "aria-busy": "true",
-      children: /* @__PURE__ */ a(i, { colSpan: s, children: f ?? /* @__PURE__ */ a(C, {}) })
-    }
-  ) : p.length ? /* @__PURE__ */ a(
-    o,
-    {
-      ref: e,
-      "data-slot": "data-table-body",
-      [l]: "data-table-body",
-      "data-fs-element": "DataTable-Body",
-      className: t,
-      children: p.map((y) => /* @__PURE__ */ a(v, { row: y }, y.id))
-    }
-  ) : /* @__PURE__ */ a(
-    o,
+  ), f && p)
+    return /* @__PURE__ */ t(
+      n,
+      {
+        ref: o,
+        "data-slot": "data-table-body",
+        [l]: "data-table-body",
+        "data-fs-element": "DataTable-Body",
+        "data-state": "error",
+        className: a,
+        children: /* @__PURE__ */ t(u, { colSpan: d, children: p })
+      }
+    );
+  if (V)
+    return /* @__PURE__ */ t(
+      n,
+      {
+        ref: o,
+        "data-slot": "data-table-body",
+        [l]: "data-table-body",
+        "data-fs-element": "DataTable-Body",
+        "data-state": "loading",
+        className: a,
+        "aria-busy": "true",
+        children: /* @__PURE__ */ t(u, { colSpan: d, children: x ?? /* @__PURE__ */ t(H, {}) })
+      }
+    );
+  if (!b.length)
+    return /* @__PURE__ */ t(
+      n,
+      {
+        ref: o,
+        "data-slot": "data-table-body",
+        [l]: "data-table-body",
+        "data-fs-element": "DataTable-Body",
+        "data-state": "empty",
+        className: a,
+        children: /* @__PURE__ */ t(u, { colSpan: d, children: e })
+      }
+    );
+  if (s != null && s.virtualizer) {
+    const { virtualizer: r } = s, c = r.getVirtualItems(), L = r.getTotalSize(), w = ((T = c[0]) == null ? void 0 : T.start) ?? 0, B = L - (((D = c[c.length - 1]) == null ? void 0 : D.end) ?? 0);
+    return /* @__PURE__ */ j(
+      n,
+      {
+        ref: o,
+        "data-slot": "data-table-body",
+        [l]: "data-table-body",
+        "data-fs-element": "DataTable-Body",
+        className: a,
+        children: [
+          w > 0 && /* @__PURE__ */ t(C, { height: w, colSpan: d }),
+          c.map((y) => /* @__PURE__ */ t(
+            v,
+            {
+              row: b[y.index],
+              style: { height: `${y.size}px` }
+            },
+            b[y.index].id
+          )),
+          B > 0 && /* @__PURE__ */ t(C, { height: B, colSpan: d })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ t(
+    n,
     {
-      ref: e,
+      ref: o,
       "data-slot": "data-table-body",
       [l]: "data-table-body",
       "data-fs-element": "DataTable-Body",
-      "data-state": "empty",
-      className: t,
-      children: /* @__PURE__ */ a(i, { colSpan: s, children: r })
+      className: a,
+      children: b.map((r) => /* @__PURE__ */ t(v, { row: r }, r.id))
     }
   );
 });
 export {
-  M as DataTableBody
+  U as DataTableBody
 };
 //# sourceMappingURL=data-table-body.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-body.js","sources":["../../../src/components/data-table/data-table-body.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableBody, TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport { DataTableRow } from \"./data-table-row\"\nimport { DataTableLoading } from \"./data-table-loading\"\n\nconst useStyles = makeZenithStyles({\n  stateCell: {\n    height: \"12rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableBodyProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom empty state content */\n  emptyState?: ReactNode\n  /** Loading state content (shown when isLoading is true) */\n  loadingState?: ReactNode\n  /** Whether the table is in loading state */\n  isLoading?: boolean\n  /** Error state content (shown when isError is true) */\n  errorState?: ReactNode\n  /** Whether the table is in error state */\n  isError?: boolean\n}\n\n/**\n * Internal component for state display (loading/error/empty).\n */\nfunction DataTableStateDisplay({\n  colSpan,\n  children,\n}: {\n  colSpan: number\n  children?: ReactNode\n}) {\n  const styles = useStyles()\n\n  return (\n    <TableRow noHover>\n      <TableCell colSpan={colSpan} align=\"center\" className={styles.stateCell}>\n        {children}\n      </TableCell>\n    </TableRow>\n  )\n}\n\n/**\n * Renders the table body with rows.\n * Must be used within a DataTable component.\n */\nexport const DataTableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableBodyProps\n>(function DataTableBody(\n  {\n    className,\n    emptyState,\n    loadingState,\n    isLoading = false,\n    errorState,\n    isError = false,\n  },\n  ref\n) {\n  const { table } = useDataTable()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const rows = table.getRowModel().rows\n  const visibleColumns = table.getVisibleLeafColumns()\n  const colSpan = visibleColumns.length + (spacerWidth > 0 ? 1 : 0)\n\n  // Warn if isError is true but no errorState is provided\n  if (process.env.NODE_ENV !== \"production\" && isError && !errorState) {\n    console.warn(\n      \"DataTableBody: isError is true but no errorState was provided. \" +\n        \"Please provide an errorState prop to display error content.\"\n    )\n  }\n\n  // Priority: Error > Loading > Empty > Data\n\n  // Error state\n  if (isError && errorState) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"error\"\n        className={className}\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {errorState}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"loading\"\n        className={className}\n        aria-busy=\"true\"\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {loadingState ?? <DataTableLoading />}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Empty state\n  if (!rows.length) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"empty\"\n        className={className}\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {emptyState}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Standard rendering\n  return (\n    <TableBody\n      ref={ref}\n      data-slot=\"data-table-body\"\n      {...{ [SLOT_ATTR]: \"data-table-body\" }}\n      data-fs-element=\"DataTable-Body\"\n      className={className}\n    >\n      {rows.map((row) => (\n        <DataTableRow key={row.id} row={row} />\n      ))}\n    </TableBody>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.grayA11","DataTableStateDisplay","colSpan","children","styles","jsx","TableRow","TableCell","DataTableBody","React","className","emptyState","loadingState","isLoading","errorState","isError","ref","table","useDataTable","contentContext","useDataTableContent","spacerWidth","rows","TableBody","SLOT_ATTR","DataTableLoading","row","DataTableRow"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,OAAOC;AAAAA,EAAO;AAElB,CAAC;AAoBD,SAASC,EAAsB;AAAA,EAC7B,SAAAC;AAAA,EACA,UAAAC;AACF,GAGG;AACD,QAAMC,IAASN,EAAA;AAEf,SACE,gBAAAO,EAACC,GAAA,EAAS,SAAO,IACf,UAAA,gBAAAD,EAACE,GAAA,EAAU,SAAAL,GAAkB,OAAM,UAAS,WAAWE,EAAO,WAC3D,UAAAD,GACH,GACF;AAEJ;AAMO,MAAMK,IAAgBC,EAAM,WAGjC,SACA;AAAA,EACE,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,GACAC,GACA;AACA,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZC,IAAiBC,EAAA,GACjBC,KAAcF,KAAA,gBAAAA,EAAgB,gBAAe,GAE7CG,IAAOL,EAAM,YAAA,EAAc,MAE3Bf,IADiBe,EAAM,sBAAA,EACE,UAAUI,IAAc,IAAI,IAAI;AAa/D,SAVI,QAAQ,IAAI,aAAa,gBAAgBN,KAAW,CAACD,KACvD,QAAQ;AAAA,IACN;AAAA,EAAA,GAQAC,KAAWD,IAEX,gBAAAT;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,cAAW;AAAA,MACX,WAAAd;AAAA,MAEA,UAAA,gBAAAL,EAACJ,GAAA,EAAsB,SAAAC,GACpB,UAAAY,EAAA,CACH;AAAA,IAAA;AAAA,EAAA,IAMFD,IAEA,gBAAAR;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,cAAW;AAAA,MACX,WAAAd;AAAA,MACA,aAAU;AAAA,MAEV,4BAACT,GAAA,EAAsB,SAAAC,GACpB,UAAAU,KAAgB,gBAAAP,EAACoB,KAAiB,EAAA,CACrC;AAAA,IAAA;AAAA,EAAA,IAMDH,EAAK,SAmBR,gBAAAjB;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAAd;AAAA,MAEC,UAAAY,EAAK,IAAI,CAACI,wBACRC,GAAA,EAA0B,KAAAD,EAAA,GAARA,EAAI,EAAc,CACtC;AAAA,IAAA;AAAA,EAAA,IA1BD,gBAAArB;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,cAAW;AAAA,MACX,WAAAd;AAAA,MAEA,UAAA,gBAAAL,EAACJ,GAAA,EAAsB,SAAAC,GACpB,UAAAS,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAmBR,CAAC;"}
+{"version":3,"file":"data-table-body.js","sources":["../../../src/components/data-table/data-table-body.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\nimport { 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 { TableBody, TableRow, TableCell } from \"../table/table\"\nimport {\n  useDataTable,\n  useDataTableContent,\n  useDataTableVirtualizer,\n} from \"./hooks\"\nimport { DataTableRow } from \"./data-table-row\"\nimport { DataTableLoading } from \"./data-table-loading\"\n\nconst useStyles = makeZenithStyles({\n  stateCell: {\n    height: \"12rem\",\n    color: tokens.grayA11,\n  },\n  paddingRow: {\n    ...shorthands.borderWidth(0),\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  paddingCell: {\n    ...shorthands.padding(0),\n    ...shorthands.borderWidth(0),\n  },\n})\n\nexport type DataTableBodyProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom empty state content */\n  emptyState?: ReactNode\n  /** Loading state content (shown when isLoading is true) */\n  loadingState?: ReactNode\n  /** Whether the table is in loading state */\n  isLoading?: boolean\n  /** Error state content (shown when isError is true) */\n  errorState?: ReactNode\n  /** Whether the table is in error state */\n  isError?: boolean\n}\n\n/**\n * Internal component for padding rows in virtualized tables.\n */\nfunction PaddingRow({ height, colSpan }: { height: number; colSpan: number }) {\n  const styles = useStyles()\n  return (\n    <TableRow noHover className={styles.paddingRow}>\n      <TableCell\n        colSpan={colSpan}\n        className={styles.paddingCell}\n        style={{ height, padding: 0, border: 0 }}\n      />\n    </TableRow>\n  )\n}\n\n/**\n * Internal component for state display (loading/error/empty).\n */\nfunction DataTableStateDisplay({\n  colSpan,\n  children,\n}: {\n  colSpan: number\n  children?: ReactNode\n}) {\n  const styles = useStyles()\n\n  return (\n    <TableRow noHover>\n      <TableCell colSpan={colSpan} align=\"center\" className={styles.stateCell}>\n        {children}\n      </TableCell>\n    </TableRow>\n  )\n}\n\n/**\n * Renders the table body with rows.\n * Automatically handles virtualization when used within a DataTableContent with virtualization enabled.\n * Must be used within a DataTable component.\n */\nexport const DataTableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableBodyProps\n>(function DataTableBody(\n  {\n    className,\n    emptyState,\n    loadingState,\n    isLoading = false,\n    errorState,\n    isError = false,\n  },\n  ref\n) {\n  const { table } = useDataTable()\n  const virtualizerContext = useDataTableVirtualizer()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const rows = table.getRowModel().rows\n  const visibleColumns = table.getVisibleLeafColumns()\n  const colSpan = visibleColumns.length + (spacerWidth > 0 ? 1 : 0)\n\n  // Warn if isError is true but no errorState is provided\n  if (process.env.NODE_ENV !== \"production\" && isError && !errorState) {\n    console.warn(\n      \"DataTableBody: isError is true but no errorState was provided. \" +\n        \"Please provide an errorState prop to display error content.\"\n    )\n  }\n\n  // Priority: Error > Loading > Empty > Data\n\n  // Error state\n  if (isError && errorState) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"error\"\n        className={className}\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {errorState}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"loading\"\n        className={className}\n        aria-busy=\"true\"\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {loadingState ?? <DataTableLoading />}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Empty state\n  if (!rows.length) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"empty\"\n        className={className}\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {emptyState}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Virtualized rendering\n  if (virtualizerContext?.virtualizer) {\n    const { virtualizer } = virtualizerContext\n    const virtualRows = virtualizer.getVirtualItems()\n    const totalSize = virtualizer.getTotalSize()\n    const paddingTop = virtualRows[0]?.start ?? 0\n    const paddingBottom =\n      totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0)\n\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        className={className}\n      >\n        {paddingTop > 0 && <PaddingRow height={paddingTop} colSpan={colSpan} />}\n        {virtualRows.map((virtualRow) => (\n          <DataTableRow\n            key={rows[virtualRow.index].id}\n            row={rows[virtualRow.index]}\n            style={{ height: `${virtualRow.size}px` }}\n          />\n        ))}\n        {paddingBottom > 0 && (\n          <PaddingRow height={paddingBottom} colSpan={colSpan} />\n        )}\n      </TableBody>\n    )\n  }\n\n  // Standard rendering\n  return (\n    <TableBody\n      ref={ref}\n      data-slot=\"data-table-body\"\n      {...{ [SLOT_ATTR]: \"data-table-body\" }}\n      data-fs-element=\"DataTable-Body\"\n      className={className}\n    >\n      {rows.map((row) => (\n        <DataTableRow key={row.id} row={row} />\n      ))}\n    </TableBody>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.grayA11","shorthands","PaddingRow","height","colSpan","styles","TableRow","jsx","TableCell","DataTableStateDisplay","children","DataTableBody","React","className","emptyState","loadingState","isLoading","errorState","isError","ref","table","useDataTable","virtualizerContext","useDataTableVirtualizer","contentContext","useDataTableContent","spacerWidth","rows","TableBody","SLOT_ATTR","DataTableLoading","virtualizer","virtualRows","totalSize","paddingTop","_a","paddingBottom","_b","jsxs","virtualRow","DataTableRow","row"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import { jsx as o, jsxs as n } from "react/jsx-runtime";
 import * as l from "react";
-import { mergeClasses as h, SLOT_ATTR as g, shorthands as i } from "@epilot/zenith-runtime/v1";
+import { mergeClasses as h, SLOT_ATTR as g, shorthands as s } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as p } from "../../styles/make-styles.js";
-import { accent11 as m, accentA8 as u, semAccentSoft as w, spacingElement1 as c, radiusLg as k } from "../../tokens/index.js";
+import { accent11 as m, accentA8 as u, accentSoft as w, spacingElement1 as c, radiusLg as k } from "../../tokens/index.js";
 const f = (e) => /* @__PURE__ */ n(
   "svg",
   {
@@ -62,9 +62,9 @@ const f = (e) => /* @__PURE__ */ n(
     display: "inline-flex",
     alignItems: "center",
     gap: c,
-    ...i.paddingBlock("0.125rem"),
-    ...i.paddingInline(c),
-    ...i.borderRadius(k),
+    ...s.paddingBlock("0.125rem"),
+    ...s.paddingInline(c),
+    ...s.borderRadius(k),
     cursor: "pointer",
     transitionProperty: "color, background-color, border-color",
     transitionDuration: "150ms",
@@ -103,8 +103,8 @@ function x({ column: e, title: t, className: a }, d) {
       [g]: "data-table-column-header",
       "data-fs-element": "DataTable-SortButton",
       onClick: () => e.toggleSorting(),
-      onKeyDown: (s) => {
-        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), e.toggleSorting());
+      onKeyDown: (i) => {
+        (i.key === "Enter" || i.key === " ") && (i.preventDefault(), e.toggleSorting());
       },
       "aria-label": e.getIsSorted() === "asc" ? `${t}, sorted ascending. Click to sort descending.` : e.getIsSorted() === "desc" ? `${t}, sorted descending. Click to remove sorting.` : `${t}. Click to sort ascending.`,
       className: h(r.button, a),

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-column-header.js","sources":["../../../src/components/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps } from \"react\"\nimport type { Column } 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\"\n\n// Sort icons\nconst IconArrowUp = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"m5 12 7-7 7 7\" />\n    <path d=\"M12 19V5\" />\n  </svg>\n)\n\nconst IconArrowDown = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"M12 5v14\" />\n    <path d=\"m19 12-7 7-7-7\" />\n  </svg>\n)\n\nconst IconArrowsSort = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"m7 15 5 5 5-5\" />\n    <path d=\"m7 9 5-5 5 5\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  button: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingElement1,\n    ...shorthands.paddingBlock(\"0.125rem\"),\n    ...shorthands.paddingInline(tokens.spacingElement1),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    transitionProperty: \"color, background-color, border-color\",\n    transitionDuration: \"150ms\",\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  iconActive: {\n    width: \"1rem\",\n    height: \"1rem\",\n    color: tokens.accent11,\n    flexShrink: 0,\n  },\n  iconUnsorted: {\n    width: \"1rem\",\n    height: \"1rem\",\n    opacity: 0.4,\n    flexShrink: 0,\n  },\n})\n\nexport type DataTableColumnHeaderProps<TData = unknown, TValue = unknown> = {\n  /** The column instance from Tanstack Table */\n  column: Column<TData, TValue>\n  /** The header title to display */\n  title: string\n  /** Additional class name */\n  className?: string\n}\n\nfunction DataTableColumnHeaderInner<TData, TValue>(\n  { column, title, className }: DataTableColumnHeaderProps<TData, TValue>,\n  ref: React.ForwardedRef<HTMLSpanElement>\n) {\n  const styles = useStyles()\n\n  if (!column.getCanSort()) {\n    return (\n      <span ref={ref} className={className}>\n        {title}\n      </span>\n    )\n  }\n\n  return (\n    <span\n      ref={ref}\n      role=\"button\"\n      tabIndex={0}\n      data-slot=\"data-table-column-header\"\n      {...{ [SLOT_ATTR]: \"data-table-column-header\" }}\n      data-fs-element=\"DataTable-SortButton\"\n      onClick={() => column.toggleSorting()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault()\n          column.toggleSorting()\n        }\n      }}\n      aria-label={\n        column.getIsSorted() === \"asc\"\n          ? `${title}, sorted ascending. Click to sort descending.`\n          : column.getIsSorted() === \"desc\"\n            ? `${title}, sorted descending. Click to remove sorting.`\n            : `${title}. Click to sort ascending.`\n      }\n      className={mergeClasses(styles.button, className)}\n    >\n      {title}\n      {column.getIsSorted() === \"asc\" && (\n        <IconArrowUp className={styles.iconActive} />\n      )}\n      {column.getIsSorted() === \"desc\" && (\n        <IconArrowDown className={styles.iconActive} />\n      )}\n      {!column.getIsSorted() && (\n        <IconArrowsSort className={styles.iconUnsorted} />\n      )}\n    </span>\n  )\n}\n\nexport const DataTableColumnHeader = React.forwardRef(\n  DataTableColumnHeaderInner\n) as <TData = unknown, TValue = unknown>(\n  props: DataTableColumnHeaderProps<TData, TValue> & {\n    ref?: React.Ref<HTMLSpanElement>\n  }\n) => React.ReactElement | null\n"],"names":["IconArrowUp","props","jsxs","jsx","IconArrowDown","IconArrowsSort","useStyles","makeZenithStyles","tokens.spacingElement1","shorthands","tokens.radiusLg","tokens.semAccentSoft","tokens.accentA8","tokens.accent11","DataTableColumnHeaderInner","column","title","className","ref","styles","SLOT_ATTR","e","mergeClasses","DataTableColumnHeader","React"],"mappings":"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"}
+{"version":3,"file":"data-table-column-header.js","sources":["../../../src/components/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps } from \"react\"\nimport type { Column } 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\"\n\n// Sort icons\nconst IconArrowUp = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"m5 12 7-7 7 7\" />\n    <path d=\"M12 19V5\" />\n  </svg>\n)\n\nconst IconArrowDown = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"M12 5v14\" />\n    <path d=\"m19 12-7 7-7-7\" />\n  </svg>\n)\n\nconst IconArrowsSort = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"m7 15 5 5 5-5\" />\n    <path d=\"m7 9 5-5 5 5\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  button: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingElement1,\n    ...shorthands.paddingBlock(\"0.125rem\"),\n    ...shorthands.paddingInline(tokens.spacingElement1),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    transitionProperty: \"color, background-color, border-color\",\n    transitionDuration: \"150ms\",\n    \":hover\": {\n      backgroundColor: tokens.accentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  iconActive: {\n    width: \"1rem\",\n    height: \"1rem\",\n    color: tokens.accent11,\n    flexShrink: 0,\n  },\n  iconUnsorted: {\n    width: \"1rem\",\n    height: \"1rem\",\n    opacity: 0.4,\n    flexShrink: 0,\n  },\n})\n\nexport type DataTableColumnHeaderProps<TData = unknown, TValue = unknown> = {\n  /** The column instance from Tanstack Table */\n  column: Column<TData, TValue>\n  /** The header title to display */\n  title: string\n  /** Additional class name */\n  className?: string\n}\n\nfunction DataTableColumnHeaderInner<TData, TValue>(\n  { column, title, className }: DataTableColumnHeaderProps<TData, TValue>,\n  ref: React.ForwardedRef<HTMLSpanElement>\n) {\n  const styles = useStyles()\n\n  if (!column.getCanSort()) {\n    return (\n      <span ref={ref} className={className}>\n        {title}\n      </span>\n    )\n  }\n\n  return (\n    <span\n      ref={ref}\n      role=\"button\"\n      tabIndex={0}\n      data-slot=\"data-table-column-header\"\n      {...{ [SLOT_ATTR]: \"data-table-column-header\" }}\n      data-fs-element=\"DataTable-SortButton\"\n      onClick={() => column.toggleSorting()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault()\n          column.toggleSorting()\n        }\n      }}\n      aria-label={\n        column.getIsSorted() === \"asc\"\n          ? `${title}, sorted ascending. Click to sort descending.`\n          : column.getIsSorted() === \"desc\"\n            ? `${title}, sorted descending. Click to remove sorting.`\n            : `${title}. Click to sort ascending.`\n      }\n      className={mergeClasses(styles.button, className)}\n    >\n      {title}\n      {column.getIsSorted() === \"asc\" && (\n        <IconArrowUp className={styles.iconActive} />\n      )}\n      {column.getIsSorted() === \"desc\" && (\n        <IconArrowDown className={styles.iconActive} />\n      )}\n      {!column.getIsSorted() && (\n        <IconArrowsSort className={styles.iconUnsorted} />\n      )}\n    </span>\n  )\n}\n\nexport const DataTableColumnHeader = React.forwardRef(\n  DataTableColumnHeaderInner\n) as <TData = unknown, TValue = unknown>(\n  props: DataTableColumnHeaderProps<TData, TValue> & {\n    ref?: React.Ref<HTMLSpanElement>\n  }\n) => React.ReactElement | null\n"],"names":["IconArrowUp","props","jsxs","jsx","IconArrowDown","IconArrowsSort","useStyles","makeZenithStyles","tokens.spacingElement1","shorthands","tokens.radiusLg","tokens.accentSoft","tokens.accentA8","tokens.accent11","DataTableColumnHeaderInner","column","title","className","ref","styles","SLOT_ATTR","e","mergeClasses","DataTableColumnHeader","React"],"mappings":"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"}

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

@@ -0,0 +1,277 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import * as A from "react";
+import { useCallback as N } from "react";
+import { useSensors as M, useSensor as O, DndContext as E, closestCenter as L, KeyboardSensor as R, PointerSensor as k } from "../../vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js";
+import { arrayMove as B, SortableContext as _, verticalListSortingStrategy as G, sortableKeyboardCoordinates as z, useSortable as Z } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
+import { CSS as j } from "../../vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js";
+import { SLOT_ATTR as x, shorthands as d, mergeClasses as F } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as K } from "../../styles/make-styles.js";
+import { accentA8 as V, grayA12 as W, grayA8 as X, grayA3 as H, leadingSm as P, textSm as $, spacingElement2 as C, radiusSm as q } from "../../tokens/index.js";
+import { Button as J } from "../button/button.js";
+import { DropdownMenu as Q, DropdownMenuTrigger as U, DropdownMenuContent as Y, DropdownMenuLabel as ee, DropdownMenuSeparator as te } from "../dropdown-menu/dropdown-menu.js";
+import { useDataTable as re } from "./hooks/use-data-table.js";
+const ne = (t) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 -960 960 960",
+    fill: "currentColor",
+    ...t,
+    children: /* @__PURE__ */ e("path", { d: "M320-440v-287l-76 76-44-44 150-150 150 150-44 44-76-76v287h-60ZM560-155 410-305l44-44 76 76v-287h60v287l76-76 44 44L560-155Z" })
+  }
+), oe = (t) => /* @__PURE__ */ b(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    ...t,
+    children: [
+      /* @__PURE__ */ e("circle", { cx: "9", cy: "5", r: "1.5" }),
+      /* @__PURE__ */ e("circle", { cx: "15", cy: "5", r: "1.5" }),
+      /* @__PURE__ */ e("circle", { cx: "9", cy: "12", r: "1.5" }),
+      /* @__PURE__ */ e("circle", { cx: "15", cy: "12", r: "1.5" }),
+      /* @__PURE__ */ e("circle", { cx: "9", cy: "19", r: "1.5" }),
+      /* @__PURE__ */ e("circle", { cx: "15", cy: "19", r: "1.5" })
+    ]
+  }
+), T = K({
+  icon: {
+    width: "1rem",
+    height: "1rem"
+  },
+  gripIcon: {
+    width: "14px",
+    height: "14px"
+  },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    ...d.padding(0),
+    ...d.margin("-1px"),
+    ...d.overflow("hidden"),
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap"
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    ...d.gap(C),
+    ...d.borderRadius(q),
+    paddingLeft: C,
+    paddingRight: C,
+    paddingTop: "6px",
+    paddingBottom: "6px",
+    fontSize: $,
+    lineHeight: P
+  },
+  itemDragging: {
+    zIndex: 50,
+    backgroundColor: H,
+    opacity: 0.8
+  },
+  dragHandle: {
+    display: "inline-flex",
+    flexShrink: 0,
+    cursor: "grab",
+    touchAction: "none",
+    alignItems: "center",
+    color: X,
+    backgroundColor: "transparent",
+    ...d.borderWidth(0),
+    ...d.padding(0),
+    "&:hover": {
+      color: W
+    },
+    "&:focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: V
+    },
+    "&:active": {
+      cursor: "grabbing"
+    }
+  },
+  itemLabel: {
+    userSelect: "none"
+  }
+});
+function ae({
+  column: t,
+  dragHandleLabel: r
+}) {
+  const n = T(), {
+    attributes: c,
+    listeners: u,
+    setNodeRef: g,
+    transform: p,
+    transition: f,
+    isDragging: o
+  } = Z({ id: t.id }), i = t.columnDef.meta, a = (i == null ? void 0 : i.visibilityLabel) ?? (typeof t.columnDef.header == "string" ? t.columnDef.header : t.id), s = r ? typeof r == "function" ? r(a) : r : `Drag to reorder ${a}`;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ref: g,
+      style: {
+        transform: j.Transform.toString(p),
+        transition: f
+      },
+      className: F(n.item, o && n.itemDragging),
+      "data-slot": "data-table-column-order-item",
+      [x]: "data-table-column-order-item",
+      "data-fs-element": "DataTable-ColumnOrder-Item",
+      children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: n.dragHandle,
+            "data-slot": "data-table-column-order-drag-handle",
+            [x]: "data-table-column-order-drag-handle",
+            "aria-label": s,
+            ...c,
+            ...u,
+            children: /* @__PURE__ */ e(oe, { className: n.gripIcon })
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: n.itemLabel,
+            "data-slot": "data-table-column-order-item-label",
+            [x]: "data-table-column-order-item-label",
+            children: a
+          }
+        )
+      ]
+    }
+  );
+}
+function ie({
+  columns: t,
+  currentOrder: r,
+  table: n,
+  dragHandleLabel: c,
+  announcements: u,
+  screenReaderInstructions: g
+}) {
+  const p = M(
+    O(k, {
+      activationConstraint: { distance: 3 }
+    }),
+    O(R, {
+      coordinateGetter: z
+    })
+  ), f = N(
+    (o) => {
+      const { active: i, over: a } = o;
+      if (!a || i.id === a.id) return;
+      const s = r.indexOf(i.id), l = r.indexOf(a.id);
+      if (s === -1 || l === -1) return;
+      const y = B(r, s, l);
+      n.setColumnOrder(y);
+    },
+    [r, n]
+  );
+  return /* @__PURE__ */ e(
+    E,
+    {
+      sensors: p,
+      collisionDetection: L,
+      onDragEnd: f,
+      accessibility: {
+        announcements: u,
+        screenReaderInstructions: g
+      },
+      children: /* @__PURE__ */ e(
+        _,
+        {
+          items: t.map((o) => o.id),
+          strategy: G,
+          children: t.map((o) => /* @__PURE__ */ e(
+            ae,
+            {
+              column: o,
+              dragHandleLabel: c
+            },
+            o.id
+          ))
+        }
+      )
+    }
+  );
+}
+const xe = A.forwardRef(function({
+  icon: r,
+  trigger: n,
+  label: c,
+  dragHandleLabel: u,
+  announcements: g,
+  screenReaderInstructions: p,
+  contentClassName: f,
+  align: o = "end",
+  ...i
+}, a) {
+  const s = T(), { table: l } = re(), y = l.getAllLeafColumns(), w = y.filter((m) => {
+    if (m.id === "select") return !1;
+    const h = m.columnDef.meta;
+    return (h == null ? void 0 : h.enableOrdering) !== !1;
+  });
+  if (w.length === 0)
+    return null;
+  const S = l.getState().columnOrder && l.getState().columnOrder.length > 0 ? l.getState().columnOrder : y.map((m) => m.id), I = [...w].sort((m, h) => {
+    const D = S.indexOf(m.id), v = S.indexOf(h.id);
+    return (D === -1 ? Number.MAX_SAFE_INTEGER : D) - (v === -1 ? Number.MAX_SAFE_INTEGER : v);
+  });
+  return /* @__PURE__ */ b(Q, { ref: a, ...i, children: [
+    /* @__PURE__ */ e(U, { asChild: !0, children: n ?? /* @__PURE__ */ b(
+      J,
+      {
+        variant: "tertiary",
+        size: "sm",
+        "data-slot": "data-table-column-order-trigger",
+        [x]: "data-table-column-order-trigger",
+        "data-fs-element": "DataTable-ColumnOrder-Trigger",
+        children: [
+          r ?? /* @__PURE__ */ e(ne, { className: s.icon }),
+          /* @__PURE__ */ e("span", { className: s.srOnly, children: c })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ b(
+      Y,
+      {
+        align: o,
+        className: f,
+        "data-slot": "data-table-column-order-content",
+        [x]: "data-table-column-order-content",
+        "data-fs-element": "DataTable-ColumnOrder-Content",
+        children: [
+          /* @__PURE__ */ e(ee, { children: c }),
+          /* @__PURE__ */ e(te, {}),
+          /* @__PURE__ */ e(
+            ie,
+            {
+              columns: I,
+              currentOrder: S,
+              table: l,
+              dragHandleLabel: u,
+              announcements: g,
+              screenReaderInstructions: p
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+export {
+  xe as DataTableColumnOrder
+};
+//# sourceMappingURL=data-table-column-order.js.map