@nuvui/barcodes 0.0.0-stage → 0.1.1

package/dist/components/barcode/encode.js

@@ -0,0 +1,85 @@
+import { CODE39 } from "jsbarcode/bin/barcodes/CODE39/index.js";
+import { CODE128 } from "jsbarcode/bin/barcodes/CODE128/index.js";
+import { codabar } from "jsbarcode/bin/barcodes/codabar/index.js";
+import { EAN13, EAN8, UPC, UPCE } from "jsbarcode/bin/barcodes/EAN_UPC/index.js";
+import { ITF, ITF14 } from "jsbarcode/bin/barcodes/ITF/index.js";
+import { MSI, MSI10, MSI1010, MSI11, MSI1110 } from "jsbarcode/bin/barcodes/MSI/index.js";
+import { pharmacode } from "jsbarcode/bin/barcodes/pharmacode/index.js";
+//#region src/components/barcode/encode.ts
+const encoders = {
+	code128: [CODE128, {}],
+	"gs1-128": [CODE128, { ean128: true }],
+	code39: [CODE39, {}],
+	"code39-mod43": [CODE39, { mod43: true }],
+	ean13: [EAN13, {}],
+	ean8: [EAN8, {}],
+	upca: [UPC, {}],
+	upce: [UPCE, {}],
+	itf: [ITF, {}],
+	itf14: [ITF14, {}],
+	msi: [MSI, {}],
+	"msi-mod10": [MSI10, {}],
+	"msi-mod11": [MSI11, {}],
+	"msi-mod1010": [MSI1010, {}],
+	"msi-mod1110": [MSI1110, {}],
+	codabar: [codabar, {}],
+	pharmacode: [pharmacode, {}]
+};
+/** Every kind of barcode there is here. */
+const barcodeTypes = Object.keys(encoders);
+const grouped = /* @__PURE__ */ new Set([
+	"ean13",
+	"ean8",
+	"upca",
+	"upce"
+]);
+const aligned = {
+	left: "start",
+	center: "center",
+	right: "end"
+};
+/**
+* The bars for a value, or `null` if this kind of barcode can't hold it:
+* a letter in an EAN, a check digit that's wrong, an odd number of digits
+* in an ITF, nothing at all.
+*
+* It needs no browser, so it runs wherever the value is checked.
+*/
+function encodeBarcode(value, type = "code128", { text, flat = false } = {}) {
+	const entry = encoders[type];
+	if (!entry || typeof value !== "string" || value === "") return null;
+	const [Encoder, extra] = entry;
+	let encoded;
+	try {
+		const encoder = new Encoder(value, {
+			...extra,
+			text: grouped.has(type) ? void 0 : text,
+			flat,
+			displayValue: true,
+			fontSize: 0,
+			height: 0,
+			textMargin: 0,
+			width: 1
+		});
+		if (!encoder.valid()) return null;
+		encoded = encoder.encode();
+	} catch {
+		return null;
+	}
+	const parts = (Array.isArray(encoded) ? encoded : [encoded]).filter((part) => part.data.length > 0).map((part) => ({
+		bars: part.data,
+		text: part.text === void 0 ? void 0 : String(part.text),
+		guard: part.options?.height !== void 0,
+		align: aligned[part.options?.textAlign ?? "center"]
+	}));
+	const modules = parts.reduce((sum, part) => sum + part.bars.length, 0);
+	if (modules === 0) return null;
+	return {
+		type,
+		parts,
+		modules,
+		text: parts.map((part) => part.text ?? "").join("")
+	};
+}
+//#endregion
+export { barcodeTypes, encodeBarcode };

package/dist/components/barcode/index.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_encode = require("./encode.cjs");
+const require_barcode = require("./barcode.cjs");
+exports.Barcode = require_barcode.Barcode;
+exports.barcodeTypes = require_encode.barcodeTypes;
+exports.encodeBarcode = require_encode.encodeBarcode;

package/dist/components/barcode/index.d.cts

