@r2digisolutions/components 0.17.11 → 0.18.0

package/dist/components/atoms/Barcode/Barcode.svelte

@@ -1,75 +1,51 @@
 <script lang="ts">
-	/**
-	 * Lightweight visual barcode (Code 39–style pattern from the value string).
-	 * For real scanning/printing use a dedicated encoder; this is UI-friendly.
-	 */
+	import { encodeBarcode, type BarcodeSymbology } from '../../../utils/barcode.js';
+
 	interface BarcodeProps {
 		value: string;
 		height?: number;
 		showValue?: boolean;
+		/** Force a symbology. `auto` picks EAN/UPC when the value is a valid GTIN. */
+		format?: 'auto' | BarcodeSymbology;
 		class?: string;
 	}
 
 	const {
 		value,
-		height = 56,
+		height = 72,
 		showValue = true,
+		format = 'auto',
 		class: className = ''
 	}: BarcodeProps = $props();
 
-	/** Map chars to bar/space widths (narrow=1, wide=2) — simplified Code 39 subset */
-	const WIDTHS: Record<string, number[]> = {
-		'0': [1, 1, 1, 2, 2, 1, 2, 1, 1],
-		'1': [2, 1, 1, 2, 1, 1, 1, 1, 2],
-		'2': [1, 1, 2, 2, 1, 1, 1, 1, 2],
-		'3': [2, 1, 2, 2, 1, 1, 1, 1, 1],
-		'4': [1, 1, 1, 2, 2, 1, 1, 1, 2],
-		'5': [2, 1, 1, 2, 2, 1, 1, 1, 1],
-		'6': [1, 1, 2, 2, 2, 1, 1, 1, 1],
-		'7': [1, 1, 1, 2, 1, 1, 2, 1, 2],
-		'8': [2, 1, 1, 2, 1, 1, 2, 1, 1],
-		'9': [1, 1, 2, 2, 1, 1, 2, 1, 1],
-		A: [2, 1, 1, 1, 1, 2, 1, 1, 2],
-		B: [1, 1, 2, 1, 1, 2, 1, 1, 2],
-		C: [2, 1, 2, 1, 1, 2, 1, 1, 1],
-		D: [1, 1, 1, 1, 2, 2, 1, 1, 2],
-		E: [2, 1, 1, 1, 2, 2, 1, 1, 1],
-		F: [1, 1, 2, 1, 2, 2, 1, 1, 1],
-		'*': [1, 2, 1, 1, 2, 1, 2, 1, 1]
-	};
-
-	const bars = $derived.by(() => {
-		const raw = value.toUpperCase().replace(/[^0-9A-Z]/g, '') || '0';
-		const chars = ['*', ...raw.split(''), '*'];
-		const out: { w: number; black: boolean }[] = [];
-		for (const ch of chars) {
-			const pattern = WIDTHS[ch] ?? WIDTHS['0'];
-			pattern.forEach((w, i) => out.push({ w, black: i % 2 === 0 }));
-			out.push({ w: 1, black: false }); // gap
-		}
-		return out;
-	});
-
-	const totalUnits = $derived(bars.reduce((s, b) => s + b.w, 0));
+	const encoded = $derived(encodeBarcode(value, format));
+	const label = $derived(encoded?.text || value);
 </script>
 
