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

package/dist/components/lazy/lazy.stories.svelte

@@ -0,0 +1,35 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Lazy'
+	});
+</script>
+
+<script lang="ts">
+	import Lazy from './lazy.svelte';
+	import { Root } from '../root';
+	import { delay } from 'es-toolkit';
+</script>
+
+<Story name="Lazy">
+	{#snippet children({ args })}
+		<Root>
+			{#snippet children({})}
+				<Lazy
+					promise={import('../button/button.svelte').then(async res=> {
+                    await delay(1000 * 5);
+
+                    return res.default;
+                })}
+				>
+					Hello World
+
+					{#snippet loading()}
+						<span>Loading...</span>
+					{/snippet}
+				</Lazy>
+			{/snippet}
+		</Root>
+	{/snippet}
+</Story>

package/dist/components/lazy/lazy.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Lazy from './lazy.svelte';
+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;
+}
+declare const Lazy: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Lazy = InstanceType<typeof Lazy>;
+export default Lazy;

package/dist/components/lazy/lazy.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import type { LazyProps } from './types';
+
+	let { promise, children, loading, error, ...restProps }: LazyProps = $props();
+
+	let Lazy: Component | null = $state(null);
+
+	let err = $state();
+
+	promise
+		.then((c) => {
+			Lazy = c;
+		})
+		.catch((r) => {
+			err = r;
+		});
+</script>
+
+<Lazy {...restProps}>
+	{@render children?.()}
+</Lazy>
+
+{#if err && error}
+	{@render error?.()}
+{:else if !Lazy}
+	{@render loading?.()}
+{/if}

package/dist/components/lazy/lazy.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from 'svelte';
+import type { LazyProps } from './types';
+declare const Lazy: Component<LazyProps, {}, "">;
+type Lazy = ReturnType<typeof Lazy>;
+export default Lazy;

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

@@ -0,0 +1,10 @@
+import type { Component, Snippet } from 'svelte';
+import type { HtmlAtomProps } from '../atom';
+export interface LazyExtendProps {
+}
+export interface LazyProps extends HtmlAtomProps<'button'>, LazyExtendProps {
+    promise: Promise<Component>;
+    children?: Snippet;
+    error?: Snippet;
+    loading?: Snippet;
+}

package/dist/components/lazy/types.js

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

package/dist/components/menu/menu-list.svelte

@@ -1,39 +1,40 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { List } from '../list';
-	import { Content } from '../popover/atoms';
-	import type { Base } from '../atom';
-	import { PopoverBond } from '../popover';
-
-	const bond = PopoverBond.get();
-
-	let {
-		class: klass = '',
-		as = 'ul' as T,
-		base = List.Root as B,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-</script>
-
-<Content
-	{as}
-	{base}
-	{bond}
-	preset="menu.list"
-	class={['bg-background border-border overflow-hidden p-0', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.()}
-</Content>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { List } from '../list';
+	import { Content } from '../popover/atoms';
+	import type { Base } from '../atom';
+	import { PopoverBond } from '../popover';
+
+	const bond = PopoverBond.get();
+
+	let {
+		class: klass = '',
+		as = 'ul' as T,
+		base = List.Root as B,
+		preset = 'menu.list',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<Content
+	{as}
+	{base}
+	{bond}
+	{preset}
+	class={['bg-background border-border overflow-hidden p-0', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...restProps}
+>
+	{@render children?.()}
+</Content>

package/dist/components/menu/menu-list.svelte.d.ts

@@ -4,6 +4,7 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B exten
         class?: string;
         as?: T;
         base?: B;
+        preset?: string;
         children?: any;
         onmount?: any;
         ondestroy?: any;

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

@@ -1,178 +1,178 @@
-<script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
-	import { animate as motion } from 'motion';
-	import { PortalBond, PortalsBond, Teleport } from '../portal';
-	import { HtmlAtom, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-	import { DURATION } from '../../shared';
-	import { PopoverBond } from './bond.svelte';
-	import type { AnimateParams, PopoverContentProps } from './types';
-
-	type Element = HtmlElementType<E>;
-
-	const bond = PopoverBond.get();
-	const activePortalBond = (() => {
-		const key = bond.state.props.portal;
-		if (key instanceof PortalBond) {
-			return key;
-		}
-
-		let portal: PortalBond | undefined | null = undefined;
-
-		if (typeof key === 'string') {
-			portal = PortalsBond.get()?.state.get(key);
-			console.error('portal was not found');
-		}
-
-		return portal ?? PortalBond.get();
-	})();
-
-	if (!bond) {
-		throw new Error('<PopoverOverlay /> must be used within a <Popover />');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverContentProps<E, B> = $props();
-
-	const isOpen = $derived(bond.state.isOpen && !!bond.elements.trigger);
-	const portalId = $derived(activePortalBond?.id);
-
-	const position = $derived(bond.position);
-	const placement = $derived(position?.placement);
-
-	const x = $derived(position?.x ?? 0);
-	const y = $derived(position?.y ?? 0);
-
-	const dy = $derived(placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0);
-	const dx = $derived(placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0);
-
-	const offset = $derived(bond.state.props.offset);
-
-	const xOffset = $derived(dx * offset);
-	const yOffset = $derived(dy * offset);
-
-	const openAsNumber = $derived(+isOpen);
-	const deltaArrow = $derived(position?.middlewareData?.arrow ? 1 : 0);
-
-	let isInitialized = false;
-
-	function _containerInitial(this: typeof bond.state, node: Element) {
-		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
-		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
-
-		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
-		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
-
-		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
-
-		isInitialized = true;
-	}
-
-	function _containerAnimate(this: typeof bond.state, node: Element, _?: AnimateParams) {
-		if (!isInitialized) {
-			return;
-		}
-
-		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
-		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
-		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
-
-		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
-		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
-
-		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
-	}
-
-	let isOpened = false;
-
-	function _animate(this: typeof bond.state, node: Element) {
-		const isOpen = this.isOpen;
-
-		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':
-				case 'top-start':
-				case 'top-end':
-					return 'bottom';
-				case 'bottom':
-				case 'bottom-start':
-				case 'bottom-end':
-					return 'top';
-				case 'left':
-				case 'left-start':
-				case 'left-end':
-					return 'right';
-				case 'right':
-				case 'right-start':
-				case 'right-end':
-					return 'left';
-				default:
-					return 'center';
-			}
-		};
-
-		const transformOrigin = getTransformOrigin();
-
-		const from = isOpened ? 1 : 0.95;
-
-		motion(
-			node,
-			{
-				opacity: openAsNumber,
-				y: _y + dy * (!isOpen ? -1 : 0) * (arrowClientHeight + yOffset),
-				x: _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
-			},
-			{ duration: DURATION.fast / 1000 }
-		);
-
-		isOpened = isOpen;
-	}
-</script>
-
-<Teleport
-	portal={portalId ?? 'root.l0'}
-	as="div"
-	class={[
-		'pointer-events-auto absolute top-0 left-0 h-min w-fit',
-		!isOpen && 'pointer-events-none'
-	]}
-	initial={_containerInitial?.bind(bond.state)}
-	animate={_containerAnimate?.bind(bond.state)}
-	{...bond.content({ onchange: _containerInitial })}
->
-	<HtmlAtom
-		{bond}
-		preset="popover.content"
-		class={[
-			'popover-content bg-popover text-popover-foreground border-border rounded-md border p-2 opacity-0 shadow-lg',
-			'$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)}
-		{...restProps}
-	>
-		{@render children?.({ popover: bond })}
-	</HtmlAtom>
-</Teleport>
+<script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
+	import { animate as motion } from 'motion';
+	import { PortalBond, PortalsBond, Teleport } from '../portal';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	import { DURATION } from '../../shared';
+	import { PopoverBond } from './bond.svelte';
+	import type { AnimateParams, PopoverContentProps } from './types';
+
+	type Element = HtmlElementType<E>;
+
+	const bond = PopoverBond.get();
+	const activePortalBond = (() => {
+		const key = bond.state.props.portal;
+		if (key instanceof PortalBond) {
+			return key;
+		}
+
+		let portal: PortalBond | undefined | null = undefined;
+
+		if (typeof key === 'string') {
+			portal = PortalsBond.get()?.state.get(key);
+			console.error('portal was not found');
+		}
+
+		return portal ?? PortalBond.get();
+	})();
+
+	if (!bond) {
+		throw new Error('<PopoverOverlay /> must be used within a <Popover />');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverContentProps<E, B> = $props();
+
+	const isOpen = $derived(bond.state.isOpen && !!bond.elements.trigger);
+	const portalId = $derived(activePortalBond?.id);
+
+	const position = $derived(bond.position);
+	const placement = $derived(position?.placement);
+
+	const x = $derived(position?.x ?? 0);
+	const y = $derived(position?.y ?? 0);
+
+	const dy = $derived(placement?.startsWith('top') ? -1 : placement?.startsWith('bottom') ? 1 : 0);
+	const dx = $derived(placement?.startsWith('left') ? -1 : placement?.startsWith('right') ? 1 : 0);
+
+	const offset = $derived(bond.state.props.offset);
+
+	const xOffset = $derived(dx * offset);
+	const yOffset = $derived(dy * offset);
+
+	const openAsNumber = $derived(+isOpen);
+	const deltaArrow = $derived(position?.middlewareData?.arrow ? 1 : 0);
+
+	let isInitialized = false;
+
+	function _containerInitial(this: typeof bond.state, node: Element) {
+		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
+		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
+
+		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
+		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
+
+		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
+
+		isInitialized = true;
+	}
+
+	function _containerAnimate(this: typeof bond.state, node: Element, _?: AnimateParams) {
+		if (!isInitialized) {
+			return;
+		}
+
+		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
+		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
+		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
+
+		const _x = x + xOffset * openAsNumber + deltaArrow * dx * arrowClientWidth;
+		const _y = y + yOffset * openAsNumber + deltaArrow * dy * arrowClientHeight;
+
+		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
+	}
+
+	let isOpened = false;
+
+	function _animate(this: typeof bond.state, node: Element) {
+		const isOpen = this.isOpen;
+
+		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':
+				case 'top-start':
+				case 'top-end':
+					return 'bottom';
+				case 'bottom':
+				case 'bottom-start':
+				case 'bottom-end':
+					return 'top';
+				case 'left':
+				case 'left-start':
+				case 'left-end':
+					return 'right';
+				case 'right':
+				case 'right-start':
+				case 'right-end':
+					return 'left';
+				default:
+					return 'center';
+			}
+		};
+
+		const transformOrigin = getTransformOrigin();
+
+		const from = isOpened ? 1 : 0.95;
+
+		motion(
+			node,
+			{
+				opacity: openAsNumber,
+				y: _y + dy * (!isOpen ? -1 : 0) * (arrowClientHeight + yOffset),
+				x: _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
+			},
+			{ duration: DURATION.fast / 1000 }
+		);
+
+		isOpened = isOpen;
+	}
+</script>
+
+<Teleport
+	portal={portalId ?? 'root.l0'}
+	as="div"
+	class={[
+		'pointer-events-auto absolute top-0 left-0 h-min w-fit',
+		!isOpen && 'pointer-events-none'
+	]}
+	initial={_containerInitial?.bind(bond.state)}
+	animate={_containerAnimate?.bind(bond.state)}
+	{...bond.content({ onchange: _containerInitial })}
+>
+	<HtmlAtom
+		{bond}
+		preset="popover.content"
+		class={[
+			'popover-content bg-popover text-popover-foreground border-border rounded-md border p-2 opacity-0 shadow-lg',
+			'$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)}
+		{...restProps}
+	>
+		{@render children?.({ popover: bond })}
+	</HtmlAtom>
+</Teleport>

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

@@ -1,48 +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),
-		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 })}
+<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 })}