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

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

@@ -1,83 +1,76 @@
-<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 { HTMLAttributes } from 'svelte/elements';
+	import type { PortalOuterProps } from './types';
+	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
+	import { RootBond } from '../root';
+	import { HtmlAtom, type ElementType, 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/portal-root.svelte.d.ts

@@ -1,13 +1,11 @@
 export type { PortalOuterProps } from './types';
-import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { PortalBond } from '.';
-import type { RootPortals } from '../root/root.svelte';
-import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
+import { type ElementType, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: HtmlAtomProps<E, B> & import("./types").PortalOuterExtendProps & {
-        id: RootPortals | (string & {});
-        children?: Snippet;
+    props: import("../atom").HtmlAtomProps<E, B> & import("./types").PortalOuterExtendProps & {
+        id: import("../root/root.svelte").RootPortals | (string & {});
+        children?: import("svelte").Snippet;
     } & HTMLAttributes<ElementType<E>>;
     exports: {
         getBond: () => PortalBond;

package/dist/components/portal/teleport.svelte

@@ -1,50 +1,49 @@
-<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 Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	import { PortalsBond } from './portals';
+	import { RootBond } from '../root/bond.svelte';
+	import { port } from './utils';
+
+	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/portal/teleport.svelte.d.ts

@@ -1,11 +1,10 @@
 export type { TeleportProps } from './types';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
 import type { HtmlElementTagName, HtmlElementType } from '../element';
-import type { PortalBond } from '.';
 declare function $$render<E extends HtmlElementTagName = 'div', B extends Base = Base>(): {
-    props: HtmlAtomProps<E, B> & import("./types").TeleportExtendProps & {
-        portal?: string | PortalBond;
+    props: import("../atom").HtmlAtomProps<E, B> & import("./types").TeleportExtendProps & {
+        portal?: string | import("./bond.svelte").PortalBond;
     } & HTMLAttributes<HtmlElementType<E>>;
     exports: {};
     bindings: "";

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

@@ -1,27 +1,18 @@
-<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
-						class="text-primary-foreground bg-primary size-64 rounded-2xl p-1"
-						value="Hello World 123"
-					/>
-				</div>
-			{/snippet}
-		</Root>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import QrCodeComponent from './qr-code.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/QR Code'
+	});
+</script>
+
+<script>
+</script>
+
+<Story name="QR Code">
+	<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,75 +1,75 @@
-<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>
+<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/radio/radio-group.stories.svelte

@@ -2,7 +2,6 @@
 	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'
@@ -14,37 +13,29 @@
 </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>
+	<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="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="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>
+		<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}
+	<div class="mt-8">
+		Selected value: <strong>{value}</strong>
+	</div>
 </Story>

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

@@ -1,7 +1,6 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { default as RadioModule } from './radio.svelte';
-	import { Root } from '../root';
 
 	const { Story } = defineMeta({
 		title: 'ATOMS/Radio'
@@ -14,13 +13,5 @@
 </script>
 
 <Story name="Radio">
-	{#snippet children({ args })}
-		<Root>
-			{#snippet children({})}
-				<div class="flex h-full w-full items-center justify-center">
-					<RadioModule class="size-5" />
-				</div>
-			{/snippet}
-		</Root>
-	{/snippet}
+	<RadioModule class="size-5" />
 </Story>