Storybook stories for the `Autocomplete` UI component, covering all major interaction modes including single/multiple select, creatable options, server-side filtering, and various configuration props. ## Key Components - **`Single`** — Basic single-select with no initial value - **`SingleWithValue`** — Single-select with a pre-selected option - **`SingleDisabled`** / **`MultipleDisabled`** — Disabled states - **`SingleWithError`** / **`MultipleWithError`** — Validation error display - **`Multiple`** — Multi-select with tag chips - **`MultipleWithValues`** — Multi-select with pre-selected values - **`MultipleWithMaxItems`** — Enforces a selection ceiling via `maxItems` - **`MultipleFreeSolo`** — Allows arbitrary text input without matching options - **`MultipleLimitTags`** — Collapses overflow tags via `limitTags` - **`MultipleCustomOptionRender`** — Custom `renderOption` with status indicator dots - **`Loading`** — Loading skeleton state with custom `loadingText` - **`SingleCreatable`** / **`MultipleCreatable`** — Create new options on the fly via `onCreateOption` - **`ServerSideFilter`** / **`ServerSideFilterCreatable`** — Disables client-side filtering; delegates to `onInputChange` with simulated async delay - **`SingleNoChevron`** / **`MultipleNoChevron`** — Hides the dropdown chevron icon via `showChevron={false}` - **`SingleKeepValueOnOpen`** — Preserves selected label text on focus via `clearOnOpen={false}` ## Usage Example ```typescript import { Autocomplete, AutocompleteOption } from '../components/ui/autocomplete'; const options: AutocompleteOption[] = [ { label: 'Enterprise', value: 'enterprise' }, { label: 'Startup', value: 'startup' }, ]; // Single select // Multi-select with creation + server-side filter addOption(input)} loading={isLoading} loadingText="Searching..." maxItems={5} limitTags={2} /> ```