@papernote/ui/dist/components/ButtonGroup.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React from 'react';
export interface ButtonGroupOption {
    /** Option value */
    value: string;
    /** Display label */
    label: string;
    /** Optional icon */
    icon?: React.ComponentType<any>;
    /** Disabled state */
    disabled?: boolean;
    /** Tooltip text */
    tooltip?: string;
}
export interface ButtonGroupProps {
    /** Available options */
    options: ButtonGroupOption[];
    /** Selected value (single select) */
    value?: string;
    /** Selected values (multi select) */
    values?: string[];
    /** Change handler (single select) */
    onChange?: (value: string) => void;
    /** Change handler (multi select) */
    onChangeMultiple?: (values: string[]) => void;
    /** Allow multiple selection */
    multiple?: boolean;
    /** Input label */
    label?: string;
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
    /** Full width buttons */
    fullWidth?: boolean;
    /** Disabled state for entire group */
    disabled?: boolean;
    /** Custom className */
    className?: string;
}
/**
 * ButtonGroup component - Toggle button group for single or multiple selection.
 *
 * Features:
 * - Single or multiple selection modes
 * - Icon support
 * - Full width option
 * - Disabled states
 * - Accessible keyboard navigation
 *
 * @example
 * ```tsx
 * // Single select
 * <ButtonGroup
 *   label="Text Alignment"
 *   options={[
 *     { value: 'left', label: 'Left', icon: AlignLeft },
 *     { value: 'center', label: 'Center', icon: AlignCenter },
 *     { value: 'right', label: 'Right', icon: AlignRight },
 *   ]}
 *   value={alignment}
 *   onChange={setAlignment}
 * />
 *
 * // Multi select
 * <ButtonGroup
 *   label="Text Formatting"
 *   options={[
 *     { value: 'bold', label: 'Bold', icon: Bold },
 *     { value: 'italic', label: 'Italic', icon: Italic },
 *     { value: 'underline', label: 'Underline', icon: Underline },
 *   ]}
 *   values={formatting}
 *   onChangeMultiple={setFormatting}
 *   multiple
 * />
 * ```
 */
export default function ButtonGroup({ options, value, values, onChange, onChangeMultiple, multiple, label, size, fullWidth, disabled, className, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=ButtonGroup.d.ts.map