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

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

@@ -1,83 +1,80 @@
-<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';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Dropdown',
-		// 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);
-
-	const data = $state([
-		{ id: 1, value: 'apple', text: 'Apple' },
-		{ id: 2, value: 'banana', text: 'Banana' },
-		{ id: 3, value: 'cherry', text: 'Cherry' },
-		{ id: 4, value: 'date', text: 'Date' },
-		{ id: 5, value: 'elderberry', text: 'Elderberry' }
-	]);
-
-	const dd = filter(
-		() => data,
-		(query, item) => item.text.toLowerCase().includes(query.toLowerCase())
-	);
-</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();
-
-						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>
-
-				<!-- 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>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Dropdown as ADropdown } from '.';
+	import { Input } from '../input';
+	import { flip } from 'svelte/animate';
+	import { filter } from './runes.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Dropdown',
+		// 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);
+
+	const data = $state([
+		{ id: 1, value: 'apple', text: 'Apple' },
+		{ id: 2, value: 'banana', text: 'Banana' },
+		{ id: 3, value: 'cherry', text: 'Cherry' },
+		{ id: 4, value: 'date', text: 'Date' },
+		{ id: 5, value: 'elderberry', text: 'Elderberry' }
+	]);
+
+	const dd = filter(
+		() => data,
+		(query, item) => item.text.toLowerCase().includes(query.toLowerCase())
+	);
+</script>
+
+<Story name="Dropdown" args={{}}>
+	<!-- 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}
+
+				<!-- 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>
+</Story>

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

@@ -1,99 +1,96 @@
-<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';
-	import { Checkbox } from '../checkbox';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Form'
-	});
-</script>
-
-<script lang="ts">
-	import { z } from 'zod';
-	import { ZodAdapter } from './field/validation-adapters';
-	import { Radio, RadioGroup } from '../radio';
-
-	const nameSchema = z.string().min(2).max(100);
-
-	const personSchema = z.object({
-		firstName: nameSchema,
-		lastName: nameSchema,
-		isAdmin: z.boolean()
-	});
-
-	type PersonSchema = z.infer<typeof personSchema>;
-
-	const validator = new ZodAdapter();
-</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>
-
-				<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>
-						<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="is admin" schema={personSchema.shape.isAdmin}>
-						<Field.Label>Is Admin?</Field.Label>
-						<Field.Control base={Checkbox} />
-					</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 items-center gap-2">
-								<Radio value="no" />
-								<div>No</div>
-							</div>
-						</Field.Control>
-					</Field.Root>
-				</div>
-			</AForm>
-		{/snippet}
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import AForm from './form-root.svelte';
+	import { Field } from './field';
+	import { Input } from '../input';
+	import { Checkbox } from '../checkbox';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Form'
+	});
+</script>
+
+<script lang="ts">
+	import { z } from 'zod';
+	import { ZodAdapter } from './field/validation-adapters';
+	import { Radio, RadioGroup } from '../radio';
+
+	const nameSchema = z.string().min(2).max(100);
+
+	const personSchema = z.object({
+		firstName: nameSchema,
+		lastName: nameSchema,
+		isAdmin: z.boolean()
+	});
+
+	type PersonSchema = z.infer<typeof personSchema>;
+
+	const validator = new ZodAdapter();
+</script>
+
+<Story name="Form">
+	{#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>
+					<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="is admin" schema={personSchema.shape.isAdmin}>
+					<Field.Label>Is Admin?</Field.Label>
+					<Field.Control base={Checkbox} />
+				</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 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,23 +1,20 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import ImageCmp from './image.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Image'
-	});
-</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>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ImageCmp from './image.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Image'
+	});
+</script>
+
+<Story name="Image">
+	{#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,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/lazy.stories.svelte

@@ -8,28 +8,21 @@
 
 <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);
+	<Lazy
+		promise={import('../button/button.svelte').then(async res=> {
+                    await delay(1000 * 2);
 
                     return res.default;
                 })}
-				>
-					Hello World
+	>
+		Hello World
 
-					{#snippet loading()}
-						<span>Loading...</span>
-					{/snippet}
-				</Lazy>
-			{/snippet}
-		</Root>
-	{/snippet}
+		{#snippet loading()}
+			<span>Loading...</span>
+		{/snippet}
+	</Lazy>
 </Story>