@nuvui/barcodes 0.0.0-stage → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_encode = require("./components/barcode/encode.cjs");
+const require_barcode = require("./components/barcode/barcode.cjs");
+const require_encode$1 = require("./components/qrcode/encode.cjs");
+const require_qrcode = require("./components/qrcode/qrcode.cjs");
+const require_save = require("./save.cjs");
+exports.Barcode = require_barcode.Barcode;
+exports.QRCode = require_qrcode.QRCode;
+exports.QRCodeSwissCross = require_qrcode.QRCodeSwissCross;
+exports.barcodeTypes = require_encode.barcodeTypes;
+exports.codeToBlob = require_save.codeToBlob;
+exports.codeToSvg = require_save.codeToSvg;
+exports.encodeBarcode = require_encode.encodeBarcode;
+exports.encodeQRCode = require_encode$1.encodeQRCode;
+exports.saveCode = require_save.saveCode;

package/dist/index.d.cts

@@ -0,0 +1,8 @@
+import { BarcodeEncodeOptions, BarcodeEncoding, BarcodePart, BarcodeType, barcodeTypes, encodeBarcode } from "./components/barcode/encode.cjs";
+import { Barcode, BarcodeOwnProps, BarcodeProps } from "./components/barcode/barcode.cjs";
+import "./components/barcode/index.cjs";
+import { QRCodeEncodeOptions, QRCodeEncoding, QRCodeErrorCorrection, encodeQRCode } from "./components/qrcode/encode.cjs";
+import { QRCode, QRCodeOwnProps, QRCodeProps, QRCodeSwissCross, QRCodeSwissCrossProps } from "./components/qrcode/qrcode.cjs";
+import "./components/qrcode/index.cjs";
+import { CodeFileOptions, SaveCodeOptions, codeToBlob, codeToSvg, saveCode } from "./save.cjs";
+export { Barcode, type BarcodeEncodeOptions, type BarcodeEncoding, type BarcodeOwnProps, type BarcodePart, type BarcodeProps, type BarcodeType, CodeFileOptions, QRCode, type QRCodeEncodeOptions, type QRCodeEncoding, type QRCodeErrorCorrection, type QRCodeOwnProps, type QRCodeProps, QRCodeSwissCross, type QRCodeSwissCrossProps, SaveCodeOptions, barcodeTypes, codeToBlob, codeToSvg, encodeBarcode, encodeQRCode, saveCode };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { BarcodeEncodeOptions, BarcodeEncoding, BarcodePart, BarcodeType, barcodeTypes, encodeBarcode } from "./components/barcode/encode.js";
+import { Barcode, BarcodeOwnProps, BarcodeProps } from "./components/barcode/barcode.js";
+import "./components/barcode/index.js";
+import { QRCodeEncodeOptions, QRCodeEncoding, QRCodeErrorCorrection, encodeQRCode } from "./components/qrcode/encode.js";
+import { QRCode, QRCodeOwnProps, QRCodeProps, QRCodeSwissCross, QRCodeSwissCrossProps } from "./components/qrcode/qrcode.js";
+import "./components/qrcode/index.js";
+import { CodeFileOptions, SaveCodeOptions, codeToBlob, codeToSvg, saveCode } from "./save.js";
+export { Barcode, type BarcodeEncodeOptions, type BarcodeEncoding, type BarcodeOwnProps, type BarcodePart, type BarcodeProps, type BarcodeType, CodeFileOptions, QRCode, type QRCodeEncodeOptions, type QRCodeEncoding, type QRCodeErrorCorrection, type QRCodeOwnProps, type QRCodeProps, QRCodeSwissCross, type QRCodeSwissCrossProps, SaveCodeOptions, barcodeTypes, codeToBlob, codeToSvg, encodeBarcode, encodeQRCode, saveCode };

package/dist/index.js

@@ -0,0 +1,6 @@
+import { barcodeTypes, encodeBarcode } from "./components/barcode/encode.js";
+import { Barcode } from "./components/barcode/barcode.js";
+import { encodeQRCode } from "./components/qrcode/encode.js";
+import { QRCode, QRCodeSwissCross } from "./components/qrcode/qrcode.js";
+import { codeToBlob, codeToSvg, saveCode } from "./save.js";
+export { Barcode, QRCode, QRCodeSwissCross, barcodeTypes, codeToBlob, codeToSvg, encodeBarcode, encodeQRCode, saveCode };

package/dist/save.cjs

