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

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

@@ -1,52 +1,52 @@
-<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';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Popover',
-		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-
-		parameters: {
-			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-			layout: 'fullscreen'
-		},
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-	let open = $state(false);
-</script>
-
-<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}
-						<RenderScan duration={400} />
-					{/if} -->
-
-					<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>
-	{/snippet}
-</Story>
+<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';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Popover',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let open = $state(false);
+</script>
+
+<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}
+						<RenderScan duration={400} />
+					{/if} -->
+
+					<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>
+	{/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

@@ -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>

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';
+	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>

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/sidebar/bond.svelte.d.ts

@@ -14,12 +14,7 @@ export declare class SidebarBond<Props extends SidebarBondProps = SidebarBondPro
     constructor(state: State);
     content(props?: Record<string, unknown>): {
         'aria-expanded': boolean;
-        'data-atom': string;
-        'data-kind': string;
-    };
-    root(props?: Record<string, unknown>): {
         'aria-disabled': boolean;
-        'data-open': boolean;
         'data-atom': string;
         'data-kind': string;
     };

package/dist/components/sidebar/bond.svelte.js

@@ -9,6 +9,7 @@ export class SidebarBond extends Bond {
     content(props = {}) {
         return {
             'aria-expanded': this.state?.props?.open ?? false,
+            'aria-disabled': this.state?.props?.disabled ?? false,
             'data-atom': this.id,
             'data-kind': 'sidebar-content',
             ...props,
@@ -17,18 +18,6 @@ export class SidebarBond extends Bond {
             }
         };
     }
-    root(props = {}) {
-        return {
-            'aria-disabled': this.state?.props?.disabled ?? false,
-            'data-open': this.state?.props?.open ?? false,
-            'data-atom': this.id,
-            'data-kind': 'sidebar-root',
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
-    }
     share() {
         return SidebarBond.set(this);
     }

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

@@ -1,39 +1,39 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { SidebarBond } from './bond.svelte';
-	import type { SlideoverContentProps } from './types';
-
-	const bond = SidebarBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: SlideoverContentProps<E, B> = $props();
-
-	const contentProps = $derived({
-		...bond?.content(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="sidebar.content"
-	class={['bg-card border-border', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...contentProps}
->
-	{@render children?.({ sidebar: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { SidebarBond } from './bond.svelte';
+	import type { SidebarRootProps } from './types';
+
+	const bond = SidebarBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: SidebarRootProps<E, B> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="sidebar.content"
+	class={['bg-card border-border', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...contentProps}
+>
+	{@render children?.({ sidebar: bond })}
+</HtmlAtom>

package/dist/components/sidebar/sidebar-content.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type Base } from '../atom';
-import type { SlideoverContentProps } from './types';
+import type { SidebarRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: SlideoverContentProps<E, B>;
+    props: SidebarRootProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,68 +1,41 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
-	import type { SlideoverRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		class: klass = '',
-		disabled = false,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: SlideoverRootProps<E, B> = $props();
-
-	const bondProps = defineState<SidebarBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty('disabled', () => disabled)
-		],
-		() => ({})
-	);
-
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new SidebarBondState(() => props);
-		const bond = new SidebarBond(bondState);
-
-		return bond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="sidebar"
-	class={['border-border flex min-h-full w-full flex-1 flex-nowrap', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...rootProps}
->
-	{@render children?.({ sidebar: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { type Base } from '../atom';
+	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
+	import type { SidebarRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		factory = _factory,
+		children = undefined
+	}: SidebarRootProps<E, B> = $props();
+
+	const bondProps = defineState<SidebarBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty('disabled', () => disabled)
+		]
+	);
+
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new SidebarBondState(() => props);
+		const bond = new SidebarBond(bondState);
+
+		return bond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ sidebar: bond })}

package/dist/components/sidebar/sidebar-root.svelte.d.ts

@@ -1,8 +1,8 @@
 import { type Base } from '../atom';
 import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
-import type { SlideoverRootProps } from './types';
+import type { SidebarRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: SlideoverRootProps<E, B>;
+    props: SidebarRootProps<E, B>;
     exports: {
         getBond: () => SidebarBond<SidebarBondProps<Record<string, unknown>>, SidebarBondState<SidebarBondProps<Record<string, unknown>>>>;
     };

package/dist/components/sidebar/sidebar.stories.svelte

@@ -1,52 +1,54 @@
-<script module>
-	import { cubicOut } from 'svelte/easing';
-	import gsap from 'gsap';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Sidebar as Sidebar_ } from '.';
-	import Root from '../root/root.svelte';
-	import { on } from '../../attachments';
-	import { SidebarBond } from './bond.svelte';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Sidebar',
-		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-
-		parameters: {
-			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-			layout: 'fullscreen'
-		},
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-	let isOpen = $state(false);
-	$inspect(isOpen);
-</script>
-
-<Story name="Sidebar" args={{}}>
-	<Root class="">
-		<Sidebar_.Root class="" bind:open={isOpen}>
-			<Sidebar_.Content
-				class="flex flex-col border-r px-6 py-10 whitespace-nowrap"
-				initial={(node) => gsap.set(node, { width: isOpen ? 240 : 96 })}
-				animate={(node) =>
-					gsap.to(node, { width: isOpen ? 240 : 96, duration: 0.2, ease: cubicOut })}
-			>
-				<div>
-					<button
-						{@attach (node) => {
-							const bond = SidebarBond.get();
-							return on('click', (ev) => {
-								bond?.state.toggle?.();
-							})(node);
-						}}>Open</button
-					>
-				</div>
-			</Sidebar_.Content>
-
-			<div class="bg-foreground/2 flex-1 p-8">Hello World!</div>
-		</Sidebar_.Root>
-	</Root>
-</Story>
+<script module>
+	import { cubicOut } from 'svelte/easing';
+	import gsap from 'gsap';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Sidebar as Sidebar_ } from '.';
+	import Root from '../root/root.svelte';
+	import { on } from '../../attachments';
+	import { SidebarBond } from './bond.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Sidebar',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let isOpen = $state(false);
+	$inspect(isOpen);
+</script>
+
+<Story name="Sidebar" args={{}}>
+	<Root class="">
+		<Sidebar_.Root class="" bind:open={isOpen}>
+			<div class="flex size-full">
+				<Sidebar_.Content
+					class="flex flex-col border-r px-6 py-10 whitespace-nowrap"
+					initial={(node) => gsap.set(node, { width: isOpen ? 240 : 96 })}
+					animate={(node) =>
+						gsap.to(node, { width: isOpen ? 240 : 96, duration: 0.2, ease: cubicOut })}
+				>
+					<div>
+						<button
+							{@attach (node) => {
+								const bond = SidebarBond.get();
+								return on('click', (ev) => {
+									bond?.state.toggle?.();
+								})(node);
+							}}>Open</button
+						>
+					</div>
+				</Sidebar_.Content>
+
+				<main class="bg-foreground/2 flex-1 p-8">Hello World!</main>
+			</div>
+		</Sidebar_.Root>
+	</Root>
+</Story>

package/dist/components/sidebar/types.d.ts

@@ -6,25 +6,25 @@ import type { Base, HtmlAtomProps } from '../atom';
 /**
  * Extend this interface to add custom slideover root properties in your application.
  */
-export interface SlideoverRootExtendProps {
+export interface SidebarRootExtendProps {
 }
 /**
  * Extend this interface to add custom slideover content properties in your application.
  */
-export interface SlideoverContentExtendProps {
+export interface SidebarContentExtendProps {
 }
-export interface SlideoverRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+export interface SidebarRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
     children?: Snippet<[{
         sidebar?: SidebarBond;
     }]>;
-}>, SlideoverRootExtendProps {
+}>, SidebarRootExtendProps {
     open?: boolean;
     disabled?: boolean;
     factory?: Factory<SidebarBond>;
 }
-export interface SlideoverContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+export interface SidebarContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
     children?: Snippet<[{
         sidebar?: SidebarBond<any>;
     }]>;
-}>, SlideoverContentExtendProps {
+}>, SidebarContentExtendProps {
 }