import type { ReactNode } from 'react';
/**
 * Opción individual dentro del ButtonGroup
 *
 * Soporta tres modos:
 * - **Solo texto**: solo `label`
 * - **Icono + texto**: `icon` y `label`
 * - **Solo icono**: `icon` sin `label` (requiere `ariaLabel` para accesibilidad)
 */
export interface ButtonGroupOption {
    /** Valor único que identifica la opción */
    value: string;
    /** Texto visible de la opción (opcional si se usa solo icono) */
    label?: string;
    /** Icono a mostrar junto al texto o solo (16x16px) */
    icon?: ReactNode;
    /**
     * Posición del icono respecto al texto
     * @default 'left'
     */
    iconPosition?: 'left' | 'right';
    /** Si la opción individual está deshabilitada */
    disabled?: boolean;
    /** Etiqueta accesible (requerido para modo solo icono) */
    ariaLabel?: string;
}
/**
 * Props del componente ButtonGroup
 *
 * Grupo de botones toggle conectados visualmente con selección tipo radio.
 *
 * **Variantes visuales (Figma node 7879-38523):**
 * - Solo texto: "Con", "Sin", "Aparte", "Con y Aparte"
 * - Icono + texto: "Por Defecto" con icono, "Lista" con icono
 * - Solo icono: Botones cuadrados con icono de grid/lista
 *
 * **Estructura visual:**
 * - Los botones aparecen conectados sin espacio entre ellos
 * - El primer botón tiene border-radius solo a la izquierda
 * - El último botón tiene border-radius solo a la derecha
 * - El botón seleccionado se eleva con z-index para mostrar su borde
 *
 * **Tokens de diseño:**
 * - Seleccionado: fondo primary-600 (#0e79fd), borde primary-inverse-border, texto blanco
 * - No seleccionado: fondo bg-primary, borde border-primary, texto content-primary
 * - Padding: px-3.5 (14px), py-1.5 (6px) — solo icono: p-1.5 (6px)
 * - Border radius: 4px (rounded)
 * - Tipografía: 14px, medium (seleccionado) / regular (no seleccionado)
 * - Iconos: 16x16px, gap 6px con texto
 *
 * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=7879-38523 - Diseño Figma
 */
export interface ButtonGroupProps {
    /**
     * Array de opciones a mostrar como botones toggle
     */
    options: ButtonGroupOption[];
    /**
     * Valor actualmente seleccionado (null si ninguno)
     */
    value: string | null;
    /**
     * Callback ejecutado cuando cambia la selección
     */
    onChange: (value: string) => void;
    /**
     * Si todo el grupo está deshabilitado
     * Aplica opacity: 50% y cursor-not-allowed a todos los botones
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Clases CSS adicionales para el contenedor del grupo
     */
    className?: string;
    /**
     * Etiqueta accesible para el grupo de botones
     */
    'aria-label'?: string;
}
//# sourceMappingURL=ButtonGroup.types.d.ts.map