@@ -0,0 +1,3 @@
+import { BarcodeEncodeOptions, BarcodeEncoding, BarcodePart, BarcodeType, barcodeTypes, encodeBarcode } from "./encode.cjs";
+import { Barcode, BarcodeOwnProps, BarcodeProps } from "./barcode.cjs";
+export { Barcode, type BarcodeEncodeOptions, type BarcodeEncoding, type BarcodeOwnProps, type BarcodePart, type BarcodeProps, type BarcodeType, barcodeTypes, encodeBarcode };

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

@@ -0,0 +1,3 @@
+import { BarcodeEncodeOptions, BarcodeEncoding, BarcodePart, BarcodeType, barcodeTypes, encodeBarcode } from "./encode.js";
+import { Barcode, BarcodeOwnProps, BarcodeProps } from "./barcode.js";
+export { Barcode, type BarcodeEncodeOptions, type BarcodeEncoding, type BarcodeOwnProps, type BarcodePart, type BarcodeProps, type BarcodeType, barcodeTypes, encodeBarcode };

package/dist/components/barcode/index.js

@@ -0,0 +1,3 @@
+import { barcodeTypes, encodeBarcode } from "./encode.js";
+import { Barcode } from "./barcode.js";
+export { Barcode, barcodeTypes, encodeBarcode };

package/dist/components/qrcode/encode.cjs

@@ -0,0 +1,28 @@
+let uqr = require("uqr");
+//#region src/components/qrcode/encode.ts
+/**
+* The squares for a value, or `null` if there's nothing to encode or it's
+* more than a QR code holds, which at the highest level is about 1,200
+* bytes.
+*
+* It needs no browser, so it runs wherever the value is checked.
+*/
+function encodeQRCode(value, { errorCorrection = "M" } = {}) {
+	if (typeof value !== "string" || value === "") return null;
+	try {
+		const code = (0, uqr.encode)(value, {
+			ecc: errorCorrection,
+			border: 0
+		});
+		return {
+			rows: code.data,
+			size: code.size,
+			version: code.version,
+			errorCorrection
+		};
+	} catch {
+		return null;
+	}
+}
+//#endregion
+exports.encodeQRCode = encodeQRCode;

package/dist/components/qrcode/encode.d.cts

@@ -0,0 +1,29 @@
+//#region src/components/qrcode/encode.d.ts
+/**
+ * How much of the code can be lost and still be read: about 7% for `"L"`,
+ * 15% for `"M"`, 25% for `"Q"` and 30% for `"H"`. A higher level makes a
+ * code with more and smaller squares for the same value.
+ */
+export type QRCodeErrorCorrection = "L" | "M" | "Q" | "H";
+export interface QRCodeEncoding {
+  /** The rows of squares, `true` for a dark one. */
+  rows: boolean[][];
+  /** How many squares there are along a side. */
+  size: number;
+  /** The code's version, 1 to 40: how big it had to be for the value. */
+  version: number;
+  errorCorrection: QRCodeErrorCorrection;
+}
+export interface QRCodeEncodeOptions {
+  /** @default "M" */
+  errorCorrection?: QRCodeErrorCorrection;
+}
+/**
+ * The squares for a value, or `null` if there's nothing to encode or it's
+ * more than a QR code holds, which at the highest level is about 1,200
+ * bytes.
+ *
+ * It needs no browser, so it runs wherever the value is checked.
+ */
+export declare function encodeQRCode(value: string, { errorCorrection }?: QRCodeEncodeOptions): QRCodeEncoding | null;
+//#endregion

package/dist/components/qrcode/encode.d.ts

