@payfit/unity-components 1.2.0 → 2.1.4

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/skip-links/SkipLinks.js

@@ -3,7 +3,7 @@ import { forwardRef as l, useId as p } from "react";
 import { uyTv as f } from "@payfit/unity-themes";
 import { Link as m } from "react-aria-components";
 import { FormattedMessage as b } from "react-intl";
-import { link as k } from "../link/Link.variants.js";
+import { link as k } from "../link/RawLink.js";
 const h = f({
   slots: {
     base: [

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
@@ -13,6 +14,7 @@ export interface TableRootProps extends PropsWithChildren {
  * @component
  * The `TableRoot` component serves as the container for the table and its pagination controls.
  * It provides styling and layout for the table, including min and max height constraints.
+ * The pagination remains fixed while the table content can scroll horizontally if needed.
  * @param {TableRootProps} props - The props for the `TableRoot` component
  * @param {number} [props.minRows=10] - The minimum number of rows to display, affecting the minimum height
  * @param {number} [props.maxRows=50] - The maximum number of rows to display, affecting the maximum height
@@ -34,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.
@@ -48,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 {
     /**
@@ -58,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