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

package/dist/components/dropdown/dropdown.stories.svelte

@@ -1,7 +1,6 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { Dropdown as ADropdown } from '.';
-	import Root from '../root/root.svelte';
 	import { Input } from '../input';
 	import { flip } from 'svelte/animate';
 	import { filter } from './runes.svelte';
@@ -37,47 +36,45 @@
 </script>
 
 <Story name="Dropdown" args={{}}>
-	<Root class="items-center justify-center p-4">
-		<!-- Multi-select dropdown with search functionality -->
-		<ADropdown.Root
-			bind:open
-			keys={data.map((item) => item.value)}
-			multiple
-			onquerychange={(q) => (dd.query = q)}
-		>
-			{#snippet children({ dropdown })}
-				<!-- Compose ADropdown.Trigger with Input.Root for a custom trigger -->
-				<ADropdown.Trigger
-					base={Input.Root}
-					class="h-auto min-h-12 max-w-sm min-w-sm items-center gap-2 rounded-sm px-4 transition-colors duration-200"
-					onclick={(ev) => {
-						ev.preventDefault();
+	<!-- Multi-select dropdown with search functionality -->
+	<ADropdown.Root
+		bind:open
+		keys={data.map((item) => item.value)}
+		multiple
+		onquerychange={(q) => (dd.query = q)}
+	>
+		{#snippet children({ dropdown })}
+			<!-- Compose ADropdown.Trigger with Input.Root for a custom trigger -->
+			<ADropdown.Trigger
+				base={Input.Root}
+				class="h-auto min-h-12 max-w-sm min-w-sm items-center gap-2 rounded-sm px-4 transition-colors duration-200"
+				onclick={(ev) => {
+					ev.preventDefault();
 
-						dropdown.state.open();
-					}}
-				>
-					<!-- Display selected values with animation -->
-					{#each dropdown?.state?.selectedItems ?? [] as item (item.id)}
-						<div animate:flip={{ duration: 200 }}>
-							<ADropdown.Value value={item.value} class="text-foreground/80">
-								{item.text}
-							</ADropdown.Value>
-						</div>
-					{/each}
+					dropdown.state.open();
+				}}
+			>
+				<!-- Display selected values with animation -->
+				{#each dropdown?.state?.selectedItems ?? [] as item (item.id)}
+					<div animate:flip={{ duration: 200 }}>
+						<ADropdown.Value value={item.value} class="text-foreground/80">
+							{item.text}
+						</ADropdown.Value>
+					</div>
+				{/each}
 
-					<!-- Inline search input within the trigger -->
-					<ADropdown.Query class="flex-1 px-1" placeholder="Search for fruits..." />
-				</ADropdown.Trigger>
+				<!-- Inline search input within the trigger -->
+				<ADropdown.Query class="flex-1 px-1" placeholder="Search for fruits..." />
+			</ADropdown.Trigger>
 
-				<!-- ADropdown list with filtered items -->
-				<ADropdown.List>
-					{#each dd.current as item (item.id)}
-						<div animate:flip={{ duration: 200 }}>
-							<ADropdown.Item value={item.value}>{item.text}</ADropdown.Item>
-						</div>
-					{/each}
-				</ADropdown.List>
-			{/snippet}
-		</ADropdown.Root>
-	</Root>
+			<!-- ADropdown list with filtered items -->
+			<ADropdown.List>
+				{#each dd.current as item (item.id)}
+					<div animate:flip={{ duration: 200 }}>
+						<ADropdown.Item value={item.value}>{item.text}</ADropdown.Item>
+					</div>
+				{/each}
+			</ADropdown.List>
+		{/snippet}
+	</ADropdown.Root>
 </Story>

package/dist/components/dropdown/index.d.ts

@@ -2,3 +2,4 @@ export * as Dropdown from './atoms';
 export { DropdownBond, type DropdownBondElements, DropdownBondState, type DropdownStateProps } from './bond.svelte';
 export { filter } from './runes.svelte';
 export * from './types';
+export type { AnimatePopoverContentParams as AnimateDropdownContentParams, animatePopoverContent as animateDropdownContent } from '../popover/motion';

package/dist/components/form/form.stories.svelte

@@ -1,6 +1,5 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
 	import AForm from './form-root.svelte';
 	import { Field } from './field';
 	import { Input } from '../input';
@@ -30,70 +29,68 @@
 </script>
 
 <Story name="Form">
-	<Root class="flex items-center justify-center p-4">
-		{#snippet children({ args })}
-			<AForm class="flex flex-col gap-2" {validator}>
-				<div class="mb-4 flex flex-col">
-					<h2 class="text-3xl font-semibold">Form Title</h2>
-					<p class="text-sm text-gray-500">Form description goes here.</p>
-				</div>
+	{#snippet children({ args })}
+		<AForm class="flex flex-col gap-2" {validator}>
+			<div class="mb-4 flex flex-col">
+				<h2 class="text-3xl font-semibold">Form Title</h2>
+				<p class="text-sm text-gray-500">Form description goes here.</p>
+			</div>
 
-				<div class="flex gap-2">
-					<Field.Root name="first name" schema={personSchema.shape.firstName}>
-						{#snippet children({ field })}
-							<Field.Label>First Name</Field.Label>
-							<Input.Root>
-								<Field.Control
-									base={Input.Control}
-									placeholder="Enter your first name"
-									onblur={() => {
-										const results = field?.state.validate();
-										console.log(results);
-									}}
-								/>
-							</Input.Root>
-							{#if field?.state?.errors?.length > 0}
-								<div class="text-xs text-red-600">
-									{#each field.state.errors as error}
-										<div>{error.message}</div>
-									{/each}
-								</div>
-							{/if}
-						{/snippet}
-					</Field.Root>
-
-					<Field.Root name="last name" schema={personSchema.shape.lastName}>
-						<Field.Label>Last Name</Field.Label>
+			<div class="flex gap-2">
+				<Field.Root name="first name" schema={personSchema.shape.firstName}>
+					{#snippet children({ field })}
+						<Field.Label>First Name</Field.Label>
 						<Input.Root>
-							<Field.Control base={Input.Control} placeholder="Enter your last name" />
+							<Field.Control
+								base={Input.Control}
+								placeholder="Enter your first name"
+								onblur={() => {
+									const results = field?.state.validate();
+									console.log(results);
+								}}
+							/>
 						</Input.Root>
-					</Field.Root>
-				</div>
+						{#if field?.state?.errors?.length > 0}
+							<div class="text-xs text-red-600">
+								{#each field.state.errors as error}
+									<div>{error.message}</div>
+								{/each}
+							</div>
+						{/if}
+					{/snippet}
+				</Field.Root>
 
-				<div class="flex flex-col">
-					<Field.Root name="is admin" schema={personSchema.shape.isAdmin}>
-						<Field.Label>Is Admin?</Field.Label>
-						<Field.Control base={Checkbox} />
-					</Field.Root>
-				</div>
+				<Field.Root name="last name" schema={personSchema.shape.lastName}>
+					<Field.Label>Last Name</Field.Label>
+					<Input.Root>
+						<Field.Control base={Input.Control} placeholder="Enter your last name" />
+					</Input.Root>
+				</Field.Root>
+			</div>
 
-				<div class="flex flex-col">
-					<Field.Root name="color" schema={personSchema.shape.color}>
-						<Field.Label>Is current scheme black?</Field.Label>
-						<Field.Control class="flex flex-col items-start text-sm" base={RadioGroup}>
-							<div class="flex items-center gap-2">
-								<Radio value="yes" />
-								<div>Yes</div>
-							</div>
+			<div class="flex flex-col">
+				<Field.Root name="is admin" schema={personSchema.shape.isAdmin}>
+					<Field.Label>Is Admin?</Field.Label>
+					<Field.Control base={Checkbox} />
+				</Field.Root>
+			</div>
 
-							<div class="flex items-center gap-2">
-								<Radio value="no" />
-								<div>No</div>
-							</div>
-						</Field.Control>
-					</Field.Root>
-				</div>
-			</AForm>
-		{/snippet}
-	</Root>
+			<div class="flex flex-col">
+				<Field.Root name="color" schema={personSchema.shape.color}>
+					<Field.Label>Is current scheme black?</Field.Label>
+					<Field.Control class="flex flex-col items-start text-sm" base={RadioGroup}>
+						<div class="flex items-center gap-2">
+							<Radio value="yes" />
+							<div>Yes</div>
+						</div>
+
+						<div class="flex items-center gap-2">
+							<Radio value="no" />
+							<div>No</div>
+						</div>
+					</Field.Control>
+				</Field.Root>
+			</div>
+		</AForm>
+	{/snippet}
 </Story>

package/dist/components/image/image.stories.svelte

@@ -1,6 +1,5 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
 	import ImageCmp from './image.svelte';
 
 	const { Story } = defineMeta({
@@ -9,15 +8,13 @@
 </script>
 
 <Story name="Image">
-	<Root class="p-4">
-		{#snippet children({ args })}
-			<ImageCmp
-				class="h-[400px] w-[600px]"
-				src="https://placehold.co/600x400/t"
-				alt="Placeholder image"
-			>
-				<p>Failed Loading...</p>
-			</ImageCmp>
-		{/snippet}
-	</Root>
+	{#snippet children({ args })}
+		<ImageCmp
+			class="h-[400px] w-[600px]"
+			src="https://placehold.co/600x400/t"
+			alt="Placeholder image"
+		>
+			<p>Failed Loading...</p>
+		</ImageCmp>
+	{/snippet}
 </Story>

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

@@ -1,7 +1,6 @@
 <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
@@ -21,18 +20,16 @@
 </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>
+	<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>
+			<AInput.Placeholder class="text-foreground/20 pl-2">Hello World</AInput.Placeholder>
+		</AInput.Root>
+	</div>
 </Story>

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

@@ -1,7 +1,6 @@
 <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'
@@ -9,18 +8,8 @@
 </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}
+	<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/lazy.stories.svelte

@@ -1,35 +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 { 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>
+<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.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,6 +1,5 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Root } from '../root';
 	import LinkComponent from './link.svelte';
 
 	const { Story } = defineMeta({
@@ -9,18 +8,8 @@
 </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}
+	<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/list/list-item.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'li', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-
-	let {
-		class: klass = '',
-		as = 'li' as T,
-		preset: presetKey = 'list.item',
-		children = undefined,
-		...restProps
-	} = $props();
-</script>
-
-<HtmlAtom
-	{as}
-	preset={presetKey}
-	class={['border-border flex w-full gap-2 px-4 py-1', '$preset', klass]}
-	{...restProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'li', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+
+	let {
+		class: klass = '',
+		as = 'li' as T,
+		preset = 'list.item',
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	{preset}
+	class={['border-border flex w-full gap-2 px-4 py-1', '$preset', klass]}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/menu/atoms.d.ts

@@ -1,3 +1,4 @@
 export { Root, Trigger, Arrow, Indicator } from '../popover/atoms';
 export { default as List } from './menu-list.svelte';
 export { default as Item } from './menu-item.svelte';
+export { Divider, Group, Title } from '../list/atoms';

package/dist/components/menu/atoms.js

@@ -1,3 +1,4 @@
 export { Root, Trigger, Arrow, Indicator } from '../popover/atoms';
 export { default as List } from './menu-list.svelte';
 export { default as Item } from './menu-item.svelte';
+export { Divider, Group, Title } from '../list/atoms';

package/dist/components/menu/index.d.ts

@@ -1,3 +1,4 @@
 export * as Menu from './atoms';
 export * from './types';
-export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams } from '../popover/bond.svelte';
+export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams } from '../popover';
+export type { AnimatePopoverContentParams as AnimateMenuContentParams, animatePopoverContent as animateMenuContent } from '../popover/motion';

package/dist/components/menu/index.js

@@ -1,3 +1,3 @@
 export * as Menu from './atoms';
 export * from './types';
-export { PopoverBond, PopoverState } from '../popover/bond.svelte';
+export { PopoverBond, PopoverState } from '../popover';