@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/select/parts/SelectOptionGroup.js

@@ -0,0 +1,26 @@
+import { jsxs as n, Fragment as a, jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { ListBoxSection as c, Header as y, Collection as m, Separator as d } from "react-aria-components";
+import { tv as f } from "tailwind-variants";
+const h = f({
+  slots: {
+    base: "",
+    header: "uy-text-content-neutral-enabled uy-typography-body-strong uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150",
+    separator: "uy-h-[1px] uy-bg-surface-neutral-lowest uy-w-full uy-mb-100 uy-mt-100 last:uy-hidden"
+  }
+}), b = ({ label: r, children: o, items: t }, p) => {
+  const { base: s, header: u, separator: l } = h();
+  return /* @__PURE__ */ n(a, { children: [
+    /* @__PURE__ */ n(c, { ref: p, className: s(), id: r, items: t, children: [
+      /* @__PURE__ */ e(y, { className: u(), children: r }),
+      t ? /* @__PURE__ */ e(m, { items: t, children: o }) : /* @__PURE__ */ e(a, { children: o })
+    ] }),
+    /* @__PURE__ */ e(d, { orientation: "horizontal", className: l() })
+  ] });
+}, x = i(function(o, t) {
+  return b(o, t);
+});
+x.displayName = "SelectOptionGroup";
+export {
+  x as SelectOptionGroup
+};

package/dist/esm/components/select/parts/SelectOptionHelper.d.ts

@@ -0,0 +1,4 @@
+declare const SelectOptionHelper: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { SelectOptionHelper };

package/dist/esm/components/select/parts/SelectOptionHelper.js

@@ -0,0 +1,22 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { tv as n } from "tailwind-variants";
+import { useSelectOptionContext as l } from "./SelectOption.context.js";
+const p = n({
+  base: "uy-typography-body",
+  variants: {
+    isDisabled: {
+      true: "uy-text-content-neutral-disabled",
+      false: "uy-text-content-neutral-low"
+    }
+  }
+}), i = s(
+  ({ children: t }, e) => {
+    const { isDisabled: o } = l(), r = p({ isDisabled: o });
+    return /* @__PURE__ */ a("span", { className: r, ref: e, "data-dd-privacy": "mask", children: t });
+  }
+);
+i.displayName = "SelectOptionHelper";
+export {
+  i as SelectOptionHelper
+};

package/dist/esm/components/select-field/SelectField.d.ts

@@ -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.js';
+import { LabelProps } from '../label/Label.js';
+import { SelectProps } from '../select/Select.js';
+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/esm/components/select-field/SelectField.js

@@ -0,0 +1,65 @@
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { useFormContext as h } from "react-hook-form";
+import { tv as b } from "tailwind-variants";
+import { FormField as j } from "../form-field/FormField.js";
+import { FormControl as C } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as g } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as k } from "../form-field/parts/FormLabel.js";
+import { Select as v } from "../select/Select.js";
+const w = b({
+  base: "uy-flex uy-flex-col uy-gap-100"
+}), H = ({
+  children: t,
+  feedbackText: e,
+  helperText: r,
+  isRequired: l,
+  label: i,
+  name: m,
+  requiredVariant: c,
+  isDisabled: n,
+  isInvalid: f,
+  isReadOnly: p,
+  placeholder: s,
+  items: d,
+  ...F
+}, a) => {
+  const { control: u } = h(), x = {
+    isRequired: l,
+    isInvalid: f,
+    isDisabled: n,
+    isReadOnly: p
+  };
+  return /* @__PURE__ */ y(
+    j,
+    {
+      control: u,
+      name: m,
+      className: w(),
+      ...x,
+      children: [
+        /* @__PURE__ */ o(k, { requiredVariant: c, children: i }),
+        r && /* @__PURE__ */ o(g, { children: r }),
+        /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(
+          v,
+          {
+            ref: a,
+            name: m,
+            placeholder: s,
+            items: d,
+            ...F,
+            children: t
+          }
+        ) }),
+        /* @__PURE__ */ o(N, { children: e })
+      ]
+    }
+  );
+}, I = S(function(e, r) {
+  return H(e, r);
+});
+I.displayName = "SelectField";
+export {
+  I as SelectField
+};

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.context.d.ts

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

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.context.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+const o = t(null);
+export {
+  o as SelectableButtonGroupContext
+};

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

@@ -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/esm/components/selectable-button-group/SelectableButtonGroup.js

@@ -0,0 +1,34 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as m, useRef as d } from "react";
+import { useToggleButtonGroup as i, mergeProps as s } from "react-aria";
+import { useToggleGroupState as g } from "react-stately";
+import { tv as y } from "tailwind-variants";
+import { SelectableButtonGroupContext as v } from "./SelectableButtonGroup.context.js";
+const G = y({
+  base: "uy-flex uy-gap-100"
+}), S = m((e, a) => {
+  const t = d(null), o = g({
+    ...e,
+    selectedKeys: e.value,
+    defaultSelectedKeys: e.defaultValue,
+    onSelectionChange: (f) => {
+      var r;
+      (r = e.onChange) == null || r.call(e, Array.from(f));
+    }
+  }), { groupProps: n } = i(e, o, t), u = G(), { ref: c } = s({ ref: t }, { ref: a });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ...n,
+      className: u,
+      ref: c,
+      "data-dd-privacy": "allow",
+      children: /* @__PURE__ */ l(v.Provider, { value: o, children: e.children })
+    }
+  );
+});
+S.displayName = "SelectableButtonGroup";
+export {
+  S as SelectableButtonGroup,
+  G as selectableButtonGroup
+};

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