@@ -0,0 +1,120 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/save.ts
+const carried = [
+	"fill",
+	"stroke",
+	"stroke-width",
+	"stroke-dasharray",
+	"font-family",
+	"font-size",
+	"font-weight",
+	"direction"
+];
+function read(blob) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(String(reader.result));
+		reader.onerror = () => reject(reader.error);
+		reader.readAsDataURL(blob);
+	});
+}
+async function embed(image) {
+	const address = image.getAttribute("href") ?? image.getAttribute("xlink:href") ?? "";
+	if (address === "" || address.startsWith("data:")) return;
+	try {
+		const answer = await fetch(new URL(address, document.baseURI));
+		if (!answer.ok) return;
+		image.setAttribute("href", await read(await answer.blob()));
+		image.removeAttribute("xlink:href");
+	} catch {}
+}
+/**
+* The text of an SVG file for a `Barcode` or a `QRCode` on the page, with
+* its colors and its font written into it.
+*/
+function codeToSvg(code) {
+	return write(code, 1);
+}
+async function write(code, scale) {
+	const copy = code.cloneNode(true);
+	const drawn = [code, ...code.querySelectorAll("*")];
+	const copied = [copy, ...copy.querySelectorAll("*")];
+	for (const [index, element] of copied.entries()) {
+		const from = drawn[index];
+		if (!from) continue;
+		const style = getComputedStyle(from);
+		if (element !== copy) for (const property of carried) {
+			const value = style.getPropertyValue(property);
+			if (value !== "") element.setAttribute(property, value);
+		}
+		element.removeAttribute("class");
+		element.removeAttribute("style");
+	}
+	await Promise.all(Array.from(copy.querySelectorAll("image"), embed));
+	const box = code.viewBox.baseVal;
+	const width = Number(code.getAttribute("width") ?? box.width);
+	const height = Number(code.getAttribute("height") ?? box.height);
+	copy.setAttribute("width", String(width * scale));
+	copy.setAttribute("height", String(height * scale));
+	copy.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+	copy.removeAttribute("role");
+	const name = code.getAttribute("aria-label");
+	copy.removeAttribute("aria-label");
+	copy.removeAttribute("aria-labelledby");
+	if (name) {
+		const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+		title.textContent = name;
+		copy.prepend(title);
+	}
+	return new XMLSerializer().serializeToString(copy);
+}
+/**
+* A `Barcode` or a `QRCode` on the page as a file's contents: an SVG, or
+* a PNG at `scale` times the size.
+*/
+async function codeToBlob(code, { format = "svg", scale = 4 } = {}) {
+	const svg = new Blob([await write(code, format === "svg" ? 1 : scale)], { type: "image/svg+xml;charset=utf-8" });
+	if (format === "svg") return svg;
+	const address = URL.createObjectURL(svg);
+	try {
+		const image = new Image();
+		await new Promise((resolve, reject) => {
+			image.onload = () => resolve();
+			image.onerror = () => reject(/* @__PURE__ */ new Error("The code couldn't be drawn."));
+			image.src = address;
+		});
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.round(image.width);
+		canvas.height = Math.round(image.height);
+		const context = canvas.getContext("2d");
+		if (!context) throw new Error("The browser gave no canvas to draw on.");
+		context.drawImage(image, 0, 0, canvas.width, canvas.height);
+		return await new Promise((resolve, reject) => {
+			canvas.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error("The code couldn't be made into a PNG.")), "image/png");
+		});
+	} finally {
+		URL.revokeObjectURL(address);
+	}
+}
+/**
+* Saves a `Barcode` or a `QRCode` on the page as a file, the way a link
+* with `download` does. Call it from a press of a button.
+*/
+async function saveCode(code, { name = "code", format = "svg", scale } = {}) {
+	const address = URL.createObjectURL(await codeToBlob(code, {
+		format,
+		scale
+	}));
+	const link = document.createElement("a");
+	link.href = address;
+	link.download = `${name}.${format}`;
+	link.hidden = true;
+	document.body.append(link);
+	link.click();
+	link.remove();
+	setTimeout(() => URL.revokeObjectURL(address), 1e3);
+}
+//#endregion
+exports.codeToBlob = codeToBlob;
+exports.codeToSvg = codeToSvg;
+exports.saveCode = saveCode;

package/dist/save.d.cts

@@ -0,0 +1,38 @@
+//#region src/save.d.ts
+export interface CodeFileOptions {
+  /**
+   * `"svg"` stays sharp at any size and is the one to print from. `"png"`
+   * is for where an SVG isn't taken.
+   * @default "svg"
+   */
+  format?: "svg" | "png";
+  /**
+   * How many pixels of a PNG there are to each pixel of the code on the
+   * page. A code that's printed wants more than one that's shown.
+   * @default 4
+   */
+  scale?: number;
+}
+export interface SaveCodeOptions extends CodeFileOptions {
+  /**
+   * The file's name, without its ending.
+   * @default "code"
+   */
+  name?: string;
+}
+/**
+ * The text of an SVG file for a `Barcode` or a `QRCode` on the page, with
+ * its colors and its font written into it.
+ */
+export declare function codeToSvg(code: SVGSVGElement): Promise<string>;
+/**
+ * A `Barcode` or a `QRCode` on the page as a file's contents: an SVG, or
+ * a PNG at `scale` times the size.
+ */
+export declare function codeToBlob(code: SVGSVGElement, { format, scale }?: CodeFileOptions): Promise<Blob>;
+/**
+ * Saves a `Barcode` or a `QRCode` on the page as a file, the way a link
+ * with `download` does. Call it from a press of a button.
+ */
+export declare function saveCode(code: SVGSVGElement, { name, format, scale }?: SaveCodeOptions): Promise<void>;
+//#endregion

