import { type StoryObj } from "@storybook/react-vite";
/**
 * Stories are grouped into sections (Basics, States, Value, Options,
 * Multi-select, Multi-select with avatars, Composition, Docs-only) by order
 * plus an explicit `name` on each.
 *
 * They are not collapsible folders: Storybook builds hierarchy from `title`
 * only, never from a story's `name`. See the note at the bottom of this file.
 */
declare const meta: {
    title: string;
    component: import("react").ForwardRefExoticComponent<import("../src").SelectProps<import("../src").OptionMinimal, boolean, import("react-select").GroupBase<import("../src").OptionMinimal>> & import("react").RefAttributes<unknown>>;
};
export default meta;
type Story = StoryObj<typeof meta>;
export declare const Base: {
    name: string;
    args: {
        options: ({
            value: number;
            label: string;
            isDisabled?: undefined;
        } | {
            value: number;
            label: string;
            isDisabled: boolean;
        })[];
        onChange: import("storybook/actions").HandlerFunction;
    };
};
export declare const Width: {
    name: string;
    args: {};
    render: () => import("react").JSX.Element;
};
export declare const IsError: {
    name: string;
    args: {
        isError: boolean;
        options: ({
            value: number;
            label: string;
            isDisabled?: undefined;
        } | {
            value: number;
            label: string;
            isDisabled: boolean;
        })[];
        onChange: import("storybook/actions").HandlerFunction;
    };
};
export declare const LoadingOptions: {
    name: string;
    args: {
        isLoading: boolean;
        options: ({
            value: number;
            label: string;
            isDisabled?: undefined;
        } | {
            value: number;
            label: string;
            isDisabled: boolean;
        })[];
        onChange: import("storybook/actions").HandlerFunction;
    };
};
export declare const IsClearable: {
    name: string;
    args: {
        isClearable: boolean;
        options: ({
            value: number;
            label: string;
            isDisabled?: undefined;
        } | {
            value: number;
            label: string;
            isDisabled: boolean;
        })[];
        onChange: import("storybook/actions").HandlerFunction;
    };
};
export declare const WithValue: {
    name: string;
    args: {
        value: number;
        width: string;
        options: ({
            value: number;
            label: string;
            isDisabled?: undefined;
        } | {
            value: number;
            label: string;
            isDisabled: boolean;
        })[];
        onChange: import("storybook/actions").HandlerFunction;
    };
};
export declare const WithDefaultValue: {
    name: string;
    args: {
        defaultValue: {
            value: number;
            label: string;
            isDisabled?: undefined;
        } | {
            value: number;
            label: string;
            isDisabled: boolean;
        };
        options: ({
            value: number;
            label: string;
            isDisabled?: undefined;
        } | {
            value: number;
            label: string;
            isDisabled: boolean;
        })[];
        onChange: import("storybook/actions").HandlerFunction;
    };
};
export declare const GroupedOptions: {
    name: string;
    args: {
        options: ({
            label: string;
            options: ({
                value: number;
                label: string;
                isDisabled?: undefined;
            } | {
                value: number;
                label: string;
                isDisabled: boolean;
            })[];
        } | {
            label: string;
            options: {
                value: string;
                label: string;
            }[];
        })[];
        onChange: import("storybook/actions").HandlerFunction;
    };
};
/**
 * Redesigned in DES-171: white avatar tags, stacked chevron, no focus ring.
 *
 * **Font size 14px and height 44px, not the design's 16px / 48px** — both to
 * match the single-select and the rest of the form controls, which are still
 * on the legacy type scale. Reasoning in `Select.tsx`.
 */
export declare const MultiSelect: {
    name: string;
    args: {
        isMulti: boolean;
        options: ({
            value: number;
            label: string;
            isDisabled?: undefined;
        } | {
            value: number;
            label: string;
            isDisabled: boolean;
        })[];
        onChange: import("storybook/actions").HandlerFunction;
    };
};
/**
 * The avatarless tag — blue fill, unchanged in colour. This is what the five
 * existing multi-selects render.
 */
export declare const MultiSelectWithDefault: {
    name: string;
    args: {
        defaultValue: ({
            value: number;
            label: string;
            isDisabled?: undefined;
        } | {
            value: number;
            label: string;
            isDisabled: boolean;
        })[];
        isMulti: boolean;
        options: ({
            value: number;
            label: string;
            isDisabled?: undefined;
        } | {
            value: number;
            label: string;
            isDisabled: boolean;
        })[];
        onChange: import("storybook/actions").HandlerFunction;
    };
};
/**
 * Regression test for MON-1682: the menu must close when you click away, and keep
 * closing after you have picked something.
 *
 * The multi-select keeps the menu open and the input focused on select, so an
 * outside click only closes it by blurring react-select's `<input>`. A parent
 * re-render used to remount that input and drop the focus silently. See
 * `CustomContainer` in `Select.tsx`.
 */
export declare const MultiSelectClosesOnOutsideClick: Story;
export declare const CreatableSelect: Story;
/**
 * The `default` state from the design: nothing selected yet.
 */
export declare const MultiSelectWithAvatarsEmpty: Story;
/**
 * The `filled` state. Tags wrap onto a second row, showing the 8px gap and the
 * growing control height.
 */
export declare const MultiSelectWithAvatarsFilled: Story;
/**
 * The `selected` state: menu open, avatars in the option rows and the tags.
 */
export declare const MultiSelectWithAvatarsMenuOpen: Story;
/**
 * Avatars are a multi-select affordance — a single-select ignores them.
 */
export declare const SingleSelectIgnoresAvatars: Story;
export declare const MatchingInputHeight: Story;
export declare const LabeledSelect: {
    name: string;
    render: (args: any) => import("react").JSX.Element;
};
export declare const HIDE_Docs_ListGoodLength: Story;
export declare const HIDE_Docs_ListTooLong: Story;
export declare const HIDE_Docs_Sorted: Story;
export declare const HIDE_Docs_RandomSorting: Story;
export declare const HIDE_Docs_Grouped: Story;
export declare const HIDE_Docs_Ungrouped: Story;
/**
 * Sections, not folders — why.
 *
 * Real folders need one `title` each (`Forms/Select/Multi-select`, …), so this
 * file would have to split. Story ids are `toId(title, exportName)`, so that
 * renames every id and resets all `Select` Chromatic baselines; `name` does
 * not. `Select.docs.mdx` also references six exports here and would need
 * repointing. Worth doing on its own, not as a rider on a feature branch.
 */