@@ -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/esm/components/selectable-button-group/parts/SelectableButton.js

@@ -0,0 +1,99 @@
+import { jsxs as i, jsx as o, Fragment as g } from "react/jsx-runtime";
+import { forwardRef as v, useRef as h, useContext as x } from "react";
+import { useToggleButtonGroupItem as w, mergeProps as B } from "react-aria";
+import { tv as I } from "tailwind-variants";
+import { Icon as S } from "../../icon/Icon.js";
+import { Spinner as N } from "../../spinner/Spinner.js";
+import { SelectableButtonGroupContext as G } from "../SelectableButtonGroup.context.js";
+const P = I({
+  // add the component styles
+  slots: {
+    base: [
+      "uy-group uy-border uy-border-solid uy-rounded-75 uy-py-100 uy-flex uy-gap-50 uy-items-center",
+      // default background and border
+      "uy-border-border-form-enabled uy-bg-surface-form-enabled",
+      // pseudo-states
+      "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",
+      // Pressed
+      "data-[pressed=true]:uy-bg-surface-form-pressed data-[pressed=true]:uy-border-border-form-pressed data-[pressed=true]:uy-text-content-form-pressed",
+      // selected
+      "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
+      "disabled:uy-bg-surface-form-disabled disabled:uy-border-border-form-disabled disabled:uy-text-content-form-disabled disabled:uy-cursor-not-allowed",
+      // Loading
+      "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
+  }
+}), R = v(
+  (t, n) => {
+    const s = h(null), a = x(G);
+    if (!a)
+      throw new Error(
+        "SelectableButton must be used within a ToggleButtonGroup component"
+      );
+    const { buttonProps: d, isPressed: c, isSelected: u } = w(
+      { id: t.value, ...t },
+      a,
+      s
+    ), { ref: b } = B({ ref: s }, { ref: n }), {
+      isDisabled: f = !1,
+      isLoading: e = !1,
+      prefixIcon: r,
+      children: l
+    } = t, { base: y, icon: m, label: p } = P({
+      hasIcon: !!r && !e
+    });
+    return /* @__PURE__ */ i(
+      "button",
+      {
+        "data-dd-privacy": "allow",
+        ...d,
+        ref: b,
+        className: y(),
+        disabled: d.disabled || f || e,
+        "data-loading": e ? !0 : void 0,
+        "data-pressed": c,
+        "data-selected": u,
+        "aria-busy": e,
+        children: [
+          r && !e && /* @__PURE__ */ o(
+            S,
+            {
+              src: u ? `${r}Filled` : `${r}Outlined`,
+              role: "presentation",
+              className: m(),
+              size: 20
+            }
+          ),
+          e ? /* @__PURE__ */ i(g, { children: [
+            /* @__PURE__ */ o(N, { label: "Loading", size: "small", color: "inherit" }),
+            /* @__PURE__ */ o("span", { className: "uy-sr-only", children: l })
+          ] }) : /* @__PURE__ */ o("span", { className: p(), children: l })
+        ]
+      }
+    );
+  }
+);
+R.displayName = "SelectableButton";
+export {
+  R as SelectableButton,
+  P as selectableButton
+};

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[], 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/esm/components/selectable-card/internals/Content.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { tv as e } from "tailwind-variants";
+const n = e({
+  base: ["uy-flex uy-flex-col", "uy-py-300 uy-pl-150 uy-pr-300"]
+}), s = ({ children: o }) => /* @__PURE__ */ t("div", { className: n(), children: o });
+export {
+  s as Content,
+  n 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[], 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/esm/components/selectable-card/internals/Description.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { tv as r } from "tailwind-variants";
+import { Text as i } from "../../text/Text.js";
+const m = r({
+  base: ["uy-mt-200", "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[], 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/esm/components/selectable-card/internals/Illustration.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { tv as s } from "tailwind-variants";
+const r = s({
+  base: ["uy-mb-300"]
+}), a = ({ children: t }) => /* @__PURE__ */ o("div", { className: r(), children: t });
+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[], 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/esm/components/selectable-card/internals/SelectedIndicator.js

@@ -0,0 +1,9 @@
+import { jsx as e } from "react/jsx-runtime";
+import { tv as o } from "tailwind-variants";
+const c = o({
+  base: ["uy-py-250 uy-px-150"]
+}), a = ({ children: t }) => /* @__PURE__ */ e("div", { className: c(), children: t });
+export {
+  a 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';
+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";
+const p = l(({ children: o, ...r }, e) => /* @__PURE__ */ a(
+  m,
+  {
+    ref: e,
+    className: "uy-group uy-flex md:uy-flex-row sm:uy-flex-col uy-gap-150",
+    ...r,
+    children: o
+  }
+));
+p.displayName = "SelectableCardCheckboxGroup";
+export {
+  p as SelectableCardCheckboxGroup
+};