import React from 'react';
export type SelectSize = 'sm' | 'md' | 'lg';
export interface SelectOption {
    value: string;
    label: string;
    disabled?: boolean;
}
export interface OptGroup {
    label: string;
    options: SelectOption[];
    disabled?: boolean;
}
export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
    /**
     * Label for the select
     */
    label?: React.ReactNode;
    /**
     * Error message to display
     */
    error?: React.ReactNode;
    /**
     * Helper text to display below the select
     */
    helperText?: React.ReactNode;
    /**
     * Size of the select
     * @default 'md'
     */
    size?: SelectSize;
    /**
     * Whether the select is required
     * @default false
     */
    isRequired?: boolean;
    /**
     * Whether the select is disabled
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Whether the select should take up the full width of its container
     * @default false
     */
    isFullWidth?: boolean;
    /**
     * Icon to display inside the select
     */
    icon?: React.ReactNode;
    /**
     * Position of the icon
     * @default 'left'
     */
    iconPosition?: 'left' | 'right';
    /**
     * Additional class name for the container
     */
    containerClassName?: string;
    /**
     * Additional class name for the select element
     */
    selectClassName?: string;
    /**
     * Additional class name for the label
     */
    labelClassName?: string;
    /**
     * Array of options to display in the select
     */
    options?: SelectOption[];
    /**
     * Array of option groups to display in the select
     */
    groups?: OptGroup[];
    /**
     * Placeholder text to display when no option is selected
     */
    placeholder?: string;
    /**
     * Custom arrow icon for the select
     */
    customArrow?: React.ReactNode;
}
/**
 * Select component built with Tailwind CSS
 *
 * A flexible select component that supports various sizes, states, and options
 * including option groups and custom styling.
 *
 * @example
 * // Basic usage
 * <TailwindSelect
 *   label="Country"
 *   name="country"
 *   options={[
 *     { value: 'us', label: 'United States' },
 *     { value: 'ca', label: 'Canada' },
 *     { value: 'mx', label: 'Mexico' }
 *   ]}
 * />
 *
 * @example
 * // With option groups
 * <TailwindSelect
 *   label="Vehicle"
 *   name="vehicle"
 *   groups={[
 *     {
 *       label: 'Cars',
 *       options: [
 *         { value: 'sedan', label: 'Sedan' },
 *         { value: 'suv', label: 'SUV' }
 *       ]
 *     },
 *     {
 *       label: 'Trucks',
 *       options: [
 *         { value: 'pickup', label: 'Pickup' },
 *         { value: 'semi', label: 'Semi' }
 *       ]
 *     }
 *   ]}
 * />
 */
export declare const TailwindSelect: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
export default TailwindSelect;
//# sourceMappingURL=TailwindSelect.d.ts.map