@mantine-vue/qr-code 3.4.0

package/README.md

@@ -0,0 +1,30 @@
+# @mantine-vue/qr-code
+
+A Mantine Vue QR code component with custom data and finder shapes, image overlays, a complete Styles API, and SVG, PNG, JPEG, and WebP downloads.
+
+## Installation
+
+```bash
+yarn add @mantine-vue/qr-code @mantine-vue/core @mantine-vue/hooks qrcode
+```
+
+Import styles after core styles:
+
+```ts
+import '@mantine-vue/core/styles.css'
+import '@mantine-vue/qr-code/styles.css'
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { QRCode } from '@mantine-vue/qr-code'
+</script>
+
+<template>
+  <QRCode value="https://mantine-vue.dev" />
+</template>
+```
+
+See the Mantine Vue documentation for all customization and download examples.

package/cjs/index.cjs

@@ -0,0 +1,413 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let _mantine_vue_core = require("@mantine-vue/core");
+let vue = require("vue");
+let _mantine_vue_hooks = require("@mantine-vue/hooks");
+let qrcode = require("qrcode");
+qrcode = __toESM(qrcode);
+//#region src/utils/dot-shapes.ts
+/** Generates SVG path data for one data module. */
+function dotPath(x, y, cellSize, style) {
+	if (style === "dots") {
+		const radius = cellSize / 2;
+		return `M${x + radius},${y + radius - radius}a${radius},${radius} 0 1,1 0,${radius * 2}a${radius},${radius} 0 1,1 0,${-radius * 2}z`;
+	}
+	if (style === "rounded") {
+		const radius = cellSize * .3;
+		return `M${x + radius},${y}h${cellSize - 2 * radius}a${radius},${radius} 0 0,1 ${radius},${radius}v${cellSize - 2 * radius}a${radius},${radius} 0 0,1 ${-radius},${radius}h${-(cellSize - 2 * radius)}a${radius},${radius} 0 0,1 ${-radius},${-radius}v${-(cellSize - 2 * radius)}a${radius},${radius} 0 0,1 ${radius},${-radius}z`;
+	}
+	return `M${x},${y}h${cellSize}v${cellSize}h${-cellSize}z`;
+}
+//#endregion
+//#region src/utils/finder-shapes.ts
+function roundedRect(x, y, width, height, radius) {
+	return `M${x + radius},${y}h${width - 2 * radius}a${radius},${radius} 0 0,1 ${radius},${radius}v${height - 2 * radius}a${radius},${radius} 0 0,1 ${-radius},${radius}h${-(width - 2 * radius)}a${radius},${radius} 0 0,1 ${-radius},${-radius}v${-(height - 2 * radius)}a${radius},${radius} 0 0,1 ${radius},${-radius}z`;
+}
+function roundedRectReverse(x, y, width, height, radius) {
+	return `M${x + radius},${y}a${radius},${radius} 0 0,0 ${-radius},${radius}v${height - 2 * radius}a${radius},${radius} 0 0,0 ${radius},${radius}h${width - 2 * radius}a${radius},${radius} 0 0,0 ${radius},${-radius}v${-(height - 2 * radius)}a${radius},${radius} 0 0,0 ${-radius},${-radius}z`;
+}
+/** Generates separate outer-ring and inner paths for a 7x7 finder pattern. */
+function finderPatternPaths(x, y, cellSize, style) {
+	if (style === "square") return {
+		outer: `M${x},${y}h${cellSize * 7}v${cellSize * 7}h${-cellSize * 7}zM${x + cellSize},${y + cellSize}v${cellSize * 5}h${cellSize * 5}v${-cellSize * 5}z`,
+		inner: `M${x + cellSize * 2},${y + cellSize * 2}h${cellSize * 3}v${cellSize * 3}h${-cellSize * 3}z`
+	};
+	const outerRadius = style === "dots" ? cellSize * 3.5 : cellSize * 1.2;
+	const holeRadius = style === "dots" ? cellSize * 2.5 : cellSize * .8;
+	const innerRadius = style === "dots" ? cellSize * 1.5 : cellSize * .6;
+	return {
+		outer: roundedRect(x, y, cellSize * 7, cellSize * 7, outerRadius) + roundedRectReverse(x + cellSize, y + cellSize, cellSize * 5, cellSize * 5, holeRadius),
+		inner: roundedRect(x + cellSize * 2, y + cellSize * 2, cellSize * 3, cellSize * 3, innerRadius)
+	};
+}
+//#endregion
+//#region src/utils/qr-encoder.ts
+function generateQRMatrix(value, errorCorrectionLevel = "M") {
+	const qr = qrcode.default.create(value, { errorCorrectionLevel });
+	const size = qr.modules.size;
+	const matrix = [];
+	for (let row = 0; row < size; row += 1) {
+		const rowData = [];
+		for (let column = 0; column < size; column += 1) rowData.push(qr.modules.data[row * size + column] === 1);
+		matrix.push(rowData);
+	}
+	return {
+		modules: matrix,
+		size
+	};
+}
+function isFinderPattern(row, column, matrixSize) {
+	return row < 7 && column < 7 || row < 7 && column >= matrixSize - 7 || row >= matrixSize - 7 && column < 7;
+}
+//#endregion
+//#region src/utils/utils.ts
+/** Builds a mask identifying modules hidden by the center image and its padding. */
+function getExcavationMask(matrixSize, imageModuleSize, imagePadding) {
+	const mask = Array.from({ length: matrixSize }, () => Array(matrixSize).fill(false));
+	const totalImageModules = imageModuleSize + imagePadding * 2;
+	const startModule = Math.floor((matrixSize - totalImageModules) / 2);
+	const endModule = startModule + totalImageModules;
+	for (let row = 0; row < matrixSize; row += 1) for (let column = 0; column < matrixSize; column += 1) if (row >= startModule && row < endModule && column >= startModule && column < endModule) mask[row][column] = true;
+	return mask;
+}
+var QRCode_module_default = {
+	root: "_root_6mmnv_1",
+	svg: "_svg_6mmnv_15",
+	background: "_background_6mmnv_20",
+	modules: "_modules_6mmnv_24",
+	finderOuter: "_finderOuter_6mmnv_25",
+	finderInner: "_finderInner_6mmnv_26",
+	finderPattern: "_finderPattern_6mmnv_30",
+	image: "_image_6mmnv_33"
+};
+//#endregion
+//#region src/QRCode.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["viewBox", "aria-label"];
+var _hoisted_2 = ["width", "height"];
+var _hoisted_3 = ["d"];
+var _hoisted_4 = ["d"];
+var _hoisted_5 = ["d"];
+var _hoisted_6 = [
+	"href",
+	"x",
+	"y",
+	"width",
+	"height",
+	"clip-path"
+];
+var defaultProps = {
+	size: "md",
+	color: "dark",
+	background: "white",
+	errorCorrectionLevel: "M",
+	quietZone: 1,
+	dotStyle: "square",
+	cornerStyle: "square",
+	imageSize: .2,
+	imagePadding: 1,
+	imageExcavate: true
+};
+var varsResolver = (0, _mantine_vue_core.createVarsResolver)((theme, { size, radius, color, background }) => ({ root: {
+	"--qr-code-size": (0, _mantine_vue_core.getSize)(size, "qr-code-size"),
+	"--qr-code-radius": radius !== void 0 ? (0, _mantine_vue_core.getRadius)(radius) : void 0,
+	"--qr-code-color": color ? (0, _mantine_vue_core.getThemeColor)(color, theme) : void 0,
+	"--qr-code-background": background === "transparent" ? "transparent" : background ? (0, _mantine_vue_core.getThemeColor)(background, theme) : void 0
+} }));
+//#endregion
+//#region src/QRCode.vue
+var QRCode_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "QRCode",
+	inheritAttrs: false,
+	__name: "QRCode",
+	props: {
+		component: { default: void 0 },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		},
+		value: {},
+		size: { default: void 0 },
+		radius: { default: void 0 },
+		color: { default: void 0 },
+		background: { default: void 0 },
+		errorCorrectionLevel: { default: void 0 },
+		quietZone: { default: void 0 },
+		dotStyle: { default: void 0 },
+		cornerStyle: { default: void 0 },
+		image: { default: void 0 },
+		imageSize: { default: void 0 },
+		imageRadius: { default: void 0 },
+		imagePadding: { default: void 0 },
+		imageExcavate: {
+			type: Boolean,
+			default: void 0
+		},
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
+		unstyled: { type: Boolean }
+	},
+	setup(__props, { expose: __expose }) {
+		const rawProps = __props;
+		const attrs = (0, vue.useAttrs)();
+		const props = (0, _mantine_vue_core.useProps)("QRCode", defaultProps, rawProps);
+		const getStyles = (0, _mantine_vue_core.useStyles)({
+			name: "QRCode",
+			props,
+			classes: QRCode_module_default,
+			get className() {
+				return attrs.class;
+			},
+			get style() {
+				return attrs.style;
+			},
+			classNames: props.classNames,
+			styles: props.styles,
+			vars: props.vars,
+			varsResolver,
+			unstyled: props.unstyled
+		});
+		const rootElement = (0, vue.ref)(null);
+		const setRootRef = (node) => {
+			rootElement.value = node;
+			(0, _mantine_vue_hooks.assignRef)(props.rootRef, node);
+		};
+		__expose({ rootElement });
+		const qrData = (0, vue.computed)(() => {
+			if (!props.value) return null;
+			try {
+				return generateQRMatrix(props.value, props.errorCorrectionLevel);
+			} catch {
+				return null;
+			}
+		});
+		const svgContent = (0, vue.computed)(() => {
+			if (!qrData.value) return null;
+			const { modules, size: matrixSize } = qrData.value;
+			const quietZone = props.quietZone ?? defaultProps.quietZone;
+			const imageSizeRatio = props.imageSize ?? defaultProps.imageSize;
+			const imagePadding = props.imagePadding ?? defaultProps.imagePadding;
+			const dotStyle = props.dotStyle ?? defaultProps.dotStyle;
+			const cornerStyle = props.cornerStyle ?? defaultProps.cornerStyle;
+			const viewBoxSize = matrixSize + quietZone * 2;
+			const excavationMask = props.image && props.imageExcavate ? getExcavationMask(matrixSize, Math.ceil(matrixSize * imageSizeRatio), imagePadding) : null;
+			let modulesPath = "";
+			for (let row = 0; row < matrixSize; row += 1) for (let column = 0; column < matrixSize; column += 1) {
+				if (!modules[row][column] || isFinderPattern(row, column, matrixSize) || excavationMask?.[row][column]) continue;
+				modulesPath += dotPath(column + quietZone, row + quietZone, 1, dotStyle);
+			}
+			const finders = [
+				{
+					key: "top-left",
+					row: 0,
+					column: 0
+				},
+				{
+					key: "top-right",
+					row: 0,
+					column: matrixSize - 7
+				},
+				{
+					key: "bottom-left",
+					row: matrixSize - 7,
+					column: 0
+				}
+			].map((position) => ({
+				key: position.key,
+				...finderPatternPaths(position.column + quietZone, position.row + quietZone, 1, cornerStyle)
+			}));
+			const imageElement = props.image ? (() => {
+				const imageSize = matrixSize * imageSizeRatio;
+				return {
+					x: (viewBoxSize - imageSize) / 2,
+					y: (viewBoxSize - imageSize) / 2,
+					size: imageSize,
+					radius: props.imageRadius !== void 0 ? (0, _mantine_vue_core.getRadius)(props.imageRadius) : "0"
+				};
+			})() : null;
+			return {
+				viewBoxSize,
+				modulesPath,
+				finders,
+				imageElement
+			};
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(getStyles)("root")
+			}, {
+				component: (0, vue.unref)(props).component,
+				"root-ref": setRootRef
+			}), {
+				default: (0, vue.withCtx)(() => [svgContent.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(getStyles)("svg"), {
+					viewBox: `0 0 ${svgContent.value.viewBoxSize} ${svgContent.value.viewBoxSize}`,
+					xmlns: "http://www.w3.org/2000/svg",
+					role: "img",
+					"aria-label": `QR Code: ${(0, vue.unref)(props).value}`
+				}), [
+					(0, vue.createElementVNode)("rect", (0, vue.mergeProps)((0, vue.unref)(getStyles)("background"), {
+						x: "0",
+						y: "0",
+						width: svgContent.value.viewBoxSize,
+						height: svgContent.value.viewBoxSize
+					}), null, 16, _hoisted_2),
+					svgContent.value.modulesPath ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("path", (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(getStyles)("modules"), {
+						d: svgContent.value.modulesPath,
+						"fill-rule": "nonzero"
+					}), null, 16, _hoisted_3)) : (0, vue.createCommentVNode)("", true),
+					((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(svgContent.value.finders, (finder) => {
+						return (0, vue.openBlock)(), (0, vue.createElementBlock)("g", (0, vue.mergeProps)({ key: finder.key }, { ref_for: true }, (0, vue.unref)(getStyles)("finderPattern")), [(0, vue.createElementVNode)("path", (0, vue.mergeProps)({ ref_for: true }, (0, vue.unref)(getStyles)("finderOuter"), {
+							d: finder.outer,
+							"fill-rule": "evenodd"
+						}), null, 16, _hoisted_4), (0, vue.createElementVNode)("path", (0, vue.mergeProps)({ ref_for: true }, (0, vue.unref)(getStyles)("finderInner"), { d: finder.inner }), null, 16, _hoisted_5)], 16);
+					}), 128)),
+					svgContent.value.imageElement ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("image", (0, vue.mergeProps)({ key: 1 }, (0, vue.unref)(getStyles)("image"), {
+						href: (0, vue.unref)(props).image,
+						x: svgContent.value.imageElement.x,
+						y: svgContent.value.imageElement.y,
+						width: svgContent.value.imageElement.size,
+						height: svgContent.value.imageElement.size,
+						"clip-path": `inset(0 round ${svgContent.value.imageElement.radius})`,
+						preserveAspectRatio: "xMidYMid slice"
+					}), null, 16, _hoisted_6)) : (0, vue.createCommentVNode)("", true)
+				], 16, _hoisted_1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, (0, vue.unref)(getStyles)("svg"))), null, 16))]),
+				_: 1
+			}, 16, ["component"]);
+		};
+	}
+});
+//#endregion
+//#region src/QRCode.ts
+var QRCode = (0, _mantine_vue_core.polymorphicFactory)(QRCode_default, {
+	classes: QRCode_module_default,
+	varsResolver
+});
+//#endregion
+//#region src/use-qr-code-download.ts
+function serializeSvg(svgElement) {
+	const clone = svgElement.cloneNode(true);
+	if (!clone.getAttribute("xmlns")) clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+	const computedStyle = getComputedStyle(svgElement);
+	const background = computedStyle.getPropertyValue("--qr-code-background").trim() || "#ffffff";
+	const foreground = computedStyle.getPropertyValue("--qr-code-color").trim() || "#000000";
+	clone.querySelector("rect")?.setAttribute("fill", background);
+	clone.querySelectorAll("path").forEach((path) => {
+		const fill = path.getAttribute("fill");
+		if (!fill || fill === "currentColor") path.setAttribute("fill", foreground);
+	});
+	return new XMLSerializer().serializeToString(clone);
+}
+function createSvgBlob(svg) {
+	return new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+}
+async function svgToCanvas(svgElement, scale) {
+	const url = URL.createObjectURL(createSvgBlob(serializeSvg(svgElement)));
+	const viewBox = svgElement.viewBox.baseVal;
+	const width = (viewBox.width || svgElement.clientWidth) * scale;
+	const height = (viewBox.height || svgElement.clientHeight) * scale;
+	return new Promise((resolve, reject) => {
+		const image = new Image();
+		image.onload = () => {
+			const canvas = document.createElement("canvas");
+			canvas.width = width;
+			canvas.height = height;
+			const context = canvas.getContext("2d");
+			if (!context) {
+				URL.revokeObjectURL(url);
+				reject(/* @__PURE__ */ new Error("Unable to create a canvas rendering context"));
+				return;
+			}
+			context.fillStyle = "#ffffff";
+			context.fillRect(0, 0, width, height);
+			context.drawImage(image, 0, 0, width, height);
+			URL.revokeObjectURL(url);
+			resolve(canvas);
+		};
+		image.onerror = () => {
+			URL.revokeObjectURL(url);
+			reject(/* @__PURE__ */ new Error("Failed to load SVG as image"));
+		};
+		image.src = url;
+	});
+}
+function mimeType(format) {
+	return format === "jpeg" ? "image/jpeg" : format === "webp" ? "image/webp" : "image/png";
+}
+function triggerDownload(blob, fileName) {
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = fileName;
+	document.body.appendChild(link);
+	link.click();
+	link.remove();
+	URL.revokeObjectURL(url);
+}
+/** Provides SVG and high-resolution raster export for a `QRCode` root element. */
+function useQRCodeDownload(options = {}) {
+	const defaultFormat = options.format ?? "png";
+	const defaultFileName = options.fileName ?? "qrcode";
+	const defaultScale = options.scale ?? 4;
+	const element = (0, vue.shallowRef)(null);
+	const ref = (node) => {
+		element.value = node;
+	};
+	const getSvgElement = () => element.value?.querySelector("svg") ?? null;
+	const getDataUrl = async (overrides = {}) => {
+		const svgElement = getSvgElement();
+		if (!svgElement) throw new Error("QRCode SVG element not found");
+		const format = overrides.format ?? defaultFormat;
+		if (format === "svg") {
+			const bytes = new TextEncoder().encode(serializeSvg(svgElement));
+			let binary = "";
+			bytes.forEach((byte) => binary += String.fromCharCode(byte));
+			return `data:image/svg+xml;base64,${btoa(binary)}`;
+		}
+		return (await svgToCanvas(svgElement, overrides.scale ?? defaultScale)).toDataURL(mimeType(format), 1);
+	};
+	const download = async (overrides = {}) => {
+		const svgElement = getSvgElement();
+		if (!svgElement) throw new Error("QRCode SVG element not found");
+		const format = overrides.format ?? defaultFormat;
+		const fileName = `${overrides.fileName ?? defaultFileName}.${format}`;
+		if (format === "svg") {
+			triggerDownload(createSvgBlob(serializeSvg(svgElement)), fileName);
+			return;
+		}
+		const canvas = await svgToCanvas(svgElement, overrides.scale ?? defaultScale);
+		const blob = await new Promise((resolve) => canvas.toBlob(resolve, mimeType(format), 1));
+		if (blob) triggerDownload(blob, fileName);
+	};
+	return {
+		ref,
+		download,
+		getDataUrl
+	};
+}
+//#endregion
+exports.QRCode = QRCode;
+exports.useQRCodeDownload = useQRCodeDownload;
+
+//# sourceMappingURL=index.cjs.map

