import type { Meta, StoryObj } from '@storybook/react';
import { Select } from './select.js';
/**
 * The `Select` component provides a dropdown selection field.
 *
 * Features include:
 * - Single and multiple selection modes
 * - Option icons
 * - Searchable dropdown
 * - Different selection indicators (radio, checkbox, checkmark)
 * - Customizable content alignment
 * - Disabled options support
 *
 * ## Select Customization
 * The select component can be customized using two different props:
 *
 * 1. `className`: Styles for the trigger button and selected item display
 *    - Controls the width, appearance, and layout of the select trigger
 *    - Styles the selected item display in the trigger
 *    - Example: `[&]:!w-[120px]` for fixed width of select trigger
 *
 * 2. `contentClassName`: Styles for the popover content and its elements
 *    - Controls the appearance of the dropdown popover
 *    - Styles the list container, list items, and search input
 *    - Example: `[&_.select\\_\\_content]:!w-[120px]` for fixed width popover
 *
 * Available class patterns for targeting specific elements:
 * - `.select__content`: Dropdown content container
 * - `.select__list`: Options list container
 * - `.select__list-item`: Individual option item
 * - `.select__list-item-favorite`: Favorite option item
 * - `.select__search`: Search input container
 * - `.select__list-item--selected`: Selected item in the list
 *
 * Example of custom styling:
 * ```tsx
 * <Select
 *   className={String.raw`
 *     [&]:!w-[120px]
 *     [&_.select\\_\\_item--selected]:text-green-500
 *   `}
 *   contentClassName={String.raw`
 *     [&_.select\\_\\_content]:!w-[120px]
 *     [&_.select\\_\\_list]:border-2
 *     [&_.select\\_\\_list-item]:text-red-400
 *   `}
 * />
 * ```
 *
 * > **Note:** This component does not have built-in validation. If you need built-in validation
 * > you can use the [EnumField](?path=/docs/scalars-enum-field--readme)
 * > component.
 */
declare const meta: Meta<typeof Select>;
export default meta;
type Story = StoryObj<typeof Select>;
export declare const Default: Story;
export declare const WithDescription: Story;
export declare const Required: Story;
export declare const WithDefaultValue: Story;
export declare const Disabled: Story;
export declare const WithError: Story;
export declare const WithWarning: Story;
export declare const Searchable: Story;
export declare const NotClearable: Story;
export declare const WithDisabledOption: Story;
export declare const Multiple: Story;
export declare const WithCheckmark: Story;
export declare const WithIcon: Story;
export declare const WithLongOptionLabel: Story;
export declare const WithCustomizedSelect: Story;
export declare const WithDifferencesAddition: Story;
export declare const WithDifferencesRemoval: Story;
export declare const WithDifferencesMixed: Story;
//# sourceMappingURL=select.stories.d.ts.map