@@ -0,0 +1,29 @@
+//#region src/components/qrcode/encode.d.ts
+/**
+ * How much of the code can be lost and still be read: about 7% for `"L"`,
+ * 15% for `"M"`, 25% for `"Q"` and 30% for `"H"`. A higher level makes a
+ * code with more and smaller squares for the same value.
+ */
+export type QRCodeErrorCorrection = "L" | "M" | "Q" | "H";
+export interface QRCodeEncoding {
+  /** The rows of squares, `true` for a dark one. */
+  rows: boolean[][];
+  /** How many squares there are along a side. */
+  size: number;
+  /** The code's version, 1 to 40: how big it had to be for the value. */
+  version: number;
+  errorCorrection: QRCodeErrorCorrection;
+}
+export interface QRCodeEncodeOptions {
+  /** @default "M" */
+  errorCorrection?: QRCodeErrorCorrection;
+}
+/**
+ * The squares for a value, or `null` if there's nothing to encode or it's
+ * more than a QR code holds, which at the highest level is about 1,200
+ * bytes.
+ *
+ * It needs no browser, so it runs wherever the value is checked.
+ */
+export declare function encodeQRCode(value: string, { errorCorrection }?: QRCodeEncodeOptions): QRCodeEncoding | null;
+//#endregion

package/dist/components/qrcode/encode.js

@@ -0,0 +1,28 @@
+import { encode } from "uqr";
+//#region src/components/qrcode/encode.ts
+/**
+* The squares for a value, or `null` if there's nothing to encode or it's
+* more than a QR code holds, which at the highest level is about 1,200
+* bytes.
+*
+* It needs no browser, so it runs wherever the value is checked.
+*/
+function encodeQRCode(value, { errorCorrection = "M" } = {}) {
+	if (typeof value !== "string" || value === "") return null;
+	try {
+		const code = encode(value, {
+			ecc: errorCorrection,
+			border: 0
+		});
+		return {
+			rows: code.data,
+			size: code.size,
+			version: code.version,
+			errorCorrection
+		};
+	} catch {
+		return null;
+	}
+}
+//#endregion
+export { encodeQRCode };

package/dist/components/qrcode/index.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_encode = require("./encode.cjs");
+const require_qrcode = require("./qrcode.cjs");
+exports.QRCode = require_qrcode.QRCode;
+exports.QRCodeSwissCross = require_qrcode.QRCodeSwissCross;
+exports.encodeQRCode = require_encode.encodeQRCode;

package/dist/components/qrcode/index.d.cts

@@ -0,0 +1,3 @@
+import { QRCodeEncodeOptions, QRCodeEncoding, QRCodeErrorCorrection, encodeQRCode } from "./encode.cjs";
+import { QRCode, QRCodeOwnProps, QRCodeProps, QRCodeSwissCross, QRCodeSwissCrossProps } from "./qrcode.cjs";
+export { QRCode, type QRCodeEncodeOptions, type QRCodeEncoding, type QRCodeErrorCorrection, type QRCodeOwnProps, type QRCodeProps, QRCodeSwissCross, type QRCodeSwissCrossProps, encodeQRCode };

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

@@ -0,0 +1,3 @@
+import { QRCodeEncodeOptions, QRCodeEncoding, QRCodeErrorCorrection, encodeQRCode } from "./encode.js";
+import { QRCode, QRCodeOwnProps, QRCodeProps, QRCodeSwissCross, QRCodeSwissCrossProps } from "./qrcode.js";
+export { QRCode, type QRCodeEncodeOptions, type QRCodeEncoding, type QRCodeErrorCorrection, type QRCodeOwnProps, type QRCodeProps, QRCodeSwissCross, type QRCodeSwissCrossProps, encodeQRCode };

package/dist/components/qrcode/index.js

@@ -0,0 +1,3 @@
+import { encodeQRCode } from "./encode.js";
+import { QRCode, QRCodeSwissCross } from "./qrcode.js";
+export { QRCode, QRCodeSwissCross, encodeQRCode };

package/dist/components/qrcode/qrcode.cjs

