@svelte-atoms/core 1.0.0-alpha.28 → 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/element/html-element.svelte

@@ -1,85 +1,85 @@
-<script lang="ts" generics="T extends HtmlElementTagName">
-	import { untrack } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAttachmentKey } from 'svelte/attachments';
-	import { cn, toClassValue } from '../../utils';
-	import type { ElementType, HtmlElementProps, HtmlElementTagName } from './types';
-
-	type Element = ElementType<T>;
-
-	let {
-		class: klass = '',
-		as = 'div' as T,
-		global = true,
-		initial = undefined,
-		enter = undefined,
-		exit = undefined,
-		animate = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		children = undefined,
-		...restProps
-	}: HtmlElementProps<T> & Omit<HTMLAttributes<Element>, keyof HtmlElementProps<T>> = $props();
-
-	let node = $state<Element>();
-
-	let skipFirstAnimate = $state(!!enter);
-
-	$effect(() => {
-		if (!node) return;
-
-		const unmount = untrack(() => onmount?.(node!));
-
-		return () => {
-			if (typeof unmount === 'function') unmount(node!);
-			ondestroy?.(node!);
-		};
-	});
-
-	$effect(() => {
-		const fn = animate;
-
-		if (!node) return;
-		const shouldSkip = untrack(() => skipFirstAnimate);
-
-		if (shouldSkip) {
-			skipFirstAnimate = false;
-			return;
-		}
-
-		fn?.(node);
-	});
-
-	const elementProps = $derived({
-		[createAttachmentKey()]: (n: Element) => {
-			node = n;
-		},
-		class: cn(toClassValue(klass)),
-		...restProps
-	});
-
-	function _enter(node: Element) {
-		initial?.(node);
-		return () => {
-			const { duration = 0, delay = 0, easing = undefined } = enter?.(node) ?? {};
-			return { duration, delay, easing };
-		};
-	}
-
-	function _exit(node: Element) {
-		return () => {
-			const { duration = 0, delay = 0, easing = undefined } = exit?.(node) ?? {};
-			return { duration, delay, easing };
-		};
-	}
-</script>
-
-{#if global}
-	<svelte:element this={as} in:_enter|global out:_exit|global {...elementProps}>
-		{@render children?.()}
-	</svelte:element>
-{:else}
-	<svelte:element this={as} in:_enter out:_exit {...elementProps}>
-		{@render children?.()}
-	</svelte:element>
-{/if}
+<script lang="ts" generics="T extends HtmlElementTagName">
+	import { untrack } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { createAttachmentKey } from 'svelte/attachments';
+	import { cn, toClassValue } from '../../utils';
+	import type { ElementType, HtmlElementProps, HtmlElementTagName } from './types';
+
+	type Element = ElementType<T>;
+
+	let {
+		class: klass = '',
+		as = 'div' as T,
+		global = true,
+		initial = undefined,
+		enter = undefined,
+		exit = undefined,
+		animate = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		children = undefined,
+		...restProps
+	}: HtmlElementProps<T> & Omit<HTMLAttributes<Element>, keyof HtmlElementProps<T>> = $props();
+
+	let node = $state<Element>();
+
+	let skipFirstAnimate = $state(!!enter);
+
+	$effect(() => {
+		if (!node) return;
+
+		const unmount = untrack(() => onmount?.(node!));
+
+		return () => {
+			if (typeof unmount === 'function') unmount(node!);
+			ondestroy?.(node!);
+		};
+	});
+
+	$effect(() => {
+		const fn = animate;
+
+		if (!node) return;
+		const shouldSkip = untrack(() => skipFirstAnimate);
+
+		if (shouldSkip) {
+			skipFirstAnimate = false;
+			return;
+		}
+
+		fn?.(node);
+	});
+
+	const elementProps = $derived({
+		[createAttachmentKey()]: (n: Element) => {
+			node = n;
+		},
+		class: cn(toClassValue(klass)),
+		...restProps
+	});
+
+	function _enter(node: Element) {
+		initial?.(node);
+		return () => {
+			const { duration = 0, delay = 0, easing = undefined } = enter?.(node) ?? {};
+			return { duration, delay, easing };
+		};
+	}
+
+	function _exit(node: Element) {
+		return () => {
+			const { duration = 0, delay = 0, easing = undefined } = exit?.(node) ?? {};
+			return { duration, delay, easing };
+		};
+	}
+</script>
+
+{#if global}
+	<svelte:element this={as} in:_enter|global out:_exit|global {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{:else}
+	<svelte:element this={as} in:_enter out:_exit {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{/if}

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

@@ -12,7 +12,7 @@ export interface ElementProps<T extends ElementTagName> extends Record<string, u
     animate?: NodeFunction<T>;
     onmount?: NodeFunction<T>;
     ondestroy?: NodeFunction<T>;
-    children?: Snippet;
+    children?: Snippet<unknown[]>;
     [key: string]: unknown;
 }
 export type HtmlElementTagName = keyof HTMLElementTagNameMap;

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/index.d.ts

@@ -38,3 +38,4 @@ export * from './container';
 export * from './calendar';
 export * from './date-picker';
 export * from './qr-code';
+export * from './lazy';

package/dist/components/index.js

@@ -38,3 +38,4 @@ export * from './container';
 export * from './calendar';
 export * from './date-picker';
 export * from './qr-code';
+export * from './lazy';