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

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

@@ -1,49 +1,48 @@
-<script lang="ts">
-	import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import type { PopoverRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 0,
-		portal = undefined,
-		extend = {},
-		factory = _factory,
-		children = undefined
-	}: PopoverRootProps = $props();
-
-	const bondProps = defineState<PopoverStateProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty('disabled', () => disabled),
-			defineProperty('placement', () => placement),
-			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? []),
-			defineProperty('portal', () => portal)
-		],
-		() => ({ extend })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const popoverState = new PopoverState(() => props);
-		const popoverBond = new PopoverBond(popoverState);
-
-		return popoverBond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ popover: bond })}
+<script lang="ts">
+	import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
+	import { defineProperty, defineState } from '../../utils';
+	import type { PopoverRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 0,
+		portal = undefined,
+		extend = {},
+		factory = _factory,
+		children = undefined
+	}: PopoverRootProps = $props();
+
+	const bondProps = defineState<PopoverStateProps>([
+		defineProperty(
+			'open',
+			() => open,
+			(v) => {
+				open = v;
+			}
+		),
+		defineProperty('disabled', () => disabled),
+		defineProperty('placement', () => placement),
+		defineProperty('offset', () => offset),
+		defineProperty('placements', () => placements ?? []),
+		defineProperty('portal', () => portal),
+		defineProperty('extend', () => extend)
+	]);
+
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const popoverState = new PopoverState(() => props);
+		const popoverBond = new PopoverBond(popoverState);
+
+		return popoverBond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ popover: bond })}

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

@@ -1,67 +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 { animate } from 'motion';
-	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"
-						animate={function (this, node) {
-							const isOpen = this.isOpen;
-
-							const m = animate(
-								node,
-								{
-									y: (isOpen ? 0 : -1) * 8,
-									opacity: +isOpen
-								},
-								{
-									duration: 0.1
-								}
-							);
-						}}
-					>
-						<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/portal/portal-root.svelte

@@ -1,83 +1,83 @@
-<script module lang="ts">
-	export type { PortalOuterProps } from './types';
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { PortalOuterProps } from './types';
-	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
-	import { RootBond } from '../root';
-	import type { RootPortals } from '../root/root.svelte';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
-	import { defineProperty, defineState } from '../../utils';
-
-	type Element = ElementType<E>;
-
-	let {
-		class: klass = '',
-		id,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PortalOuterProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const rootBond = RootBond.get();
-	const portalsBond = PortalsBond.get();
-
-	const bondProps = defineState<PortalStateProps>([defineProperty('id', () => id)]);
-	const bond = factory(bondProps).share() as PortalBond;
-
-	portalsBond?.state.set(id, bond);
-
-	$effect(() => {
-		if (rootBond) {
-			rootBond.state.setPortal(id, bond);
-		}
-
-		return () => {
-			portalsBond?.state.delete(id);
-			bond.destroy();
-		};
-	});
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const portalState = new PortalState(() => props);
-		return new PortalBond(portalState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="portal"
-	class={['border-border pointer-events-none', '$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?.()}
-</HtmlAtom>
+<script module lang="ts">
+	export type { PortalOuterProps } from './types';
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PortalOuterProps } from './types';
+	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
+	import { RootBond } from '../root';
+	import type { RootPortals } from '../root/root.svelte';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+	import { defineProperty, defineState } from '../../utils';
+
+	type Element = ElementType<E>;
+
+	let {
+		class: klass = '',
+		id,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PortalOuterProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const rootBond = RootBond.get();
+	const portalsBond = PortalsBond.get();
+
+	const bondProps = defineState<PortalStateProps>([defineProperty('id', () => id)]);
+	const bond = factory(bondProps).share() as PortalBond;
+
+	portalsBond?.state.set(id, bond);
+
+	$effect(() => {
+		if (rootBond) {
+			rootBond.state.setPortal(id, bond);
+		}
+
+		return () => {
+			portalsBond?.state.delete(id);
+			bond.destroy();
+		};
+	});
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const portalState = new PortalState(() => props);
+		return new PortalBond(portalState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="portal"
+	class={['border-border pointer-events-none', '$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?.()}
+</HtmlAtom>

package/dist/components/portal/teleport.svelte

@@ -1,50 +1,50 @@
-<script module lang="ts">
-	export type { TeleportProps } from './types';
-</script>
-
-<script lang="ts" generics="E extends HtmlElementTagName = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { TeleportProps } from './types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-	import { PortalsBond } from './portals';
-	import { RootBond } from '../root/bond.svelte';
-	import { port } from './utils';
-	import type { PortalBond } from '.';
-
-	type Element = HtmlElementType<E>;
-
-	let { portal, as, base, children, ...restProps }: TeleportProps<E, B> & HTMLAttributes<Element> =
-		$props();
-
-	const portalsBond = PortalsBond.get();
-	const rootBond = RootBond.get();
-
-	const portalBond = $derived.by(() => {
-		if (typeof portal === 'string') {
-			return portalsBond?.state?.get(portal!) ?? rootBond?.state?.getPortal(portal!);
-		}
-
-		return portal;
-	});
-
-	const targetElement = $derived(portalBond?.targetElement);
-
-	function _port(node: HTMLElement) {
-		const hidden = node.hidden;
-
-		node.hidden = true;
-
-		const unport = port(node, targetElement);
-
-		node.hidden = hidden;
-
-		return unport;
-	}
-</script>
-
-{#if targetElement && portal}
-	<HtmlAtom {@attach _port} as={as as E} {base} {...restProps}>
-		{@render children?.({ portal: portalBond })}
-	</HtmlAtom>
-{/if}
+<script module lang="ts">
+	export type { TeleportProps } from './types';
+</script>
+
+<script lang="ts" generics="E extends HtmlElementTagName = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { TeleportProps } from './types';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	import { PortalsBond } from './portals';
+	import { RootBond } from '../root/bond.svelte';
+	import { port } from './utils';
+	import type { PortalBond } from '.';
+
+	type Element = HtmlElementType<E>;
+
+	let { portal, as, base, children, ...restProps }: TeleportProps<E, B> & HTMLAttributes<Element> =
+		$props();
+
+	const portalsBond = PortalsBond.get();
+	const rootBond = RootBond.get();
+
+	const portalBond = $derived.by(() => {
+		if (typeof portal === 'string') {
+			return portalsBond?.state?.get(portal!) ?? rootBond?.state?.getPortal(portal!);
+		}
+
+		return portal;
+	});
+
+	const targetElement = $derived(portalBond?.targetElement);
+
+	function _port(node: HTMLElement) {
+		const hidden = node.hidden;
+
+		node.hidden = true;
+
+		const unport = port(node, targetElement);
+
+		node.hidden = hidden;
+
+		return unport;
+	}
+</script>
+
+{#if targetElement && portal}
+	<HtmlAtom {@attach _port} as={as as E} {base} {...restProps}>
+		{@render children?.({ portal: portalBond })}
+	</HtmlAtom>
+{/if}

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

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

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

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

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

@@ -0,0 +1,24 @@
+<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'
+	});
+</script>
+
+<script>
+</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}
+</Story>

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

@@ -0,0 +1,26 @@
+export default QrCode;
+type QrCode = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const QrCode: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,25 @@
+<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>

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

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