@furystack/shades-common-components/esm/components/button-group.d.ts

Common UI components for FuryStack Shades

import type { ChildrenList, PartialElement } from '@furystack/shades';
import type { Palette } from '../services/theme-provider-service.js';
import type { ComponentSize } from './component-size.js';
export type ButtonGroupProps = PartialElement<HTMLElement> & {
    /** Visual variant applied to all buttons in the group */
    variant?: 'contained' | 'outlined';
    /** Theme color applied to all buttons */
    color?: keyof Palette;
    /** Layout direction */
    orientation?: 'horizontal' | 'vertical';
    /** Whether all buttons in the group are disabled */
    disabled?: boolean;
};
export declare const ButtonGroup: (props: ButtonGroupProps, children: ChildrenList) => JSX.Element;
export type ToggleButtonProps = PartialElement<HTMLButtonElement> & {
    /** The value this button represents */
    value: string;
    /** Whether the button is disabled */
    disabled?: boolean;
    /**
     * The size of the toggle button.
     * @default 'medium'
     */
    size?: ComponentSize;
    /**
     * Whether the button is in a pressed (selected) state.
     * Use this for standalone toggle buttons or controlled state.
     * When used inside a `ToggleButtonGroup`, the group manages the
     * pressed state automatically via its `value` prop and will
     * override this attribute.
     */
    pressed?: boolean;
};
export declare const ToggleButton: (props: Omit<Partial<HTMLButtonElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
} & {
    /** The value this button represents */
    value: string;
    /** Whether the button is disabled */
    disabled?: boolean;
    /**
     * The size of the toggle button.
     * @default 'medium'
     */
    size?: ComponentSize;
    /**
     * Whether the button is in a pressed (selected) state.
     * Use this for standalone toggle buttons or controlled state.
     * When used inside a `ToggleButtonGroup`, the group manages the
     * pressed state automatically via its `value` prop and will
     * override this attribute.
     */
    pressed?: boolean;
} & Omit<Partial<HTMLElement>, "style">, children?: ChildrenList) => JSX.Element;
export type ToggleButtonGroupProps = PartialElement<HTMLElement> & {
    /** Currently selected value(s). Use a string for exclusive mode, or string[] for multi-select. */
    value?: string | string[];
    /** When true, only one button can be selected at a time */
    exclusive?: boolean;
    /** Callback when the selected value(s) change */
    onValueChange?: (value: string | string[]) => void;
    /** Theme color */
    color?: keyof Palette;
    /** Layout direction */
    orientation?: 'horizontal' | 'vertical';
    /** Whether all toggle buttons are disabled */
    disabled?: boolean;
    /**
     * Size applied to all toggle buttons in the group.
     * Individual ToggleButton `size` props are overridden by this value.
     * @default 'medium'
     */
    size?: ComponentSize;
};
export declare const ToggleButtonGroup: (props: ToggleButtonGroupProps, children: ChildrenList) => JSX.Element;
export type SegmentedControlOption = {
    /** Unique value for this option */
    value: string;
    /** Display label */
    label: string | JSX.Element;
    /** Whether this option is disabled */
    disabled?: boolean;
};
export type SegmentedControlProps = PartialElement<HTMLElement> & {
    /** Available options */
    options: SegmentedControlOption[];
    /** Currently selected value */
    value?: string;
    /** Callback when the selected option changes */
    onValueChange?: (value: string) => void;
    /** Theme color */
    color?: keyof Palette;
    /** Whether the entire control is disabled */
    disabled?: boolean;
    /** Size variant */
    size?: ComponentSize;
};
export declare const SegmentedControl: (props: Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
} & {
    /** Available options */
    options: SegmentedControlOption[];
    /** Currently selected value */
    value?: string;
    /** Callback when the selected option changes */
    onValueChange?: (value: string) => void;
    /** Theme color */
    color?: keyof Palette;
    /** Whether the entire control is disabled */
    disabled?: boolean;
    /** Size variant */
    size?: ComponentSize;
}, children?: ChildrenList) => JSX.Element;
//# sourceMappingURL=button-group.d.ts.map