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

package/dist/components/lazy/lazy.svelte

@@ -1,28 +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}
+<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/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

@@ -1,40 +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,
-		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>
+<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.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();
     };

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

@@ -1,111 +1,111 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { animate as motion } from 'motion';
-	import { HtmlAtom, type Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-	import type { PopoverArrowProps } from './types';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const position = $derived(bond.position);
-	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
-	const isReady = $derived(!!middlewareArrowData);
-	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
-
-	const arrowProps = $derived({
-		...bond.arrow(),
-		...restProps
-	});
-
-	// Rotation based on placement side
-	const rotation = $derived.by(() => {
-		switch (side) {
-			case 'top':
-				return 180;
-			case 'bottom':
-				return 0;
-			case 'left':
-				return 90;
-			case 'right':
-				return -90;
-			default:
-				return 0;
-		}
-	});
-
-	function _animate(node: HTMLElement) {
-		if (!middlewareArrowData) {
-			return;
-		}
-
-		const { x, y } = middlewareArrowData;
-
-		const isMainAxis = side === 'top' || side === 'bottom';
-
-		const crossAxisStyle = isMainAxis
-			? {
-					left: 0
-				}
-			: {
-					top: 0
-				};
-
-		motion(
-			node,
-			{
-				x: x ?? 0,
-				y: y ?? 0,
-				opacity: 1,
-				...crossAxisStyle
-			},
-			{ duration: 0 }
-		);
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="popover.arrow"
-	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	style="{side}: 100%;"
-	{...arrowProps}
->
-	{#if children}
-		{@render children({ popover: bond })}
-	{:else}
-		<svg
-			width="12"
-			height="12"
-			viewBox="0 0 12 12"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			style="transform: rotate({rotation}deg);"
-		>
-			<path d="M0 12L6 6L12 12H0Z" fill="currentColor" stroke="none" />
-		</svg>
-	{/if}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { animate as motion } from 'motion';
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverArrowProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const position = $derived(bond.position);
+	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
+	const isReady = $derived(!!middlewareArrowData);
+	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
+
+	const arrowProps = $derived({
+		...bond.arrow(),
+		...restProps
+	});
+
+	// Rotation based on placement side
+	const rotation = $derived.by(() => {
+		switch (side) {
+			case 'top':
+				return 180;
+			case 'bottom':
+				return 0;
+			case 'left':
+				return 90;
+			case 'right':
+				return -90;
+			default:
+				return 0;
+		}
+	});
+
+	function _animate(node: HTMLElement) {
+		if (!middlewareArrowData) {
+			return;
+		}
+
+		const { x, y } = middlewareArrowData;
+
+		const isMainAxis = side === 'top' || side === 'bottom';
+
+		const crossAxisStyle = isMainAxis
+			? {
+					left: 0
+				}
+			: {
+					top: 0
+				};
+
+		motion(
+			node,
+			{
+				x: x ?? 0,
+				y: y ?? 0,
+				opacity: 1,
+				...crossAxisStyle
+			},
+			{ duration: 0 }
+		);
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="popover.arrow"
+	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	style="{side}: 100%;"
+	{...arrowProps}
+>
+	{#if children}
+		{@render children({ popover: bond })}
+	{:else}
+		<svg
+			width="16"
+			height="8"
+			viewBox="0 0 16 8"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			style="transform: rotate({rotation}deg);"
+		>
+			<path d="M0 8C2 8 6 4 8 0C10 4 14 8 16 8H0Z" fill="currentColor" />
+		</svg>
+	{/if}
+</HtmlAtom>