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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-draggable.js","sources":["../../../src/components/data-table/data-table-header-draggable.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { useSortable } from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\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 { TableHead } from \"../table/table\"\n\n// Grip vertical icon (6-dot drag handle)\nconst IconGripVertical = (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=\"currentColor\"\n    {...props}\n  >\n    <circle cx=\"9\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"19\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    // When not disabled, hovering over the cell reveals the drag handle\n    [`&:hover [${SLOT_ATTR}=\"data-table-header-drag-handle\"]`]: {\n      opacity: 1,\n    },\n  },\n  inner: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  dragHandle: {\n    display: \"inline-flex\",\n    flexShrink: 0,\n    cursor: \"grab\",\n    touchAction: \"none\",\n    alignItems: \"center\",\n    color: tokens.grayA8,\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n    marginLeft: \"-4px\",\n    marginRight: \"2px\",\n    backgroundColor: \"transparent\",\n    ...shorthands.borderWidth(0),\n    ...shorthands.padding(0),\n    \"&:hover\": {\n      color: tokens.grayA12,\n    },\n    \"&:focus-visible\": {\n      opacity: 1,\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&:active\": {\n      cursor: \"grabbing\",\n    },\n  },\n  content: {\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  icon: {\n    width: \"14px\",\n    height: \"14px\",\n  },\n})\n\nexport type DataTableHeaderDraggableProps = {\n  /** Column ID used as the sortable identifier */\n  headerId: string\n  /** Whether this column cannot be reordered */\n  disabled?: boolean\n  /** Header cell content (the flex-rendered header + resize handle) */\n  children: ReactNode\n} & ComponentProps<typeof TableHead>\n\n/**\n * A TableHead cell wrapped with dnd-kit sortable for column reordering.\n * Renders a drag handle icon that appears on hover.\n * Used by DataTableHeader when enableColumnOrdering is true.\n */\nexport const DataTableHeaderDraggable = React.forwardRef<\n  HTMLTableCellElement,\n  DataTableHeaderDraggableProps\n>(function DataTableHeaderDraggable(\n  {\n    headerId,\n    disabled = false,\n    children,\n    style: existingStyle,\n    className,\n    ...tableHeadProps\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: headerId, disabled })\n\n  const handleRef = React.useCallback(\n    (node: HTMLTableCellElement | null) => {\n      setNodeRef(node)\n      if (typeof ref === \"function\") {\n        ref(node)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLTableCellElement | null>).current =\n          node\n      }\n    },\n    [setNodeRef, ref]\n  )\n\n  const style: CSSProperties = {\n    ...existingStyle,\n    transform: CSS.Transform.toString(transform),\n    transition,\n    ...(isDragging && { zIndex: 50, opacity: 0.8 }),\n  }\n\n  return (\n    <TableHead\n      ref={handleRef}\n      style={style}\n      className={mergeClasses(!disabled && styles.root, className)}\n      data-slot=\"data-table-header-draggable\"\n      {...{ [SLOT_ATTR]: \"data-table-header-draggable\" }}\n      data-fs-element=\"DataTable-Header-Draggable\"\n      {...tableHeadProps}\n    >\n      <div\n        className={styles.inner}\n        data-slot=\"data-table-header-draggable-inner\"\n        {...{ [SLOT_ATTR]: \"data-table-header-draggable-inner\" }}\n      >\n        {!disabled && (\n          <button\n            type=\"button\"\n            className={styles.dragHandle}\n            data-slot=\"data-table-header-drag-handle\"\n            {...{ [SLOT_ATTR]: \"data-table-header-drag-handle\" }}\n            aria-label=\"Drag to reorder column\"\n            {...attributes}\n            {...listeners}\n          >\n            <IconGripVertical className={styles.icon} />\n          </button>\n        )}\n        <div\n          className={styles.content}\n          data-slot=\"data-table-header-draggable-content\"\n          {...{ [SLOT_ATTR]: \"data-table-header-draggable-content\" }}\n        >\n          {children}\n        </div>\n      </div>\n    </TableHead>\n  )\n})\n"],"names":["IconGripVertical","props","jsxs","jsx","useStyles","makeZenithStyles","SLOT_ATTR","tokens.grayA8","shorthands","tokens.grayA12","tokens.accentA8","DataTableHeaderDraggable","React","headerId","disabled","children","existingStyle","className","tableHeadProps","ref","styles","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","handleRef","node","style","CSS","TableHead","mergeClasses"],"mappings":";;;;;;;;AAYA,MAAMA,IAAmB,CAACC,MACxB,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;AAAA,MAAA,gBAAAE,EAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM;AAAA,wBAC7B,UAAA,EAAO,IAAG,MAAK,IAAG,KAAI,GAAE,OAAM;AAAA,wBAC9B,UAAA,EAAO,IAAG,KAAI,IAAG,MAAK,GAAE,OAAM;AAAA,wBAC9B,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA,wBAC/B,UAAA,EAAO,IAAG,KAAI,IAAG,MAAK,GAAE,OAAM;AAAA,wBAC9B,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAClC,GAGIC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA;AAAA,IAEJ,CAAC,YAAYC,CAAS,mCAAmC,GAAG;AAAA,MAC1D,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,EAAA;AAAA,EAEd,YAAY;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,OAAOC;AAAAA,IACP,SAAS;AAAA,IACT,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,GAAGC,EAAW,YAAY,CAAC;AAAA,IAC3B,GAAGA,EAAW,QAAQ,CAAC;AAAA,IACvB,WAAW;AAAA,MACT,OAAOC;AAAAA,IAAO;AAAA,IAEhB,mBAAmB;AAAA,MACjB,SAAS;AAAA,MACT,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcC;AAAAA,IAAO;AAAA,IAEvB,YAAY;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,SAAS;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ,CAAC,GAgBYC,IAA2BC,EAAM,WAG5C,SACA;AAAA,EACE,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,OAAOC;AAAA,EACP,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAShB,EAAA,GACT;AAAA,IACJ,YAAAiB;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACEC,EAAY,EAAE,IAAId,GAAU,UAAAC,GAAU,GAEpCc,IAAYhB,EAAM;AAAA,IACtB,CAACiB,MAAsC;AACrC,MAAAN,EAAWM,CAAI,GACX,OAAOV,KAAQ,aACjBA,EAAIU,CAAI,IACCV,MACPA,EAA4D,UAC5DU;AAAA,IAEN;AAAA,IACA,CAACN,GAAYJ,CAAG;AAAA,EAAA,GAGZW,IAAuB;AAAA,IAC3B,GAAGd;AAAA,IACH,WAAWe,EAAI,UAAU,SAASP,CAAS;AAAA,IAC3C,YAAAC;AAAA,IACA,GAAIC,KAAc,EAAE,QAAQ,IAAI,SAAS,IAAA;AAAA,EAAI;AAG/C,SACE,gBAAAvB;AAAA,IAAC6B;AAAA,IAAA;AAAA,MACC,KAAKJ;AAAA,MACL,OAAAE;AAAA,MACA,WAAWG,EAAa,CAACnB,KAAYM,EAAO,MAAMH,CAAS;AAAA,MAC3D,aAAU;AAAA,MACJ,CAACX,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MACf,GAAGY;AAAA,MAEJ,UAAA,gBAAAhB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWkB,EAAO;AAAA,UAClB,aAAU;AAAA,UACJ,CAACd,CAAS,GAAG;AAAA,UAElB,UAAA;AAAA,YAAA,CAACQ,KACA,gBAAAX;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAWiB,EAAO;AAAA,gBAClB,aAAU;AAAA,gBACJ,CAACd,CAAS,GAAG;AAAA,gBACnB,cAAW;AAAA,gBACV,GAAGe;AAAA,gBACH,GAAGC;AAAA,gBAEJ,UAAA,gBAAAnB,EAACH,GAAA,EAAiB,WAAWoB,EAAO,KAAA,CAAM;AAAA,cAAA;AAAA,YAAA;AAAA,YAG9C,gBAAAjB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWiB,EAAO;AAAA,gBAClB,aAAU;AAAA,gBACJ,CAACd,CAAS,GAAG;AAAA,gBAElB,UAAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -1,19 +1,33 @@
-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({
+import { jsx as s, jsxs as E } from "react/jsx-runtime";
+import * as F from "react";
+import { useCallback as $, useMemo as j } from "react";
+import { flexRender as K } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
+import { useSensors as M, useSensor as R, DndContext as U, closestCenter as B, KeyboardSensor as V, PointerSensor as Z } from "../../vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js";
+import { arrayMove as q, SortableContext as G, horizontalListSortingStrategy as J, sortableKeyboardCoordinates as Q } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
+import { SLOT_ATTR as X, shorthands as Y, mergeClasses as ee } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as te } from "../../styles/make-styles.js";
+import { grayA6 as oe, gray2 as ne, fontWeightSemibold as ie } from "../../tokens/index.js";
+import { TableHeader as re, TableRow as se, TableHead as H } from "../table/table.js";
+import { DataTableHeaderDraggable as ae } from "./data-table-header-draggable.js";
+import { getPinnedColumnOffset as de, isLastLeftPinnedColumn as le, isFirstRightPinnedColumn as ce } from "./data-table-pinning-utils.js";
+import { useDataTable as me } from "./hooks/use-data-table.js";
+import { useDataTableVirtualizer as ue } from "./hooks/use-data-table-virtualizer.js";
+import { useDataTableContent as fe } from "./hooks/use-data-table-content.js";
+const ge = ({ transform: d }) => ({
+  ...d,
+  y: 0
+}), pe = 150;
+function be(d) {
+  if (d.id === "select") return !1;
+  const l = d.columnDef.meta;
+  return (l == null ? void 0 : l.enableOrdering) !== !1;
+}
+const he = te({
   headerTitle: {
     display: "block",
-    ...I.overflow("hidden"),
+    ...Y.overflow("hidden"),
     whiteSpace: "nowrap",
-    fontWeight: F
+    fontWeight: ie
   },
   shadowLeft: {
     boxShadow: "2px 0 5px -2px rgba(0,0,0,0.1)"
@@ -21,78 +35,137 @@ const B = 150, G = O({
   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,
+}), We = F.forwardRef(function({ className: l, sticky: O, stickyBackground: h = ne }, L) {
+  const p = he(), {
+    table: t,
+    disableColumnResizing: z,
+    showHeaderBorder: I,
+    fitHeaderWidth: P,
+    enableColumnOrdering: c
+  } = me(), C = !z, W = ue(), b = fe(), S = (b == null ? void 0 : b.spacerWidth) ?? 0, i = O ?? !!W, k = M(
+    R(Z, {
+      activationConstraint: { distance: 5 }
+    }),
+    R(V, {
+      coordinateGetter: Q
+    })
+  ), A = $(
+    (n) => {
+      const { active: e, over: o } = n;
+      if (!o || e.id === o.id) return;
+      const a = t.getState().columnOrder && t.getState().columnOrder.length > 0 ? t.getState().columnOrder : t.getAllLeafColumns().map((g) => g.id), u = a.indexOf(e.id), f = a.indexOf(o.id);
+      if (u === -1 || f === -1) return;
+      const m = q(a, u, f);
+      t.setColumnOrder(m);
+    },
+    [t]
+  ), x = (n) => n.map((e) => {
+    const o = e.column.getIsPinned(), a = o ? de(e.column, t) : void 0, u = le(e.column, t), f = ce(e.column, t), m = e.column.columnDef.meta, g = m == null ? void 0 : m.align, v = {
+      width: C || e.getSize() !== pe ? e.getSize() : void 0,
+      minWidth: P ? "max-content" : void 0,
+      backgroundColor: i || o ? h : void 0,
+      position: i || o ? "sticky" : C ? "relative" : void 0,
+      top: i ? 0 : void 0,
+      left: o === "left" ? `${a}px` : void 0,
+      right: o === "right" ? `${a}px` : void 0,
+      zIndex: o ? 30 : i ? 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 } : {};
+        const r = e.column.columnDef.meta;
+        return (r == null ? void 0 : r._sortableHeaderWrapped) || e.column.getCanSort() && typeof e.column.columnDef.header == "function" ? (r == null ? void 0 : r.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,
+    }, D = ee(
+      u && p.shadowLeft,
+      f && p.shadowRight
+    ), T = e.column.getIsSorted() === "asc" ? "ascending" : e.column.getIsSorted() === "desc" ? "descending" : e.column.getCanSort() ? "none" : void 0, w = /* @__PURE__ */ s("span", { className: p.headerTitle, children: e.isPlaceholder ? null : K(e.column.columnDef.header, e.getContext()) });
+    if (c) {
+      const r = be(e.column) && !o;
+      return /* @__PURE__ */ s(
+        ae,
+        {
+          headerId: e.column.id,
+          disabled: !r,
+          align: g,
+          "aria-sort": T,
+          style: v,
+          className: D,
+          children: w
+        },
+        e.id
+      );
+    }
+    return /* @__PURE__ */ s(
+      H,
       {
-        align: y,
-        "aria-sort": H,
-        style: C,
-        className: k(
-          T && d.shadowLeft,
-          R && d.shadowRight
-        ),
-        children: D
+        align: g,
+        "aria-sort": T,
+        style: v,
+        className: D,
+        children: w
       },
-      t.id
+      e.id
     );
-  });
-  return /* @__PURE__ */ a(
-    N,
+  }), N = t.getAllLeafColumns().map((n) => n.id), y = /* @__PURE__ */ s(
+    re,
     {
-      ref: b,
+      ref: L,
       "data-slot": "data-table-header",
-      [z]: "data-table-header",
+      [X]: "data-table-header",
       "data-fs-element": "DataTable-Header",
-      className: u,
-      children: i.getHeaderGroups().map((s) => /* @__PURE__ */ L(
-        $,
+      className: l,
+      children: t.getHeaderGroups().map((n) => /* @__PURE__ */ E(
+        se,
         {
           noHover: !0,
           style: {
-            boxShadow: S !== !1 ? `inset 0 -1px 0 0 ${_}` : "none"
+            boxShadow: I !== !1 ? `inset 0 -1px 0 0 ${oe}` : "none"
           },
           children: [
-            w(s.headers),
-            p > 0 && /* @__PURE__ */ a(
-              g,
+            c ? /* @__PURE__ */ s(
+              G,
+              {
+                items: N,
+                strategy: J,
+                children: x(n.headers)
+              }
+            ) : x(n.headers),
+            S > 0 && /* @__PURE__ */ s(
+              H,
               {
                 "data-spacer": !0,
                 "aria-hidden": "true",
                 style: {
-                  width: p,
+                  width: S,
                   padding: 0,
-                  backgroundColor: o ? c : void 0,
-                  position: o ? "sticky" : void 0,
-                  top: o ? 0 : void 0,
-                  zIndex: o ? 5 : void 0
+                  backgroundColor: i ? h : void 0,
+                  position: i ? "sticky" : void 0,
+                  top: i ? 0 : void 0,
+                  zIndex: i ? 5 : void 0
                 }
               }
             )
           ]
         },
-        s.id
+        n.id
       ))
     }
+  ), _ = j(
+    () => c && typeof document < "u" ? document.body : void 0,
+    [c]
   );
+  return c ? /* @__PURE__ */ s(
+    U,
+    {
+      sensors: k,
+      collisionDetection: B,
+      onDragEnd: A,
+      modifiers: [ge],
+      accessibility: { container: _ },
+      children: y
+    }
+  ) : y;
 });
 export {
-  it as DataTableHeader
+  We as DataTableHeader
 };
 //# sourceMappingURL=data-table-header.js.map

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

@@ -1 +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":"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"}
+{"version":3,"file":"data-table-header.js","sources":["../../../src/components/data-table/data-table-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useMemo } from \"react\"\nimport { flexRender, type Header } from \"@tanstack/react-table\"\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type Modifier,\n} from \"@dnd-kit/core\"\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  arrayMove,\n  sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\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 {\n  useDataTable,\n  useDataTableContent,\n  useDataTableVirtualizer,\n} from \"./hooks\"\nimport { DataTableHeaderDraggable } from \"./data-table-header-draggable\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// Restrict drag movement to horizontal axis only\nconst restrictToHorizontalAxis: Modifier = ({ transform }) => ({\n  ...transform,\n  y: 0,\n})\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\n/** Check if a column can be reordered */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction isColumnReorderable(column: Header<any, unknown>[\"column\"]): boolean {\n  if (column.id === \"select\") return false\n  const meta = column.columnDef.meta as { enableOrdering?: boolean } | undefined\n  if (meta?.enableOrdering === false) return false\n  return true\n}\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, stickyBackground = tokens.gray2 },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    table,\n    disableColumnResizing,\n    showHeaderBorder,\n    fitHeaderWidth,\n    enableColumnOrdering,\n  } = useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n  const virtualizerContext = useDataTableVirtualizer()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  // Auto-enable sticky when virtualization is active\n  const isSticky = sticky ?? Boolean(virtualizerContext)\n\n  // DnD sensors for column reordering\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: { distance: 5 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n      if (!over || active.id === over.id) return\n\n      const currentOrder =\n        table.getState().columnOrder && table.getState().columnOrder.length > 0\n          ? table.getState().columnOrder\n          : table.getAllLeafColumns().map((c) => c.id)\n\n      const oldIndex = currentOrder.indexOf(active.id as string)\n      const newIndex = currentOrder.indexOf(over.id as string)\n\n      if (oldIndex === -1 || newIndex === -1) return\n\n      const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n      table.setColumnOrder(newOrder)\n    },\n    [table]\n  )\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 cellClassName = mergeClasses(\n        isLastLeft && styles.shadowLeft,\n        isFirstRight && styles.shadowRight\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      if (enableColumnOrdering) {\n        const canReorder = isColumnReorderable(header.column) && !isPinned\n\n        return (\n          <DataTableHeaderDraggable\n            key={header.id}\n            headerId={header.column.id}\n            disabled={!canReorder}\n            align={align}\n            aria-sort={ariaSort}\n            style={cellStyle}\n            className={cellClassName}\n          >\n            {headerContent}\n          </DataTableHeaderDraggable>\n        )\n      }\n\n      return (\n        <TableHead\n          key={header.id}\n          align={align}\n          aria-sort={ariaSort}\n          style={cellStyle}\n          className={cellClassName}\n        >\n          {headerContent}\n        </TableHead>\n      )\n    })\n\n  // Get column IDs for SortableContext\n  const orderedColumnIds = table.getAllLeafColumns().map((col) => col.id)\n\n  const headerContent = (\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          {enableColumnOrdering ? (\n            <SortableContext\n              items={orderedColumnIds}\n              strategy={horizontalListSortingStrategy}\n            >\n              {renderHeaders(headerGroup.headers)}\n            </SortableContext>\n          ) : (\n            renderHeaders(headerGroup.headers)\n          )}\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  const a11yContainer = useMemo(\n    () =>\n      enableColumnOrdering && typeof document !== \"undefined\"\n        ? document.body\n        : undefined,\n    [enableColumnOrdering]\n  )\n\n  // Wrap with DndContext; portal a11y elements to body to avoid invalid DOM nesting in <table>\n  if (enableColumnOrdering) {\n    return (\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={handleDragEnd}\n        modifiers={[restrictToHorizontalAxis]}\n        accessibility={{ container: a11yContainer }}\n      >\n        {headerContent}\n      </DndContext>\n    )\n  }\n\n  return headerContent\n})\n"],"names":["restrictToHorizontalAxis","transform","DEFAULT_COLUMN_WIDTH","isColumnReorderable","column","meta","useStyles","makeZenithStyles","shorthands","tokens.fontWeightSemibold","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","enableColumnOrdering","useDataTable","enableColumnResizing","virtualizerContext","useDataTableVirtualizer","contentContext","useDataTableContent","spacerWidth","isSticky","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","currentOrder","c","oldIndex","newIndex","newOrder","arrayMove","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","cellClassName","mergeClasses","ariaSort","headerContent","jsx","flexRender","canReorder","DataTableHeaderDraggable","TableHead","orderedColumnIds","col","TableHeader","SLOT_ATTR","headerGroup","jsxs","TableRow","tokens.grayA6","SortableContext","horizontalListSortingStrategy","a11yContainer","useMemo","DndContext","closestCenter"],"mappings":"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"}

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

@@ -0,0 +1,137 @@
+import { jsx as T } from "react/jsx-runtime";
+import * as H from "react";
+import { mergeClasses as I, SLOT_ATTR as E, shorthands as P } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as w } from "../../styles/make-styles.js";
+import { accent9 as N, accent8 as f, accentA8 as W, grayA4 as _ } from "../../tokens/index.js";
+import { useDataTable as B } from "./hooks/use-data-table.js";
+import { useDataTableContent as M } from "./hooks/use-data-table-content.js";
+const O = w({
+  handle: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    height: "100%",
+    width: "2px",
+    cursor: "col-resize",
+    userSelect: "none",
+    touchAction: "none",
+    backgroundColor: _,
+    transitionProperty: "background-color, opacity",
+    transitionDuration: "75ms",
+    "&::before": {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: "-3px",
+      right: "-3px",
+      content: '""'
+    },
+    "&:hover": {
+      backgroundColor: f
+    },
+    "&:focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "1px",
+      outlineColor: W,
+      backgroundColor: f
+    }
+  },
+  resizing: {
+    backgroundColor: N,
+    "&::before": {
+      position: "fixed",
+      ...P.inset(0),
+      zIndex: 50,
+      cursor: "col-resize",
+      content: '""'
+    }
+  },
+  hidden: {
+    opacity: 0,
+    "&:hover": {
+      opacity: 1
+    },
+    "&:focus-visible": {
+      opacity: 1
+    }
+  }
+});
+function j({
+  header: r,
+  ariaLabel: a,
+  isVisible: z = !0,
+  step: d = 10,
+  className: p,
+  onMouseDown: s,
+  onTouchStart: l,
+  onKeyDown: c,
+  ...g
+}, h) {
+  const m = O(), { table: u } = B(), i = r.column, t = M(), S = a ? typeof a == "function" ? a(i.id) : a : `Resize ${i.id} column`;
+  if (!i.getCanResize())
+    return null;
+  const b = i.getIsResizing(), v = (e) => {
+    s == null || s(e), e.defaultPrevented || (t == null || t.syncColumnWidthsBeforeResize(), r.getResizeHandler()(e));
+  }, R = (e) => {
+    l == null || l(e), e.defaultPrevented || (t == null || t.syncColumnWidthsBeforeResize(), r.getResizeHandler()(e));
+  }, y = (e) => {
+    if (c == null || c(e), !e.defaultPrevented) {
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        e.preventDefault();
+        const o = i.getSize(), n = i.columnDef.minSize ?? 20, D = i.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER, k = e.key === "ArrowRight" ? d : -d, A = Math.min(D, Math.max(n, o + k));
+        u.setColumnSizing((C) => ({
+          ...C,
+          [i.id]: A
+        }));
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        const o = i.columnDef.minSize ?? 20;
+        u.setColumnSizing((n) => ({
+          ...n,
+          [i.id]: o
+        }));
+      } else if (e.key === "End" && i.columnDef.maxSize !== void 0) {
+        e.preventDefault();
+        const o = i.columnDef.maxSize;
+        u.setColumnSizing((n) => ({
+          ...n,
+          [i.id]: o
+        }));
+      }
+    }
+  }, x = Math.round(i.getSize());
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      ref: h,
+      "data-slot": "data-table-resize-handle",
+      [E]: "data-table-resize-handle",
+      "data-fs-element": "DataTable-ResizeHandle",
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": S,
+      "aria-valuenow": x,
+      "aria-valuemin": i.columnDef.minSize ?? 20,
+      "aria-valuemax": i.columnDef.maxSize,
+      tabIndex: 0,
+      onMouseDown: v,
+      onTouchStart: R,
+      onKeyDown: y,
+      className: I(
+        m.handle,
+        b && m.resizing,
+        !z && m.hidden,
+        p
+      ),
+      ...g
+    }
+  );
+}
+const J = H.forwardRef(
+  j
+);
+export {
+  J as DataTableResizeHandle
+};
+//# sourceMappingURL=data-table-resize-handle.js.map