package/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/utils/dot-shapes.ts","../src/utils/finder-shapes.ts","../src/utils/qr-encoder.ts","../src/utils/utils.ts","../src/QRCode.module.css","../src/QRCode.vue","../src/QRCode.vue","../src/QRCode.ts","../src/use-qr-code-download.ts"],"sourcesContent":["import type { QRCodeDotStyle } from '../QRCode.types'\n\n/** Generates SVG path data for one data module. */\nexport function dotPath(x: number, y: number, cellSize: number, style: QRCodeDotStyle): string {\n  if (style === 'dots') {\n    const radius = cellSize / 2\n    const centerX = x + radius\n    const centerY = y + radius\n    return `M${centerX},${centerY - radius}a${radius},${radius} 0 1,1 0,${radius * 2}a${radius},${radius} 0 1,1 0,${-radius * 2}z`\n  }\n\n  if (style === 'rounded') {\n    const radius = cellSize * 0.3\n    return (\n      `M${x + radius},${y}` +\n      `h${cellSize - 2 * radius}` +\n      `a${radius},${radius} 0 0,1 ${radius},${radius}` +\n      `v${cellSize - 2 * radius}` +\n      `a${radius},${radius} 0 0,1 ${-radius},${radius}` +\n      `h${-(cellSize - 2 * radius)}` +\n      `a${radius},${radius} 0 0,1 ${-radius},${-radius}` +\n      `v${-(cellSize - 2 * radius)}` +\n      `a${radius},${radius} 0 0,1 ${radius},${-radius}z`\n    )\n  }\n\n  return `M${x},${y}h${cellSize}v${cellSize}h${-cellSize}z`\n}\n","import type { QRCodeCornerStyle } from '../QRCode.types'\n\nexport interface FinderPaths {\n  outer: string\n  inner: string\n}\n\nfunction roundedRect(x: number, y: number, width: number, height: number, radius: number) {\n  return (\n    `M${x + radius},${y}` +\n    `h${width - 2 * radius}a${radius},${radius} 0 0,1 ${radius},${radius}` +\n    `v${height - 2 * radius}a${radius},${radius} 0 0,1 ${-radius},${radius}` +\n    `h${-(width - 2 * radius)}a${radius},${radius} 0 0,1 ${-radius},${-radius}` +\n    `v${-(height - 2 * radius)}a${radius},${radius} 0 0,1 ${radius},${-radius}z`\n  )\n}\n\nfunction roundedRectReverse(x: number, y: number, width: number, height: number, radius: number) {\n  return (\n    `M${x + radius},${y}` +\n    `a${radius},${radius} 0 0,0 ${-radius},${radius}` +\n    `v${height - 2 * radius}a${radius},${radius} 0 0,0 ${radius},${radius}` +\n    `h${width - 2 * radius}a${radius},${radius} 0 0,0 ${radius},${-radius}` +\n    `v${-(height - 2 * radius)}a${radius},${radius} 0 0,0 ${-radius},${-radius}z`\n  )\n}\n\n/** Generates separate outer-ring and inner paths for a 7x7 finder pattern. */\nexport function finderPatternPaths(\n  x: number,\n  y: number,\n  cellSize: number,\n  style: QRCodeCornerStyle,\n): FinderPaths {\n  if (style === 'square') {\n    const outer =\n      `M${x},${y}h${cellSize * 7}v${cellSize * 7}h${-cellSize * 7}z` +\n      `M${x + cellSize},${y + cellSize}v${cellSize * 5}h${cellSize * 5}v${-cellSize * 5}z`\n    const inner =\n      `M${x + cellSize * 2},${y + cellSize * 2}` +\n      `h${cellSize * 3}v${cellSize * 3}h${-cellSize * 3}z`\n    return { outer, inner }\n  }\n\n  const outerRadius = style === 'dots' ? cellSize * 3.5 : cellSize * 1.2\n  const holeRadius = style === 'dots' ? cellSize * 2.5 : cellSize * 0.8\n  const innerRadius = style === 'dots' ? cellSize * 1.5 : cellSize * 0.6\n\n  return {\n    outer:\n      roundedRect(x, y, cellSize * 7, cellSize * 7, outerRadius) +\n      roundedRectReverse(x + cellSize, y + cellSize, cellSize * 5, cellSize * 5, holeRadius),\n    inner: roundedRect(x + cellSize * 2, y + cellSize * 2, cellSize * 3, cellSize * 3, innerRadius),\n  }\n}\n","import QRCodeLibrary from 'qrcode'\nimport type { QRCodeErrorCorrectionLevel } from '../QRCode.types'\n\nexport interface QRMatrix {\n  /** Two-dimensional matrix where true represents a dark module. */\n  modules: boolean[][]\n  /** Number of modules on each side. */\n  size: number\n}\n\nexport function generateQRMatrix(\n  value: string,\n  errorCorrectionLevel: QRCodeErrorCorrectionLevel = 'M',\n): QRMatrix {\n  const qr = QRCodeLibrary.create(value, { errorCorrectionLevel })\n  const size = qr.modules.size\n  const matrix: boolean[][] = []\n\n  for (let row = 0; row < size; row += 1) {\n    const rowData: boolean[] = []\n    for (let column = 0; column < size; column += 1) {\n      rowData.push(qr.modules.data[row * size + column] === 1)\n    }\n    matrix.push(rowData)\n  }\n\n  return { modules: matrix, size }\n}\n\nexport function isFinderPattern(row: number, column: number, matrixSize: number): boolean {\n  return (\n    (row < 7 && column < 7) ||\n    (row < 7 && column >= matrixSize - 7) ||\n    (row >= matrixSize - 7 && column < 7)\n  )\n}\n","/** Builds a mask identifying modules hidden by the center image and its padding. */\nexport function getExcavationMask(\n  matrixSize: number,\n  imageModuleSize: number,\n  imagePadding: number,\n): boolean[][] {\n  const mask = Array.from({ length: matrixSize }, () => Array<boolean>(matrixSize).fill(false))\n  const totalImageModules = imageModuleSize + imagePadding * 2\n  const startModule = Math.floor((matrixSize - totalImageModules) / 2)\n  const endModule = startModule + totalImageModules\n\n  for (let row = 0; row < matrixSize; row += 1) {\n    for (let column = 0; column < matrixSize; column += 1) {\n      if (row >= startModule && row < endModule && column >= startModule && column < endModule) {\n        mask[row][column] = true\n      }\n    }\n  }\n\n  return mask\n}\n",".root {\n  --qr-code-size-xs: 80px;\n  --qr-code-size-sm: 120px;\n  --qr-code-size-md: 160px;\n  --qr-code-size-lg: 200px;\n  --qr-code-size-xl: 256px;\n\n  display: inline-flex;\n  width: var(--qr-code-size);\n  height: var(--qr-code-size);\n  border-radius: var(--qr-code-radius);\n  overflow: hidden;\n}\n\n.svg {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: var(--qr-code-background);\n}\n\n.modules,\n.finderOuter,\n.finderInner {\n  fill: var(--qr-code-color);\n}\n\n.finderPattern {\n}\n\n.image {\n}\n","<script lang=\"ts\">\nimport { createVarsResolver, getRadius, getSize, getThemeColor } from '@mantine-vue/core'\n\nconst defaultProps = {\n  size: 'md',\n  color: 'dark',\n  background: 'white',\n  errorCorrectionLevel: 'M',\n  quietZone: 1,\n  dotStyle: 'square',\n  cornerStyle: 'square',\n  imageSize: 0.2,\n  imagePadding: 1,\n  imageExcavate: true,\n} as const\n\nconst varsResolver = createVarsResolver<any>((theme, { size, radius, color, background }) => ({\n  root: {\n    '--qr-code-size': getSize(size, 'qr-code-size'),\n    '--qr-code-radius': radius !== undefined ? getRadius(radius) : undefined,\n    '--qr-code-color': color ? getThemeColor(color, theme) : undefined,\n    '--qr-code-background':\n      background === 'transparent'\n        ? 'transparent'\n        : background\n          ? getThemeColor(background, theme)\n          : undefined,\n  },\n}))\n\nexport { defaultProps, varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box, getRadius as resolveRadius, useProps, useStyles } from '@mantine-vue/core'\nimport { dotPath } from './utils/dot-shapes'\nimport { finderPatternPaths } from './utils/finder-shapes'\nimport { generateQRMatrix, isFinderPattern } from './utils/qr-encoder'\nimport { getExcavationMask } from './utils/utils'\nimport type { QRCodeOwnProps } from './QRCode.types'\nimport classes from './QRCode.module.css'\n\ndefineOptions({\n  name: 'QRCode',\n  inheritAttrs: false,\n})\n\nconst rawProps = withDefaults(defineProps<QRCodeOwnProps>(), {\n  component: undefined,\n  rootRef: undefined,\n  size: undefined,\n  radius: undefined,\n  color: undefined,\n  background: undefined,\n  errorCorrectionLevel: undefined,\n  quietZone: undefined,\n  dotStyle: undefined,\n  cornerStyle: undefined,\n  image: undefined,\n  imageSize: undefined,\n  imageRadius: undefined,\n  imagePadding: undefined,\n  imageExcavate: undefined,\n  classNames: undefined,\n  styles: undefined,\n  vars: undefined,\n})\n\nconst attrs = useAttrs()\nconst props = useProps('QRCode', defaultProps, rawProps)\n\nconst getStyles = useStyles({\n  name: 'QRCode',\n  props,\n  classes,\n  get className() {\n    return attrs.class\n  },\n  get style() {\n    return attrs.style as any\n  },\n  classNames: props.classNames as any,\n  styles: props.styles as any,\n  vars: props.vars as any,\n  varsResolver,\n  unstyled: props.unstyled,\n})\n\nconst rootElement = ref<Element | null>(null)\nconst setRootRef = (node: Element | null) => {\n  rootElement.value = node\n  assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n\nconst qrData = computed(() => {\n  if (!props.value) {\n    return null\n  }\n\n  try {\n    return generateQRMatrix(props.value, props.errorCorrectionLevel)\n  } catch {\n    return null\n  }\n})\n\nconst svgContent = computed(() => {\n  if (!qrData.value) {\n    return null\n  }\n\n  const { modules, size: matrixSize } = qrData.value\n  const quietZone = props.quietZone ?? defaultProps.quietZone\n  const imageSizeRatio = props.imageSize ?? defaultProps.imageSize\n  const imagePadding = props.imagePadding ?? defaultProps.imagePadding\n  const dotStyle = props.dotStyle ?? defaultProps.dotStyle\n  const cornerStyle = props.cornerStyle ?? defaultProps.cornerStyle\n  const viewBoxSize = matrixSize + quietZone * 2\n  const excavationMask =\n    props.image && props.imageExcavate\n      ? getExcavationMask(matrixSize, Math.ceil(matrixSize * imageSizeRatio), imagePadding)\n      : null\n\n  let modulesPath = ''\n  for (let row = 0; row < matrixSize; row += 1) {\n    for (let column = 0; column < matrixSize; column += 1) {\n      if (\n        !modules[row][column] ||\n        isFinderPattern(row, column, matrixSize) ||\n        excavationMask?.[row][column]\n      ) {\n        continue\n      }\n\n      modulesPath += dotPath(column + quietZone, row + quietZone, 1, dotStyle)\n    }\n  }\n\n  const finders = [\n    { key: 'top-left', row: 0, column: 0 },\n    { key: 'top-right', row: 0, column: matrixSize - 7 },\n    { key: 'bottom-left', row: matrixSize - 7, column: 0 },\n  ].map((position) => ({\n    key: position.key,\n    ...finderPatternPaths(position.column + quietZone, position.row + quietZone, 1, cornerStyle),\n  }))\n\n  const imageElement = props.image\n    ? (() => {\n        const imageSize = matrixSize * imageSizeRatio\n        return {\n          x: (viewBoxSize - imageSize) / 2,\n          y: (viewBoxSize - imageSize) / 2,\n          size: imageSize,\n          radius: props.imageRadius !== undefined ? resolveRadius(props.imageRadius) : '0',\n        }\n      })()\n    : null\n\n  return { viewBoxSize, modulesPath, finders, imageElement }\n})\n</script>\n\n<template>\n  <Box\n    v-bind=\"{ ...attrs, ...getStyles('root') }\"\n    :component=\"props.component\"\n    :root-ref=\"setRootRef\"\n  >\n    <svg\n      v-if=\"svgContent\"\n      v-bind=\"getStyles('svg')\"\n      :viewBox=\"`0 0 ${svgContent.viewBoxSize} ${svgContent.viewBoxSize}`\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      :aria-label=\"`QR Code: ${props.value}`\"\n    >\n      <rect\n        v-bind=\"getStyles('background')\"\n        x=\"0\"\n        y=\"0\"\n        :width=\"svgContent.viewBoxSize\"\n        :height=\"svgContent.viewBoxSize\"\n      />\n      <path\n        v-if=\"svgContent.modulesPath\"\n        v-bind=\"getStyles('modules')\"\n        :d=\"svgContent.modulesPath\"\n        fill-rule=\"nonzero\"\n      />\n      <g v-for=\"finder in svgContent.finders\" :key=\"finder.key\" v-bind=\"getStyles('finderPattern')\">\n        <path v-bind=\"getStyles('finderOuter')\" :d=\"finder.outer\" fill-rule=\"evenodd\" />\n        <path v-bind=\"getStyles('finderInner')\" :d=\"finder.inner\" />\n      </g>\n      <image\n        v-if=\"svgContent.imageElement\"\n        v-bind=\"getStyles('image')\"\n        :href=\"props.image\"\n        :x=\"svgContent.imageElement.x\"\n        :y=\"svgContent.imageElement.y\"\n        :width=\"svgContent.imageElement.size\"\n        :height=\"svgContent.imageElement.size\"\n        :clip-path=\"`inset(0 round ${svgContent.imageElement.radius})`\"\n        preserveAspectRatio=\"xMidYMid slice\"\n      />\n    </svg>\n    <svg v-else v-bind=\"getStyles('svg')\" />\n  </Box>\n</template>\n","<script lang=\"ts\">\nimport { createVarsResolver, getRadius, getSize, getThemeColor } from '@mantine-vue/core'\n\nconst defaultProps = {\n  size: 'md',\n  color: 'dark',\n  background: 'white',\n  errorCorrectionLevel: 'M',\n  quietZone: 1,\n  dotStyle: 'square',\n  cornerStyle: 'square',\n  imageSize: 0.2,\n  imagePadding: 1,\n  imageExcavate: true,\n} as const\n\nconst varsResolver = createVarsResolver<any>((theme, { size, radius, color, background }) => ({\n  root: {\n    '--qr-code-size': getSize(size, 'qr-code-size'),\n    '--qr-code-radius': radius !== undefined ? getRadius(radius) : undefined,\n    '--qr-code-color': color ? getThemeColor(color, theme) : undefined,\n    '--qr-code-background':\n      background === 'transparent'\n        ? 'transparent'\n        : background\n          ? getThemeColor(background, theme)\n          : undefined,\n  },\n}))\n\nexport { defaultProps, varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box, getRadius as resolveRadius, useProps, useStyles } from '@mantine-vue/core'\nimport { dotPath } from './utils/dot-shapes'\nimport { finderPatternPaths } from './utils/finder-shapes'\nimport { generateQRMatrix, isFinderPattern } from './utils/qr-encoder'\nimport { getExcavationMask } from './utils/utils'\nimport type { QRCodeOwnProps } from './QRCode.types'\nimport classes from './QRCode.module.css'\n\ndefineOptions({\n  name: 'QRCode',\n  inheritAttrs: false,\n})\n\nconst rawProps = withDefaults(defineProps<QRCodeOwnProps>(), {\n  component: undefined,\n  rootRef: undefined,\n  size: undefined,\n  radius: undefined,\n  color: undefined,\n  background: undefined,\n  errorCorrectionLevel: undefined,\n  quietZone: undefined,\n  dotStyle: undefined,\n  cornerStyle: undefined,\n  image: undefined,\n  imageSize: undefined,\n  imageRadius: undefined,\n  imagePadding: undefined,\n  imageExcavate: undefined,\n  classNames: undefined,\n  styles: undefined,\n  vars: undefined,\n})\n\nconst attrs = useAttrs()\nconst props = useProps('QRCode', defaultProps, rawProps)\n\nconst getStyles = useStyles({\n  name: 'QRCode',\n  props,\n  classes,\n  get className() {\n    return attrs.class\n  },\n  get style() {\n    return attrs.style as any\n  },\n  classNames: props.classNames as any,\n  styles: props.styles as any,\n  vars: props.vars as any,\n  varsResolver,\n  unstyled: props.unstyled,\n})\n\nconst rootElement = ref<Element | null>(null)\nconst setRootRef = (node: Element | null) => {\n  rootElement.value = node\n  assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n\nconst qrData = computed(() => {\n  if (!props.value) {\n    return null\n  }\n\n  try {\n    return generateQRMatrix(props.value, props.errorCorrectionLevel)\n  } catch {\n    return null\n  }\n})\n\nconst svgContent = computed(() => {\n  if (!qrData.value) {\n    return null\n  }\n\n  const { modules, size: matrixSize } = qrData.value\n  const quietZone = props.quietZone ?? defaultProps.quietZone\n  const imageSizeRatio = props.imageSize ?? defaultProps.imageSize\n  const imagePadding = props.imagePadding ?? defaultProps.imagePadding\n  const dotStyle = props.dotStyle ?? defaultProps.dotStyle\n  const cornerStyle = props.cornerStyle ?? defaultProps.cornerStyle\n  const viewBoxSize = matrixSize + quietZone * 2\n  const excavationMask =\n    props.image && props.imageExcavate\n      ? getExcavationMask(matrixSize, Math.ceil(matrixSize * imageSizeRatio), imagePadding)\n      : null\n\n  let modulesPath = ''\n  for (let row = 0; row < matrixSize; row += 1) {\n    for (let column = 0; column < matrixSize; column += 1) {\n      if (\n        !modules[row][column] ||\n        isFinderPattern(row, column, matrixSize) ||\n        excavationMask?.[row][column]\n      ) {\n        continue\n      }\n\n      modulesPath += dotPath(column + quietZone, row + quietZone, 1, dotStyle)\n    }\n  }\n\n  const finders = [\n    { key: 'top-left', row: 0, column: 0 },\n    { key: 'top-right', row: 0, column: matrixSize - 7 },\n    { key: 'bottom-left', row: matrixSize - 7, column: 0 },\n  ].map((position) => ({\n    key: position.key,\n    ...finderPatternPaths(position.column + quietZone, position.row + quietZone, 1, cornerStyle),\n  }))\n\n  const imageElement = props.image\n    ? (() => {\n        const imageSize = matrixSize * imageSizeRatio\n        return {\n          x: (viewBoxSize - imageSize) / 2,\n          y: (viewBoxSize - imageSize) / 2,\n          size: imageSize,\n          radius: props.imageRadius !== undefined ? resolveRadius(props.imageRadius) : '0',\n        }\n      })()\n    : null\n\n  return { viewBoxSize, modulesPath, finders, imageElement }\n})\n</script>\n\n<template>\n  <Box\n    v-bind=\"{ ...attrs, ...getStyles('root') }\"\n    :component=\"props.component\"\n    :root-ref=\"setRootRef\"\n  >\n    <svg\n      v-if=\"svgContent\"\n      v-bind=\"getStyles('svg')\"\n      :viewBox=\"`0 0 ${svgContent.viewBoxSize} ${svgContent.viewBoxSize}`\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      :aria-label=\"`QR Code: ${props.value}`\"\n    >\n      <rect\n        v-bind=\"getStyles('background')\"\n        x=\"0\"\n        y=\"0\"\n        :width=\"svgContent.viewBoxSize\"\n        :height=\"svgContent.viewBoxSize\"\n      />\n      <path\n        v-if=\"svgContent.modulesPath\"\n        v-bind=\"getStyles('modules')\"\n        :d=\"svgContent.modulesPath\"\n        fill-rule=\"nonzero\"\n      />\n      <g v-for=\"finder in svgContent.finders\" :key=\"finder.key\" v-bind=\"getStyles('finderPattern')\">\n        <path v-bind=\"getStyles('finderOuter')\" :d=\"finder.outer\" fill-rule=\"evenodd\" />\n        <path v-bind=\"getStyles('finderInner')\" :d=\"finder.inner\" />\n      </g>\n      <image\n        v-if=\"svgContent.imageElement\"\n        v-bind=\"getStyles('image')\"\n        :href=\"props.image\"\n        :x=\"svgContent.imageElement.x\"\n        :y=\"svgContent.imageElement.y\"\n        :width=\"svgContent.imageElement.size\"\n        :height=\"svgContent.imageElement.size\"\n        :clip-path=\"`inset(0 round ${svgContent.imageElement.radius})`\"\n        preserveAspectRatio=\"xMidYMid slice\"\n      />\n    </svg>\n    <svg v-else v-bind=\"getStyles('svg')\" />\n  </Box>\n</template>\n","import { polymorphicFactory } from '@mantine-vue/core'\nimport QRCodeComponent, { varsResolver } from './QRCode.vue'\nimport type { QRCodeFactory } from './QRCode.types'\nimport classes from './QRCode.module.css'\n\nexport const QRCode = polymorphicFactory<QRCodeFactory>(QRCodeComponent, {\n  classes,\n  varsResolver,\n})\n\nexport type {\n  QRCodeCornerStyle,\n  QRCodeCssVariables,\n  QRCodeDotStyle,\n  QRCodeErrorCorrectionLevel,\n  QRCodeFactory,\n  QRCodeOwnProps,\n  QRCodeProps,\n  QRCodeStylesNames,\n} from './QRCode.types'\n","import { shallowRef } from 'vue'\n\nexport type QRCodeDownloadFormat = 'svg' | 'png' | 'jpeg' | 'webp'\n\nexport interface UseQRCodeDownloadOptions {\n  /** Default download format. @default 'png' */\n  format?: QRCodeDownloadFormat\n  /** Default file name without an extension. @default 'qrcode' */\n  fileName?: string\n  /** Raster output scale. @default 4 */\n  scale?: number\n}\n\nexport interface QRCodeDownloadOptions {\n  format?: QRCodeDownloadFormat\n  fileName?: string\n  scale?: number\n}\n\nexport interface UseQRCodeDownloadReturn {\n  /** Callback ref to pass to `QRCode` as `root-ref`. */\n  ref: (element: Element | null) => void\n  /** Downloads the current QR code. */\n  download: (options?: QRCodeDownloadOptions) => Promise<void>\n  /** Returns a data URL for the current QR code. */\n  getDataUrl: (options?: Omit<QRCodeDownloadOptions, 'fileName'>) => Promise<string>\n}\n\nfunction serializeSvg(svgElement: SVGSVGElement): string {\n  const clone = svgElement.cloneNode(true) as SVGSVGElement\n  if (!clone.getAttribute('xmlns')) {\n    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n  }\n\n  const computedStyle = getComputedStyle(svgElement)\n  const background = computedStyle.getPropertyValue('--qr-code-background').trim() || '#ffffff'\n  const foreground = computedStyle.getPropertyValue('--qr-code-color').trim() || '#000000'\n  clone.querySelector('rect')?.setAttribute('fill', background)\n  clone.querySelectorAll('path').forEach((path) => {\n    const fill = path.getAttribute('fill')\n    if (!fill || fill === 'currentColor') {\n      path.setAttribute('fill', foreground)\n    }\n  })\n\n  return new XMLSerializer().serializeToString(clone)\n}\n\nfunction createSvgBlob(svg: string) {\n  return new Blob([svg], { type: 'image/svg+xml;charset=utf-8' })\n}\n\nasync function svgToCanvas(svgElement: SVGSVGElement, scale: number) {\n  const url = URL.createObjectURL(createSvgBlob(serializeSvg(svgElement)))\n  const viewBox = svgElement.viewBox.baseVal\n  const width = (viewBox.width || svgElement.clientWidth) * scale\n  const height = (viewBox.height || svgElement.clientHeight) * scale\n\n  return new Promise<HTMLCanvasElement>((resolve, reject) => {\n    const image = new Image()\n    image.onload = () => {\n      const canvas = document.createElement('canvas')\n      canvas.width = width\n      canvas.height = height\n      const context = canvas.getContext('2d')\n      if (!context) {\n        URL.revokeObjectURL(url)\n        reject(new Error('Unable to create a canvas rendering context'))\n        return\n      }\n      context.fillStyle = '#ffffff'\n      context.fillRect(0, 0, width, height)\n      context.drawImage(image, 0, 0, width, height)\n      URL.revokeObjectURL(url)\n      resolve(canvas)\n    }\n    image.onerror = () => {\n      URL.revokeObjectURL(url)\n      reject(new Error('Failed to load SVG as image'))\n    }\n    image.src = url\n  })\n}\n\nfunction mimeType(format: QRCodeDownloadFormat) {\n  return format === 'jpeg' ? 'image/jpeg' : format === 'webp' ? 'image/webp' : 'image/png'\n}\n\nfunction triggerDownload(blob: Blob, fileName: string) {\n  const url = URL.createObjectURL(blob)\n  const link = document.createElement('a')\n  link.href = url\n  link.download = fileName\n  document.body.appendChild(link)\n  link.click()\n  link.remove()\n  URL.revokeObjectURL(url)\n}\n\n/** Provides SVG and high-resolution raster export for a `QRCode` root element. */\nexport function useQRCodeDownload(options: UseQRCodeDownloadOptions = {}): UseQRCodeDownloadReturn {\n  const defaultFormat = options.format ?? 'png'\n  const defaultFileName = options.fileName ?? 'qrcode'\n  const defaultScale = options.scale ?? 4\n  const element = shallowRef<Element | null>(null)\n  const ref = (node: Element | null) => {\n    element.value = node\n  }\n\n  const getSvgElement = () => element.value?.querySelector('svg') ?? null\n\n  const getDataUrl: UseQRCodeDownloadReturn['getDataUrl'] = async (overrides = {}) => {\n    const svgElement = getSvgElement()\n    if (!svgElement) {\n      throw new Error('QRCode SVG element not found')\n    }\n\n    const format = overrides.format ?? defaultFormat\n    if (format === 'svg') {\n      const bytes = new TextEncoder().encode(serializeSvg(svgElement))\n      let binary = ''\n      bytes.forEach((byte) => (binary += String.fromCharCode(byte)))\n      return `data:image/svg+xml;base64,${btoa(binary)}`\n    }\n\n    const canvas = await svgToCanvas(svgElement, overrides.scale ?? defaultScale)\n    return canvas.toDataURL(mimeType(format), 1)\n  }\n\n  const download: UseQRCodeDownloadReturn['download'] = async (overrides = {}) => {\n    const svgElement = getSvgElement()\n    if (!svgElement) {\n      throw new Error('QRCode SVG element not found')\n    }\n\n    const format = overrides.format ?? defaultFormat\n    const fileName = `${overrides.fileName ?? defaultFileName}.${format}`\n    if (format === 'svg') {\n      triggerDownload(createSvgBlob(serializeSvg(svgElement)), fileName)\n      return\n    }\n\n    const canvas = await svgToCanvas(svgElement, overrides.scale ?? defaultScale)\n    const blob = await new Promise<Blob | null>((resolve) =>\n      canvas.toBlob(resolve, mimeType(format), 1),\n    )\n    if (blob) {\n      triggerDownload(blob, fileName)\n    }\n  }\n\n  return { ref, download, getDataUrl }\n}\n"],"mappings":"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"}

