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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header.js","sources":["../../../src/components/data-table/data-table-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { flexRender, type Header } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableHeader, TableRow, TableHead } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeVoltStyles({\n  headerTitle: {\n    display: \"block\",\n    ...shorthands.overflow(\"hidden\"),\n    whiteSpace: \"nowrap\",\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableHeaderProps = {\n  /** Additional class name */\n  className?: string\n  /** Whether to make header sticky */\n  sticky?: boolean\n  /** Background color for sticky header. Default: tokens.gray2 */\n  stickyBackground?: string\n}\n\n/**\n * Renders the table header with column headers.\n * Must be used within a DataTable component.\n */\nexport const DataTableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableHeaderProps\n>(function DataTableHeader(\n  { className, sticky = false, stickyBackground = tokens.gray2 },\n  ref\n) {\n  const styles = useStyles()\n  const { table, disableColumnResizing, showHeaderBorder, fitHeaderWidth } =\n    useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const isSticky = sticky\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const renderHeaders = (headers: Header<any, unknown>[]) =>\n    headers.map((header) => {\n      const isPinned = header.column.getIsPinned()\n      const pinnedOffset = isPinned\n        ? getPinnedColumnOffset(header.column, table)\n        : undefined\n      const isLastLeft = isLastLeftPinnedColumn(header.column, table)\n      const isFirstRight = isFirstRightPinnedColumn(header.column, table)\n      const columnMeta = header.column.columnDef.meta as\n        | { align?: \"left\" | \"center\" | \"right\" }\n        | undefined\n      const align = columnMeta?.align\n\n      const cellStyle: React.CSSProperties = {\n        width: enableColumnResizing\n          ? header.getSize()\n          : header.getSize() !== DEFAULT_COLUMN_WIDTH\n            ? header.getSize()\n            : undefined,\n        minWidth: fitHeaderWidth ? \"max-content\" : undefined,\n        backgroundColor: isSticky || isPinned ? stickyBackground : undefined,\n        position:\n          isSticky || isPinned\n            ? \"sticky\"\n            : enableColumnResizing\n              ? \"relative\"\n              : undefined,\n        top: isSticky ? 0 : undefined,\n        left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n        right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n        zIndex: isPinned ? 30 : isSticky ? 10 : undefined,\n        // Reduce padding for sortable headers\n        ...(() => {\n          const meta = header.column.columnDef.meta as\n            | {\n                _sortableHeaderWrapped?: boolean\n                align?: \"left\" | \"right\" | \"center\"\n              }\n            | undefined\n          const shouldReducePadding =\n            meta?._sortableHeaderWrapped ||\n            (header.column.getCanSort() &&\n              typeof header.column.columnDef.header === \"function\")\n          if (!shouldReducePadding) return {}\n          return meta?.align === \"right\"\n            ? { paddingRight: 8 }\n            : { paddingLeft: 8 }\n        })(),\n      }\n\n      const ariaSort =\n        header.column.getIsSorted() === \"asc\"\n          ? (\"ascending\" as const)\n          : header.column.getIsSorted() === \"desc\"\n            ? (\"descending\" as const)\n            : header.column.getCanSort()\n              ? (\"none\" as const)\n              : undefined\n\n      const headerContent = (\n        <span className={styles.headerTitle}>\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n      )\n\n      return (\n        <TableHead\n          key={header.id}\n          align={align}\n          aria-sort={ariaSort}\n          style={cellStyle}\n          className={mergeClasses(\n            isLastLeft && styles.shadowLeft,\n            isFirstRight && styles.shadowRight\n          )}\n        >\n          {headerContent}\n        </TableHead>\n      )\n    })\n\n  return (\n    <TableHeader\n      ref={ref}\n      data-slot=\"data-table-header\"\n      {...{ [SLOT_ATTR]: \"data-table-header\" }}\n      data-fs-element=\"DataTable-Header\"\n      className={className}\n    >\n      {table.getHeaderGroups().map((headerGroup) => (\n        <TableRow\n          key={headerGroup.id}\n          noHover\n          style={{\n            boxShadow:\n              showHeaderBorder !== false\n                ? `inset 0 -1px 0 0 ${tokens.grayA6}`\n                : \"none\",\n          }}\n        >\n          {renderHeaders(headerGroup.headers)}\n          {/* Spacer cell - absorbs remaining width when columns < container */}\n          {spacerWidth > 0 && (\n            <TableHead\n              data-spacer\n              aria-hidden=\"true\"\n              style={{\n                width: spacerWidth,\n                padding: 0,\n                backgroundColor: isSticky ? stickyBackground : undefined,\n                position: isSticky ? \"sticky\" : undefined,\n                top: isSticky ? 0 : undefined,\n                zIndex: isSticky ? 5 : undefined,\n              }}\n            />\n          )}\n        </TableRow>\n      ))}\n    </TableHeader>\n  )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeVoltStyles","shorthands","tokens.fontWeightSemibold","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","useDataTable","enableColumnResizing","contentContext","useDataTableContent","spacerWidth","isSticky","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","meta","ariaSort","headerContent","jsx","flexRender","TableHead","mergeClasses","TableHeader","SLOT_ATTR","headerGroup","jsxs","TableRow","tokens.grayA6"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { ReactNode } from "react";
+export type DataTableLoadingProps = {
+    /** Additional class name */
+    className?: string;
+    /** Custom loading content (overrides default spinner) */
+    children?: ReactNode;
+};
+/**
+ * Loading state display for DataTable.
+ * Renders a centered spinner by default, or custom content when children are provided.
+ */
+export declare const DataTableLoading: React.ForwardRefExoticComponent<DataTableLoadingProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-loading.js","sources":["../../../src/components/data-table/data-table-loading.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Spinner } from \"../spinner/spinner\"\n\nconst useStyles = makeVoltStyles({\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","makeVoltStyles","tokens.spacingElement2","shorthands","tokens.spacingLayout2","tokens.grayA11","DataTableLoading","React","className","children","ref","styles","jsx","SLOT_ATTR","mergeClasses","Spinner"],"mappings":";;;;;;;;AASA,MAAMA,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,EAAA;AAAA,EAElD,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOC;AAAAA,EAAO;AAElB,CAAC,GAaYC,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,EAAA,GAAYC,GAAK;AACxD,QAAMC,IAASX,EAAA;AAEf,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMH,CAAS;AAAA,MAE7C,UAAAC,KAAY,gBAAAG,EAACG,GAAA,EAAQ,WAAWJ,EAAO,QAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type TablePaginationLabels } from "../table/table-pagination";
+export type DataTablePaginationProps = {
+    /** Available page size options */
+    pageSizeOptions?: number[];
+    /** Number of sibling pages to show on each side of current page */
+    siblingCount?: number;
+    /** Labels for i18n. See TablePaginationLabels for available options. */
+    labels?: TablePaginationLabels;
+    /** Additional class name */
+    className?: string;
+};
+/**
+ * Pagination component that integrates with DataTable's Tanstack Table instance.
+ * Must be used within a DataTable component.
+ */
+export declare const DataTablePagination: React.ForwardRefExoticComponent<DataTablePaginationProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

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

package/dist/components/data-table/data-table-pinning-utils.d.ts

@@ -0,0 +1,17 @@
+import type { Column, Table } from "@tanstack/react-table";
+export type PinningPosition = "left" | "right" | false;
+/**
+ * Calculate the sticky offset for a pinned column based on the widths
+ * of columns pinned before it.
+ */
+export declare function getPinnedColumnOffset<TData>(column: Column<TData, unknown>, table: Table<TData>): number;
+/**
+ * Check if this column is the last pinned column on the left side.
+ * Used for applying shadow separator on the right edge.
+ */
+export declare function isLastLeftPinnedColumn<TData>(column: Column<TData, unknown>, table: Table<TData>): boolean;
+/**
+ * Check if this column is the first pinned column on the right side.
+ * Used for applying shadow separator on the left edge.
+ */
+export declare function isFirstRightPinnedColumn<TData>(column: Column<TData, unknown>, table: Table<TData>): boolean;

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

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

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

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

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { CSSProperties } from "react";
+import type { Row } from "@tanstack/react-table";
+export type DataTableRowProps<TData> = {
+    /** The row instance from TanStack Table */
+    row: Row<TData>;
+    /** Optional style (used for virtualized row heights) */
+    style?: CSSProperties;
+    /** Additional class name */
+    className?: string;
+};
+export declare const DataTableRow: <TData>(props: DataTableRowProps<TData> & {
+    ref?: React.Ref<HTMLTableRowElement>;
+}) => React.ReactElement | null;

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

@@ -0,0 +1,163 @@
+import { jsxs as W, jsx as p } from "react/jsx-runtime";
+import * as A from "react";
+import { flexRender as B } from "../../vendor/@tanstack/react-table/build/lib/index.js";
+import { shorthands as b } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as f } 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 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 V, isFirstRightPinnedColumn as j } from "./data-table-pinning-utils.js";
+import { useDataTable as F } from "./hooks/use-data-table.js";
+import { useDataTableContent as K } from "./hooks/use-data-table-content.js";
+function _(t, a) {
+  const n = t.column.columnDef.meta;
+  return (n == null ? void 0 : n.cellOverflow) ?? a;
+}
+function Q(t) {
+  const a = t.column.columnDef.meta;
+  return a == null ? void 0 : a.align;
+}
+const C = [
+  "button",
+  "a",
+  "input",
+  "select",
+  "textarea",
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="link"]',
+  '[role="menuitem"]',
+  '[role="menuitemcheckbox"]',
+  '[role="menuitemradio"]',
+  '[role="option"]',
+  '[role="radio"]',
+  '[role="slider"]',
+  '[role="spinbutton"]',
+  '[role="switch"]',
+  '[role="tab"]',
+  "[data-radix-collection-item]",
+  `[${f}="checkbox"]`
+], q = N({
+  rowClickable: {
+    cursor: "pointer",
+    ":hover": {
+      backgroundColor: g
+    }
+  },
+  rowSelected: {
+    backgroundColor: g
+  },
+  rowBorder: {
+    boxShadow: `inset 0 -1px 0 0 ${P}`,
+    "&:last-child": {
+      boxShadow: "none"
+    }
+  },
+  cellTruncate: {
+    maxWidth: 0,
+    ...b.overflow("hidden"),
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  cellWrap: {
+    maxWidth: 0,
+    ...b.overflow("hidden"),
+    overflowWrap: "break-word",
+    wordBreak: "break-word"
+  },
+  shadowLeft: {
+    boxShadow: "2px 0 5px -2px rgba(0,0,0,0.1)"
+  },
+  shadowRight: {
+    boxShadow: "-2px 0 5px -2px rgba(0,0,0,0.1)"
+  }
+});
+function G({ row: t, style: a, className: n }, k) {
+  const r = q(), {
+    table: c,
+    onRowClick: i,
+    clickableRowClassName: v,
+    selectedRowClassName: R,
+    cellOverflow: T = "truncate",
+    showRowBorders: S,
+    disableColumnResizing: D
+  } = F(), d = K(), u = (d == null ? void 0 : d.spacerWidth) ?? 0, y = !D, s = !!i, I = (e) => {
+    if (!i) return;
+    const l = e.target;
+    C.some(
+      (o) => l.closest(o)
+    ) || i(t, e);
+  }, E = (e) => {
+    if (i && (e.key === "Enter" || e.key === " ")) {
+      const l = e.target;
+      if (C.some(
+        (o) => l.closest(o)
+      ))
+        return;
+      e.preventDefault(), i(t, e);
+    }
+  };
+  return /* @__PURE__ */ W(
+    $,
+    {
+      ref: k,
+      "data-slot": "data-table-row",
+      [f]: "data-table-row",
+      "data-fs-element": "DataTable-Row",
+      "data-state": t.getIsSelected() ? "selected" : void 0,
+      "data-clickable": s ? "true" : void 0,
+      style: a,
+      className: h(
+        S !== !1 && r.rowBorder,
+        s && (v ?? r.rowClickable),
+        t.getIsSelected() && (R ?? r.rowSelected),
+        n
+      ),
+      onClick: s ? I : void 0,
+      tabIndex: s ? 0 : void 0,
+      onKeyDown: s ? E : void 0,
+      children: [
+        t.getVisibleCells().map((e) => {
+          const l = _(e, T), m = Q(e), o = e.column.getIsPinned(), w = o ? z(e.column, c) : void 0, O = V(e.column, c), L = j(e.column, c);
+          return /* @__PURE__ */ p(
+            x,
+            {
+              "data-slot": "data-table-cell",
+              [f]: "data-table-cell",
+              "data-fs-element": "DataTable-Cell",
+              "data-pinned": o || void 0,
+              align: m,
+              style: {
+                width: y || o ? e.column.getSize() : void 0,
+                left: o === "left" ? `${w}px` : void 0,
+                right: o === "right" ? `${w}px` : void 0
+              },
+              className: h(
+                l === "truncate" && r.cellTruncate,
+                l === "wrap" && r.cellWrap,
+                O && r.shadowLeft,
+                L && r.shadowRight
+              ),
+              children: B(e.column.columnDef.cell, e.getContext())
+            },
+            e.id
+          );
+        }),
+        u > 0 && /* @__PURE__ */ p(
+          x,
+          {
+            "data-spacer": !0,
+            "aria-hidden": "true",
+            style: { width: u, padding: 0 }
+          }
+        )
+      ]
+    }
+  );
+}
+const re = A.forwardRef(G);
+export {
+  re as DataTableRow
+};
+//# sourceMappingURL=data-table-row.js.map

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

@@ -0,0 +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/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } 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 }\n    | 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 }\n    | 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 = makeVoltStyles({\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","makeVoltStyles","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":"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"}

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type DataTableToolbarProps = React.ComponentProps<"div">;
+/**
+ * A toolbar wrapper for DataTable that contains filters, search, and actions.
+ * Place above the table for consistent layout.
+ */
+export declare const DataTableToolbar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,35 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as n from "react";
+import { shorthands as a } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as i } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as p } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as f } from "../../styles/make-styles.js";
+import { spacingGroup1 as t, spacingElement1 as d } from "../../tokens/index.js";
+const b = f({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: t,
+    ...a.paddingInline(d),
+    ...a.paddingBlock(t)
+  }
+}), R = n.forwardRef(function({ className: o, children: e, ...r }, s) {
+  const l = b();
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: s,
+      "data-slot": "data-table-toolbar",
+      [i]: "data-table-toolbar",
+      "data-fs-element": "DataTable-Toolbar",
+      className: p(l.root, o),
+      ...r,
+      children: e
+    }
+  );
+});
+export {
+  R as DataTableToolbar
+};
+//# sourceMappingURL=data-table-toolbar.js.map

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

@@ -0,0 +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/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeVoltStyles({\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","makeVoltStyles","tokens.spacingGroup1","shorthands","tokens.spacingElement1","DataTableToolbar","React","className","children","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;AAOA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,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;"}