@fabio.caffarello/react-design-system 3.7.0 → 3.9.0

package/dist/granular/ui/components/Table/TableBody.js

@@ -0,0 +1,134 @@
+"use client";
+var j = Object.defineProperty, A = Object.defineProperties;
+var M = Object.getOwnPropertyDescriptors;
+var f = Object.getOwnPropertySymbols;
+var I = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var x = (e, t, r) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, s = (e, t) => {
+  for (var r in t || (t = {}))
+    I.call(t, r) && x(e, r, t[r]);
+  if (f)
+    for (var r of f(t))
+      w.call(t, r) && x(e, r, t[r]);
+  return e;
+}, u = (e, t) => A(e, M(t));
+var $ = (e, t) => {
+  var r = {};
+  for (var n in e)
+    I.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && f)
+    for (var n of f(e))
+      t.indexOf(n) < 0 && w.call(e, n) && (r[n] = e[n]);
+  return r;
+};
+import { jsx as a, jsxs as _, Fragment as k } from "react/jsx-runtime";
+import { useMemo as B } from "react";
+import { useTableContext as D } from "./TableContext.js";
+import { getSpacingClass as g } from "../../tokens/spacing.js";
+import H from "./TableRow.js";
+import E from "./TableEmptyState.js";
+import { useVirtualScrolling as F } from "./useVirtualScrolling.js";
+import V from "../../primitives/Skeleton/Skeleton.js";
+function X(n) {
+  var p = n, {
+    children: e,
+    className: t = ""
+  } = p, r = $(p, [
+    "children",
+    "className"
+  ]);
+  var v, y;
+  const {
+    paginatedData: m,
+    loading: T,
+    columns: N,
+    selectable: S,
+    actions: C,
+    virtualScrolling: c,
+    virtualScrollingOptions: o
+  } = D(), h = N.length + (S ? 1 : 0) + (C ? 1 : 0), d = F(m, {
+    itemHeight: (o == null ? void 0 : o.itemHeight) || 50,
+    containerHeight: o == null ? void 0 : o.containerHeight,
+    overscan: (o == null ? void 0 : o.overscan) || 5,
+    enabled: c || !1
+  }), b = B(() => c && d.virtualItems.length > 0 ? d.virtualItems.map((i) => ({
+    row: m[i.index],
+    index: i.index
+  })).filter((i) => i.row !== void 0) : m.map((i, l) => ({ row: i, index: l })), [c, d.virtualItems, m]);
+  return T ? /* @__PURE__ */ a(
+    "tbody",
+    u(s({
+      className: `bg-surface-base divide-y divide-line-default ${t}`
+    }, r), {
+      children: Array.from({ length: 5 }).map((i, l) => /* @__PURE__ */ a("tr", { children: Array.from({ length: h }).map((q, R) => /* @__PURE__ */ a(
+        "td",
+        {
+          className: `${g("lg", "px")} ${g("base", "py")}`,
+          children: /* @__PURE__ */ a(V, { className: "h-4 w-full" })
+        },
+        R
+      )) }, l))
+    })
+  ) : m.length === 0 ? /* @__PURE__ */ a(
+    "tbody",
+    u(s({
+      className: `bg-surface-base divide-y divide-line-default ${t}`
+    }, r), {
+      children: /* @__PURE__ */ a("tr", { children: /* @__PURE__ */ a(
+        "td",
+        {
+          colSpan: h,
+          className: `${g("lg", "px")} ${g("3xl", "py")}`,
+          children: /* @__PURE__ */ a(E, {})
+        }
+      ) })
+    })
+  ) : typeof e == "function" ? /* @__PURE__ */ a(
+    "tbody",
+    u(s({
+      className: `bg-surface-base divide-y divide-line-default ${t}`
+    }, r), {
+      children: m.map((i, l) => e(i, l))
+    })
+  ) : /* @__PURE__ */ a(
+    "tbody",
+    u(s({
+      className: `bg-surface-base divide-y divide-line-default ${t}`,
+      role: "rowgroup"
+    }, r), {
+      children: c && d.virtualItems.length > 0 && b.length > 0 ? (
+        // Virtual scrolling: render with spacer rows
+        /* @__PURE__ */ _(k, { children: [
+          ((v = d.virtualItems[0]) == null ? void 0 : v.start) > 0 && /* @__PURE__ */ a(
+            "tr",
+            {
+              style: { height: d.virtualItems[0].start },
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ a("td", { colSpan: h })
+            }
+          ),
+          b.map(({ row: i, index: l }) => /* @__PURE__ */ a(H, { row: i, rowIndex: l }, l)),
+          d.virtualItems.length > 0 && /* @__PURE__ */ a(
+            "tr",
+            {
+              style: {
+                height: Math.max(
+                  0,
+                  d.totalHeight - (((y = d.virtualItems[d.virtualItems.length - 1]) == null ? void 0 : y.end) || 0)
+                )
+              },
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ a("td", { colSpan: h })
+            }
+          )
+        ] })
+      ) : (
+        // Normal rendering
+        b.map(({ row: i, index: l }) => /* @__PURE__ */ a(H, { row: i, rowIndex: l }, l))
+      )
+    })
+  );
+}
+export {
+  X as default
+};
+//# sourceMappingURL=TableBody.js.map

