@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

package/dist/patterns/Shadow/index.js

@@ -0,0 +1,4 @@
+import { IressShadow as e } from "./Shadow.js";
+export {
+  e as IressShadow
+};

package/dist/src/components/Alert/Alert.d.ts

@@ -0,0 +1,57 @@
+import { IressIconProps } from '../Icon';
+import { IressTextProps } from '../Text';
+import { ReactNode } from 'react';
+import { SystemValidationStatuses } from '../../types';
+import { IressButtonProps, IressCloseButtonProps } from '../Button';
+export interface IressAlertProps extends Omit<IressTextProps, 'element'> {
+    /**
+     * Actions to display in the alert. These will be rendered as buttons with opinionated styling.
+     * If you want to use custom buttons, use the `footer` prop instead.
+     **/
+    actions?: Omit<IressButtonProps, 'mode' | 'status'>[];
+    /**
+     * Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+     **/
+    children?: ReactNode;
+    /**
+     * Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+     **/
+    defaultDismissed?: boolean;
+    /**
+     * Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+     **/
+    dismissed?: boolean;
+    /**
+     * Buttons and controls for the alert.
+     * @deprecated Use `actions` instead for buttons with opinionated styling. If you need other footer content, use the `children` prop instead.
+     **/
+    footer?: ReactNode;
+    /**
+     * Text for alert heading. If a string, it will use a heading with level 2.
+     **/
+    heading?: ReactNode;
+    /**
+     * Icon to display in the alert.
+     * If set to `false`, no icon will be displayed.
+     * If not provided, the icon will be determined by the `status` prop.
+     **/
+    icon?: IressIconProps['name'] | false;
+    /**
+     * Icon to display in the alert.
+     * If set to `false`, no icon will be displayed.
+     * If not provided, the icon will be determined by the `status` prop.
+     **/
+    onDismiss?: IressCloseButtonProps['onClick'];
+    /**
+     * Alert type - danger, info, success or warning.
+     * @default info
+     */
+    status?: SystemValidationStatuses;
+    /**
+     * Variants of the alert, allowing it to be styled differently based on where its used in the application.
+     * - Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
+     * - Site-wide: The border will be removed, except for the bottom border.
+     */
+    variant?: 'sidebar' | 'site-wide';
+}
+export declare const IressAlert: ({ actions, children, className, defaultDismissed, dismissed: dismissedProp, footer, heading, icon: iconProp, onDismiss, status, variant, ...restProps }: IressAlertProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/Alert/Alert.styles.d.ts

@@ -0,0 +1,128 @@
+export declare const alert: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "alert" | "children" | "heading" | "icon" | "wrapper" | "action" | "dismiss", {
+    status: {
+        danger: {
+            alert: {
+                backgroundColor: "colour.system.danger.surface";
+                color: "colour.neutral.80";
+                borderColor: "colour.system.danger.fill";
+            };
+            heading: {
+                color: "colour.system.danger.text";
+            };
+            icon: {
+                color: "colour.system.danger.text";
+            };
+            action: {
+                color: "colour.system.danger.text";
+                _before: {
+                    borderColor: "colour.system.danger.text";
+                };
+                _after: {
+                    bg: "colour.system.danger.fill";
+                };
+                _hover: {
+                    color: "colour.system.danger.onFill";
+                };
+            };
+        };
+        info: {
+            alert: {
+                backgroundColor: "colour.system.info.surface";
+                color: "colour.neutral.80";
+                borderColor: "colour.system.info.fill";
+            };
+            heading: {
+                color: "colour.system.info.text";
+            };
+            icon: {
+                color: "colour.system.info.text";
+            };
+            action: {
+                color: "colour.system.info.text";
+                _before: {
+                    borderColor: "colour.system.info.text";
+                };
+                _after: {
+                    bg: "colour.system.info.fill";
+                };
+                _hover: {
+                    color: "colour.system.info.onFill";
+                };
+            };
+        };
+        success: {
+            alert: {
+                backgroundColor: "colour.system.success.surface";
+                color: "colour.neutral.80";
+                borderColor: "colour.system.success.fill";
+            };
+            heading: {
+                color: "colour.system.success.text";
+            };
+            icon: {
+                color: "colour.system.success.text";
+            };
+            action: {
+                color: "colour.system.success.text";
+                _before: {
+                    borderColor: "colour.system.success.text";
+                };
+                _after: {
+                    bg: "colour.system.success.fill";
+                };
+                _hover: {
+                    color: "colour.system.success.onFill";
+                };
+            };
+        };
+        warning: {
+            alert: {
+                backgroundColor: "colour.system.warning.surface";
+                color: "colour.neutral.80";
+                borderColor: "colour.system.warning.fill";
+            };
+            heading: {
+                color: "colour.system.warning.text";
+            };
+            icon: {
+                color: "colour.system.warning.text";
+            };
+            action: {
+                color: "colour.system.warning.text";
+                _before: {
+                    borderColor: "colour.system.warning.text";
+                };
+                _after: {
+                    bg: "colour.system.warning.fill";
+                };
+                _hover: {
+                    color: "colour.system.warning.onFill";
+                };
+            };
+        };
+    };
+    variant: {
+        sidebar: {
+            alert: {
+                borderTopLeftRadius: "radius.000";
+                borderBottomLeftRadius: "radius.000";
+                borderWidth: "[0]";
+                borderLeftWidth: "[2.5px]";
+                paddingBlock: "spacing.400";
+            };
+        };
+        'site-wide': {
+            alert: {
+                borderRadius: "radius.000";
+                borderWidth: "[0]";
+                borderBottomWidth: "[0.5px]";
+            };
+            heading: {
+                display: "inline";
+            };
+            children: {
+                display: "inline";
+            };
+        };
+    };
+}>;

package/dist/src/components/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Alert';
+export * from './Alert.styles';

package/dist/src/components/Alert/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Alert/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,52 @@
+import { IressInputPopoverProps } from '../Popover';
+import { InputBaseElement, IressInputProps } from '../Input';
+import { AutocompleteSearchHookProps } from './hooks/useAutocompleteSearch';
+import { ReactNode, SyntheticEvent } from 'react';
+import { InputRef } from '../Input/InputBase/InputBase';
+import { IressSelectMenuProps } from '../RichSelect';
+import { LabelValueMeta } from '../../interfaces';
+import { FormControlValue } from '../../types';
+export interface IressAutocompleteProps<T extends FormControlValue = string> extends Omit<IressInputProps<T>, 'children' | 'onChange'>, Omit<AutocompleteSearchHookProps, 'query'>, Pick<IressSelectMenuProps, 'limitMobile' | 'limitDesktop'> {
+    /**
+     * Always shown on focus, even if the user has not interacted with the input.
+     */
+    alwaysShowOnFocus?: boolean;
+    /**
+     * Append content.
+     * @default <IressIcon name="search" />
+     */
+    append?: ReactNode;
+    /**
+     * If true, the selected option becomes the value of the input when the autocomplete loses focus.
+     * @default true
+     */
+    autoSelect?: boolean;
+    /**
+     * If `true`, then user can clear the value of the input.
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Text to be displayed when the options function errors out. It is not used when the options are provided as an array.
+     * @default <IressAlert status="danger">An unknown error occurred. Please contact support if the error persists.</IressAlert>
+     */
+    errorText?: ReactNode;
+    /**
+     * Text to be displayed when no results are found.
+     */
+    noResultsText?: ReactNode;
+    /**
+     * Emitted when the user changes the input.
+     * The second and third arguments are only available when the options were selected from the `options` prop.
+     */
+    onChange?: (e?: SyntheticEvent<InputBaseElement>, value?: T, option?: LabelValueMeta) => void;
+    /**
+     * Customise the IressInputPopover props for your needs.
+     */
+    popoverProps?: AutocompletePopoverProps;
+}
+export interface AutocompletePopoverProps extends Pick<IressInputPopoverProps, 'autoHighlight' | 'align' | 'className' | 'container' | 'contentClassName' | 'contentStyle' | 'displayMode' | 'style'> {
+    append?: ReactNode;
+    prepend?: ReactNode;
+}
+export declare const IressAutocomplete: import('react').ForwardRefExoticComponent<IressAutocompleteProps<string> & import('react').RefAttributes<InputRef>>;

package/dist/src/components/Autocomplete/Autocomplete.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const autoComplete: import('../../styled-system/types').SlotRecipeRuntimeFn<"root" | "popoverContent" | "optionList", {
+    isEmpty: {
+        true: {
+            popoverContent: {
+                display: "none";
+            };
+        };
+    };
+}>;

package/dist/src/components/Autocomplete/components/AutocompleteInstructions.d.ts

@@ -0,0 +1,7 @@
+export interface AutocompleteInstructionsProps {
+    /**
+     * The minimum number of characters required to search.
+     */
+    minSearchLength: number;
+}
+export declare const AutocompleteInstructions: ({ minSearchLength, }: AutocompleteInstructionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Autocomplete/hooks/useAutocompleteSearch.d.ts

@@ -0,0 +1,73 @@
+import { FormattedLabelValueMeta, LabelValueMeta } from '../../../interfaces';
+export interface AutocompleteSearchHookProps {
+    /**
+     * Time in milliseconds to wait for before performing result search. Only applies to searchable options (function).
+     * @default 500
+     */
+    debounceThreshold?: number;
+    /**
+     * Initial options data set, shown when the input is empty.
+     */
+    initialOptions?: LabelValueMeta[];
+    /**
+     * Minimum number of characters required before triggering async search. Only applies to searchable options (function).
+     * Below this threshold, no search will be triggered and no loading state will be shown.
+     * @default 1
+     */
+    minSearchLength?: number;
+    /**
+     * Options data set, shown when the input is not empty.
+     */
+    options?: LabelValueMeta[] | ((query: string) => Promise<LabelValueMeta[]>);
+    /**
+     * The query value to filter items by and create search results.
+     */
+    query?: string;
+}
+export interface AutocompleteSearchHookReturn {
+    /**
+     * Clear the error state.
+     */
+    clearError: () => void;
+    /**
+     * The debounced query value.
+     */
+    debouncedQuery: string;
+    /**
+     * Whether an error occurred during the search.
+     * If a string, it is the error reason provided in the promise rejection.
+     */
+    error: boolean | string;
+    /**
+     * Whether the search is loading.
+     */
+    loading: boolean;
+    /**
+     * The results of the search.
+     */
+    results: FormattedLabelValueMeta[];
+    /**
+     * Whether to show "Type at least X characters to search" instruction.
+     * True when the query length is below the minimum search length.
+     */
+    shouldShowInstructions: boolean;
+    /**
+     * Whether to show nothing (clean, minimal) during debounce waiting period.
+     * True when user has typed enough characters but search hasn't started yet.
+     */
+    shouldShowDebounceWaiting: boolean;
+    /**
+     * Whether to show "No results found" message.
+     * True only after a legitimate search has been performed and returned empty results.
+     */
+    shouldShowNoResults: boolean;
+    /**
+     * Stop the search.
+     */
+    stopSearch: () => void;
+}
+/**
+ * Advanced autocomplete search hook with debouncing and race condition protection
+ * Supports both sync array search and async function search
+ */
+export declare const useAutocompleteSearch: ({ debounceThreshold, initialOptions, minSearchLength, options, query, }: AutocompleteSearchHookProps) => AutocompleteSearchHookReturn;

package/dist/src/components/Autocomplete/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Autocomplete';
+export * from './Autocomplete.styles';
+export * from './hooks/useAutocompleteSearch';

package/dist/src/components/Autocomplete/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Autocomplete/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Badge/Badge.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from 'react';
+import { IressStyledProps, SystemValidationStatuses } from '../../types';
+export interface IressBadgeProps extends IressStyledProps<'span'> {
+    /**
+     * Content of the badge.
+     */
+    children?: ReactNode;
+    /**
+     * Element to attach the badge to.
+     */
+    host?: ReactElement;
+    /**
+     * Style of the badge.
+     */
+    mode?: SystemValidationStatuses | 'neutral' | 'primary';
+    /**
+     * Whether the Badge should be styled as a pill.
+     */
+    pill?: boolean;
+}
+export declare const IressBadge: ({ children, mode, pill, className, host, ...restProps }: IressBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Badge/Badge.styles.d.ts

@@ -0,0 +1,63 @@
+export declare const badge: import('../../styled-system/types').SlotRecipeRuntimeFn<"badge" | "root" | "host", {
+    host: {
+        true: {
+            badge: {
+                position: "absolute";
+                insetBlockStart: "spacing.000";
+                insetInlineEnd: "spacing.000";
+                zIndex: "100";
+                transformOrigin: "100% 0";
+                borderRadius: "radius.100";
+                transform: {
+                    base: "translate(50%, -50%)";
+                    _rtl: "translate(-50%, -50%)";
+                };
+            };
+        };
+    };
+    pill: {
+        true: {
+            badge: {
+                borderRadius: "radius.100";
+            };
+        };
+    };
+    mode: {
+        primary: {
+            root: {
+                bg: "colour.primary.fill";
+                color: "colour.primary.onFill";
+            };
+        };
+        success: {
+            root: {
+                bg: "colour.system.success.fill";
+                color: "colour.system.success.onFill";
+            };
+        };
+        warning: {
+            root: {
+                bg: "colour.system.warning.fill";
+                color: "colour.system.warning.onFill";
+            };
+        };
+        danger: {
+            root: {
+                bg: "colour.system.danger.fill";
+                color: "colour.system.danger.onFill";
+            };
+        };
+        info: {
+            root: {
+                bg: "colour.system.info.fill";
+                color: "colour.system.info.onFill";
+            };
+        };
+        neutral: {
+            root: {
+                bg: "colour.neutral.20";
+                color: "colour.neutral.80";
+            };
+        };
+    };
+}>;

package/dist/src/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Badge';
+export * from './Badge.styles';

package/dist/src/components/Badge/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Badge/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Button/Button.d.ts

@@ -0,0 +1,90 @@
+import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { Breakpoints } from '../../types';
+import { ButtonGroupItemProps } from '../ButtonGroup';
+import { IressCSSProps, IressTestProps } from '../../interfaces';
+export type ButtonElement<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = C extends ElementType ? C : THref extends string ? 'a' : 'button';
+export type ButtonRef<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = ComponentPropsWithRef<ButtonElement<C, THref>>['ref'];
+export type ButtonInstance<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = Exclude<Parameters<Exclude<ButtonRef<C, THref>, undefined>>[0], null>;
+export interface ButtonRenderProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> {
+    /**
+     * Used to describe the expected action of this button.
+     */
+    children?: ReactNode;
+    /**
+     * The classes to be applied to the button.
+     */
+    className?: string;
+    /**
+     * Handles the selection of the menu item.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+}
+export interface InternalButtonProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> extends IressCSSProps, IressTestProps, ButtonGroupItemProps {
+    /**
+     * Sets the active state of the button, usually used to indicate the button has activated a modal, popover or slideout.
+     */
+    active?: boolean;
+    /**
+     * Content for the append slot.
+     */
+    append?: ReactNode;
+    /**
+     * Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+     */
+    children?: ReactNode;
+    /**
+     * Change the component that will be rendered as the button, used for third-party libraries that require a specific element type.
+     * By default, it will render a button or an anchor tag based on the `href` prop.
+     */
+    element?: C;
+    /**
+     * If `true`, the button will stretch to fill it's container. The prop is responsive, so you can set the breakpoint(s) at which the button will be fluid.
+     *
+     * All breakpoints: `fluid={true}`
+     * Up to a specific breakpoint: `fluid={{ base: true, md: false }}`
+     */
+    fluid?: true | Breakpoints;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href?: THref;
+    /**
+     * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+     */
+    loading?: boolean | string;
+    /**
+     * Style of the button.
+     * - Primary: Used for the main action on a page. Usually only used once per screen.
+     * - Secondary: Used for secondary actions on a page, often an action on multiple `IressPanel`s. Can used multiple times per screen.
+     * - Tertiary: Used for tertiary actions on a page, often the secondary action on multiple `IressPanel`s. Can used multiple times per screen.
+     *
+     * **Migrating to version 6**
+     * - `link` mode has been removed. If it is an action, use the `tertiary` mode. If it is a link inside a paragraph, use the new `IressLink` component instead.
+     * - `danger` has been removed. Please use the `status` prop instead.
+     * - `positive` and `success` have been removed. Please use the `status` prop instead.
+     */
+    mode?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Emitted when the menu item is clicked.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Content for the prepend slot.
+     */
+    prepend?: ReactNode;
+    /**
+     * Prevents text wrapping if set to true.
+     */
+    noWrap?: boolean;
+    /**
+     * An optional status to assign to the button.
+     * - `success`: Indicates a successful or positive action.
+     * - `danger`: Indicates a dangerous or potentially negative action.
+     */
+    status?: 'success' | 'danger';
+}
+export type IressButtonProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = Omit<ComponentPropsWithoutRef<ButtonElement<C, THref>>, keyof InternalButtonProps<C, THref>> & InternalButtonProps<C, THref>;
+export declare const IressButton: <C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressButtonProps<C, THref> & {
+    ref?: ButtonRef<C, THref>;
+}) => ReactElement;

package/dist/src/components/Button/CloseButton/CloseButton.d.ts

@@ -0,0 +1,9 @@
+import { IressButtonProps } from '../Button';
+export interface IressCloseButtonProps extends Omit<IressButtonProps, 'children' | 'mode'> {
+    /**
+     * Description for screen readers.
+     * @default Close button
+     **/
+    screenreaderText?: string;
+}
+export declare const IressCloseButton: import('react').ForwardRefExoticComponent<IressCloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/src/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Button';
+export { button } from '../../styled-system/recipes/button';
+export * from './CloseButton/CloseButton';

package/dist/src/components/Button/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Button/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,35 @@
+import { ControlledValue } from '../../hooks';
+import { FormControlValue, IressStyledProps } from '../../types';
+import { ReactNode } from 'react';
+export interface IressButtonGroupProps<T = FormControlValue, TMultiple extends boolean = false> extends Omit<IressStyledProps, 'onChange'> {
+    /**
+     * Content of the button group, usually multiple `IressButton`.
+     */
+    children?: ReactNode;
+    /**
+     * Initially selected value, use for uncontrolled components.
+     */
+    defaultSelected?: ControlledValue<T, TMultiple>;
+    /**
+     * Hides the label if set; label will still be read out by screen readers.
+     */
+    hiddenLabel?: boolean;
+    /**
+     * Sets the label text for the button group.
+     * If passed an element, it will render the element with an id, to ensure its connection to the button group.
+     */
+    label: ReactNode;
+    /**
+     * Allows multiple buttons to be selected.
+     */
+    multiple?: TMultiple;
+    /**
+     * Called when a user activates one of its children buttons.
+     */
+    onChange?: (newValue?: ControlledValue<T, TMultiple>) => void;
+    /**
+     * Selected value, use for controlled components.
+     */
+    selected?: ControlledValue<T, TMultiple>;
+}
+export declare const IressButtonGroup: <T = FormControlValue, TMultiple extends boolean = false>({ children, className, "data-testid": dataTestId, defaultSelected, hiddenLabel, label, multiple, onChange, selected, ...restProps }: IressButtonGroupProps<T, TMultiple>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ButtonGroup/ButtonGroup.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const buttonGroup: import('../../styled-system/types').SlotRecipeRuntimeFn<"label" | "values" | "root", {
+    hiddenLabel: {
+        true: {
+            label: {
+                srOnly: true;
+            };
+        };
+    };
+}>;

package/dist/src/components/ButtonGroup/ButtonGroupProvider.d.ts

@@ -0,0 +1,18 @@
+import { Context, PropsWithChildren } from 'react';
+import { ControlledValue } from '../../hooks/useControlledState';
+import { FormControlValue } from '../../types';
+export interface ButtonGroupProviderProps<T = FormControlValue, TMultiple extends boolean = false> extends PropsWithChildren {
+    defaultSelected?: ControlledValue<T, TMultiple>;
+    multiple?: boolean;
+    onChange?: (newSelected?: ControlledValue<T, TMultiple>) => void;
+    selected?: ControlledValue<T, TMultiple>;
+}
+interface ButtonGroupContextValue<T = FormControlValue, TMultiple extends boolean = false> {
+    isActive: (value?: T) => boolean;
+    selected?: ControlledValue<T, TMultiple>;
+    toggle?: (value?: T, flag?: boolean) => void;
+}
+export declare function getButtonGroupContext<T = FormControlValue, TMultiple extends boolean = false>(): Context<ButtonGroupContextValue<T, TMultiple>>;
+export declare const ButtonGroupContext: Context<ButtonGroupContextValue<FormControlValue, false> | undefined>;
+export declare const ButtonGroupProvider: <T = FormControlValue, TMultiple extends boolean = false>({ children, defaultSelected, multiple, onChange, selected: selectedProp, }: ButtonGroupProviderProps<T, TMultiple>) => import("react/jsx-runtime").JSX.Element;
+export {};