@@ -0,0 +1,121 @@
+const require_cx = require("../../utils/cx.cjs");
+const require_encode = require("./encode.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/qrcode/qrcode.tsx
+const emptySize = 21;
+/**
+* A QR code, drawn as an SVG. It's a picture with a name: say what the
+* code is for with `aria-label`, and without one the name is the value.
+*
+* It has no state and needs no browser, so it can be a server component.
+*/
+const QRCode = (0, react.forwardRef)(function QRCode({ value, size = 160, errorCorrection, quietZone = 4, overlay, overlaySize = .2, fallback, className, "aria-label": label, "aria-labelledby": labelledBy, ...props }, ref) {
+	const covered = overlay !== void 0 && overlay !== null && overlay !== false;
+	const encoding = require_encode.encodeQRCode(value, { errorCorrection: errorCorrection ?? (covered ? "H" : "M") });
+	if (!encoding && fallback !== void 0) return fallback;
+	const side = encoding?.size ?? emptySize;
+	const whole = side + quietZone * 2;
+	const name = labelledBy ? void 0 : label ?? value;
+	const root = {
+		ref,
+		width: size,
+		height: size,
+		viewBox: `0 0 ${whole} ${whole}`,
+		...props
+	};
+	if (!encoding) {
+		const hair = whole / size;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			...root,
+			role: "img",
+			"aria-label": name,
+			"aria-labelledby": labelledBy,
+			className: require_cx.cx("nuv-qrcode", className),
+			"data-invalid": "",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				className: "nuv-qrcode__ground",
+				width: "100%",
+				height: "100%"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				className: "nuv-qrcode__mark",
+				strokeWidth: hair,
+				strokeDasharray: `${hair * 4} ${hair * 3}`,
+				d: `M${hair / 2} ${hair / 2}H${whole - hair / 2}V${whole - hair / 2}H${hair / 2}ZM${hair / 2} ${whole - hair / 2}L${whole - hair / 2} ${hair / 2}`
+			})]
+		});
+	}
+	let squares = "";
+	for (const [y, row] of encoding.rows.entries()) {
+		let x = 0;
+		while (x < side) {
+			if (!row[x]) {
+				x += 1;
+				continue;
+			}
+			let end = x;
+			while (end < side && row[end]) end += 1;
+			squares += `M${x + quietZone} ${y + quietZone}h${end - x}v1h${x - end}z`;
+			x = end;
+		}
+	}
+	const box = Math.round(side * Math.min(.3, Math.max(.1, overlaySize)) * 1e3) / 1e3;
+	const corner = Math.round((quietZone + (side - box) / 2) * 1e3) / 1e3;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		...root,
+		role: "img",
+		"aria-label": name,
+		"aria-labelledby": labelledBy,
+		className: require_cx.cx("nuv-qrcode", className),
+		"data-error-correction": encoding.errorCorrection,
+		"data-version": encoding.version,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				className: "nuv-qrcode__ground",
+				width: "100%",
+				height: "100%"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				className: "nuv-qrcode__squares",
+				d: squares
+			}),
+			covered ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				className: "nuv-qrcode__overlay",
+				x: corner,
+				y: corner,
+				width: box,
+				height: box,
+				viewBox: "0 0 100 100",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					className: "nuv-qrcode__ground",
+					width: "100",
+					height: "100"
+				}), overlay]
+			}) : null
+		]
+	});
+});
+/**
+* The Swiss cross that marks a QR-bill's code, for `overlay`. The rules
+* for a QR-bill ask for error correction `"M"` and a cross 7 mm wide on a
+* code of 46 mm, which is an `overlaySize` of 0.152.
+*/
+const QRCodeSwissCross = (0, react.forwardRef)(function QRCodeSwissCross(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			className: "nuv-qrcode__cross-ground",
+			x: "8",
+			y: "8",
+			width: "84",
+			height: "84"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			className: "nuv-qrcode__cross-arms",
+			d: "M42.125 23.75h15.75v18.375h18.375v15.75H57.875v18.375h-15.75V57.875H23.75v-15.75h18.375z"
+		})]
+	});
+});
+//#endregion
+exports.QRCode = QRCode;
+exports.QRCodeSwissCross = QRCodeSwissCross;

