@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/select-field/SelectField.d.cts

@@ -0,0 +1,50 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.cjs';
+import { LabelProps } from '../label/Label.cjs';
+import { SelectProps } from '../select/Select.cjs';
+interface SelectFieldProps<TItems extends object, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, Omit<SelectProps<TItems>, 'name' | 'value'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the select field. */
+    label: string;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the text field. */
+    feedbackText?: ReactNode;
+}
+type SelectFieldComponent = (<TItems extends object, TSchema extends Schema>(props: SelectFieldProps<TItems, ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `SelectField` component renders a list of options to select one, it is fully integrated with the `Form` component.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *  vegetable: z.string()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *    <Form action={handleSubmit}>
+ *      <SelectField<typeof schema>
+ *        name="vegetable"
+ *        label="Vegetables"
+ *        >
+ *        <SelectOption id="Cabbage">Cabbage</SelectOption>
+ *        <SelectOption id="Broccoli">Broccoli</SelectOption>
+ *        <SelectOption id="Carrots">Carrots</SelectOption>
+ *        </SelectField>
+ *    </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.
+ */
+declare const SelectField: SelectFieldComponent;
+export { SelectField };

package/dist/cjs/components/selectable-button-group/SelectableButtonGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("react"),o=require("react-aria"),S=require("react-stately"),b=require("tailwind-variants"),y=require("./SelectableButtonGroup.context.cjs"),a=b.tv({base:"uy-flex uy-gap-100"}),c=l.forwardRef((e,s)=>{const t=l.useRef(null),r=S.useToggleGroupState({...e,selectedKeys:e.value,defaultSelectedKeys:e.defaultValue,onSelectionChange:g=>{var n;(n=e.onChange)==null||n.call(e,Array.from(g))}}),{groupProps:i}=o.useToggleButtonGroup(e,r,t),d=a(),{ref:f}=o.mergeProps({ref:t},{ref:s});return u.jsx("div",{...i,className:d,ref:f,"data-dd-privacy":"allow",children:u.jsx(y.SelectableButtonGroupContext.Provider,{value:r,children:e.children})})});c.displayName="SelectableButtonGroup";exports.SelectableButtonGroup=c;exports.selectableButtonGroup=a;

package/dist/cjs/components/selectable-button-group/SelectableButtonGroup.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null);exports.SelectableButtonGroupContext=e;

package/dist/cjs/components/selectable-button-group/SelectableButtonGroup.context.d.cts

@@ -0,0 +1,2 @@
+import { ToggleGroupState } from 'react-stately';
+export declare const SelectableButtonGroupContext: import('react').Context<ToggleGroupState | null>;

package/dist/cjs/components/selectable-button-group/SelectableButtonGroup.d.cts

@@ -0,0 +1,59 @@
+import { AriaToggleButtonGroupProps } from 'react-aria';
+import { Key } from 'react-stately';
+import { VariantProps } from 'tailwind-variants';
+export declare const selectableButtonGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface SelectableButtonGroupProps extends VariantProps<typeof selectableButtonGroup>, Omit<AriaToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'className' | 'style'> {
+    /**
+     * The SelectableButton components to render within the group.
+     * Each child must be a SelectableButton component with a unique value prop.
+     */
+    children: React.ReactNode;
+    /**
+     * The currently selected values in controlled mode.
+     * Use this prop along with onChange to control the selection state externally.
+     * The values should match the value props of the SelectableButton children.
+     */
+    value?: AriaToggleButtonGroupProps['selectedKeys'];
+    /**
+     * The initially selected values in uncontrolled mode.
+     * Use this prop to set default selections without controlling the state.
+     * The values should match the value props of the SelectableButton children.
+     */
+    defaultValue?: AriaToggleButtonGroupProps['defaultSelectedKeys'];
+    /**
+     * Callback fired when the selection changes.
+     * Receives an array of the currently selected values.
+     * Required when using the component in controlled mode.
+     */
+    onChange?: (keys: Key[]) => void;
+}
+/**
+ * A group component that manages the selection state of multiple SelectableButton components.
+ * Supports both single and multiple selection modes with controlled and uncontrolled usage patterns.
+ * @component
+ * @param {SelectableButtonGroupProps} props - Props for configuring the group's behavior and selection mode
+ * @see {@link SelectableButtonGroupProps} for all available props
+ * @example
+ * ```tsx
+ * import { SelectableButtonGroup, SelectableButton } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const [selected, setSelected] = useState(['option1'])
+ *
+ *   return (
+ *     <SelectableButtonGroup
+ *       selectionMode="multiple"
+ *       value={selected}
+ *       onChange={keys => setSelected(keys)}
+ *     >
+ *       <SelectableButton value="option1">First Option</SelectableButton>
+ *       <SelectableButton value="option2">Second Option</SelectableButton>
+ *     </SelectableButtonGroup>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/inputs-selectablebuttongroup--docs) • [Design docs](https://www.payfit.design/24f360409/p/944b5d-selectable-button)
+ */
+declare const SelectableButtonGroup: import('react').ForwardRefExoticComponent<SelectableButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SelectableButtonGroup };

