import type { ReactNode } from 'react';
/**
 * Tipo de botón según el sistema de diseño Siesa (Figma node 4001-17240)
 *
 * - `default`: Botón primario con fondo sólido (#0e79fd) y borde (#3c9bf6)
 *   - Background: primary-600 (#0e79fd)
 *   - Border: primary-inverse-border (#3c9bf6)
 *   - Text: primary-inverse-content (#eff8ff)
 *   - Sombra interna: shadow-button-inset
 *
 * - `outline`: Botón secundario con borde, sin fondo
 *   - Background: transparent
 *   - Border: primary-300 (#93d1fd)
 *   - Text: primary-600 (#0e79fd)
 *   - Sombra: shadow-xs
 *
 * - `plain`: Botón terciario sin borde visible (hover overlay)
 *   - Background: transparent
 *   - Border: transparent
 *   - Text: primary-600 (#0e79fd)
 *
 * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240
 */
export type ButtonType = 'default' | 'outline' | 'plain';
/**
 * Tamaños de botón según especificaciones de Figma (node 4001-17240)
 *
 * | Size | Height | Padding H | Padding V | Gap  | Font Size  |
 * |------|--------|-----------|-----------|------|------------|
 * | xs   | 24px   | 8px       | 4px       | 8px  | 12px (xs)  |
 * | sm   | 28px   | 8px       | 4px       | 8px  | 14px (sm)  |
 * | base | 32px   | 10px      | 6px       | 8px  | 14px (sm)  |
 * | l    | 36px   | 12px      | 8px       | 12px | 14px (sm)  |
 * | xl   | 40px   | 16px      | 8px       | 12px | 14px (sm)  |
 *
 * Icon-only buttons son cuadrados perfectos con el mismo width y height.
 *
 * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240
 */
export type ButtonSize = 'xs' | 'sm' | 'base' | 'l' | 'xl';
/**
 * Estados del botón según especificaciones de Figma
 *
 * - `default`: Estado normal con colores base
 * - `hover`: Overlay visual (bg-primary-500 para default, bg-hover-overlay para plain)
 * - `focus`: Focus ring de 4px (#60b6fa) con offset de 2px (#dbeefe)
 * - `disabled`: Opacity 50% con pointer-events-none
 *
 * @note Los estados hover y focus son manejados automáticamente por CSS.
 */
export type ButtonState = 'default' | 'hover' | 'focus' | 'disabled';
export type ButtonColor = 'primary' | 'secondary' | 'tertiary';
/**
 * Props del componente Button
 *
 * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240
 */
export interface ButtonProps {
    /**
     * Color del botón
     * @default 'primary'
     */
    color?: ButtonColor;
    /**
     * Tipo de botón (visual) - determina la jerarquía y estilo del botón
     *
     * - `default`: Acción principal (Guardar, Enviar, Confirmar)
     * - `outline`: Acción secundaria (Cancelar, Volver)
     * - `plain`: Acción terciaria (Cerrar, Ver más, Links)
     *
     * @default 'default'
     */
    type?: ButtonType;
    /**
     * Tamaño del botón - determina altura, padding y tipografía
     *
     * - `xs`: 24px - Espacios muy compactos, inline actions
     * - `sm`: 28px - Barras de herramientas, acciones secundarias
     * - `base`: 32px - Tamaño estándar para la mayoría de casos
     * - `l`: 36px - Botones destacados, CTAs
     * - `xl`: 40px - Heroes, landing pages
     *
     * @default 'base'
     */
    size?: ButtonSize;
    /**
     * Si true, el botón solo muestra iconos (sin texto)
     * El botón se vuelve cuadrado perfecto (width = height)
     *
     * @default false
     */
    iconOnly?: boolean;
    /**
     * Icono a mostrar antes del texto (izquierda)
     * Todos los iconos son 16x16px según especificaciones de Figma
     */
    leftIcon?: ReactNode;
    /**
     * Icono a mostrar después del texto (derecha)
     * Todos los iconos son 16x16px según especificaciones de Figma
     */
    rightIcon?: ReactNode;
    /**
     * Contenido del botón (texto o elementos React)
     */
    children?: ReactNode;
    /**
     * Si el botón está deshabilitado
     * Aplica opacity: 50% y pointer-events: none
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Clases CSS adicionales para personalización
     */
    className?: string;
    /**
     * Función callback ejecutada al hacer click
     */
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    /**
     * Tipo de botón HTML (comportamiento de formulario)
     *
     * - `button`: Botón normal (no envía formularios)
     * - `submit`: Envía el formulario al hacer click
     * - `reset`: Resetea el formulario al hacer click
     *
     * @default 'button'
     */
    htmlType?: 'button' | 'submit' | 'reset';
    /**
     * Si el botón ocupa todo el ancho disponible de su contenedor
     *
     * @default false
     */
    fullWidth?: boolean;
    /**
     * Etiqueta accesible para lectores de pantalla
     * **Requerido** para botones iconOnly para accesibilidad
     */
    ariaLabel?: string;
    /**
     * Si true, muestra un badge de notificación (dot) en la esquina superior derecha
     *
     * @default false
     */
    badge?: boolean;
    /**
     * Número a mostrar en el badge de notificación
     * Si se proporciona, muestra un badge con contador en lugar de un dot
     * Números mayores a 99 se muestran como "99+"
     */
    badgeCount?: number;
    /**
     * Atributos HTML adicionales para el elemento button
     */
    [key: string]: unknown;
}
//# sourceMappingURL=Button.types.d.ts.map