package/esm/index.mjs

@@ -0,0 +1,385 @@
+import { Box, createVarsResolver, getRadius, getSize, getThemeColor, polymorphicFactory, useProps, useStyles } from "@mantine-vue/core";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeProps, openBlock, ref, renderList, shallowRef, unref, useAttrs, withCtx } from "vue";
+import { assignRef } from "@mantine-vue/hooks";
+import QRCodeLibrary from "qrcode";
+//#region src/utils/dot-shapes.ts
+/** Generates SVG path data for one data module. */
+function dotPath(x, y, cellSize, style) {
+	if (style === "dots") {
+		const radius = cellSize / 2;
+		return `M${x + radius},${y + radius - radius}a${radius},${radius} 0 1,1 0,${radius * 2}a${radius},${radius} 0 1,1 0,${-radius * 2}z`;
+	}
+	if (style === "rounded") {
+		const radius = cellSize * .3;
+		return `M${x + radius},${y}h${cellSize - 2 * radius}a${radius},${radius} 0 0,1 ${radius},${radius}v${cellSize - 2 * radius}a${radius},${radius} 0 0,1 ${-radius},${radius}h${-(cellSize - 2 * radius)}a${radius},${radius} 0 0,1 ${-radius},${-radius}v${-(cellSize - 2 * radius)}a${radius},${radius} 0 0,1 ${radius},${-radius}z`;
+	}
+	return `M${x},${y}h${cellSize}v${cellSize}h${-cellSize}z`;
+}
+//#endregion
+//#region src/utils/finder-shapes.ts
+function roundedRect(x, y, width, height, radius) {
+	return `M${x + radius},${y}h${width - 2 * radius}a${radius},${radius} 0 0,1 ${radius},${radius}v${height - 2 * radius}a${radius},${radius} 0 0,1 ${-radius},${radius}h${-(width - 2 * radius)}a${radius},${radius} 0 0,1 ${-radius},${-radius}v${-(height - 2 * radius)}a${radius},${radius} 0 0,1 ${radius},${-radius}z`;
+}
+function roundedRectReverse(x, y, width, height, radius) {
+	return `M${x + radius},${y}a${radius},${radius} 0 0,0 ${-radius},${radius}v${height - 2 * radius}a${radius},${radius} 0 0,0 ${radius},${radius}h${width - 2 * radius}a${radius},${radius} 0 0,0 ${radius},${-radius}v${-(height - 2 * radius)}a${radius},${radius} 0 0,0 ${-radius},${-radius}z`;
+}
+/** Generates separate outer-ring and inner paths for a 7x7 finder pattern. */
+function finderPatternPaths(x, y, cellSize, style) {
+	if (style === "square") return {
+		outer: `M${x},${y}h${cellSize * 7}v${cellSize * 7}h${-cellSize * 7}zM${x + cellSize},${y + cellSize}v${cellSize * 5}h${cellSize * 5}v${-cellSize * 5}z`,
+		inner: `M${x + cellSize * 2},${y + cellSize * 2}h${cellSize * 3}v${cellSize * 3}h${-cellSize * 3}z`
+	};
+	const outerRadius = style === "dots" ? cellSize * 3.5 : cellSize * 1.2;
+	const holeRadius = style === "dots" ? cellSize * 2.5 : cellSize * .8;
+	const innerRadius = style === "dots" ? cellSize * 1.5 : cellSize * .6;
+	return {
+		outer: roundedRect(x, y, cellSize * 7, cellSize * 7, outerRadius) + roundedRectReverse(x + cellSize, y + cellSize, cellSize * 5, cellSize * 5, holeRadius),
+		inner: roundedRect(x + cellSize * 2, y + cellSize * 2, cellSize * 3, cellSize * 3, innerRadius)
+	};
+}
+//#endregion
+//#region src/utils/qr-encoder.ts
+function generateQRMatrix(value, errorCorrectionLevel = "M") {
+	const qr = QRCodeLibrary.create(value, { errorCorrectionLevel });
+	const size = qr.modules.size;
+	const matrix = [];
+	for (let row = 0; row < size; row += 1) {
+		const rowData = [];
+		for (let column = 0; column < size; column += 1) rowData.push(qr.modules.data[row * size + column] === 1);
+		matrix.push(rowData);
+	}
+	return {
+		modules: matrix,
+		size
+	};
+}
+function isFinderPattern(row, column, matrixSize) {
+	return row < 7 && column < 7 || row < 7 && column >= matrixSize - 7 || row >= matrixSize - 7 && column < 7;
+}
+//#endregion
+//#region src/utils/utils.ts
+/** Builds a mask identifying modules hidden by the center image and its padding. */
+function getExcavationMask(matrixSize, imageModuleSize, imagePadding) {
+	const mask = Array.from({ length: matrixSize }, () => Array(matrixSize).fill(false));
+	const totalImageModules = imageModuleSize + imagePadding * 2;
+	const startModule = Math.floor((matrixSize - totalImageModules) / 2);
+	const endModule = startModule + totalImageModules;
+	for (let row = 0; row < matrixSize; row += 1) for (let column = 0; column < matrixSize; column += 1) if (row >= startModule && row < endModule && column >= startModule && column < endModule) mask[row][column] = true;
+	return mask;
+}
+var QRCode_module_default = {
+	root: "_root_6mmnv_1",
+	svg: "_svg_6mmnv_15",
+	background: "_background_6mmnv_20",
+	modules: "_modules_6mmnv_24",
+	finderOuter: "_finderOuter_6mmnv_25",
+	finderInner: "_finderInner_6mmnv_26",
+	finderPattern: "_finderPattern_6mmnv_30",
+	image: "_image_6mmnv_33"
+};
+//#endregion
+//#region src/QRCode.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["viewBox", "aria-label"];
+var _hoisted_2 = ["width", "height"];
+var _hoisted_3 = ["d"];
+var _hoisted_4 = ["d"];
+var _hoisted_5 = ["d"];
+var _hoisted_6 = [
+	"href",
+	"x",
+	"y",
+	"width",
+	"height",
+	"clip-path"
+];
+var defaultProps = {
+	size: "md",
+	color: "dark",
+	background: "white",
+	errorCorrectionLevel: "M",
+	quietZone: 1,
+	dotStyle: "square",
+	cornerStyle: "square",
+	imageSize: .2,
+	imagePadding: 1,
+	imageExcavate: true
+};
+var varsResolver = createVarsResolver((theme, { size, radius, color, background }) => ({ root: {
+	"--qr-code-size": getSize(size, "qr-code-size"),
+	"--qr-code-radius": radius !== void 0 ? getRadius(radius) : void 0,
+	"--qr-code-color": color ? getThemeColor(color, theme) : void 0,
+	"--qr-code-background": background === "transparent" ? "transparent" : background ? getThemeColor(background, theme) : void 0
+} }));
+//#endregion
+//#region src/QRCode.ts
+var QRCode = polymorphicFactory(/* @__PURE__ */ defineComponent({
+	name: "QRCode",
+	inheritAttrs: false,
+	__name: "QRCode",
+	props: {
+		component: { default: void 0 },
+		rootRef: {
+			type: [Object, Function],
+			default: void 0
+		},
+		value: {},
+		size: { default: void 0 },
+		radius: { default: void 0 },
+		color: { default: void 0 },
+		background: { default: void 0 },
+		errorCorrectionLevel: { default: void 0 },
+		quietZone: { default: void 0 },
+		dotStyle: { default: void 0 },
+		cornerStyle: { default: void 0 },
+		image: { default: void 0 },
+		imageSize: { default: void 0 },
+		imageRadius: { default: void 0 },
+		imagePadding: { default: void 0 },
+		imageExcavate: {
+			type: Boolean,
+			default: void 0
+		},
+		classNames: { default: void 0 },
+		styles: { default: void 0 },
+		vars: { default: void 0 },
+		unstyled: { type: Boolean }
+	},
+	setup(__props, { expose: __expose }) {
+		const rawProps = __props;
+		const attrs = useAttrs();
+		const props = useProps("QRCode", defaultProps, rawProps);
+		const getStyles = useStyles({
+			name: "QRCode",
+			props,
+			classes: QRCode_module_default,
+			get className() {
+				return attrs.class;
+			},
+			get style() {
+				return attrs.style;
+			},
+			classNames: props.classNames,
+			styles: props.styles,
+			vars: props.vars,
+			varsResolver,
+			unstyled: props.unstyled
+		});
+		const rootElement = ref(null);
+		const setRootRef = (node) => {
+			rootElement.value = node;
+			assignRef(props.rootRef, node);
+		};
+		__expose({ rootElement });
+		const qrData = computed(() => {
+			if (!props.value) return null;
+			try {
+				return generateQRMatrix(props.value, props.errorCorrectionLevel);
+			} catch {
+				return null;
+			}
+		});
+		const svgContent = computed(() => {
+			if (!qrData.value) return null;
+			const { modules, size: matrixSize } = qrData.value;
+			const quietZone = props.quietZone ?? defaultProps.quietZone;
+			const imageSizeRatio = props.imageSize ?? defaultProps.imageSize;
+			const imagePadding = props.imagePadding ?? defaultProps.imagePadding;
+			const dotStyle = props.dotStyle ?? defaultProps.dotStyle;
+			const cornerStyle = props.cornerStyle ?? defaultProps.cornerStyle;
+			const viewBoxSize = matrixSize + quietZone * 2;
+			const excavationMask = props.image && props.imageExcavate ? getExcavationMask(matrixSize, Math.ceil(matrixSize * imageSizeRatio), imagePadding) : null;
+			let modulesPath = "";
+			for (let row = 0; row < matrixSize; row += 1) for (let column = 0; column < matrixSize; column += 1) {
+				if (!modules[row][column] || isFinderPattern(row, column, matrixSize) || excavationMask?.[row][column]) continue;
+				modulesPath += dotPath(column + quietZone, row + quietZone, 1, dotStyle);
+			}
+			const finders = [
+				{
+					key: "top-left",
+					row: 0,
+					column: 0
+				},
+				{
+					key: "top-right",
+					row: 0,
+					column: matrixSize - 7
+				},
+				{
+					key: "bottom-left",
+					row: matrixSize - 7,
+					column: 0
+				}
+			].map((position) => ({
+				key: position.key,
+				...finderPatternPaths(position.column + quietZone, position.row + quietZone, 1, cornerStyle)
+			}));
+			const imageElement = props.image ? (() => {
+				const imageSize = matrixSize * imageSizeRatio;
+				return {
+					x: (viewBoxSize - imageSize) / 2,
+					y: (viewBoxSize - imageSize) / 2,
+					size: imageSize,
+					radius: props.imageRadius !== void 0 ? getRadius(props.imageRadius) : "0"
+				};
+			})() : null;
+			return {
+				viewBoxSize,
+				modulesPath,
+				finders,
+				imageElement
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), mergeProps({
+				...unref(attrs),
+				...unref(getStyles)("root")
+			}, {
+				component: unref(props).component,
+				"root-ref": setRootRef
+			}), {
+				default: withCtx(() => [svgContent.value ? (openBlock(), createElementBlock("svg", mergeProps({ key: 0 }, unref(getStyles)("svg"), {
+					viewBox: `0 0 ${svgContent.value.viewBoxSize} ${svgContent.value.viewBoxSize}`,
+					xmlns: "http://www.w3.org/2000/svg",
+					role: "img",
+					"aria-label": `QR Code: ${unref(props).value}`
+				}), [
+					createElementVNode("rect", mergeProps(unref(getStyles)("background"), {
+						x: "0",
+						y: "0",
+						width: svgContent.value.viewBoxSize,
+						height: svgContent.value.viewBoxSize
+					}), null, 16, _hoisted_2),
+					svgContent.value.modulesPath ? (openBlock(), createElementBlock("path", mergeProps({ key: 0 }, unref(getStyles)("modules"), {
+						d: svgContent.value.modulesPath,
+						"fill-rule": "nonzero"
+					}), null, 16, _hoisted_3)) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(svgContent.value.finders, (finder) => {
+						return openBlock(), createElementBlock("g", mergeProps({ key: finder.key }, { ref_for: true }, unref(getStyles)("finderPattern")), [createElementVNode("path", mergeProps({ ref_for: true }, unref(getStyles)("finderOuter"), {
+							d: finder.outer,
+							"fill-rule": "evenodd"
+						}), null, 16, _hoisted_4), createElementVNode("path", mergeProps({ ref_for: true }, unref(getStyles)("finderInner"), { d: finder.inner }), null, 16, _hoisted_5)], 16);
+					}), 128)),
+					svgContent.value.imageElement ? (openBlock(), createElementBlock("image", mergeProps({ key: 1 }, unref(getStyles)("image"), {
+						href: unref(props).image,
+						x: svgContent.value.imageElement.x,
+						y: svgContent.value.imageElement.y,
+						width: svgContent.value.imageElement.size,
+						height: svgContent.value.imageElement.size,
+						"clip-path": `inset(0 round ${svgContent.value.imageElement.radius})`,
+						preserveAspectRatio: "xMidYMid slice"
+					}), null, 16, _hoisted_6)) : createCommentVNode("", true)
+				], 16, _hoisted_1)) : (openBlock(), createElementBlock("svg", normalizeProps(mergeProps({ key: 1 }, unref(getStyles)("svg"))), null, 16))]),
+				_: 1
+			}, 16, ["component"]);
+		};
+	}
+}), {
+	classes: QRCode_module_default,
+	varsResolver
+});
+//#endregion
+//#region src/use-qr-code-download.ts
+function serializeSvg(svgElement) {
+	const clone = svgElement.cloneNode(true);
+	if (!clone.getAttribute("xmlns")) clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+	const computedStyle = getComputedStyle(svgElement);
+	const background = computedStyle.getPropertyValue("--qr-code-background").trim() || "#ffffff";
+	const foreground = computedStyle.getPropertyValue("--qr-code-color").trim() || "#000000";
+	clone.querySelector("rect")?.setAttribute("fill", background);
+	clone.querySelectorAll("path").forEach((path) => {
+		const fill = path.getAttribute("fill");
+		if (!fill || fill === "currentColor") path.setAttribute("fill", foreground);
+	});
+	return new XMLSerializer().serializeToString(clone);
+}
+function createSvgBlob(svg) {
+	return new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+}
+async function svgToCanvas(svgElement, scale) {
+	const url = URL.createObjectURL(createSvgBlob(serializeSvg(svgElement)));
+	const viewBox = svgElement.viewBox.baseVal;
+	const width = (viewBox.width || svgElement.clientWidth) * scale;
+	const height = (viewBox.height || svgElement.clientHeight) * scale;
+	return new Promise((resolve, reject) => {
+		const image = new Image();
+		image.onload = () => {
+			const canvas = document.createElement("canvas");
+			canvas.width = width;
+			canvas.height = height;
+			const context = canvas.getContext("2d");
+			if (!context) {
+				URL.revokeObjectURL(url);
+				reject(/* @__PURE__ */ new Error("Unable to create a canvas rendering context"));
+				return;
+			}
+			context.fillStyle = "#ffffff";
+			context.fillRect(0, 0, width, height);
+			context.drawImage(image, 0, 0, width, height);
+			URL.revokeObjectURL(url);
+			resolve(canvas);
+		};
+		image.onerror = () => {
+			URL.revokeObjectURL(url);
+			reject(/* @__PURE__ */ new Error("Failed to load SVG as image"));
+		};
+		image.src = url;
+	});
+}
+function mimeType(format) {
+	return format === "jpeg" ? "image/jpeg" : format === "webp" ? "image/webp" : "image/png";
+}
+function triggerDownload(blob, fileName) {
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = fileName;
+	document.body.appendChild(link);
+	link.click();
+	link.remove();
+	URL.revokeObjectURL(url);
+}
+/** Provides SVG and high-resolution raster export for a `QRCode` root element. */
+function useQRCodeDownload(options = {}) {
+	const defaultFormat = options.format ?? "png";
+	const defaultFileName = options.fileName ?? "qrcode";
+	const defaultScale = options.scale ?? 4;
+	const element = shallowRef(null);
+	const ref = (node) => {
+		element.value = node;
+	};
+	const getSvgElement = () => element.value?.querySelector("svg") ?? null;
+	const getDataUrl = async (overrides = {}) => {
+		const svgElement = getSvgElement();
+		if (!svgElement) throw new Error("QRCode SVG element not found");
+		const format = overrides.format ?? defaultFormat;
+		if (format === "svg") {
+			const bytes = new TextEncoder().encode(serializeSvg(svgElement));
+			let binary = "";
+			bytes.forEach((byte) => binary += String.fromCharCode(byte));
+			return `data:image/svg+xml;base64,${btoa(binary)}`;
+		}
+		return (await svgToCanvas(svgElement, overrides.scale ?? defaultScale)).toDataURL(mimeType(format), 1);
+	};
+	const download = async (overrides = {}) => {
+		const svgElement = getSvgElement();
+		if (!svgElement) throw new Error("QRCode SVG element not found");
+		const format = overrides.format ?? defaultFormat;
+		const fileName = `${overrides.fileName ?? defaultFileName}.${format}`;
+		if (format === "svg") {
+			triggerDownload(createSvgBlob(serializeSvg(svgElement)), fileName);
+			return;
+		}
+		const canvas = await svgToCanvas(svgElement, overrides.scale ?? defaultScale);
+		const blob = await new Promise((resolve) => canvas.toBlob(resolve, mimeType(format), 1));
+		if (blob) triggerDownload(blob, fileName);
+	};
+	return {
+		ref,
+		download,
+		getDataUrl
+	};
+}
+//#endregion
+export { QRCode, useQRCodeDownload };
+
+//# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/utils/dot-shapes.ts","../src/utils/finder-shapes.ts","../src/utils/qr-encoder.ts","../src/utils/utils.ts","../src/QRCode.module.css","../src/QRCode.vue","../src/QRCode.vue","../src/QRCode.ts","../src/use-qr-code-download.ts"],"sourcesContent":["import type { QRCodeDotStyle } from '../QRCode.types'\n\n/** Generates SVG path data for one data module. */\nexport function dotPath(x: number, y: number, cellSize: number, style: QRCodeDotStyle): string {\n  if (style === 'dots') {\n    const radius = cellSize / 2\n    const centerX = x + radius\n    const centerY = y + radius\n    return `M${centerX},${centerY - radius}a${radius},${radius} 0 1,1 0,${radius * 2}a${radius},${radius} 0 1,1 0,${-radius * 2}z`\n  }\n\n  if (style === 'rounded') {\n    const radius = cellSize * 0.3\n    return (\n      `M${x + radius},${y}` +\n      `h${cellSize - 2 * radius}` +\n      `a${radius},${radius} 0 0,1 ${radius},${radius}` +\n      `v${cellSize - 2 * radius}` +\n      `a${radius},${radius} 0 0,1 ${-radius},${radius}` +\n      `h${-(cellSize - 2 * radius)}` +\n      `a${radius},${radius} 0 0,1 ${-radius},${-radius}` +\n      `v${-(cellSize - 2 * radius)}` +\n      `a${radius},${radius} 0 0,1 ${radius},${-radius}z`\n    )\n  }\n\n  return `M${x},${y}h${cellSize}v${cellSize}h${-cellSize}z`\n}\n","import type { QRCodeCornerStyle } from '../QRCode.types'\n\nexport interface FinderPaths {\n  outer: string\n  inner: string\n}\n\nfunction roundedRect(x: number, y: number, width: number, height: number, radius: number) {\n  return (\n    `M${x + radius},${y}` +\n    `h${width - 2 * radius}a${radius},${radius} 0 0,1 ${radius},${radius}` +\n    `v${height - 2 * radius}a${radius},${radius} 0 0,1 ${-radius},${radius}` +\n    `h${-(width - 2 * radius)}a${radius},${radius} 0 0,1 ${-radius},${-radius}` +\n    `v${-(height - 2 * radius)}a${radius},${radius} 0 0,1 ${radius},${-radius}z`\n  )\n}\n\nfunction roundedRectReverse(x: number, y: number, width: number, height: number, radius: number) {\n  return (\n    `M${x + radius},${y}` +\n    `a${radius},${radius} 0 0,0 ${-radius},${radius}` +\n    `v${height - 2 * radius}a${radius},${radius} 0 0,0 ${radius},${radius}` +\n    `h${width - 2 * radius}a${radius},${radius} 0 0,0 ${radius},${-radius}` +\n    `v${-(height - 2 * radius)}a${radius},${radius} 0 0,0 ${-radius},${-radius}z`\n  )\n}\n\n/** Generates separate outer-ring and inner paths for a 7x7 finder pattern. */\nexport function finderPatternPaths(\n  x: number,\n  y: number,\n  cellSize: number,\n  style: QRCodeCornerStyle,\n): FinderPaths {\n  if (style === 'square') {\n    const outer =\n      `M${x},${y}h${cellSize * 7}v${cellSize * 7}h${-cellSize * 7}z` +\n      `M${x + cellSize},${y + cellSize}v${cellSize * 5}h${cellSize * 5}v${-cellSize * 5}z`\n    const inner =\n      `M${x + cellSize * 2},${y + cellSize * 2}` +\n      `h${cellSize * 3}v${cellSize * 3}h${-cellSize * 3}z`\n    return { outer, inner }\n  }\n\n  const outerRadius = style === 'dots' ? cellSize * 3.5 : cellSize * 1.2\n  const holeRadius = style === 'dots' ? cellSize * 2.5 : cellSize * 0.8\n  const innerRadius = style === 'dots' ? cellSize * 1.5 : cellSize * 0.6\n\n  return {\n    outer:\n      roundedRect(x, y, cellSize * 7, cellSize * 7, outerRadius) +\n      roundedRectReverse(x + cellSize, y + cellSize, cellSize * 5, cellSize * 5, holeRadius),\n    inner: roundedRect(x + cellSize * 2, y + cellSize * 2, cellSize * 3, cellSize * 3, innerRadius),\n  }\n}\n","import QRCodeLibrary from 'qrcode'\nimport type { QRCodeErrorCorrectionLevel } from '../QRCode.types'\n\nexport interface QRMatrix {\n  /** Two-dimensional matrix where true represents a dark module. */\n  modules: boolean[][]\n  /** Number of modules on each side. */\n  size: number\n}\n\nexport function generateQRMatrix(\n  value: string,\n  errorCorrectionLevel: QRCodeErrorCorrectionLevel = 'M',\n): QRMatrix {\n  const qr = QRCodeLibrary.create(value, { errorCorrectionLevel })\n  const size = qr.modules.size\n  const matrix: boolean[][] = []\n\n  for (let row = 0; row < size; row += 1) {\n    const rowData: boolean[] = []\n    for (let column = 0; column < size; column += 1) {\n      rowData.push(qr.modules.data[row * size + column] === 1)\n    }\n    matrix.push(rowData)\n  }\n\n  return { modules: matrix, size }\n}\n\nexport function isFinderPattern(row: number, column: number, matrixSize: number): boolean {\n  return (\n    (row < 7 && column < 7) ||\n    (row < 7 && column >= matrixSize - 7) ||\n    (row >= matrixSize - 7 && column < 7)\n  )\n}\n","/** Builds a mask identifying modules hidden by the center image and its padding. */\nexport function getExcavationMask(\n  matrixSize: number,\n  imageModuleSize: number,\n  imagePadding: number,\n): boolean[][] {\n  const mask = Array.from({ length: matrixSize }, () => Array<boolean>(matrixSize).fill(false))\n  const totalImageModules = imageModuleSize + imagePadding * 2\n  const startModule = Math.floor((matrixSize - totalImageModules) / 2)\n  const endModule = startModule + totalImageModules\n\n  for (let row = 0; row < matrixSize; row += 1) {\n    for (let column = 0; column < matrixSize; column += 1) {\n      if (row >= startModule && row < endModule && column >= startModule && column < endModule) {\n        mask[row][column] = true\n      }\n    }\n  }\n\n  return mask\n}\n",".root {\n  --qr-code-size-xs: 80px;\n  --qr-code-size-sm: 120px;\n  --qr-code-size-md: 160px;\n  --qr-code-size-lg: 200px;\n  --qr-code-size-xl: 256px;\n\n  display: inline-flex;\n  width: var(--qr-code-size);\n  height: var(--qr-code-size);\n  border-radius: var(--qr-code-radius);\n  overflow: hidden;\n}\n\n.svg {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: var(--qr-code-background);\n}\n\n.modules,\n.finderOuter,\n.finderInner {\n  fill: var(--qr-code-color);\n}\n\n.finderPattern {\n}\n\n.image {\n}\n","<script lang=\"ts\">\nimport { createVarsResolver, getRadius, getSize, getThemeColor } from '@mantine-vue/core'\n\nconst defaultProps = {\n  size: 'md',\n  color: 'dark',\n  background: 'white',\n  errorCorrectionLevel: 'M',\n  quietZone: 1,\n  dotStyle: 'square',\n  cornerStyle: 'square',\n  imageSize: 0.2,\n  imagePadding: 1,\n  imageExcavate: true,\n} as const\n\nconst varsResolver = createVarsResolver<any>((theme, { size, radius, color, background }) => ({\n  root: {\n    '--qr-code-size': getSize(size, 'qr-code-size'),\n    '--qr-code-radius': radius !== undefined ? getRadius(radius) : undefined,\n    '--qr-code-color': color ? getThemeColor(color, theme) : undefined,\n    '--qr-code-background':\n      background === 'transparent'\n        ? 'transparent'\n        : background\n          ? getThemeColor(background, theme)\n          : undefined,\n  },\n}))\n\nexport { defaultProps, varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box, getRadius as resolveRadius, useProps, useStyles } from '@mantine-vue/core'\nimport { dotPath } from './utils/dot-shapes'\nimport { finderPatternPaths } from './utils/finder-shapes'\nimport { generateQRMatrix, isFinderPattern } from './utils/qr-encoder'\nimport { getExcavationMask } from './utils/utils'\nimport type { QRCodeOwnProps } from './QRCode.types'\nimport classes from './QRCode.module.css'\n\ndefineOptions({\n  name: 'QRCode',\n  inheritAttrs: false,\n})\n\nconst rawProps = withDefaults(defineProps<QRCodeOwnProps>(), {\n  component: undefined,\n  rootRef: undefined,\n  size: undefined,\n  radius: undefined,\n  color: undefined,\n  background: undefined,\n  errorCorrectionLevel: undefined,\n  quietZone: undefined,\n  dotStyle: undefined,\n  cornerStyle: undefined,\n  image: undefined,\n  imageSize: undefined,\n  imageRadius: undefined,\n  imagePadding: undefined,\n  imageExcavate: undefined,\n  classNames: undefined,\n  styles: undefined,\n  vars: undefined,\n})\n\nconst attrs = useAttrs()\nconst props = useProps('QRCode', defaultProps, rawProps)\n\nconst getStyles = useStyles({\n  name: 'QRCode',\n  props,\n  classes,\n  get className() {\n    return attrs.class\n  },\n  get style() {\n    return attrs.style as any\n  },\n  classNames: props.classNames as any,\n  styles: props.styles as any,\n  vars: props.vars as any,\n  varsResolver,\n  unstyled: props.unstyled,\n})\n\nconst rootElement = ref<Element | null>(null)\nconst setRootRef = (node: Element | null) => {\n  rootElement.value = node\n  assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n\nconst qrData = computed(() => {\n  if (!props.value) {\n    return null\n  }\n\n  try {\n    return generateQRMatrix(props.value, props.errorCorrectionLevel)\n  } catch {\n    return null\n  }\n})\n\nconst svgContent = computed(() => {\n  if (!qrData.value) {\n    return null\n  }\n\n  const { modules, size: matrixSize } = qrData.value\n  const quietZone = props.quietZone ?? defaultProps.quietZone\n  const imageSizeRatio = props.imageSize ?? defaultProps.imageSize\n  const imagePadding = props.imagePadding ?? defaultProps.imagePadding\n  const dotStyle = props.dotStyle ?? defaultProps.dotStyle\n  const cornerStyle = props.cornerStyle ?? defaultProps.cornerStyle\n  const viewBoxSize = matrixSize + quietZone * 2\n  const excavationMask =\n    props.image && props.imageExcavate\n      ? getExcavationMask(matrixSize, Math.ceil(matrixSize * imageSizeRatio), imagePadding)\n      : null\n\n  let modulesPath = ''\n  for (let row = 0; row < matrixSize; row += 1) {\n    for (let column = 0; column < matrixSize; column += 1) {\n      if (\n        !modules[row][column] ||\n        isFinderPattern(row, column, matrixSize) ||\n        excavationMask?.[row][column]\n      ) {\n        continue\n      }\n\n      modulesPath += dotPath(column + quietZone, row + quietZone, 1, dotStyle)\n    }\n  }\n\n  const finders = [\n    { key: 'top-left', row: 0, column: 0 },\n    { key: 'top-right', row: 0, column: matrixSize - 7 },\n    { key: 'bottom-left', row: matrixSize - 7, column: 0 },\n  ].map((position) => ({\n    key: position.key,\n    ...finderPatternPaths(position.column + quietZone, position.row + quietZone, 1, cornerStyle),\n  }))\n\n  const imageElement = props.image\n    ? (() => {\n        const imageSize = matrixSize * imageSizeRatio\n        return {\n          x: (viewBoxSize - imageSize) / 2,\n          y: (viewBoxSize - imageSize) / 2,\n          size: imageSize,\n          radius: props.imageRadius !== undefined ? resolveRadius(props.imageRadius) : '0',\n        }\n      })()\n    : null\n\n  return { viewBoxSize, modulesPath, finders, imageElement }\n})\n</script>\n\n<template>\n  <Box\n    v-bind=\"{ ...attrs, ...getStyles('root') }\"\n    :component=\"props.component\"\n    :root-ref=\"setRootRef\"\n  >\n    <svg\n      v-if=\"svgContent\"\n      v-bind=\"getStyles('svg')\"\n      :viewBox=\"`0 0 ${svgContent.viewBoxSize} ${svgContent.viewBoxSize}`\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      :aria-label=\"`QR Code: ${props.value}`\"\n    >\n      <rect\n        v-bind=\"getStyles('background')\"\n        x=\"0\"\n        y=\"0\"\n        :width=\"svgContent.viewBoxSize\"\n        :height=\"svgContent.viewBoxSize\"\n      />\n      <path\n        v-if=\"svgContent.modulesPath\"\n        v-bind=\"getStyles('modules')\"\n        :d=\"svgContent.modulesPath\"\n        fill-rule=\"nonzero\"\n      />\n      <g v-for=\"finder in svgContent.finders\" :key=\"finder.key\" v-bind=\"getStyles('finderPattern')\">\n        <path v-bind=\"getStyles('finderOuter')\" :d=\"finder.outer\" fill-rule=\"evenodd\" />\n        <path v-bind=\"getStyles('finderInner')\" :d=\"finder.inner\" />\n      </g>\n      <image\n        v-if=\"svgContent.imageElement\"\n        v-bind=\"getStyles('image')\"\n        :href=\"props.image\"\n        :x=\"svgContent.imageElement.x\"\n        :y=\"svgContent.imageElement.y\"\n        :width=\"svgContent.imageElement.size\"\n        :height=\"svgContent.imageElement.size\"\n        :clip-path=\"`inset(0 round ${svgContent.imageElement.radius})`\"\n        preserveAspectRatio=\"xMidYMid slice\"\n      />\n    </svg>\n    <svg v-else v-bind=\"getStyles('svg')\" />\n  </Box>\n</template>\n","<script lang=\"ts\">\nimport { createVarsResolver, getRadius, getSize, getThemeColor } from '@mantine-vue/core'\n\nconst defaultProps = {\n  size: 'md',\n  color: 'dark',\n  background: 'white',\n  errorCorrectionLevel: 'M',\n  quietZone: 1,\n  dotStyle: 'square',\n  cornerStyle: 'square',\n  imageSize: 0.2,\n  imagePadding: 1,\n  imageExcavate: true,\n} as const\n\nconst varsResolver = createVarsResolver<any>((theme, { size, radius, color, background }) => ({\n  root: {\n    '--qr-code-size': getSize(size, 'qr-code-size'),\n    '--qr-code-radius': radius !== undefined ? getRadius(radius) : undefined,\n    '--qr-code-color': color ? getThemeColor(color, theme) : undefined,\n    '--qr-code-background':\n      background === 'transparent'\n        ? 'transparent'\n        : background\n          ? getThemeColor(background, theme)\n          : undefined,\n  },\n}))\n\nexport { defaultProps, varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box, getRadius as resolveRadius, useProps, useStyles } from '@mantine-vue/core'\nimport { dotPath } from './utils/dot-shapes'\nimport { finderPatternPaths } from './utils/finder-shapes'\nimport { generateQRMatrix, isFinderPattern } from './utils/qr-encoder'\nimport { getExcavationMask } from './utils/utils'\nimport type { QRCodeOwnProps } from './QRCode.types'\nimport classes from './QRCode.module.css'\n\ndefineOptions({\n  name: 'QRCode',\n  inheritAttrs: false,\n})\n\nconst rawProps = withDefaults(defineProps<QRCodeOwnProps>(), {\n  component: undefined,\n  rootRef: undefined,\n  size: undefined,\n  radius: undefined,\n  color: undefined,\n  background: undefined,\n  errorCorrectionLevel: undefined,\n  quietZone: undefined,\n  dotStyle: undefined,\n  cornerStyle: undefined,\n  image: undefined,\n  imageSize: undefined,\n  imageRadius: undefined,\n  imagePadding: undefined,\n  imageExcavate: undefined,\n  classNames: undefined,\n  styles: undefined,\n  vars: undefined,\n})\n\nconst attrs = useAttrs()\nconst props = useProps('QRCode', defaultProps, rawProps)\n\nconst getStyles = useStyles({\n  name: 'QRCode',\n  props,\n  classes,\n  get className() {\n    return attrs.class\n  },\n  get style() {\n    return attrs.style as any\n  },\n  classNames: props.classNames as any,\n  styles: props.styles as any,\n  vars: props.vars as any,\n  varsResolver,\n  unstyled: props.unstyled,\n})\n\nconst rootElement = ref<Element | null>(null)\nconst setRootRef = (node: Element | null) => {\n  rootElement.value = node\n  assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n\nconst qrData = computed(() => {\n  if (!props.value) {\n    return null\n  }\n\n  try {\n    return generateQRMatrix(props.value, props.errorCorrectionLevel)\n  } catch {\n    return null\n  }\n})\n\nconst svgContent = computed(() => {\n  if (!qrData.value) {\n    return null\n  }\n\n  const { modules, size: matrixSize } = qrData.value\n  const quietZone = props.quietZone ?? defaultProps.quietZone\n  const imageSizeRatio = props.imageSize ?? defaultProps.imageSize\n  const imagePadding = props.imagePadding ?? defaultProps.imagePadding\n  const dotStyle = props.dotStyle ?? defaultProps.dotStyle\n  const cornerStyle = props.cornerStyle ?? defaultProps.cornerStyle\n  const viewBoxSize = matrixSize + quietZone * 2\n  const excavationMask =\n    props.image && props.imageExcavate\n      ? getExcavationMask(matrixSize, Math.ceil(matrixSize * imageSizeRatio), imagePadding)\n      : null\n\n  let modulesPath = ''\n  for (let row = 0; row < matrixSize; row += 1) {\n    for (let column = 0; column < matrixSize; column += 1) {\n      if (\n        !modules[row][column] ||\n        isFinderPattern(row, column, matrixSize) ||\n        excavationMask?.[row][column]\n      ) {\n        continue\n      }\n\n      modulesPath += dotPath(column + quietZone, row + quietZone, 1, dotStyle)\n    }\n  }\n\n  const finders = [\n    { key: 'top-left', row: 0, column: 0 },\n    { key: 'top-right', row: 0, column: matrixSize - 7 },\n    { key: 'bottom-left', row: matrixSize - 7, column: 0 },\n  ].map((position) => ({\n    key: position.key,\n    ...finderPatternPaths(position.column + quietZone, position.row + quietZone, 1, cornerStyle),\n  }))\n\n  const imageElement = props.image\n    ? (() => {\n        const imageSize = matrixSize * imageSizeRatio\n        return {\n          x: (viewBoxSize - imageSize) / 2,\n          y: (viewBoxSize - imageSize) / 2,\n          size: imageSize,\n          radius: props.imageRadius !== undefined ? resolveRadius(props.imageRadius) : '0',\n        }\n      })()\n    : null\n\n  return { viewBoxSize, modulesPath, finders, imageElement }\n})\n</script>\n\n<template>\n  <Box\n    v-bind=\"{ ...attrs, ...getStyles('root') }\"\n    :component=\"props.component\"\n    :root-ref=\"setRootRef\"\n  >\n    <svg\n      v-if=\"svgContent\"\n      v-bind=\"getStyles('svg')\"\n      :viewBox=\"`0 0 ${svgContent.viewBoxSize} ${svgContent.viewBoxSize}`\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      :aria-label=\"`QR Code: ${props.value}`\"\n    >\n      <rect\n        v-bind=\"getStyles('background')\"\n        x=\"0\"\n        y=\"0\"\n        :width=\"svgContent.viewBoxSize\"\n        :height=\"svgContent.viewBoxSize\"\n      />\n      <path\n        v-if=\"svgContent.modulesPath\"\n        v-bind=\"getStyles('modules')\"\n        :d=\"svgContent.modulesPath\"\n        fill-rule=\"nonzero\"\n      />\n      <g v-for=\"finder in svgContent.finders\" :key=\"finder.key\" v-bind=\"getStyles('finderPattern')\">\n        <path v-bind=\"getStyles('finderOuter')\" :d=\"finder.outer\" fill-rule=\"evenodd\" />\n        <path v-bind=\"getStyles('finderInner')\" :d=\"finder.inner\" />\n      </g>\n      <image\n        v-if=\"svgContent.imageElement\"\n        v-bind=\"getStyles('image')\"\n        :href=\"props.image\"\n        :x=\"svgContent.imageElement.x\"\n        :y=\"svgContent.imageElement.y\"\n        :width=\"svgContent.imageElement.size\"\n        :height=\"svgContent.imageElement.size\"\n        :clip-path=\"`inset(0 round ${svgContent.imageElement.radius})`\"\n        preserveAspectRatio=\"xMidYMid slice\"\n      />\n    </svg>\n    <svg v-else v-bind=\"getStyles('svg')\" />\n  </Box>\n</template>\n","import { polymorphicFactory } from '@mantine-vue/core'\nimport QRCodeComponent, { varsResolver } from './QRCode.vue'\nimport type { QRCodeFactory } from './QRCode.types'\nimport classes from './QRCode.module.css'\n\nexport const QRCode = polymorphicFactory<QRCodeFactory>(QRCodeComponent, {\n  classes,\n  varsResolver,\n})\n\nexport type {\n  QRCodeCornerStyle,\n  QRCodeCssVariables,\n  QRCodeDotStyle,\n  QRCodeErrorCorrectionLevel,\n  QRCodeFactory,\n  QRCodeOwnProps,\n  QRCodeProps,\n  QRCodeStylesNames,\n} from './QRCode.types'\n","import { shallowRef } from 'vue'\n\nexport type QRCodeDownloadFormat = 'svg' | 'png' | 'jpeg' | 'webp'\n\nexport interface UseQRCodeDownloadOptions {\n  /** Default download format. @default 'png' */\n  format?: QRCodeDownloadFormat\n  /** Default file name without an extension. @default 'qrcode' */\n  fileName?: string\n  /** Raster output scale. @default 4 */\n  scale?: number\n}\n\nexport interface QRCodeDownloadOptions {\n  format?: QRCodeDownloadFormat\n  fileName?: string\n  scale?: number\n}\n\nexport interface UseQRCodeDownloadReturn {\n  /** Callback ref to pass to `QRCode` as `root-ref`. */\n  ref: (element: Element | null) => void\n  /** Downloads the current QR code. */\n  download: (options?: QRCodeDownloadOptions) => Promise<void>\n  /** Returns a data URL for the current QR code. */\n  getDataUrl: (options?: Omit<QRCodeDownloadOptions, 'fileName'>) => Promise<string>\n}\n\nfunction serializeSvg(svgElement: SVGSVGElement): string {\n  const clone = svgElement.cloneNode(true) as SVGSVGElement\n  if (!clone.getAttribute('xmlns')) {\n    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n  }\n\n  const computedStyle = getComputedStyle(svgElement)\n  const background = computedStyle.getPropertyValue('--qr-code-background').trim() || '#ffffff'\n  const foreground = computedStyle.getPropertyValue('--qr-code-color').trim() || '#000000'\n  clone.querySelector('rect')?.setAttribute('fill', background)\n  clone.querySelectorAll('path').forEach((path) => {\n    const fill = path.getAttribute('fill')\n    if (!fill || fill === 'currentColor') {\n      path.setAttribute('fill', foreground)\n    }\n  })\n\n  return new XMLSerializer().serializeToString(clone)\n}\n\nfunction createSvgBlob(svg: string) {\n  return new Blob([svg], { type: 'image/svg+xml;charset=utf-8' })\n}\n\nasync function svgToCanvas(svgElement: SVGSVGElement, scale: number) {\n  const url = URL.createObjectURL(createSvgBlob(serializeSvg(svgElement)))\n  const viewBox = svgElement.viewBox.baseVal\n  const width = (viewBox.width || svgElement.clientWidth) * scale\n  const height = (viewBox.height || svgElement.clientHeight) * scale\n\n  return new Promise<HTMLCanvasElement>((resolve, reject) => {\n    const image = new Image()\n    image.onload = () => {\n      const canvas = document.createElement('canvas')\n      canvas.width = width\n      canvas.height = height\n      const context = canvas.getContext('2d')\n      if (!context) {\n        URL.revokeObjectURL(url)\n        reject(new Error('Unable to create a canvas rendering context'))\n        return\n      }\n      context.fillStyle = '#ffffff'\n      context.fillRect(0, 0, width, height)\n      context.drawImage(image, 0, 0, width, height)\n      URL.revokeObjectURL(url)\n      resolve(canvas)\n    }\n    image.onerror = () => {\n      URL.revokeObjectURL(url)\n      reject(new Error('Failed to load SVG as image'))\n    }\n    image.src = url\n  })\n}\n\nfunction mimeType(format: QRCodeDownloadFormat) {\n  return format === 'jpeg' ? 'image/jpeg' : format === 'webp' ? 'image/webp' : 'image/png'\n}\n\nfunction triggerDownload(blob: Blob, fileName: string) {\n  const url = URL.createObjectURL(blob)\n  const link = document.createElement('a')\n  link.href = url\n  link.download = fileName\n  document.body.appendChild(link)\n  link.click()\n  link.remove()\n  URL.revokeObjectURL(url)\n}\n\n/** Provides SVG and high-resolution raster export for a `QRCode` root element. */\nexport function useQRCodeDownload(options: UseQRCodeDownloadOptions = {}): UseQRCodeDownloadReturn {\n  const defaultFormat = options.format ?? 'png'\n  const defaultFileName = options.fileName ?? 'qrcode'\n  const defaultScale = options.scale ?? 4\n  const element = shallowRef<Element | null>(null)\n  const ref = (node: Element | null) => {\n    element.value = node\n  }\n\n  const getSvgElement = () => element.value?.querySelector('svg') ?? null\n\n  const getDataUrl: UseQRCodeDownloadReturn['getDataUrl'] = async (overrides = {}) => {\n    const svgElement = getSvgElement()\n    if (!svgElement) {\n      throw new Error('QRCode SVG element not found')\n    }\n\n    const format = overrides.format ?? defaultFormat\n    if (format === 'svg') {\n      const bytes = new TextEncoder().encode(serializeSvg(svgElement))\n      let binary = ''\n      bytes.forEach((byte) => (binary += String.fromCharCode(byte)))\n      return `data:image/svg+xml;base64,${btoa(binary)}`\n    }\n\n    const canvas = await svgToCanvas(svgElement, overrides.scale ?? defaultScale)\n    return canvas.toDataURL(mimeType(format), 1)\n  }\n\n  const download: UseQRCodeDownloadReturn['download'] = async (overrides = {}) => {\n    const svgElement = getSvgElement()\n    if (!svgElement) {\n      throw new Error('QRCode SVG element not found')\n    }\n\n    const format = overrides.format ?? defaultFormat\n    const fileName = `${overrides.fileName ?? defaultFileName}.${format}`\n    if (format === 'svg') {\n      triggerDownload(createSvgBlob(serializeSvg(svgElement)), fileName)\n      return\n    }\n\n    const canvas = await svgToCanvas(svgElement, overrides.scale ?? defaultScale)\n    const blob = await new Promise<Blob | null>((resolve) =>\n      canvas.toBlob(resolve, mimeType(format), 1),\n    )\n    if (blob) {\n      triggerDownload(blob, fileName)\n    }\n  }\n\n  return { ref, download, getDataUrl }\n}\n"],"mappings":";;;;;;AAGA,SAAgB,QAAQ,GAAW,GAAW,UAAkB,OAA+B;CAC7F,IAAI,UAAU,QAAQ;EACpB,MAAM,SAAS,WAAW;EAG1B,OAAO,IAFS,IAAI,OAED,GADH,IAAI,SACY,OAAO,GAAG,OAAO,GAAG,OAAO,WAAW,SAAS,EAAE,GAAG,OAAO,GAAG,OAAO,WAAW,CAAC,SAAS,EAAE;CAC9H;CAEA,IAAI,UAAU,WAAW;EACvB,MAAM,SAAS,WAAW;EAC1B,OACE,IAAI,IAAI,OAAO,GAAG,EAAA,GACd,WAAW,IAAI,OAAA,GACf,OAAO,GAAG,OAAO,SAAS,OAAO,GAAG,OAAA,GACpC,WAAW,IAAI,OAAA,GACf,OAAO,GAAG,OAAO,SAAS,CAAC,OAAO,GAAG,OAAA,GACrC,EAAE,WAAW,IAAI,QAAA,GACjB,OAAO,GAAG,OAAO,SAAS,CAAC,OAAO,GAAG,CAAC,OAAA,GACtC,EAAE,WAAW,IAAI,QAAA,GACjB,OAAO,GAAG,OAAO,SAAS,OAAO,GAAG,CAAC,OAAO;CAEpD;CAEA,OAAO,IAAI,EAAE,GAAG,EAAE,GAAG,SAAS,GAAG,SAAS,GAAG,CAAC,SAAS;AACzD;;;ACpBA,SAAS,YAAY,GAAW,GAAW,OAAe,QAAgB,QAAgB;CACxF,OACE,IAAI,IAAI,OAAO,GAAG,EAAA,GACd,QAAQ,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,SAAS,OAAO,GAAG,OAAA,GAC1D,SAAS,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,SAAS,CAAC,OAAO,GAAG,OAAA,GAC5D,EAAE,QAAQ,IAAI,QAAQ,GAAG,OAAO,GAAG,OAAO,SAAS,CAAC,OAAO,GAAG,CAAC,OAAA,GAC/D,EAAE,SAAS,IAAI,QAAQ,GAAG,OAAO,GAAG,OAAO,SAAS,OAAO,GAAG,CAAC,OAAO;AAE9E;AAEA,SAAS,mBAAmB,GAAW,GAAW,OAAe,QAAgB,QAAgB;CAC/F,OACE,IAAI,IAAI,OAAO,GAAG,EAAA,GACd,OAAO,GAAG,OAAO,SAAS,CAAC,OAAO,GAAG,OAAA,GACrC,SAAS,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,SAAS,OAAO,GAAG,OAAA,GAC3D,QAAQ,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,SAAS,OAAO,GAAG,CAAC,OAAA,GAC3D,EAAE,SAAS,IAAI,QAAQ,GAAG,OAAO,GAAG,OAAO,SAAS,CAAC,OAAO,GAAG,CAAC,OAAO;AAE/E;;AAGA,SAAgB,mBACd,GACA,GACA,UACA,OACa;CACb,IAAI,UAAU,UAOZ,OAAO;EAAE,OAAA,IALH,EAAE,GAAG,EAAE,GAAG,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,CAAC,WAAW,EAAE,IACxD,IAAI,SAAS,GAAG,IAAI,SAAS,GAAG,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,CAAC,WAAW,EAAE;EAIpE,OAAA,IAFV,IAAI,WAAW,EAAE,GAAG,IAAI,WAAW,EAAA,GACnC,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,CAAC,WAAW,EAAE;CAC9B;CAGxB,MAAM,cAAc,UAAU,SAAS,WAAW,MAAM,WAAW;CACnE,MAAM,aAAa,UAAU,SAAS,WAAW,MAAM,WAAW;CAClE,MAAM,cAAc,UAAU,SAAS,WAAW,MAAM,WAAW;CAEnE,OAAO;EACL,OACE,YAAY,GAAG,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,IACzD,mBAAmB,IAAI,UAAU,IAAI,UAAU,WAAW,GAAG,WAAW,GAAG,UAAU;EACvF,OAAO,YAAY,IAAI,WAAW,GAAG,IAAI,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW;CAChG;AACF;;;AC5CA,SAAgB,iBACd,OACA,uBAAmD,KACzC;CACV,MAAM,KAAK,cAAc,OAAO,OAAO,EAAE,qBAAqB,CAAC;CAC/D,MAAM,OAAO,GAAG,QAAQ;CACxB,MAAM,SAAsB,CAAC;CAE7B,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,OAAO,GAAG;EACtC,MAAM,UAAqB,CAAC;EAC5B,KAAK,IAAI,SAAS,GAAG,SAAS,MAAM,UAAU,GAC5C,QAAQ,KAAK,GAAG,QAAQ,KAAK,MAAM,OAAO,YAAY,CAAC;EAEzD,OAAO,KAAK,OAAO;CACrB;CAEA,OAAO;EAAE,SAAS;EAAQ;CAAK;AACjC;AAEA,SAAgB,gBAAgB,KAAa,QAAgB,YAA6B;CACxF,OACG,MAAM,KAAK,SAAS,KACpB,MAAM,KAAK,UAAU,aAAa,KAClC,OAAO,aAAa,KAAK,SAAS;AAEvC;;;;AClCA,SAAgB,kBACd,YACA,iBACA,cACa;CACb,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAS,MAAe,UAAU,EAAE,KAAK,KAAK,CAAC;CAC5F,MAAM,oBAAoB,kBAAkB,eAAe;CAC3D,MAAM,cAAc,KAAK,OAAO,aAAa,qBAAqB,CAAC;CACnE,MAAM,YAAY,cAAc;CAEhC,KAAK,IAAI,MAAM,GAAG,MAAM,YAAY,OAAO,GACzC,KAAK,IAAI,SAAS,GAAG,SAAS,YAAY,UAAU,GAClD,IAAI,OAAO,eAAe,MAAM,aAAa,UAAU,eAAe,SAAS,WAC7E,KAAK,KAAK,UAAU;CAK1B,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;AEjBA,IAAM,eAAe;CACnB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,sBAAsB;CACtB,WAAW;CACX,UAAU;CACV,aAAa;CACb,WAAW;CACX,cAAc;CACd,eAAe;AACjB;AAEA,IAAM,eAAe,oBAAyB,OAAO,EAAE,MAAM,QAAQ,OAAO,kBAAkB,EAC5F,MAAM;CACJ,kBAAkB,QAAQ,MAAM,cAAc;CAC9C,oBAAoB,WAAW,KAAA,IAAY,UAAU,MAAM,IAAI,KAAA;CAC/D,mBAAmB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CACzD,wBACE,eAAe,gBACX,gBACA,aACE,cAAc,YAAY,KAAK,IAC/B,KAAA;AACV,EACF,EAAE;;;AEvBF,IAAa,SAAS,mBAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EF4CxD,MAAM,WAAW;EAqBjB,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS,UAAU,cAAc,QAAQ;EAEvD,MAAM,YAAY,UAAU;GAC1B,MAAM;GACN;GACA,SAAA;GACA,IAAI,YAAY;IACd,OAAO,MAAM;GACf;GACA,IAAI,QAAQ;IACV,OAAO,MAAM;GACf;GACA,YAAY,MAAM;GAClB,QAAQ,MAAM;GACd,MAAM,MAAM;GACZ;GACA,UAAU,MAAM;EAClB,CAAC;EAED,MAAM,cAAc,IAAoB,IAAI;EAC5C,MAAM,cAAc,SAAyB;GAC3C,YAAY,QAAQ;GACpB,UAAU,MAAM,SAAS,IAAI;EAC/B;EAEA,SAAa,EAAE,YAAY,CAAC;EAE5B,MAAM,SAAS,eAAe;GAC5B,IAAI,CAAC,MAAM,OACT,OAAO;GAGT,IAAI;IACF,OAAO,iBAAiB,MAAM,OAAO,MAAM,oBAAoB;GACjE,QAAQ;IACN,OAAO;GACT;EACF,CAAC;EAED,MAAM,aAAa,eAAe;GAChC,IAAI,CAAC,OAAO,OACV,OAAO;GAGT,MAAM,EAAE,SAAS,MAAM,eAAe,OAAO;GAC7C,MAAM,YAAY,MAAM,aAAa,aAAa;GAClD,MAAM,iBAAiB,MAAM,aAAa,aAAa;GACvD,MAAM,eAAe,MAAM,gBAAgB,aAAa;GACxD,MAAM,WAAW,MAAM,YAAY,aAAa;GAChD,MAAM,cAAc,MAAM,eAAe,aAAa;GACtD,MAAM,cAAc,aAAa,YAAY;GAC7C,MAAM,iBACJ,MAAM,SAAS,MAAM,gBACjB,kBAAkB,YAAY,KAAK,KAAK,aAAa,cAAc,GAAG,YAAY,IAClF;GAEN,IAAI,cAAc;GAClB,KAAK,IAAI,MAAM,GAAG,MAAM,YAAY,OAAO,GACzC,KAAK,IAAI,SAAS,GAAG,SAAS,YAAY,UAAU,GAAG;IACrD,IACE,CAAC,QAAQ,KAAK,WACd,gBAAgB,KAAK,QAAQ,UAAU,KACvC,iBAAiB,KAAK,SAEtB;IAGF,eAAe,QAAQ,SAAS,WAAW,MAAM,WAAW,GAAG,QAAQ;GACzE;GAGF,MAAM,UAAU;IACd;KAAE,KAAK;KAAY,KAAK;KAAG,QAAQ;IAAE;IACrC;KAAE,KAAK;KAAa,KAAK;KAAG,QAAQ,aAAa;IAAE;IACnD;KAAE,KAAK;KAAe,KAAK,aAAa;KAAG,QAAQ;IAAE;GACvD,EAAE,KAAK,cAAc;IACnB,KAAK,SAAS;IACd,GAAG,mBAAmB,SAAS,SAAS,WAAW,SAAS,MAAM,WAAW,GAAG,WAAW;GAC7F,EAAE;GAEF,MAAM,eAAe,MAAM,eAChB;IACL,MAAM,YAAY,aAAa;IAC/B,OAAO;KACL,IAAI,cAAc,aAAa;KAC/B,IAAI,cAAc,aAAa;KAC/B,MAAM;KACN,QAAQ,MAAM,gBAAgB,KAAA,IAAY,UAAc,MAAM,WAAW,IAAI;IAC/E;GACF,GAAG,IACH;GAEJ,OAAO;IAAE;IAAa;IAAa;IAAS;GAAa;EAC3D,CAAC;;uBAIC,YA2CM,MAAA,GAAA,GA3CN,WA2CM;IAAA,GA1CS,MAAA,KAAA;IAAK,GAAK,MAAA,SAAA,EAAS,MAAA;GAAA,GAAA;IAC/B,WAAW,MAAA,KAAA,EAAM;IACjB,YAAU;;2BAsCL,CAnCE,WAAA,SAAA,UAAA,GADR,mBAoCM,OApCN,WAoCM,EAAA,KAAA,EAAA,GAlCI,MAAA,SAAA,EAAS,KAAA,GAAA;KAChB,SAAO,OAAS,WAAA,MAAW,YAAW,GAAI,WAAA,MAAW;KACtD,OAAM;KACN,MAAK;KACJ,cAAU,YAAc,MAAA,KAAA,EAAM;;KAE/B,mBAME,QANF,WACU,MAKR,SAAA,EALiB,YAAA,GAAA;MACjB,GAAE;MACF,GAAE;MACD,OAAO,WAAA,MAAW;MAClB,QAAQ,WAAA,MAAW;;KAGd,WAAA,MAAW,eAAA,UAAA,GADnB,mBAKE,QALF,WAKE,EAAA,KAAA,EAAA,GAHQ,MAAA,SAAA,EAAS,SAAA,GAAA;MAChB,GAAG,WAAA,MAAW;MACf,aAAU;;uBAEZ,mBAGI,UAAA,MAAA,WAHgB,WAAA,MAAW,UAArB,WAAM;0BAAhB,mBAGI,KAHJ,WAGI,EAHqC,KAAK,OAAO,IAAA,GAAA,EAAA,SAAA,KAAA,GAAa,MAAA,SAAA,EAAS,eAAA,CAAA,GAAA,CACzE,mBAAgF,QAAhF,WAAgF,EAAA,SAAA,KAAA,GAAlE,MAAA,SAAA,EAAS,aAAA,GAAA;OAAkB,GAAG,OAAO;OAAO,aAAU;iCACpE,mBAA4D,QAA5D,WAA4D,EAAA,SAAA,KAAA,GAA9C,MAAA,SAAA,EAAS,aAAA,GAAA,EAAkB,GAAG,OAAO,MAAA,CAAA,GAAA,MAAA,IAAA,UAAA,CAAA,GAAA,EAAA;;KAG7C,WAAA,MAAW,gBAAA,UAAA,GADnB,mBAUE,SAVF,WAUE,EAAA,KAAA,EAAA,GARQ,MAAA,SAAA,EAAS,OAAA,GAAA;MAChB,MAAM,MAAA,KAAA,EAAM;MACZ,GAAG,WAAA,MAAW,aAAa;MAC3B,GAAG,WAAA,MAAW,aAAa;MAC3B,OAAO,WAAA,MAAW,aAAa;MAC/B,QAAQ,WAAA,MAAW,aAAa;MAChC,aAAS,iBAAmB,WAAA,MAAW,aAAa,OAAM;MAC3D,qBAAoB;;wCAGxB,mBAAwC,OAAA,eAAA,WAAA,EAAA,KAAA,EAAA,GAApB,MAAA,SAAA,EAAS,KAAA,CAAA,CAAA,GAAA,MAAA,EAAA,EAAA,CAAA;;;;;CE7MuB,GAAiB;CACvE,SAAA;CACA;AACF,CAAC;;;ACoBD,SAAS,aAAa,YAAmC;CACvD,MAAM,QAAQ,WAAW,UAAU,IAAI;CACvC,IAAI,CAAC,MAAM,aAAa,OAAO,GAC7B,MAAM,aAAa,SAAS,4BAA4B;CAG1D,MAAM,gBAAgB,iBAAiB,UAAU;CACjD,MAAM,aAAa,cAAc,iBAAiB,sBAAsB,EAAE,KAAK,KAAK;CACpF,MAAM,aAAa,cAAc,iBAAiB,iBAAiB,EAAE,KAAK,KAAK;CAC/E,MAAM,cAAc,MAAM,GAAG,aAAa,QAAQ,UAAU;CAC5D,MAAM,iBAAiB,MAAM,EAAE,SAAS,SAAS;EAC/C,MAAM,OAAO,KAAK,aAAa,MAAM;EACrC,IAAI,CAAC,QAAQ,SAAS,gBACpB,KAAK,aAAa,QAAQ,UAAU;CAExC,CAAC;CAED,OAAO,IAAI,cAAc,EAAE,kBAAkB,KAAK;AACpD;AAEA,SAAS,cAAc,KAAa;CAClC,OAAO,IAAI,KAAK,CAAC,GAAG,GAAG,EAAE,MAAM,8BAA8B,CAAC;AAChE;AAEA,eAAe,YAAY,YAA2B,OAAe;CACnE,MAAM,MAAM,IAAI,gBAAgB,cAAc,aAAa,UAAU,CAAC,CAAC;CACvE,MAAM,UAAU,WAAW,QAAQ;CACnC,MAAM,SAAS,QAAQ,SAAS,WAAW,eAAe;CAC1D,MAAM,UAAU,QAAQ,UAAU,WAAW,gBAAgB;CAE7D,OAAO,IAAI,SAA4B,SAAS,WAAW;EACzD,MAAM,QAAQ,IAAI,MAAM;EACxB,MAAM,eAAe;GACnB,MAAM,SAAS,SAAS,cAAc,QAAQ;GAC9C,OAAO,QAAQ;GACf,OAAO,SAAS;GAChB,MAAM,UAAU,OAAO,WAAW,IAAI;GACtC,IAAI,CAAC,SAAS;IACZ,IAAI,gBAAgB,GAAG;IACvB,uBAAO,IAAI,MAAM,6CAA6C,CAAC;IAC/D;GACF;GACA,QAAQ,YAAY;GACpB,QAAQ,SAAS,GAAG,GAAG,OAAO,MAAM;GACpC,QAAQ,UAAU,OAAO,GAAG,GAAG,OAAO,MAAM;GAC5C,IAAI,gBAAgB,GAAG;GACvB,QAAQ,MAAM;EAChB;EACA,MAAM,gBAAgB;GACpB,IAAI,gBAAgB,GAAG;GACvB,uBAAO,IAAI,MAAM,6BAA6B,CAAC;EACjD;EACA,MAAM,MAAM;CACd,CAAC;AACH;AAEA,SAAS,SAAS,QAA8B;CAC9C,OAAO,WAAW,SAAS,eAAe,WAAW,SAAS,eAAe;AAC/E;AAEA,SAAS,gBAAgB,MAAY,UAAkB;CACrD,MAAM,MAAM,IAAI,gBAAgB,IAAI;CACpC,MAAM,OAAO,SAAS,cAAc,GAAG;CACvC,KAAK,OAAO;CACZ,KAAK,WAAW;CAChB,SAAS,KAAK,YAAY,IAAI;CAC9B,KAAK,MAAM;CACX,KAAK,OAAO;CACZ,IAAI,gBAAgB,GAAG;AACzB;;AAGA,SAAgB,kBAAkB,UAAoC,CAAC,GAA4B;CACjG,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,kBAAkB,QAAQ,YAAY;CAC5C,MAAM,eAAe,QAAQ,SAAS;CACtC,MAAM,UAAU,WAA2B,IAAI;CAC/C,MAAM,OAAO,SAAyB;EACpC,QAAQ,QAAQ;CAClB;CAEA,MAAM,sBAAsB,QAAQ,OAAO,cAAc,KAAK,KAAK;CAEnE,MAAM,aAAoD,OAAO,YAAY,CAAC,MAAM;EAClF,MAAM,aAAa,cAAc;EACjC,IAAI,CAAC,YACH,MAAM,IAAI,MAAM,8BAA8B;EAGhD,MAAM,SAAS,UAAU,UAAU;EACnC,IAAI,WAAW,OAAO;GACpB,MAAM,QAAQ,IAAI,YAAY,EAAE,OAAO,aAAa,UAAU,CAAC;GAC/D,IAAI,SAAS;GACb,MAAM,SAAS,SAAU,UAAU,OAAO,aAAa,IAAI,CAAE;GAC7D,OAAO,6BAA6B,KAAK,MAAM;EACjD;EAGA,QAAO,MADc,YAAY,YAAY,UAAU,SAAS,YAAY,GAC9D,UAAU,SAAS,MAAM,GAAG,CAAC;CAC7C;CAEA,MAAM,WAAgD,OAAO,YAAY,CAAC,MAAM;EAC9E,MAAM,aAAa,cAAc;EACjC,IAAI,CAAC,YACH,MAAM,IAAI,MAAM,8BAA8B;EAGhD,MAAM,SAAS,UAAU,UAAU;EACnC,MAAM,WAAW,GAAG,UAAU,YAAY,gBAAgB,GAAG;EAC7D,IAAI,WAAW,OAAO;GACpB,gBAAgB,cAAc,aAAa,UAAU,CAAC,GAAG,QAAQ;GACjE;EACF;EAEA,MAAM,SAAS,MAAM,YAAY,YAAY,UAAU,SAAS,YAAY;EAC5E,MAAM,OAAO,MAAM,IAAI,SAAsB,YAC3C,OAAO,OAAO,SAAS,SAAS,MAAM,GAAG,CAAC,CAC5C;EACA,IAAI,MACF,gBAAgB,MAAM,QAAQ;CAElC;CAEA,OAAO;EAAE;EAAK;EAAU;CAAW;AACrC"}