package/dist/granular/ui/components/Table/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sources":["../../../../../src/ui/components/Table/TableBody.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo, type HTMLAttributes, type ReactNode } from \"react\";\nimport { useTableContext } from \"./TableContext\";\nimport { Skeleton } from \"../../primitives\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport TableRow from \"./TableRow\";\nimport TableEmptyState from \"./TableEmptyState\";\nimport { useVirtualScrolling } from \"./useVirtualScrolling\";\n\nexport interface TableBodyProps<\n  T extends Record<string, unknown> = Record<string, unknown>,\n> extends Omit<HTMLAttributes<HTMLTableSectionElement>, \"children\"> {\n  children?: (row: T, index: number) => ReactNode;\n  className?: string;\n}\n\n/**\n * TableBody Component\n *\n * Renders the table body (tbody) with rows.\n * Can render loading skeleton, empty state, or data rows.\n * Must be used within a Table component.\n */\nexport default function TableBody({\n  children,\n  className = \"\",\n  ...props\n}: TableBodyProps) {\n  const {\n    paginatedData,\n    loading,\n    columns,\n    selectable,\n    actions,\n    virtualScrolling,\n    virtualScrollingOptions,\n  } = useTableContext();\n\n  // Calculate total columns for colspan\n  const totalColumns =\n    columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0);\n\n  // Virtual scrolling\n  const virtualScrollingResult = useVirtualScrolling(paginatedData, {\n    itemHeight: virtualScrollingOptions?.itemHeight || 50,\n    containerHeight: virtualScrollingOptions?.containerHeight,\n    overscan: virtualScrollingOptions?.overscan || 5,\n    enabled: virtualScrolling || false,\n  });\n\n  const rowsToRender = useMemo(() => {\n    if (virtualScrolling && virtualScrollingResult.virtualItems.length > 0) {\n      return virtualScrollingResult.virtualItems\n        .map((item) => ({\n          row: paginatedData[item.index],\n          index: item.index,\n        }))\n        .filter((item) => item.row !== undefined);\n    }\n    return paginatedData.map((row, index) => ({ row, index }));\n  }, [virtualScrolling, virtualScrollingResult.virtualItems, paginatedData]);\n\n  if (loading) {\n    return (\n      <tbody\n        className={`bg-surface-base divide-y divide-line-default ${className}`}\n        {...props}\n      >\n        {Array.from({ length: 5 }).map((_, index) => (\n          <tr key={index}>\n            {Array.from({ length: totalColumns }).map((_, colIndex) => (\n              <td\n                key={colIndex}\n                className={`${getSpacingClass(\"lg\", \"px\")} ${getSpacingClass(\"base\", \"py\")}`}\n              >\n                <Skeleton className=\"h-4 w-full\" />\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    );\n  }\n\n  if (paginatedData.length === 0) {\n    return (\n      <tbody\n        className={`bg-surface-base divide-y divide-line-default ${className}`}\n        {...props}\n      >\n        <tr>\n          <td\n            colSpan={totalColumns}\n            className={`${getSpacingClass(\"lg\", \"px\")} ${getSpacingClass(\"3xl\", \"py\")}`}\n          >\n            <TableEmptyState />\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  // If children is a render function, use it\n  if (typeof children === \"function\") {\n    return (\n      <tbody\n        className={`bg-surface-base divide-y divide-line-default ${className}`}\n        {...props}\n      >\n        {paginatedData.map((row, index) => children(row, index))}\n      </tbody>\n    );\n  }\n\n  // Default: render TableRow for each data item\n  return (\n    <tbody\n      className={`bg-surface-base divide-y divide-line-default ${className}`}\n      role=\"rowgroup\"\n      {...props}\n    >\n      {virtualScrolling &&\n      virtualScrollingResult.virtualItems.length > 0 &&\n      rowsToRender.length > 0 ? (\n        // Virtual scrolling: render with spacer rows\n        <>\n          {virtualScrollingResult.virtualItems[0]?.start > 0 && (\n            <tr\n              style={{ height: virtualScrollingResult.virtualItems[0].start }}\n              aria-hidden=\"true\"\n            >\n              <td colSpan={totalColumns} />\n            </tr>\n          )}\n          {rowsToRender.map(({ row, index }) => (\n            <TableRow key={index} row={row} rowIndex={index} />\n          ))}\n          {virtualScrollingResult.virtualItems.length > 0 && (\n            <tr\n              style={{\n                height: Math.max(\n                  0,\n                  virtualScrollingResult.totalHeight -\n                    (virtualScrollingResult.virtualItems[\n                      virtualScrollingResult.virtualItems.length - 1\n                    ]?.end || 0),\n                ),\n              }}\n              aria-hidden=\"true\"\n            >\n              <td colSpan={totalColumns} />\n            </tr>\n          )}\n        </>\n      ) : (\n        // Normal rendering\n        rowsToRender.map(({ row, index }) => (\n          <TableRow key={index} row={row} rowIndex={index} />\n        ))\n      )}\n    </tbody>\n  );\n}\n"],"names":["TableBody","_a","_b","children","className","props","__objRest","paginatedData","loading","columns","selectable","actions","virtualScrolling","virtualScrollingOptions","useTableContext","totalColumns","virtualScrollingResult","useVirtualScrolling","rowsToRender","useMemo","item","row","index","jsx","__spreadProps","__spreadValues","_","colIndex","getSpacingClass","Skeleton","TableEmptyState","jsxs","Fragment","TableRow"],"mappings":"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"}

package/dist/granular/ui/components/Table/TableCell.js

