@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.6

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

@@ -1,50 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1 +0,0 @@
-"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

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

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

@@ -1,59 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,127 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,20 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,47 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,20 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,50 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,35 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,31 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,31 +0,0 @@
-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

@@ -1 +0,0 @@
-"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;