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

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

@@ -1 +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":"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"}
+{"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 { boxModel, nativeControl } from \"../../styles/host-reset\"\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    ...nativeControl,\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    ...boxModel,\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  icon: {\n    ...boxModel,\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","nativeControl","tokens.grayA8","shorthands","tokens.grayA12","tokens.accentA8","boxModel","DataTableHeaderDraggable","React","headerId","disabled","children","existingStyle","className","tableHeadProps","ref","styles","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","handleRef","node","style","CSS","TableHead","mergeClasses"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-loading.js","sources":["../../../src/components/data-table/data-table-loading.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Spinner } from \"../spinner/spinner\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement2,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n  },\n  spinner: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableLoadingProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom loading content (overrides default spinner) */\n  children?: ReactNode\n}\n\n/**\n * Loading state display for DataTable.\n * Renders a centered spinner by default, or custom content when children are provided.\n */\nexport const DataTableLoading = React.forwardRef<\n  HTMLDivElement,\n  DataTableLoadingProps\n>(function DataTableLoading({ className, children }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-loading\"\n      {...{ [SLOT_ATTR]: \"data-table-loading\" }}\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? <Spinner className={styles.spinner} />}\n    </div>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.spacingElement2","shorthands","tokens.spacingLayout2","tokens.grayA11","DataTableLoading","React","className","children","ref","styles","jsx","SLOT_ATTR","mergeClasses","Spinner"],"mappings":";;;;;;AASA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,EAAA;AAAA,EAElD,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOC;AAAAA,EAAO;AAElB,CAAC,GAaYC,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,EAAA,GAAYC,GAAK;AACxD,QAAMC,IAASX,EAAA;AAEf,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMH,CAAS;AAAA,MAE7C,UAAAC,KAAY,gBAAAG,EAACG,GAAA,EAAQ,WAAWJ,EAAO,QAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}
+{"version":3,"file":"data-table-loading.js","sources":["../../../src/components/data-table/data-table-loading.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Spinner } from \"../spinner/spinner\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement2,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n  },\n  spinner: {\n    ...boxModel,\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableLoadingProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom loading content (overrides default spinner) */\n  children?: ReactNode\n}\n\n/**\n * Loading state display for DataTable.\n * Renders a centered spinner by default, or custom content when children are provided.\n */\nexport const DataTableLoading = React.forwardRef<\n  HTMLDivElement,\n  DataTableLoadingProps\n>(function DataTableLoading({ className, children }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-loading\"\n      {...{ [SLOT_ATTR]: \"data-table-loading\" }}\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? <Spinner className={styles.spinner} />}\n    </div>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.spacingElement2","shorthands","tokens.spacingLayout2","tokens.grayA11","DataTableLoading","React","className","children","ref","styles","jsx","SLOT_ATTR","mergeClasses","Spinner"],"mappings":";;;;;;;AAUA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,EAAA;AAAA,EAElD,SAAS;AAAA,IACP,GAAGH;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOI;AAAAA,EAAO;AAElB,CAAC,GAaYC,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,EAAA,GAAYC,GAAK;AACxD,QAAMC,IAASZ,EAAA;AAEf,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMH,CAAS;AAAA,MAE7C,UAAAC,KAAY,gBAAAG,EAACG,GAAA,EAAQ,WAAWJ,EAAO,QAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}

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

@@ -2,11 +2,13 @@ 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 { boxModel as M } from "../../styles/host-reset.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({
+import { useDataTableContent as O } from "./hooks/use-data-table-content.js";
+const j = w({
   handle: {
+    ...M,
     position: "absolute",
     right: 0,
     top: 0,
@@ -57,7 +59,7 @@ const O = w({
     }
   }
 });
-function j({
+function F({
   header: r,
   ariaLabel: a,
   isVisible: z = !0,
@@ -68,14 +70,14 @@ function j({
   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`;
+  const m = j(), { table: u } = B(), i = r.column, t = O(), 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) => {
+  }, x = (e) => {
     if (c == null || c(e), !e.defaultPrevented) {
       if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
         e.preventDefault();
@@ -100,7 +102,7 @@ function j({
         }));
       }
     }
-  }, x = Math.round(i.getSize());
+  }, y = Math.round(i.getSize());
   return /* @__PURE__ */ T(
     "div",
     {
@@ -111,13 +113,13 @@ function j({
       role: "separator",
       "aria-orientation": "vertical",
       "aria-label": S,
-      "aria-valuenow": x,
+      "aria-valuenow": y,
       "aria-valuemin": i.columnDef.minSize ?? 20,
       "aria-valuemax": i.columnDef.maxSize,
       tabIndex: 0,
       onMouseDown: v,
       onTouchStart: R,
-      onKeyDown: y,
+      onKeyDown: x,
       className: I(
         m.handle,
         b && m.resizing,
@@ -128,10 +130,10 @@ function j({
     }
   );
 }
-const J = H.forwardRef(
-  j
+const Q = H.forwardRef(
+  F
 );
 export {
-  J as DataTableResizeHandle
+  Q as DataTableResizeHandle
 };
 //# sourceMappingURL=data-table-resize-handle.js.map

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

@@ -1 +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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"}
+{"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 { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\n\nconst useStyles = makeZenithStyles({\n  handle: {\n    ...boxModel,\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","boxModel","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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"}

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

@@ -1,22 +1,23 @@
-import { jsxs as W, jsx as b } from "react/jsx-runtime";
-import * as A from "react";
-import { flexRender as B } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
+import { jsxs as A, jsx as b } from "react/jsx-runtime";
+import * as B from "react";
+import { flexRender as N } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
 import { mergeClasses as p, SLOT_ATTR as f, shorthands as h } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as N } from "../../styles/make-styles.js";
-import { grayA6 as P, accentA3 as g } from "../../tokens/index.js";
-import { TableRow as $, TableCell as x } from "../table/table.js";
-import { getPinnedColumnOffset as z, isLastLeftPinnedColumn as j, isFirstRightPinnedColumn as F } from "./data-table-pinning-utils.js";
-import { useDataTable as K } from "./hooks/use-data-table.js";
-import { useDataTableContent as V } from "./hooks/use-data-table-content.js";
-function _(t, a) {
+import { makeZenithStyles as P } from "../../styles/make-styles.js";
+import { boxModel as g } from "../../styles/host-reset.js";
+import { grayA6 as $, accentA3 as x } from "../../tokens/index.js";
+import { TableRow as z, TableCell as C } from "../table/table.js";
+import { getPinnedColumnOffset as j, isLastLeftPinnedColumn as F, isFirstRightPinnedColumn as K } from "./data-table-pinning-utils.js";
+import { useDataTable as V } from "./hooks/use-data-table.js";
+import { useDataTableContent as _ } from "./hooks/use-data-table-content.js";
+function Z(t, a) {
   const n = t.column.columnDef.meta;
   return (n == null ? void 0 : n.cellOverflow) ?? a;
 }
-function Z(t) {
+function q(t) {
   const a = t.column.columnDef.meta;
   return a == null ? void 0 : a.align;
 }
-const C = [
+const k = [
   "button",
   "a",
   "input",
@@ -36,29 +37,31 @@ const C = [
   '[role="tab"]',
   "[data-radix-collection-item]",
   `[${f}="checkbox"]`
-], q = N({
+], G = P({
   rowClickable: {
     cursor: "pointer",
     ":hover": {
-      backgroundColor: g
+      backgroundColor: x
     }
   },
   rowSelected: {
-    backgroundColor: g
+    backgroundColor: x
   },
   rowBorder: {
-    boxShadow: `inset 0 -1px 0 0 ${P}`,
+    boxShadow: `inset 0 -1px 0 0 ${$}`,
     "&:last-child": {
       boxShadow: "none"
     }
   },
   cellTruncate: {
+    ...g,
     maxWidth: 0,
     ...h.overflow("hidden"),
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
   cellWrap: {
+    ...g,
     maxWidth: 0,
     ...h.overflow("hidden"),
     overflowWrap: "break-word",
@@ -71,35 +74,35 @@ const C = [
     boxShadow: "-2px 0 5px -2px rgba(0,0,0,0.1)"
   }
 });
-function G({ row: t, style: a, className: n }, k) {
-  const r = q(), {
+function H({ row: t, style: a, className: n }, v) {
+  const r = G(), {
     table: c,
     onRowClick: i,
-    clickableRowClassName: v,
-    selectedRowClassName: R,
-    cellOverflow: T = "truncate",
-    showRowBorders: S,
-    disableColumnResizing: D
-  } = K(), d = V(), u = (d == null ? void 0 : d.spacerWidth) ?? 0, I = !D, s = !!i, y = (e) => {
+    clickableRowClassName: R,
+    selectedRowClassName: T,
+    cellOverflow: S = "truncate",
+    showRowBorders: D,
+    disableColumnResizing: I
+  } = V(), d = _(), u = (d == null ? void 0 : d.spacerWidth) ?? 0, y = !I, s = !!i, E = (e) => {
     if (!i) return;
     const l = e.target;
-    C.some(
+    k.some(
       (o) => l.closest(o)
     ) || i(t, e);
-  }, E = (e) => {
+  }, O = (e) => {
     if (i && (e.key === "Enter" || e.key === " ")) {
       const l = e.target;
-      if (C.some(
+      if (k.some(
         (o) => l.closest(o)
       ))
         return;
       e.preventDefault(), i(t, e);
     }
   };
-  return /* @__PURE__ */ W(
-    $,
+  return /* @__PURE__ */ A(
+    z,
     {
-      ref: k,
+      ref: v,
       "data-slot": "data-table-row",
       [f]: "data-table-row",
       "data-fs-element": "DataTable-Row",
@@ -107,19 +110,19 @@ function G({ row: t, style: a, className: n }, k) {
       "data-clickable": s ? "true" : void 0,
       style: a,
       className: p(
-        S !== !1 && r.rowBorder,
-        s && (v ?? r.rowClickable),
-        t.getIsSelected() && (R ?? r.rowSelected),
+        D !== !1 && r.rowBorder,
+        s && (R ?? r.rowClickable),
+        t.getIsSelected() && (T ?? r.rowSelected),
         n
       ),
-      onClick: s ? y : void 0,
+      onClick: s ? E : void 0,
       tabIndex: s ? 0 : void 0,
-      onKeyDown: s ? E : void 0,
+      onKeyDown: s ? O : void 0,
       children: [
         t.getVisibleCells().map((e) => {
-          const l = _(e, T), m = Z(e), o = e.column.getIsPinned(), w = o ? z(e.column, c) : void 0, O = j(e.column, c), L = F(e.column, c);
+          const l = Z(e, S), m = q(e), o = e.column.getIsPinned(), w = o ? j(e.column, c) : void 0, L = F(e.column, c), W = K(e.column, c);
           return /* @__PURE__ */ b(
-            x,
+            C,
             {
               "data-slot": "data-table-cell",
               [f]: "data-table-cell",
@@ -127,23 +130,23 @@ function G({ row: t, style: a, className: n }, k) {
               "data-pinned": o || void 0,
               align: m,
               style: {
-                width: I || o ? e.column.getSize() : void 0,
+                width: y || o ? e.column.getSize() : void 0,
                 left: o === "left" ? `${w}px` : void 0,
                 right: o === "right" ? `${w}px` : void 0
               },
               className: p(
                 l === "truncate" && r.cellTruncate,
                 l === "wrap" && r.cellWrap,
-                O && r.shadowLeft,
-                L && r.shadowRight
+                L && r.shadowLeft,
+                W && r.shadowRight
               ),
-              children: B(e.column.columnDef.cell, e.getContext())
+              children: N(e.column.columnDef.cell, e.getContext())
             },
             e.id
           );
         }),
         u > 0 && /* @__PURE__ */ b(
-          x,
+          C,
           {
             "data-spacer": !0,
             "aria-hidden": "true",
@@ -154,8 +157,8 @@ function G({ row: t, style: a, className: n }, k) {
     }
   );
 }
-const oe = A.forwardRef(G);
+const re = B.forwardRef(H);
 export {
-  oe as DataTableRow
+  re as DataTableRow
 };
 //# sourceMappingURL=data-table-row.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-row.js","sources":["../../../src/components/data-table/data-table-row.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, MouseEvent, KeyboardEvent } from \"react\"\nimport type { Row, Cell } from \"@tanstack/react-table\"\nimport { flexRender } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport type { DataTableCellOverflow } from \"./data-table-context\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\ntype CellAlign = \"left\" | \"center\" | \"right\"\n\n/**\n * Gets the cell overflow mode, checking column meta first, then falling back to table default.\n */\nfunction getCellOverflow<TData>(\n  cell: Cell<TData, unknown>,\n  tableDefault: DataTableCellOverflow\n): DataTableCellOverflow {\n  const columnMeta = cell.column.columnDef.meta as\n    { cellOverflow?: DataTableCellOverflow } | undefined\n  return columnMeta?.cellOverflow ?? tableDefault\n}\n\n/**\n * Gets the cell alignment from column meta.\n */\nfunction getCellAlign<TData>(\n  cell: Cell<TData, unknown>\n): CellAlign | undefined {\n  const columnMeta = cell.column.columnDef.meta as\n    { align?: CellAlign } | undefined\n  return columnMeta?.align\n}\n\n// Interactive element selectors that should NOT trigger row click\nconst INTERACTIVE_SELECTORS = [\n  \"button\",\n  \"a\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  '[role=\"button\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"link\"]',\n  '[role=\"menuitem\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]',\n  '[role=\"option\"]',\n  '[role=\"radio\"]',\n  '[role=\"slider\"]',\n  '[role=\"spinbutton\"]',\n  '[role=\"switch\"]',\n  '[role=\"tab\"]',\n  \"[data-radix-collection-item]\",\n  `[${SLOT_ATTR}=\"checkbox\"]`,\n]\n\nconst useStyles = makeZenithStyles({\n  rowClickable: {\n    cursor: \"pointer\",\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  rowSelected: {\n    backgroundColor: tokens.accentA3,\n  },\n  rowBorder: {\n    boxShadow: `inset 0 -1px 0 0 ${tokens.grayA6}`,\n    \"&:last-child\": {\n      boxShadow: \"none\",\n    },\n  },\n  cellTruncate: {\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  cellWrap: {\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    overflowWrap: \"break-word\",\n    wordBreak: \"break-word\",\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableRowProps<TData> = {\n  /** The row instance from TanStack Table */\n  row: Row<TData>\n  /** Optional style (used for virtualized row heights) */\n  style?: CSSProperties\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Renders a single table row with its cells.\n * Supports clickable rows when onRowClick is provided via DataTable context.\n */\nfunction DataTableRowInner<TData>(\n  { row, style, className }: DataTableRowProps<TData>,\n  ref: React.ForwardedRef<HTMLTableRowElement>\n) {\n  const styles = useStyles()\n  const {\n    table,\n    onRowClick,\n    clickableRowClassName,\n    selectedRowClassName,\n    cellOverflow: tableCellOverflow = \"truncate\",\n    showRowBorders,\n    disableColumnResizing,\n  } = useDataTable<TData>()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const enableColumnResizing = !disableColumnResizing\n  const isClickable = Boolean(onRowClick)\n\n  const handleClick = (event: MouseEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    // Check if click originated from an interactive element\n    const target = event.target as HTMLElement\n    const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n      target.closest(selector)\n    )\n\n    if (isInteractiveElement) {\n      return // Don't trigger row click for interactive elements\n    }\n\n    onRowClick(row, event)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      // Check if key event originated from an interactive element\n      const target = event.target as HTMLElement\n      const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n        target.closest(selector)\n      )\n\n      if (isInteractiveElement) {\n        return // Let the interactive element handle the event\n      }\n\n      event.preventDefault()\n      onRowClick(row, event as unknown as MouseEvent<HTMLTableRowElement>)\n    }\n  }\n\n  return (\n    <TableRow\n      ref={ref}\n      data-slot=\"data-table-row\"\n      {...{ [SLOT_ATTR]: \"data-table-row\" }}\n      data-fs-element=\"DataTable-Row\"\n      data-state={row.getIsSelected() ? \"selected\" : undefined}\n      data-clickable={isClickable ? \"true\" : undefined}\n      style={style}\n      className={mergeClasses(\n        showRowBorders !== false && styles.rowBorder,\n        isClickable && (clickableRowClassName ?? styles.rowClickable),\n        row.getIsSelected() && (selectedRowClassName ?? styles.rowSelected),\n        className\n      )}\n      onClick={isClickable ? handleClick : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={isClickable ? handleKeyDown : undefined}\n    >\n      {row.getVisibleCells().map((cell) => {\n        const overflow = getCellOverflow(cell, tableCellOverflow)\n        const align = getCellAlign(cell)\n        const isPinned = cell.column.getIsPinned()\n        const pinnedOffset = isPinned\n          ? getPinnedColumnOffset(cell.column, table)\n          : undefined\n        const isLastLeft = isLastLeftPinnedColumn(cell.column, table)\n        const isFirstRight = isFirstRightPinnedColumn(cell.column, table)\n\n        return (\n          <TableCell\n            key={cell.id}\n            data-slot=\"data-table-cell\"\n            {...{ [SLOT_ATTR]: \"data-table-cell\" }}\n            data-fs-element=\"DataTable-Cell\"\n            data-pinned={isPinned || undefined}\n            align={align}\n            style={{\n              width:\n                enableColumnResizing || isPinned\n                  ? cell.column.getSize()\n                  : undefined,\n              left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n              right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n            }}\n            className={mergeClasses(\n              overflow === \"truncate\" && styles.cellTruncate,\n              overflow === \"wrap\" && styles.cellWrap,\n              isLastLeft && styles.shadowLeft,\n              isFirstRight && styles.shadowRight\n            )}\n          >\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </TableCell>\n        )\n      })}\n      {/* Spacer cell - matches header spacer column */}\n      {spacerWidth > 0 && (\n        <TableCell\n          data-spacer\n          aria-hidden=\"true\"\n          style={{ width: spacerWidth, padding: 0 }}\n        />\n      )}\n    </TableRow>\n  )\n}\n\nexport const DataTableRow = React.forwardRef(DataTableRowInner) as <TData>(\n  props: DataTableRowProps<TData> & {\n    ref?: React.Ref<HTMLTableRowElement>\n  }\n) => React.ReactElement | null\n"],"names":["getCellOverflow","cell","tableDefault","columnMeta","getCellAlign","INTERACTIVE_SELECTORS","SLOT_ATTR","useStyles","makeZenithStyles","tokens.accentA3","tokens.grayA6","shorthands","DataTableRowInner","row","style","className","ref","styles","table","onRowClick","clickableRowClassName","selectedRowClassName","tableCellOverflow","showRowBorders","disableColumnResizing","useDataTable","contentContext","useDataTableContent","spacerWidth","enableColumnResizing","isClickable","handleClick","event","target","selector","handleKeyDown","jsxs","TableRow","mergeClasses","overflow","align","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","jsx","TableCell","DataTableRow","React"],"mappings":";;;;;;;;;;AAuBA,SAASA,EACPC,GACAC,GACuB;AACvB,QAAMC,IAAaF,EAAK,OAAO,UAAU;AAEzC,UAAOE,KAAA,gBAAAA,EAAY,iBAAgBD;AACrC;AAKA,SAASE,EACPH,GACuB;AACvB,QAAME,IAAaF,EAAK,OAAO,UAAU;AAEzC,SAAOE,KAAA,gBAAAA,EAAY;AACrB;AAGA,MAAME,IAAwB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAIC,CAAS;AACf,GAEMC,IAAYC,EAAiB;AAAA,EACjC,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,aAAa;AAAA,IACX,iBAAiBA;AAAAA,EAAO;AAAA,EAE1B,WAAW;AAAA,IACT,WAAW,oBAAoBC,CAAa;AAAA,IAC5C,gBAAgB;AAAA,MACd,WAAW;AAAA,IAAA;AAAA,EACb;AAAA,EAEF,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,GAAGC,EAAW,SAAS,QAAQ;AAAA,IAC/B,cAAc;AAAA,IACd,YAAY;AAAA,EAAA;AAAA,EAEd,UAAU;AAAA,IACR,UAAU;AAAA,IACV,GAAGA,EAAW,SAAS,QAAQ;AAAA,IAC/B,cAAc;AAAA,IACd,WAAW;AAAA,EAAA;AAAA,EAEb,YAAY;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAEf,CAAC;AAeD,SAASC,EACP,EAAE,KAAAC,GAAK,OAAAC,GAAO,WAAAC,EAAA,GACdC,GACA;AACA,QAAMC,IAASV,EAAA,GACT;AAAA,IACJ,OAAAW;AAAA,IACA,YAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,cAAcC,IAAoB;AAAA,IAClC,gBAAAC;AAAA,IACA,uBAAAC;AAAA,EAAA,IACEC,EAAA,GACEC,IAAiBC,EAAA,GACjBC,KAAcF,KAAA,gBAAAA,EAAgB,gBAAe,GAE7CG,IAAuB,CAACL,GACxBM,IAAc,EAAQX,GAEtBY,IAAc,CAACC,MAA2C;AAC9D,QAAI,CAACb,EAAY;AAGjB,UAAMc,IAASD,EAAM;AAKrB,IAJ6B3B,EAAsB;AAAA,MAAK,CAAC6B,MACvDD,EAAO,QAAQC,CAAQ;AAAA,IAAA,KAOzBf,EAAWN,GAAKmB,CAAK;AAAA,EACvB,GAEMG,IAAgB,CAACH,MAA8C;AACnE,QAAKb,MAEDa,EAAM,QAAQ,WAAWA,EAAM,QAAQ,MAAK;AAE9C,YAAMC,IAASD,EAAM;AAKrB,UAJ6B3B,EAAsB;AAAA,QAAK,CAAC6B,MACvDD,EAAO,QAAQC,CAAQ;AAAA,MAAA;AAIvB;AAGF,MAAAF,EAAM,eAAA,GACNb,EAAWN,GAAKmB,CAAmD;AAAA,IACrE;AAAA,EACF;AAEA,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAArB;AAAA,MACA,aAAU;AAAA,MACJ,CAACV,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,cAAYO,EAAI,cAAA,IAAkB,aAAa;AAAA,MAC/C,kBAAgBiB,IAAc,SAAS;AAAA,MACvC,OAAAhB;AAAA,MACA,WAAWwB;AAAA,QACTf,MAAmB,MAASN,EAAO;AAAA,QACnCa,MAAgBV,KAAyBH,EAAO;AAAA,QAChDJ,EAAI,cAAA,MAAoBQ,KAAwBJ,EAAO;AAAA,QACvDF;AAAA,MAAA;AAAA,MAEF,SAASe,IAAcC,IAAc;AAAA,MACrC,UAAUD,IAAc,IAAI;AAAA,MAC5B,WAAWA,IAAcK,IAAgB;AAAA,MAExC,UAAA;AAAA,QAAAtB,EAAI,gBAAA,EAAkB,IAAI,CAACZ,MAAS;AACnC,gBAAMsC,IAAWvC,EAAgBC,GAAMqB,CAAiB,GAClDkB,IAAQpC,EAAaH,CAAI,GACzBwC,IAAWxC,EAAK,OAAO,YAAA,GACvByC,IAAeD,IACjBE,EAAsB1C,EAAK,QAAQiB,CAAK,IACxC,QACE0B,IAAaC,EAAuB5C,EAAK,QAAQiB,CAAK,GACtD4B,IAAeC,EAAyB9C,EAAK,QAAQiB,CAAK;AAEhE,iBACE,gBAAA8B;AAAA,YAACC;AAAA,YAAA;AAAA,cAEC,aAAU;AAAA,cACJ,CAAC3C,CAAS,GAAG;AAAA,cACnB,mBAAgB;AAAA,cAChB,eAAamC,KAAY;AAAA,cACzB,OAAAD;AAAA,cACA,OAAO;AAAA,gBACL,OACEX,KAAwBY,IACpBxC,EAAK,OAAO,YACZ;AAAA,gBACN,MAAMwC,MAAa,SAAS,GAAGC,CAAY,OAAO;AAAA,gBAClD,OAAOD,MAAa,UAAU,GAAGC,CAAY,OAAO;AAAA,cAAA;AAAA,cAEtD,WAAWJ;AAAA,gBACTC,MAAa,cAActB,EAAO;AAAA,gBAClCsB,MAAa,UAAUtB,EAAO;AAAA,gBAC9B2B,KAAc3B,EAAO;AAAA,gBACrB6B,KAAgB7B,EAAO;AAAA,cAAA;AAAA,cAGxB,YAAWhB,EAAK,OAAO,UAAU,MAAMA,EAAK,YAAY;AAAA,YAAA;AAAA,YArBpDA,EAAK;AAAA,UAAA;AAAA,QAwBhB,CAAC;AAAA,QAEA2B,IAAc,KACb,gBAAAoB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,eAAY;AAAA,YACZ,OAAO,EAAE,OAAOrB,GAAa,SAAS,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,MAC1C;AAAA,IAAA;AAAA,EAAA;AAIR;AAEO,MAAMsB,KAAeC,EAAM,WAAWvC,CAAiB;"}
+{"version":3,"file":"data-table-row.js","sources":["../../../src/components/data-table/data-table-row.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, MouseEvent, KeyboardEvent } from \"react\"\nimport type { Row, Cell } from \"@tanstack/react-table\"\nimport { flexRender } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport type { DataTableCellOverflow } from \"./data-table-context\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\ntype CellAlign = \"left\" | \"center\" | \"right\"\n\n/**\n * Gets the cell overflow mode, checking column meta first, then falling back to table default.\n */\nfunction getCellOverflow<TData>(\n  cell: Cell<TData, unknown>,\n  tableDefault: DataTableCellOverflow\n): DataTableCellOverflow {\n  const columnMeta = cell.column.columnDef.meta as\n    { cellOverflow?: DataTableCellOverflow } | undefined\n  return columnMeta?.cellOverflow ?? tableDefault\n}\n\n/**\n * Gets the cell alignment from column meta.\n */\nfunction getCellAlign<TData>(\n  cell: Cell<TData, unknown>\n): CellAlign | undefined {\n  const columnMeta = cell.column.columnDef.meta as\n    { align?: CellAlign } | undefined\n  return columnMeta?.align\n}\n\n// Interactive element selectors that should NOT trigger row click\nconst INTERACTIVE_SELECTORS = [\n  \"button\",\n  \"a\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  '[role=\"button\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"link\"]',\n  '[role=\"menuitem\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]',\n  '[role=\"option\"]',\n  '[role=\"radio\"]',\n  '[role=\"slider\"]',\n  '[role=\"spinbutton\"]',\n  '[role=\"switch\"]',\n  '[role=\"tab\"]',\n  \"[data-radix-collection-item]\",\n  `[${SLOT_ATTR}=\"checkbox\"]`,\n]\n\nconst useStyles = makeZenithStyles({\n  rowClickable: {\n    cursor: \"pointer\",\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  rowSelected: {\n    backgroundColor: tokens.accentA3,\n  },\n  rowBorder: {\n    boxShadow: `inset 0 -1px 0 0 ${tokens.grayA6}`,\n    \"&:last-child\": {\n      boxShadow: \"none\",\n    },\n  },\n  cellTruncate: {\n    ...boxModel,\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  cellWrap: {\n    ...boxModel,\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    overflowWrap: \"break-word\",\n    wordBreak: \"break-word\",\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableRowProps<TData> = {\n  /** The row instance from TanStack Table */\n  row: Row<TData>\n  /** Optional style (used for virtualized row heights) */\n  style?: CSSProperties\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Renders a single table row with its cells.\n * Supports clickable rows when onRowClick is provided via DataTable context.\n */\nfunction DataTableRowInner<TData>(\n  { row, style, className }: DataTableRowProps<TData>,\n  ref: React.ForwardedRef<HTMLTableRowElement>\n) {\n  const styles = useStyles()\n  const {\n    table,\n    onRowClick,\n    clickableRowClassName,\n    selectedRowClassName,\n    cellOverflow: tableCellOverflow = \"truncate\",\n    showRowBorders,\n    disableColumnResizing,\n  } = useDataTable<TData>()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const enableColumnResizing = !disableColumnResizing\n  const isClickable = Boolean(onRowClick)\n\n  const handleClick = (event: MouseEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    // Check if click originated from an interactive element\n    const target = event.target as HTMLElement\n    const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n      target.closest(selector)\n    )\n\n    if (isInteractiveElement) {\n      return // Don't trigger row click for interactive elements\n    }\n\n    onRowClick(row, event)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      // Check if key event originated from an interactive element\n      const target = event.target as HTMLElement\n      const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n        target.closest(selector)\n      )\n\n      if (isInteractiveElement) {\n        return // Let the interactive element handle the event\n      }\n\n      event.preventDefault()\n      onRowClick(row, event as unknown as MouseEvent<HTMLTableRowElement>)\n    }\n  }\n\n  return (\n    <TableRow\n      ref={ref}\n      data-slot=\"data-table-row\"\n      {...{ [SLOT_ATTR]: \"data-table-row\" }}\n      data-fs-element=\"DataTable-Row\"\n      data-state={row.getIsSelected() ? \"selected\" : undefined}\n      data-clickable={isClickable ? \"true\" : undefined}\n      style={style}\n      className={mergeClasses(\n        showRowBorders !== false && styles.rowBorder,\n        isClickable && (clickableRowClassName ?? styles.rowClickable),\n        row.getIsSelected() && (selectedRowClassName ?? styles.rowSelected),\n        className\n      )}\n      onClick={isClickable ? handleClick : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={isClickable ? handleKeyDown : undefined}\n    >\n      {row.getVisibleCells().map((cell) => {\n        const overflow = getCellOverflow(cell, tableCellOverflow)\n        const align = getCellAlign(cell)\n        const isPinned = cell.column.getIsPinned()\n        const pinnedOffset = isPinned\n          ? getPinnedColumnOffset(cell.column, table)\n          : undefined\n        const isLastLeft = isLastLeftPinnedColumn(cell.column, table)\n        const isFirstRight = isFirstRightPinnedColumn(cell.column, table)\n\n        return (\n          <TableCell\n            key={cell.id}\n            data-slot=\"data-table-cell\"\n            {...{ [SLOT_ATTR]: \"data-table-cell\" }}\n            data-fs-element=\"DataTable-Cell\"\n            data-pinned={isPinned || undefined}\n            align={align}\n            style={{\n              width:\n                enableColumnResizing || isPinned\n                  ? cell.column.getSize()\n                  : undefined,\n              left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n              right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n            }}\n            className={mergeClasses(\n              overflow === \"truncate\" && styles.cellTruncate,\n              overflow === \"wrap\" && styles.cellWrap,\n              isLastLeft && styles.shadowLeft,\n              isFirstRight && styles.shadowRight\n            )}\n          >\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </TableCell>\n        )\n      })}\n      {/* Spacer cell - matches header spacer column */}\n      {spacerWidth > 0 && (\n        <TableCell\n          data-spacer\n          aria-hidden=\"true\"\n          style={{ width: spacerWidth, padding: 0 }}\n        />\n      )}\n    </TableRow>\n  )\n}\n\nexport const DataTableRow = React.forwardRef(DataTableRowInner) as <TData>(\n  props: DataTableRowProps<TData> & {\n    ref?: React.Ref<HTMLTableRowElement>\n  }\n) => React.ReactElement | null\n"],"names":["getCellOverflow","cell","tableDefault","columnMeta","getCellAlign","INTERACTIVE_SELECTORS","SLOT_ATTR","useStyles","makeZenithStyles","tokens.accentA3","tokens.grayA6","boxModel","shorthands","DataTableRowInner","row","style","className","ref","styles","table","onRowClick","clickableRowClassName","selectedRowClassName","tableCellOverflow","showRowBorders","disableColumnResizing","useDataTable","contentContext","useDataTableContent","spacerWidth","enableColumnResizing","isClickable","handleClick","event","target","selector","handleKeyDown","jsxs","TableRow","mergeClasses","overflow","align","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","jsx","TableCell","DataTableRow","React"],"mappings":"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"}

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

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

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

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