@payfit/unity-components 0.0.0-alpha.8 → 1.0.0

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

@@ -0,0 +1,40 @@
+import { jsxs as e, Fragment as i, jsx as t } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { SearchField as m, Input as c } from "react-aria-components";
+import { useIntl as y } from "react-intl";
+import { tv as d } from "tailwind-variants";
+import { CircularIconButton as p } from "../../icon-button/CircularIconButton.js";
+import { Icon as f } from "../../icon/Icon.js";
+const b = d({
+  slots: {
+    base: "uy:flex uy:gap-100 uy:border uy:border-solid uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-border-form-active uy:text-content-form-active uy:mt-100 uy:mb-100 uy:ml-100 uy:mr-100 uy:typography-body",
+    input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
+    button: "uy:text-content-neutral-enabled",
+    separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mt-100"
+  }
+}), h = l((g, r) => {
+  const o = y(), { base: a, input: u, button: n, separator: s } = b();
+  return /* @__PURE__ */ e(i, { children: [
+    /* @__PURE__ */ e(m, { className: a(), ref: r, "data-dd-privacy": "mask", children: [
+      /* @__PURE__ */ t(f, { src: "MagnifyingGlassOutlined", "aria-hidden": "true" }),
+      /* @__PURE__ */ t(c, { className: u() }),
+      /* @__PURE__ */ t(
+        p,
+        {
+          title: o.formatMessage({
+            id: "unity:component:common:clear:title",
+            defaultMessage: "Clear"
+          }),
+          className: n(),
+          icon: "CloseOutlined",
+          asElement: "button"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { "aria-hidden": "true", className: s() })
+  ] });
+});
+h.displayName = "SearchInput";
+export {
+  h as SearchInput
+};

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

@@ -0,0 +1,96 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { Button as b, SelectValue as m } from "react-aria-components";
+import { useIntl as p } from "react-intl";
+import { tv as v } from "tailwind-variants";
+import { Icon as a } from "../../icon/Icon.js";
+const x = v({
+  slots: {
+    base: "uy:flex uy:flex-row uy:gap-100 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-solid uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:outline-none uy:border",
+    selectValue: "uy:whitespace-nowrap uy:text-ellipsis uy:typography-body uy:flex-grow uy:text-left uy:data-[placeholder]:text-content-neutral-lowest",
+    iconWrapper: "uy:flex uy:gap-50",
+    icon: ""
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        selectValue: "uy:text-content-form-disabled"
+      }
+    },
+    isInvalid: {
+      true: {
+        base: "uy:border-border-form-error uy:bg-surface-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy:border-border-form-disabled",
+        selectValue: "uy:text-content-form-readonly",
+        icon: "uy:text-content-primary-disabled"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isDisabled: !1,
+      isInvalid: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:bg-surface-form-enabled uy:hover:bg-surface-form-hover uy:active:border-border-form-active",
+        selectValue: "uy:text-content-neutral-enabled uy:hover:text-content-neutral-hover",
+        icon: "uy:text-content-neutral-low uy:hover:text-content-form-hover"
+      }
+    }
+  ],
+  defaultVariants: {
+    isDisabled: !1,
+    isInvalid: !1,
+    isReadOnly: !1
+  }
+}), g = f(
+  ({ isDisabled: r, isInvalid: t, isReadOnly: l, isOpen: s }, u) => {
+    const n = p(), { base: i, selectValue: d, iconWrapper: c, icon: y } = x({
+      isDisabled: r,
+      isInvalid: t,
+      isReadOnly: l
+    });
+    return /* @__PURE__ */ o(
+      b,
+      {
+        "data-dd-privacy": "mask",
+        className: i(),
+        ref: u,
+        isDisabled: r,
+        children: [
+          /* @__PURE__ */ e(m, { className: d() }),
+          /* @__PURE__ */ o("div", { className: c(), children: [
+            t && /* @__PURE__ */ e(
+              a,
+              {
+                src: "WarningCircleOutlined",
+                color: "content.form.invalid",
+                alt: n.formatMessage({
+                  id: "unity:component:form-field:form-input:error:alt",
+                  defaultMessage: "Error"
+                })
+              }
+            ),
+            /* @__PURE__ */ e(
+              a,
+              {
+                className: y(),
+                "aria-hidden": "true",
+                src: s ? "CaretUpOutlined" : "CaretDownOutlined"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+g.displayName = "SelectButton";
+export {
+  g as SelectButton
+};

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

@@ -0,0 +1,13 @@
+import { default as React, ReactNode } from 'react';
+import { ListBoxItemProps } from 'react-aria-components';
+/**
+ * SelectOption component for displaying options in a Select dropdown.
+ * @note The `textValue` prop (inherited from ListBoxItemProps) is used for searching when the content
+ * of the option is more complex than a simple string (e.g., contains components
+ * like Avatar, Flex, etc.). Providing this prop enables search functionality
+ * for complex content options.
+ */
+declare const SelectOption: React.ForwardRefExoticComponent<Omit<ListBoxItemProps<object>, "children"> & {
+    children: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { SelectOption };

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

@@ -0,0 +1,64 @@
+import { jsx as e, jsxs as d, Fragment as i } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { ListBoxItem as f } from "react-aria-components";
+import { tv as m } from "tailwind-variants";
+import { Icon as p } from "../../icon/Icon.js";
+import { SelectOptionProvider as b } from "./SelectOption.context.js";
+const x = m({
+  base: "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none",
+  variants: {
+    isFocusVisible: {
+      true: "uy:outline-offset-2 uy:outline-2 uy:outline-solid uy:outline-utility-focus-ring"
+    },
+    isHovered: {
+      true: "uy:bg-surface-neutral-hover uy:text-content-neutral"
+    },
+    isPressed: {
+      true: "uy:bg-surface-neutral-pressed uy:text-content-neutral-pressed"
+    },
+    isSelected: {
+      true: "uy:bg-surface-neutral-active uy:text-content-neutral-active"
+    },
+    isDisabled: {
+      true: "uy:text-content-neutral-disabled"
+    }
+  },
+  compoundVariants: [
+    {
+      isFocusVisible: !1,
+      isHovered: !1,
+      isPressed: !1,
+      isSelected: !1,
+      isDisabled: !1,
+      class: "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled"
+    }
+  ]
+}), v = y(
+  (s, l) => {
+    const { children: u, isDisabled: r, textValue: n } = s;
+    return /* @__PURE__ */ e(
+      f,
+      {
+        ...s,
+        ref: l,
+        "data-dd-privacy": "mask",
+        textValue: n,
+        className: ({ isHovered: t, isPressed: o, isFocusVisible: a, isSelected: c }) => x({
+          isHovered: t,
+          isPressed: o,
+          isFocusVisible: a,
+          isSelected: c,
+          isDisabled: r
+        }),
+        children: ({ isSelected: t }) => /* @__PURE__ */ e(b, { isDisabled: r, children: t ? /* @__PURE__ */ d("div", { className: "uy:flex uy:justify-between", children: [
+          /* @__PURE__ */ e("div", { className: "uy:flex uy:flex-col", children: /* @__PURE__ */ e(i, { children: u }) }),
+          /* @__PURE__ */ e(p, { src: "CheckOutlined" })
+        ] }) : /* @__PURE__ */ e(i, { children: u }) })
+      }
+    );
+  }
+);
+v.displayName = "SelectOption";
+export {
+  v as SelectOption
+};

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 uy:last: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.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/select-field/test-utils.d.ts

@@ -0,0 +1,12 @@
+import { PlayCtx } from '../../types/testing.js';
+/**
+ * Factory to get select testing utils
+ * @param context the story context
+ */
+export declare const getTestingUtilsSelect: (context: PlayCtx) => {
+    selectOption: ({ labelText, optionName, container, }: {
+        labelText: string;
+        optionName: string;
+        container?: HTMLElement;
+    }) => Promise<void>;
+};

package/dist/esm/components/select-field/test-utils.js

@@ -0,0 +1,26 @@
+import { within as o, userEvent as t, screen as s } from "storybook/test";
+const w = (n) => ({ selectOption: async ({
+  labelText: e,
+  optionName: a,
+  container: i = n.canvasElement
+}) => {
+  await n.step(
+    `Select option "${a}" in "${e}"`,
+    async () => {
+      const c = o(i).getByLabelText(e, {
+        exact: !1
+      });
+      if (!c)
+        throw new Error(`Select not found for label ${e}`);
+      await t.click(c, { delay: 100 }), await t.click(
+        s.getByRole("option", { name: a }),
+        {
+          delay: 100
+        }
+      ), await t.tab({ delay: 100 });
+    }
+  );
+} });
+export {
+  w as getTestingUtilsSelect
+};

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

@@ -0,0 +1,6 @@
+import { ToggleGroupState } from 'react-stately';
+export interface SelectableButtonGroupContextValue {
+    state: ToggleGroupState;
+    isInvalid?: boolean;
+}
+export declare const SelectableButtonGroupContext: import('react').Context<SelectableButtonGroupContextValue | null>;

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

@@ -0,0 +1,65 @@
+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", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:gap-100", unknown, unknown, undefined>>;
+export interface SelectableButtonGroupProps extends VariantProps<typeof selectableButtonGroup>, Omit<AriaToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | '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;
+    /**
+     * Marks the group and all contained buttons as invalid, applying error styles.
+     * Use this to indicate a validation error for the group.
+     */
+    isInvalid?: boolean;
+    className?: string;
+}
+/**
+ * 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,41 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as d, useRef as m } from "react";
+import { useToggleButtonGroup as f, mergeProps as s } from "react-aria";
+import { useToggleGroupState as g } from "react-stately";
+import { tv as v } from "tailwind-variants";
+import { SelectableButtonGroupContext as y } from "./SelectableButtonGroup.context.js";
+const G = v({
+  base: "uy:flex uy:gap-100"
+}), S = d((e, r) => {
+  const t = m(null), a = g({
+    ...e,
+    selectedKeys: e.value,
+    defaultSelectedKeys: e.defaultValue,
+    onSelectionChange: (c) => {
+      var l;
+      (l = e.onChange) == null || l.call(e, Array.from(c));
+    }
+  }), { groupProps: n } = f(e, a, t), i = G({ className: e.className }), { ref: u } = s({ ref: t }, { ref: r });
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ...n,
+      className: i,
+      ref: u,
+      "data-dd-privacy": "allow",
+      "aria-invalid": e.isInvalid,
+      children: /* @__PURE__ */ o(
+        y.Provider,
+        {
+          value: { state: a, isInvalid: e.isInvalid },
+          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,110 @@
+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;
+        };
+    };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, undefined, {
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, undefined, unknown, unknown, undefined>>;
+type IconName<T extends string> = T extends `${infer Base}${'Filled' | 'Outlined'}` ? Base : T;
+export interface SelectableButtonProps extends Omit<AriaToggleButtonProps, 'id' | 'className' | 'style'> {
+    /**
+     * A unique identifier for the button that will be used as its selection value.
+     * This value must be unique within the SelectableButtonGroup.
+     */
+    value: NonNullable<ToggleButtonProps['id']>;
+    /**
+     * Optional icon to display before the button's text content.
+     * The icon will automatically switch between outlined and filled variants based on selection state.
+     * Specify the base name of the icon without the 'Filled' or 'Outlined' suffix.
+     */
+    prefixIcon?: IconName<UnityIcon>;
+    /**
+     * Set to true to show a loading spinner and disable interaction.
+     * Use this when the button's action requires asynchronous processing.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Customize the style
+     */
+    className?: string;
+}
+/**
+ * A toggleable button that works as part of a SelectableButtonGroup to create single or multiple choice selections.
+ * Provides visual feedback for selection state and supports icons for enhanced visual hierarchy.
+ * @component
+ * @param {SelectableButtonProps} props - Props for configuring the button's behavior and appearance
+ * @see {@link SelectableButtonProps} for all available props
+ * @example
+ * ```tsx
+ * import { SelectableButtonGroup, SelectableButton } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <SelectableButtonGroup selectionMode="single" defaultValue={['morning']}>
+ *       <SelectableButton value="morning">
+ *         Morning
+ *       </SelectableButton>
+ *       <SelectableButton value="afternoon" prefixIcon="Sun">
+ *         Afternoon
+ *       </SelectableButton>
+ *     </SelectableButtonGroup>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](mdc:components/selectable-button-group/parts/SelectableButton) • [Design docs](mdc:design/components/selectable-button-group)
+ */
+declare const SelectableButton: import('react').ForwardRefExoticComponent<SelectableButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { SelectableButton };