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

package/dist/components/input/input.stories.svelte

@@ -1,38 +1,35 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Input as AInput } from '.';
-	import Root from '../root/root.svelte';
-	import { Label } from '../label';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Input',
-		// 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">
-</script>
-
-<Story name="Input" args={{}}>
-	<Root class="p-4">
-		<div class="flex flex-col">
-			<Label for="price-input">Price</Label>
-			<AInput.Root>
-				<AInput.Icon class="text-foreground box-content px-0">$</AInput.Icon>
-				<AInput.Control id="price-input" class="border-border box-content border-x px-2 py-2">
-					<!--  -->
-				</AInput.Control>
-				<AInput.Icon class="text-foreground box-content px-2">.00</AInput.Icon>
-
-				<AInput.Placeholder class="text-foreground/20 pl-2">Hello World</AInput.Placeholder>
-			</AInput.Root>
-		</div>
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Input as AInput } from '.';
+	import { Label } from '../label';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Input',
+		// 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">
+</script>
+
+<Story name="Input" args={{}}>
+	<div class="flex flex-col">
+		<Label for="price-input">Price</Label>
+		<AInput.Root>
+			<AInput.Icon class="text-foreground box-content px-0">$</AInput.Icon>
+			<AInput.Control id="price-input" class="border-border box-content border-x px-2 py-2">
+				<!--  -->
+			</AInput.Control>
+			<AInput.Icon class="text-foreground box-content px-2">.00</AInput.Icon>
+
+			<AInput.Placeholder class="text-foreground/20 pl-2">Hello World</AInput.Placeholder>
+		</AInput.Root>
+	</div>
+</Story>

package/dist/components/label/label.stories.svelte

@@ -1,26 +1,15 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { default as LabelCmp } from './label.svelte';
-	import { Root } from '../root';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Label'
-	});
-</script>
-
-<script>
-	let value = $state(undefined);
-	let checked = $state(false);
-</script>
-
-<Story name="Label">
-	{#snippet children(args)}
-		<Root>
-			{#snippet children({})}
-				<div class="flex h-full w-full items-center justify-center">
-					<LabelCmp>Hello World</LabelCmp>
-				</div>
-			{/snippet}
-		</Root>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { default as LabelCmp } from './label.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Label'
+	});
+</script>
+
+<script>
+</script>
+
+<Story name="Label">
+	<LabelCmp>Hello World</LabelCmp>
+</Story>

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

@@ -1,6 +1,26 @@
 export default Label;
-type Label = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
+type Label = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
 };
-declare const Label: import("svelte").Component<Record<string, never>, {}, "">;
+declare const Label: $$__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/lazy/index.d.ts

@@ -0,0 +1 @@
+export { default as Lazy } from './lazy.svelte';

package/dist/components/lazy/index.js

@@ -0,0 +1 @@
+export { default as Lazy } from './lazy.svelte';

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

@@ -0,0 +1,28 @@
+<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 { delay } from 'es-toolkit';
+</script>
+
+<Story name="Lazy">
+	<Lazy
+		promise={import('../button/button.svelte').then(async res=> {
+                    await delay(1000 * 2);
+
+                    return res.default;
+                })}
+	>
+		Hello World
+
+		{#snippet loading()}
+			<span>Loading...</span>
+		{/snippet}
+	</Lazy>
+</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/link/link.stories.svelte

@@ -1,26 +1,15 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Root } from '../root';
-	import LinkComponent from './link.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Link'
-	});
-</script>
-
-<script>
-	let value = $state(undefined);
-	let checked = $state(false);
-</script>
-
-<Story name="Link">
-	{#snippet children(args)}
-		<Root>
-			{#snippet children({})}
-				<div class="flex h-full w-full items-center justify-center">
-					<LinkComponent>Hello World</LinkComponent>
-				</div>
-			{/snippet}
-		</Root>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import LinkComponent from './link.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Link'
+	});
+</script>
+
+<script>
+</script>
+
+<Story name="Link">
+	<LinkComponent>Hello World</LinkComponent>
+</Story>

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

@@ -1,6 +1,26 @@
 export default Link;
-type Link = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
+type Link = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
 };
-declare const Link: import("svelte").Component<Record<string, never>, {}, "">;
+declare const Link: $$__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/menu/menu-list.svelte

@@ -10,6 +10,7 @@
 		class: klass = '',
 		as = 'ul' as T,
 		base = List.Root as B,
