@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/table/hooks/useTableKeyboardNavigation.js

@@ -1,157 +1,209 @@
-import { useState as F, useRef as I, useCallback as i } from "react";
-function E() {
-  const [w, f] = F({
+import { useState as I, useRef as M, useCallback as i } from "react";
+const U = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
+function O() {
+  const [m, A] = I({
     rowIndex: 0,
     colIndex: 0
-  }), c = I(null), r = i(
-    (e, n) => {
-      c.current && (f({ rowIndex: e, colIndex: n }), requestAnimationFrame(() => {
-        if (!c.current) return;
-        const l = Array.from(c.current.querySelectorAll("tr"));
-        if (e >= 0 && e < l.length) {
-          const o = l[e];
-          if (!o) return;
-          const t = Array.from(o.querySelectorAll("td, th"));
-          if (n >= 0 && n < t.length) {
-            const s = t[n];
-            document.activeElement !== s && s.focus({ preventScroll: !1 });
+  }), a = M(null), d = i(
+    (e, t, s) => {
+      const c = e.querySelectorAll(
+        U
+      );
+      if (c.length > 0) {
+        const n = c[0];
+        return A({ rowIndex: t, colIndex: s }), requestAnimationFrame(() => {
+          n.focus({ preventScroll: !1 });
+        }), !0;
+      }
+      return !1;
+    },
+    [A]
+  ), b = i(
+    (e, t, s) => {
+      if (!a.current) return null;
+      const c = Array.from(a.current.querySelectorAll("tr"));
+      if (e < 0 || e >= c.length) return null;
+      const n = c[e];
+      if (!n) return null;
+      const r = Array.from(n.querySelectorAll("td, th"));
+      if (s === "right") {
+        for (let o = t + 1; o < r.length; o++)
+          if (r[o].dataset.focusable !== "false")
+            return { rowIndex: e, colIndex: o };
+      } else
+        for (let o = t - 1; o >= 0; o--)
+          if (r[o].dataset.focusable !== "false")
+            return { rowIndex: e, colIndex: o };
+      return null;
+    },
+    []
+  ), l = i(
+    (e, t, s) => {
+      if (!a.current) return;
+      const c = Array.from(a.current.querySelectorAll("tr"));
+      if (e < 0 || e >= c.length) return;
+      const n = c[e];
+      if (!n) return;
+      const r = Array.from(n.querySelectorAll("td, th"));
+      if (t < 0 || t >= r.length) return;
+      const o = r[t];
+      if (!(o.dataset.focusable !== "false")) {
+        if (d(o, e, t))
+          return;
+        if (s) {
+          const f = b(
+            e,
+            t,
+            s
+          );
+          if (f) {
+            l(f.rowIndex, f.colIndex);
+            return;
           }
         }
-      }));
+        return;
+      }
+      A({ rowIndex: e, colIndex: t }), requestAnimationFrame(() => {
+        document.activeElement !== o && o.focus({ preventScroll: !1 });
+      });
     },
-    [f]
-  ), p = i(
+    [A, d, b]
+  ), v = i(
     (e) => {
-      c.current && (f({ rowIndex: e, colIndex: 0 }), requestAnimationFrame(() => {
-        if (!c.current) return;
-        const n = Array.from(c.current.querySelectorAll("tr"));
-        if (e >= 0 && e < n.length) {
-          const l = n[e];
-          document.activeElement !== l && l.focus();
-        }
-      }));
+      if (!a.current) return;
+      const t = Array.from(a.current.querySelectorAll("tr"));
+      e < 0 || e >= t.length || !t[e] || l(e, 0);
     },
-    [f]
-  ), b = i(
+    [l]
+  ), S = i(
     (e) => {
       e.target === e.currentTarget && (e.preventDefault(), requestAnimationFrame(() => {
-        r(0, 0);
+        l(0, 0);
       }));
     },
-    [r]
+    [l]
   ), k = i(
     (e) => {
-      const n = e.target, l = n.closest("tr");
-      if (!l || !c.current) return;
-      const t = Array.from(c.current.querySelectorAll("tr")).indexOf(l), a = Array.from(l.querySelectorAll("td, th")).indexOf(n);
-      t >= 0 && a >= 0 && (f({ rowIndex: t, colIndex: a }), requestAnimationFrame(() => {
-        c.current && (c.current.querySelectorAll("td, th").forEach((m) => {
-          m.setAttribute("tabindex", "-1");
-        }), n && n.setAttribute("tabindex", "0"));
+      const t = e.target, s = e.currentTarget;
+      if (t !== s)
+        return;
+      const c = t.closest("tr");
+      if (!c || !a.current) return;
+      const r = Array.from(a.current.querySelectorAll("tr")).indexOf(c), u = Array.from(c.querySelectorAll("td, th")).indexOf(t);
+      r >= 0 && u >= 0 && (A({ rowIndex: r, colIndex: u }), requestAnimationFrame(() => {
+        a.current && (a.current.querySelectorAll("td, th").forEach((f) => {
+          f.setAttribute("tabindex", "-1");
+        }), t.setAttribute("tabindex", "0"));
       }));
     },
-    [f]
-  ), D = i(
-    (e, n) => w.rowIndex === e && w.colIndex === n,
-    [w]
+    [A]
   ), q = i(
+    (e, t) => m.rowIndex === e && m.colIndex === t,
+    [m]
+  ), D = i(
     (e) => {
-      if (e.key !== "Tab" && e.target === e.currentTarget && c.current)
+      if (e.key !== "Tab" && e.target === e.currentTarget && a.current)
         switch (e.key) {
           case "ArrowDown":
           case "ArrowRight":
-            e.preventDefault(), r(0, 0);
+            e.preventDefault(), l(0, 0);
             break;
           case "Home":
-            e.preventDefault(), r(0, 0);
+            e.preventDefault(), l(0, 0);
             break;
           case "End":
             e.preventDefault();
-            const n = Array.from(c.current.querySelectorAll("tr")), l = n.length - 1;
-            if (l >= 0) {
-              const o = n[l];
-              if (!o) break;
-              const t = Array.from(o.querySelectorAll("td, th"));
-              r(l, t.length - 1);
+            const t = Array.from(a.current.querySelectorAll("tr")), s = t.length - 1;
+            if (s >= 0) {
+              const c = t[s];
+              if (!c) break;
+              const n = Array.from(c.querySelectorAll("td, th"));
+              l(s, n.length - 1);
             }
             break;
         }
     },
-    [r]
-  ), v = i(
+    [l]
+  ), x = i(
     (e) => {
-      if (e.key === "Tab" || !c.current) return;
-      const n = e.currentTarget, l = n.closest("tr");
-      if (!l) return;
-      const o = Array.from(c.current.querySelectorAll("tr")), t = o.indexOf(l), s = Array.from(l.querySelectorAll("td, th")), a = s.indexOf(n);
+      if (e.key === "Tab" || !a.current) return;
+      let t = e.currentTarget;
+      const s = e.target;
+      if (s !== t) {
+        const f = s.closest("td, th");
+        f && (t = f);
+      }
+      const c = t.closest("tr");
+      if (!c) return;
+      const n = Array.from(a.current.querySelectorAll("tr")), r = n.indexOf(c), o = Array.from(c.querySelectorAll("td, th")), u = o.indexOf(t);
       switch (e.key) {
         case "ArrowRight":
-          e.preventDefault(), a < s.length - 1 ? r(t, a + 1) : r(t, 0);
+          e.preventDefault(), u < o.length - 1 ? l(r, u + 1, "right") : l(r, 0, "right");
           break;
         case "ArrowLeft":
-          e.preventDefault(), a > 0 ? r(t, a - 1) : r(t, s.length - 1);
+          e.preventDefault(), u > 0 ? l(r, u - 1, "left") : l(r, o.length - 1, "left");
           break;
         case "ArrowDown":
-          if (e.preventDefault(), t < o.length - 1) {
-            const u = o[t + 1];
-            if (!u) break;
-            const h = Array.from(u.querySelectorAll("td, th")), A = Math.min(a, h.length - 1);
-            r(t + 1, A);
+          if (e.preventDefault(), r < n.length - 1) {
+            const h = n[r + 1];
+            if (!h) break;
+            const g = Array.from(h.querySelectorAll("td, th")), y = Math.min(u, g.length - 1);
+            l(r + 1, y);
           }
           break;
         case "ArrowUp":
-          if (e.preventDefault(), t > 0) {
-            const u = o[t - 1];
-            if (!u) break;
-            const h = Array.from(u.querySelectorAll("td, th")), A = Math.min(a, h.length - 1);
-            r(t - 1, A);
+          if (e.preventDefault(), r > 0) {
+            const h = n[r - 1];
+            if (!h) break;
+            const g = Array.from(h.querySelectorAll("td, th")), y = Math.min(u, g.length - 1);
+            l(r - 1, y);
           }
           break;
         case "Home":
-          e.preventDefault(), e.ctrlKey ? r(0, 0) : r(t, 0);
+          e.preventDefault(), e.ctrlKey ? l(0, 0) : l(r, 0);
           break;
         case "End":
           if (e.preventDefault(), e.ctrlKey) {
-            const u = o.length - 1, h = o[u];
-            if (!h) break;
-            const A = Array.from(h.querySelectorAll("td, th"));
-            r(u, A.length - 1);
+            const h = n.length - 1, g = n[h];
+            if (!g) break;
+            const y = Array.from(g.querySelectorAll("td, th"));
+            l(h, y.length - 1);
           } else
-            r(t, s.length - 1);
+            l(r, o.length - 1);
           break;
         case "PageUp":
           e.preventDefault();
-          const m = Math.max(0, t - 5), y = o[m];
-          if (!y) break;
-          const x = Array.from(y.querySelectorAll("td, th")), R = Math.min(a, x.length - 1);
-          r(m, R);
+          const f = Math.max(0, r - 5), p = n[f];
+          if (!p) break;
+          const R = Array.from(p.querySelectorAll("td, th")), E = Math.min(u, R.length - 1);
+          l(f, E);
           break;
         case "PageDown":
           e.preventDefault();
-          const g = Math.min(o.length - 1, t + 5), d = o[g];
-          if (!d) break;
-          const S = Array.from(
-            d.querySelectorAll("td, th")
-          ), C = Math.min(a, S.length - 1);
-          r(g, C);
+          const w = Math.min(n.length - 1, r + 5), C = n[w];
+          if (!C) break;
+          const T = Array.from(
+            C.querySelectorAll("td, th")
+          ), F = Math.min(u, T.length - 1);
+          l(w, F);
           break;
       }
     },
-    [r]
+    [l]
   );
   return {
-    focusedCell: w,
-    setFocusedCell: f,
-    isCellFocused: D,
-    handleCellKeyDown: v,
-    handleTableKeyDown: q,
-    handleTableFocus: b,
+    focusedCell: m,
+    setFocusedCell: A,
+    isCellFocused: q,
+    handleCellKeyDown: x,
+    handleTableKeyDown: D,
+    handleTableFocus: S,
     handleCellFocus: k,
-    tableRef: c,
-    focusCell: r,
-    focusRow: p
+    tableRef: a,
+    focusCell: l,
+    focusRow: v
   };
 }
 export {
-  E as useTableKeyboardNavigation
+  O as useTableKeyboardNavigation
 };

package/dist/esm/components/table/parts/TableBody.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import p, { forwardRef as b, Children as f, cloneElement as h } from "react";
-import { tv as v } from "tailwind-variants";
+import { uyTv as v } from "@payfit/unity-themes";
 const C = v({
   base: ["uy:transition-all uy:duration-200 uy:ease-in-out"],
   variants: {

package/dist/esm/components/table/parts/TableCell.d.ts

@@ -4,6 +4,12 @@ export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElem
     rowIndex?: number;
     align?: 'left' | 'center' | 'right';
     isRowHeader?: boolean;
+    /**
+     * Whether this cell should be focusable for keyboard navigation.
+     * Set to false when the cell contains interactive elements like buttons, checkboxes, etc.
+     * @default true
+     */
+    isFocusable?: boolean;
 }
 export declare const tableCell: import('tailwind-variants').TVReturnType<{
     align: {
@@ -34,6 +40,7 @@ export declare const tableCell: import('tailwind-variants').TVReturnType<{
  * @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableRow)
  * @param {'left' | 'center' | 'right'} [props.align] - The text alignment within the cell
  * @param {boolean} [props.isRowHeader=false] - Whether this cell is a row header (renders as `<th>` instead of `<td>`)
+ * @param {boolean} [props.isFocusable=true] - Whether this cell should be focusable for keyboard navigation. Set to false when the cell contains interactive elements.
  * @example
  * ```tsx
  * import { TableCell } from '@payfit/unity-components'
@@ -47,10 +54,19 @@ export declare const tableCell: import('tailwind-variants').TVReturnType<{
  *
  * <TableCell isRowHeader align="right">Employee ID</TableCell>
  * ```
+ * @example
+ * ```tsx
+ * // Cell with interactive content (checkbox) - not focusable
+ * import { TableCell, CheckboxStandalone } from '@payfit/unity-components'
+ *
+ * <TableCell isFocusable={false}>
+ *   <CheckboxStandalone>Select item</CheckboxStandalone>
+ * </TableCell>
+ * ```
  * @see {@link TableCellProps} for all available props
  * @remarks
  * {@link https://unity-components.payfit.io/?path=/story/data-table-tablecell--docs|API and Demos} •
  * {@link https://payfit.design|Design docs}
  */
-declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>>;
 export { TableCell };

package/dist/esm/components/table/parts/TableCell.js

@@ -1,8 +1,8 @@
-import { jsx as x } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { tv as v } from "tailwind-variants";
-import { useTableContext as g } from "../Table.context.js";
-const C = v({
+import { jsx as h } from "react/jsx-runtime";
+import { memo as v, forwardRef as g } from "react";
+import { uyTv as C } from "@payfit/unity-themes";
+import { useTableContext as T } from "../Table.context.js";
+const k = C({
   base: [
     "uy:px-200 uy:py-150 uy:text-content-neutral uy:typography-body",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
@@ -14,42 +14,46 @@ const C = v({
       right: "uy:text-right"
     }
   }
-}), T = h(
-  ({
-    children: r,
-    colIndex: a = 0,
-    rowIndex: o = 0,
-    align: s,
-    onKeyDown: t,
-    onFocus: l,
-    className: u,
-    isRowHeader: i = !1,
-    ...n
-  }, y) => {
-    const { keyboardNavigation: c } = g(), { isCellFocused: f, handleCellKeyDown: b, handleCellFocus: d } = c, m = f(o, a), p = (e) => {
-      e.key !== "Tab" && (b(e), t == null || t(e));
-    };
-    return /* @__PURE__ */ x(
-      i ? "th" : "td",
-      {
-        ref: y,
-        role: i ? "rowheader" : "gridcell",
-        "aria-colindex": a + 1,
-        tabIndex: m ? 0 : -1,
-        className: C({ align: s, className: u }),
-        onKeyDown: p,
-        onFocus: (e) => {
-          d(e), l == null || l(e);
-        },
-        "data-dd-privacy": "mask",
-        ...n,
-        children: r
-      }
-    );
-  }
+}), N = v(
+  g(
+    ({
+      children: o,
+      colIndex: a = 0,
+      rowIndex: u = 0,
+      align: s,
+      onKeyDown: t,
+      onFocus: l,
+      className: n,
+      isRowHeader: i = !1,
+      isFocusable: r = !0,
+      ...y
+    }, f) => {
+      const { keyboardNavigation: c } = T(), { isCellFocused: d, handleCellKeyDown: b, handleCellFocus: m } = c, p = r && d(u, a), x = (e) => {
+        e.key !== "Tab" && (b(e), t == null || t(e));
+      };
+      return /* @__PURE__ */ h(
+        i ? "th" : "td",
+        {
+          ref: f,
+          role: i ? "rowheader" : "gridcell",
+          "aria-colindex": a + 1,
+          tabIndex: p ? 0 : -1,
+          "data-focusable": r,
+          className: k({ align: s, className: n }),
+          onKeyDown: x,
+          onFocus: (e) => {
+            m(e), l == null || l(e);
+          },
+          "data-dd-privacy": "mask",
+          ...y,
+          children: o
+        }
+      );
+    }
+  )
 );
-T.displayName = "TableCell";
+N.displayName = "TableCell";
 export {
-  T as TableCell,
-  C as tableCell
+  N as TableCell,
+  k as tableCell
 };

package/dist/esm/components/table/parts/TableColumnHeader.d.ts

@@ -4,6 +4,7 @@ type BaseTableColumnHeaderProps = {
     colIndex?: number;
     rowIndex?: number;
     align?: 'left' | 'center' | 'right';
+    isFocusable?: boolean;
 };
 type StaticTableColumnHeaderProps = BaseTableColumnHeaderProps & React.ThHTMLAttributes<HTMLTableCellElement>;
 type InteractiveTableColumnHeaderProps = BaseTableColumnHeaderProps & ActionableProps;
@@ -61,5 +62,5 @@ export declare const tableColumnHeader: import('tailwind-variants').TVReturnType
  * {@link https://unity-components.payfit.io/?path=/story/data-table-tablecolumnheader--docs|API and Demos} •
  * {@link https://payfit.design|Design docs}
  */
-declare const TableColumnHeader: React.ForwardRefExoticComponent<TableColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableColumnHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>>>;
 export { TableColumnHeader };

package/dist/esm/components/table/parts/TableColumnHeader.js

@@ -1,13 +1,14 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { tv as x } from "tailwind-variants";
-import { Actionable as g } from "../../actionable/Actionable.js";
-import { useTableContext as C } from "../Table.context.js";
-const c = x({
+import { jsx as o } from "react/jsx-runtime";
+import { memo as x, forwardRef as g } from "react";
+import { uyTv as C } from "@payfit/unity-themes";
+import { Actionable as T } from "../../actionable/Actionable.js";
+import { useTableContext as w } from "../Table.context.js";
+const c = C({
   base: [
     "uy:align-middle uy:leading-[1.00]",
     "uy:px-200 uy:py-100 uy:typography-action uy:text-content-neutral",
-    "uy:focus-visible:outline-2 uy:focus-visible:-outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
+    "uy:hover:bg-surface-neutral-hover"
   ],
   variants: {
     align: {
@@ -16,57 +17,62 @@ const c = x({
       right: "uy:text-right"
     }
   }
-}), T = p(
-  ({
-    children: n,
-    colIndex: a = 0,
-    rowIndex: m = 0,
-    align: o,
-    onKeyDown: i,
-    onFocus: t,
-    className: u,
-    ...l
-  }, d) => {
-    const { keyboardNavigation: f } = C(), { isCellFocused: b, handleCellKeyDown: h, handleCellFocus: s } = f, v = b(m, a), y = (e) => {
-      e.key !== "Tab" && (h(e), i == null || i(
-        e
-      ));
-    };
-    return "onPress" in l ? /* @__PURE__ */ r(
-      "th",
-      {
-        ref: d,
-        role: "columnheader",
-        "aria-colindex": a + 1,
-        className: c({ align: o, className: u }),
-        "data-dd-privacy": "allow",
-        onKeyDown: y,
-        onFocus: (e) => {
-          s(e), t == null || t(e);
-        },
-        children: /* @__PURE__ */ r(g, { ...l, children: n })
-      }
-    ) : /* @__PURE__ */ r(
-      "th",
-      {
-        ref: d,
-        role: "columnheader",
-        "aria-colindex": a + 1,
-        tabIndex: v ? 0 : -1,
-        className: c({ align: o, className: u }),
-        onKeyDown: y,
-        onFocus: (e) => {
-          s(e), t == null || t(e);
-        },
-        "data-dd-privacy": "allow",
-        ...l,
-        children: n
-      }
-    );
-  }
+}), H = x(
+  g(
+    ({
+      children: n,
+      colIndex: a = 0,
+      rowIndex: f = 0,
+      align: u,
+      onKeyDown: r,
+      onFocus: t,
+      className: d,
+      isFocusable: l = !0,
+      ...i
+    }, y) => {
+      const { keyboardNavigation: b } = w(), { isCellFocused: h, handleCellKeyDown: v, handleCellFocus: m } = b, p = l && h(f, a), s = (e) => {
+        e.key !== "Tab" && (v(e), r == null || r(
+          e
+        ));
+      };
+      return "onPress" in i ? /* @__PURE__ */ o(
+        "th",
+        {
+          ref: y,
+          role: "columnheader",
+          "aria-colindex": a + 1,
+          "data-focusable": l,
+          className: c({ align: u, className: d }),
+          "data-dd-privacy": "allow",
+          onKeyDown: s,
+          onFocus: (e) => {
+            m(e), t == null || t(e);
+          },
+          children: /* @__PURE__ */ o(T, { ...i, children: n })
+        }
+      ) : /* @__PURE__ */ o(
+        "th",
+        {
+          ref: y,
+          role: "columnheader",
+          "aria-colindex": a + 1,
+          tabIndex: p ? 0 : -1,
+          "data-focusable": l,
+          className: c({ align: u, className: d }),
+          onKeyDown: s,
+          onFocus: (e) => {
+            m(e), t == null || t(e);
+          },
+          "data-dd-privacy": "allow",
+          ...i,
+          children: n
+        }
+      );
+    }
+  )
 );
-T.displayName = "TableColumnHeader";
+H.displayName = "TableColumnHeader";
 export {
-  T as TableColumnHeader,
+  H as TableColumnHeader,
   c as tableColumnHeader
 };

package/dist/esm/components/table/parts/TableEmptyState.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const tableEmptyState: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {

package/dist/esm/components/table/parts/TableEmptyState.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as p } from "react/jsx-runtime";
 import { forwardRef as d, useMemo as c } from "react";
+import { uyTv as y } from "@payfit/unity-themes";
 import { useIntl as m } from "react-intl";
-import { tv as y } from "tailwind-variants";
 import { Spinner as u } from "../../spinner/Spinner.js";
 import { Text as f } from "../../text/Text.js";
 import b from "../assets/EmptyStateError.svg.js";

package/dist/esm/components/table/parts/TableHeader.d.ts

@@ -1,5 +1,5 @@
 import { default as React, PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 export declare const tableHeader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 export type TableHeaderProps = PropsWithChildren<VariantProps<typeof tableHeader>>;
 /**
@@ -23,7 +23,7 @@ export type TableHeaderProps = PropsWithChildren<VariantProps<typeof tableHeader
  * {@link https://unity-components.payfit.io/?path=/story/data-table-tableheader--docs|API and Demos} •
  * {@link https://payfit.design|Design docs}
  */
-declare const TableHeader: React.ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>> & {
+declare const TableHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>> & {
     children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLTableSectionElement>>;
+} & React.RefAttributes<HTMLTableSectionElement>>>;
 export { TableHeader };