@epilot/volt-ui-experimental-griffel 0.1.2 → 0.2.0

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

@@ -0,0 +1,128 @@
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import * as l from "react";
+import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as g } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as m } from "../../styles/make-styles.js";
+import { accent11 as p, accentA8 as u, semAccentSoft as w, spacingElement1 as c, radiusLg as k } from "../../tokens/index.js";
+const f = (e) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: [
+      /* @__PURE__ */ o("path", { d: "m5 12 7-7 7 7" }),
+      /* @__PURE__ */ o("path", { d: "M12 19V5" })
+    ]
+  }
+), v = (e) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: [
+      /* @__PURE__ */ o("path", { d: "M12 5v14" }),
+      /* @__PURE__ */ o("path", { d: "m19 12-7 7-7-7" })
+    ]
+  }
+), S = (e) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: [
+      /* @__PURE__ */ o("path", { d: "m7 15 5 5 5-5" }),
+      /* @__PURE__ */ o("path", { d: "m7 9 5-5 5 5" })
+    ]
+  }
+), b = m({
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: c,
+    ...i.paddingBlock("0.125rem"),
+    ...i.paddingInline(c),
+    ...i.borderRadius(k),
+    cursor: "pointer",
+    transitionProperty: "color, background-color, border-color",
+    transitionDuration: "150ms",
+    ":hover": {
+      backgroundColor: w
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: u
+    }
+  },
+  iconActive: {
+    width: "1rem",
+    height: "1rem",
+    color: p,
+    flexShrink: 0
+  },
+  iconUnsorted: {
+    width: "1rem",
+    height: "1rem",
+    opacity: 0.4,
+    flexShrink: 0
+  }
+});
+function x({ column: e, title: t, className: a }, d) {
+  const r = b();
+  return e.getCanSort() ? /* @__PURE__ */ n(
+    "span",
+    {
+      ref: d,
+      role: "button",
+      tabIndex: 0,
+      "data-slot": "data-table-column-header",
+      [g]: "data-table-column-header",
+      "data-fs-element": "DataTable-SortButton",
+      onClick: () => e.toggleSorting(),
+      onKeyDown: (s) => {
+        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), e.toggleSorting());
+      },
+      "aria-label": e.getIsSorted() === "asc" ? `${t}, sorted ascending. Click to sort descending.` : e.getIsSorted() === "desc" ? `${t}, sorted descending. Click to remove sorting.` : `${t}. Click to sort ascending.`,
+      className: h(r.button, a),
+      children: [
+        t,
+        e.getIsSorted() === "asc" && /* @__PURE__ */ o(f, { className: r.iconActive }),
+        e.getIsSorted() === "desc" && /* @__PURE__ */ o(v, { className: r.iconActive }),
+        !e.getIsSorted() && /* @__PURE__ */ o(S, { className: r.iconUnsorted })
+      ]
+    }
+  ) : /* @__PURE__ */ o("span", { ref: d, className: a, children: t });
+}
+const T = l.forwardRef(
+  x
+);
+export {
+  T as DataTableColumnHeader
+};
+//# sourceMappingURL=data-table-column-header.js.map

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

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

package/dist/components/data-table/data-table-column-visibility.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { ComponentProps, ReactNode } from "react";
+import { DropdownMenu } from "../dropdown-menu/dropdown-menu";
+export type DataTableColumnVisibilityProps = {
+    /** Custom icon for the default trigger button. Falls back to settings gear icon. */
+    icon?: ReactNode;
+    /** Custom trigger element. Defaults to a settings icon button. */
+    trigger?: ReactNode;
+    /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */
+    label: string;
+    /** Additional class name for the dropdown content */
+    contentClassName?: string;
+    /** Alignment of dropdown relative to trigger. Default: "end" */
+    align?: "start" | "center" | "end";
+} & Omit<ComponentProps<typeof DropdownMenu>, "children">;
+/**
+ * A dropdown menu for toggling column visibility in DataTable.
+ * Shows checkboxes for each column that can be hidden.
+ * Place in DataTableToolbar for consistent layout.
+ */
+export declare const DataTableColumnVisibility: React.ForwardRefExoticComponent<Omit<DataTableColumnVisibilityProps, "ref"> & React.RefAttributes<HTMLElement>>;

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

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

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

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

