import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as SearchStories from './search.stories';

<Meta of={SearchStories} />

<Title />
<Subtitle>A pre-configured search input with built-in icons and clear functionality.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Convenience Wrapper** — Always prefer the `Search` component over a manual `Input + Icon` composition for standard search fields.
> - **Clearing State** — Provide an `onClear` handler to improve UX for users searching for multiple terms.
> - **Standardized Sizing** — Use the `size` prop to ensure search fields align with other form inputs in the same view.