@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/select-list/parts/SelectListEmptyState.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Component displayed when no search results are found
+ * @internal
+ */
+export declare const SelectListEmptyState: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/esm/components/select-list/parts/SelectListEmptyState.js

@@ -0,0 +1,25 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Icon as s } from "@payfit/unity-icons";
+import { FormattedMessage as u } from "react-intl";
+import { Text as t } from "../../text/Text.js";
+const a = () => /* @__PURE__ */ r("div", { className: "uy:flex uy:flex-col uy:gap-200 uy:items-center uy:justify-center uy:h-full uy:py-600", children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      variant: "body",
+      className: "uy:w-500 uy:h-500 uy:bg-surface-neutral-lowest uy:flex uy:items-center uy:justify-center uy:rounded-75",
+      children: /* @__PURE__ */ e(s, { size: 24, src: "MagnifyingGlassOutlined" })
+    }
+  ),
+  /* @__PURE__ */ e(t, { variant: "bodyLarge", children: /* @__PURE__ */ e(
+    u,
+    {
+      id: "unity:component:autocomplete:panel:empty:label",
+      defaultMessage: "No results found"
+    }
+  ) })
+] });
+a.displayName = "SelectListEmptyState";
+export {
+  a as SelectListEmptyState
+};

package/dist/esm/components/select-list/parts/SelectListOptGroup.d.ts

@@ -0,0 +1,118 @@
+import { ListBoxSectionProps } from 'react-aria-components/ListBox';
+export declare const selectListOptGroup: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    label: string;
+    separator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    label: string;
+    separator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    label: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Props for the SelectListOptGroup component.
+ * @template TType - The type of items when using the dynamic API
+ */
+export interface SelectListOptGroupProps<TType extends object> extends ListBoxSectionProps<TType> {
+    /**
+     * The heading text for this group of options. Displayed above the group's options to provide visual and semantic organization.
+     */
+    label: string;
+    /**
+     * Adds a visual separator line below this group to create clear visual boundaries between groups. Set to `true` to enhance visual separation.
+     * @default false
+     */
+    withSeparator?: boolean;
+}
+/**
+ * Organizes related options into labeled sections within a `SelectList` component.
+ * Use this component to group related options together under a common label, improving scannability and organization for users. The component supports both static (directly nested children) and dynamic (items array with render function) APIs, and can optionally display a separator line to create clear visual boundaries between groups.
+ * @param {SelectListOptGroupProps} props - Regular props from React Aria's ListBoxSection, plus label and separator configuration
+ * @example
+ * ```tsx
+ * import { SelectList, SelectListOptGroup, SelectListOption } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const sections = [
+ *     {
+ *       id: 'fruits',
+ *       label: 'Fruits',
+ *       children: [
+ *         { id: 'apple', label: 'Apple' },
+ *         { id: 'banana', label: 'Banana' }
+ *       ]
+ *     },
+ *     {
+ *       id: 'vegetables',
+ *       label: 'Vegetables',
+ *       children: [
+ *         { id: 'carrot', label: 'Carrot' },
+ *         { id: 'lettuce', label: 'Lettuce' }
+ *       ]
+ *     }
+ *   ]
+ *
+ *   return (
+ *     <SelectList items={sections} selectionMode="multiple" value={new Set()} onChange={() => {}}>
+ *       {section => (
+ *         <SelectListOptGroup
+ *           id={section.id}
+ *           label={section.label}
+ *           items={section.children}
+ *           withSeparator
+ *         >
+ *           {item => (
+ *             <SelectListOption id={item.id}>
+ *               {item.label}
+ *             </SelectListOption>
+ *           )}
+ *         </SelectListOptGroup>
+ *       )}
+ *     </SelectList>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use the `label` prop to provide a descriptive heading that clearly identifies the group's category
+ * - Set `withSeparator` to `true` to add a visual separator line below the group for enhanced visual organization
+ * - Supports both static API (directly nest `SelectListOption` components) and dynamic API (provide `items` array with render function)
+ * - This component must be used within a `SelectList` parent component to function properly
+ * - Groups are accessible with proper ARIA semantics for screen readers
+ * @see {@link SelectListOptGroupProps} for all available props
+ * @see {@link SelectListOption} for the child option component
+ * @see {@link SelectList} for the parent component's API
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/select-list/parts GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/data-selectlist-selectlistoptgroup unity-components.payfit.io}
+ */
+declare function SelectListOptGroup<T extends object>(props: SelectListOptGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectListOptGroup {
+    var displayName: string;
+}
+export { SelectListOptGroup };

package/dist/esm/components/select-list/parts/SelectListOptGroup.js

@@ -0,0 +1,31 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { uyTv as p } from "@payfit/unity-themes";
+import { Collection as y } from "react-aria-components/Collection";
+import { Header as c } from "react-aria-components/Header";
+import { ListBoxSection as m } from "react-aria-components/ListBox";
+import { Separator as b } from "react-aria-components/Separator";
+const f = p({
+  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 uy:border-solid"
+  }
+});
+function d(r) {
+  const { base: l, label: s, separator: a } = f(), {
+    label: o,
+    withSeparator: i = !1,
+    children: e,
+    ...u
+  } = r;
+  return /* @__PURE__ */ n(m, { ...u, className: l(), children: [
+    o && /* @__PURE__ */ t(c, { className: s(), children: o }),
+    typeof e == "function" ? /* @__PURE__ */ t(y, { items: r.items, children: e }) : e,
+    i && /* @__PURE__ */ t(b, { className: a() })
+  ] });
+}
+d.displayName = "SelectListOptGroup";
+export {
+  d as SelectListOptGroup,
+  f as selectListOptGroup
+};

