@svelte-atoms/core 1.0.0-alpha.28 → 1.0.0-alpha.30

package/dist/components/popover/popover-arrow.svelte

@@ -1,111 +1,111 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { animate as motion } from 'motion';
-	import { HtmlAtom, type Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-	import type { PopoverArrowProps } from './types';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const position = $derived(bond.position);
-	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
-	const isReady = $derived(!!middlewareArrowData);
-	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
-
-	const arrowProps = $derived({
-		...bond.arrow(),
-		...restProps
-	});
-
-	// Rotation based on placement side
-	const rotation = $derived.by(() => {
-		switch (side) {
-			case 'top':
-				return 180;
-			case 'bottom':
-				return 0;
-			case 'left':
-				return 90;
-			case 'right':
-				return -90;
-			default:
-				return 0;
-		}
-	});
-
-	function _animate(node: HTMLElement) {
-		if (!middlewareArrowData) {
-			return;
-		}
-
-		const { x, y } = middlewareArrowData;
-
-		const isMainAxis = side === 'top' || side === 'bottom';
-
-		const crossAxisStyle = isMainAxis
-			? {
-					left: 0
-				}
-			: {
-					top: 0
-				};
-
-		motion(
-			node,
-			{
-				x: x ?? 0,
-				y: y ?? 0,
-				opacity: 1,
-				...crossAxisStyle
-			},
-			{ duration: 0 }
-		);
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="popover.arrow"
-	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	style="{side}: 100%;"
-	{...arrowProps}
->
-	{#if children}
-		{@render children({ popover: bond })}
-	{:else}
-		<svg
-			width="12"
-			height="12"
-			viewBox="0 0 12 12"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			style="transform: rotate({rotation}deg);"
-		>
-			<path d="M0 12L6 6L12 12H0Z" fill="currentColor" stroke="none" />
-		</svg>
-	{/if}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { animate as motion } from 'motion';
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverArrowProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const position = $derived(bond.position);
+	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
+	const isReady = $derived(!!middlewareArrowData);
+	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
+
+	const arrowProps = $derived({
+		...bond.arrow(),
+		...restProps
+	});
+
+	// Rotation based on placement side
+	const rotation = $derived.by(() => {
+		switch (side) {
+			case 'top':
+				return 180;
+			case 'bottom':
+				return 0;
+			case 'left':
+				return 90;
+			case 'right':
+				return -90;
+			default:
+				return 0;
+		}
+	});
+
+	function _animate(node: HTMLElement) {
+		if (!middlewareArrowData) {
+			return;
+		}
+
+		const { x, y } = middlewareArrowData;
+
+		const isMainAxis = side === 'top' || side === 'bottom';
+
+		const crossAxisStyle = isMainAxis
+			? {
+					left: 0
+				}
+			: {
+					top: 0
+				};
+
+		motion(
+			node,
+			{
+				x: x ?? 0,
+				y: y ?? 0,
+				opacity: 1,
+				...crossAxisStyle
+			},
+			{ duration: 0 }
+		);
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="popover.arrow"
+	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	style="{side}: 100%;"
+	{...arrowProps}
+>
+	{#if children}
+		{@render children({ popover: bond })}
+	{:else}
+		<svg
+			width="16"
+			height="8"
+			viewBox="0 0 16 8"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			style="transform: rotate({rotation}deg);"
+		>
+			<path d="M0 8C2 8 6 4 8 0C10 4 14 8 16 8H0Z" fill="currentColor" />
+		</svg>
+	{/if}
+</HtmlAtom>

package/dist/components/popover/popover-content.svelte

@@ -99,9 +99,6 @@
 		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
 		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
 
-		const _x = openAsNumber * dx;
-		const _y = openAsNumber * dy;
-
 		const getTransformOrigin = () => {
 			switch (placement) {
 				case 'top':
@@ -133,8 +130,8 @@
 			node,
 			{
 				opacity: openAsNumber,
-				y: _y + dy * (!isOpen ? -1 : 0) * (arrowClientHeight + yOffset),
-				x: _x + dx * (!isOpen ? -1 : 0) * (arrowClientWidth + xOffset),
+				y: dy * (!isOpen ? -1 : 0) * (arrowClientHeight + yOffset),
+				x: dx * (!isOpen ? -1 : 0) * (arrowClientWidth + xOffset),
 				scaleY: dy ? (isOpen ? [from, 1] : [1, 0.8]) : undefined,
 				scaleX: dx ? (isOpen ? [from, 1] : [1, 0.8]) : undefined,
 				transformOrigin

package/dist/components/popover/popover-indicator.svelte

@@ -1,43 +1,44 @@
-<script lang="ts">
-	import { animate as motion } from 'motion';
-	import { Icon } from '../icon';
-	import IconArrowDown from '../../icons/icon-arrow-down.svelte';
-	import { HtmlAtom } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-
-	const bond = PopoverBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined
-	} = $props();
-
-	const isOpen = $derived(bond?.state.props.open ?? false);
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="popover.indicator"
-	class={['border-border flex items-center justify-center', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
->
-	{#if children}
-		{@render children?.({ popover: bond })}
-	{:else}
-		<Icon
-			src={IconArrowDown}
-			animate={(node) => motion(node, { rotate: 180 * +isOpen }, { duration: 0.2 })}
-		/>
-	{/if}
-</HtmlAtom>
+<script lang="ts">
+	import { animate as motion } from 'motion';
+	import { Icon } from '../icon';
+	import IconArrowDown from '../../icons/icon-arrow-down.svelte';
+	import { HtmlAtom } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+
+	const bond = PopoverBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined
+	} = $props();
+
+	const isOpen = $derived(bond?.state.props.open ?? false);
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="popover.indicator"
+	class={['border-border flex h-5 items-center justify-center', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+>
+	{#if children}
+		{@render children?.({ popover: bond })}
+	{:else}
+		<Icon
+			class="h-full"
+			src={IconArrowDown}
+			animate={(node) => motion(node, { rotate: 180 * +isOpen }, { duration: 0.2 })}
+		/>
+	{/if}
+</HtmlAtom>

package/dist/components/popover/popover-root.svelte

@@ -8,7 +8,7 @@
 		disabled = false,
 		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
 		placement = 'bottom-start',
-		offset = 0,
+		offset = 1,
 		portal = undefined,
 		extend = {},
 		factory = _factory,

package/dist/components/popover/popover.stories.svelte

@@ -1,7 +1,6 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { Popover as Popover_ } from '.';
-	import Root from '../root/root.svelte';
 	import { clickoutPopover } from './attachments.svelte';
 	import { Button } from '../button';
 
@@ -24,29 +23,27 @@
 
 <Story name="Popover" args={{}}>
 	{#snippet children(args)}
-		<Root class="overflow-clip p-4">
-			<Popover_.Root bind:open offset={0} {...args}>
-				{#snippet children({ popover })}
-					<!-- {#if dev}
+		<Popover_.Root bind:open offset={0} {...args}>
+			{#snippet children({ popover })}
+				<!-- {#if dev}
 						<RenderScan duration={400} />
 					{/if} -->
 
-					<Popover_.Trigger base={Button} class="items-center gap-4">
-						<div>Open Popover</div>
-						<Popover_.Indicator />
-					</Popover_.Trigger>
+				<Popover_.Trigger base={Button} class="items-center gap-4">
+					<div>Open Popover</div>
+					<Popover_.Indicator />
+				</Popover_.Trigger>
 
-					<Popover_.Content
-						{@attach clickoutPopover((ev, atom) => {
-							atom.state.close();
-						})}
-						class="bg-card"
-					>
-						<div>Hello World !</div>
-						<Popover_.Arrow />
-					</Popover_.Content>
-				{/snippet}
-			</Popover_.Root>
-		</Root>
+				<Popover_.Content
+					{@attach clickoutPopover((ev, atom) => {
+						atom.state.close();
+					})}
+					class="bg-card"
+				>
+					<div>Hello World !</div>
+					<Popover_.Arrow />
+				</Popover_.Content>
+			{/snippet}
+		</Popover_.Root>
 	{/snippet}
 </Story>

package/dist/components/qr-code/index.d.ts

@@ -1 +1,2 @@
 export { default as QRCode } from './qr-code.svelte';
+export * from './types';

package/dist/components/qr-code/index.js

@@ -1 +1,2 @@
 export { default as QRCode } from './qr-code.svelte';
+export * from './types';

package/dist/components/qr-code/qr-code.stories.svelte

@@ -1,7 +1,6 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import QrCodeComponent from './qr-code.svelte';
-	import { Root } from '../root';
 
 	const { Story } = defineMeta({
 		title: 'Atoms/QR Code'
@@ -12,13 +11,8 @@
 </script>
 
 <Story name="QR Code">
-	{#snippet children(args)}
-		<Root>
-			{#snippet children({})}
-				<div class="flex h-full w-full items-center justify-center">
-					<QrCodeComponent value="Hello World" />
-				</div>
-			{/snippet}
-		</Root>
-	{/snippet}
+	<QrCodeComponent
+		class="text-primary-foreground bg-primary size-64 rounded-2xl p-1"
+		value="Hello World 123"
+	/>
 </Story>

package/dist/components/qr-code/qr-code.svelte

@@ -1,25 +1,75 @@
-<script lang="ts">
-	import { cn } from '../../utils';
-	import { Icon } from '../icon';
-	import type { renderSVG } from 'uqr';
-
-	let { class: klass = '', value = '' } = $props();
-
-	type Render = typeof renderSVG;
-
-	let render: Render | undefined = $state();
-
-	const code = $derived(
-		render?.(value, { blackColor: 'currentColor', whiteColor: 'transparent', border: 0 })
-	);
-
-	import('uqr').then((result) => {
-		render = result.renderSVG;
-	});
-</script>
-
-<Icon class={cn('aspect-square h-20', klass)}>
-	{#if code}
-		{@html code}
-	{/if}
-</Icon>
+<script lang="ts">
+	import type { QRCodeBrowser } from '@qrcode-js/browser';
+	import { HtmlAtom } from '../atom';
+	import type { QRCodeProps } from './types';
+
+	type Render = typeof QRCodeBrowser;
+
+	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);
+
+		qrcode.setOptions({
+			text: value,
+			size: clientWidth,
+			color: computedColor,
+			dots,
+			finder,
+			drawFunction,
+			...(gradient && { gradient }),
+			...(margin && { margin }),
+			...(logo && { logo }),
+			...(qr && { qr })
+		});
+
+		qrcode.draw();
+	});
+</script>
+
+<HtmlAtom class={[klass]} {...restProps}>
+	<div bind:clientWidth class="size-full">
+		<canvas
+			{@attach (node) => {
+				canvasElement = node;
+				isReady = true;
+			}}
+			width={clientWidth}
+			height={clientWidth}
+		></canvas>
+	</div>
+</HtmlAtom>

package/dist/components/qr-code/qr-code.svelte.d.ts

@@ -1,6 +1,4 @@
-declare const QrCode: import("svelte").Component<{
-    class?: string;
-    value?: string;
-}, {}, "">;
+import type { QRCodeProps } from './types';
+declare const QrCode: import("svelte").Component<QRCodeProps, {}, "">;
 type QrCode = ReturnType<typeof QrCode>;
 export default QrCode;

package/dist/components/qr-code/types.d.ts

@@ -0,0 +1,14 @@
+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'];
+};
+export {};

package/dist/components/qr-code/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/radio/radio-group.stories.svelte

@@ -1,50 +1,41 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { default as RadioComponent } from './radio.svelte';
-	import { default as RadioGroupComponent } from './radio-group.svelte';
-	import { Root } from '../root';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Radio'
-	});
-</script>
-
-<script>
-	let value = $state('t1');
-</script>
-
-<Story name="Group">
-	{#snippet children({ args })}
-		<Root>
-			{#snippet children({})}
-				<div class="flex h-full w-full flex-col items-center justify-center">
-					<RadioGroupComponent class="gap-4" name="choice" bind:value>
-						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8" value="t1" />
-							<div>Test 1</div>
-						</label>
-
-						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8" value="t2" />
-							<div>Test 2</div>
-						</label>
-
-						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8" value="t3" />
-							<div>Test 3</div>
-						</label>
-
-						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8" value="t4" />
-							<div>Test 4</div>
-						</label>
-					</RadioGroupComponent>
-
-					<div class="mt-8">
-						Selected value: <strong>{value}</strong>
-					</div>
-				</div>
-			{/snippet}
-		</Root>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { default as RadioComponent } from './radio.svelte';
+	import { default as RadioGroupComponent } from './radio-group.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Radio'
+	});
+</script>
+
+<script>
+	let value = $state('t1');
+</script>
+
+<Story name="Group">
+	<RadioGroupComponent class="gap-4" name="choice" bind:value>
+		<label class="flex items-center gap-2">
+			<RadioComponent class="size-8" value="t1" />
+			<div>Test 1</div>
+		</label>
+
+		<label class="flex items-center gap-2">
+			<RadioComponent class="size-8" value="t2" />
+			<div>Test 2</div>
+		</label>
+
+		<label class="flex items-center gap-2">
+			<RadioComponent class="size-8" value="t3" />
+			<div>Test 3</div>
+		</label>
+
+		<label class="flex items-center gap-2">
+			<RadioComponent class="size-8" value="t4" />
+			<div>Test 4</div>
+		</label>
+	</RadioGroupComponent>
+
+	<div class="mt-8">
+		Selected value: <strong>{value}</strong>
+	</div>
+</Story>