package/dist/components/qrcode/qrcode.d.cts

@@ -0,0 +1,59 @@
+import { QRCodeErrorCorrection } from "./encode.cjs";
+import { ReactNode, SVGAttributes } from "react";
+//#region src/components/qrcode/qrcode.d.ts
+export interface QRCodeOwnProps {
+  /** What the code holds: an address, most often, or any text. */
+  value: string;
+  /**
+   * The width and the height, in pixels, with the empty edge.
+   * @default 160
+   */
+  size?: number;
+  /**
+   * How much of the code can be lost and still be read, from `"L"`, about
+   * 7%, to `"H"`, about 30%. Left out, it's `"M"`, or `"H"` when there's
+   * an `overlay`, which covers part of the code.
+   */
+  errorCorrection?: QRCodeErrorCorrection;
+  /**
+   * The empty space around the code, counted in its squares. A scanner
+   * finds the code by it, and the standard asks for four.
+   * @default 4
+   */
+  quietZone?: number;
+  /**
+   * Something drawn over the middle, such as a logo. It's SVG, drawn in a
+   * box 100 by 100: an `<image>`, shapes of your own, or
+   * `<QRCodeSwissCross />`. The squares under it are lost, which the
+   * error correction makes up for.
+   */
+  overlay?: ReactNode;
+  /**
+   * How much of the code's side the overlay takes, from 0.1 to 0.3. More
+   * than a fifth and some phones stop reading it: try the code you ship.
+   * @default 0.2
+   */
+  overlaySize?: number;
+  /**
+   * What's drawn when the value can't be a QR code: nothing to encode, or
+   * more than one holds. Without it there's an empty box with a line
+   * through it, which no scanner reads as anything.
+   */
+  fallback?: ReactNode;
+}
+export interface QRCodeProps extends QRCodeOwnProps, Omit<SVGAttributes<SVGSVGElement>, keyof QRCodeOwnProps> {}
+/**
+ * A QR code, drawn as an SVG. It's a picture with a name: say what the
+ * code is for with `aria-label`, and without one the name is the value.
+ *
+ * It has no state and needs no browser, so it can be a server component.
+ */
+export declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<SVGSVGElement>>;
+export interface QRCodeSwissCrossProps extends SVGAttributes<SVGGElement> {}
+/**
+ * The Swiss cross that marks a QR-bill's code, for `overlay`. The rules
+ * for a QR-bill ask for error correction `"M"` and a cross 7 mm wide on a
+ * code of 46 mm, which is an `overlaySize` of 0.152.
+ */
+export declare const QRCodeSwissCross: import("react").ForwardRefExoticComponent<QRCodeSwissCrossProps & import("react").RefAttributes<SVGGElement>>;
+//#endregion

package/dist/components/qrcode/qrcode.d.ts

