import * as React from "react"; import { cn } from "@kineticui/core"; /* Dependency-free QR encoder (byte mode, versions 1–40), adapted from the public-domain algorithm described by Project Nayuki. */ export type QrLevel = "L" | "M" | "Q" | "H"; const ECC_PER_BLOCK: Record = { L: [-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], M: [-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], Q: [-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], H: [-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], }; const NUM_BLOCKS: Record = { L: [-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], M: [-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], Q: [-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], H: [-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 FORMAT_BITS: Record = { L: 1, M: 0, Q: 3, H: 2 }; const rawModules = (v: number) => { let r = (16 * v + 128) * v + 64; if (v >= 2) { const n = Math.floor(v / 7) + 2; r -= (25 * n - 10) * n - 55; if (v >= 7) r -= 36; } return r; }; const dataCodewords = (v: number, l: QrLevel) => Math.floor(rawModules(v) / 8) - ECC_PER_BLOCK[l][v]! * NUM_BLOCKS[l][v]!; function gfMul(x: number, y: number) { let z = 0; for (let i = 7; i >= 0; i--) { z = (z << 1) ^ ((z >>> 7) * 0x11d); z ^= ((y >>> i) & 1) * x; } return z; } function rsDivisor(degree: number) { const r = new Array(degree - 1).fill(0).concat([1]); let root = 1; for (let i = 0; i < degree; i++) { for (let j = 0; j < r.length; j++) { r[j] = gfMul(r[j]!, root); if (j + 1 < r.length) r[j]! ^= r[j + 1]!; } root = gfMul(root, 0x02); } return r; } function rsRemainder(data: number[], div: number[]) { const r = div.map(() => 0); for (const b of data) { const f = b ^ r.shift()!; r.push(0); div.forEach((c, i) => (r[i]! ^= gfMul(c, f))); } return r; } /** Returns a square boolean matrix (true = dark module). */ export function encodeQr(text: string, level: QrLevel = "M"): boolean[][] { const bytes = Array.from(new TextEncoder().encode(text)); let ver = 1; for (; ver <= 40; ver++) { const need = 4 + (ver < 10 ? 8 : 16) + bytes.length * 8; if (need <= dataCodewords(ver, level) * 8) break; } if (ver > 40) throw new Error("QR: data too long"); const bits: number[] = []; const push = (val: number, len: number) => { for (let i = len - 1; i >= 0; i--) bits.push((val >>> i) & 1); }; push(4, 4); push(bytes.length, ver < 10 ? 8 : 16); bytes.forEach((b) => push(b, 8)); const cap = dataCodewords(ver, level) * 8; push(0, Math.min(4, cap - bits.length)); push(0, (8 - (bits.length % 8)) % 8); for (let pad = 0xec; bits.length < cap; pad ^= 0xec ^ 0x11) push(pad, 8); const data: number[] = []; for (let i = 0; i < bits.length; i += 8) data.push(parseInt(bits.slice(i, i + 8).join(""), 2)); // ECC + interleave const nb = NUM_BLOCKS[level][ver]!; const eccLen = ECC_PER_BLOCK[level][ver]!; const raw = Math.floor(rawModules(ver) / 8); const nShort = nb - (raw % nb); const shortLen = Math.floor(raw / nb); const div = rsDivisor(eccLen); const blocks: number[][] = []; for (let i = 0, k = 0; i < nb; i++) { const dat = data.slice(k, k + shortLen - eccLen + (i < nShort ? 0 : 1)); k += dat.length; const ecc = rsRemainder(dat, div); if (i < nShort) dat.push(0); blocks.push(dat.concat(ecc)); } const codewords: number[] = []; for (let i = 0; i < blocks[0]!.length; i++) blocks.forEach((b, j) => { if (i !== shortLen - eccLen || j >= nShort) codewords.push(b[i]!); }); // Matrix const size = ver * 4 + 17; const mod: boolean[][] = Array.from({ length: size }, () => new Array(size).fill(false)); const fn: boolean[][] = Array.from({ length: size }, () => new Array(size).fill(false)); const set = (x: number, y: number, d: boolean) => { mod[y]![x] = d; fn[y]![x] = true; }; for (let i = 0; i < size; i++) { set(6, i, i % 2 === 0); set(i, 6, i % 2 === 0); } const finder = (x: number, y: number) => { 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 < size && yy >= 0 && yy < size) set(xx, yy, d !== 2 && d !== 4); } }; finder(3, 3); finder(size - 4, 3); finder(3, size - 4); if (ver > 1) { const n = Math.floor(ver / 7) + 2; const step = ver === 32 ? 26 : Math.ceil((ver * 4 + 4) / (n * 2 - 2)) * 2; const pos = [6]; for (let p = size - 7; pos.length < n; p -= step) pos.splice(1, 0, p); pos.forEach((a, i) => pos.forEach((b, j) => { if ((i === 0 && j === 0) || (i === 0 && j === n - 1) || (i === n - 1 && j === 0)) return; for (let dy = -2; dy <= 2; dy++) for (let dx = -2; dx <= 2; dx++) set(a + dx, b + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1); }), ); } const drawFormat = (mask: number) => { const d = (FORMAT_BITS[level] << 3) | mask; let rem = d; for (let i = 0; i < 10; i++) rem = (rem << 1) ^ ((rem >>> 9) * 0x537); const b = ((d << 10) | rem) ^ 0x5412; const bit = (i: number) => ((b >>> i) & 1) !== 0; for (let i = 0; i <= 5; i++) set(8, i, bit(i)); set(8, 7, bit(6)); set(8, 8, bit(7)); set(7, 8, bit(8)); for (let i = 9; i < 15; i++) set(14 - i, 8, bit(i)); for (let i = 0; i < 8; i++) set(size - 1 - i, 8, bit(i)); for (let i = 8; i < 15; i++) set(8, size - 15 + i, bit(i)); set(8, size - 8, true); }; drawFormat(0); if (ver >= 7) { let rem = ver; for (let i = 0; i < 12; i++) rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25); const b = (ver << 12) | rem; for (let i = 0; i < 18; i++) { const bit = ((b >>> i) & 1) !== 0; const a = size - 11 + (i % 3); const c = Math.floor(i / 3); set(a, c, bit); set(c, a, bit); } } let i = 0; for (let right = size - 1; right >= 1; right -= 2) { if (right === 6) right = 5; for (let v = 0; v < size; v++) for (let j = 0; j < 2; j++) { const x = right - j; const y = ((right + 1) & 2) === 0 ? size - 1 - v : v; if (!fn[y]![x] && i < codewords.length * 8) { mod[y]![x] = ((codewords[i >>> 3]! >>> (7 - (i & 7))) & 1) !== 0; i++; } } } const masks = [ (x: number, y: number) => (x + y) % 2 === 0, (_: number, y: number) => y % 2 === 0, (x: number) => x % 3 === 0, (x: number, y: number) => (x + y) % 3 === 0, (x: number, y: number) => (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0, (x: number, y: number) => ((x * y) % 2) + ((x * y) % 3) === 0, (x: number, y: number) => (((x * y) % 2) + ((x * y) % 3)) % 2 === 0, (x: number, y: number) => (((x + y) % 2) + ((x * y) % 3)) % 2 === 0, ]; const apply = (m: number) => { for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) if (!fn[y]![x] && masks[m]!(x, y)) mod[y]![x] = !mod[y]![x]; }; const penalty = () => { let p = 0; const lines = [...mod.map((r) => r), ...mod.map((_, x) => mod.map((r) => r[x]!))]; for (const line of lines) { let run = 1; for (let k = 1; k <= line.length; k++) { if (k < line.length && line[k] === line[k - 1]) run++; else { if (run >= 5) p += run - 2; run = 1; } } const s = line.map((d) => (d ? 1 : 0)).join(""); p += 40 * ((s.match(/(?=10111010000|00001011101)/g) ?? []).length); } for (let y = 0; y < size - 1; y++) for (let x = 0; x < size - 1; x++) { const c = mod[y]![x]; if (c === mod[y]![x + 1] && c === mod[y + 1]![x] && c === mod[y + 1]![x + 1]) p += 3; } const dark = mod.flat().filter(Boolean).length; p += Math.floor(Math.abs(dark * 20 - size * size * 10) / (size * size)) * 10; return p; }; let best = 0; let bestP = Infinity; for (let m = 0; m < 8; m++) { apply(m); drawFormat(m); const p = penalty(); if (p < bestP) { bestP = p; best = m; } apply(m); } apply(best); drawFormat(best); return mod; } export type QrCodeProps = Omit, "children"> & { value: string; size?: number; level?: QrLevel; /** squares (classic) or dots. */ variant?: "squares" | "dots"; color?: string; background?: string; /** Centre logo. Uses level H automatically so the code stays scannable. */ logo?: React.ReactNode; /** Quiet-zone modules around the code. */ margin?: number; }; /** SVG QR code with dots style, rounded finder eyes and an optional centre logo. */ export function QrCode({ value, size = 200, level, variant = "squares", color = "currentColor", background = "transparent", logo, margin = 2, className, ...props }: QrCodeProps) { const m = React.useMemo(() => encodeQr(value, level ?? (logo ? "H" : "M")), [value, level, logo]); const n = m.length; const total = n + margin * 2; const logoSize = Math.round(n * 0.22); const lo = Math.floor((n - logoSize) / 2); const isEye = (x: number, y: number) => (x < 7 && y < 7) || (x >= n - 7 && y < 7) || (x < 7 && y >= n - 7); let d = ""; const dots: React.ReactNode[] = []; m.forEach((row, y) => row.forEach((on, x) => { if (!on || (variant === "dots" && isEye(x, y))) return; if (logo && x >= lo - 1 && x <= lo + logoSize && y >= lo - 1 && y <= lo + logoSize) return; if (variant === "dots") dots.push(); else d += `M${x + margin},${y + margin}h1v1h-1z`; }), ); const eyes = variant === "dots" ? [ [0, 0], [n - 7, 0], [0, n - 7], ].map(([x, y]) => ( )) : null; return ( ); }

QR Code

Installation

Exports