+		preset = 'menu.list',
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -25,7 +26,7 @@
 	{as}
 	{base}
 	{bond}
-	preset="menu.list"
+	{preset}
 	class={['bg-background border-border overflow-hidden p-0', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}

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/menu/menu.stories.svelte

@@ -1,36 +1,33 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Menu as AMenu } from '.';
-	import Root from '../root/root.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/Menu',
-		// 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="Menu" args={{}}>
-	<Root class="p-4">
-		<AMenu.Root bind:open offset={4}>
-			<AMenu.Trigger base={Button}>Select a language</AMenu.Trigger>
-			<AMenu.List>
-				<AMenu.Item>Arabic</AMenu.Item>
-				<AMenu.Item>English</AMenu.Item>
-				<AMenu.Item>Spanish</AMenu.Item>
-				<AMenu.Item>Italian</AMenu.Item>
-			</AMenu.List>
-		</AMenu.Root>
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Menu as AMenu } from '.';
+	import { Button } from '../button';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Menu',
+		// 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="Menu" args={{}}>
+	<AMenu.Root bind:open offset={4}>
+		<AMenu.Trigger base={Button}>Select a language</AMenu.Trigger>
+		<AMenu.List>
+			<AMenu.Item>Arabic</AMenu.Item>
+			<AMenu.Item>English</AMenu.Item>
+			<AMenu.Item>Spanish</AMenu.Item>
+			<AMenu.Item>Italian</AMenu.Item>
+		</AMenu.List>
+	</AMenu.Root>
+</Story>

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

@@ -52,7 +52,7 @@ export class PopoverBond extends Bond {
                 const position = untrack(() => this.#position);
                 if (!position) {
                     const init = async () => {
-                        popover(this)(node, {
+                        popover(this)({
                             ...props,
                             onchange: (node, position) => {
                                 this.#position = position;
@@ -96,7 +96,7 @@ export class PopoverBond extends Bond {
                 }
                 if (!this.state.isOpen)
                     return;
-                return popover(this)(node, {
+                return popover(this)({
                     ...props,
                     onchange: (node, position) => {
                         this.#position = position;
@@ -160,38 +160,44 @@ export class PopoverState extends BondState {
     }
 }
 function popover(bond) {
-    return (node, props, updater) => {
+    return (props, updater) => {
         const { offset: ofs, placements, placement } = bond.state.props;
-        if (!bond.elements.content) {
+        // Guard: ensure required elements exist
+        if (!bond.elements.content || !bond.elements.trigger) {
             return;
         }
-        if (!bond.elements.trigger) {
-            return;
-        }
-        bond.elements.content.style.minWidth = bond.elements.trigger.clientWidth + 'px';
-        const middleware = [];
-        if (bond.elements.arrow) {
-            middleware.push(arrow({ element: bond.elements.arrow }));
+        const { content, trigger, arrow: arrowElement } = bond.elements;
+        // Set minimum width to match trigger
+        content.style.minWidth = `${trigger.clientWidth}px`;
+        // Build middleware stack
+        const middleware = [
+            offset(ofs),
+            flip({
+                fallbackPlacements: placements,
+                padding: 4
+            })
+        ];
+        // Add arrow middleware if element exists
+        if (arrowElement) {
+            middleware.push(arrow({ element: arrowElement }));
         }
+        // Debounce position change callback
+        const onchangeCallback = props.onchange;
         const onchangeDebounced = debounce((node, position) => {
-            props.onchange?.(node, position);
-        }, 1000 / 60);
+            onchangeCallback?.(node, position);
+        }, 1000 / 60 // ~16ms for 60fps
+        );
+        // Compute position and notify listeners
         const compute = async () => {
-            const position = await computePosition(bond.elements.trigger, node, {
-                placement,
-                middleware: [
-                    offset(ofs),
-                    flip({
-                        fallbackPlacements: placements,
-                        padding: 4
-                    }),
-                    ...middleware
-                ]
+            const position = await computePosition(trigger, content, {
+                placement: placement ?? 'bottom',
+                middleware
             });
-            onchangeDebounced?.(node, position);
+            onchangeDebounced(content, position);
         };
+        // Use auto-update if provided, otherwise compute once
         if (updater) {
-            return updater(bond.elements.trigger, node, compute, {});
+            return updater(trigger, content, compute, {});
         }
         compute();
     };