import { Select as SelectPrimitive } from '@base-ui/react/select';
import * as React from 'react';
export type SelectState = 'completed' | 'error' | 'success' | 'warning';
/**
 * PORTED FROM FIGMA `.input-dropdown` (22:3967), whose trigger is the `Input` frame inside it.
 *
 * THE TRIGGER NO LONGER MATCHES `Input`'s METRICS, and that is the point of this port. The old
 * docblock read: "the trigger deliberately matches Input's metrics — a select and a text field sit
 * next to each other in forms, and any difference in height reads as a mistake." Figma draws
 * `.input-text` at **36px** and `.input-dropdown` at **48px**, so the difference is not a mistake,
 * it is the design; and rule 1 makes "Figma drew two heights" outrank "one height looks tidier".
 * The binding deferred this as "a density decision about every control in the library" — it is
 * not, because Figma states a height per atom and each atom can take its own.
 *
 * The 48px is `h-12` with 16px horizontal padding and no vertical padding: Figma centres a 24px
 * line in a fixed frame rather than deriving the height from padding.
 */
declare const selectTriggerStyles: (props?: ({
    state?: "error" | "success" | "warning" | "completed" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
declare const selectPopupStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
declare const selectItemStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The chevron, which Figma FLIPS when the popup opens — `-rotate-180 -scale-x-100` on the open
 * variant's Action Icon. Only Dev Mode shows this: the REST extraction reported the same
 * `color/brand/white` glyph in every variant, which is what led the binding to record that "the
 * ONLY difference between hover and active in the whole node is the 10 -> 8 radius" and to decline
 * Figma's open state as visually indistinguishable from hover. It is not — the arrow turns over.
 *
 * `-scale-x-100` alongside the rotation is a mirror, which for a symmetrical chevron is a no-op, so
 * only the rotation is ported. The glyph is `color/brand/white` (13.97:1 on the field fill), not
 * the muted `--color-icon-secondary` this used to draw.
 */
declare const selectIconStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
export interface SelectOption<TValue extends string | number = string> {
    value: TValue;
    label: React.ReactNode;
    disabled?: boolean;
}
export interface SelectProps<TValue extends string | number = string> {
    options: SelectOption<TValue>[];
    value?: TValue;
    defaultValue?: TValue;
    onValueChange?: (value: TValue) => void;
    /**
     * @default 'Select…'
     */
    placeholder?: string;
    /** Visual state. `error` also sets `aria-invalid` on the trigger. */
    state?: SelectState;
    disabled?: boolean;
    /** Trailing glyph on the trigger. */
    triggerIcon?: React.ReactNode;
    /** Applied to the trigger. */
    className?: string;
    /** Applied to the popup. */
    popupClassName?: string;
    id?: string;
    /** Required unless the trigger is paired with a `<label>` or `aria-labelledby`. */
    'aria-label'?: string;
    'aria-labelledby'?: string;
}
/**
 * A dropdown that picks one value from a list.
 *
 * **Portalled.** The popup renders into `document.body`, outside the element carrying
 * `data-theme`, so the active theme is stamped onto it — otherwise the list renders in
 * light theme over a dark page.
 *
 * Takes an `options` array for the common case. For groups, separators or custom item
 * content, compose the parts: `SelectRoot`, `SelectTrigger`, `SelectPopup`,
 * `SelectItem`, `SelectGroup`, `SelectGroupLabel`, `SelectSeparator`.
 *
 * Use a `Select` when the value is one of a known set. Reach for a `Combobox` when the
 * list is long enough to need filtering.
 *
 * @example <Select aria-label="Plan" options={[{ value: 'pro', label: 'Pro' }]} />
 * @example <Select options={options} state="error" value={plan} onValueChange={setPlan} aria-label="Plan" />
 */
export declare function Select<TValue extends string | number = string>({ options, value, defaultValue, onValueChange, placeholder, state, disabled, triggerIcon, className, popupClassName, id, ...rest }: SelectProps<TValue>): React.ReactElement;
export declare const SelectRoot: typeof SelectPrimitive.Root;
export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
    state?: SelectState;
} & React.RefAttributes<HTMLButtonElement>>;
export declare const SelectValue: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
export declare const SelectIcon: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
export declare const SelectPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export declare const SelectPositioner: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/** Carries the same theme stamp as the convenience form; see {@link Select}. */
export declare const SelectPopup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export declare const SelectItem: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export declare const SelectItemText: React.NamedExoticComponent<Omit<import("@base-ui/react").SelectItemTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export declare const SelectItemIndicator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
export declare const SelectGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export { selectTriggerStyles, selectItemStyles, selectPopupStyles, selectIconStyles };
/**
 * shadcn's name for the popup. The same component as {@link SelectPopup}, exported under both
 * names because Base UI calls it a popup and shadcn calls it content — and a caller pasting
 * shadcn's composition should not have to know which library named which part.
 */
export declare const SelectContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/** shadcn's name for {@link SelectGroupLabel}. */
export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=select.d.ts.map