@@ -0,0 +1,40 @@
+"use client";
+var c = Object.defineProperty, h = Object.defineProperties;
+var m = Object.getOwnPropertyDescriptors;
+var d = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var s = (e, t, i) => t in e ? c(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, f = (e, t) => {
+  for (var i in t || (t = {}))
+    p.call(t, i) && s(e, i, t[i]);
+  if (d)
+    for (var i of d(t))
+      l.call(t, i) && s(e, i, t[i]);
+  return e;
+}, g = (e, t) => h(e, m(t));
+var x = (e, t) => {
+  var i = {};
+  for (var r in e)
+    p.call(e, r) && t.indexOf(r) < 0 && (i[r] = e[r]);
+  if (e != null && d)
+    for (var r of d(e))
+      t.indexOf(r) < 0 && l.call(e, r) && (i[r] = e[r]);
+  return i;
+};
+import { jsx as o } from "react/jsx-runtime";
+import { getSpacingClass as b } from "../../tokens/spacing.js";
+function S(y) {
+  var n = y, { column: e, row: t, className: i = "" } = n, r = x(n, ["column", "row", "className"]);
+  const a = e.key in t ? t[e.key] : void 0;
+  return /* @__PURE__ */ o(
+    "td",
+    g(f({
+      className: `${b("lg", "px")} ${b("base", "py")} whitespace-nowrap text-sm text-fg-primary ${e.hiddenOnMobile ? "hidden md:table-cell" : ""} ${i}`
+    }, r), {
+      children: e.render ? e.render(a, t) : String(a != null ? a : "")
+    })
+  );
+}
+export {
+  S as default
+};
+//# sourceMappingURL=TableCell.js.map

package/dist/granular/ui/components/Table/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sources":["../../../../../src/ui/components/Table/TableCell.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport type { TableColumn } from \"./TableTypes\";\n\nexport interface TableCellProps<\n  T = unknown,\n> extends HTMLAttributes<HTMLTableCellElement> {\n  column: TableColumn<T>;\n  row: T;\n}\n\n/**\n * TableCell Component\n *\n * Renders a table cell (td) for a column.\n * Uses column.render if available, otherwise renders the raw value.\n * Must be used within a Table component.\n */\nexport default function TableCell<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>({ column, row, className = \"\", ...props }: TableCellProps<T>) {\n  const value = column.key in row ? row[column.key as keyof T] : undefined;\n\n  return (\n    <td\n      className={`${getSpacingClass(\"lg\", \"px\")} ${getSpacingClass(\"base\", \"py\")} whitespace-nowrap text-sm text-fg-primary ${\n        column.hiddenOnMobile ? \"hidden md:table-cell\" : \"\"\n      } ${className}`}\n      {...props}\n    >\n      {column.render ? column.render(value, row) : String(value ?? \"\")}\n    </td>\n  );\n}\n"],"names":["TableCell","_a","_b","column","row","className","props","__objRest","value","jsx","__spreadProps","__spreadValues","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAAwBA,EAEtBC,GAA8D;AAA9D,MAAAC,IAAAD,GAAE,UAAAE,GAAQ,KAAAC,GAAK,WAAAC,IAAY,OAA3BH,GAAkCI,IAAAC,EAAlCL,GAAkC,CAAhC,UAAQ,OAAK;AACf,QAAMM,IAAQL,EAAO,OAAOC,IAAMA,EAAID,EAAO,GAAc,IAAI;AAE/D,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAW,GAAGC,EAAgB,MAAM,IAAI,CAAC,IAAIA,EAAgB,QAAQ,IAAI,CAAC,8CACxET,EAAO,iBAAiB,yBAAyB,EACnD,IAAIE,CAAS;AAAA,OACTC,IAJL;AAAA,MAME,UAAAH,EAAO,SAASA,EAAO,OAAOK,GAAOJ,CAAG,IAAI,OAAOI,KAAA,OAAAA,IAAS,EAAE;AAAA,IAAA;AAAA,EAAA;AAGrE;"}

package/dist/granular/ui/components/Table/TableContext.js

@@ -0,0 +1,19 @@
+"use client";
+import { createGenericContext as t } from "../../hooks/createGenericContext.js";
+const e = t({
+  displayName: "TableContext",
+  errorMessage: "useTableContext must be used within a Table component"
+}), o = e.Context, r = e.Provider;
+function a() {
+  return e.useContextRequired();
+}
+function s() {
+  return e.useContextOptional();
+}
+export {
+  o as TableContext,
+  r as TableContextProvider,
+  a as useTableContext,
+  s as useTableContextOptional
+};
+//# sourceMappingURL=TableContext.js.map