package/lib/QRCode.d.ts

@@ -0,0 +1,12 @@
+export declare const QRCode: import("@mantine-vue/core").MantinePolymorphicComponent<{
+    props: Omit<import("./QRCode.types").QRCodeProps, "component" | "rootRef">;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: import("./QRCode.types").QRCodeStylesNames;
+    vars: import("./QRCode.types").QRCodeCssVariables;
+}, "div">;
+export type { QRCodeCornerStyle, QRCodeCssVariables, QRCodeDotStyle, QRCodeErrorCorrectionLevel, QRCodeFactory, QRCodeOwnProps, QRCodeProps, QRCodeStylesNames, } from './QRCode.types';

package/lib/QRCode.types.d.ts

@@ -0,0 +1,58 @@
+import type { BoxProps, MantineColor, MantineRadius, MantineSize, PolymorphicFactory } from '@mantine-vue/core';
+import type { StylesApiProps } from '@mantine-vue/core/styles-api';
+import type { VueRefTarget } from '@mantine-vue/hooks';
+export type QRCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+export type QRCodeDotStyle = 'square' | 'rounded' | 'dots';
+export type QRCodeCornerStyle = 'square' | 'rounded' | 'dots';
+/** Props declared by `QRCode` itself. See `QRCodeProps` for the full public type. */
+export interface QRCodeOwnProps extends StylesApiProps<QRCodeFactory> {
+    /** Root element or component rendered by `QRCode`. @default 'div' */
+    component?: any;
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /** Data to encode in the QR code (URL, text, contact data, and so on). */
+    value: string;
+    /** QR code width and height. @default 'md' */
+    size?: MantineSize | (string & {}) | number;
+    /** Border radius of the outer container. */
+    radius?: MantineRadius;
+    /** Module foreground color from the Mantine theme. @default 'dark' */
+    color?: MantineColor;
+    /** Background color from the Mantine theme, or `transparent`. @default 'white' */
+    background?: MantineColor | 'transparent';
+    /** Error correction level: L (7%), M (15%), Q (25%), or H (30%). @default 'M' */
+    errorCorrectionLevel?: QRCodeErrorCorrectionLevel;
+    /** Number of quiet-zone modules around the QR code. @default 1 */
+    quietZone?: number;
+    /** Shape used for data modules. @default 'square' */
+    dotStyle?: QRCodeDotStyle;
+    /** Shape used for the three finder patterns. @default 'square' */
+    cornerStyle?: QRCodeCornerStyle;
+    /** URL of an image or logo rendered at the center. */
+    image?: string;
+    /** Image size relative to the QR matrix, from 0 to 1. @default 0.2 */
+    imageSize?: number;
+    /** Border radius of the center image. */
+    imageRadius?: MantineRadius;
+    /** Padding around the image measured in modules. @default 1 */
+    imagePadding?: number;
+    /** Removes QR modules behind the center image. @default true */
+    imageExcavate?: boolean;
+}
+export interface QRCodeProps extends Omit<BoxProps, keyof QRCodeOwnProps>, QRCodeOwnProps {
+}
+export type QRCodeStylesNames = 'root' | 'svg' | 'background' | 'modules' | 'finderPattern' | 'finderOuter' | 'finderInner' | 'image';
+export type QRCodeCssVariables = {
+    root: '--qr-code-size' | '--qr-code-radius' | '--qr-code-color' | '--qr-code-background';
+};
+export type QRCodeFactory = PolymorphicFactory<{
+    props: Omit<QRCodeProps, 'component' | 'rootRef'>;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: 'div';
+    defaultRef: HTMLDivElement;
+    stylesNames: QRCodeStylesNames;
+    vars: QRCodeCssVariables;
+}>;

