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

<Meta of={InputOTPStories} />

<Title />
<Subtitle>A specialized input for one-time passwords and verification codes.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Max Length Sync** — Ensure the `maxLength` prop on `InputOTP` matches the exact number of `InputOTPSlot` children.
> - **Zero-Indexed Slots** — Each `InputOTPSlot` must have a unique `index` starting from 0.
> - **Input Masking** — For numeric-only codes, add `pattern="[0-9]*"` to the `InputOTP` to optimize the mobile keyboard display.