@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js

@@ -1,24 +1,22 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { RadioGroup as p } from "react-aria-components";
-import { useBreakpointListener as n } from "../../../hooks/use-breakpoint-listener.js";
-const u = m(({ children: r, value: e, onChange: i, onBlur: t, ...a }, l) => {
-  const o = n();
-  return /* @__PURE__ */ s(
-    p,
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { RadioGroup as s } from "react-aria-components";
+import { useBreakpointListener as m } from "../../../hooks/use-breakpoint-listener.js";
+const p = l(({ children: r, value: e, ...i }, t) => {
+  const o = m();
+  return /* @__PURE__ */ a(
+    s,
     {
-      ...a,
+      ...i,
       orientation: o === "xs" || o === "sm" ? "vertical" : "horizontal",
       value: e,
-      onBlur: t,
-      onChange: i,
       className: "uy:flex uy:md:flex-row uy:sm:flex-col uy:gap-150",
-      ref: l,
+      ref: t,
       children: r
     }
   );
 });
-u.displayName = "SelectableCardRadioGroup";
+p.displayName = "SelectableCardRadioGroup";
 export {
-  u as SelectableCardRadioGroup
+  p as SelectableCardRadioGroup
 };

package/dist/esm/components/selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.d.ts

@@ -0,0 +1,28 @@
+import { SelectableCardRadioGroupProps } from './SelectableCardRadioGroup.js';
+export type TanstackSelectableCardRadioGroupProps = Omit<SelectableCardRadioGroupProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackSelectableCardRadioGroup` is a controlled radio group wired to the TanStack Form field context. It is based on the Unity `SelectableCardRadioGroup` component.
+ *
+ * The TanstackSelectableCardRadioGroup component adapts to smaller screen sizes, with cards stacking vertically to maintain usability on mobile devices.
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm({ validators: {} })
+ *   return (
+ *     <form.Form>
+ *       <form.AppField name="option">
+ *         {(field) => (
+ *           <field.SelectableCardRadioGroup>
+ *             <SelectableCardRadio value="option1" title="Option 1" />
+ *             <SelectableCardRadio value="option2" title="Option 2" />
+ *           </field.SelectableCardRadioGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.Form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackSelectableCardRadioGroup: import('react').ForwardRefExoticComponent<TanstackSelectableCardRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableCardRadioGroup };

package/dist/esm/components/selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js

@@ -0,0 +1,32 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { useFieldContext as p } from "../../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as u } from "../../form-field/TanstackFormField.context.js";
+import { SelectableCardRadioGroup as b } from "./SelectableCardRadioGroup.js";
+const f = m(({ onBlur: i, onChange: r, children: d, ...l }, n) => {
+  const e = p(), a = u(), s = e.state.meta.isTouched && !e.state.meta.isValid, o = [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c(
+    b,
+    {
+      ...l,
+      ref: n,
+      id: a.inputId,
+      value: e.state.value || void 0,
+      onChange: (t) => {
+        e.handleChange(t), r?.(t);
+      },
+      onBlur: (t) => {
+        e.handleBlur(), i?.(t);
+      },
+      isInvalid: s,
+      "aria-labelledby": a.labelId,
+      "aria-describedby": o.length > 0 ? o : void 0,
+      "aria-details": a.contextualLinkId,
+      children: d
+    }
+  );
+});
+f.displayName = "TanstackSelectableCardRadioGroup";
+export {
+  f as TanstackSelectableCardRadioGroup
+};

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/RadioIndicator.js

@@ -1,6 +1,6 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { uyTv as e } from "@payfit/unity-themes";
-const t = e({
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { uyTv as i } from "@payfit/unity-themes";
+const t = i({
   base: "",
   variants: {
     isSelected: {
@@ -8,10 +8,11 @@ const t = e({
         "uy:stroke-border-form-enabled",
         "uy:hover:stroke-border-form-hover",
         "uy:focus-visible:stroke-border-form-focus"
-      ]
+      ],
+      true: ["uy:text-surface-form-active"]
     }
   }
-}), d = ({ isSelected: r }) => r ? /* @__PURE__ */ o(
+}), d = ({ isSelected: o }) => o ? /* @__PURE__ */ r(
   "svg",
   {
     width: "20",
@@ -19,28 +20,28 @@ const t = e({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ i("g", { id: "Radio input", children: [
-      /* @__PURE__ */ o(
+    children: /* @__PURE__ */ e("g", { id: "Radio input", className: t({ isSelected: o }), children: [
+      /* @__PURE__ */ r(
         "path",
         {
           id: "Background",
           d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z",
           fill: "white",
-          stroke: "#0157B2",
+          stroke: "currentColor",
           strokeWidth: "1.25"
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ r(
         "path",
         {
           id: "Foreground",
           d: "M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z",
-          fill: "#0157B2"
+          fill: "currentColor"
         }
       )
     ] })
   }
-) : /* @__PURE__ */ o(
+) : /* @__PURE__ */ r(
   "svg",
   {
     width: "20",
@@ -48,10 +49,10 @@ const t = e({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ o("g", { id: "Radio input", children: /* @__PURE__ */ o(
+    children: /* @__PURE__ */ r("g", { id: "Radio input", children: /* @__PURE__ */ r(
       "path",
       {
-        className: t({ isSelected: r }),
+        className: t({ isSelected: o }),
         id: "Background",
         d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z",
         fill: "white",

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js

@@ -1,36 +1,38 @@
-import { jsx as r, jsxs as i, Fragment as c } from "react/jsx-runtime";
-import { Radio as l } from "react-aria-components";
-import { Text as n } from "../../../text/Text.js";
-import { Content as p } from "../../internals/Content.js";
-import { Description as s } from "../../internals/Description.js";
-import { Illustration as f } from "../../internals/Illustration.js";
-import { SelectedIndicator as h } from "../../internals/SelectedIndicator.js";
-import { selectableCard as b } from "../../selectableCard.variant.js";
-import x from "./RadioIndicator.js";
-const C = ({
-  title: m,
-  description: e,
+import { jsx as r, jsxs as a, Fragment as n } from "react/jsx-runtime";
+import { useId as s } from "react";
+import { Radio as p } from "react-aria-components";
+import { Text as f } from "../../../text/Text.js";
+import { Content as b } from "../../internals/Content.js";
+import { Description as h } from "../../internals/Description.js";
+import { Illustration as I } from "../../internals/Illustration.js";
+import { SelectedIndicator as x } from "../../internals/SelectedIndicator.js";
+import { selectableCard as C } from "../../selectableCard.variant.js";
+import R from "./RadioIndicator.js";
+const S = ({
+  title: d,
+  description: o,
   illustration: t,
-  ...a
+  ...l
 }) => {
-  const { base: d } = b();
+  const m = s(), { base: c } = C(), i = `selectable-card-radio-${m}__title`;
   return /* @__PURE__ */ r(
-    l,
+    p,
     {
-      className: ({ isFocusVisible: o }) => d({ isFocusVisible: o }),
-      ...a,
-      children: ({ isSelected: o }) => /* @__PURE__ */ i(c, { children: [
-        /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(x, { isSelected: o }) }),
-        /* @__PURE__ */ i(p, { children: [
-          t && /* @__PURE__ */ r(f, { children: t }),
-          /* @__PURE__ */ r(n, { variant: "h3", children: m }),
-          e && /* @__PURE__ */ r(s, { children: e })
+      className: ({ isFocusVisible: e }) => c({ isFocusVisible: e }),
+      "aria-labelledby": i,
+      ...l,
+      children: ({ isSelected: e }) => /* @__PURE__ */ a(n, { children: [
+        /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(R, { isSelected: e }) }),
+        /* @__PURE__ */ a(b, { children: [
+          t && /* @__PURE__ */ r(I, { children: t }),
+          /* @__PURE__ */ r(f, { asElement: "h3", variant: "bodyLargeStrong", id: i, children: d }),
+          o && /* @__PURE__ */ r(h, { children: o })
         ] })
       ] })
     }
   );
 };
-C.displayName = "SelectableCardRadio";
+S.displayName = "SelectableCardRadio";
 export {
-  C as SelectableCardRadio
+  S as SelectableCardRadio
 };

package/dist/esm/components/selectable-card/selectableCard.variant.js

@@ -1,14 +1,14 @@
-import { uyTv as r } from "@payfit/unity-themes";
-const o = r({
+import { uyTv as e } from "@payfit/unity-themes";
+const u = e({
   slots: {
     base: [
       "uy:group",
       "uy:flex uy:flex-row uy:items-start uy:basis-0 uy:grow uy:cursor-pointer",
-      "uy:border uy:border-solid uy:rounded-200 uy:border-border-form-enabled",
+      "uy:border uy:border-solid uy:rounded-200 uy:border-border-form-enabled uy:m-px",
       "uy:text-content-form-enabled",
       "uy:bg-surface-form-enabled",
       "uy:hover:border-border-form-hover",
-      "uy:data-[selected]:border-border-form-active",
+      "uy:data-[selected=true]:border-border-form-active uy:data-[selected=true]:border-2 uy:data-[selected=true]:m-0",
       "uy:data-[invalid]:border-border-form-error uy:data-[invalid]:bg-surface-form-error",
       "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
     ]
@@ -20,5 +20,5 @@ const o = r({
   }
 });
 export {
-  o as selectableCard
+  u as selectableCard
 };

package/dist/esm/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.d.ts

@@ -26,6 +26,8 @@ export interface SelectableCardCheckboxGroupFieldProps<TFieldValues extends Fiel
  * ```
  * @see {@link SelectableCardCheckboxGroupFieldProps} for all available props
  * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/forms-selectablecard-selectablecardradiogroupfield--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const SelectableCardCheckboxGroupField: import('react').ForwardRefExoticComponent<SelectableCardCheckboxGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
 export { SelectableCardCheckboxGroupField };

package/dist/esm/components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+export interface TanstackSelectableCardCheckboxGroupFieldProps extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The label for the checkbox group. */
+    label: string;
+    /** Helper text to display below the checkbox group. */
+    helperText?: ReactNode;
+}
+declare const TanstackSelectableCardCheckboxGroupField: import('react').ForwardRefExoticComponent<TanstackSelectableCardCheckboxGroupFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableCardCheckboxGroupField };

package/dist/esm/components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.js

@@ -0,0 +1,38 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { TanstackFormFeedbackText as n } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as p } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as s } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as k } from "../form-field/TanstackFormField.js";
+import { TanstackSelectableCardCheckboxGroup as f } from "../selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.js";
+function b({
+  children: o,
+  isRequired: c,
+  requiredVariant: t,
+  label: l,
+  helperText: r,
+  ...m
+}, i) {
+  return /* @__PURE__ */ a(k, { children: [
+    /* @__PURE__ */ a("div", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+      /* @__PURE__ */ e(
+        s,
+        {
+          requiredVariant: t,
+          isRequired: c,
+          children: l
+        }
+      ),
+      r && /* @__PURE__ */ e(p, { children: r })
+    ] }),
+    /* @__PURE__ */ e(f, { ref: i, ...m, children: o }),
+    /* @__PURE__ */ e(n, {})
+  ] });
+}
+const x = d(
+  b
+);
+x.displayName = "TanstackSelectableCardCheckboxGroupField";
+export {
+  x as TanstackSelectableCardCheckboxGroupField
+};