package/lib/QRCode.vue.d.ts

@@ -0,0 +1,20 @@
+import type { QRCodeOwnProps } from './QRCode.types';
+declare const defaultProps: {
+    readonly size: "md";
+    readonly color: "dark";
+    readonly background: "white";
+    readonly errorCorrectionLevel: "M";
+    readonly quietZone: 1;
+    readonly dotStyle: "square";
+    readonly cornerStyle: "square";
+    readonly imageSize: 0.2;
+    readonly imagePadding: 1;
+    readonly imageExcavate: true;
+};
+declare const varsResolver: (theme: import("@mantine-vue/core").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+export { defaultProps, varsResolver };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<QRCodeOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QRCodeOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/index.d.mts

@@ -0,0 +1,4 @@
+export { QRCode } from './QRCode';
+export type { QRCodeCornerStyle, QRCodeCssVariables, QRCodeDotStyle, QRCodeErrorCorrectionLevel, QRCodeFactory, QRCodeOwnProps, QRCodeProps, QRCodeStylesNames, } from './QRCode.types';
+export { useQRCodeDownload } from './use-qr-code-download';
+export type { QRCodeDownloadFormat, QRCodeDownloadOptions, UseQRCodeDownloadOptions, UseQRCodeDownloadReturn, } from './use-qr-code-download';

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { QRCode } from './QRCode';
+export type { QRCodeCornerStyle, QRCodeCssVariables, QRCodeDotStyle, QRCodeErrorCorrectionLevel, QRCodeFactory, QRCodeOwnProps, QRCodeProps, QRCodeStylesNames, } from './QRCode.types';
+export { useQRCodeDownload } from './use-qr-code-download';
+export type { QRCodeDownloadFormat, QRCodeDownloadOptions, UseQRCodeDownloadOptions, UseQRCodeDownloadReturn, } from './use-qr-code-download';

package/lib/use-qr-code-download.d.ts

@@ -0,0 +1,24 @@
+export type QRCodeDownloadFormat = 'svg' | 'png' | 'jpeg' | 'webp';
+export interface UseQRCodeDownloadOptions {
+    /** Default download format. @default 'png' */
+    format?: QRCodeDownloadFormat;
+    /** Default file name without an extension. @default 'qrcode' */
+    fileName?: string;
+    /** Raster output scale. @default 4 */
+    scale?: number;
+}
+export interface QRCodeDownloadOptions {
+    format?: QRCodeDownloadFormat;
+    fileName?: string;
+    scale?: number;
+}
+export interface UseQRCodeDownloadReturn {
+    /** Callback ref to pass to `QRCode` as `root-ref`. */
+    ref: (element: Element | null) => void;
+    /** Downloads the current QR code. */
+    download: (options?: QRCodeDownloadOptions) => Promise<void>;
+    /** Returns a data URL for the current QR code. */
+    getDataUrl: (options?: Omit<QRCodeDownloadOptions, 'fileName'>) => Promise<string>;
+}
+/** Provides SVG and high-resolution raster export for a `QRCode` root element. */
+export declare function useQRCodeDownload(options?: UseQRCodeDownloadOptions): UseQRCodeDownloadReturn;

package/lib/utils/dot-shapes.d.ts

@@ -0,0 +1,3 @@
+import type { QRCodeDotStyle } from '../QRCode.types';
+/** Generates SVG path data for one data module. */
+export declare function dotPath(x: number, y: number, cellSize: number, style: QRCodeDotStyle): string;

package/lib/utils/finder-shapes.d.ts

@@ -0,0 +1,7 @@
+import type { QRCodeCornerStyle } from '../QRCode.types';
+export interface FinderPaths {
+    outer: string;
+    inner: string;
+}
+/** Generates separate outer-ring and inner paths for a 7x7 finder pattern. */
+export declare function finderPatternPaths(x: number, y: number, cellSize: number, style: QRCodeCornerStyle): FinderPaths;

package/lib/utils/qr-encoder.d.ts

@@ -0,0 +1,9 @@
+import type { QRCodeErrorCorrectionLevel } from '../QRCode.types';
+export interface QRMatrix {
+    /** Two-dimensional matrix where true represents a dark module. */
+    modules: boolean[][];
+    /** Number of modules on each side. */
+    size: number;
+}
+export declare function generateQRMatrix(value: string, errorCorrectionLevel?: QRCodeErrorCorrectionLevel): QRMatrix;
+export declare function isFinderPattern(row: number, column: number, matrixSize: number): boolean;

package/lib/utils/utils.d.ts

@@ -0,0 +1,2 @@
+/** Builds a mask identifying modules hidden by the center image and its padding. */
+export declare function getExcavationMask(matrixSize: number, imageModuleSize: number, imagePadding: number): boolean[][];

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@mantine-vue/qr-code",
+  "version": "3.4.0",
+  "description": "Customizable QR code component for Vue with image overlays and SVG or raster downloads",
+  "license": "MIT",
+  "files": [
+    "cjs",
+    "esm",
+    "lib",
+    "styles.css",
+    "styles.layer.css",
+    "styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    },
+    "./styles.css": "./styles.css",
+    "./styles.layer.css": "./styles.layer.css"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.4"
+  },
+  "devDependencies": {
+    "@mantine-vue/core": "workspace:*",
+    "@mantine-vue/hooks": "workspace:*",
+    "@types/qrcode": "^1.5.6",
+    "@vue/compiler-dom": "^3.5.0",
+    "@vue/test-utils": "^2.4.6",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "@mantine-vue/core": "3.4.0",
+    "@mantine-vue/hooks": "3.4.0",
+    "vue": "^3.5.0"
+  },
+  "mantineVue": {
+    "cssLayer": "mantine-qr-code"
+  }
+}

