import React from "react";
/**
 * Props interface for the Select component
 *
 * Select is a versatile dropdown component built on react-select that supports
 * single and multiple selection, custom options, search functionality, and
 * various display modes including pills and custom styling.
 */
export interface SelectProps {
    /**
     * Unique identifier for the select element
     * Used for form handling, accessibility, and testing
     *
     * @example "country-select"
     */
    name: string;
    /**
     * Array of objects containing the options to be displayed
     * Each object should contain the fields specified by textField and valueField
     *
     * @example [{ label: "United States", value: "US" }, { label: "Canada", value: "CA" }]
     */
    options: Array<{}>;
    /**
     * Field name in option objects to use as display text
     * Determines which property shows as the option label
     *
     * @default "label"
     * @example "title" - Uses option.title as display text
     */
    textField?: "label" | string;
    /**
     * Field name in option objects to use as the actual value
     * Determines which property is returned when option is selected
     *
     * @default "value"
     * @example "id" - Uses option.id as the selected value
     */
    valueField?: "value" | string;
    /**
     * Default selected option(s) when component mounts
     * Can be a single object or array for multi-select
     *
     * @example { label: "United States", value: "US" }
     */
    defaultValue?: {};
    /**
     * Placeholder text shown when no option is selected
     * Provides a hint about what should be selected
     *
     * @example "Select a country"
     */
    placeholder?: string;
    /**
     * Currently selected value(s)
     * Can be a single value or array for multi-select
     * Makes the component controlled
     *
     * @example "US" or ["US", "CA"] for multi-select
     */
    value?: any;
    /**
     * Whether multiple options can be selected
     * When true, value becomes an array and multiple selections are allowed
     *
     * @default false
     */
    isMulti?: boolean;
    /**
     * Whether to show a clear button (X) to remove all selections
     * Allows users to quickly clear their selection
     *
     * @default false
     */
    isClearable?: boolean;
    /**
     * Whether the select is searchable
     * When true, users can type to filter options
     *
     * @default false
     */
    isSearchable?: boolean;
    /**
     * Whether the select is disabled and non-interactive
     * When true, the select cannot be opened or modified
     *
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Whether the component is in a loading state
     * When true, shows loading indicators and may disable interaction
     *
     * @default false
     */
    isLoading?: boolean;
    /**
     * Whether the select content is right-to-left aligned
     * Useful for languages that read right-to-left
     *
     * @default false
     */
    isRtl?: boolean;
    /**
     * Whether to display selected options as visual indicators
     * When true, selected options are shown as pills or tags
     *
     * @default false
     */
    showSelection?: boolean;
    /**
     * Whether to render selected pills outside the select component
     * When true, pills appear below the select; when false, inside
     *
     * @default false
     */
    showPillsOutside?: boolean;
    /**
     * Whether to show the dropdown arrow icon
     * Controls visibility of the expand/collapse indicator
     *
     * @default true
     */
    hasDropdownIcon?: boolean;
    /**
     * Custom component to render individual options
     * Allows for custom option styling and content
     *
     * @example CustomOptionWithDetails
     */
    customOption?: any;
    /**
     * Custom component to render the dropdown menu
     * Allows for custom menu styling and additional elements
     *
     * @example CustomMenuWithButton
     */
    customMenu?: any;
    /**
     * Custom CSS styles to apply to the select container
     * Overrides default styling for layout and appearance
     *
     * @example { width: '300px', marginBottom: '20px' }
     */
    style?: React.CSSProperties;
    /**
     * Callback function triggered when "Select All" button is clicked
     * Only used in multi-select mode with custom menu
     *
     * @example () => setSelectedOptions(allOptions)
     */
    onSelectAll: () => void;
    /**
     * Additional CSS class names to apply to the component
     * Allows for custom styling through CSS classes
     *
     * @example "custom-select country-picker"
     */
    className?: string;
    /**
     * Callback function triggered when selection changes
     * Receives the new selected value(s) as parameter
     *
     * @param selection - The new selected value(s)
     * @example (selection) => setSelectedCountry(selection)
     */
    onChange: (selection: any) => void;
    /**
     * Text label displayed above the select field
     * Provides context about what the select represents
     *
     * @example "Country"
     */
    label?: string;
    /**
     * Size behavior for selected pills
     * Controls how pills adapt to their content
     *
     * @default "dynamic"
     * @example "full" - Pills take full width
     */
    pillSize?: "dynamic" | "full";
    /**
     * Whether to hide selected options from the dropdown list
     * When true, already selected options won't appear in the list
     *
     * @default false
     */
    hideSelectedOptions?: boolean;
    /**
     * Custom message to display when no options are available
     * Function that returns the message to show
     *
     * @example () => "No countries found"
     */
    noOptionsMessage?: () => React.ReactNode;
    /**
     * Marks the select as required. When true, and on form submit attempt, if empty it will show invalid state.
     */
    isRequiere?: boolean;
}
/**
 * Custom styles for react-select component
 * Provides consistent styling across the application
 */
export declare const customStyles: {
    groupHeading: (provided: any) => any;
    option: (provided: any, state: any) => any;
    placeholder: (provided: any) => any;
    singleValue: (provided: {}) => {
        color: string;
        fontWeight: string;
        fontSize: string;
    };
    multiValue: (provided: {}) => {
        color: string;
        backgroundColor: string;
        borderRadius: string;
    };
    multiValueLabel: (provided: {}) => {
        fontWeight: string;
        fontSize: string;
        marginLeft: string;
        color: string;
        backgroundColor: string;
        borderRadius: string;
    };
    multiValueRemove: (provided: {}) => {
        borderRadius: string;
        "&:hover": {
            color: string;
            backgroundColor: string;
        };
    };
    menu: (provided: any) => any;
    control: (provided: any, state: any) => any;
    menuList: (provided: any) => any;
};
