@payfit/unity-components 1.0.0 → 1.1.1-beta.1

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 };

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

@@ -1,35 +1,37 @@
 import { jsx as t } from "react/jsx-runtime";
-import r, { forwardRef as u } from "react";
-import { tv as s } from "tailwind-variants";
-const y = s({
+import r, { memo as l, forwardRef as s, useMemo as y } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+const b = m({
   base: [
     "uy:h-500 uy:bg-surface-neutral-lowest uy:rounded-tl-100 uy:rounded-tr-100 uy:overflow-hidden",
     "uy:sticky uy:top-0 uy:z-[1]",
     "uy:[&_tr]:border-b uy:[&_tr]:border-solid uy:[&_tr]:border-b-border-neutral-enabled"
   ]
-}), b = u(
-  ({ children: o, ...d }, a) => {
-    const l = r.Children.map(o, (e, n) => r.isValidElement(e) ? r.cloneElement(
-      e,
-      {
-        rowIndex: n,
-        ...e.props
-      }
-    ) : e);
-    return /* @__PURE__ */ t(
-      "thead",
-      {
-        ref: a,
-        className: y(),
-        "data-dd-privacy": "allow",
-        ...d,
-        children: /* @__PURE__ */ t("tr", { children: l })
-      }
-    );
-  }
+}), i = l(
+  s(
+    ({ children: o, ...a }, d) => {
+      const u = y(() => r.Children.map(o, (e, n) => r.isValidElement(e) ? r.cloneElement(
+        e,
+        {
+          rowIndex: n,
+          ...e.props
+        }
+      ) : e), [o]);
+      return /* @__PURE__ */ t(
+        "thead",
+        {
+          ref: d,
+          className: b(),
+          "data-dd-privacy": "allow",
+          ...a,
+          children: /* @__PURE__ */ t("tr", { children: u })
+        }
+      );
+    }
+  )
 );
-b.displayName = "TableHeader";
+i.displayName = "TableHeader";
 export {
-  b as TableHeader,
-  y as tableHeader
+  i as TableHeader,
+  b as tableHeader
 };

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

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 import { PaginationProps } from '../../pagination/Pagination.js';
 export declare const tablePagination: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 type PageSizeOption = {

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

@@ -1,12 +1,12 @@
 import { jsxs as b, jsx as e } from "react/jsx-runtime";
 import { forwardRef as x, useState as I } from "react";
-import { useId as j } from "react-aria";
-import { useIntl as L } from "react-intl";
-import { tv as O } from "tailwind-variants";
-import { Pagination as R } from "../../pagination/Pagination.js";
-import { SelectOption as T } from "../../select/parts/SelectOption.js";
+import { uyTv as j } from "@payfit/unity-themes";
+import { useId as L } from "react-aria";
+import { useIntl as T } from "react-intl";
+import { Pagination as O } from "../../pagination/Pagination.js";
+import { SelectOption as R } from "../../select/parts/SelectOption.js";
 import { Select as C } from "../../select/Select.js";
-const E = O({
+const E = j({
   base: [
     "uy:bg-surface-neutral-lowest",
     "uy:sticky uy:bottom-0",
@@ -34,7 +34,7 @@ const E = O({
       onPageSizeChange: o,
       itemLabel: c = "unity:component:table:pagination:item",
       ...M
-    } = y, a = j(), l = L(), [$, z] = I(P), S = {
+    } = y, a = L(), l = T(), [$, z] = I(P), S = {
       pageCount: t,
       defaultPage: p,
       currentPage: u,
@@ -87,7 +87,7 @@ const E = O({
             }
           ) }),
           /* @__PURE__ */ e("div", { className: "uy:justify-self-center", children: t > 1 && /* @__PURE__ */ e(
-            R,
+            O,
             {
               ...S,
               "aria-labelledby": `table-pagination-${a}-label`
@@ -123,7 +123,7 @@ const E = O({
                   o == null || o(d), z(d);
                 },
                 "aria-labelledby": `table-pagination-${a}-pagesize-label`,
-                children: (i) => /* @__PURE__ */ e(T, { id: i.value, children: i.label })
+                children: (i) => /* @__PURE__ */ e(R, { id: i.value, children: i.label })
               }
             ) })
           ] }) })

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

@@ -36,5 +36,5 @@ export declare const tableRow: import('tailwind-variants').TVReturnType<{} | {}
  * {@link https://unity-components.payfit.io/?path=/story/data-table-tablerow--docs|API and Demos} •
  * {@link https://payfit.design|Design docs}
  */
-declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableRow: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>>;
 export { TableRow };

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

@@ -1,7 +1,7 @@
 import { jsx as d } from "react/jsx-runtime";
-import b, { forwardRef as n, Children as c, cloneElement as f } from "react";
-import { tv as y } from "tailwind-variants";
-const m = y({
+import n, { memo as c, forwardRef as y, useMemo as f, Children as m, cloneElement as p } from "react";
+import { uyTv as v } from "@payfit/unity-themes";
+const g = v({
   base: [
     "uy:group uy:h-500",
     "uy:bg-surface-neutral uy:border-b uy:border-solid uy:border-b-border-neutral-enabled",
@@ -10,37 +10,39 @@ const m = y({
     "uy:aria-[selected=true]:bg-surface-neutral-selected uy:aria-[selected=true]:border-b-border-neutral-selected",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
   ]
-}), p = n(
-  ({ children: t, rowIndex: o = 0, onKeyDown: r, isSelected: u, ...a }, l) => {
-    const s = c.map(t, (e, i) => b.isValidElement(e) ? f(
-      e,
-      {
-        rowIndex: o,
-        colIndex: i,
-        ...e.props
-      }
-    ) : e);
-    return /* @__PURE__ */ d(
-      "tr",
-      {
-        ref: l,
-        role: "row",
-        className: m(),
-        "aria-rowindex": o + 1,
-        "aria-selected": u,
-        onKeyDown: (e) => {
-          r == null || r(e);
-        },
-        "data-dd-privacy": "mask",
-        "data-selectable": u !== void 0,
-        ...a,
-        children: s
-      }
-    );
-  }
+}), R = c(
+  y(
+    ({ children: o, className: a, rowIndex: r = 0, onKeyDown: u, isSelected: t, ...s }, l) => {
+      const i = f(() => m.map(o, (e, b) => n.isValidElement(e) ? p(
+        e,
+        {
+          rowIndex: r,
+          colIndex: b,
+          ...e.props
+        }
+      ) : e), [o, r]);
+      return /* @__PURE__ */ d(
+        "tr",
+        {
+          ref: l,
+          role: "row",
+          className: g({ className: a }),
+          "aria-rowindex": r + 1,
+          "aria-selected": t,
+          onKeyDown: (e) => {
+            u == null || u(e);
+          },
+          "data-dd-privacy": "mask",
+          "data-selectable": t !== void 0,
+          ...s,
+          children: i
+        }
+      );
+    }
+  )
 );
-p.displayName = "TableRow";
+R.displayName = "TableRow";
 export {
-  p as TableRow,
-  m as tableRow
+  R as TableRow,
+  g as tableRow
 };

package/dist/esm/components/tabs/Tabs.context.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 import { tabsVariant } from './Tabs.variant.js';
 interface TabsContextValue {
     variant: VariantProps<typeof tabsVariant>['variant'];

package/dist/esm/components/tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { TabsProps as AriaTabsProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 import { tabsVariant } from './Tabs.variant.js';
 export interface TabsProps extends Omit<AriaTabsProps, 'isDisabled' | 'orientation' | 'className' | 'style' | 'disabledKeys' | 'keyboardActivation' | 'slot'>, VariantProps<typeof tabsVariant> {
     /** set to true to make the tabs scrollable */

package/dist/esm/components/tabs/Tabs.variant.js

@@ -1,4 +1,4 @@
-import { tv as e } from "tailwind-variants";
+import { uyTv as e } from "@payfit/unity-themes";
 const a = e({
   slots: {
     base: "uy:w-full",

package/dist/esm/components/tabs/parts/NavigationButton.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Button as a } from "react-aria-components";
-import { tv as s } from "tailwind-variants";
-import { Icon as i } from "../../icon/Icon.js";
-const n = s({
+import { jsx as u } from "react/jsx-runtime";
+import { uyTv as a } from "@payfit/unity-themes";
+import { Button as s } from "react-aria-components";
+import { Icon as y } from "../../icon/Icon.js";
+const i = a({
   slots: {
     base: "uy:absolute uy:pt-150 uy:pb-150",
     button: "uy:rounded-circle uy:hover:text-content-neutral-hover uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
@@ -18,17 +18,17 @@ const n = s({
       }
     }
   }
-}), g = ({ direction: t, onPress: o }) => {
-  const { base: u, button: l, icon: r } = n({ direction: t });
-  return /* @__PURE__ */ e("div", { className: u(), children: /* @__PURE__ */ e(
-    a,
+}), g = ({ direction: t, onPress: e }) => {
+  const { base: o, button: l, icon: r } = i({ direction: t });
+  return /* @__PURE__ */ u("div", { className: o(), children: /* @__PURE__ */ u(
+    s,
     {
       id: `scroll-${t}`,
       className: l(),
       "aria-label": `Scroll ${t}`,
-      onPress: o,
-      children: /* @__PURE__ */ e(
-        i,
+      onPress: e,
+      children: /* @__PURE__ */ u(
+        y,
         {
           className: r(),
           "aria-labelledby": `scroll-${t}`,

package/dist/esm/components/tabs/parts/Tab.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
-import { TabProps as AriaTabProps } from 'react-aria-components';
-export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className' | 'style' | 'download' | 'ping' | 'routerOptions'> {
+import { TabProps as AriaTabProps, Key } from 'react-aria-components';
+export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className' | 'style' | 'download' | 'ping' | 'routerOptions' | 'id'> {
+    id: Key | undefined;
     suffix?: ReactNode;
 }
 declare const Tab: import('react').ForwardRefExoticComponent<TabProps & {