---

## QRCode
Renders any text or URL as a scannable QR code. The output is a
self-contained SVG with no runtime dependency: the encoder (`encodeQr`,
exported alongside) covers numeric, alphanumeric and byte modes across all 40
versions and the four error-correction levels. Pass an `otpauth://` URI here
for 2FA enrolment instead of wiring an external QR library into
`TwoFactorManager`'s `qr` snippet.

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

### Examples
```svelte
<QRCode value="https://ui.urbicon.de" size={180} frame="card" />
```

```svelte
<QRCode value={otpauthUri} errorCorrection="H" size={200} frame="card" />
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| value | `string` | yes |  | The data to encode — text, a URL, an `otpauth://` URI, etc. |
| ...HTMLAttributes<HTMLSpanElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'class' | 'id' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'children') |
| ...QRCodeVariants | `VariantProps` | no |  | Styling variants from QRCodeVariants |
| aria-describedby | `string` | no |  | Id(s) of an element describing the code, set on the `role="img"` element beside its label. |
| aria-label | `string` | no |  | Accessible name announced for the code. Defaults to a localized "QR code". Avoid echoing sensitive payloads (e.g. a 2FA secret) into this label. |
| aria-labelledby | `string` | no |  | Id(s) of an element naming the code, set on the `role="img"` element; wins over `aria-label`. |
| background | `string` | no | 'transparent' | Background fill — any CSS colour. |
| class | `string` | no |  | Extra classes merged onto the root wrapper. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| errorCorrection | `'L' | 'M' | 'Q' | 'H'` | no | 'M' | Error-correction level: higher levels survive more damage/occlusion at the cost of a denser (larger) code. L≈7%, M≈15%, Q≈25%, H≈30%. |
| foreground | `string` | no | 'currentColor' | Colour of the dark modules — any CSS colour. Defaults to `currentColor` so the code inherits the surrounding text colour. For reliable scanning keep a high-contrast dark-on-light pairing (see `frame="card"`). |
| id | `string` | no |  | Root id. |
| maxVersion | `number` | no |  | Upper bound on the QR version (1–40). Data that does not fit calls `onError` and renders the fallback instead of encoding. |
| minVersion | `number` | no |  | Lower bound on the QR version (1–40) to force a minimum size. |
| onError | `(error: Error) => void` | no |  | Called when the data cannot be encoded (e.g. too long for `maxVersion`). |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ QRCode: {...} }}>`. |
| quietZone | `number` | no | 4 | Width of the mandatory light border, in modules. The spec requires ≥4. |
| size | `number` | no | 160 | Rendered edge length in pixels (the code is square). |
| slotClasses | `Partial<Record<QRCodeSlots, string>>` | no |  | Per-slot class overrides merged with tv() styles. Slots: root (what `class` also targets) | svg | fallback. 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. |

Inherited from:
- QRCodeVariants (external)
- Omit<
      HTMLAttributes<HTMLSpanElement>,
      'class' | 'id' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'children'
    > (omit-pattern)

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

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