package/dist/cjs/components/selectable-button-group/parts/SelectableButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),i=require("react-aria"),h=require("tailwind-variants"),S=require("../../icon/Icon.cjs"),B=require("../../spinner/Spinner.cjs"),j=require("../SelectableButtonGroup.context.cjs"),c=h.tv({slots:{base:["uy-group uy-border uy-border-solid uy-rounded-75 uy-py-100 uy-flex uy-gap-50 uy-items-center","uy-border-border-form-enabled uy-bg-surface-form-enabled","hover:uy-bg-surface-form-hover hover:uy-border-border-form-hover","active:uy-bg-surface-form-pressed active:uy-border-border-form-pressed","focus-visible:uy-bg-surface-form-focus focus-visible:uy-border-border-form-focus","focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring","data-[pressed=true]:uy-bg-surface-form-pressed data-[pressed=true]:uy-border-border-form-pressed data-[pressed=true]:uy-text-content-form-pressed","data-[selected=true]:uy-bg-surface-form-selected data-[selected=true]:uy-border-border-form-selected data-[selected=true]:uy-text-content-form-selected","disabled:uy-bg-surface-form-disabled disabled:uy-border-border-form-disabled disabled:uy-text-content-form-disabled disabled:uy-cursor-not-allowed","data-[loading=true]:uy-bg-surface-form-disabled data-[loading=true]:uy-border-border-form-disabled data-[loading=true]:uy-text-content-form-disabled data-[loading=true]:uy-cursor-wait"],icon:["uy-p-25","data-[loading=true]:uy-hidden"],label:["uy-typography-action"]},variants:{hasIcon:{true:{base:"uy-pl-100 uy-pr-200"},false:{base:"uy-px-200"}}},defaultVariants:{hasIcon:!1}}),b=o.forwardRef((s,f)=>{const a=o.useRef(null),u=o.useContext(j.SelectableButtonGroupContext);if(!u)throw new Error("SelectableButton must be used within a ToggleButtonGroup component");const{buttonProps:d,isPressed:y,isSelected:l}=i.useToggleButtonGroupItem({id:s.value,...s},u,a),{ref:m}=i.mergeProps({ref:a},{ref:f}),{isDisabled:p=!1,isLoading:r=!1,prefixIcon:t,children:n}=s,{base:g,icon:v,label:x}=c({hasIcon:!!t&&!r});return e.jsxs("button",{"data-dd-privacy":"allow",...d,ref:m,className:g(),disabled:d.disabled||p||r,"data-loading":r?!0:void 0,"data-pressed":y,"data-selected":l,"aria-busy":r,children:[t&&!r&&e.jsx(S.Icon,{src:l?`${t}Filled`:`${t}Outlined`,role:"presentation",className:v(),size:20}),r?e.jsxs(e.Fragment,{children:[e.jsx(B.Spinner,{label:"Loading",size:"small",color:"inherit"}),e.jsx("span",{className:"uy-sr-only",children:n})]}):e.jsx("span",{className:x(),children:n})]})});b.displayName="SelectableButton";exports.SelectableButton=b;exports.selectableButton=c;