package/dist/granular/ui/components/Table/TableContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableContext.js","sources":["../../../../../src/ui/components/Table/TableContext.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport type { ReactNode } from \"react\";\nimport { createGenericContext } from \"../../hooks/createGenericContext\";\nimport type { TableColumn } from \"./TableTypes\";\nimport type { FilterConfig } from \"./TableFilters/TableFilters\";\nimport type { TableAction } from \"./TableActions/TableActions\";\n\nexport type PaginationMode = \"client\" | \"server\" | \"auto\";\n\nexport interface PaginationState {\n  page: number;\n  pageSize: number;\n  total: number;\n  totalPages: number;\n}\n\nexport interface SortState {\n  column: string;\n  direction: \"asc\" | \"desc\";\n}\n\nimport type { FilterValue } from \"./TableFilters/TableFilters\";\n\nexport interface FilterState {\n  values: Record<string, FilterValue>;\n  config: FilterConfig[];\n}\n\nexport interface SelectionState {\n  selectedRows: string[];\n  isAllSelected: boolean;\n  isIndeterminate: boolean;\n}\n\nexport interface TableContextValue<\n  T extends Record<string, unknown> = Record<string, unknown>,\n> {\n  // Data\n  columns: TableColumn<T>[];\n  data: T[];\n  paginatedData: T[];\n  loading: boolean;\n\n  // State\n  paginationState: PaginationState;\n  sortState: SortState;\n  filterState: FilterState;\n  selectionState: SelectionState;\n\n  // Configuration\n  paginationMode: PaginationMode;\n  selectable: boolean;\n  rowId?: (row: T) => string;\n  actions?: (row: T) => TableAction<T>[];\n  resizable?: boolean;\n  columnWidths?: Record<string, number>;\n  virtualScrolling?: boolean;\n  virtualScrollingOptions?: {\n    itemHeight?: number;\n    containerHeight?: number;\n    overscan?: number;\n  };\n\n  // Empty state\n  emptyMessage?: string;\n  emptyStateTitle?: string;\n  emptyStateMessage?: string;\n  emptyStateIllustration?: ReactNode;\n  emptyStateAction?: ReactNode;\n\n  // Methods\n  setPage: (page: number) => void;\n  setPageSize: (size: number) => void;\n  setSorting: (column: string, direction: \"asc\" | \"desc\") => void;\n  setFilters: (filters: Record<string, FilterValue>) => void;\n  setSelection: (selected: string[]) => void;\n  toggleRowSelection: (rowId: string) => void;\n  toggleSelectAll: () => void;\n  getRowId: (row: T, index: number) => string;\n  setColumnWidth?: (columnKey: string, width: number) => void;\n\n  // Callbacks (for controlled components)\n  onPageChange?: (page: number) => void;\n  onPageSizeChange?: (size: number) => void;\n  onSort?: (column: string, direction: \"asc\" | \"desc\") => void;\n  onFilter?: (filters: Record<string, FilterValue>) => void;\n  onSelectionChange?: (selected: string[]) => void;\n  onRowClick?: (row: T) => void;\n  onColumnResize?: (columnKey: string, width: number) => void;\n}\n\nconst tableContext = createGenericContext<TableContextValue>({\n  displayName: \"TableContext\",\n  errorMessage: \"useTableContext must be used within a Table component\",\n});\n\n/**\n * Raw React Context object. Exposed so `useContextSelector(TableContext, …)`\n * keeps working (see hooks/useContextSelector.ts, which cites Table as\n * its canonical selector consumer). Prefer the typed hooks below for\n * direct reads.\n */\nexport const TableContext = tableContext.Context;\n\n/**\n * Internal Provider — consumed by `TableProvider.tsx` only. Not\n * re-exported from `Table/index.ts`; keeps the public surface unchanged.\n */\nexport const TableContextProvider = tableContext.Provider;\n\n/**\n * Hook to access Table context\n *\n * @throws Error if used outside of Table component\n */\nexport function useTableContext<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>(): TableContextValue<T> {\n  return tableContext.useContextRequired<TableContextValue<T>>();\n}\n\n/**\n * Hook to access Table context (optional, returns undefined if not in Table)\n */\nexport function useTableContextOptional<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>(): TableContextValue<T> | undefined {\n  return tableContext.useContextOptional<TableContextValue<T>>();\n}\n"],"names":["tableContext","createGenericContext","TableContext","TableContextProvider","useTableContext","useTableContextOptional"],"mappings":";;AA6FA,MAAMA,IAAeC,EAAwC;AAAA,EAC3D,aAAa;AAAA,EACb,cAAc;AAChB,CAAC,GAQYC,IAAeF,EAAa,SAM5BG,IAAuBH,EAAa;AAO1C,SAASI,IAEU;AACxB,SAAOJ,EAAa,mBAAA;AACtB;AAKO,SAASK,IAEsB;AACpC,SAAOL,EAAa,mBAAA;AACtB;"}

package/dist/granular/ui/components/Table/TableEmptyState.js

@@ -0,0 +1,62 @@
+"use client";
+var x = Object.defineProperty, S = Object.defineProperties;
+var b = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var p = (t, e, a) => e in t ? x(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, s = (t, e) => {
+  for (var a in e || (e = {}))
+    u.call(e, a) && p(t, a, e[a]);
+  if (l)
+    for (var a of l(e))
+      y.call(e, a) && p(t, a, e[a]);
+  return t;
+}, n = (t, e) => S(t, b(e));
+var v = (t, e) => {
+  var a = {};
+  for (var i in t)
+    u.call(t, i) && e.indexOf(i) < 0 && (a[i] = t[i]);
+  if (t != null && l)
+    for (var i of l(t))
+      e.indexOf(i) < 0 && y.call(t, i) && (a[i] = t[i]);
+  return a;
+};
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { useTableContext as h } from "./TableContext.js";
+import { getSpacingClass as N } from "../../tokens/spacing.js";
+import j from "../EmptyState/EmptyState.js";
+function $(a) {
+  var i = a, {
+    className: t = ""
+  } = i, e = v(i, [
+    "className"
+  ]);
+  const {
+    emptyMessage: m,
+    emptyStateTitle: c,
+    emptyStateMessage: d,
+    emptyStateIllustration: r,
+    emptyStateAction: f
+  } = h();
+  return c || d || r ? /* @__PURE__ */ g("div", n(s({ className: t }, e), { children: [
+    /* @__PURE__ */ o(
+      j,
+      {
+        title: c || "No data available",
+        message: d || m || "No data available",
+        variant: r ? "withIllustration" : "default",
+        illustration: r
+      }
+    ),
+    f && /* @__PURE__ */ o(
+      "div",
+      {
+        className: `${N("base", "mt")} flex justify-center`,
+        children: f
+      }
+    )
+  ] })) : /* @__PURE__ */ o("div", n(s({ className: `text-center text-fg-secondary ${t}` }, e), { children: m || "No data available" }));
+}
+export {
+  $ as default
+};
+//# sourceMappingURL=TableEmptyState.js.map

package/dist/granular/ui/components/Table/TableEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableEmptyState.js","sources":["../../../../../src/ui/components/Table/TableEmptyState.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { useTableContext } from \"./TableContext\";\nimport { EmptyState } from \"../../components\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport type TableEmptyStateProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * TableEmptyState Component\n *\n * Renders empty state when table has no data.\n * Uses empty state configuration from Table context.\n * Must be used within a Table component.\n */\nexport default function TableEmptyState({\n  className = \"\",\n  ...props\n}: TableEmptyStateProps) {\n  const {\n    emptyMessage,\n    emptyStateTitle,\n    emptyStateMessage,\n    emptyStateIllustration,\n    emptyStateAction,\n  } = useTableContext();\n\n  if (emptyStateTitle || emptyStateMessage || emptyStateIllustration) {\n    return (\n      <div className={className} {...props}>\n        <EmptyState\n          title={emptyStateTitle || \"No data available\"}\n          message={emptyStateMessage || emptyMessage || \"No data available\"}\n          variant={emptyStateIllustration ? \"withIllustration\" : \"default\"}\n          illustration={emptyStateIllustration}\n        />\n        {emptyStateAction && (\n          <div\n            className={`${getSpacingClass(\"base\", \"mt\")} flex justify-center`}\n          >\n            {emptyStateAction}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={`text-center text-fg-secondary ${className}`} {...props}>\n      {emptyMessage || \"No data available\"}\n    </div>\n  );\n}\n"],"names":["TableEmptyState","_a","_b","className","props","__objRest","emptyMessage","emptyStateTitle","emptyStateMessage","emptyStateIllustration","emptyStateAction","useTableContext","jsxs","__spreadProps","__spreadValues","jsx","EmptyState","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,SAAwBA,EAAgBC,GAGf;AAHe,MAAAC,IAAAD,GACtC;AAAA,eAAAE,IAAY;AAAA,MAD0BD,GAEnCE,IAAAC,EAFmCH,GAEnC;AAAA,IADH;AAAA;AAGA,QAAM;AAAA,IACJ,cAAAI;AAAA,IACA,iBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,IACEC,EAAA;AAEJ,SAAIJ,KAAmBC,KAAqBC,IAExC,gBAAAG,EAAC,OAAAC,EAAAC,EAAA,EAAI,WAAAX,KAA0BC,IAA9B,EACC,UAAA;AAAA,IAAA,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAOT,KAAmB;AAAA,QAC1B,SAASC,KAAqBF,KAAgB;AAAA,QAC9C,SAASG,IAAyB,qBAAqB;AAAA,QACvD,cAAcA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEfC,KACC,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAGE,EAAgB,QAAQ,IAAI,CAAC;AAAA,QAE1C,UAAAP;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,IAEJ,IAKF,gBAAAK,EAAC,aAAI,WAAW,iCAAiCZ,CAAS,MAAQC,MAC/D,UAAAE,KAAgB,oBAAA,EACnB;AAEJ;"}