@@ -0,0 +1,59 @@
+import { QRCodeErrorCorrection } from "./encode.js";
+import { ReactNode, SVGAttributes } from "react";
+//#region src/components/qrcode/qrcode.d.ts
+export interface QRCodeOwnProps {
+  /** What the code holds: an address, most often, or any text. */
+  value: string;
+  /**
+   * The width and the height, in pixels, with the empty edge.
+   * @default 160
+   */
+  size?: number;
+  /**
+   * How much of the code can be lost and still be read, from `"L"`, about
+   * 7%, to `"H"`, about 30%. Left out, it's `"M"`, or `"H"` when there's
+   * an `overlay`, which covers part of the code.
+   */
+  errorCorrection?: QRCodeErrorCorrection;
+  /**
+   * The empty space around the code, counted in its squares. A scanner
+   * finds the code by it, and the standard asks for four.
+   * @default 4
+   */
+  quietZone?: number;
+  /**
+   * Something drawn over the middle, such as a logo. It's SVG, drawn in a
+   * box 100 by 100: an `<image>`, shapes of your own, or
+   * `<QRCodeSwissCross />`. The squares under it are lost, which the
+   * error correction makes up for.
+   */
+  overlay?: ReactNode;
+  /**
+   * How much of the code's side the overlay takes, from 0.1 to 0.3. More
+   * than a fifth and some phones stop reading it: try the code you ship.
+   * @default 0.2
+   */
+  overlaySize?: number;
+  /**
+   * What's drawn when the value can't be a QR code: nothing to encode, or
+   * more than one holds. Without it there's an empty box with a line
+   * through it, which no scanner reads as anything.
+   */
+  fallback?: ReactNode;
+}
+export interface QRCodeProps extends QRCodeOwnProps, Omit<SVGAttributes<SVGSVGElement>, keyof QRCodeOwnProps> {}
+/**
+ * A QR code, drawn as an SVG. It's a picture with a name: say what the
+ * code is for with `aria-label`, and without one the name is the value.
+ *
+ * It has no state and needs no browser, so it can be a server component.
+ */
+export declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<SVGSVGElement>>;
+export interface QRCodeSwissCrossProps extends SVGAttributes<SVGGElement> {}
+/**
+ * The Swiss cross that marks a QR-bill's code, for `overlay`. The rules
+ * for a QR-bill ask for error correction `"M"` and a cross 7 mm wide on a
+ * code of 46 mm, which is an `overlaySize` of 0.152.
+ */
+export declare const QRCodeSwissCross: import("react").ForwardRefExoticComponent<QRCodeSwissCrossProps & import("react").RefAttributes<SVGGElement>>;
+//#endregion

package/dist/components/qrcode/qrcode.js

@@ -0,0 +1,120 @@
+import { cx } from "../../utils/cx.js";
+import { encodeQRCode } from "./encode.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/qrcode/qrcode.tsx
+const emptySize = 21;
+/**
+* A QR code, drawn as an SVG. It's a picture with a name: say what the
+* code is for with `aria-label`, and without one the name is the value.
+*
+* It has no state and needs no browser, so it can be a server component.
+*/
+const QRCode = forwardRef(function QRCode({ value, size = 160, errorCorrection, quietZone = 4, overlay, overlaySize = .2, fallback, className, "aria-label": label, "aria-labelledby": labelledBy, ...props }, ref) {
+	const covered = overlay !== void 0 && overlay !== null && overlay !== false;
+	const encoding = encodeQRCode(value, { errorCorrection: errorCorrection ?? (covered ? "H" : "M") });
+	if (!encoding && fallback !== void 0) return fallback;
+	const side = encoding?.size ?? emptySize;
+	const whole = side + quietZone * 2;
+	const name = labelledBy ? void 0 : label ?? value;
+	const root = {
+		ref,
+		width: size,
+		height: size,
+		viewBox: `0 0 ${whole} ${whole}`,
+		...props
+	};
+	if (!encoding) {
+		const hair = whole / size;
+		return /* @__PURE__ */ jsxs("svg", {
+			...root,
+			role: "img",
+			"aria-label": name,
+			"aria-labelledby": labelledBy,
+			className: cx("nuv-qrcode", className),
+			"data-invalid": "",
+			children: [/* @__PURE__ */ jsx("rect", {
+				className: "nuv-qrcode__ground",
+				width: "100%",
+				height: "100%"
+			}), /* @__PURE__ */ jsx("path", {
+				className: "nuv-qrcode__mark",
+				strokeWidth: hair,
+				strokeDasharray: `${hair * 4} ${hair * 3}`,
+				d: `M${hair / 2} ${hair / 2}H${whole - hair / 2}V${whole - hair / 2}H${hair / 2}ZM${hair / 2} ${whole - hair / 2}L${whole - hair / 2} ${hair / 2}`
+			})]
+		});
+	}
+	let squares = "";
+	for (const [y, row] of encoding.rows.entries()) {
+		let x = 0;
+		while (x < side) {
+			if (!row[x]) {
+				x += 1;
+				continue;
+			}
+			let end = x;
+			while (end < side && row[end]) end += 1;
+			squares += `M${x + quietZone} ${y + quietZone}h${end - x}v1h${x - end}z`;
+			x = end;
+		}
+	}
+	const box = Math.round(side * Math.min(.3, Math.max(.1, overlaySize)) * 1e3) / 1e3;
+	const corner = Math.round((quietZone + (side - box) / 2) * 1e3) / 1e3;
+	return /* @__PURE__ */ jsxs("svg", {
+		...root,
+		role: "img",
+		"aria-label": name,
+		"aria-labelledby": labelledBy,
+		className: cx("nuv-qrcode", className),
+		"data-error-correction": encoding.errorCorrection,
+		"data-version": encoding.version,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				className: "nuv-qrcode__ground",
+				width: "100%",
+				height: "100%"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				className: "nuv-qrcode__squares",
+				d: squares
+			}),
+			covered ? /* @__PURE__ */ jsxs("svg", {
+				className: "nuv-qrcode__overlay",
+				x: corner,
+				y: corner,
+				width: box,
+				height: box,
+				viewBox: "0 0 100 100",
+				children: [/* @__PURE__ */ jsx("rect", {
+					className: "nuv-qrcode__ground",
+					width: "100",
+					height: "100"
+				}), overlay]
+			}) : null
+		]
+	});
+});
+/**
+* The Swiss cross that marks a QR-bill's code, for `overlay`. The rules
+* for a QR-bill ask for error correction `"M"` and a cross 7 mm wide on a
+* code of 46 mm, which is an `overlaySize` of 0.152.
+*/
+const QRCodeSwissCross = forwardRef(function QRCodeSwissCross(props, ref) {
+	return /* @__PURE__ */ jsxs("g", {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			className: "nuv-qrcode__cross-ground",
+			x: "8",
+			y: "8",
+			width: "84",
+			height: "84"
+		}), /* @__PURE__ */ jsx("path", {
+			className: "nuv-qrcode__cross-arms",
+			d: "M42.125 23.75h15.75v18.375h18.375v15.75H57.875v18.375h-15.75V57.875H23.75v-15.75h18.375z"
+		})]
+	});
+});
+//#endregion
+export { QRCode, QRCodeSwissCross };

