@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/selectable-button-group/parts/SelectableButton.js

@@ -1,17 +1,17 @@
-import { jsxs as n, jsx as o, Fragment as x } from "react/jsx-runtime";
-import { forwardRef as h, useRef as I, useContext as w } from "react";
-import { uyTv as B } from "@payfit/unity-themes";
-import { useToggleButtonGroupItem as N, mergeProps as S } from "react-aria";
-import { Icon as G } from "../../icon/Icon.js";
-import { Spinner as P } from "../../spinner/Spinner.js";
-import { SelectableButtonGroupContext as R } from "../SelectableButtonGroup.context.js";
-const T = B({
+import { jsxs as c, jsx as a, Fragment as v } from "react/jsx-runtime";
+import { forwardRef as x, useRef as h, useContext as B, useCallback as N } from "react";
+import { uyTv as S } from "@payfit/unity-themes";
+import { useToggleButtonGroupItem as I } from "react-aria";
+import { Icon as w } from "../../icon/Icon.js";
+import { Spinner as C } from "../../spinner/Spinner.js";
+import { SelectableButtonGroupContext as G } from "../SelectableButtonGroup.context.js";
+const j = S({
   // add the component styles
   slots: {
     base: [
-      "uy:group uy:border uy:border-solid uy:rounded-75 uy:py-100 uy:flex uy:gap-50 uy:items-center",
+      "uy:group uy:border uy:border-solid uy:rounded-pill uy:py-125 uy:sm:py-100 uy:flex uy:gap-50 uy:items-center",
       // default background and border
-      "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled",
+      "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled uy:m-[1px]",
       // pseudo-states
       "uy:hover:bg-surface-form-hover uy:hover:border-border-form-hover",
       "uy:active:bg-surface-form-pressed uy:active:border-border-form-pressed",
@@ -20,24 +20,26 @@ const T = B({
       // Pressed
       "uy:data-[pressed=true]:bg-surface-form-pressed uy:data-[pressed=true]:border-border-form-pressed uy:data-[pressed=true]:text-content-form-pressed",
       // selected
-      "uy:data-[selected=true]:bg-surface-form-selected uy:data-[selected=true]:border-border-form-selected uy:data-[selected=true]:text-content-primary-active",
+      "uy:data-[selected=true]:bg-surface-form-selected uy:data-[selected=true]:border-border-form-selected uy:data-[selected=true]:text-content-form-selected uy:data-[selected=true]:border-2 uy:data-[selected=true]:m-0",
       // Disabled
       "uy:disabled:bg-surface-form-disabled uy:disabled:border-border-form-disabled uy:disabled:text-content-form-disabled uy:disabled:cursor-not-allowed",
       // Loading
-      "uy:data-[loading=true]:bg-surface-form-disabled uy:data-[loading=true]:border-border-form-disabled uy:data-[loading=true]:text-content-form-disabled uy:data-[loading=true]:cursor-wait"
+      "uy:data-[loading=true]:bg-surface-form-disabled uy:data-[loading=true]:border-border-form-disabled uy:data-[loading=true]:text-content-form-disabled uy:data-[loading=true]:cursor-wait",
+      // Invalid
+      "uy:group-aria-[invalid=true]:bg-surface-form-error uy:group-aria-[invalid=true]:border-border-form-error uy:group-aria-[invalid=true]:text-content-form-error"
     ],
     icon: [
-      "uy:p-25 uy:text-content-neutral-low",
+      "uy:p-25 uy:text-content-form-enabled",
       // Pseudo-states
       "uy:group-data-[pressed=true]:text-content-form-pressed",
       // selected
-      "uy:group-data-[selected=true]:text-content-primary-active",
+      "uy:group-data-[selected=true]:text-content-form-selected",
       // disabled
       "uy:group-disabled:text-content-form-disabled",
       // Loading
       "uy:data-[loading=true]:hidden"
     ],
-    label: ["uy:typography-action"]
+    label: ["uy:typography-action uy:whitespace-nowrap"]
   },
   variants: {
     hasIcon: {
@@ -47,71 +49,68 @@ const T = B({
       false: {
         base: "uy:px-200"
       }
-    },
-    isInvalid: {
-      true: {
-        base: "uy:bg-surface-form-error uy:border-border-form-error"
-      }
     }
   },
   defaultVariants: {
-    hasIcon: !1,
-    isInvalid: !1
+    hasIcon: !1
   }
-}), j = h(
-  (r, c) => {
-    const a = I(null), s = w(R);
-    if (!s)
+}), z = x(
+  (t, r) => {
+    const u = h(null), d = B(G);
+    if (!d)
       throw new Error(
-        "SelectableButton must be used within a ToggleButtonGroup component"
+        "SelectableButton must be used within a SelectableButtonGroup component"
       );
-    const { state: b, isInvalid: d } = s, { buttonProps: u, isPressed: f, isSelected: l } = N(
-      { id: r.value, ...r },
-      b,
-      a
-    ), { ref: y } = S({ ref: a }, { ref: c }), {
-      isDisabled: m = !1,
+    const { buttonProps: l, isPressed: b, isSelected: i } = I(
+      { id: t.value, ...t },
+      d,
+      u
+    ), f = N(
+      (s) => {
+        u.current = s, typeof r == "function" ? r(s) : r && (r.current = s);
+      },
+      [r]
+    ), {
+      isDisabled: y = !1,
       isLoading: e = !1,
-      prefixIcon: t,
-      children: i
-    } = r, { base: p, icon: g, label: v } = T({
-      hasIcon: !!t && !e,
-      isInvalid: !!d
+      prefixIcon: o,
+      children: n
+    } = t, { base: m, icon: p, label: g } = j({
+      hasIcon: !!o && !e
     });
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ c(
       "button",
       {
         "data-dd-privacy": "allow",
-        ...u,
-        ref: y,
-        className: p({ className: r.className }),
-        disabled: u.disabled || m || e,
+        ...l,
+        ref: f,
+        className: m({ className: t.className }),
+        disabled: l.disabled || y || e,
         "data-loading": e ? !0 : void 0,
-        "data-pressed": f,
-        "data-selected": l,
-        "data-invalid": d,
+        "data-pressed": b,
+        "data-selected": i,
         "aria-busy": e,
         children: [
-          t && !e && /* @__PURE__ */ o(
-            G,
+          o && !e && /* @__PURE__ */ a(
+            w,
             {
-              src: l ? `${t}Filled` : `${t}Outlined`,
+              src: i ? `${o}Filled` : `${o}Outlined`,
               role: "presentation",
-              className: g(),
+              className: p(),
               size: 20
             }
           ),
-          e ? /* @__PURE__ */ n(x, { children: [
-            /* @__PURE__ */ o(P, { label: "Loading", size: "small", color: "inherit" }),
-            /* @__PURE__ */ o("span", { className: "uy:sr-only", children: i })
-          ] }) : /* @__PURE__ */ o("span", { className: v(), children: i })
+          e ? /* @__PURE__ */ c(v, { children: [
+            /* @__PURE__ */ a(C, { label: "Loading", size: "small", color: "inherit" }),
+            /* @__PURE__ */ a("span", { className: "uy:sr-only", children: n })
+          ] }) : /* @__PURE__ */ a("span", { className: g(), children: n })
         ]
       }
     );
   }
 );
-j.displayName = "SelectableButton";
+z.displayName = "SelectableButton";
 export {
-  j as SelectableButton,
-  T as selectableButton
+  z as SelectableButton,
+  j as selectableButton
 };

package/dist/esm/components/selectable-button-group-field/SelectableButtonGroupField.d.ts

@@ -54,6 +54,8 @@ type SelectableButtonGroupFieldComponent = (<TSchema extends Schema>(props: Sele
  * }
  * ```
  * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
+ * @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 SelectableButtonGroupField: SelectableButtonGroupFieldComponent;
 export { SelectableButtonGroupField };

package/dist/esm/components/selectable-button-group-field/TanstackSelectableButtonGroupField.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { TanstackSelectableButtonGroupProps } from '../selectable-button-group/TanstackSelectableButtonGroup.js';
+export type TanstackSelectableButtonGroupFieldProps = TanstackSelectableButtonGroupProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
+    /** The label for the selectable button group field. */
+    label: string;
+    /** Helper text to display below the selectable button group field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the selectable button group field. */
+    contextualLink?: ReactNode;
+    /** The SelectableButton components to render within the group. */
+    children: ReactNode;
+};
+/**
+ * The `TanstackSelectableButtonGroupField` component renders a full field (label, selectable button group)
+ * wired to the TanStack Form context. It manages state and accessibility via the
+ * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+ *
+ * Behavior:
+ * - Renders `TanstackSelectableButtonGroup` with its children.
+ * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
+ *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
+ *
+ * Accessibility:
+ * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
+ *   `aria-details` using identifiers from the `a11y` context.
+ *
+ * Key props:
+ * - `label: string` — label text.
+ * - `selectionMode?: "single" | "multiple"` — determines how many options can be selected.
+ * - `helperText?: ReactNode` — helper text displayed below the field.
+ * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
+ * - Inherits props from `TanstackSelectableButtonGroup`.
+ * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
+ *
+ * Example:
+ * ```tsx
+ * import { useTanstackUnityForm } from "@payfit/unity-components"
+ * import { SelectableButton } from "@payfit/unity-components"
+ *
+ * function Example() {
+ *  const schema = z.object({
+ *     choice: z.array(z.string()).min(1, { message: 'Select at least one option' })
+ *  })
+ *
+ *   const form = useTanstackUnityForm<{ choice: string[] }>({ validators: {
+ *     onBlur: schema,
+ *   } })
+ *   return (
+ *     <form.AppForm>
+ *       <form.AppField name="choice">
+ *         {(field) => (
+ *           <field.SelectableButtonGroup
+ *             label="Choose your preferences"
+ *             helperText="Select one or more options"
+ *             selectionMode="multiple"
+ *           >
+ *             <SelectableButton value="option1">Option 1</SelectableButton>
+ *             <SelectableButton value="option2">Option 2</SelectableButton>
+ *           </field.SelectableButtonGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks Migration from `SelectableButtonGroupField` (non‑TanStack):
+ * - Do not pass a `name` prop to the field: use `<form.AppField name="…">`.
+ * - `value`, `defaultValue`, and `isInvalid` are derived from the TanStack form context.
+ */
+declare const TanstackSelectableButtonGroupField: import('react').ForwardRefExoticComponent<TanstackSelectableButtonGroupProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
+    /** The label for the selectable button group field. */
+    label: string;
+    /** Helper text to display below the selectable button group field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the selectable button group field. */
+    contextualLink?: ReactNode;
+    /** The SelectableButton components to render within the group. */
+    children: ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableButtonGroupField };

package/dist/esm/components/selectable-button-group-field/TanstackSelectableButtonGroupField.js

@@ -0,0 +1,47 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { TanstackFormFeedbackText as d } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as f } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as u } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as k } from "../form-field/TanstackFormField.js";
+import { TanstackSelectableButtonGroup as F } from "../selectable-button-group/TanstackSelectableButtonGroup.js";
+function T({
+  label: r,
+  helperText: o,
+  contextualLink: e,
+  isRequired: a,
+  requiredVariant: m,
+  isDisabled: n,
+  children: c,
+  ...l
+}, i) {
+  return /* @__PURE__ */ p(k, { children: [
+    /* @__PURE__ */ t(
+      u,
+      {
+        requiredVariant: m,
+        isRequired: a,
+        children: r
+      }
+    ),
+    o && /* @__PURE__ */ t(f, { children: o }),
+    /* @__PURE__ */ t(
+      F,
+      {
+        ref: i,
+        isDisabled: n,
+        ...l,
+        children: c
+      }
+    ),
+    /* @__PURE__ */ t(d, {}),
+    e
+  ] });
+}
+const b = s(
+  T
+);
+b.displayName = "TanstackSelectableButtonGroupField";
+export {
+  b as TanstackSelectableButtonGroupField
+};

package/dist/esm/components/selectable-card/internals/Description.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import { uyTv as r } from "@payfit/unity-themes";
 import { Text as i } from "../../text/Text.js";
 const m = r({
-  base: ["uy:mt-200", "uy:line-clamp-2"]
+  base: ["uy:mt-50", "uy:line-clamp-2"]
 }), a = ({ children: o }) => /* @__PURE__ */ t(i, { className: m(), variant: "body", children: o });
 export {
   a as Description,

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

@@ -4,9 +4,9 @@ import { CheckboxGroup as m } from "react-aria-components";
 const p = l(({ children: o, ...r }, e) => /* @__PURE__ */ a(
   m,
   {
+    ...r,
     ref: e,
     className: "uy:group uy:flex uy:md:flex-row uy:sm:flex-col uy:gap-150",
-    ...r,
     children: o
   }
 ));

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

@@ -0,0 +1,26 @@
+import { SelectableCardCheckboxGroupProps } from './SelectableCardCheckboxGroup.js';
+export type TanstackSelectableCardCheckboxGroupProps = Omit<SelectableCardCheckboxGroupProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackSelectableCardCheckboxGroup` is a controlled checkbox group wired to the TanStack Form field context. It is based on the Unity `SelectableCardCheckboxGroup` component.
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm({ validators: {} })
+ *   return (
+ *     <form.Form>
+ *       <form.AppField name="options">
+ *         {(field) => (
+ *           <field.SelectableCardCheckboxGroup>
+ *             <SelectableCardCheckbox value="option1" title="Option 1" />
+ *             <SelectableCardCheckbox value="option2" title="Option 2" />
+ *           </field.SelectableCardCheckboxGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.Form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackSelectableCardCheckboxGroup: import('react').ForwardRefExoticComponent<TanstackSelectableCardCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableCardCheckboxGroup };

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

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

package/dist/esm/components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.js

@@ -1,40 +1,40 @@
-import { jsx as r, jsxs as t, Fragment as n } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { useId as h } from "react-aria";
-import { Checkbox as p } from "react-aria-components";
-import { CheckboxIndicator as s } from "../../../checkbox/parts/CheckboxIndicator.js";
+import { jsx as r, jsxs as m, Fragment as n } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { useId as f } from "react-aria";
+import { Checkbox as h } from "react-aria-components";
+import { CheckboxIndicator as p } from "../../../checkbox/parts/CheckboxIndicator.js";
 import { Text as b } from "../../../text/Text.js";
 import { Content as x } from "../../internals/Content.js";
 import { Description as C } from "../../internals/Description.js";
-import { Illustration as k } from "../../internals/Illustration.js";
-import { SelectedIndicator as u } from "../../internals/SelectedIndicator.js";
-import { selectableCard as I } from "../../selectableCard.variant.js";
-const v = f(({ title: i, description: e, illustration: m, ...c }, a) => {
-  const { base: d } = I(), l = h();
+import { Illustration as g } from "../../internals/Illustration.js";
+import { SelectedIndicator as k } from "../../internals/SelectedIndicator.js";
+import { selectableCard as u } from "../../selectableCard.variant.js";
+const I = s(({ title: i, description: o, illustration: t, ...a }, c) => {
+  const { base: d } = u(), l = f();
   return /* @__PURE__ */ r(
-    p,
+    h,
     {
-      ref: a,
-      className: ({ isFocusVisible: o }) => d({ isFocusVisible: o }),
-      ...c,
-      children: (o) => /* @__PURE__ */ t(n, { children: [
-        /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
-          s,
+      ref: c,
+      className: ({ isFocusVisible: e }) => d({ isFocusVisible: e }),
+      ...a,
+      children: (e) => /* @__PURE__ */ m(n, { children: [
+        /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(
+          p,
           {
             className: "uy:group-hover:border-border-form-hover",
-            ...o
+            ...e
           }
         ) }),
-        /* @__PURE__ */ t(x, { children: [
-          m && /* @__PURE__ */ r(k, { children: m }),
-          /* @__PURE__ */ r(b, { variant: "h3", id: `${l}-label`, children: i }),
-          e && /* @__PURE__ */ r(C, { children: e })
+        /* @__PURE__ */ m(x, { children: [
+          t && /* @__PURE__ */ r(g, { children: t }),
+          /* @__PURE__ */ r(b, { variant: "bodyLargeStrong", asElement: "h3", id: `${l}-label`, children: i }),
+          o && /* @__PURE__ */ r(C, { children: o })
         ] })
       ] })
     }
   );
 });
-v.displayName = "SelectableCardCheckbox";
+I.displayName = "SelectableCardCheckbox";
 export {
-  v as SelectableCardCheckbox
+  I as SelectableCardCheckbox
 };

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

@@ -15,6 +15,8 @@ export type SelectableCardRadioGroupProps = Omit<RadioGroupProps, 'className' |
  * ```
  * @see {@link SelectableCardRadioGroupProps} for all available props
  * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardradiogroup-docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ *
+ * The SelectableCardRadioGroup component adapts to smaller screen sizes, with cards stacking vertically to maintain usability on mobile devices.
  */
 declare const SelectableCardRadioGroup: import('react').ForwardRefExoticComponent<SelectableCardRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
 export { SelectableCardRadioGroup };

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",