package/dist/save.d.ts

@@ -0,0 +1,38 @@
+//#region src/save.d.ts
+export interface CodeFileOptions {
+  /**
+   * `"svg"` stays sharp at any size and is the one to print from. `"png"`
+   * is for where an SVG isn't taken.
+   * @default "svg"
+   */
+  format?: "svg" | "png";
+  /**
+   * How many pixels of a PNG there are to each pixel of the code on the
+   * page. A code that's printed wants more than one that's shown.
+   * @default 4
+   */
+  scale?: number;
+}
+export interface SaveCodeOptions extends CodeFileOptions {
+  /**
+   * The file's name, without its ending.
+   * @default "code"
+   */
+  name?: string;
+}
+/**
+ * The text of an SVG file for a `Barcode` or a `QRCode` on the page, with
+ * its colors and its font written into it.
+ */
+export declare function codeToSvg(code: SVGSVGElement): Promise<string>;
+/**
+ * A `Barcode` or a `QRCode` on the page as a file's contents: an SVG, or
+ * a PNG at `scale` times the size.
+ */
+export declare function codeToBlob(code: SVGSVGElement, { format, scale }?: CodeFileOptions): Promise<Blob>;
+/**
+ * Saves a `Barcode` or a `QRCode` on the page as a file, the way a link
+ * with `download` does. Call it from a press of a button.
+ */
+export declare function saveCode(code: SVGSVGElement, { name, format, scale }?: SaveCodeOptions): Promise<void>;
+//#endregion

package/dist/save.js

@@ -0,0 +1,117 @@
+//#region src/save.ts
+const carried = [
+	"fill",
+	"stroke",
+	"stroke-width",
+	"stroke-dasharray",
+	"font-family",
+	"font-size",
+	"font-weight",
+	"direction"
+];
+function read(blob) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(String(reader.result));
+		reader.onerror = () => reject(reader.error);
+		reader.readAsDataURL(blob);
+	});
+}
+async function embed(image) {
+	const address = image.getAttribute("href") ?? image.getAttribute("xlink:href") ?? "";
+	if (address === "" || address.startsWith("data:")) return;
+	try {
+		const answer = await fetch(new URL(address, document.baseURI));
+		if (!answer.ok) return;
+		image.setAttribute("href", await read(await answer.blob()));
+		image.removeAttribute("xlink:href");
+	} catch {}
+}
+/**
+* The text of an SVG file for a `Barcode` or a `QRCode` on the page, with
+* its colors and its font written into it.
+*/
+function codeToSvg(code) {
+	return write(code, 1);
+}
+async function write(code, scale) {
+	const copy = code.cloneNode(true);
+	const drawn = [code, ...code.querySelectorAll("*")];
+	const copied = [copy, ...copy.querySelectorAll("*")];
+	for (const [index, element] of copied.entries()) {
+		const from = drawn[index];
+		if (!from) continue;
+		const style = getComputedStyle(from);
+		if (element !== copy) for (const property of carried) {
+			const value = style.getPropertyValue(property);
+			if (value !== "") element.setAttribute(property, value);
+		}
+		element.removeAttribute("class");
+		element.removeAttribute("style");
+	}
+	await Promise.all(Array.from(copy.querySelectorAll("image"), embed));
+	const box = code.viewBox.baseVal;
+	const width = Number(code.getAttribute("width") ?? box.width);
+	const height = Number(code.getAttribute("height") ?? box.height);
+	copy.setAttribute("width", String(width * scale));
+	copy.setAttribute("height", String(height * scale));
+	copy.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+	copy.removeAttribute("role");
+	const name = code.getAttribute("aria-label");
+	copy.removeAttribute("aria-label");
+	copy.removeAttribute("aria-labelledby");
+	if (name) {
+		const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+		title.textContent = name;
+		copy.prepend(title);
+	}
+	return new XMLSerializer().serializeToString(copy);
+}
+/**
+* A `Barcode` or a `QRCode` on the page as a file's contents: an SVG, or
+* a PNG at `scale` times the size.
+*/
+async function codeToBlob(code, { format = "svg", scale = 4 } = {}) {
+	const svg = new Blob([await write(code, format === "svg" ? 1 : scale)], { type: "image/svg+xml;charset=utf-8" });
+	if (format === "svg") return svg;
+	const address = URL.createObjectURL(svg);
+	try {
+		const image = new Image();
+		await new Promise((resolve, reject) => {
+			image.onload = () => resolve();
+			image.onerror = () => reject(/* @__PURE__ */ new Error("The code couldn't be drawn."));
+			image.src = address;
+		});
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.round(image.width);
+		canvas.height = Math.round(image.height);
+		const context = canvas.getContext("2d");
+		if (!context) throw new Error("The browser gave no canvas to draw on.");
+		context.drawImage(image, 0, 0, canvas.width, canvas.height);
+		return await new Promise((resolve, reject) => {
+			canvas.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error("The code couldn't be made into a PNG.")), "image/png");
+		});
+	} finally {
+		URL.revokeObjectURL(address);
+	}
+}
+/**
+* Saves a `Barcode` or a `QRCode` on the page as a file, the way a link
+* with `download` does. Call it from a press of a button.
+*/
+async function saveCode(code, { name = "code", format = "svg", scale } = {}) {
+	const address = URL.createObjectURL(await codeToBlob(code, {
+		format,
+		scale
+	}));
+	const link = document.createElement("a");
+	link.href = address;
+	link.download = `${name}.${format}`;
+	link.hidden = true;
+	document.body.append(link);
+	link.click();
+	link.remove();
+	setTimeout(() => URL.revokeObjectURL(address), 1e3);
+}
+//#endregion
+export { codeToBlob, codeToSvg, saveCode };

