import { type HTMLAttributes, type ReactNode } from 'react';
import { type VariantProps } from 'class-variance-authority';
import type { ButtonProps } from '../button/button';
type ButtonIntent = NonNullable;
declare const iconButtonGroupVariants: (props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export type IconButtonGroupRole = 'group' | 'toolbar' | 'radiogroup';
export type IconButtonGroupMode = 'momentary' | 'toggle-single' | 'toggle-multi';
type SharedPropsBase = {
/** Forwarded to every child that does not set its own `size`. */
size?: 'sm' | 'md' | 'lg';
orientation?: 'horizontal' | 'vertical';
/** Disables every child. Uses `aria-disabled` on children (not the HTML
* attribute) so each child still takes focus — matches WAI-ARIA toolbar
* guidance. Visual disabled styling picks up the `aria-disabled:*`
* variant declared on the Button base class. */
disabled?: boolean;
/** Intent applied to every child that does not set its own `intent`.
* Defaults to `outline` — grouped icon buttons are peers, not a row
* of solid-primary CTAs. */
intent?: ButtonIntent;
/** `'menu'` keeps the strip on one line whatever the container width:
* children that stop fitting move into a dropdown behind an ellipsis
* trigger, preserving toggle semantics (radio / checkbox items). The
* group then fills its container's inline size. Horizontal only.
* Children set `data-overflow-pin` to always stay in the strip. */
overflow?: 'none' | 'menu';
children: ReactNode;
};
type AccessibleNameProps = {
'aria-label': string;
'aria-labelledby'?: never;
} | {
'aria-label'?: never;
'aria-labelledby': string;
};
type SharedProps = SharedPropsBase & AccessibleNameProps;
type GroupRoleProps = {
role?: 'group';
mode?: 'momentary' | 'toggle-single' | 'toggle-multi';
} | {
role: 'toolbar';
mode?: 'momentary' | 'toggle-single' | 'toggle-multi';
} | {
role: 'radiogroup';
mode: 'toggle-single';
};
type MomentaryProps = SharedProps & {
mode?: 'momentary';
value?: never;
defaultValue?: never;
onValueChange?: never;
};
type ToggleSingleProps = SharedProps & {
mode: 'toggle-single';
value?: string;
defaultValue?: string;
onValueChange?: (next: string) => void;
};
type ToggleMultiProps = SharedProps & {
mode: 'toggle-multi';
value?: string[];
defaultValue?: string[];
onValueChange?: (next: string[]) => void;
};
export type IconButtonGroupProps = (MomentaryProps | ToggleSingleProps | ToggleMultiProps) & GroupRoleProps & Omit, 'role' | 'onChange' | 'children'> & VariantProps;
export declare const IconButtonGroup: import("react").ForwardRefExoticComponent<((SharedPropsBase & {
'aria-label': string;
'aria-labelledby'?: never;
} & {
mode?: "momentary";
value?: never;
defaultValue?: never;
onValueChange?: never;
} & {
role?: "group";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label': string;
'aria-labelledby'?: never;
} & {
mode?: "momentary";
value?: never;
defaultValue?: never;
onValueChange?: never;
} & {
role: "toolbar";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label'?: never;
'aria-labelledby': string;
} & {
mode?: "momentary";
value?: never;
defaultValue?: never;
onValueChange?: never;
} & {
role?: "group";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label'?: never;
'aria-labelledby': string;
} & {
mode?: "momentary";
value?: never;
defaultValue?: never;
onValueChange?: never;
} & {
role: "toolbar";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label': string;
'aria-labelledby'?: never;
} & {
mode: "toggle-single";
value?: string;
defaultValue?: string;
onValueChange?: (next: string) => void;
} & {
role?: "group";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label': string;
'aria-labelledby'?: never;
} & {
mode: "toggle-single";
value?: string;
defaultValue?: string;
onValueChange?: (next: string) => void;
} & {
role: "toolbar";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label': string;
'aria-labelledby'?: never;
} & {
mode: "toggle-single";
value?: string;
defaultValue?: string;
onValueChange?: (next: string) => void;
} & {
role: "radiogroup";
mode: "toggle-single";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label'?: never;
'aria-labelledby': string;
} & {
mode: "toggle-single";
value?: string;
defaultValue?: string;
onValueChange?: (next: string) => void;
} & {
role?: "group";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label'?: never;
'aria-labelledby': string;
} & {
mode: "toggle-single";
value?: string;
defaultValue?: string;
onValueChange?: (next: string) => void;
} & {
role: "toolbar";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label'?: never;
'aria-labelledby': string;
} & {
mode: "toggle-single";
value?: string;
defaultValue?: string;
onValueChange?: (next: string) => void;
} & {
role: "radiogroup";
mode: "toggle-single";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label': string;
'aria-labelledby'?: never;
} & {
mode: "toggle-multi";
value?: string[];
defaultValue?: string[];
onValueChange?: (next: string[]) => void;
} & {
role?: "group";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label': string;
'aria-labelledby'?: never;
} & {
mode: "toggle-multi";
value?: string[];
defaultValue?: string[];
onValueChange?: (next: string[]) => void;
} & {
role: "toolbar";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label'?: never;
'aria-labelledby': string;
} & {
mode: "toggle-multi";
value?: string[];
defaultValue?: string[];
onValueChange?: (next: string[]) => void;
} & {
role?: "group";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>) | (SharedPropsBase & {
'aria-label'?: never;
'aria-labelledby': string;
} & {
mode: "toggle-multi";
value?: string[];
defaultValue?: string[];
onValueChange?: (next: string[]) => void;
} & {
role: "toolbar";
mode?: "momentary" | "toggle-single" | "toggle-multi";
} & Omit, "onChange" | "role" | "children"> & VariantProps<(props?: ({
orientation?: "vertical" | "horizontal" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string>)) & import("react").RefAttributes>;
export {};
//# sourceMappingURL=icon-button-group.d.ts.map