@vamos-ui/react 0.2.0 → 0.4.0

package/dist/components/_qr-core.js

@@ -0,0 +1,376 @@
+// QR Code Model 2 encoder (ISO/IEC 18004), byte mode, versions 1–40, all four error
+// correction levels, automatic mask choice. Pure and dependency-free so it runs in RSC.
+// Follows the structure of the public-domain-style reference algorithm (Nayuki).
+const ECL_INDEX = { L: 0, M: 1, Q: 2, H: 3 };
+const ECL_FORMAT = { L: 1, M: 0, Q: 3, H: 2 };
+// prettier-ignore
+const ECC_CODEWORDS_PER_BLOCK = [
+    [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+    [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
+    [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+    [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+];
+// prettier-ignore
+const NUM_ERROR_CORRECTION_BLOCKS = [
+    [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
+    [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
+    [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
+    [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81],
+];
+const bit = (x, i) => ((x >>> i) & 1) !== 0;
+function rawDataModules(ver) {
+    let result = (16 * ver + 128) * ver + 64;
+    if (ver >= 2) {
+        const numAlign = Math.floor(ver / 7) + 2;
+        result -= (25 * numAlign - 10) * numAlign - 55;
+        if (ver >= 7)
+            result -= 36;
+    }
+    return result;
+}
+function dataCodewords(ver, ecl) {
+    const e = ECL_INDEX[ecl];
+    return Math.floor(rawDataModules(ver) / 8) - ECC_CODEWORDS_PER_BLOCK[e][ver] * NUM_ERROR_CORRECTION_BLOCKS[e][ver];
+}
+/* Reed–Solomon over GF(2^8), polynomial 0x11D. */
+function gfMul(x, y) {
+    let z = 0;
+    for (let i = 7; i >= 0; i--) {
+        z = (z << 1) ^ ((z >>> 7) * 0x11d);
+        z ^= ((y >>> i) & 1) * x;
+    }
+    return z & 0xff;
+}
+function rsDivisor(degree) {
+    const result = new Array(degree - 1).fill(0);
+    result.push(1);
+    let root = 1;
+    for (let i = 0; i < degree; i++) {
+        for (let j = 0; j < result.length; j++) {
+            result[j] = gfMul(result[j], root);
+            if (j + 1 < result.length)
+                result[j] ^= result[j + 1];
+        }
+        root = gfMul(root, 0x02);
+    }
+    return result;
+}
+function rsRemainder(data, divisor) {
+    const result = divisor.map(() => 0);
+    for (const b of data) {
+        const factor = b ^ result.shift();
+        result.push(0);
+        divisor.forEach((coef, i) => (result[i] ^= gfMul(coef, factor)));
+    }
+    return result;
+}
+/** UTF-8 bytes without TextEncoder (works everywhere). */
+function utf8(text) {
+    const out = [];
+    for (const ch of text) {
+        const cp = ch.codePointAt(0);
+        if (cp < 0x80)
+            out.push(cp);
+        else if (cp < 0x800)
+            out.push(0xc0 | (cp >> 6), 0x80 | (cp & 63));
+        else if (cp < 0x10000)
+            out.push(0xe0 | (cp >> 12), 0x80 | ((cp >> 6) & 63), 0x80 | (cp & 63));
+        else
+            out.push(0xf0 | (cp >> 18), 0x80 | ((cp >> 12) & 63), 0x80 | ((cp >> 6) & 63), 0x80 | (cp & 63));
+    }
+    return out;
+}
+class Grid {
+    version;
+    size;
+    modules;
+    fn;
+    constructor(version) {
+        this.version = version;
+        this.size = version * 4 + 17;
+        this.modules = Array.from({ length: this.size }, () => new Array(this.size).fill(false));
+        this.fn = Array.from({ length: this.size }, () => new Array(this.size).fill(false));
+    }
+    setFn(x, y, dark) {
+        this.modules[y][x] = dark;
+        this.fn[y][x] = true;
+    }
+    alignmentPositions() {
+        if (this.version === 1)
+            return [];
+        const numAlign = Math.floor(this.version / 7) + 2;
+        const step = Math.floor((this.version * 8 + numAlign * 3 + 5) / (numAlign * 4 - 4)) * 2;
+        const result = [6];
+        for (let pos = this.size - 7; result.length < numAlign; pos -= step)
+            result.splice(1, 0, pos);
+        return result;
+    }
+    drawFunctionPatterns(ecl) {
+        const n = this.size;
+        for (let i = 0; i < n; i++) {
+            this.setFn(6, i, i % 2 === 0);
+            this.setFn(i, 6, i % 2 === 0);
+        }
+        this.finder(3, 3);
+        this.finder(n - 4, 3);
+        this.finder(3, n - 4);
+        const pos = this.alignmentPositions();
+        const k = pos.length;
+        for (let i = 0; i < k; i++)
+            for (let j = 0; j < k; j++) {
+                if ((i === 0 && j === 0) || (i === 0 && j === k - 1) || (i === k - 1 && j === 0))
+                    continue;
+                for (let dy = -2; dy <= 2; dy++)
+                    for (let dx = -2; dx <= 2; dx++)
+                        this.setFn(pos[i] + dx, pos[j] + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+            }
+        this.drawFormat(ecl, 0);
+        this.drawVersion();
+    }
+    finder(x, y) {
+        for (let dy = -4; dy <= 4; dy++)
+            for (let dx = -4; dx <= 4; dx++) {
+                const d = Math.max(Math.abs(dx), Math.abs(dy));
+                const xx = x + dx;
+                const yy = y + dy;
+                if (xx >= 0 && xx < this.size && yy >= 0 && yy < this.size)
+                    this.setFn(xx, yy, d !== 2 && d !== 4);
+            }
+    }
+    drawFormat(ecl, mask) {
+        const data = (ECL_FORMAT[ecl] << 3) | mask;
+        let rem = data;
+        for (let i = 0; i < 10; i++)
+            rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+        const bits = ((data << 10) | rem) ^ 0x5412;
+        const n = this.size;
+        for (let i = 0; i <= 5; i++)
+            this.setFn(8, i, bit(bits, i));
+        this.setFn(8, 7, bit(bits, 6));
+        this.setFn(8, 8, bit(bits, 7));
+        this.setFn(7, 8, bit(bits, 8));
+        for (let i = 9; i < 15; i++)
+            this.setFn(14 - i, 8, bit(bits, i));
+        for (let i = 0; i < 8; i++)
+            this.setFn(n - 1 - i, 8, bit(bits, i));
+        for (let i = 8; i < 15; i++)
+            this.setFn(8, n - 15 + i, bit(bits, i));
+        this.setFn(8, n - 8, true);
+    }
+    drawVersion() {
+        if (this.version < 7)
+            return;
+        let rem = this.version;
+        for (let i = 0; i < 12; i++)
+            rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25);
+        const bits = (this.version << 12) | rem;
+        for (let i = 0; i < 18; i++) {
+            const b = bit(bits, i);
+            const a = this.size - 11 + (i % 3);
+            const c = Math.floor(i / 3);
+            this.setFn(a, c, b);
+            this.setFn(c, a, b);
+        }
+    }
+    drawCodewords(data) {
+        let i = 0;
+        const n = this.size;
+        for (let right = n - 1; right >= 1; right -= 2) {
+            if (right === 6)
+                right = 5;
+            for (let vert = 0; vert < n; vert++)
+                for (let j = 0; j < 2; j++) {
+                    const x = right - j;
+                    const upward = ((right + 1) & 2) === 0;
+                    const y = upward ? n - 1 - vert : vert;
+                    if (!this.fn[y][x] && i < data.length * 8) {
+                        this.modules[y][x] = bit(data[i >>> 3], 7 - (i & 7));
+                        i++;
+                    }
+                }
+        }
+    }
+    applyMask(mask) {
+        for (let y = 0; y < this.size; y++)
+            for (let x = 0; x < this.size; x++) {
+                let invert;
+                switch (mask) {
+                    case 0:
+                        invert = (x + y) % 2 === 0;
+                        break;
+                    case 1:
+                        invert = y % 2 === 0;
+                        break;
+                    case 2:
+                        invert = x % 3 === 0;
+                        break;
+                    case 3:
+                        invert = (x + y) % 3 === 0;
+                        break;
+                    case 4:
+                        invert = (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0;
+                        break;
+                    case 5:
+                        invert = ((x * y) % 2) + ((x * y) % 3) === 0;
+                        break;
+                    case 6:
+                        invert = (((x * y) % 2) + ((x * y) % 3)) % 2 === 0;
+                        break;
+                    default: invert = (((x + y) % 2) + ((x * y) % 3)) % 2 === 0;
+                }
+                if (!this.fn[y][x] && invert)
+                    this.modules[y][x] = !this.modules[y][x];
+            }
+    }
+    penalty() {
+        const n = this.size;
+        const m = this.modules;
+        let score = 0;
+        const line = (get) => {
+            let run = 1;
+            let s = 0;
+            for (let i = 1; i <= n; i++) {
+                if (i < n && get(i) === get(i - 1))
+                    run++;
+                else {
+                    if (run >= 5)
+                        s += 3 + (run - 5);
+                    run = 1;
+                }
+            }
+            // Finder-like 1:1:3:1:1 with four light modules on one side.
+            for (let i = 0; i + 10 < n + 4; i++) {
+                const at = (k) => (k < 0 || k >= n ? false : get(k));
+                const core = at(i) && !at(i + 1) && at(i + 2) && at(i + 3) && at(i + 4) && !at(i + 5) && at(i + 6);
+                if (!core)
+                    continue;
+                const before = !at(i - 1) && !at(i - 2) && !at(i - 3) && !at(i - 4);
+                const after = !at(i + 7) && !at(i + 8) && !at(i + 9) && !at(i + 10);
+                if (before || after)
+                    s += 40;
+            }
+            return s;
+        };
+        for (let y = 0; y < n; y++)
+            score += line((x) => m[y][x]);
+        for (let x = 0; x < n; x++)
+            score += line((y) => m[y][x]);
+        for (let y = 0; y < n - 1; y++)
+            for (let x = 0; x < n - 1; x++) {
+                const c = m[y][x];
+                if (c === m[y][x + 1] && c === m[y + 1][x] && c === m[y + 1][x + 1])
+                    score += 3;
+            }
+        let dark = 0;
+        for (const row of m)
+            for (const c of row)
+                if (c)
+                    dark++;
+        const total = n * n;
+        score += (Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1) * 10;
+        return score;
+    }
+}
+/**
+ * Encode text (UTF-8, byte mode) as a QR matrix.
+ * Throws when the text does not fit version 40 at the chosen level.
+ *
+ * ```ts
+ * const qr = encodeQr("otpauth://totp/Northpoint:ada@example.com?secret=…", { errorCorrection: "M" });
+ * qr.size; // 41 (version 6)
+ * ```
+ */
+export function encodeQr(text, options = {}) {
+    const ecl = options.errorCorrection ?? "M";
+    const bytes = utf8(text);
+    let version = Math.max(1, Math.min(40, options.minVersion ?? 1));
+    let capacityBits = 0;
+    for (;; version++) {
+        if (version > 40)
+            throw new RangeError("QR: text is too long to encode");
+        const ccBits = version < 10 ? 8 : 16;
+        capacityBits = dataCodewords(version, ecl) * 8;
+        if (4 + ccBits + bytes.length * 8 <= capacityBits)
+            break;
+    }
+    // Bit stream: mode (byte = 0100), length, data, terminator, padding.
+    const bits = [];
+    const push = (value, len) => {
+        for (let i = len - 1; i >= 0; i--)
+            bits.push((value >>> i) & 1);
+    };
+    push(0b0100, 4);
+    push(bytes.length, version < 10 ? 8 : 16);
+    for (const b of bytes)
+        push(b, 8);
+    push(0, Math.min(4, capacityBits - bits.length));
+    push(0, (8 - (bits.length % 8)) % 8);
+    for (let pad = 0xec; bits.length < capacityBits; pad ^= 0xec ^ 0x11)
+        push(pad, 8);
+    const data = [];
+    for (let i = 0; i < bits.length; i += 8)
+        data.push(bits.slice(i, i + 8).reduce((acc, b) => (acc << 1) | b, 0));
+    // Error correction + interleave.
+    const e = ECL_INDEX[ecl];
+    const numBlocks = NUM_ERROR_CORRECTION_BLOCKS[e][version];
+    const eccLen = ECC_CODEWORDS_PER_BLOCK[e][version];
+    const rawCodewords = Math.floor(rawDataModules(version) / 8);
+    const numShort = numBlocks - (rawCodewords % numBlocks);
+    const shortLen = Math.floor(rawCodewords / numBlocks);
+    const divisor = rsDivisor(eccLen);
+    const blocks = [];
+    for (let i = 0, k = 0; i < numBlocks; i++) {
+        const dat = data.slice(k, k + shortLen - eccLen + (i < numShort ? 0 : 1));
+        k += dat.length;
+        const ecc = rsRemainder(dat, divisor);
+        if (i < numShort)
+            dat.push(0);
+        blocks.push(dat.concat(ecc));
+    }
+    const codewords = [];
+    for (let i = 0; i < blocks[0].length; i++)
+        blocks.forEach((block, j) => {
+            if (i !== shortLen - eccLen || j >= numShort)
+                codewords.push(block[i]);
+        });
+    // Place, then pick the mask with the lowest penalty.
+    const grid = new Grid(version);
+    grid.drawFunctionPatterns(ecl);
+    grid.drawCodewords(codewords);
+    let mask = options.mask ?? -1;
+    if (mask < 0 || mask > 7) {
+        let best = Infinity;
+        for (let candidate = 0; candidate < 8; candidate++) {
+            grid.applyMask(candidate);
+            grid.drawFormat(ecl, candidate);
+            const p = grid.penalty();
+            if (p < best) {
+                best = p;
+                mask = candidate;
+            }
+            grid.applyMask(candidate); // undo (XOR)
+        }
+    }
+    grid.applyMask(mask);
+    grid.drawFormat(ecl, mask);
+    return { size: grid.size, version, mask, errorCorrection: ecl, modules: grid.modules };
+}
+/** One SVG path (`d`) drawing every dark module, offset by `margin` modules. */
+export function qrPath(qr, margin = 0) {
+    let d = "";
+    for (let y = 0; y < qr.size; y++) {
+        let x = 0;
+        while (x < qr.size) {
+            if (!qr.modules[y][x]) {
+                x++;
+                continue;
+            }
+            let run = 1;
+            while (x + run < qr.size && qr.modules[y][x + run])
+                run++;
+            d += `M${x + margin} ${y + margin}h${run}v1h-${run}z`;
+            x += run;
+        }
+    }
+    return d;
+}

package/dist/components/activity-timeline.js

@@ -30,11 +30,11 @@ const indicatorVariants = cva("relative z-[1] grid size-(--tl-ind) shrink-0 plac
     variants: {
         tone: {
             neutral: "border-line bg-[color-mix(in_oklch,var(--surface)_90%,var(--scene))]",
-            accent: "tone-accent border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            success: "tone-success border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            warning: "tone-warning border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            danger: "tone-danger border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            info: "tone-info border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
+            accent: "tone-accent border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            success: "tone-success border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            warning: "tone-warning border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            danger: "tone-danger border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            info: "tone-info border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
         },
     },
     defaultVariants: { tone: "neutral" },

package/dist/components/aspect-ratio.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/** `"16/9"`, `"4/3"`, `"1/1"`… or a number (`1.5`). */
+export type AspectRatioValue = `${number}/${number}` | number;
+/** `"16/9"` → 1.777…, `"16:9"` → 1.777…, `1.5` → 1.5. Invalid values return `undefined`. */
+export declare function parseAspectRatio(ratio: AspectRatioValue | string | undefined): number | undefined;
+export declare const aspectRatioVariants: (props?: ({
+    rounded?: "ui" | "ui-lg" | "full" | "none" | null | undefined;
+    fit?: "fill" | "contain" | "cover" | null | undefined;
+    tone?: "inset" | "none" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof aspectRatioVariants> {
+    /** Width ÷ height. `"16/9"` (default), `"4/3"`, `"1/1"`, `"21/9"` or a number. */
+    ratio?: AspectRatioValue;
+}
+/**
+ * Keeps a box at a fixed ratio whatever its width, and stretches the direct child to fill it —
+ * an iframe, a video, a map, an image or any element. Pure CSS (`aspect-ratio`), server-safe.
+ *
+ * ```tsx
+ * <AspectRatio ratio="16/9" rounded="ui-lg">
+ *   <iframe src="https://www.youtube-nocookie.com/embed/…" title="Product tour" />
+ * </AspectRatio>
+ * ```
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/aspect-ratio.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+/** `"16/9"` → 1.777…, `"16:9"` → 1.777…, `1.5` → 1.5. Invalid values return `undefined`. */
+export function parseAspectRatio(ratio) {
+    if (typeof ratio === "number")
+        return Number.isFinite(ratio) && ratio > 0 ? ratio : undefined;
+    if (!ratio)
+        return undefined;
+    const [w, h] = ratio.split(/[/:]/).map((s) => Number(s.trim()));
+    if (w && h && w > 0 && h > 0)
+        return w / h;
+    const n = Number(ratio);
+    return Number.isFinite(n) && n > 0 ? n : undefined;
+}
+export const aspectRatioVariants = cva("relative isolate block w-full overflow-hidden", {
+    variants: {
+        rounded: { none: "", ui: "rounded-ui", "ui-lg": "rounded-ui-lg", full: "rounded-full" },
+        /** How a direct `img` / `video` child fills the box. */
+        fit: { cover: "[&>img]:object-cover [&>video]:object-cover", contain: "[&>img]:object-contain [&>video]:object-contain", fill: "[&>img]:object-fill [&>video]:object-fill" },
+        /** `inset`: a `surface-2` backdrop (letterboxing for `contain`, a frame while an iframe loads). */
+        tone: { none: "", inset: "bg-surface-2" },
+    },
+    defaultVariants: { rounded: "none", fit: "cover", tone: "none" },
+});
+/**
+ * Keeps a box at a fixed ratio whatever its width, and stretches the direct child to fill it —
+ * an iframe, a video, a map, an image or any element. Pure CSS (`aspect-ratio`), server-safe.
+ *
+ * ```tsx
+ * <AspectRatio ratio="16/9" rounded="ui-lg">
+ *   <iframe src="https://www.youtube-nocookie.com/embed/…" title="Product tour" />
+ * </AspectRatio>
+ * ```
+ */
+export const AspectRatio = React.forwardRef(function AspectRatio({ ratio = "16/9", rounded, fit, tone, className, style, children, ...props }, ref) {
+    const value = parseAspectRatio(ratio) ?? 16 / 9;
+    return (_jsx("div", { ref: ref, "data-slot": "aspect-ratio", className: cn(aspectRatioVariants({ rounded, fit, tone }), 
+        // The child fills the box; iframes lose their default border.
+        "[&>*]:absolute [&>*]:inset-0 [&>*]:size-full [&>iframe]:border-0", className), style: { aspectRatio: String(value), ...style }, ...props, children: children }));
+});

package/dist/components/backup-codes.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export declare const backupCodesLabels: {
+    title: string;
+    copy: string;
+    copied: string;
+    copiedAnnouncement: string;
+    download: string;
+    regenerate: string;
+    used: string;
+    remaining: string;
+    fileHeader: string;
+};
+export type BackupCodesLabels = typeof backupCodesLabels;
+export interface BackupCodesProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onCopy"> {
+    /** One-time recovery codes, in display order. */
+    codes: string[];
+    /** Codes already spent — struck through and announced as used. */
+    used?: string[];
+    /** Heading above the grid. Default "Backup codes"; `null` hides it (label the region yourself). */
+    title?: React.ReactNode;
+    /** Name of the downloaded text file. Default `"backup-codes.txt"`. */
+    filename?: string;
+    /** Extra first line(s) of the downloaded file (account, service). */
+    fileNote?: string;
+    /** Called after the codes were copied. */
+    onCopy?: (text: string) => void;
+    /** Replace the default download (Blob + link) — e.g. to log it. */
+    onDownload?: (text: string) => void;
+    /** Shows a "New codes" button. */
+    onRegenerate?: () => void;
+    regenerating?: boolean;
+    labels?: Partial<BackupCodesLabels>;
+}
+/**
+ * One-time recovery codes after two-factor enrolment: a numbered monospace grid with copy,
+ * download and regenerate. Used codes stay visible, struck through.
+ *
+ * ```tsx
+ * <BackupCodes codes={codes} used={["4K7Q-PX2M"]} onRegenerate={regenerate} />
+ * ```
+ */
+export declare const BackupCodes: React.ForwardRefExoticComponent<BackupCodesProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/backup-codes.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Copy, Download, RefreshCw } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { Button } from "./button.js";
+export const backupCodesLabels = {
+    title: "Backup codes",
+    copy: "Copy",
+    copied: "Copied",
+    copiedAnnouncement: "Backup codes copied to the clipboard",
+    download: "Download",
+    regenerate: "New codes",
+    used: "used",
+    remaining: "{left} of {total} left",
+    fileHeader: "Backup codes — each code works once. Keep them somewhere safe.",
+};
+/**
+ * One-time recovery codes after two-factor enrolment: a numbered monospace grid with copy,
+ * download and regenerate. Used codes stay visible, struck through.
+ *
+ * ```tsx
+ * <BackupCodes codes={codes} used={["4K7Q-PX2M"]} onRegenerate={regenerate} />
+ * ```
+ */
+export const BackupCodes = React.forwardRef(function BackupCodes({ codes, used = [], title, filename = "backup-codes.txt", fileNote, onCopy, onDownload, onRegenerate, regenerating, labels, className, ...props }, ref) {
+    const t = useLabels("backupCodes", backupCodesLabels, labels);
+    const f = useFormat();
+    const [copied, setCopied] = React.useState(false);
+    const usedSet = React.useMemo(() => new Set(used), [used]);
+    const titleId = React.useId();
+    const text = React.useMemo(() => [fileNote, t("fileHeader"), "", ...codes.map((c, i) => `${String(i + 1).padStart(2, " ")}. ${c}${usedSet.has(c) ? ` (${t("used")})` : ""}`)].filter((l) => l !== undefined).join("\n") + "\n", [codes, usedSet, fileNote, t]);
+    React.useEffect(() => {
+        if (!copied)
+            return;
+        const id = window.setTimeout(() => setCopied(false), 2000);
+        return () => window.clearTimeout(id);
+    }, [copied]);
+    const copy = async () => {
+        try {
+            await navigator.clipboard?.writeText(text);
+        }
+        catch {
+            /* clipboard blocked — still report so the user can select manually */
+        }
+        setCopied(true);
+        onCopy?.(text);
+    };
+    const download = () => {
+        if (onDownload)
+            return onDownload(text);
+        const url = URL.createObjectURL(new Blob([text], { type: "text/plain;charset=utf-8" }));
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = filename;
+        a.click();
+        window.setTimeout(() => URL.revokeObjectURL(url), 0);
+    };
+    const left = codes.filter((c) => !usedSet.has(c)).length;
+    const heading = title === undefined ? t("title") : title;
+    return (_jsxs("div", { ref: ref, "data-slot": "backup-codes", role: "group", "aria-labelledby": heading ? titleId : undefined, className: cn("grid gap-3", className), ...props, children: [heading ? (_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h3", { id: titleId, className: "text-sm font-medium text-fg", children: heading }), _jsx("span", { className: "text-xs text-fg-muted tabular", children: t("remaining", { left: f.number(left), total: f.number(codes.length) }) })] })) : null, _jsx("ol", { className: "grid grid-cols-2 gap-x-6 gap-y-1.5 rounded-ui border border-line bg-surface-2 px-4 py-3.5 font-mono text-[13px] tabular", translate: "no", children: codes.map((code, i) => {
+                    const spent = usedSet.has(code);
+                    return (_jsxs("li", { "data-used": spent || undefined, className: "flex items-baseline gap-3", children: [_jsx("span", { "aria-hidden": "true", className: "w-4 text-end text-[11px] text-fg-subtle", children: i + 1 }), _jsx("span", { className: cn("tracking-wide select-all", spent ? "text-fg-subtle line-through decoration-fg-subtle" : "text-fg"), children: code }), spent ? _jsxs("span", { className: "sr-only", children: ["(", t("used"), ")"] }) : null] }, code));
+                }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { size: "sm", variant: "secondary", onClick: copy, children: [copied ? _jsx(Check, { "aria-hidden": "true" }) : _jsx(Copy, { "aria-hidden": "true" }), copied ? t("copied") : t("copy")] }), _jsxs(Button, { size: "sm", variant: "secondary", onClick: download, children: [_jsx(Download, { "aria-hidden": "true" }), t("download")] }), onRegenerate ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "ms-auto", onClick: onRegenerate, loading: regenerating, children: [_jsx(RefreshCw, { "aria-hidden": "true" }), t("regenerate")] })) : null, _jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: copied ? t("copiedAnnouncement") : "" })] })] }));
+});

package/dist/components/breadcrumb.d.ts

@@ -15,7 +15,7 @@ export interface BreadcrumbItemData {
     label: React.ReactNode;
     href?: string;
     icon?: React.ReactNode;
-    /** Jump to siblings ("Companies › Acme ▾" → other companies). */
+    /** Jump to siblings ("Companies › Northpoint ▾" → other companies). */
     menu?: BreadcrumbMenuLink[];
 }
 export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
@@ -37,7 +37,7 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
  * `aria-current="page"` on the last item). Links go through the app's router `Link`.
  *
  * ```tsx
- * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Acme", href: "/companies/acme" }, { label: "Contacts" }]} />
+ * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Northpoint", href: "/companies/northpoint" }, { label: "Contacts" }]} />
  * ```
  *
  * Compound: `<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href/></BreadcrumbItem><BreadcrumbSeparator/>…<BreadcrumbPage/></BreadcrumbList></Breadcrumb>`.

