@payfit/unity-components 2.46.11 → 2.46.13

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +0,0 @@
-/**
- * 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

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

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

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

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

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

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

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

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