package/dist/css/barcode.css

@@ -0,0 +1,26 @@
+@layer tokens, base, components;
+@layer components {
+  .nuv-barcode {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+    forced-color-adjust: none;
+  }
+  .nuv-barcode__ground {
+    fill: var(--nuv-barcode-bg, var(--color-white));
+  }
+  .nuv-barcode__bars {
+    fill: var(--nuv-barcode-fg, var(--color-black));
+  }
+  .nuv-barcode__text {
+    direction: ltr;
+    fill: var(--nuv-barcode-fg, var(--color-black));
+    font-family: var(--nuv-barcode-font, var(--font-mono));
+  }
+  .nuv-barcode__mark {
+    fill: none;
+    stroke: var(--nuv-barcode-invalid, var(--color-danger));
+    stroke-width: 1;
+    stroke-dasharray: 4 3;
+  }
+}

package/dist/css/qrcode.css

@@ -0,0 +1,28 @@
+@layer tokens, base, components;
+@layer components {
+  .nuv-qrcode {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+    forced-color-adjust: none;
+  }
+  .nuv-qrcode__ground {
+    fill: var(--nuv-qrcode-bg, var(--color-white));
+  }
+  .nuv-qrcode__squares {
+    fill: var(--nuv-qrcode-fg, var(--color-black));
+  }
+  .nuv-qrcode__overlay {
+    overflow: hidden;
+  }
+  .nuv-qrcode__cross-ground {
+    fill: var(--color-black);
+  }
+  .nuv-qrcode__cross-arms {
+    fill: var(--color-white);
+  }
+  .nuv-qrcode__mark {
+    fill: none;
+    stroke: var(--nuv-qrcode-invalid, var(--color-danger));
+  }
+}