@urbicon-ui/blocks 6.36.0 → 6.37.0

package/dist/components/QRCode/QRCode.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import type { QRCodeProps } from './index';
+  import { qrCodeVariants, type QRCodeVariants } from './qr-code.variants';
+  import { encodeQr } from './qr-encode';
+
+  const bt = useBlocksI18n();
+
+  let {
+    value,
+    errorCorrection = 'M',
+    size = 160,
+    quietZone = 4,
+    foreground = 'currentColor',
+    background = 'transparent',
+    minVersion,
+    maxVersion,
+    frame = 'none',
+    onError,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    id,
+    'aria-label': ariaLabel
+  }: QRCodeProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: QRCodeVariants = $derived({ frame });
+  const styles = $derived(qrCodeVariants(variantProps));
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'QRCode', preset, variantProps, slotClassesProp)
+  );
+
+  // Encode once per (value, level, bounds) change. A too-long payload surfaces
+  // as an `error` result (visible fallback) rather than throwing through render.
+  // Kept pure — the `onError` side effect runs from an $effect below, so a
+  // consumer handler may safely mutate its own state (a callback fired inside
+  // `$derived.by` would trip `state_unsafe_mutation`).
+  const result = $derived.by((): { modules: boolean[][] } | { error: Error } => {
+    try {
+      return { modules: encodeQr(value, errorCorrection, { minVersion, maxVersion }) };
+    } catch (error) {
+      return { error: error instanceof Error ? error : new Error(String(error)) };
+    }
+  });
+
+  $effect(() => {
+    if ('error' in result) onError?.(result.error);
+  });
+
+  const dimension = $derived('modules' in result ? result.modules.length + quietZone * 2 : 0);
+
+  // One SVG path for all dark modules — a single element scales crisply and
+  // keeps the DOM light even for large codes (hundreds of modules).
+  const pathData = $derived.by(() => {
+    if (!('modules' in result)) return '';
+    const mod = result.modules;
+    let d = '';
+    for (let y = 0; y < mod.length; y++) {
+      for (let x = 0; x < mod.length; x++) {
+        if (mod[y][x]) d += `M${x + quietZone} ${y + quietZone}h1v1h-1z`;
+      }
+    }
+    return d;
+  });
+
+  const label = $derived(ariaLabel ?? bt('accessibility.qrCode'));
+</script>
+
+<span
+  {id}
+  class={unstyled
+    ? [slotClasses?.root, className].filter(Boolean).join(' ')
+    : styles.root({ class: [slotClasses?.root, className] })}
+>
+  {#if 'modules' in result}
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 {dimension} {dimension}"
+      shape-rendering="crispEdges"
+      role="img"
+      aria-label={label}
+      class={unstyled ? (slotClasses?.svg ?? '') : styles.svg({ class: slotClasses?.svg })}
+    >
+      {#if background !== 'transparent' && background !== 'none'}
+        <rect width={dimension} height={dimension} fill={background} />
+      {/if}
+      <path d={pathData} fill={foreground} />
+    </svg>
+  {:else}
+    <span
+      role="img"
+      aria-label={label}
+      style="width: {size}px; height: {size}px;"
+      class={unstyled
+        ? (slotClasses?.fallback ?? '')
+        : styles.fallback({ class: slotClasses?.fallback })}
+    >
+      {result.error.message}
+    </span>
+  {/if}
+</span>

package/dist/components/QRCode/QRCode.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { QRCodeProps } from './index.js';
+declare const QRCode: import("svelte").Component<QRCodeProps, {}, "">;
+type QRCode = ReturnType<typeof QRCode>;
+export default QRCode;

package/dist/components/QRCode/index.d.ts

@@ -0,0 +1,74 @@
+import type { QRCodeSlots, QRCodeVariants } from './qr-code.variants.js';
+/**
+ * @description Renders any text or URL as a scannable QR code — SVG output, no
+ * runtime dependency. The encoder (`encodeQr`, exported alongside) is a from-
+ * scratch ISO/IEC 18004 implementation covering numeric / alphanumeric / byte
+ * modes, all 40 versions, the four error-correction levels, and automatic mask
+ * selection; every generated matrix is verified to round-trip through a real
+ * decoder. This completes the auth package's zero-dependency 2FA story: pass an
+ * `otpauth://` URI here instead of wiring an external QR library into
+ * `TwoFactorManager`'s `qr` snippet.
+ *
+ * @tag display
+ * @related PinInput
+ * @stability beta
+ *
+ * @example
+ * ```svelte
+ * <QRCode value="https://ui.urbicon.de" size={180} frame="card" />
+ * ```
+ *
+ * @example Encoding a 2FA otpauth URI with high error correction
+ * ```svelte
+ * <QRCode value={otpauthUri} errorCorrection="H" size={200} frame="card" />
+ * ```
+ */
+export interface QRCodeProps extends QRCodeVariants {
+    /** The data to encode — text, a URL, an `otpauth://` URI, etc. */
+    value: string;
+    /**
+     * 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%. @default 'M'
+     */
+    errorCorrection?: 'L' | 'M' | 'Q' | 'H';
+    /** Rendered edge length in pixels (the code is square). @default 160 */
+    size?: number;
+    /** Width of the mandatory light border, in modules. The spec requires ≥4. @default 4 */
+    quietZone?: number;
+    /**
+     * Colour of the dark modules — any CSS colour. Defaults to `currentColor` so
+     * the code inherits the surrounding text colour. For guaranteed scannability
+     * keep a high-contrast dark-on-light pairing (see `frame="card"`).
+     * @default 'currentColor'
+     */
+    foreground?: string;
+    /** Background fill — any CSS colour. @default 'transparent' */
+    background?: string;
+    /** Lower bound on the QR version (1–40) to force a minimum size. */
+    minVersion?: number;
+    /** Upper bound on the QR version (1–40); encoding throws if the data does not fit. */
+    maxVersion?: number;
+    /** Called when the data cannot be encoded (e.g. too long for `maxVersion`). */
+    onError?: (error: Error) => void;
+    /** Extra classes merged onto the root wrapper. */
+    class?: string;
+    /** Remove all default tv() classes — only user-provided classes apply. */
+    unstyled?: boolean;
+    /**
+     * Per-slot class overrides merged with tv() styles. Slots: root (what `class`
+     * also targets) | svg | fallback.
+     */
+    slotClasses?: Partial<Record<QRCodeSlots, string>>;
+    /** Apply a named preset registered via `<BlocksProvider presets={{ QRCode: {...} }}>`. */
+    preset?: string;
+    /**
+     * 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-label'?: string;
+    /** Root id. */
+    id?: string;
+}
+export { default as QRCode } from './QRCode.svelte';
+export { type QRCodeVariants, qrCodeVariants } from './qr-code.variants.js';
+export { encodeQr, type QrEcl } from './qr-encode.js';

package/dist/components/QRCode/index.js

@@ -0,0 +1,3 @@
+export { default as QRCode } from './QRCode.svelte';
+export { qrCodeVariants } from './qr-code.variants.js';
+export { encodeQr } from './qr-encode.js';

package/dist/components/QRCode/qr-code.variants.d.ts

@@ -0,0 +1,25 @@
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const qrCodeVariants: ((props?: {
+    frame?: "none" | "card" | undefined;
+} | undefined) => {
+    root: (props?: ({
+        frame?: "none" | "card" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    svg: (props?: ({
+        frame?: "none" | "card" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    fallback: (props?: ({
+        frame?: "none" | "card" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
+};
+export type QRCodeVariants = VariantProps<typeof qrCodeVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type QRCodeSlots = SlotNames<typeof qrCodeVariants>;

package/dist/components/QRCode/qr-code.variants.js

@@ -0,0 +1,24 @@
+import { tv } from '../../utils/variants.js';
+export const qrCodeVariants = tv({
+    slots: {
+        root: ['inline-flex items-center justify-center'],
+        svg: ['block h-auto max-w-full'],
+        fallback: [
+            'inline-flex items-center justify-center text-center text-xs',
+            'border border-dashed border-border-default text-text-tertiary bg-surface-subtle rounded-modify p-2'
+        ]
+    },
+    variants: {
+        // Optional framing so the code can sit on a guaranteed-light card (the
+        // scan-safe default look) without the consumer hand-building one.
+        frame: {
+            none: {},
+            card: {
+                root: 'bg-surface-base border border-border-subtle rounded-lg p-3 shadow-[var(--blocks-shadow-sm)]'
+            }
+        }
+    },
+    defaultVariants: {
+        frame: 'none'
+    }
+});

package/dist/components/QRCode/qr-encode.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Zero-dependency QR Code encoder (ISO/IEC 18004).
+ *
+ * Produces the module matrix for a piece of text — no rendering, no runtime
+ * dependency. Supports numeric / alphanumeric / byte segment modes (whichever
+ * is most compact for the input), all 40 versions, the four error-correction
+ * levels, and automatic data-mask selection by the standard penalty rules.
+ *
+ * The algorithm follows the reference structure of Project Nayuki's public
+ * QR generator (the canonical, spec-faithful design); the code here is an
+ * independent TypeScript implementation of the ISO standard.
+ */
+export type QrEcl = 'L' | 'M' | 'Q' | 'H';
+/**
+ * Encode `text` into a QR module matrix (`true` = dark). The returned matrix has
+ * no quiet zone — the renderer adds it. Throws when the text does not fit any
+ * version at the requested ECC level.
+ */
+export declare function encodeQr(text: string, ecl?: QrEcl, opts?: {
+    minVersion?: number;
+    maxVersion?: number;
+}): boolean[][];