-<figure class={['inline-flex flex-col items-center gap-1.5', className]}>
-	<svg
-		role="img"
-		aria-label={`Barcode ${value}`}
-		height={height}
-		viewBox={`0 0 ${totalUnits} ${height}`}
-		class="w-full max-w-xs text-primary"
-		preserveAspectRatio="none"
-	>
-		{#each bars as bar, i}
-			{@const x = bars.slice(0, i).reduce((s, b) => s + b.w, 0)}
-			{#if bar.black}
-				<rect x={x} y="0" width={bar.w} height={height} fill="currentColor" />
-			{/if}
-		{/each}
-	</svg>
-	{#if showValue}
-		<figcaption class="font-mono text-[11px] tracking-widest text-secondary">{value}</figcaption>
+<figure class={['max-w-sm gap-2 inline-flex w-full flex-col items-center', className]}>
+	{#if encoded}
+		<div class="rounded-lg bg-white px-2 py-3 w-full">
+			<svg
+				role="img"
+				aria-label={`Barcode ${label}`}
+				{height}
+				viewBox="0 0 {encoded.modules} {height}"
+				class="text-black block w-full"
+				preserveAspectRatio="none"
+			>
+				<title>{label}</title>
+				<rect width={encoded.modules} {height} fill="#fff" />
+				{#each encoded.runs as run (run.x)}
+					{#if run.black}
+						<rect x={run.x} y="0" width={run.w} {height} fill="#000" />
+					{/if}
+				{/each}
+			</svg>
+		</div>
+		{#if showValue}
+			<figcaption class="font-mono tracking-widest text-secondary text-[11px]">{label}</figcaption>
+		{/if}
+	{:else}
+		<figcaption class="font-mono tracking-widest text-secondary text-[11px]">{value}</figcaption>
 	{/if}
 </figure>

package/dist/components/atoms/Barcode/Barcode.svelte.d.ts

@@ -1,11 +1,10 @@
-/**
- * Lightweight visual barcode (Code 39–style pattern from the value string).
- * For real scanning/printing use a dedicated encoder; this is UI-friendly.
- */
+import { type BarcodeSymbology } from '../../../utils/barcode.js';
 interface BarcodeProps {
     value: string;
     height?: number;
     showValue?: boolean;
+    /** Force a symbology. `auto` picks EAN/UPC when the value is a valid GTIN. */
+    format?: 'auto' | BarcodeSymbology;
     class?: string;
 }
 declare const Barcode: import("svelte").Component<BarcodeProps, {}, "">;

package/dist/components/atoms/Barcode/BarcodeStory.svelte

@@ -2,4 +2,17 @@
 	import Barcode from './Barcode.svelte';
 </script>
 
-<Barcode value="R2DIGI2026" />
+<div class="gap-8 bg-surface p-6 flex flex-col">
+	<div class="space-y-2">
+		<p class="text-xs font-medium text-muted">Code 128 (SKU)</p>
+		<Barcode value="DEMO-SKU-001" />
+	</div>
+	<div class="space-y-2">
+		<p class="text-xs font-medium text-muted">EAN-13</p>
+		<Barcode value="4006381333931" />
+	</div>
+	<div class="space-y-2">
+		<p class="text-xs font-medium text-muted">Alphanumeric</p>
+		<Barcode value="R2DIGI2026" />
+	</div>
+</div>

package/dist/components/molecules/InfiniteScroll/InfiniteScroll.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        example?: "error" | "ended" | "manual" | "both" | "grid" | "list" | "chat" | "feed";
+        example?: "error" | "ended" | "manual" | "both" | "grid" | "feed" | "list" | "chat";
         mode?: import("./InfiniteScroll.svelte.ts").InfiniteScrollMode;
         rootMargin?: string;
         pageSize?: number;

package/dist/components/molecules/NewsletterSignup/NewsletterSignup.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        example?: "error" | "success" | "card" | "stacked" | "inline" | "minimal" | "banner" | "consent";
+        example?: "error" | "success" | "banner" | "card" | "stacked" | "inline" | "minimal" | "consent";
         title?: string;
         description?: string;
         variant?: import("./NewsletterSignup.svelte.ts").NewsletterVariant;

package/dist/utils/barcode.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Standards-compliant 1D barcode encoder (Code 128, EAN-13, EAN-8, UPC-A).
+ * Generates module runs suitable for SVG rendering. No external deps.
+ */
+export type BarcodeSymbology = 'code128' | 'ean13' | 'ean8' | 'upc_a';
+export type BarcodeRun = {
+    x: number;
+    w: number;
+    black: boolean;
+};
+export type EncodedBarcode = {
+    format: BarcodeSymbology;
+    text: string;
+    runs: BarcodeRun[];
+    modules: number;
+};
+/** GS1 check digit for a payload without the check (odd positions from the right × 3). */
+export declare function gs1CheckDigit(payload: string): number;
+export declare function isValidGs1(digits: string): boolean;
+export declare function encodeBarcode(value: string, format?: 'auto' | BarcodeSymbology): EncodedBarcode | null;

package/dist/utils/barcode.js

@@ -0,0 +1,273 @@
+/**
+ * Standards-compliant 1D barcode encoder (Code 128, EAN-13, EAN-8, UPC-A).
+ * Generates module runs suitable for SVG rendering. No external deps.
+ */
+const QUIET = 10;
+/** Code 128 patterns 0–106 (11 modules). Stop is 106 + terminal bar `11`. */
+const CODE128 = [
+    '11011001100',
+    '11001101100',
+    '11001100110',
+    '10010011000',
+    '10010001100',
+    '10001001100',
+    '10011001000',
+    '10011000100',
+    '10001100100',
+    '11001001000',
+    '11001000100',
+    '11000100100',
+    '10110011100',
+    '10011011100',
+    '10011001110',
+    '10111001100',
+    '10011101100',
+    '10011100110',
+    '11001110010',
+    '11001011100',
+    '11001001110',
+    '11011100100',
+    '11001110100',
+    '11101101110',
+    '11101001100',
+    '11100101100',
+    '11100100110',
+    '11101100100',
+    '11100110100',
+    '11100110010',
+    '11011011000',
+    '11011000110',
+    '11000110110',
+    '10100011000',
+    '10001011000',
+    '10001000110',
+    '10110001000',
+    '10001101000',
+    '10001100010',
+    '11010001000',
+    '11000101000',
+    '11000100010',
+    '10110111000',
+    '10110001110',
+    '10001101110',
+    '10111011000',
+    '10111000110',
+    '10001110110',
+    '11101110110',
+    '11010001110',
+    '11000101110',
+    '11011101000',
+    '11011100010',
+    '11011101110',
+    '11101011000',
+    '11101000110',
+    '11100010110',
+    '11101101000',
+    '11101100010',
+    '11100011010',
+    '11101111010',
+    '11001000010',
+    '11110001010',
+    '10100110000',
+    '10100001100',
+    '10010110000',
+    '10010000110',
+    '10000101100',
+    '10000100110',
+    '10110010000',
+    '10110000100',
+    '10011010000',
+    '10011000010',
+    '10000110100',
+    '10000110010',
+    '11000010010',
+    '11001010000',
+    '11110111010',
+    '11000010100',
+    '10001111010',
+    '10100111100',
+    '10010111100',
+    '10010011110',
+    '10111100100',
+    '10011110100',
+    '10011110010',
+    '11110100100',
+    '11110010100',
+    '11110010010',
+    '11011011110',
+    '11011110110',
+    '11110110110',
+    '10101111000',
+    '10100011110',
+    '10001011110',
+    '10111101000',
+    '10111100010',
+    '11110101000',
+    '11110100010',
+    '10111011110',
+    '10111101110',
+    '11101011110',
+    '11110101110',
+    '11010000100',
+    '11010010000',
+    '11010011100',
+    '11000111010'
+];
+const EAN_L = [
+    '0001101',
+    '0011001',
+    '0010011',
+    '0111101',
+    '0100011',
+    '0110001',
+    '0101111',
+    '0111011',
+    '0110111',
+    '0001011'
+];
+const EAN_G = [
+    '0100111',
+    '0110011',
+    '0011011',
+    '0100001',
+    '0011101',
+    '0111001',
+    '0000101',
+    '0010001',
+    '0001001',
+    '0010111'
+];
+const EAN_R = [
+    '1110010',
+    '1100110',
+    '1101100',
+    '1000010',
+    '1011100',
+    '1001110',
+    '1010000',
+    '1000100',
+    '1001000',
+    '1110100'
+];
+/** First-digit parity for the left half of EAN-13 (L/G). */
+const EAN13_PARITY = [
+    'LLLLLL',
+    'LLGLGG',
+    'LLGGLG',
+    'LLGGGL',
+    'LGLLGG',
+    'LGGLLG',
+    'LGGGLL',
+    'LGLGLG',
+    'LGLGGL',
+    'LGGLGL'
+];
+function bitsToRuns(bits) {
+    const runs = [];
+    for (const ch of bits) {
+        const black = ch === '1';
+        const last = runs.at(-1);
+        if (last && last.black === black)
+            last.w += 1;
+        else
+            runs.push({ x: last ? last.x + last.w : 0, w: 1, black });
+    }
+    return runs;
+}
+function withQuiet(bits, left = QUIET, right = QUIET) {
+    return `${'0'.repeat(left)}${bits}${'0'.repeat(right)}`;
+}
+function encoded(format, text, bits) {
+    const padded = withQuiet(bits);
+    return { format, text, runs: bitsToRuns(padded), modules: padded.length };
+}
+/** GS1 check digit for a payload without the check (odd positions from the right × 3). */
+export function gs1CheckDigit(payload) {
+    let sum = 0;
+    for (let i = 0; i < payload.length; i++) {
+        const n = Number(payload[payload.length - 1 - i]);
+        sum += n * (i % 2 === 0 ? 3 : 1);
+    }
+    return (10 - (sum % 10)) % 10;
+}
+export function isValidGs1(digits) {
+    if (!/^\d{8}$|^\d{12}$|^\d{13}$/.test(digits))
+        return false;
+    return gs1CheckDigit(digits.slice(0, -1)) === Number(digits.at(-1));
+}
+function encodeCode128(text) {
+    if (!text)
+        return null;
+    const codes = [104];
+    for (const ch of text) {
+        const code = ch.charCodeAt(0) - 32;
+        if (code < 0 || code > 94)
+            return null;
+        codes.push(code);
+    }
+    let sum = codes[0];
+    for (let i = 1; i < codes.length; i++)
+        sum += codes[i] * i;
+    codes.push(sum % 103);
+    let bits = '';
+    for (const code of codes)
+        bits += CODE128[code];
+    bits += `${CODE128[106]}11`;
+    return encoded('code128', text, bits);
+}
+function encodeEan13(digits) {
+    if (!/^\d{13}$/.test(digits) || !isValidGs1(digits))
+        return null;
+    const first = Number(digits[0]);
+    const parity = EAN13_PARITY[first];
+    let bits = '101';
+    for (let i = 0; i < 6; i++) {
+        const d = Number(digits[i + 1]);
+        bits += parity[i] === 'G' ? EAN_G[d] : EAN_L[d];
+    }
+    bits += '01010';
+    for (let i = 7; i < 13; i++)
+        bits += EAN_R[Number(digits[i])];
+    bits += '101';
+    return encoded('ean13', digits, bits);
+}
+function encodeEan8(digits) {
+    if (!/^\d{8}$/.test(digits) || !isValidGs1(digits))
+        return null;
+    let bits = '101';
+    for (let i = 0; i < 4; i++)
+        bits += EAN_L[Number(digits[i])];
+    bits += '01010';
+    for (let i = 4; i < 8; i++)
+        bits += EAN_R[Number(digits[i])];
+    bits += '101';
+    return encoded('ean8', digits, bits);
+}
+function encodeUpcA(digits) {
+    if (!/^\d{12}$/.test(digits) || !isValidGs1(digits))
+        return null;
+    const ean = encodeEan13(`0${digits}`);
+    if (!ean)
+        return null;
+    return { ...ean, format: 'upc_a', text: digits };
+}
+export function encodeBarcode(value, format = 'auto') {
+    const text = value.trim();
+    if (!text)
+        return null;
+    if (format === 'code128')
+        return encodeCode128(text);
+    if (format === 'ean13')
+        return encodeEan13(text);
+    if (format === 'ean8')
+        return encodeEan8(text);
+    if (format === 'upc_a')
+        return encodeUpcA(text);
+    if (/^\d{13}$/.test(text) && isValidGs1(text))
+        return encodeEan13(text);
+    if (/^\d{12}$/.test(text) && isValidGs1(text))
+        return encodeUpcA(text);
+    if (/^\d{8}$/.test(text) && isValidGs1(text))
+        return encodeEan8(text);
+    return encodeCode128(text);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.17.11",
+	"version": "0.18.0",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",
@@ -66,8 +66,8 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
-		"@lucide/svelte": "^1.39.0",
-		"@playwright/test": "^1.62.1",
+		"@lucide/svelte": "^1.44.0",
+		"@playwright/test": "^1.63.0",
 		"@storybook/addon-a11y": "^10.6.0",
 		"@storybook/addon-docs": "^10.6.0",
 		"@storybook/addon-svelte-csf": "^5.1.3",
@@ -80,14 +80,14 @@
 		"@sveltejs/vite-plugin-svelte": "^7.3.0",
 		"@tailwindcss/vite": "^4.3.3",
 		"@types/node": "^26.4.1",
-		"@vitest/browser-playwright": "^4.1.11",
+		"@vitest/browser-playwright": "^5.0.0",
 		"bumpp": "~12.3.0",
-		"eslint": "^10.9.1",
+		"eslint": "^10.10.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.23.0",
 		"globals": "^17.12.0",
 		"mdsvex": "^0.12.8",
-		"playwright": "^1.62.1",
+		"playwright": "^1.63.0",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
 		"prettier-plugin-tailwindcss": "^0.8.1",
@@ -97,10 +97,10 @@
 		"svelte-check": "^4.7.6",
 		"tailwindcss": "^4.3.3",
 		"typescript": "6.0.3",
-		"typescript-eslint": "^8.69.0",
+		"typescript-eslint": "^8.70.0",
 		"vite": "^8.2.2",
-		"vitest": "^4.1.11",
-		"vitest-browser-svelte": "^3.0.0"
+		"vitest": "^5.0.0",
+		"vitest-browser-svelte": "^3.1.0"
 	},
 	"keywords": [
 		"svelte",