@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,95 @@
+import { ToggleButtonProps } from 'react-aria-components/ToggleButton';
+import { AriaToggleButtonProps } from 'react-aria/useToggleButton';
+import { UnityIcon } from '@payfit/unity-icons';
+export declare const selectableButton: import('tailwind-variants').TVReturnType<{
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, undefined, {
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, undefined, unknown, unknown, undefined>>;
+type IconName<T extends string> = T extends `${infer Base}${'Filled' | 'Outlined'}` ? Base : T;
+export interface SelectableButtonProps extends Omit<AriaToggleButtonProps, 'id' | 'className' | 'style'> {
+    /**
+     * A unique identifier for the button that will be used as its selection value.
+     * This value must be unique within the SelectableButtonGroup.
+     */
+    value: NonNullable<ToggleButtonProps['id']>;
+    /**
+     * Optional icon to display before the button's text content.
+     * The icon will automatically switch between outlined and filled variants based on selection state.
+     * Specify the base name of the icon without the 'Filled' or 'Outlined' suffix.
+     */
+    prefixIcon?: IconName<UnityIcon>;
+    /**
+     * Set to true to show a loading spinner and disable interaction.
+     * Use this when the button's action requires asynchronous processing.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Customize the style
+     */
+    className?: string;
+}
+/**
+ * A toggleable button that works as part of a SelectableButtonGroup to create single or multiple choice selections.
+ * Provides visual feedback for selection state and supports icons for enhanced visual hierarchy.
+ * @component
+ * @param {SelectableButtonProps} props - Props for configuring the button's behavior and appearance
+ * @see {@link SelectableButtonProps} for all available props
+ * @example
+ * ```tsx
+ * import { SelectableButtonGroup, SelectableButton } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <SelectableButtonGroup selectionMode="single" defaultValue={['morning']}>
+ *       <SelectableButton value="morning">
+ *         Morning
+ *       </SelectableButton>
+ *       <SelectableButton value="afternoon" prefixIcon="Sun">
+ *         Afternoon
+ *       </SelectableButton>
+ *     </SelectableButtonGroup>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](mdc:components/selectable-button-group/parts/SelectableButton) • [Design docs](mdc:design/components/selectable-button-group)
+ */
+declare const SelectableButton: import('react').ForwardRefExoticComponent<SelectableButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { SelectableButton };

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

@@ -0,0 +1,123 @@
+import { jsxs as c, jsx as o, Fragment as N } from "react/jsx-runtime";
+import { forwardRef as S, useRef as I, useContext as w, useCallback as P } from "react";
+import { uyTv as F } from "@payfit/unity-themes";
+import { mergeProps as C } from "react-aria/mergeProps";
+import { useFocusRing as G } from "react-aria/useFocusRing";
+import { useHover as j } from "react-aria/useHover";
+import { useToggleButtonGroupItem as z } from "react-aria/useToggleButtonGroup";
+import { Icon as D } from "../../icon/Icon.js";
+import { Spinner as H } from "../../spinner/Spinner.js";
+import { SelectableButtonGroupContext as L } from "../SelectableButtonGroup.context.js";
+const T = F({
+  // add the component styles
+  slots: {
+    base: [
+      "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:m-[1px]",
+      // Hover
+      "uy:enabled:data-[hovered=true]:bg-surface-form-hover uy:enabled:data-[hovered=true]:border-border-form-hover",
+      // Pressed (mouse or keyboard, surfaced by react-aria)
+      "uy:enabled:data-[pressed=true]:bg-surface-form-pressed uy:enabled:data-[pressed=true]:border-border-form-pressed uy:enabled:data-[pressed=true]:text-content-form-pressed",
+      // Focus visible
+      "uy:enabled:data-[focus-visible=true]:bg-surface-form-focus uy:enabled:data-[focus-visible=true]:border-border-form-focus",
+      "uy:enabled:data-[focus-visible=true]:outline-2 uy:enabled:data-[focus-visible=true]:outline-solid uy:enabled:data-[focus-visible=true]:outline-offset-2 uy:enabled:data-[focus-visible=true]:outline-utility-focus-ring",
+      // selected
+      "uy:enabled:data-[selected=true]:bg-surface-form-selected uy:enabled:data-[selected=true]:border-border-form-selected uy:enabled:data-[selected=true]:text-content-form-selected uy:enabled:data-[selected=true]:border-2 uy:enabled: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",
+      // 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-form-enabled",
+      // Pseudo-states
+      "uy:enabled:group-data-[pressed=true]:text-content-form-pressed",
+      // selected
+      "uy:enabled: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 uy:whitespace-nowrap"]
+  },
+  variants: {
+    hasIcon: {
+      true: {
+        base: "uy:pl-100 uy:pr-200"
+      },
+      false: {
+        base: "uy:px-200"
+      }
+    }
+  },
+  defaultVariants: {
+    hasIcon: !1
+  }
+}), V = S(
+  (t, r) => {
+    const d = I(null), u = w(L);
+    if (!u)
+      throw new Error(
+        "SelectableButton must be used within a SelectableButtonGroup component"
+      );
+    const { buttonProps: l, isPressed: f, isSelected: n } = z(
+      { id: t.value, ...t },
+      u,
+      d
+    ), {
+      isDisabled: i = !1,
+      isLoading: e = !1,
+      prefixIcon: a,
+      children: b
+    } = t, { hoverProps: m, isHovered: y } = j({
+      isDisabled: i || e
+    }), { isFocusVisible: p, focusProps: g } = G(), v = P(
+      (s) => {
+        d.current = s, typeof r == "function" ? r(s) : r && (r.current = s);
+      },
+      [r]
+    ), { base: x, icon: h, label: B } = T({
+      hasIcon: !!a && !e
+    });
+    return /* @__PURE__ */ c(
+      "button",
+      {
+        "data-dd-privacy": "allow",
+        ...C(l, m, g),
+        ref: v,
+        className: x({ className: t.className }),
+        disabled: l.disabled || i || e,
+        "data-loading": e ? !0 : void 0,
+        "data-pressed": f || void 0,
+        "data-hovered": y || void 0,
+        "data-focus-visible": p || void 0,
+        "data-selected": n,
+        "aria-busy": e,
+        children: [
+          a && !e && /* @__PURE__ */ o(
+            D,
+            {
+              src: n ? `${a}Filled` : `${a}Outlined`,
+              role: "presentation",
+              className: h(),
+              size: 20
+            }
+          ),
+          e ? /* @__PURE__ */ c(N, { children: [
+            /* @__PURE__ */ o(H, { label: "Loading", size: "small", color: "inherit" }),
+            /* @__PURE__ */ o("span", { className: "uy:sr-only", children: b })
+          ] }) : /* @__PURE__ */ o("span", { className: B(), children: b })
+        ]
+      }
+    );
+  }
+);
+V.displayName = "SelectableButton";
+export {
+  V as SelectableButton,
+  T as selectableButton
+};

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

@@ -0,0 +1,61 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { Schema } from '../../hooks/use-form.types.js';
+import { SelectableButtonGroupProps } from '../selectable-button-group/SelectableButtonGroup.js';
+import { LabelProps } from '../label/Label.js';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the field. */
+    label: string;
+    /** The required variant for the label. */
+    requiredVariant?: LabelProps['requiredVariant'];
+    /** Helper text to display below the field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the field. */
+    contextualLink?: ReactNode;
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+}
+export type SelectableButtonGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName> & Omit<SelectableButtonGroupProps, 'isDisabled' | 'children'> & {
+    /** The options to render as SelectableButton children. */
+    children: ReactNode;
+};
+type SelectableButtonGroupFieldComponent = (<TSchema extends Schema>(props: SelectableButtonGroupFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
+    ref?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `SelectableButtonGroupField` component integrates the SelectableButtonGroup with Unity's form system, providing validation, accessibility, and helper/feedback text.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   choice: z.string()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <SelectableButtonGroupField<typeof schema>
+ *         name="choice"
+ *         label="Choose an option"
+ *       >
+ *         <SelectableButton value="a">A</SelectableButton>
+ *         <SelectableButton value="b">B</SelectableButton>
+ *       </SelectableButtonGroupField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @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/SelectableButtonGroupField.js

@@ -0,0 +1,45 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { forwardRef as F } from "react";
+import { useFormContext as s } from "react-hook-form";
+import { FormField as b } from "../form-field/FormField.js";
+import { FormControl as x } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as B } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as G } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as S } from "../form-field/parts/FormLabel.js";
+import { SelectableButtonGroup as h } from "../selectable-button-group/SelectableButtonGroup.js";
+function y({
+  name: t,
+  label: e,
+  helperText: r,
+  contextualLink: m,
+  isDisabled: l,
+  requiredVariant: i,
+  children: n,
+  ...c
+}, p) {
+  const { control: u, watch: a } = s(), f = a(t);
+  return /* @__PURE__ */ d(b, { control: u, name: t, ref: p, children: [
+    /* @__PURE__ */ o(S, { requiredVariant: i, children: e }),
+    r && /* @__PURE__ */ o(G, { children: r }),
+    /* @__PURE__ */ o(x, { className: "uy:my-50", children: /* @__PURE__ */ o(
+      h,
+      {
+        value: f,
+        isDisabled: l,
+        ...c,
+        children: n
+      }
+    ) }),
+    /* @__PURE__ */ o(B, {}),
+    m
+  ] });
+}
+const j = F(
+  function(e, r) {
+    return y(e, r);
+  }
+);
+j.displayName = "SelectableButtonGroupField";
+export {
+  j as 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/Content.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type ContentProps = {
+    children: ReactNode;
+};
+export declare const content: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const Content: ({ children }: ContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { uyTv as e } from "@payfit/unity-themes";
+const y = e({
+  base: ["uy:flex uy:flex-col", "uy:py-200 uy:pl-50 uy:pr-300"]
+}), r = ({ children: o }) => /* @__PURE__ */ t("div", { className: y(), children: o });
+export {
+  r as Content,
+  y as content
+};

package/dist/esm/components/selectable-card/internals/Description.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type DescriptionProps = {
+    children: ReactNode;
+};
+export declare const description: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const Description: ({ children }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+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-50", "uy:line-clamp-2"]
+}), a = ({ children: o }) => /* @__PURE__ */ t(i, { className: m(), variant: "body", children: o });
+export {
+  a as Description,
+  m as description
+};

package/dist/esm/components/selectable-card/internals/Illustration.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type IllustrationProps = {
+    children: ReactNode;
+};
+export declare const illustration: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const Illustration: ({ children }: IllustrationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { uyTv as s } from "@payfit/unity-themes";
+const r = s({
+  base: ["uy:mb-100"]
+}), a = ({ children: o }) => /* @__PURE__ */ t("div", { className: r(), children: o });
+export {
+  a as Illustration,
+  r as illustration
+};

package/dist/esm/components/selectable-card/internals/SelectedIndicator.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type SelectedIndicatorProps = {
+    children: ReactNode;
+};
+export declare const selectedIndicator: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const SelectedIndicator: ({ children }: SelectedIndicatorProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { uyTv as t } from "@payfit/unity-themes";
+const c = t({
+  base: ["uy:my-200 uy:mx-150 uy:p-25"]
+}), s = ({ children: e }) => /* @__PURE__ */ o("div", { className: c(), children: e });
+export {
+  s as SelectedIndicator,
+  c as selectedIndicator
+};

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

@@ -0,0 +1,20 @@
+import { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components/CheckboxGroup';
+export type SelectableCardCheckboxGroupProps = AriaCheckboxGroupProps;
+/**
+ * The `SelectableCardCheckboxGroup` component renders a group of selectable card checkboxes.
+ * Use it to display a set of options where multiple selections are allowed.
+ * @example
+ * ```tsx
+ * import { SelectableCardCheckboxGroup, SelectableCardCheckbox } from '@payfit/unity-components'
+ *
+ * <SelectableCardCheckboxGroup>
+ *   <SelectableCardCheckbox value="option1">Option 1</SelectableCardCheckbox>
+ *   <SelectableCardCheckbox value="option2">Option 2</SelectableCardCheckbox>
+ *   <SelectableCardCheckbox value="option3">Option 3</SelectableCardCheckbox>
+ * </SelectableCardCheckboxGroup>
+ * ```
+ * @see {@link SelectableCardCheckboxGroupProps} for all available props
+ * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardcheckboxgroup--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ */
+declare const SelectableCardCheckboxGroup: import('react').ForwardRefExoticComponent<AriaCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SelectableCardCheckboxGroup };

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

@@ -0,0 +1,16 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { CheckboxGroup as m } from "react-aria-components/CheckboxGroup";
+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",
+    children: o
+  }
+));
+p.displayName = "SelectableCardCheckboxGroup";
+export {
+  p as SelectableCardCheckboxGroup
+};

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