---

## NumberInput
**Stability:** beta — the API shape is settled and documented; behaviour-level fixes may still land as breaking changes in a minor.
Generic numeric input with min/max/step bounds, stepper buttons,
and Arrow-key / mouse-wheel increment. Built on `Input`, so it inherits
labels, validation, sizes and variants. Values are plain numbers (not minor
units) — `CurrencyInput` is the domain-specific specialization for money.

The field accepts a leading `-`, a single decimal separator (`.` or `,`), and
clamps to `[min, max]` on blur; the stepper and Arrow keys clamp immediately.
Set `precision` to fix the number of decimal places.

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

### Examples
```svelte
<script>
  let qty = $state(1);
</script>
<NumberInput label="Quantity" bind:value={qty} min={0} max={99} step={1} />
```

```svelte
<NumberInput label="Rate" bind:value={rate} min={0} max={1} step={0.05} precision={2} />
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| autoComplete | `string` | no |  | HTML autocomplete hint for browser autofill. |
| 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. |
| 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. |
| hideStepper | `boolean` | no | false | Hide the up/down stepper buttons (Arrow keys + wheel still work). |
| 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`). |
| max | `number` | no |  | Maximum allowed value. Clamped on step / Arrow / blur. |
| min | `number` | no |  | Minimum allowed value. Clamped on step / Arrow / blur. |
| mint | `InputProps['mint']` | no | 'none' | Micro-interaction preset forwarded to the inner Input. Redeclared from InputProps so the inheritance is a documented contract rather than an accident of the Omit list. |
| mint | `MintProp` | no | 'none' | Micro-interaction preset applied to the input element. Only applies while not disabled. |
| name | `string` | no |  | Shared `name` for a hidden input for native form submission. |
| onLeftIconClick | `() => void` | no |  | When provided, the left icon becomes a clickable button. |
| onRightIconClick | `() => void` | no |  | When provided, the right icon becomes a clickable button. |
| onValueChange | `(value: number | null) => void` | no |  | Fires after the value changes (typing, stepper, Arrow, wheel, or clamp). |
| 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. |
| precision | `number` | no |  | Fixed number of decimal places for display and rounding. When unset, the value is shown as typed and the step's own decimals drive rounding. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ NumberInput: {...} }}>`. Resolved against the **`NumberInput`** key, not `Input`: a preset written for the number field would otherwise style every text field under the provider. `defaults.Input` still applies — the resolved preset reaches Input as instance `slotClasses`, so it wins over the provider's input-wide defaults and loses to `slotClasses` / `class` written on this component. A preset's `overrides` rules are matched against what you wrote here plus Input's own variant defaults; an axis Input derives or coerces for itself (`tier`, `messageType`, `error`, `hasRightIcon`, `iconPosition`) can match the wrong state — #360. |
| 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 |  | A custom right-side adornment. Overrides the stepper — pair with `hideStepper` or provide your own controls. |
| 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<NumberInputSlots | keyof NonNullable<InputProps['slotClasses']>, string>>` | no |  | Per-slot class overrides. Carries NumberInput's own two slots — `stepper` (the button column) and `stepperButton` — on top of every `InputProps` slot. One record reaches both: the stepper is painted here and the rest travels on to the inner field. From `<BlocksProvider>`, everything under `NumberInput` reaches both halves; `defaults.Input` reaches the field only. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| 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. |
| step | `number` | no | 1 | Increment applied by the stepper buttons, Arrow keys, and wheel. |
| unstyled | `boolean` | no |  | Remove all default tv() classes — only user-provided classes apply. |
| value | `number | null` | no |  | Current numeric value. `null` when the field is empty. Supports `bind:value`. |

Inherited from:
- Omit<InputProps, 'value' | 'type' | 'inputmode' | 'clearable' | 'onClear' | '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 VariantProps = Omit<
  Exclude<Parameters<T>[0], undefined>,
  'class'
>
```

```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 SlotNames = keyof ReturnType<T> & string
```

### Slots (slotClasses keys)
`stepper`, `stepperButton`