From cd0313feaf366b312f04fb63feb430a89df4e6ee Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Sat, 22 Nov 2025 00:04:50 +0100
Subject: [PATCH 1/2] feat: enhance QR code component with customizable options
 and improved story representation

- drop 'uqr' & use '@qrcode-js/browser'
---
 src/lib/components/qr-code/index.ts           |  1 +
 .../components/qr-code/qr-code.stories.svelte |  5 +-
 src/lib/components/qr-code/qr-code.svelte     | 80 +++++++++++++++----
 src/lib/components/qr-code/types.ts           | 15 ++++
 4 files changed, 85 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/components/qr-code/types.ts

diff --git a/src/lib/components/qr-code/index.ts b/src/lib/components/qr-code/index.ts
index f91b062..628a622 100644
--- a/src/lib/components/qr-code/index.ts
+++ b/src/lib/components/qr-code/index.ts
@@ -1 +1,2 @@
 export { default as QRCode } from './qr-code.svelte';
+export * from './types';
diff --git a/src/lib/components/qr-code/qr-code.stories.svelte b/src/lib/components/qr-code/qr-code.stories.svelte
index 9031d28..46999a8 100644
--- a/src/lib/components/qr-code/qr-code.stories.svelte
+++ b/src/lib/components/qr-code/qr-code.stories.svelte
@@ -16,7 +16,10 @@
 		<Root>
 			{#snippet children({})}
 				<div class="flex h-full w-full items-center justify-center">
-					<QrCodeComponent value="Hello World" />
+					<QrCodeComponent
+						class="text-primary-foreground bg-primary size-64 rounded-2xl p-1"
+						value="Hello World 123"
+					/>
 				</div>
 			{/snippet}
 		</Root>
diff --git a/src/lib/components/qr-code/qr-code.svelte b/src/lib/components/qr-code/qr-code.svelte
index e3d7cd8..2393fed 100644
--- a/src/lib/components/qr-code/qr-code.svelte
+++ b/src/lib/components/qr-code/qr-code.svelte
@@ -1,25 +1,75 @@
 <script lang="ts">
-	import { cn } from '$svelte-atoms/core/utils';
-	import { Icon } from '../icon';
-	import type { renderSVG } from 'uqr';
+	import type { QRCodeBrowser } from '@qrcode-js/browser';
+	import { HtmlAtom } from '../atom';
+	import type { QRCodeProps } from './types';
 
-	let { class: klass = '', value = '' } = $props();
+	type Render = typeof QRCodeBrowser;
 
-	type Render = typeof renderSVG;
+	let {
+		class: klass = '',
+		value = '',
+		finder = {
+			round: 0.5
+		},
+		dots = {
+			scale: 0.75,
+			round: 1
+		},
+		drawFunction = 'telegram',
+		gradient = undefined,
+		logo = undefined,
+		margin = undefined,
+		qr = undefined,
+		...restProps
+	}: QRCodeProps = $props();
 
+	let canvasElement: HTMLCanvasElement | undefined = $state();
+
+	let clientWidth = $state(0);
+	let isReady = $state(false);
 	let render: Render | undefined = $state();
+	let computedColor = $state('black');
+
+	import('@qrcode-js/browser').then((result) => {
+		render = result.QRCodeBrowser;
+	});
+
+	$effect(() => {
+		if (!canvasElement) return;
+		if (!render) return;
+		if (!isReady) render;
+
+		// Get the computed color from the canvas element
+		computedColor = getComputedStyle(canvasElement).color;
+
+		const qrcode = render(canvasElement);
 
-	const code = $derived(
-		render?.(value, { blackColor: 'currentColor', whiteColor: 'transparent', border: 0 })
-	);
+		qrcode.setOptions({
+			text: value,
+			size: clientWidth,
+			color: computedColor,
+			dots,
+			finder,
+			drawFunction,
+			...(gradient && { gradient }),
+			...(margin && { margin }),
+			...(logo && { logo }),
+			...(qr && { qr })
+		});
 
-	import('uqr').then((result) => {
-		render = result.renderSVG;
+		qrcode.draw();
 	});
 </script>
 
-<Icon class={cn('aspect-square h-20', klass)}>
-	{#if code}
-		{@html code}
-	{/if}
-</Icon>
+<HtmlAtom class={[klass]} {...restProps}>
+	<div bind:clientWidth class="size-full">
+		<canvas
+			{@attach (node) => {
+				canvasElement = node;
+				isReady = true;
+			}}
+			width={clientWidth}
+			height={clientWidth}
+		></canvas>
+	</div>
+</HtmlAtom>
diff --git a/src/lib/components/qr-code/types.ts b/src/lib/components/qr-code/types.ts
new file mode 100644
index 0000000..c4a9a4e
--- /dev/null
+++ b/src/lib/components/qr-code/types.ts
@@ -0,0 +1,15 @@
+import type { QRCodeBrowser } from '@qrcode-js/browser';
+
+type QRCodeOptions = Parameters<ReturnType<typeof QRCodeBrowser>['setOptions']>[0];
+
+export type QRCodeProps = {
+	class?: string;
+	value: string;
+	finder?: QRCodeOptions['finder'];
+	dots?: QRCodeOptions['dots'];
+	drawFunction?: QRCodeOptions['drawFunction'];
+	gradient?: QRCodeOptions['gradient'];
+	logo?: QRCodeOptions['logo'];
+	margin?: QRCodeOptions['margin'];
+	qr?: QRCodeOptions['qr'];
+};

From 8eb2abbf7ebfbe15e03eb1f3f6113b5056313e93 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Sat, 22 Nov 2025 11:01:11 +0100
Subject: [PATCH 2/2] feat: add @qrcode-js/browser dependency for QR code
 functionality

---
 bun.lock     | 5 +++++
 package.json | 1 +
 2 files changed, 6 insertions(+)

diff --git a/bun.lock b/bun.lock
index 679cee6..81f6d05 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,6 +6,7 @@
       "name": "@svelte-atoms/core",
       "dependencies": {
         "@floating-ui/dom": "^1.7.0",
+        "@qrcode-js/browser": "^1.2.0",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "es-toolkit": "^1.37.2",
@@ -188,6 +189,10 @@
 
     "@publint/pack": ["@publint/pack@0.1.2", "", {}, "sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw=="],
 
+    "@qrcode-js/browser": ["@qrcode-js/browser@1.2.0", "", { "dependencies": { "@qrcode-js/core": "^1.2.0" } }, "sha512-Xea0Rp7UgN9FdocAyY8/0HhBBY7T4F8r/ww8OsoVcC1ftj1XwD9wn5n2yWCwzuYW3rNmBweJGMaYp5hTvwFscQ=="],
+
+    "@qrcode-js/core": ["@qrcode-js/core@1.2.0", "", {}, "sha512-ebwoLU3DPne43moTpApKxSnbpGa9MBsGiKObhDKSw/7nKOhc5OkfLYQA7o8OBUaiRvls1ejsmQzBYIoMMedLKQ=="],
+
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.52.4", "", { "os": "android", "cpu": "arm" }, "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA=="],
 
     "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.52.4", "", { "os": "android", "cpu": "arm64" }, "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w=="],
diff --git a/package.json b/package.json
index e7795f3..e8eb3cf 100644
--- a/package.json
+++ b/package.json
@@ -452,6 +452,7 @@
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.7.0",
+		"@qrcode-js/browser": "^1.2.0",
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
 		"es-toolkit": "^1.37.2",