package/dist/esm/components/select-list/parts/SelectListOption.d.ts

@@ -0,0 +1,24 @@
+import { default as React, ReactNode } from 'react';
+import { ListBoxItemProps } from 'react-aria-components/ListBox';
+/**
+ * Props for the SelectListOption component.
+ * @template TType - The type of the item this option represents
+ */
+export interface SelectListOptionProps<TType extends object> extends Omit<ListBoxItemProps<TType>, 'ref' | 'className' | 'style'> {
+    /**
+     * The content to display for this option. Typically a text label or rich content.
+     */
+    children: ReactNode;
+    /**
+     * Prevents the option from being selected when set to `true`. Disabled options are visually dimmed and cannot receive focus or interaction.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Supplementary text displayed below the main option label. Use this to provide additional context or description about the option.
+     */
+    helperText?: string;
+}
+export declare const SelectListOption: <T extends object>(props: SelectListOptionProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/esm/components/select-list/parts/SelectListOption.js

@@ -0,0 +1,72 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { ListBoxItem as m } from "react-aria-components/ListBox";
+import x from "../../../hooks/use-id.js";
+import { CheckboxIndicator as v } from "../../checkbox/parts/CheckboxIndicator.js";
+const h = b({
+  slots: {
+    base: [
+      "uy:flex uy:flex-col uy:transition",
+      "uy:w-full uy:px-150 uy:py-100",
+      "uy:rounded-50 uy:cursor-pointer",
+      "uy:hover:bg-surface-neutral-hover",
+      "uy:active:bg-surface-neutral-pressed",
+      "uy:data-[focus-visible]:outline uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:-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 a({
+  children: o,
+  isDisabled: i = !1,
+  textValue: u,
+  helperText: e,
+  ...r
+}, n) {
+  const l = x(), {
+    base: y,
+    label: c,
+    helperText: d
+  } = h({ isDisabled: i });
+  return /* @__PURE__ */ t(
+    m,
+    {
+      "data-dd-privacy": "mask",
+      ...r,
+      className: y(),
+      textValue: u ?? o,
+      "aria-describedby": e ? `${l}-helper-text` : void 0,
+      children: ({ isSelected: p }) => /* @__PURE__ */ s("div", { ref: n, children: [
+        /* @__PURE__ */ s("div", { className: c(), children: [
+          /* @__PURE__ */ t(
+            v,
+            {
+              isSelected: p,
+              isDisabled: i
+            }
+          ),
+          o
+        ] }),
+        e && /* @__PURE__ */ t("span", { id: `${l}-helper-text`, className: d(), children: e })
+      ] })
+    }
+  );
+}
+a.displayName = "SelectListOption";
+const C = f(a);
+export {
+  C as SelectListOption
+};

package/dist/esm/components/select-list/parts/SelectListSearchInput.d.ts

@@ -0,0 +1,2 @@
+declare const SelectListSearchInput: import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>;
+export { SelectListSearchInput };

package/dist/esm/components/select-list/parts/SelectListSearchInput.js

@@ -0,0 +1,42 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { uyTv as s } from "@payfit/unity-themes";
+import { Input as a } from "react-aria-components/Input";
+import { SearchField as c } from "react-aria-components/SearchField";
+import { useIntl as l } from "react-intl";
+import { CircularIconButton as m } from "../../icon-button/CircularIconButton.js";
+import { Icon as y } from "../../icon/Icon.js";
+const p = s({
+  slots: {
+    base: "uy:flex uy:gap-100 uy:items-center uy:transition-colors uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:bg-surface-form-high-enabled uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-2 uy:focus-within:outline-offset-2 uy:text-content-form-active uy:typography-body",
+    input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden"
+  }
+}), f = u((d, e) => {
+  const o = l(), { base: n, input: r } = p();
+  return /* @__PURE__ */ i(c, { className: n(), ref: e, "data-dd-privacy": "mask", children: [
+    /* @__PURE__ */ t(
+      y,
+      {
+        src: "MagnifyingGlassOutlined",
+        role: "presentation",
+        color: "content.neutral.lowest"
+      }
+    ),
+    /* @__PURE__ */ t(a, { className: r() }),
+    /* @__PURE__ */ t(
+      m,
+      {
+        title: o.formatMessage({
+          id: "unity:component:common:clear:title",
+          defaultMessage: "Clear"
+        }),
+        icon: "CloseOutlined",
+        asElement: "button"
+      }
+    )
+  ] });
+});
+f.displayName = "SelectListSearchInput";
+export {
+  f as SelectListSearchInput
+};

package/dist/esm/components/select-list/parts/SelectedItemsSection.d.ts

@@ -0,0 +1,55 @@
+import { SelectionBehavior } from '@react-types/shared';
+import { Key } from 'react-aria-components/Breadcrumbs';
+import { Selection, SelectionMode } from 'react-aria-components/GridList';
+interface SelectableItem {
+    id: Key;
+    label: string;
+    [key: string]: unknown;
+}
+export interface SelectedItemsSectionProps<TType extends SelectableItem> {
+    /**
+     * Array of selected items to display
+     */
+    items: TType[];
+    /**
+     * Currently selected keys
+     */
+    selectedKeys: Selection;
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange: (keys: Selection) => void;
+    /**
+     * Selection mode (single, multiple)
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * Selection behavior (toggle, replace)
+     */
+    selectionBehavior?: SelectionBehavior;
+    /**
+     * Accessible label for the section
+     */
+    label: string;
+    /**
+     * CSS class for the ListBox
+     */
+    className: string;
+}
+/**
+ * Displays selected items in a dedicated section at the top of the list.
+ * Items in this section can be deselected to move them back to the main list.
+ * @example
+ * ```tsx
+ * <SelectedItemsSection
+ *   items={selectedItems}
+ *   selectedKeys={selectedKeys}
+ *   onSelectionChange={handleChange}
+ *   selectionMode="multiple"
+ *   label="Selected Options"
+ *   className={selectedListBoxStyles}
+ * />
+ * ```
+ */
+export declare function SelectedItemsSection<TType extends SelectableItem>({ items, selectedKeys, onSelectionChange, selectionMode, selectionBehavior, label, className, ...rest }: SelectedItemsSectionProps<TType>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/components/select-list/parts/SelectedItemsSection.js

@@ -0,0 +1,36 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Header as h, ListBox as p, Collection as u } from "react-aria-components/ListBox";
+import { SelectListOption as f } from "./SelectListOption.js";
+function S({
+  items: r,
+  selectedKeys: i,
+  onSelectionChange: n,
+  selectionMode: c,
+  selectionBehavior: t,
+  label: l,
+  className: d,
+  ...s
+}) {
+  return r.length === 0 ? null : /* @__PURE__ */ a("div", { children: [
+    /* @__PURE__ */ e(h, { className: "uy:sr-only", children: l }),
+    /* @__PURE__ */ e(
+      p,
+      {
+        "aria-label": l,
+        className: d,
+        items: r,
+        selectedKeys: i,
+        onSelectionChange: n,
+        selectionMode: c,
+        selectionBehavior: t,
+        escapeKeyBehavior: "none",
+        shouldFocusWrap: !1,
+        ...s,
+        children: /* @__PURE__ */ e(u, { items: r, children: (o) => /* @__PURE__ */ e(f, { id: o.id, children: o.label }) })
+      }
+    )
+  ] });
+}
+export {
+  S as SelectedItemsSection
+};

package/dist/esm/components/select-list/utils/partition.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Partitions an array into two arrays based on a predicate function.
+ * More efficient than using filter twice.
+ * @param array - Array to partition
+ * @param predicate - Function to test each element
+ * @returns Tuple of [passing items, failing items]
+ * @example
+ * ```tsx
+ * const [evens, odds] = partition([1, 2, 3, 4], n => n % 2 === 0)
+ * // evens: [2, 4], odds: [1, 3]
+ * ```
+ */
+export declare function partition<T>(array: T[], predicate: (item: T) => boolean): [T[], T[]];

package/dist/esm/components/select-list/utils/partition.js

@@ -0,0 +1,9 @@
+function e(n, i) {
+  const o = [], s = [];
+  for (const t of n)
+    i(t) ? o.push(t) : s.push(t);
+  return [o, s];
+}
+export {
+  e as partition
+};

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

@@ -0,0 +1,2 @@
+import { ToggleGroupState } from 'react-stately/useToggleGroupState';
+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,70 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { AriaToggleButtonGroupProps } from 'react-aria/useToggleButtonGroup';
+import { Key } from 'react-stately';
+export declare const selectableButtonGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:group uy:flex uy:gap-100 uy:flex-wrap", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:group uy:flex uy:gap-100 uy:flex-wrap", 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;
+    /**
+     * Callback fired when focus leaves the group.
+     * Useful for form validation and tracking user interaction.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => 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,40 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as i, useRef as s, useCallback as m } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { useToggleButtonGroup as y } from "react-aria/useToggleButtonGroup";
+import { useToggleGroupState as g } from "react-stately/useToggleGroupState";
+import { SelectableButtonGroupContext as v } from "./SelectableButtonGroup.context.js";
+const B = f({
+  base: "uy:group uy:flex uy:gap-100 uy:flex-wrap"
+}), b = i((e, t) => {
+  const o = s(null), u = g({
+    ...e,
+    selectedKeys: e.value,
+    defaultSelectedKeys: e.defaultValue,
+    onSelectionChange: (l) => {
+      e.onChange?.(Array.from(l));
+    }
+  }), { groupProps: n } = y(e, u, o), r = B({ className: e.className }), c = m(
+    (l) => {
+      o.current = l, typeof t == "function" ? t(l) : t && (t.current = l);
+    },
+    [t]
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...n,
+      className: r,
+      ref: c,
+      "data-dd-privacy": "allow",
+      "aria-invalid": e.isInvalid,
+      onBlur: e.onBlur,
+      children: /* @__PURE__ */ a(v.Provider, { value: u, children: e.children })
+    }
+  );
+});
+b.displayName = "SelectableButtonGroup";
+export {
+  b as SelectableButtonGroup,
+  B as selectableButtonGroup
+};

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