package/dist/granular/ui/components/Table/TableFilters/TableFilters.js

@@ -0,0 +1,189 @@
+"use client";
+var I = Object.defineProperty, L = Object.defineProperties;
+var O = Object.getOwnPropertyDescriptors;
+var p = Object.getOwnPropertySymbols;
+var C = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
+var k = (t, a, s) => a in t ? I(t, a, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[a] = s, h = (t, a) => {
+  for (var s in a || (a = {}))
+    C.call(a, s) && k(t, s, a[s]);
+  if (p)
+    for (var s of p(a))
+      N.call(a, s) && k(t, s, a[s]);
+  return t;
+}, u = (t, a) => L(t, O(a));
+var f = (t, a) => {
+  var s = {};
+  for (var n in t)
+    C.call(t, n) && a.indexOf(n) < 0 && (s[n] = t[n]);
+  if (t != null && p)
+    for (var n of p(t))
+      a.indexOf(n) < 0 && N.call(t, n) && (s[n] = t[n]);
+  return s;
+};
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import { useState as F } from "react";
+import { getSpacingClass as o } from "../../../tokens/spacing.js";
+import { Filter as B, X as w } from "lucide-react";
+import { Button as T } from "../../../primitives/Button/Button.js";
+import X from "../../../primitives/Label/Label.js";
+import j from "../../../primitives/Input/Input.js";
+import q from "../../../primitives/Select/Select.js";
+function W(D) {
+  var g = D, {
+    filters: t,
+    onFilter: a,
+    initialValues: s = {},
+    showClearAll: n = !0,
+    className: S = ""
+  } = g, z = f(g, [
+    "filters",
+    "onFilter",
+    "initialValues",
+    "showClearAll",
+    "className"
+  ]);
+  const [d, y] = F(s), [x, A] = F(!1), E = Object.values(d).some(
+    (e) => e !== "" && e !== null && e !== void 0
+  ), b = (e, r) => {
+    const i = u(h({}, d), { [e]: r });
+    y(i), a(i);
+  }, V = () => {
+    const e = {};
+    t.forEach((r) => {
+      e[r.key] = "";
+    }), y(e), a(e);
+  }, v = (e) => {
+    const r = u(h({}, d), { [e]: "" });
+    y(r), a(r);
+  }, $ = Object.values(d).filter(
+    (e) => e !== "" && e !== null && e !== void 0
+  ).length;
+  return /* @__PURE__ */ l(
+    "div",
+    u(h({
+      className: `bg-surface-base border-b border-line-default ${S}`
+    }, z), {
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          className: `${o("base", "px")} ${o("md", "py")} sm:${o("lg", "px")}`,
+          children: [
+            /* @__PURE__ */ c("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ c(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => A(!x),
+                  className: `flex items-center ${o("sm", "gap")} text-sm font-medium text-fg-secondary hover:text-fg-primary`,
+                  children: [
+                    /* @__PURE__ */ l(B, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ l("span", { children: "Filters" }),
+                    $ > 0 && /* @__PURE__ */ l(
+                      "span",
+                      {
+                        className: `inline-flex items-center ${o("sm", "px")} ${o("0.5", "py")} rounded text-xs font-medium bg-surface-brand-muted text-fg-brand-emphasis`,
+                        children: $
+                      }
+                    )
+                  ]
+                }
+              ),
+              E && n && /* @__PURE__ */ l(
+                T,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: V,
+                  className: "text-sm",
+                  children: "Clear all"
+                }
+              )
+            ] }),
+            x && /* @__PURE__ */ l(
+              "div",
+              {
+                className: `${o("base", "mt")} grid grid-cols-1 ${o("base", "gap")} sm:grid-cols-2 lg:grid-cols-3`,
+                children: t.map((e) => {
+                  const r = d[e.key], i = r == null ? "" : String(r);
+                  return /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: o("xs", "space-y"),
+                      children: [
+                        /* @__PURE__ */ l(X, { htmlFor: `filter-${e.key}`, variant: "optional", children: e.label }),
+                        /* @__PURE__ */ c("div", { className: "relative", children: [
+                          e.type === "text" && /* @__PURE__ */ l(
+                            j,
+                            {
+                              id: `filter-${e.key}`,
+                              type: "text",
+                              value: i,
+                              onChange: (m) => b(e.key, m.target.value),
+                              placeholder: e.placeholder || `Filter by ${e.label.toLowerCase()}`,
+                              size: "sm",
+                              variant: "outlined"
+                            }
+                          ),
+                          e.type === "select" && /* @__PURE__ */ c("div", { className: "relative", children: [
+                            /* @__PURE__ */ l(
+                              q,
+                              {
+                                id: `filter-${e.key}`,
+                                options: [
+                                  { value: "", label: `All ${e.label}` },
+                                  ...e.options || []
+                                ],
+                                value: i,
+                                onChange: (m) => b(e.key, m.target.value)
+                              }
+                            ),
+                            i && /* @__PURE__ */ l(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => v(e.key),
+                                className: "absolute right-8 top-1/2 -translate-y-1/2 text-fg-tertiary hover:text-fg-secondary",
+                                "aria-label": `Clear ${e.label} filter`,
+                                children: /* @__PURE__ */ l(w, { className: "h-4 w-4" })
+                              }
+                            )
+                          ] }),
+                          e.type === "date" && /* @__PURE__ */ l(
+                            j,
+                            {
+                              id: `filter-${e.key}`,
+                              type: "date",
+                              value: i,
+                              onChange: (m) => b(e.key, m.target.value),
+                              size: "sm",
+                              variant: "outlined"
+                            }
+                          ),
+                          i && e.type !== "select" && /* @__PURE__ */ l(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => v(e.key),
+                              className: "absolute right-2 top-1/2 -translate-y-1/2 text-fg-tertiary hover:text-fg-secondary",
+                              "aria-label": `Clear ${e.label} filter`,
+                              children: /* @__PURE__ */ l(w, { className: "h-4 w-4" })
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    e.key
+                  );
+                })
+              }
+            )
+          ]
+        }
+      )
+    })
+  );
+}
+export {
+  W as default
+};
+//# sourceMappingURL=TableFilters.js.map