package/dist/components/data-table/data-table-content.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { ReactNode } from "react";
+export type DataTableContentProps = {
+    /** Children to render inside the table (DataTableHeader, DataTableBody) */
+    children?: ReactNode;
+    /** Additional class name */
+    className?: string;
+};
+/**
+ * Container component for DataTable that handles the table structure.
+ * If no children are provided, renders DataTableHeader and DataTableBody by default.
+ */
+export declare const DataTableContent: React.ForwardRefExoticComponent<DataTableContentProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-content.js","sources":["../../../src/components/data-table/data-table-content.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRef, useMemo, useCallback, useState, useEffect } from \"react\"\nimport { flushSync } from \"react-dom\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { useDataTable } from \"./hooks\"\nimport { DataTableContentContext } from \"./data-table-context\"\nimport { DataTableHeader } from \"./data-table-header\"\nimport { DataTableBody } from \"./data-table-body\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeVoltStyles({\n  container: {\n    position: \"relative\",\n    width: \"100%\",\n    ...shorthands.overflow(\"auto\"),\n  },\n  resizing: {\n    cursor: \"col-resize\",\n    userSelect: \"none\",\n  },\n  table: {\n    tableLayout: \"fixed\",\n    borderCollapse: \"separate\",\n    borderSpacing: 0,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n})\n\nexport type DataTableContentProps = {\n  /** Children to render inside the table (DataTableHeader, DataTableBody) */\n  children?: ReactNode\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Container component for DataTable that handles the table structure.\n * If no children are provided, renders DataTableHeader and DataTableBody by default.\n */\nexport const DataTableContent = React.forwardRef<\n  HTMLDivElement,\n  DataTableContentProps\n>(function DataTableContent({ children, className }, ref) {\n  const styles = useStyles()\n  const { table, disableColumnResizing } = useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n\n  const isResizing =\n    enableColumnResizing && table.getState().columnSizingInfo?.isResizingColumn\n  const internalContainerRef = useRef<HTMLDivElement>(null!)\n  const tableRef = useRef<HTMLTableElement>(null)\n  const [hasSyncedWidths, setHasSyncedWidths] = useState(false)\n  const [containerWidth, setContainerWidth] = useState(0)\n\n  // Attach ref to internal ref or forwarded ref\n  const handleRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      internalContainerRef.current = node!\n      if (typeof ref === \"function\") {\n        ref(node)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      }\n    },\n    [ref]\n  )\n\n  // Track container width for spacer calculation\n  useEffect(() => {\n    const container = internalContainerRef.current\n    if (!container || typeof ResizeObserver === \"undefined\") return\n\n    const observer = new ResizeObserver((entries) => {\n      setContainerWidth(entries[0].contentRect.width)\n    })\n    observer.observe(container)\n    return () => observer.disconnect()\n  }, [])\n\n  // Sync visual column widths to stored widths BEFORE resize starts\n  const syncColumnWidthsBeforeResize = useCallback(() => {\n    if (tableRef.current && !hasSyncedWidths) {\n      const headerCells = tableRef.current.querySelectorAll(\n        \"th:not([data-spacer])\"\n      )\n      const columns = table.getVisibleLeafColumns()\n\n      if (headerCells.length === columns.length) {\n        const newSizing: Record<string, number> = {}\n\n        headerCells.forEach((cell, index) => {\n          const column = columns[index]\n          if (column) {\n            newSizing[column.id] = Math.round(\n              cell.getBoundingClientRect().width\n            )\n          }\n        })\n\n        flushSync(() => {\n          setHasSyncedWidths(true)\n          table.setColumnSizing((prev) => ({ ...prev, ...newSizing }))\n        })\n      }\n    }\n  }, [table, hasSyncedWidths])\n\n  // Get column sizing and visibility state to trigger recalculation\n  const columnSizing = table.getState().columnSizing\n  const columnVisibility = table.getState().columnVisibility\n\n  // Calculate total column width from visible columns\n  const calculatedColumnSum = useMemo(() => {\n    const totalWidth = table.getVisibleLeafColumns().reduce((sum, col) => {\n      return sum + (col.getSize() ?? DEFAULT_COLUMN_WIDTH)\n    }, 0)\n    return totalWidth\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table, columnSizing, columnVisibility])\n\n  const WIDTH_BUFFER = 4\n  const tableWidth = useMemo(() => {\n    if (!hasSyncedWidths) {\n      return `calc(100% - ${WIDTH_BUFFER}px)`\n    }\n    return calculatedColumnSum\n      ? `${calculatedColumnSum}px`\n      : `calc(100% - ${WIDTH_BUFFER}px)`\n  }, [hasSyncedWidths, calculatedColumnSum])\n\n  // Calculate spacer width to fill remaining container space after resize\n  const spacerWidth = useMemo(() => {\n    if (!hasSyncedWidths || !containerWidth) return 0\n    return Math.max(0, containerWidth - calculatedColumnSum)\n  }, [hasSyncedWidths, containerWidth, calculatedColumnSum])\n\n  // If no children, render default header + body\n  const content = children ?? (\n    <>\n      <DataTableHeader />\n      <DataTableBody />\n    </>\n  )\n\n  const contentContextValue = useMemo(\n    () => ({ syncColumnWidthsBeforeResize, spacerWidth }),\n    [syncColumnWidthsBeforeResize, spacerWidth]\n  )\n\n  return (\n    <DataTableContentContext.Provider value={contentContextValue}>\n      <div\n        ref={handleRef}\n        data-slot=\"data-table-content\"\n        {...{ [SLOT_ATTR]: \"data-table-content\" }}\n        data-fs-element=\"DataTable-Content\"\n        className={mergeClasses(\n          styles.container,\n          isResizing && styles.resizing,\n          className\n        )}\n      >\n        <table\n          ref={tableRef}\n          data-slot=\"table\"\n          {...{ [SLOT_ATTR]: \"table\" }}\n          className={styles.table}\n          style={{ width: tableWidth }}\n        >\n          {content}\n        </table>\n      </div>\n    </DataTableContentContext.Provider>\n  )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeVoltStyles","shorthands","tokens.textSm","tokens.leadingSm","DataTableContent","React","children","className","ref","styles","table","disableColumnResizing","useDataTable","isResizing","_a","internalContainerRef","useRef","tableRef","hasSyncedWidths","setHasSyncedWidths","useState","containerWidth","setContainerWidth","handleRef","useCallback","node","useEffect","container","observer","entries","syncColumnWidthsBeforeResize","headerCells","columns","newSizing","cell","index","column","flushSync","prev","columnSizing","columnVisibility","calculatedColumnSum","useMemo","sum","col","WIDTH_BUFFER","tableWidth","spacerWidth","content","jsxs","Fragment","jsx","DataTableHeader","DataTableBody","contentContextValue","DataTableContentContext","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/data-table/data-table-context.d.ts

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

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

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

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

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

package/dist/components/data-table/data-table-error.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { ReactNode } from "react";
+export type DataTableErrorProps = {
+    /** Error title text */
+    title?: string;
+    /** Error description/message */
+    description?: ReactNode;
+    /** Retry button text */
+    retryLabel?: string;
+    /** Callback when retry is clicked */
+    onRetry?: () => void;
+    /** Additional class name */
+    className?: string;
+    /** Custom error content (overrides default error display) */
+    children?: ReactNode;
+};
+/**
+ * Error state display for DataTable.
+ * Shows an error icon, message, and optional retry button.
+ */
+export declare const DataTableError: React.ForwardRefExoticComponent<DataTableErrorProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

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

package/dist/components/data-table/data-table-header.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type DataTableHeaderProps = {
+    /** Additional class name */
+    className?: string;
+    /** Whether to make header sticky */
+    sticky?: boolean;
+    /** Background color for sticky header. Default: tokens.gray2 */
+    stickyBackground?: string;
+};
+/**
+ * Renders the table header with column headers.
+ * Must be used within a DataTable component.
+ */
+export declare const DataTableHeader: React.ForwardRefExoticComponent<DataTableHeaderProps & React.RefAttributes<HTMLTableSectionElement>>;