@@ -0,0 +1,27 @@
+import { SelectableButtonGroupProps } from './SelectableButtonGroup.js';
+export type TanstackSelectableButtonGroupProps = Omit<SelectableButtonGroupProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackSelectableButtonGroup` is a selectable button group wired to the TanStack Form field context.
+ * It is based on the Unity `SelectableButtonGroup` component.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ choice: string[] }>({ validators: {} })
+ *   return (
+ *     <form.AppForm>
+ *       <form.AppField name="choice">
+ *         {(field) => (
+ *           <field.SelectableButtonGroup selectionMode="single">
+ *             <SelectableButton value="option1">Option 1</SelectableButton>
+ *             <SelectableButton value="option2">Option 2</SelectableButton>
+ *           </field.SelectableButtonGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackSelectableButtonGroup: import('react').ForwardRefExoticComponent<TanstackSelectableButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableButtonGroup };

package/dist/esm/components/selectable-button-group/TanstackSelectableButtonGroup.js

@@ -0,0 +1,34 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as u, useCallback as m } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as p } from "../form-field/TanstackFormField.context.js";
+import { SelectableButtonGroup as b } from "./SelectableButtonGroup.js";
+const T = u(({ onChange: o, ...l }, n) => {
+  const e = f(), a = p(), i = e.state.meta.isTouched && !e.state.meta.isValid, d = m(
+    (t) => {
+      const r = t.relatedTarget, s = t.currentTarget;
+      (!r || !s.contains(r)) && e.handleBlur();
+    },
+    [e]
+  );
+  return /* @__PURE__ */ c(
+    b,
+    {
+      ...l,
+      ref: n,
+      value: e.state.value,
+      onChange: (t) => {
+        e.handleChange(t), o?.(t);
+      },
+      onBlur: d,
+      isInvalid: i,
+      "aria-labelledby": a.labelId,
+      "aria-describedby": [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ") || void 0,
+      "aria-details": a.contextualLinkId
+    }
+  );
+});
+T.displayName = "TanstackSelectableButtonGroup";
+export {
+  T as TanstackSelectableButtonGroup
+};