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

package/dist/esm/components/multi-select/parts/MultiSelectButton.mjs

@@ -0,0 +1,160 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { memo as j, forwardRef as E, useContext as A, useMemo as D } from "react";
+import { useSelectContext as K, useStoreState as $, Select as k } from "@ariakit/react";
+import { useId as L } from "react-aria";
+import { useIntl as R } from "react-intl";
+import { tv as U } from "tailwind-variants";
+import { Badge as W } from "../../badge/Badge.mjs";
+import { CircularIconButton as q } from "../../icon-button/CircularIconButton.mjs";
+import { Icon as p } from "../../icon/Icon.mjs";
+import { Spinner as F } from "../../spinner/Spinner.mjs";
+import { MultiSelectContext as G } from "../Multiselect.context.mjs";
+const H = U({
+  slots: {
+    base: "uy-h-500 uy-flex uy-items-center uy-justify-between uy-py-100 uy-px-150 uy-w-full uy-border uy-border-solid uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:not([disabled]):uy-border-border-form-active !uy-pointer-events-auto",
+    inputValue: "uy-flex-1 uy-typography-body uy-text-content-form-enabled uy-text-left uy-line-clamp-1",
+    state: "uy-grow-0 uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest uy-inline-flex uy-gap-50 uy-items-center uy-px-100",
+    suffix: ""
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "uy-bg-surface-form-disabled uy-cursor-not-allowed uy-border-border-form-disabled uy-text-content-form-disabled",
+        inputValue: "!uy-text-content-form-disabled",
+        state: "uy-text-content-form-disabled",
+        suffix: "uy-text-content-form-disabled"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy-bg-surface-form-disabled uy-cursor-not-allowed uy-border-border-form-disabled",
+        inputValue: "uy-text-content-form-disabled",
+        state: "uy-text-content-form-disabled",
+        suffix: "uy-text-content-form-disabled"
+      }
+    },
+    isInvalid: {
+      true: {
+        base: "uy-bg-surface-form-error uy-border-border-form-error",
+        inputValue: "uy-text-content-form-error",
+        state: "uy-text-content-form-error",
+        suffix: "uy-text-content-form-error"
+      }
+    },
+    isEmpty: {
+      true: {
+        inputValue: "uy-text-content-neutral-lowest"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInvalid: !1,
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy-border-border-form-enabled uy-bg-surface-form-enabled",
+        inputValue: "uy-text-content-form-enabled uy-bg-surface-form-enabled",
+        state: "uy-text-content-neutral-disabled",
+        suffix: "uy-border-border-form-enabled uy-text-content-form-enabled"
+      }
+    }
+  ]
+});
+function J({
+  isDisabled: r,
+  isReadOnly: t,
+  isLoading: d,
+  isInvalid: n,
+  placeholder: u,
+  selectedItems: g,
+  renderValue: m,
+  onClearButtonPress: i,
+  ...h
+}, w) {
+  const f = L(), s = R(), S = K(), M = $(S, "open"), y = A(G), l = y.maxVisibleItems ?? 0, a = y.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(g), { base: I, inputValue: v, state: C, suffix: V } = H({
+    isDisabled: !!r,
+    isReadOnly: !!t,
+    isInvalid: !!n,
+    isEmpty: a.size === 0
+  }), b = Math.max(
+    o.length - l,
+    0
+  ), N = a.size > 0 && !r && !t && !d, B = D(() => {
+    if (o.length === 0) return u;
+    const O = o.slice(0, l), z = new Set(O);
+    return m(z);
+  }, [o, l, m, u]);
+  return /* @__PURE__ */ c(
+    k,
+    {
+      ...h,
+      ref: w,
+      className: I(),
+      disabled: r || t,
+      "aria-invalid": n,
+      "aria-readonly": t,
+      "aria-labelledby": `${f}-select-button-label`,
+      children: [
+        /* @__PURE__ */ e("span", { id: `${f}-select-button-label`, className: v(), children: a.size > 0 ? B : u }),
+        /* @__PURE__ */ c("div", { className: C(), children: [
+          d && /* @__PURE__ */ e(
+            F,
+            {
+              color: "inherit",
+              size: "small",
+              label: s.formatMessage({
+                id: "unity:component:form-field:form-input:spinner:label",
+                defaultMessage: "Loading"
+              })
+            }
+          ),
+          n && /* @__PURE__ */ e(
+            p,
+            {
+              src: "WarningCircleOutlined",
+              color: "content.form.invalid",
+              alt: s.formatMessage({
+                id: "unity:component:form-field:form-input:error:alt",
+                defaultMessage: "Error"
+              })
+            }
+          ),
+          b > 0 && /* @__PURE__ */ c(W, { variant: "numeric", children: [
+            "+",
+            b
+          ] }),
+          N && /* @__PURE__ */ e(
+            q,
+            {
+              title: s.formatMessage({
+                id: "unity:component:form-field:form-input:clear:title",
+                defaultMessage: "Clear"
+              }),
+              className: "uy-text-content-neutral-enabled",
+              icon: "CloseOutlined",
+              onPress: () => {
+                i == null || i();
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          p,
+          {
+            color: "inherit",
+            className: V(),
+            src: M ? "CaretUpOutlined" : "CaretDownOutlined",
+            role: "presentation"
+          }
+        )
+      ]
+    }
+  );
+}
+const x = j(E(J));
+x.displayName = "MultiselectButton";
+const ne = x;
+export {
+  ne as MultiSelectButton
+};

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.d.mts

@@ -0,0 +1,69 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+/**
+ * Base props for both static and dynamic MultiSelectOptGroup variants
+ */
+type BaseOptGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The label text displayed at the top of the group */
+    label: string;
+    /** Whether to show a separator line after the group */
+    withSeparator?: boolean;
+};
+/**
+ * Props for the dynamic API of MultiSelectOptGroup
+ * @template T - The type of items in the group
+ */
+export interface DynamicMultiSelectOptGroup<T> extends BaseOptGroupProps {
+    /** Array of items to render as options within the group */
+    items: T[];
+    /** Render function that converts each item into a MultiSelectOption */
+    children: (item: T) => React.JSX.Element;
+}
+/**
+ * Props for the static API of MultiSelectOptGroup
+ */
+export interface StaticMultiSelectOptGroup extends BaseOptGroupProps {
+    /** Not used in static API */
+    items?: never;
+    /** Static MultiSelectOption components to render within the group */
+    children: ReactNode;
+}
+/**
+ * Combined props type for MultiSelectOptGroup
+ * @template T - The type of items when using dynamic API
+ */
+export type MultiSelectOptGroupProps<T = unknown> = DynamicMultiSelectOptGroup<T> | StaticMultiSelectOptGroup;
+/**
+ * Groups related options within a `MultiSelect` component.
+ *
+ * This component provides two APIs for grouping options:
+ * 1. Static API - Directly nest MultiSelectOption components
+ * 2. Dynamic API - Provide an array of items and a render function for dynamic items
+ * @example
+ * ```tsx
+ * // Static API
+ * <MultiSelectOptGroup label="Fruits" withSeparator>
+ *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ *   <MultiSelectOption value="banana">Banana</MultiSelectOption>
+ * </MultiSelectOptGroup>
+ *
+ * // Dynamic API
+ * <MultiSelectOptGroup
+ *   label="Fruits"
+ *   items={fruits}
+ *   withSeparator
+ * >
+ *   {fruit => (
+ *     <MultiSelectOption value={fruit.id}>
+ *       {fruit.name}
+ *     </MultiSelectOption>
+ *   )}
+ * </MultiSelectOptGroup>
+ * ```
+ * @template T - The type of items when using the dynamic API
+ * @see {@link MultiSelectOption} for the child component API
+ */
+declare function MultiSelectOptGroup<T>(props: MultiSelectOptGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiSelectOptGroup {
+    var displayName: string;
+}
+export { MultiSelectOptGroup };

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.mjs

@@ -0,0 +1,34 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { useContext as h } from "react";
+import { ComboboxGroup as x, ComboboxGroupLabel as C, SelectGroup as G, SelectGroupLabel as S } from "@ariakit/react";
+import { tv as N } from "tailwind-variants";
+import { MultiSelectContext as g } from "../Multiselect.context.mjs";
+const M = N({
+  slots: {
+    base: "uy-flex uy-flex-col uy-bg-surface-neutral",
+    label: "uy-px-150 uy-py-100 uy-typography-body-strong uy-text-content-neutral",
+    separator: "uy-my-100 uy-border-t uy-border-border-neutral"
+  }
+});
+function O(e) {
+  return "items" in e && Array.isArray(e.items) && typeof e.children == "function";
+}
+function j(e) {
+  const c = h(g), { base: i, label: r, separator: n } = M(), { label: o, withSeparator: a, className: m, ...y } = e, p = (b, d) => b.map((f) => d(f)), l = O(e) ? p(e.items, e.children) : e.children, s = {
+    className: i({ className: m }),
+    ...y
+  };
+  return c.isSearchable ? /* @__PURE__ */ u(x, { ...s, children: [
+    /* @__PURE__ */ t(C, { className: r(), children: o }),
+    l,
+    a && /* @__PURE__ */ t("hr", { className: n(), "aria-hidden": !0, role: "presentation" })
+  ] }) : /* @__PURE__ */ u(G, { ...s, children: [
+    /* @__PURE__ */ t(S, { className: r(), children: o }),
+    l,
+    a && /* @__PURE__ */ t("hr", { className: n(), "aria-hidden": !0, role: "presentation" })
+  ] });
+}
+j.displayName = "MultiSelectOptGroup";
+export {
+  j as MultiSelectOptGroup
+};

package/dist/esm/components/multi-select/parts/MultiSelectOption.d.mts

@@ -0,0 +1,20 @@
+import { default as React, ReactNode } from 'react';
+/**
+ * Props for the MultiSelectOption component.
+ * @template T - The type of the value this option represents (string or number)
+ */
+export interface MultiSelectOptionProps<T> {
+    /** The value associated with this option. Must be unique within the MultiSelect */
+    value: T;
+    /** The content to display for this option */
+    children: ReactNode;
+    /** Whether the option is disabled. When true, the option cannot be selected */
+    isDisabled?: boolean;
+    /** Whether the option should receive focus when rendered. Use sparingly */
+    autoFocus?: boolean;
+    /** Additional text displayed below the option to provide more context */
+    helperText?: string;
+}
+export declare const MultiSelectOption: <T>(props: MultiSelectOptionProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/esm/components/multi-select/parts/MultiSelectOption.mjs

@@ -0,0 +1,85 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as p, useContext as b, createElement as x } from "react";
+import { SelectItem as v, ComboboxItem as h, SelectItemCheck as S } from "@ariakit/react";
+import { tv as g } from "tailwind-variants";
+import C from "../../../hooks/use-id.mjs";
+import { CheckboxIndicator as k } from "../../checkbox/parts/CheckboxIndicator.mjs";
+import { MultiSelectContext as I } from "../Multiselect.context.mjs";
+const O = g({
+  slots: {
+    base: [
+      "uy-flex uy-flex-col uy-transition",
+      "uy-w-full uy-px-150 uy-py-100",
+      "uy-rounded-50 uy-cursor-pointer",
+      "hover:uy-bg-surface-neutral-hover",
+      "active:uy-bg-surface-neutral-pressed",
+      "focus-visible:uy-outline focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-2",
+      "data-[active-item=true]:uy-outline data-[active-item=true]:uy-outline-2 data-[active-item=true]:uy-outline-utility-focus-ring data-[active-item=true]:uy-outline-offset-2"
+    ],
+    label: "uy-inline-flex uy-items-center uy-gap-100 uy-text-content-neutral uy-typography-body",
+    helperText: "uy-inline-block uy-typography-body uy-text-content-neutral-low uy-pl-300"
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "!uy-cursor-not-allowed",
+        label: "uy-text-content-neutral-disabled"
+      },
+      false: {
+        base: ""
+      }
+    }
+  }
+});
+function w({
+  isDisabled: i
+}) {
+  return /* @__PURE__ */ e(
+    S,
+    {
+      render: (t) => /* @__PURE__ */ e(
+        k,
+        {
+          isSelected: "children" in t && !!t.children,
+          isDisabled: i
+        }
+      )
+    }
+  );
+}
+function n({
+  value: i,
+  children: t,
+  isDisabled: u,
+  helperText: l,
+  autoFocus: r = !1,
+  ...a
+}, s) {
+  const o = C(), c = b(I), { base: y, label: d, helperText: f } = O({ isDisabled: u });
+  return /* @__PURE__ */ x(
+    v,
+    {
+      ...a,
+      ref: s,
+      id: o,
+      key: o,
+      value: String(i),
+      disabled: u,
+      className: y(),
+      autoFocus: r,
+      focusOnHover: !1,
+      "aria-describedby": l ? `${o}-helper-text` : void 0,
+      render: c.isSearchable ? /* @__PURE__ */ e(h, {}) : void 0
+    },
+    /* @__PURE__ */ m("div", { className: d(), children: [
+      /* @__PURE__ */ e(w, { isDisabled: u }),
+      t
+    ] }),
+    l && /* @__PURE__ */ e("span", { id: `${o}-helper-text`, className: f(), children: l })
+  );
+}
+n.displayName = "MultiSelectOption";
+const R = p(n);
+export {
+  R as MultiSelectOption
+};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.d.mts

@@ -0,0 +1,7 @@
+import { SelectPopoverProps } from '@ariakit/react';
+type MultiSelectPopoverProps = SelectPopoverProps & {
+    onBlur?: () => void;
+};
+declare function MultiSelectPopoverComponent({ children, ...props }: MultiSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectPopover: import('react').MemoExoticComponent<typeof MultiSelectPopoverComponent>;
+export {};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.mjs

@@ -0,0 +1,65 @@
+import { jsx as e, jsxs as r, Fragment as m } from "react/jsx-runtime";
+import { memo as b, useContext as f } from "react";
+import { SelectPopover as v, Combobox as h, ComboboxList as x } from "@ariakit/react";
+import { tv as i } from "tailwind-variants";
+import { Icon as g } from "../../icon/Icon.mjs";
+import { MultiSelectContext as w } from "../Multiselect.context.mjs";
+const S = i({
+  slots: {
+    base: "uy-shadow-floating uy-absolute uy-top-full uy-left-0 uy-w-full uy-rounded-75 uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-overflow-auto uy-max-h-[min(var(--popover-available-height,300px),300px)] uy-outline-none",
+    list: "uy-p-100"
+  }
+}), N = i({
+  slots: {
+    wrapper: "uy-sticky uy-top-0 uy-bg-surface-neutral uy-pt-100 uy-px-100",
+    base: "uy-flex uy-w-full uy-gap-100 uy-h-500 uy-border uy-border-solid uy-rounded-75 uy-py-100 uy-border-border-form-enabled uy-bg-surface-form-enabled uy-px-150 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active",
+    input: "focus-visible:uy-outline-none",
+    divider: "uy-my-100 uy-border-t uy-border-border-neutral"
+  }
+});
+function C({
+  children: t,
+  ...s
+}) {
+  const l = f(w), { base: n, list: u } = S(), { base: a, input: y, wrapper: c, divider: d } = N(), { onBlur: o, ...p } = s;
+  return /* @__PURE__ */ e(
+    v,
+    {
+      portal: !0,
+      sameWidth: !0,
+      unmountOnHide: !0,
+      className: n(),
+      onClose: () => o == null ? void 0 : o(),
+      ...p,
+      children: l.isSearchable ? /* @__PURE__ */ r(m, { children: [
+        /* @__PURE__ */ r("div", { className: c(), children: [
+          /* @__PURE__ */ r("div", { className: a(), children: [
+            /* @__PURE__ */ e(
+              g,
+              {
+                src: "MagnifyingGlassOutlined",
+                color: "content.neutral.lowest",
+                "aria-hidden": !0
+              }
+            ),
+            /* @__PURE__ */ e(
+              h,
+              {
+                autoSelect: !0,
+                placeholder: "Search...",
+                className: y()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("hr", { className: d() })
+        ] }),
+        /* @__PURE__ */ e(x, { className: u(), children: t })
+      ] }) : /* @__PURE__ */ e("div", { className: u(), children: t })
+    }
+  );
+}
+const M = b(C);
+M.displayName = "MultiSelectPopover";
+export {
+  M as MultiSelectPopover
+};

package/dist/esm/components/multi-select-field/MultiSelectField.d.mts

@@ -0,0 +1,59 @@
+import { ForwardedRef, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.mjs';
+import { LabelProps } from '../label/Label.mjs';
+import { MultiSelectProps } from '../multi-select/Multiselect.types.mjs';
+type Key = string | number;
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the multi-select field. */
+    label: string;
+    /** Helper text to display below the multi-select field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the multi-select field. */
+    feedbackText?: ReactNode;
+    /** A contextual link to display below the multi-select field. */
+    contextualLink?: ReactNode;
+}
+type BaseMultiSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> = Omit<MultiSelectProps<TItem, TItemKey, TKeyType>, 'value' | 'defaultValue' | 'onChange' | 'aria-labelledby' | 'aria-label'>;
+export type MultiSelectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TItem = unknown, TItemKey extends keyof TItem = keyof TItem, TKeyType extends TItem[TItemKey] & Key = TItem[TItemKey] & Key> = FieldProps<TFieldValues, TName> & BaseMultiSelectProps<TItem, TItemKey, TKeyType>;
+/**
+ * The `MultiSelectField` component renders a full field that allows selecting multiple items from a dropdown list, and integrates with the `Form` component automatically.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   fruits: z.set(z.string()),
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <MultiSelectField<typeof schema>
+ *         name="fruits"
+ *         label="Select fruits"
+ *       >
+ *         <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ *         <MultiSelectOption value="banana">Banana</MultiSelectOption>
+ *         <MultiSelectOption value="orange">Orange</MultiSelectOption>
+ *       </MultiSelectField>
+ *     </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.
+ * @remarks
+ * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-multiselectfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
+ */
+export declare const MultiSelectField: {
+    <TSchema extends Schema, TItem = unknown>(props: MultiSelectFieldProps<ZodInfer<TSchema>, FieldPath<ZodInfer<TSchema>>, TItem, keyof TItem, TItem[keyof TItem] & Key> & {
+        ref?: ForwardedRef<HTMLButtonElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+};
+export {};

package/dist/esm/components/multi-select-field/MultiSelectField.mjs

@@ -0,0 +1,81 @@
+import { jsxs as V, jsx as t } from "react/jsx-runtime";
+import { forwardRef as P } from "react";
+import { useFormContext as T } from "react-hook-form";
+import { tv as g } from "tailwind-variants";
+import { FormField as L } from "../form-field/FormField.mjs";
+import { FormControl as R } from "../form-field/parts/FormControl.mjs";
+import { FormFeedbackText as j } from "../form-field/parts/FormFeedbackText.mjs";
+import { FormHelperText as k } from "../form-field/parts/FormHelperText.mjs";
+import { FormLabel as q } from "../form-field/parts/FormLabel.mjs";
+import { MultiSelect as u } from "../multi-select/MultiSelect.mjs";
+const v = g({
+  base: "uy-flex uy-flex-col uy-gap-100"
+});
+function w(e, i) {
+  const { control: l, setValue: f } = T(), {
+    name: o,
+    label: p,
+    helperText: n,
+    feedbackText: x,
+    contextualLink: F,
+    isRequired: h,
+    isInvalid: b,
+    isLoading: m,
+    isDisabled: c,
+    isReadOnly: s,
+    requiredVariant: S,
+    children: a,
+    onClearButtonPress: r,
+    ...y
+  } = e, I = {
+    isRequired: h,
+    isInvalid: b,
+    isLoading: m,
+    isDisabled: c,
+    isReadOnly: s
+  }, M = "items" in e && "getItemValue" in e, d = {
+    onClearButtonPress: () => {
+      f(o, /* @__PURE__ */ new Set()), r == null || r();
+    },
+    placeholder: e.placeholder,
+    isSearchable: e.isSearchable,
+    maxVisibleItems: e.maxVisibleItems,
+    isDisabled: c,
+    isReadOnly: s,
+    isLoading: m
+  };
+  return /* @__PURE__ */ V(
+    L,
+    {
+      control: l,
+      name: o,
+      className: v(),
+      ...I,
+      children: [
+        /* @__PURE__ */ t(q, { requiredVariant: S, children: p }),
+        n && /* @__PURE__ */ t(k, { children: n }),
+        /* @__PURE__ */ t(R, { children: M ? (
+          // @ts-expect-error - Type system cannot fully express this but it works correctly at runtime
+          /* @__PURE__ */ t(
+            u,
+            {
+              ...y,
+              ...d,
+              ref: i,
+              children: a
+            }
+          )
+        ) : /* @__PURE__ */ t(u, { ...d, ref: i, children: a }) }),
+        /* @__PURE__ */ t(j, { children: x }),
+        F
+      ]
+    }
+  );
+}
+const C = P(function(i, l) {
+  return w(i, l);
+});
+C.displayName = "MultiSelectField";
+export {
+  C as MultiSelectField
+};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroup.d.mts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { RadioGroupProps } from 'react-aria-components';
+export interface BasedSegmentedButtonGroupProps extends Omit<RadioGroupProps, 'children' | 'style' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'validationBehavior' | 'isRequired' | 'validate' | 'defaultValue'> {
+    /**
+     * The content of the `SegmentedButtonGroup`. Should contain `ToggleButton` components as children.
+     */
+    children: ReactNode;
+}
+export interface UncontrolledSegmentedButtonGroupProps extends BasedSegmentedButtonGroupProps, Required<Pick<RadioGroupProps, 'defaultValue'>> {
+}
+/**
+ * The `SegmentedButtonGroup` component is an accessible control that allows users to select one option from a set of mutually exclusive options.
+ * It's similar to a radio group but styled as connected buttons, providing a more compact and visually distinct selection mechanism.
+ * Use this component when you need to:
+ * - Present a small set of related but mutually exclusive options
+ * - Create a toggle between different views or modes
+ * - Provide a compact alternative to radio buttons or tabs
+ * - Allow users to switch between different states of the same content*
+ * The component supports both controlled and uncontrolled usage patterns.
+ * @see {@link ToggleButton} - The child component used within SegmentedButtonGroup
+ * @see {@link https://react-spectrum.adobe.com/react-aria/useRadioGroup.html|React Aria useRadioGroup} - The underlying hook used for accessibility
+ * @see {@link https://www.payfit.design/24f360409/p/2745fe-segmented-control|Design System Documentation}
+ * @example
+ * Basic usage:
+ * ```tsx
+ * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
+ *
+ * function Example() {
+ *   return (
+ *     <SegmentedButtonGroup>
+ *       <ToggleButton value="option1">Option 1</ToggleButton>
+ *       <ToggleButton value="option2">Option 2</ToggleButton>
+ *       <ToggleButton value="option3">Option 3</ToggleButton>
+ *     </SegmentedButtonGroup>
+ *   )
+ * }
+ * ```
+ */
+declare const SegmentedButtonGroup: {
+    (props: UncontrolledSegmentedButtonGroupProps | BasedSegmentedButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SegmentedButtonGroup };

package/dist/esm/components/segmented-button-group/SegmentedButtonGroups.context.d.mts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { RadioGroupState } from 'react-stately';
+interface SegmentedButtonGroupContextValue {
+    state: RadioGroupState;
+}
+export declare const SegmentedButtonGroupContext: import('react').Context<SegmentedButtonGroupContextValue>;
+export declare function SegmentedButtonGroupProvider({ children, state, }: PropsWithChildren<SegmentedButtonGroupContextValue>): import("react/jsx-runtime").JSX.Element;
+export {};