package/dist/cjs/components/selectable-button-group/parts/SelectableButton.d.cts

@@ -0,0 +1,127 @@
+import { AriaToggleButtonProps } from 'react-aria';
+import { UnityIcon } from '@payfit/unity-icons';
+import { ToggleButtonProps } from 'react-aria-components';
+export declare const selectableButton: import('tailwind-variants').TVReturnType<{
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}>, {
+    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, import('tailwind-variants/dist/config.js').TVConfig<{
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}>, 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;
+}
+/**
+ * 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/cjs/components/selectable-card/internals/Content.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("tailwind-variants"),t=o.tv({base:["uy-flex uy-flex-col","uy-py-300 uy-pl-150 uy-pr-300"]}),s=({children:e})=>n.jsx("div",{className:t(),children:e});exports.Content=s;exports.content=t;

package/dist/cjs/components/selectable-card/internals/Content.d.cts

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

package/dist/cjs/components/selectable-card/internals/Description.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),s=require("tailwind-variants"),n=require("../../text/Text.cjs"),e=s.tv({base:["uy-mt-200","uy-line-clamp-2"]}),r=({children:t})=>i.jsx(n.Text,{className:e(),variant:"body",children:t});exports.Description=r;exports.description=e;

package/dist/cjs/components/selectable-card/internals/Description.d.cts

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

package/dist/cjs/components/selectable-card/internals/Illustration.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("tailwind-variants"),t=e.tv({base:["uy-mb-300"]}),l=({children:i})=>s.jsx("div",{className:t(),children:i});exports.Illustration=l;exports.illustration=t;

package/dist/cjs/components/selectable-card/internals/Illustration.d.cts

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

package/dist/cjs/components/selectable-card/internals/SelectedIndicator.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),i=require("tailwind-variants"),e=i.tv({base:["uy-py-250 uy-px-150"]}),s=({children:t})=>c.jsx("div",{className:e(),children:t});exports.SelectedIndicator=s;exports.selectedIndicator=e;

package/dist/cjs/components/selectable-card/internals/SelectedIndicator.d.cts

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

package/dist/cjs/components/selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("react"),c=require("react-aria-components"),e=a.forwardRef(({children:r,...o},t)=>u.jsx(c.CheckboxGroup,{ref:t,className:"uy-group uy-flex md:uy-flex-row sm:uy-flex-col uy-gap-150",...o,children:r}));e.displayName="SelectableCardCheckboxGroup";exports.SelectableCardCheckboxGroup=e;

package/dist/cjs/components/selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.d.cts

@@ -0,0 +1,20 @@
+import { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components';
+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/cjs/components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),u=require("react-aria"),b=require("react-aria-components"),x=require("../../../checkbox/parts/CheckboxIndicator.cjs"),h=require("../../../text/Text.cjs"),C=require("../../internals/Content.cjs"),q=require("../../internals/Description.cjs"),j=require("../../internals/Illustration.cjs"),m=require("../../internals/SelectedIndicator.cjs"),I=require("../../selectableCard.variant.cjs"),o=d.forwardRef(({title:n,description:t,illustration:c,...s},a)=>{const{base:i}=I.selectableCard(),l=u.useId();return e.jsx(b.Checkbox,{ref:a,className:({isFocusVisible:r})=>i({isFocusVisible:r}),...s,children:r=>e.jsxs(e.Fragment,{children:[e.jsx(m.SelectedIndicator,{children:e.jsx(x.CheckboxIndicator,{className:"group-hover:uy-border-border-form-hover",...r})}),e.jsxs(C.Content,{children:[c&&e.jsx(j.Illustration,{children:c}),e.jsx(h.Text,{variant:"h3",id:`${l}-label`,children:n}),t&&e.jsx(q.Description,{children:t})]})]})})});o.displayName="SelectableCardCheckbox";exports.SelectableCardCheckbox=o;

package/dist/cjs/components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.d.cts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { selectableCard } from '../../selectableCard.variant.cjs';
+export interface SelectableCardCheckboxProps extends Omit<AriaCheckboxProps, 'children'>, VariantProps<typeof selectableCard> {
+    /**
+     * The title of the selectable card.
+     */
+    title: string;
+    /**
+     * Optional description text to display below the title.
+     */
+    description?: string;
+    /**
+     * Optional illustration to display in the card.
+     */
+    illustration?: ReactNode;
+}
+/**
+ * The `SelectableCardCheckbox` component renders a selectable card with a checkbox.
+ * It is designed to be used within a `SelectableCardCheckboxGroup` component.
+ * @param {string} props.title - The title of the selectable card
+ * @param {string} [props.description] - Optional description text to display below the title
+ * @param {ReactNode} [props.illustration] - Optional illustration to display in the card
+ * @param {string} props.value - The value of the checkbox, used for selection in the checkbox group
+ * @example
+ * ```tsx
+ * import { SelectableCardCheckbox, SelectableCardCheckboxGroup } from '@payfit/unity-components'
+ *
+ * <SelectableCardCheckboxGroup>
+ *   <SelectableCardCheckbox
+ *     title="Option 1"
+ *     description="Description for option 1"
+ *     value="option1"
+ *   />
+ *   <SelectableCardCheckbox
+ *     title="Option 2"
+ *     description="Description for option 2"
+ *     value="option2"
+ *   />
+ * </SelectableCardCheckboxGroup>
+ * ```
+ * @see {@link SelectableCardCheckboxProps} for all available props
+ * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardcheckboxgroup-selectablecardcheckbox--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ */
+declare const SelectableCardCheckbox: import('react').ForwardRefExoticComponent<SelectableCardCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { SelectableCardCheckbox };