package/dist/components/data-table/data-table-resize-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-resize-handle.js","sources":["../../../src/components/data-table/data-table-resize-handle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport 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 { useDataTable, useDataTableContent } from \"./hooks\"\n\nconst useStyles = makeZenithStyles({\n  handle: {\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    height: \"100%\",\n    width: \"2px\",\n    cursor: \"col-resize\",\n    userSelect: \"none\",\n    touchAction: \"none\",\n    backgroundColor: tokens.grayA4,\n    transitionProperty: \"background-color, opacity\",\n    transitionDuration: \"75ms\",\n    \"&::before\": {\n      position: \"absolute\",\n      top: 0,\n      bottom: 0,\n      left: \"-3px\",\n      right: \"-3px\",\n      content: '\"\"',\n    },\n    \"&:hover\": {\n      backgroundColor: tokens.accent8,\n    },\n    \"&:focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"1px\",\n      outlineColor: tokens.accentA8,\n      backgroundColor: tokens.accent8,\n    },\n  },\n  resizing: {\n    backgroundColor: tokens.accent9,\n    \"&::before\": {\n      position: \"fixed\",\n      ...shorthands.inset(0),\n      zIndex: 50,\n      cursor: \"col-resize\",\n      content: '\"\"',\n    },\n  },\n  hidden: {\n    opacity: 0,\n    \"&:hover\": {\n      opacity: 1,\n    },\n    \"&:focus-visible\": {\n      opacity: 1,\n    },\n  },\n})\n\nexport type DataTableResizeHandleProps<TData = unknown, TValue = unknown> = {\n  /** The TanStack Table header instance */\n  header: Header<TData, TValue>\n  /** Accessible label for the resize handle. Recommended for i18n and accessibility. Receives column.id as parameter. */\n  ariaLabel?: string | ((columnId: string) => string)\n  /** Whether the handle is visible. When false, handle is hidden but becomes visible on direct hover or focus. */\n  isVisible?: boolean\n  /** Step increment in pixels for keyboard resizing. Default: 10 */\n  step?: number\n  className?: string\n} & Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">\n\nfunction DataTableResizeHandleInner<TData = unknown, TValue = unknown>(\n  {\n    header,\n    ariaLabel,\n    isVisible = true,\n    step = 10,\n    className,\n    onMouseDown,\n    onTouchStart,\n    onKeyDown,\n    ...props\n  }: DataTableResizeHandleProps<TData, TValue>,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  const styles = useStyles()\n  const { table } = useDataTable()\n  const column = header.column\n  const contentContext = useDataTableContent()\n\n  const resolvedAriaLabel = ariaLabel\n    ? typeof ariaLabel === \"function\"\n      ? ariaLabel(column.id)\n      : ariaLabel\n    : `Resize ${column.id} column`\n\n  if (!column.getCanResize()) {\n    return null\n  }\n\n  const isResizing = column.getIsResizing()\n\n  // Wrap resize handlers to sync widths before resize starts\n  // This prevents snap/jump by syncing visual widths to stored widths\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDown?.(e)\n    if (!e.defaultPrevented) {\n      contentContext?.syncColumnWidthsBeforeResize()\n      header.getResizeHandler()(e)\n    }\n  }\n\n  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {\n    onTouchStart?.(e)\n    if (!e.defaultPrevented) {\n      contentContext?.syncColumnWidthsBeforeResize()\n      header.getResizeHandler()(e)\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e)\n    if (e.defaultPrevented) return\n\n    if (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\") {\n      e.preventDefault()\n\n      const currentSize = column.getSize()\n      const minSize = column.columnDef.minSize ?? 20\n      const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER\n      const delta = e.key === \"ArrowRight\" ? step : -step\n      const newSize = Math.min(maxSize, Math.max(minSize, currentSize + delta))\n\n      table.setColumnSizing((prev) => ({\n        ...prev,\n        [column.id]: newSize,\n      }))\n    } else if (e.key === \"Home\") {\n      e.preventDefault()\n\n      const minSize = column.columnDef.minSize ?? 20\n      table.setColumnSizing((prev) => ({\n        ...prev,\n        [column.id]: minSize,\n      }))\n    } else if (e.key === \"End\" && column.columnDef.maxSize !== undefined) {\n      e.preventDefault()\n\n      const maxSize = column.columnDef.maxSize\n      table.setColumnSizing((prev) => ({\n        ...prev,\n        [column.id]: maxSize,\n      }))\n    }\n  }\n\n  const currentSize = Math.round(column.getSize())\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-resize-handle\"\n      {...{ [SLOT_ATTR]: \"data-table-resize-handle\" }}\n      data-fs-element=\"DataTable-ResizeHandle\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label={resolvedAriaLabel}\n      aria-valuenow={currentSize}\n      aria-valuemin={column.columnDef.minSize ?? 20}\n      aria-valuemax={column.columnDef.maxSize}\n      tabIndex={0}\n      onMouseDown={handleMouseDown}\n      onTouchStart={handleTouchStart}\n      onKeyDown={handleKeyDown}\n      className={mergeClasses(\n        styles.handle,\n        isResizing && styles.resizing,\n        !isVisible && styles.hidden,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Resize handle for column headers.\n * Subtly visible by default, more prominent on hover and during drag.\n * Supports keyboard navigation via Left/Right arrow keys.\n */\nexport const DataTableResizeHandle = React.forwardRef(\n  DataTableResizeHandleInner\n) as <TData = unknown, TValue = unknown>(\n  props: DataTableResizeHandleProps<TData, TValue> & {\n    ref?: React.Ref<HTMLDivElement>\n  }\n) => React.ReactElement | null\n"],"names":["useStyles","makeZenithStyles","tokens.grayA4","tokens.accent8","tokens.accentA8","tokens.accent9","shorthands","DataTableResizeHandleInner","header","ariaLabel","isVisible","step","className","onMouseDown","onTouchStart","onKeyDown","props","ref","styles","table","useDataTable","column","contentContext","useDataTableContent","resolvedAriaLabel","isResizing","handleMouseDown","handleTouchStart","handleKeyDown","currentSize","minSize","maxSize","delta","newSize","prev","jsx","SLOT_ATTR","mergeClasses","DataTableResizeHandle","React"],"mappings":"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"}