package/dist/components/breadcrumb.js

@@ -21,7 +21,7 @@ const SizeContext = React.createContext("md");
  * `aria-current="page"` on the last item). Links go through the app's router `Link`.
  *
  * ```tsx
- * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Acme", href: "/companies/acme" }, { label: "Contacts" }]} />
+ * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Northpoint", href: "/companies/northpoint" }, { label: "Contacts" }]} />
  * ```
  *
  * Compound: `<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href/></BreadcrumbItem><BreadcrumbSeparator/>…<BreadcrumbPage/></BreadcrumbList></Breadcrumb>`.

package/dist/components/carousel.d.ts

@@ -19,6 +19,7 @@ declare const carouselLabels: {
     thumbs: string;
     empty: string;
     loading: string;
+    marqueePause: string;
 };
 export type CarouselLabels = typeof carouselLabels;
 export type CarouselPreset = "default" | "gallery" | "hero" | "strip";
@@ -161,10 +162,18 @@ export interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Fade the edges. Default `true`. */
     fade?: boolean;
     gap?: "sm" | "md" | "lg";
+    /**
+     * A small pause control (a native checkbox, works without JavaScript). Moving content that runs
+     * longer than five seconds needs one (WCAG 2.2.2). Default `true`.
+     */
+    controls?: boolean;
+    /** Accessible name of the pause control. Default "Pause scrolling" (dictionary `carousel.marqueePause`). */
+    pauseLabel?: string;
 }
 /**
- * Endless logo band in pure CSS: no JS, renders with SSR. The items are listed once for assistive
- * tech; a duplicate track (aria-hidden) closes the loop. Reduced motion: static, scrollable row.
+ * Endless logo band in pure CSS: renders with SSR. The items are listed once for assistive tech;
+ * a duplicate track (`aria-hidden` + `inert`, so its links never take focus) closes the loop.
+ * Pauses on hover/focus and with its pause control. Reduced motion: static, scrollable row.
  */
-export declare function Marquee({ label, duration, reverse, pauseOnHover, fade, gap, className, style, children, ...props }: MarqueeProps): React.JSX.Element;
+export declare function Marquee({ label, duration, reverse, pauseOnHover, fade, gap, controls, pauseLabel, className, style, children, ...props }: MarqueeProps): React.JSX.Element;
 export {};