package/dist/cjs/components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("react"),d=require("react-aria-components"),p=require("../../../hooks/use-breakpoint-listener.cjs"),r=c.forwardRef(({children:o,value:t,onChange:a,onBlur:i,...s},n)=>{const e=p.useBreakpointListener(),u=e==="xs"||e==="sm";return l.jsx(d.RadioGroup,{...s,orientation:u?"vertical":"horizontal",value:t,onBlur:i,onChange:a,className:"uy-flex md:uy-flex-row sm:uy-flex-col uy-gap-150",ref:n,children:o})});r.displayName="SelectableCardRadioGroup";exports.SelectableCardRadioGroup=r;

package/dist/cjs/components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.d.cts

@@ -0,0 +1,20 @@
+import { RadioGroupProps } from 'react-aria-components';
+export type SelectableCardRadioGroupProps = Omit<RadioGroupProps, 'className' | 'style' | 'isDisabled' | 'isReadOnly'>;
+/**
+ * The `SelectableCardRadioGroup` component renders a group of mutually exclusive selectable card options.
+ * Use it to display a set of choices where only one selection is allowed.
+ * @example
+ * ```tsx
+ * import { SelectableCardRadioGroup, SelectableCardRadio } from '@payfit/unity-components'
+ *
+ * <SelectableCardRadioGroup>
+ *   <SelectableCardRadio value="option1">Option 1</SelectableCardRadio>
+ *   <SelectableCardRadio value="option2">Option 2</SelectableCardRadio>
+ *   <SelectableCardRadio value="option3">Option 3</SelectableCardRadio>
+ * </SelectableCardRadioGroup>
+ * ```
+ * @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)
+ */
+declare const SelectableCardRadioGroup: import('react').ForwardRefExoticComponent<SelectableCardRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SelectableCardRadioGroup };

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