package/dist/esm/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.d.ts

@@ -26,6 +26,8 @@ export interface SelectableCardRadioGroupFieldProps<TFieldValues extends FieldVa
  * ```
  * @see {@link SelectableCardRadioGroupFieldProps} for all available props
  * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/forms-selectablecard-selectablecardcheckboxgroupfield--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const SelectableCardRadioGroupField: import('react').ForwardRefExoticComponent<SelectableCardRadioGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
 export { SelectableCardRadioGroupField };

package/dist/esm/components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+export interface TanstackSelectableCardRadioGroupFieldProps extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The label for the radio button group. */
+    label: string;
+    /** Helper text to display below the radio button group. */
+    helperText?: ReactNode;
+}
+declare const TanstackSelectableCardRadioGroupField: import('react').ForwardRefExoticComponent<TanstackSelectableCardRadioGroupFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableCardRadioGroupField };

package/dist/esm/components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.js

@@ -0,0 +1,38 @@
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { TanstackFormFeedbackText as n } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as p } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as s } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as f } from "../form-field/TanstackFormField.js";
+import { TanstackSelectableCardRadioGroup as k } from "../selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js";
+function u({
+  children: o,
+  isRequired: t,
+  requiredVariant: l,
+  label: i,
+  helperText: r,
+  ...c
+}, m) {
+  return /* @__PURE__ */ e(f, { children: [
+    /* @__PURE__ */ e("div", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+      /* @__PURE__ */ a(
+        s,
+        {
+          requiredVariant: l,
+          isRequired: t,
+          children: i
+        }
+      ),
+      r && /* @__PURE__ */ a(p, { children: r })
+    ] }),
+    /* @__PURE__ */ a(k, { ref: m, ...c, children: o }),
+    /* @__PURE__ */ a(n, {})
+  ] });
+}
+const F = d(
+  u
+);
+F.displayName = "TanstackSelectableCardRadioGroupField";
+export {
+  F as TanstackSelectableCardRadioGroupField
+};

package/dist/esm/components/table/Table.context.d.ts

@@ -1,4 +1,5 @@
 import { default as React, PropsWithChildren } from 'react';
+import { Virtualizer } from '@tanstack/react-virtual';
 import { CellPosition } from './hooks/useTableKeyboardNavigation.js';
 interface TableKeyboardNavigationContextValue {
     /** The currently focused cell position */
@@ -27,6 +28,10 @@ interface TableContextValue {
     columnCount: number;
     /** Keyboard navigation functionality */
     keyboardNavigation: TableKeyboardNavigationContextValue;
+    /** Virtualization functionality */
+    virtualizer?: Virtualizer<HTMLDivElement, Element>;
+    /** Enable virtualization */
+    enableVirtualization: boolean;
 }
 /**
  * React context for the table component.

package/dist/esm/components/table/Table.context.js

@@ -1,7 +1,7 @@
-import { jsx as a } from "react/jsx-runtime";
-import { createContext as r, useContext as d } from "react";
-import { useTableKeyboardNavigation as i } from "./hooks/useTableKeyboardNavigation.js";
-const u = {
+import { jsx as l } from "react/jsx-runtime";
+import { createContext as i, useContext as r } from "react";
+import { useTableKeyboardNavigation as u } from "./hooks/useTableKeyboardNavigation.js";
+const d = {
   focusedCell: { rowIndex: 0, colIndex: 0 },
   isCellFocused: () => !1,
   handleCellKeyDown: () => {
@@ -20,23 +20,24 @@ const u = {
 }, c = {
   rowCount: 0,
   columnCount: 0,
-  keyboardNavigation: u
-}, o = r(c);
-function f() {
-  return d(o);
+  keyboardNavigation: d,
+  enableVirtualization: !1
+}, e = i(c);
+function C() {
+  return r(e);
 }
 function b({
-  children: e,
+  children: o,
   ...t
 }) {
-  const n = i(), l = {
+  const n = u(), a = {
     ...t,
     keyboardNavigation: n
   };
-  return /* @__PURE__ */ a(o.Provider, { value: l, children: e });
+  return /* @__PURE__ */ l(e.Provider, { value: a, children: o });
 }
 export {
-  o as TableContext,
+  e as TableContext,
   b as TableContextProvider,
-  f as useTableContext
+  C as useTableContext
 };

package/dist/esm/components/table/Table.d.ts

@@ -1,4 +1,5 @@
 import { default as React, PropsWithChildren } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
 export interface TableRootProps extends PropsWithChildren {
     /**
      * The minimum number of rows to display, affecting the minimum height
@@ -35,6 +36,73 @@ export interface TableRootProps extends PropsWithChildren {
  * @see {@link TablePagination} for the pagination component
  */
 declare const TableRoot: React.ForwardRefExoticComponent<TableRootProps & React.RefAttributes<HTMLDivElement>>;
+declare const tableVariant: import('tailwind-variants').TVReturnType<{
+    horizontalScroll: {
+        true: {
+            table: string;
+        };
+        false: {
+            wrapper: string;
+            table: string;
+        };
+    };
+    layout: {
+        fixed: {
+            wrapper: string;
+            table: string;
+        };
+        auto: {
+            table: string;
+        };
+    };
+}, {
+    wrapper: string[];
+    table: string[];
+}, undefined, {
+    horizontalScroll: {
+        true: {
+            table: string;
+        };
+        false: {
+            wrapper: string;
+            table: string;
+        };
+    };
+    layout: {
+        fixed: {
+            wrapper: string;
+            table: string;
+        };
+        auto: {
+            table: string;
+        };
+    };
+}, {
+    wrapper: string[];
+    table: string[];
+}, import('tailwind-variants').TVReturnType<{
+    horizontalScroll: {
+        true: {
+            table: string;
+        };
+        false: {
+            wrapper: string;
+            table: string;
+        };
+    };
+    layout: {
+        fixed: {
+            wrapper: string;
+            table: string;
+        };
+        auto: {
+            table: string;
+        };
+    };
+}, {
+    wrapper: string[];
+    table: string[];
+}, undefined, unknown, unknown, undefined>>;
 export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
     /**
      * The label for the table. This is used for accessibility purposes.
@@ -49,6 +117,28 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
      * Enables horizontal scrolling if the table overflows its container. Enabled by default.
      */
     isHorizontalScrollEnabled?: boolean;
+    /**
+     * Enable internal scroll virtualization
+     * @default false
+     */
+    enableVirtualization?: boolean;
+    /**
+     * Estimated row height in pixels used by the virtualizer. Default ~40 (uy:h-500)
+     * @default 40
+     */
+    estimatedRowHeight?: number;
+    /**
+     * Number of extra rows rendered above/below the viewport
+     * @default 5
+     */
+    overscan?: number;
+    /**
+     * Controls the table layout algorithm:
+     * - `'auto'` (default): Columns adapt to content. Enables horizontal scrolling. Best for flexible, content-driven tables.
+     * - `'fixed'`: Columns use explicit widths from headers. Disables horizontal scrolling. Best for predictable layouts that fit the container.
+     * @default 'auto'
+     */
+    layout?: VariantProps<typeof tableVariant>['layout'];
 }
 export interface TableImperativeHandler {
     /**
@@ -59,6 +149,9 @@ export interface TableImperativeHandler {
 /**
  * The `Table` component provides a fully accessible, keyboard-navigable data table with support for row and column headers,
  * pagination, and empty states. It follows WAI-ARIA grid pattern for accessibility.
+ * The component supports two layout modes:
+ * - **Auto layout** (default): Columns adapt to content with horizontal scrolling enabled
+ * - **Fixed layout**: Explicit column widths that fit the container without horizontal scrolling
  * @param {TableProps} props - The props for the `Table` component
  * @example
  * ```tsx