package/dist/styles.css

@@ -0,0 +1,53 @@
+@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;
+  }
+}
+@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));
+  }
+}

package/dist/utils/cx.cjs

@@ -0,0 +1,6 @@
+//#region src/utils/cx.ts
+function cx(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+//#endregion
+exports.cx = cx;

package/dist/utils/cx.js

@@ -0,0 +1,6 @@
+//#region src/utils/cx.ts
+function cx(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+//#endregion
+export { cx };

package/package.json

@@ -1,6 +1,121 @@
 {
   "name": "@nuvui/barcodes",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Barcodes and QR codes for @nuvui/react, drawn as SVG.",
+  "license": "MIT",
+  "author": "Nuvraxis",
+  "homepage": "https://nuvui.nuvraxis.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nuvraxis/nuvui.git",
+    "directory": "packages/barcodes"
+  },
+  "bugs": {
+    "url": "https://github.com/Nuvraxis/nuvui/issues"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./barcode": {
+      "import": {
+        "types": "./dist/components/barcode/index.d.ts",
+        "default": "./dist/components/barcode/index.js"
+      },
+      "require": {
+        "types": "./dist/components/barcode/index.d.cts",
+        "default": "./dist/components/barcode/index.cjs"
+      }
+    },
+    "./qrcode": {
+      "import": {
+        "types": "./dist/components/qrcode/index.d.ts",
+        "default": "./dist/components/qrcode/index.js"
+      },
+      "require": {
+        "types": "./dist/components/qrcode/index.d.cts",
+        "default": "./dist/components/qrcode/index.cjs"
+      }
+    },
+    "./save": {
+      "import": {
+        "types": "./dist/save.d.ts",
+        "default": "./dist/save.js"
+      },
+      "require": {
+        "types": "./dist/save.d.cts",
+        "default": "./dist/save.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./css/*.css": "./dist/css/*.css",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@nuvui/react": "^0.4.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@nuvui/react": "0.4.0",
+    "@nuvui/tooling": "0.0.0",
+    "@nuvui/typescript-config": "0.0.0",
+    "@size-limit/preset-small-lib": "14.1.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitest/browser-playwright": "^5.0.3",
+    "@zxing/library": "^0.23.0",
+    "axe-core": "^4.13.0",
+    "playwright": "1.63.0",
+    "publint": "^0.3.25",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "sass-embedded": "^1.105.1",
+    "size-limit": "14.1.0",
+    "stylelint": "^17.16.0",
+    "tsdown": "0.23.0",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.3",
+    "vitest-browser-react": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "jsbarcode": "^3.12.3",
+    "uqr": "~0.1.3"
+  },
+  "scripts": {
+    "build": "tsdown && node scripts/check-dist.mjs",
+    "dev": "tsdown --watch src",
+    "lint": "stylelint \"src/**/*.scss\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check:package": "publint && pnpm pack --out node_modules/.cache/attw/package.tgz && attw node_modules/.cache/attw/package.tgz",
+    "size": "size-limit"
+  }
 }