package/dist/granular/ui/components/Table/TableFilters/TableFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilters.js","sources":["../../../../../../src/ui/components/Table/TableFilters/TableFilters.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { useState } from \"react\";\nimport { Input, Select, Label, Button } from \"../../../primitives\";\nimport { getSpacingClass } from \"../../../tokens/spacing\";\nimport { X, Filter } from \"lucide-react\";\n\nexport type FilterType = \"text\" | \"select\" | \"date\";\n\nexport interface FilterConfig {\n  key: string;\n  label: string;\n  type: FilterType;\n  options?: Array<{ value: string; label: string }>;\n  placeholder?: string;\n}\n\nexport type FilterValue = string | number | boolean | null | undefined;\n\nexport interface TableFiltersProps extends HTMLAttributes<HTMLDivElement> {\n  filters: FilterConfig[];\n  onFilter: (filters: Record<string, FilterValue>) => void;\n  initialValues?: Record<string, FilterValue>;\n  showClearAll?: boolean;\n}\n\n/**\n * TableFilters Component\n *\n * Filter controls for tables with support for text, select, and date filters.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <TableFilters\n *   filters={[\n *     { key: 'status', label: 'Status', type: 'select', options: [...] },\n *     { key: 'search', label: 'Search', type: 'text', placeholder: 'Search...' }\n *   ]}\n *   onFilter={(filters) => handleFilter(filters)}\n * />\n * ```\n */\nexport default function TableFilters({\n  filters,\n  onFilter,\n  initialValues = {},\n  showClearAll = true,\n  className = \"\",\n  ...props\n}: TableFiltersProps) {\n  const [filterValues, setFilterValues] =\n    useState<Record<string, FilterValue>>(initialValues);\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const hasActiveFilters = Object.values(filterValues).some(\n    (value) => value !== \"\" && value !== null && value !== undefined,\n  );\n\n  const handleFilterChange = (key: string, value: FilterValue) => {\n    const newFilters = { ...filterValues, [key]: value };\n    setFilterValues(newFilters);\n    onFilter(newFilters);\n  };\n\n  const handleClearAll = () => {\n    const clearedFilters: Record<string, FilterValue> = {};\n    filters.forEach((filter) => {\n      clearedFilters[filter.key] = \"\";\n    });\n    setFilterValues(clearedFilters);\n    onFilter(clearedFilters);\n  };\n\n  const handleClearFilter = (key: string) => {\n    const newFilters = { ...filterValues, [key]: \"\" };\n    setFilterValues(newFilters);\n    onFilter(newFilters);\n  };\n\n  const activeFilterCount = Object.values(filterValues).filter(\n    (value) => value !== \"\" && value !== null && value !== undefined,\n  ).length;\n\n  return (\n    <div\n      className={`bg-surface-base border-b border-line-default ${className}`}\n      {...props}\n    >\n      <div\n        className={`${getSpacingClass(\"base\", \"px\")} ${getSpacingClass(\"md\", \"py\")} sm:${getSpacingClass(\"lg\", \"px\")}`}\n      >\n        <div className=\"flex items-center justify-between\">\n          <button\n            type=\"button\"\n            onClick={() => setIsExpanded(!isExpanded)}\n            className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")} text-sm font-medium text-fg-secondary hover:text-fg-primary`}\n          >\n            <Filter className=\"h-4 w-4\" />\n            <span>Filters</span>\n            {activeFilterCount > 0 && (\n              <span\n                className={`inline-flex items-center ${getSpacingClass(\"sm\", \"px\")} ${getSpacingClass(\"0.5\", \"py\")} rounded text-xs font-medium bg-surface-brand-muted text-fg-brand-emphasis`}\n              >\n                {activeFilterCount}\n              </span>\n            )}\n          </button>\n\n          {hasActiveFilters && showClearAll && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handleClearAll}\n              className=\"text-sm\"\n            >\n              Clear all\n            </Button>\n          )}\n        </div>\n\n        {isExpanded && (\n          <div\n            className={`${getSpacingClass(\"base\", \"mt\")} grid grid-cols-1 ${getSpacingClass(\"base\", \"gap\")} sm:grid-cols-2 lg:grid-cols-3`}\n          >\n            {filters.map((filter) => {\n              const rawValue = filterValues[filter.key];\n              const value = rawValue == null ? \"\" : String(rawValue);\n\n              return (\n                <div\n                  key={filter.key}\n                  className={getSpacingClass(\"xs\", \"space-y\")}\n                >\n                  <Label htmlFor={`filter-${filter.key}`} variant=\"optional\">\n                    {filter.label}\n                  </Label>\n                  <div className=\"relative\">\n                    {filter.type === \"text\" && (\n                      <Input\n                        id={`filter-${filter.key}`}\n                        type=\"text\"\n                        value={value}\n                        onChange={(e) =>\n                          handleFilterChange(filter.key, e.target.value)\n                        }\n                        placeholder={\n                          filter.placeholder ||\n                          `Filter by ${filter.label.toLowerCase()}`\n                        }\n                        size=\"sm\"\n                        variant=\"outlined\"\n                      />\n                    )}\n\n                    {filter.type === \"select\" && (\n                      <div className=\"relative\">\n                        <Select\n                          id={`filter-${filter.key}`}\n                          options={[\n                            { value: \"\", label: `All ${filter.label}` },\n                            ...(filter.options || []),\n                          ]}\n                          value={value}\n                          onChange={(e) =>\n                            handleFilterChange(filter.key, e.target.value)\n                          }\n                        />\n                        {value && (\n                          <button\n                            type=\"button\"\n                            onClick={() => handleClearFilter(filter.key)}\n                            className=\"absolute right-8 top-1/2 -translate-y-1/2 text-fg-tertiary hover:text-fg-secondary\"\n                            aria-label={`Clear ${filter.label} filter`}\n                          >\n                            <X className=\"h-4 w-4\" />\n                          </button>\n                        )}\n                      </div>\n                    )}\n\n                    {filter.type === \"date\" && (\n                      <Input\n                        id={`filter-${filter.key}`}\n                        type=\"date\"\n                        value={value}\n                        onChange={(e) =>\n                          handleFilterChange(filter.key, e.target.value)\n                        }\n                        size=\"sm\"\n                        variant=\"outlined\"\n                      />\n                    )}\n\n                    {value && filter.type !== \"select\" && (\n                      <button\n                        type=\"button\"\n                        onClick={() => handleClearFilter(filter.key)}\n                        className=\"absolute right-2 top-1/2 -translate-y-1/2 text-fg-tertiary hover:text-fg-secondary\"\n                        aria-label={`Clear ${filter.label} filter`}\n                      >\n                        <X className=\"h-4 w-4\" />\n                      </button>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["TableFilters","_a","_b","filters","onFilter","initialValues","showClearAll","className","props","__objRest","filterValues","setFilterValues","useState","isExpanded","setIsExpanded","hasActiveFilters","value","handleFilterChange","key","newFilters","__spreadProps","__spreadValues","handleClearAll","clearedFilters","filter","handleClearFilter","activeFilterCount","jsx","jsxs","getSpacingClass","Filter","Button","rawValue","Label","Input","e","Select","X"],"mappings":"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"}

package/dist/granular/ui/components/Table/TableFilters.js

@@ -0,0 +1,48 @@
+"use client";
+var p = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var s = (t, r, e) => r in t ? p(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e, a = (t, r) => {
+  for (var e in r || (r = {}))
+    f.call(r, e) && s(t, e, r[e]);
+  if (l)
+    for (var e of l(r))
+      u.call(r, e) && s(t, e, r[e]);
+  return t;
+};
+var m = (t, r) => {
+  var e = {};
+  for (var i in t)
+    f.call(t, i) && r.indexOf(i) < 0 && (e[i] = t[i]);
+  if (t != null && l)
+    for (var i of l(t))
+      r.indexOf(i) < 0 && u.call(t, i) && (e[i] = t[i]);
+  return e;
+};
+import { jsx as F } from "react/jsx-runtime";
+import { useTableContext as b } from "./TableContext.js";
+import g from "./TableFilters/TableFilters.js";
+function j(i) {
+  var o = i, {
+    showClearAll: t = !0,
+    className: r = ""
+  } = o, e = m(o, [
+    "showClearAll",
+    "className"
+  ]);
+  const { filterState: n, setFilters: c } = b();
+  return n.config.length === 0 ? null : /* @__PURE__ */ F(
+    g,
+    a({
+      filters: n.config,
+      onFilter: c,
+      initialValues: n.values,
+      showClearAll: t,
+      className: r
+    }, e)
+  );
+}
+export {
+  j as default
+};
+//# sourceMappingURL=TableFilters.js.map

package/dist/granular/ui/components/Table/TableFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilters.js","sources":["../../../../../src/ui/components/Table/TableFilters.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { useTableContext } from \"./TableContext\";\nimport TableFiltersComponent from \"./TableFilters/TableFilters\";\n\nexport interface TableFiltersProps extends HTMLAttributes<HTMLDivElement> {\n  showClearAll?: boolean;\n}\n\n/**\n * TableFilters Component\n *\n * Renders filter controls for the table.\n * Uses filter configuration from Table context.\n * Must be used within a Table component.\n */\nexport default function TableFilters({\n  showClearAll = true,\n  className = \"\",\n  ...props\n}: TableFiltersProps) {\n  const { filterState, setFilters } = useTableContext();\n\n  if (filterState.config.length === 0) {\n    return null;\n  }\n\n  return (\n    <TableFiltersComponent\n      filters={filterState.config}\n      onFilter={setFilters}\n      initialValues={filterState.values}\n      showClearAll={showClearAll}\n      className={className}\n      {...props}\n    />\n  );\n}\n"],"names":["TableFilters","_a","_b","showClearAll","className","props","__objRest","filterState","setFilters","useTableContext","jsx","TableFiltersComponent","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,SAAwBA,EAAaC,GAIf;AAJe,MAAAC,IAAAD,GACnC;AAAA,kBAAAE,IAAe;AAAA,IACf,WAAAC,IAAY;AAAA,MAFuBF,GAGhCG,IAAAC,EAHgCJ,GAGhC;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,aAAAK,GAAa,YAAAC,EAAA,IAAeC,EAAA;AAEpC,SAAIF,EAAY,OAAO,WAAW,IACzB,OAIP,gBAAAG;AAAA,IAACC;AAAAA,IAAAC,EAAA;AAAA,MACC,SAASL,EAAY;AAAA,MACrB,UAAUC;AAAA,MACV,eAAeD,EAAY;AAAA,MAC3B,cAAAJ;AAAA,MACA,WAAAC;AAAA,OACIC;AAAA,EAAA;AAGV;"}

package/dist/granular/ui/components/Table/TableHeader.js

@@ -0,0 +1,45 @@
+"use client";
+var u = Object.defineProperty, d = Object.defineProperties;
+var p = Object.getOwnPropertyDescriptors;
+var a = Object.getOwnPropertySymbols;
+var i = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var s = (e, t, r) => t in e ? u(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, m = (e, t) => {
+  for (var r in t || (t = {}))
+    i.call(t, r) && s(e, r, t[r]);
+  if (a)
+    for (var r of a(t))
+      l.call(t, r) && s(e, r, t[r]);
+  return e;
+}, c = (e, t) => d(e, p(t));
+var f = (e, t) => {
+  var r = {};
+  for (var o in e)
+    i.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
+  if (e != null && a)
+    for (var o of a(e))
+      t.indexOf(o) < 0 && l.call(e, o) && (r[o] = e[o]);
+  return r;
+};
+import { jsx as n } from "react/jsx-runtime";
+import { useTableContext as b } from "./TableContext.js";
+import { getZIndexClass as x } from "../../tokens/z-index.js";
+import T from "./TableHeaderRow.js";
+function H(r) {
+  var o = r, {
+    className: e = ""
+  } = o, t = f(o, [
+    "className"
+  ]);
+  return b(), /* @__PURE__ */ n(
+    "thead",
+    c(m({
+      className: `bg-surface-subtle sticky top-0 ${x("sticky")} ${e}`
+    }, t), {
+      children: /* @__PURE__ */ n(T, {})
+    })
+  );
+}
+export {
+  H as default
+};
+//# sourceMappingURL=TableHeader.js.map

package/dist/granular/ui/components/Table/TableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.js","sources":["../../../../../src/ui/components/Table/TableHeader.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { useTableContext } from \"./TableContext\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport TableHeaderRow from \"./TableHeaderRow\";\n\nexport interface TableHeaderProps extends Omit<\n  HTMLAttributes<HTMLTableSectionElement>,\n  \"children\"\n> {\n  className?: string;\n}\n\n/**\n * TableHeader Component\n *\n * Renders the table header (thead) with columns.\n * Must be used within a Table component.\n */\nexport default function TableHeader({\n  className = \"\",\n  ...props\n}: TableHeaderProps) {\n  useTableContext(); // Ensure we're within Table context\n  // columns is accessed via TableHeaderRow which uses useTableContext\n\n  return (\n    <thead\n      className={`bg-surface-subtle sticky top-0 ${getZIndexClass(\"sticky\")} ${className}`}\n      {...props}\n    >\n      <TableHeaderRow />\n    </thead>\n  );\n}\n"],"names":["TableHeader","_a","_b","className","props","__objRest","useTableContext","jsx","__spreadProps","__spreadValues","getZIndexClass","TableHeaderRow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAAwBA,EAAYC,GAGf;AAHe,MAAAC,IAAAD,GAClC;AAAA,eAAAE,IAAY;AAAA,MADsBD,GAE/BE,IAAAC,EAF+BH,GAE/B;AAAA,IADH;AAAA;AAGA,SAAAI,EAAA,GAIE,gBAAAC;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAW,kCAAkCC,EAAe,QAAQ,CAAC,IAAIP,CAAS;AAAA,OAC9EC,IAFL;AAAA,MAIC,4BAACO,GAAA,CAAA,CAAe;AAAA,IAAA;AAAA,EAAA;AAGtB;"}