import type { ReactNode } from 'react';
/**
 * Opción individual del Select
 */
export interface SelectOption {
    /**
     * Valor único de la opción
     */
    value: string | number;
    /**
     * Label visible de la opción
     */
    label: string;
    /**
     * Si la opción está deshabilitada
     * @default false
     */
    disabled?: boolean;
    /**
     * Icono personalizado para la opción
     */
    icon?: ReactNode;
}
/**
 * Props del componente Select
 */
export interface SelectProps {
    /**
     * Opciones disponibles para seleccionar
     */
    options: SelectOption[];
    /**
     * Valor seleccionado actual
     */
    value?: string | number;
    /**
     * Valor por defecto inicial
     */
    defaultValue?: string | number;
    /**
     * Texto del placeholder cuando no hay selección
     * @default 'Seleccionar...'
     */
    placeholder?: string;
    /**
     * Si el select está deshabilitado
     * @default false
     */
    disabled?: boolean;
    /**
     * Si el select muestra un error
     * @default false
     */
    error?: boolean;
    /**
     * Label del select (opcional)
     */
    label?: string;
    /**
     * Texto descriptivo que aparece debajo del label y antes del trigger
     * Equivale al "Description" de Figma
     * @example "This will be visible to clients on the project."
     */
    description?: string;
    /**
     * Muestra el label
     * @default true
     */
    showLabel?: boolean;
    /**
     * Muestra la descripción
     * @default true
     */
    showDescription?: boolean;
    /**
     * Texto de ayuda adicional debajo del select
     */
    helperText?: string;
    /**
     * Mensaje de error para mostrar validaciones fallidas
     */
    errorMessage?: string;
    /**
     * Header opcional que aparece al inicio del menú
     * @example "Header ..."
     */
    menuHeader?: string;
    /**
     * Handler cuando cambia la selección
     */
    onChange?: (value: string | number) => void;
    /**
     * Handler cuando el componente pierde el foco
     */
    onBlur?: (event?: React.FocusEvent<HTMLButtonElement>) => void;
    /**
     * Clases CSS adicionales
     */
    className?: string;
    /**
     * Clases CSS adicionales para el trigger
     */
    triggerClassName?: string;
    /**
     * Clases CSS adicionales para el menu
     */
    menuClassName?: string;
    /**
     * Label para accesibilidad (ARIA)
     */
    ariaLabel?: string;
    /**
     * ID del select para asociar con label
     */
    id?: string;
    /**
     * Nombre del campo para formularios
     */
    name?: string;
    /**
     * Si el campo es requerido
     * @default false
     */
    required?: boolean;
    /**
     * Tamaño del select
     * @default 'base'
     */
    selectSize?: 'xs' | 'sm' | 'base' | 'l' | 'xl';
    /**
     * Posición del menú desplegable
     * @default 'bottom'
     */
    menuPosition?: 'top' | 'bottom';
    /**
     * Icono al inicio del select
     */
    startIcon?: React.ReactElement;
    /**
     * Si el campo es solo lectura
     * @default false
     */
    readOnly?: boolean;
}
//# sourceMappingURL=Select.types.d.ts.map