---

## Input
Text input with labels, validation states, icons, and clearable functionality.
Supports the outlined, filled, ghost, underline and bare visual variants, with
automatic ARIA linking.

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

### Examples
```svelte
<Input label="Email" placeholder="name@example.com" required />
```

### Variants
- intent: danger, default, success, warning (default: default)
- variant: bare, filled, ghost, outlined, underline (default: outlined)
- size: lg, md, sm, xl, xs (default: md)
- disabled: true (default: false)
- hasLeftIcon: true (default: false)
- hasRightIcon: true (default: false)
- iconPosition: left, right (default: left)
- readonly: true (default: false)
- required: true (default: false)
- tier: commit, modify (default: modify)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLInputAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'size' | 'class' | 'disabled' | 'readonly' | 'children') |
| ...InputVariants | `VariantProps` | no |  | Styling variants from InputVariants |
| autoComplete | `string` | no |  | HTML autocomplete hint for browser autofill. |
| children | `Snippet` | no |  | Snippet content rendered below the input for advanced layouts. |
| class | `string` | no |  | Extra classes merged onto the root wrapper element. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| clearable | `boolean` | no | false | Show a clear button when the input has a value. Press Escape or click the button to clear. Fires `onClear` after clearing. |
| disabled | `boolean` | no | false | disabled property |
| error | `string` | no |  | Error message below the input. When set, overrides `helper` and forces danger border styling regardless of `intent`. |
| helper | `string` | no |  | Helper text below the input — hidden when `error` is present. |
| label | `string` | no |  | Label text displayed above the input, auto-linked via `for`/`id`. |
| leftIcon | `Snippet` | no |  | Icon snippet rendered on the left side of the input field. |
| leftIconAriaLabel | `string` | no |  | Accessible label for the clickable left icon button. Required when `onLeftIconClick` is set so screen-reader users hear a name for the button (icons inside are `aria-hidden`). |
| mint | `MintProp` | no | 'none' | Micro-interaction preset applied to the input element. Only applies while not disabled. |
| onClear | `() => void` | no |  | Fired after the value is cleared via the clear button or Escape key. |
| onLeftIconClick | `() => void` | no |  | When provided, the left icon becomes a clickable button. |
| onRightIconClick | `() => void` | no |  | When provided, the right icon becomes a clickable button. |
| persistDebounceMs | `number` | no | 300 | Debounce interval (ms) for storage writes. |
| persistKey | `string` | no |  | Key for persisting the input value to storage. |
| persistNamespace | `string` | no |  | Namespace (e.g. user id) to scope the persist key. |
| persistStorage | `'localStorage' | 'sessionStorage'` | no | 'localStorage' | Storage backend for persistence. |
| persistVersion | `number` | no | 1 | Version stamp included in the storage key. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Input: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| readonly | `boolean` | no | false | readonly property |
| required | `boolean` | no | false | Adds a required asterisk to the label and sets the native `required` attribute. |
| rightIcon | `Snippet` | no |  | Icon snippet rendered on the right side of the input field. |
| rightIconAriaLabel | `string` | no |  | Accessible label for the clickable right icon button. Required when `onRightIconClick` is set so screen-reader users hear a name for the button (icons inside are `aria-hidden`). |
| slotClasses | `Partial<Record<InputSlots, string>>` | no |  | Per-slot class overrides merged with tv() styles. Slots: wrapper (root — what `class` also targets) | container | base (the `<input>` element) | label | requiredMark | message | iconContainer | iconButton | iconDecoration. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| unstyled | `boolean` | no |  | Remove all default tv() classes — only user-provided classes apply. |
| intent | `'danger' | 'default' | 'success' | 'warning'` | no | default | Controls the color theme and semantic meaning of the Input. Affects the overall appearance and user perception. Available options: danger, default, success, warning. |
| variant | `'bare' | 'filled' | 'ghost' | 'outlined' | 'underline'` | no | outlined | Controls the visual style and presentation of the Input. Determines the component's visual treatment. Available options: bare, filled, ghost, and 2 more. |
| size | `'lg' | 'md' | 'sm' | 'xl' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Input. Affects the component's physical footprint. Available options: lg, md, sm, and 2 more. |
| hasLeftIcon | `'true'` | no | false | Controls the hasLeftIcon behavior and appearance of the Input component. Available options: true. |
| hasRightIcon | `'true'` | no | false | Controls the hasRightIcon behavior and appearance of the Input component. Available options: true. |
| iconPosition | `'left' | 'right'` | no | left | Controls the iconPosition behavior and appearance of the Input component. Available options: left, right. |
| tier | `'commit' | 'modify'` | no | modify | Selects the semantic radius tier of the Input — the shape family it belongs to (`--radius-commit`/`-modify`/`-contain`/`-bridge`). Shape is retuned per family in your theme, so this picks the family rather than a pixel value. Available options: commit, modify. |

Inherited from:
- Omit<InputVariants, 'error' | 'messageType'> (omit-pattern)
- Omit<HTMLInputAttributes, 'size' | 'class' | 'disabled' | 'readonly' | 'children'> (omit-pattern)

### Types
```ts
type MintProp = | MintName
  | { name: MintName; config?: MintConfig & Record<string, unknown> }
  | Array<MintName>
  | Array<MintName | { name: MintName; config?: MintConfig & Record<string, unknown> }>
```

```ts
type MintName = BuiltinMintName | 'none' | (string & {})
```

```ts
interface MintConfig {
/**
   * `hover` and `focus` hold the effect while the pointer/visible focus stays
   * on the element; `click` and `load` run it once.
   */
  trigger?: 'hover' | 'click' | 'focus' | 'load';
  /**
   * Effect duration in ms. Written as an inline per-effect custom property
   * (`--blocks-mint-<effect>-duration`), so the CSS transition/animation
   * actually runs at this speed; unset, the theme duration tokens apply.
   */
  duration?: number;
  /** Delay in ms before the effect applies. */
  delay?: number;
  /**
   * CSS easing for the effect (`--blocks-mint-<effect>-easing` inline);
   * unset, the per-effect theme default applies.
   */
  easing?: string;
  disabled?: boolean;
}
```

```ts
type BuiltinMintName = (typeof BUILTIN_MINT_NAMES)[number]
```

### Slots (slotClasses keys)
`wrapper`, `container`, `base`, `label`, `requiredMark`, `message`, `iconContainer`, `iconButton`, `iconDecoration`