@@ -0,0 +1 @@
+"use strict";const i=require("react/jsx-runtime"),e=require("tailwind-variants"),t=e.tv({base:"",variants:{isSelected:{false:["uy-stroke-border-form-enabled","hover:uy-stroke-border-form-hover","focus-visible:uy-stroke-border-form-focus"]}}}),o=({isSelected:r})=>r?i.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i.jsxs("g",{id:"Radio input",children:[i.jsx("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",strokeWidth:"1.25"}),i.jsx("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"})]})}):i.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i.jsx("g",{id:"Radio input",children:i.jsx("path",{className:t({isSelected:r}),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:"currentColor",strokeWidth:"1.25"})})});o.displayName="RadioIndicator";module.exports=o;

package/dist/cjs/components/selectable-card/selectable-card-radio-group/parts/RadioIndicator.d.cts

@@ -0,0 +1,8 @@
+interface RadioIndocatorProps {
+    isSelected: boolean;
+}
+declare const RadioIndicator: {
+    ({ isSelected }: RadioIndocatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default RadioIndicator;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react-aria-components"),l=require("../../../text/Text.cjs"),d=require("../../internals/Content.cjs"),u=require("../../internals/Description.cjs"),x=require("../../internals/Illustration.cjs"),j=require("../../internals/SelectedIndicator.cjs"),q=require("../../selectableCard.variant.cjs"),b=require("./RadioIndicator.cjs"),i=({title:a,description:t,illustration:n,...c})=>{const{base:s}=q.selectableCard();return e.jsx(o.Radio,{className:({isFocusVisible:r})=>s({isFocusVisible:r}),...c,children:({isSelected:r})=>e.jsxs(e.Fragment,{children:[e.jsx(j.SelectedIndicator,{children:e.jsx(b,{isSelected:r})}),e.jsxs(d.Content,{children:[n&&e.jsx(x.Illustration,{children:n}),e.jsx(l.Text,{variant:"h3",children:a}),t&&e.jsx(u.Description,{children:t})]})]})})};i.displayName="SelectableCardRadio";exports.SelectableCardRadio=i;

package/dist/cjs/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.d.cts

@@ -0,0 +1,50 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { RadioProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { selectableCard } from '../../selectableCard.variant.cjs';
+export interface SelectableCardRadioProps extends Omit<RadioProps, 'children'>, PropsWithChildren<VariantProps<typeof selectableCard>> {
+    /**
+     * The title of the selectable card.
+     */
+    title: string;
+    /**
+     * Optional description text to display below the title.
+     */
+    description?: string;
+    /**
+     * Optional illustration to display in the card.
+     */
+    illustration?: ReactNode;
+}
+/**
+ * The `SelectableCardRadio` component renders a selectable card with a radio button.
+ * It is designed to be used within a `SelectableCardRadioGroup` component.
+ * @param props.title - The title of the selectable card
+ * @param [props.description] - Optional description text to display below the title
+ * @param [props.illustration] - Optional illustration to display in the card
+ * @param props.value - The value of the radio button, used for selection in the radio group
+ * @example
+ * ```tsx
+ * import { SelectableCardRadio, SelectableCardRadioGroup } from '@payfit/unity-components'
+ *
+ * <SelectableCardRadioGroup>
+ *   <SelectableCardRadio
+ *     title="Option 1"
+ *     description="Description for option 1"
+ *     value="option1"
+ *   />
+ *   <SelectableCardRadio
+ *     title="Option 2"
+ *     description="Description for option 2"
+ *     value="option2"
+ *   />
+ * </SelectableCardRadioGroup>
+ * ```
+ * @see {@link SelectableCardRadioProps} for all available props
+ * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardradiogroup-selectablecardradio--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ */
+declare const SelectableCardRadio: {
+    ({ title, description, illustration, ...props }: SelectableCardRadioProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SelectableCardRadio };

package/dist/cjs/components/selectable-card/selectableCard.variant.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),r=e.tv({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-text-content-form-enabled","uy-bg-surface-form-enabled","hover:uy-border-border-form-hover","data-[selected]:uy-border-border-form-active","data-[invalid]:uy-border-border-form-error data-[invalid]:uy-bg-surface-form-error","focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"]},variants:{isFocusVisible:{true:"uy-outline-none uy-ring-2 uy-ring-offset-2 uy-ring-utility-focus-ring"}}});exports.selectableCard=r;

package/dist/cjs/components/selectable-card/selectableCard.variant.d.cts

@@ -0,0 +1,35 @@
+export declare const selectableCard: import('tailwind-variants').TVReturnType<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    base: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    isFocusVisible: {
+        true: string;
+    };
+}>, {
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    base: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    base: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    isFocusVisible: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/cjs/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=require("react"),m=require("react-hook-form"),b=require("../form-field/FormField.cjs"),C=require("../form-field/parts/FormControl.cjs"),p=require("../form-field/parts/FormFeedbackText.cjs"),h=require("../form-field/parts/FormHelperText.cjs"),j=require("../form-field/parts/FormLabel.cjs"),q=require("../selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.cjs"),o=F.forwardRef(({children:c,name:r,isRequired:l,requiredVariant:t,label:s,helperText:a,feedbackText:i,...n},d)=>{const{control:u}=m.useFormContext(),x={isRequired:l};return e.jsxs(b.FormField,{...x,control:u,name:r,className:"uy-gap-150",children:[e.jsxs("div",{className:"uy-flex-col uy-gap-50",children:[e.jsx(j.FormLabel,{requiredVariant:t,children:s}),e.jsx(h.FormHelperText,{children:a})]}),e.jsx(C.FormControl,{children:e.jsx(q.SelectableCardCheckboxGroup,{ref:d,name:r,...n,children:c})}),e.jsx(p.FormFeedbackText,{children:i})]})});o.displayName="SelectableCardCheckboxGroupField";exports.SelectableCardCheckboxGroupField=o;

package/dist/cjs/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.d.cts

@@ -0,0 +1,31 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { LabelProps } from '../label/Label.cjs';
+export interface SelectableCardCheckboxGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the radio button group. */
+    label: string;
+    /** Helper text to display below the radio button group. */
+    helperText?: ReactNode;
+    /** Feedback text to display, typically used for error messages. */
+    feedbackText?: ReactNode;
+}
+/**
+ * The `SelectableCardCheckboxGroupField` component renders a group of selectable card checkboxes within a form field.
+ * Use it to collect multiple selections from users in a visually appealing and accessible manner.
+ * @example
+ * ```tsx
+ * import { SelectableCardCheckboxGroupField, SelectableCardCheckbox } from '@payfit/unity-components'
+ *
+ * <SelectableCardCheckboxGroupField name="options" label="Choose options">
+ *   <SelectableCardCheckbox value="option1">Option 1</SelectableCardCheckbox>
+ *   <SelectableCardCheckbox value="option2">Option 2</SelectableCardCheckbox>
+ *   <SelectableCardCheckbox value="option3">Option 3</SelectableCardCheckbox>
+ * </SelectableCardCheckboxGroupField>
+ * ```
+ * @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)
+ */
+declare const SelectableCardCheckboxGroupField: import('react').ForwardRefExoticComponent<SelectableCardCheckboxGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
+export { SelectableCardCheckboxGroupField };

package/dist/cjs/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),x=require("react-hook-form"),p=require("../form-field/FormField.cjs"),b=require("../form-field/parts/FormControl.cjs"),j=require("../form-field/parts/FormFeedbackText.cjs"),q=require("../form-field/parts/FormHelperText.cjs"),C=require("../form-field/parts/FormLabel.cjs"),R=require("../selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.cjs"),o=m.forwardRef(({children:l,name:r,isRequired:t,requiredVariant:c,label:a,helperText:i,feedbackText:s,...d},n)=>{const{control:u}=x.useFormContext(),F={isRequired:t};return e.jsxs(p.FormField,{...F,control:u,name:r,className:"uy-gap-150",children:[e.jsxs("div",{className:"uy-flex-col uy-gap-50",children:[e.jsx(C.FormLabel,{requiredVariant:c,children:a}),e.jsx(q.FormHelperText,{children:i})]}),e.jsx(b.FormControl,{children:e.jsx(R.SelectableCardRadioGroup,{ref:n,name:r,...d,children:l})}),e.jsx(j.FormFeedbackText,{children:s})]})});o.displayName="SelectableCardRadioGroupField";exports.SelectableCardRadioGroupField=o;

package/dist/cjs/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.d.cts

@@ -0,0 +1,31 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { LabelProps } from '../label/Label.cjs';
+export interface SelectableCardRadioGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the radio button group. */
+    label: string;
+    /** Helper text to display below the radio button group. */
+    helperText?: ReactNode;
+    /** Feedback text to display, typically used for error messages. */
+    feedbackText?: ReactNode;
+}
+/**
+ * The `SelectableCardRadioGroupField` component renders a group of mutually exclusive selectable card options within a form field.
+ * Use it to collect a single selection from users in a visually appealing and accessible manner.
+ * @example
+ * ```tsx
+ * import { SelectableCardRadioGroupField, SelectableCardRadio } from '@payfit/unity-components'
+ *
+ * <SelectableCardRadioGroupField name="option" label="Choose an option">
+ *   <SelectableCardRadio value="option1">Option 1</SelectableCardRadio>
+ *   <SelectableCardRadio value="option2">Option 2</SelectableCardRadio>
+ *   <SelectableCardRadio value="option3">Option 3</SelectableCardRadio>
+ * </SelectableCardRadioGroupField>
+ * ```
+ * @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)
+ */
+declare const SelectableCardRadioGroupField: import('react').ForwardRefExoticComponent<SelectableCardRadioGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
+export { SelectableCardRadioGroupField };

package/dist/cjs/components/side-panel/SidePanel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),a=require("react-aria-components"),x=require("tailwind-variants"),h=require("./parts/SidePanelDragIndicator.cjs"),t=x.tv({slots:{overlay:["md:uy-bg-gradient-to-r md:uy-from-grayscale-L12/0 md:uy-to-grayscale-L12/10 md:uy-from-70% md:uy-via-100%","uy-fixed uy-inset-0 uy-isolate","data-[entering]:uy-animate-fade-in data-[exiting]:uy-animate-fade-out"],wrapper:["uy-w-full md:uy-w-[400px]","uy-fixed uy-bottom-0 md:uy-inset-y-200 md:uy-right-200 uy-z-[100]","uy-bg-surface-neutral uy-rounded-t-200 md:uy-rounded-200 uy-shadow-flying","uy-flex uy-flex-col uy-h-[95svh] md:uy-max-h-[calc(100vh-2rem)]","uy-overflow-hidden","data-[entering]:uy-animate-slide-up-fade-in data-[exiting]:uy-animate-slide-down-fade-out md:data-[entering]:uy-animate-slide-right-fade-in md:data-[exiting]:uy-animate-slide-right-fade-out"],content:["uy-flex uy-flex-col uy-h-full uy-overflow-hidden uy-outline-none"]}}),i=g.forwardRef(({children:d,isOpen:n,onOpenChange:u,defaultOpen:r,isDismissable:l=!0,isKeyboardDismissDisabled:o=!1,...y},s)=>{const{overlay:m,wrapper:c,content:f}=t();return e.jsx(a.ModalOverlay,{className:m(),isOpen:n,onOpenChange:u,defaultOpen:r,isDismissable:l,isKeyboardDismissDisabled:o,children:e.jsxs(a.Modal,{"data-dd-privacy":"allow",...y,ref:s,className:c(),"data-unity-side-panel":!0,children:[e.jsx(h.SidePanelDragIndicator,{}),e.jsx(a.Dialog,{className:f(),children:d})]})})});i.displayName="SidePanel";exports.SidePanel=i;exports.sidePanel=t;