package/styles.css

@@ -0,0 +1,35 @@
+._root_6mmnv_1 {
+  --qr-code-size-xs: calc(5rem * var(--mantine-scale));
+  --qr-code-size-sm: calc(7.5rem * var(--mantine-scale));
+  --qr-code-size-md: calc(10rem * var(--mantine-scale));
+  --qr-code-size-lg: calc(12.5rem * var(--mantine-scale));
+  --qr-code-size-xl: calc(16rem * var(--mantine-scale));
+
+  display: inline-flex;
+  width: var(--qr-code-size);
+  height: var(--qr-code-size);
+  border-radius: var(--qr-code-radius);
+  overflow: hidden;
+}
+
+._svg_6mmnv_15 {
+  width: 100%;
+  height: 100%;
+}
+
+._background_6mmnv_20 {
+  fill: var(--qr-code-background);
+}
+
+._modules_6mmnv_24,
+._finderOuter_6mmnv_25,
+._finderInner_6mmnv_26 {
+  fill: var(--qr-code-color);
+}
+
+._finderPattern_6mmnv_30 {
+}
+
+._image_6mmnv_33 {
+}
+/*$vite$:1*/

package/styles.layer.css

@@ -0,0 +1,37 @@
+@layer mantine-qr-code {
+._root_6mmnv_1 {
+  --qr-code-size-xs: calc(5rem * var(--mantine-scale));
+  --qr-code-size-sm: calc(7.5rem * var(--mantine-scale));
+  --qr-code-size-md: calc(10rem * var(--mantine-scale));
+  --qr-code-size-lg: calc(12.5rem * var(--mantine-scale));
+  --qr-code-size-xl: calc(16rem * var(--mantine-scale));
+
+  display: inline-flex;
+  width: var(--qr-code-size);
+  height: var(--qr-code-size);
+  border-radius: var(--qr-code-radius);
+  overflow: hidden;
+}
+
+._svg_6mmnv_15 {
+  width: 100%;
+  height: 100%;
+}
+
+._background_6mmnv_20 {
+  fill: var(--qr-code-background);
+}
+
+._modules_6mmnv_24,
+._finderOuter_6mmnv_25,
+._finderInner_6mmnv_26 {
+  fill: var(--qr-code-color);
+}
+
+._finderPattern_6mmnv_30 {
+}
+
+._image_6mmnv_33 {
+}
+/*$vite$:1*/
+}