import { Label, type ListboxProps, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react';
import React, { type ReactNode, type MouseEventHandler, type ElementType } from 'react';
import type { ExtractProps } from '../../util/utility-types';
import type { Status } from '../../util/variant-types';
import { type IconName } from '../Icon';
import type { PopoverListItemProps } from '../PopoverListItem/PopoverListItem';
type SelectProps = ListboxProps<ElementType, string | {
    [k: string]: unknown;
}, {
    [k: string]: unknown;
}> & {
    /**
     * Screen-reader text for the select's label.
     *
     * When possible, use a visible label by passing a <Select.Label> into `children`.
     * In rare cases where there's no visible label, you must provide an `aria-label` for screen readers.
     * If you pass in an `aria-label`, <Select.Label>.
     */
    'aria-label'?: string;
    /**
     * Optional className for additional styling.
     */
    className?: string;
    /**
     * Name of the form element, which triggers the generation of hidden key/value form fields (e.g. `name=$name[$key]`).
     *
     * See: https://headlessui.com/react/listbox#using-with-html-forms
     */
    name?: string;
    /**
     * Optional className for additional options menu styling.
     *
     * When not using the compact variant, if optionsClassName is provided please
     * include the width property to define the options menu width.
     */
    optionsClassName?: string;
    /**
     * Indicates that field is required for form to be successfully submitted
     */
    required?: boolean;
    /**
     * Text under the textarea used to provide validation hints or error message to describe the input error.
     */
    fieldNote?: ReactNode;
    /**
     * Visible text label for the component.
     */
    label?: string;
    /**
     * Whether the label is adjacent to the field (horizontal) or above the field (vertical)
     *
     * **Default is `"vertical"`**.
     */
    labelLayout?: 'vertical' | 'horizontal';
    /**
     * Whether it should show the field hint or not
     *
     * **Default is `"false"`**.
     */
    showHint?: boolean;
    /**
     * Status for the field state
     *
     * **Default is `"default"`**.
     */
    status?: 'default' | Extract<Status, 'warning' | 'critical'>;
    /**
     * Add additional descriptive text for the field name
     */
    subLabel?: ReactNode;
};
type SelectLabelProps = ExtractProps<typeof Label> & {
    disabled?: boolean;
    required?: boolean;
    showHint?: boolean;
    /**
     * Add additional descriptive text for the field name
     */
    subLabel?: ReactNode;
};
type SelectOptionsProps = ExtractProps<typeof ListboxOptions>;
type SelectOptionProps = ExtractProps<typeof ListboxOption> & Pick<PopoverListItemProps, 'subLabel'> & {
    optionClassName?: string;
};
type SelectButtonProps = ExtractProps<typeof ListboxButton> & {
    /**
     * Icon override for component. Default is 'chevron-down'
     */
    icon?: Extract<IconName, 'chevron-down'>;
    /**
     * Indicates state of the select, used to style the button.
     */
    isOpen?: boolean;
};
type SelectButtonWrapperProps = {
    /**
     * Text placed inside the button to describe the field.
     */
    children?: ReactNode;
    /**
     * Optional className for additional styling.
     */
    className?: string;
    /**
     * Icon override for component. Default is 'chevron-down'
     */
    icon?: Extract<IconName, 'chevron-down'>;
    /**
     * Indicates state of the select, used to style the button.
     */
    isOpen?: boolean;
    /**
     * custom click handler for the built-in or wrapper button
     */
    onClick?: MouseEventHandler;
    /**
     * Whether we should truncate the text displayed in the select field
     */
    shouldTruncate?: boolean;
    /**
     * Status for the field state
     *
     * **Default is `"default"`**.
     */
    status?: 'default' | Extract<Status, 'warning' | 'critical'>;
};
/**
 * `import {Select} from "@chanzuckerberg/eds";`
 *
 * A popover component that reveals or hides a list of options from which to select.
 *
 * Supports controlled and uncontrolled behavior, using a render prop in the latter case.
 *
 * See more at <https://headlessui.com/react/menu>
 *
 */
export declare function Select({ 'aria-label': ariaLabel, children, className, disabled, fieldNote, id, label, labelLayout, name, optionsClassName, required, showHint, status, onChange: theirOnChange, subLabel, ...other }: SelectProps): React.JSX.Element;
export declare namespace Select {
    var displayName: string;
    var Button: {
        (props: SelectButtonProps): React.JSX.Element;
        displayName: string;
    };
    var ButtonWrapper: React.ForwardRefExoticComponent<SelectButtonWrapperProps & React.RefAttributes<HTMLButtonElement>>;
    var Label: {
        ({ children: label, required, className, disabled, showHint, subLabel, }: SelectLabelProps): React.JSX.Element;
        displayName: string;
    };
    var Option: {
        (props: SelectOptionProps): React.JSX.Element;
        displayName: string;
    };
    var Options: {
        (props: SelectOptionsProps): React.JSX.Element;
        displayName: string;
    };
}
/**
 * The component functioning as a styling for the trigger, selection arrow, and space to
 * show the current value.
 */
export declare const SelectButtonWrapper: React.ForwardRefExoticComponent<SelectButtonWrapperProps & React.RefAttributes<HTMLButtonElement>>;
export {};