---

## PinInput
Segmented one-time-code / PIN entry — a row of single-character
cells with auto-advance, backspace-to-previous, paste-to-fill, and optional
masking. Purpose-built for the 2FA/OTP flow the auth package's
`TwoFactorManager` drives (pair it with `autoComplete="one-time-code"` for
iOS SMS autofill). The value is the concatenated string; `onComplete` fires
once every cell is filled.

**Import:** `import { PinInput } from '@urbicon-ui/blocks';`

### Examples
```svelte
<script>
  let code = $state('');
</script>
<PinInput bind:value={code} length={6} onComplete={(v) => verify(v)} />
```

```svelte
<PinInput length={8} type="alphanumeric" mask separator="-" groupSize={4} />
```

### Variants
- intent: danger, default, success, warning (default: default)
- variant: filled, ghost, outlined (default: outlined)
- size: lg, md, sm (default: md)
- disabled: true (default: false)
- messageType: error, helper (default: helper)
- readonly: true (default: false)
- required: true (default: false)
- tier: commit, modify (default: modify)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...PinInputVariants | `VariantProps` | no |  | Styling variants from PinInputVariants |
| aria-label | `string` | no |  | Accessible name for the cell group when no visible `label` is set. Each cell additionally announces its position ("digit 2 of 6"). |
| autoFocus | `boolean` | no | false | Focus the first empty cell on mount. |
| class | `string` | no |  | Extra classes merged onto the root element. |
| disabled | `boolean` | no | false | Whether the PinInput is disabled and non-interactive |
| error | `string` | no |  | Error message below the cells. When set it overrides `helper`, colours the cells danger, and sets `aria-invalid` on every cell. |
| groupSize | `number` | no | 3 | Cells per group when `separator` is set. |
| helper | `string` | no |  | Helper text below the cells — hidden when `error` is present. |
| id | `string` | no |  | Root id; the cells derive their ids and ARIA wiring from it. |
| label | `string` | no |  | Group label rendered above the cells and linked via `aria-labelledby`. |
| length | `number` | no | 6 | Length property for the PinInput component |
| mask | `boolean` | no | false | Render each filled cell as a masked dot (password style). |
| name | `string` | no |  | Shared `name` for a hidden input, for native form submission. |
| onComplete | `(value: string) => void` | no |  | Fires once when the last empty cell is filled, with the complete value. |
| onValueChange | `(value: string) => void` | no |  | Fires after any change (typing, paste, backspace) with the full value. |
| placeholder | `string` | no | '' | Placeholder character shown in every empty cell. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ PinInput: {...} }}>`. |
| readonly | `boolean` | no | false | Readonly property for the PinInput component |
| required | `boolean` | no | false | Adds a required asterisk to the label. |
| separator | `string` | no |  | Render a separator between groups of `groupSize` cells (e.g. `123-456`). A string is shown verbatim; omit for no separator. |
| slotClasses | `Partial<Record<PinInputSlots, string>>` | no |  | Per-slot class overrides merged with tv() styles. Slots: root (what `class` also targets) | label | group | cell | separator | message. |
| type | `'numeric' | 'alphanumeric'` | no | 'numeric' | Allowed characters and keyboard hint. `numeric` accepts `0-9` and sets a numeric inputmode; `alphanumeric` also accepts `A-Z`/`a-z`. |
| unstyled | `boolean` | no |  | Remove all default tv() classes — only user-provided classes apply. |
| uppercase | `boolean` | no | false | Uppercase alphanumeric input as it is entered — keeps a code like `ABCD` visually consistent regardless of caps lock. Ignored for `numeric`. |
| value | `string` | no |  | Current value — the concatenated cell characters. Supports `bind:value`. |
| intent | `'danger' | 'default' | 'success' | 'warning'` | no | default | Controls the color theme and semantic meaning of the PinInput. Affects the overall appearance and user perception. Available options: danger, default, success, warning. |
| variant | `'filled' | 'ghost' | 'outlined'` | no | outlined | Controls the visual style and presentation of the PinInput. Determines the component's visual treatment. Available options: filled, ghost, outlined. |
| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the PinInput. Affects the component's physical footprint. Available options: lg, md, sm. |
| messageType | `'error' | 'helper'` | no | helper | Controls the messageType behavior and appearance of the PinInput component. Available options: error, helper. |
| tier | `'commit' | 'modify'` | no | modify | Controls the tier behavior and appearance of the PinInput component. Available options: commit, modify. |

Inherited from:
- Omit<PinInputVariants, 'error'> (omit-pattern)

### Types
```ts
type SlotNames = keyof ReturnType<T> & string
```

```ts
type VariantProps = Omit<
  Exclude<Parameters<T>[0], undefined>,
  'class'
>
```

### Slots (slotClasses keys)
`root`, `label`, `group`, `cell`, `separator`, `message`