---

## CurrencyInput
Locale-aware monetary input that stores values in **minor units**
(cents for EUR/USD, pennies for GBP, etc.). While focused the user types raw
digits with a single decimal separator; on blur the value is reformatted with
the locale's grouping separators. The currency symbol is rendered as a static
adornment (left or right of the field) and stays visible at all times.

Storing cents as integers avoids floating-point drift when summing, sorting,
or persisting amounts. Parsing also goes through string splits — never
`parseFloat * factor` — so values like `1,005` round to the expected
`100` minor units (instead of `99` due to IEEE-754 drift). Use
 for currencies with non-2 decimal
places (JPY = 0, BHD = 3).

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

### Examples
```svelte
<script>
let priceCents = $state(1234_56); // 1.234,56 €
</script>
<CurrencyInput label="Price" bind:value={priceCents} />
```

```svelte
<CurrencyInput
label="Amount"
bind:value={amountCents}
locale="en-US"
currency="USD"
symbolPosition="prefix"
/>
```

```svelte
<CurrencyInput bind:value={yen} locale="ja-JP" currency="JPY" precision={0} />
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| currency | `string` | no | 'EUR' | ISO-4217 currency code. Determines the symbol when  is `'prefix'` or `'suffix'`. |
| locale | `string` | no | 'de-DE' | BCP 47 locale used for formatting (`Intl.NumberFormat`). Controls grouping separator (`.` vs `,`) and decimal separator. Pass `'auto'` to defer to the runtime locale (`Intl.NumberFormat().resolvedOptions().locale`) — i.e. the user's browser language. Note that the runtime locale on the server (Node) and in the browser typically differ, so SSR pages using `'auto'` may briefly show a different format on initial render before hydration. `currency` is intentionally **not** auto-detected, since it is orthogonal to locale (a `de-CH` user may still bill in EUR). |
| name | `string` | no |  | Shared `name` for native form submission. When set, a hidden input is rendered carrying the integer minor-unit value (matching ) — never the locale-formatted display string. The visible Input itself stays unnamed so the formatted text is not submitted alongside.  Empty / `null` values submit as `""` so the field still appears in the FormData payload (consumers can disambiguate "untouched" via server-side schema parsing). |
| onValueChange | `(cents: number | null) => void` | no |  | Fires whenever the parsed value changes. Receives the new value in minor units (or `null`). |
| precision | `number` | no | 2 | Number of fractional digits stored in . For most currencies `2`; for JPY use `0`, for BHD/KWD use `3`. |
| symbolPosition | `CurrencySymbolPosition` | no | 'suffix' | Where the currency symbol is rendered as a static adornment. The symbol is shown in the input's left or right icon slot (always visible, including while focused) — it is never embedded in the editable text. Use `'none'` for headless numeric editing (no symbol shown at all). |
| value | `number | null` | no | null | Current monetary value in **minor units** (e.g. cents). Use `null` for "no value entered yet"; the input renders empty. |

Inherited from:
- Omit<
    InputProps,
    | 'type'
    | 'value'
    | 'onClear'
    | 'inputmode'
    | 'oninput'
    | 'onchange'
    | 'onblur'
    | 'onfocus'
    | 'name'
  > (omit-pattern)