@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/drawer/drawer.stories.svelte

@@ -1,141 +0,0 @@
-<script module>
-	import { animate } from 'motion';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { clickoutDrawer, Drawer as Drawer_ } from '.';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Drawer',
-		// 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">
-	import { animateDrawerContent, animateDrawerRoot } from './motion';
-
-	let isOpen = $state(false);
-</script>
-
-<Story name="Left" args={{}}>
-	<Drawer_.Root
-		bind:open={isOpen}
-		class=" border backdrop-blur-md backdrop-grayscale-100"
-		animate={animateDrawerRoot({})}
-	>
-		<Drawer_.Content
-			class="border-border flex min-h-full w-md flex-col border-r p-8 whitespace-nowrap shadow-md"
-			animate={animateDrawerContent({ ease: 'easeOut', side: 'left' })}
-		>
-			<Drawer_.Header class="flex items-center justify-between">
-				<div class="flex flex-col">
-					<Drawer_.Title class="text-lg font-semibold">Drawer Title</Drawer_.Title>
-					<Drawer_.Description class="text-sm break-all whitespace-break-spaces text-neutral-500"
-						>Ac bibendum laoreet lacinia purus duis. Hendrerit quam purus maecenas tincidunt letius
-						finibus vel tortor sociosqu proin vulputate. Consectetur velit eleifend purus mi
-						pulvinar si tristique litora mollis lobortis.</Drawer_.Description
-					>
-				</div>
-			</Drawer_.Header>
-			<div>
-				<div>Svelte Fluent</div>
-			</div>
-		</Drawer_.Content>
-	</Drawer_.Root>
-
-	<button
-		class="bg-red-500 p-2"
-		onclick={() => {
-			isOpen = !isOpen;
-		}}>Open</button
-	>
-</Story>
-
-<Story name="Top" args={{}}>
-	<Drawer_.Root
-		bind:open={isOpen}
-		class=" border backdrop-blur-md backdrop-grayscale-100"
-		animate={animateDrawerRoot({})}
-	>
-		<Drawer_.Content
-			class="border-border flex w-md min-w-full flex-col border-b p-8 whitespace-nowrap shadow-md"
-			animate={animateDrawerContent({ ease: 'easeOut', side: 'top' })}
-			{@attach clickoutDrawer((_, bond) => {
-				bond?.state?.close?.();
-			})}
-		>
-			<div>
-				<div>Svelte Fluent</div>
-			</div>
-		</Drawer_.Content>
-	</Drawer_.Root>
-
-	<button
-		class="bg-red-500 p-2"
-		onclick={() => {
-			isOpen = !isOpen;
-		}}>Open</button
-	>
-</Story>
-
-<Story name="Right" args={{}}>
-	<Drawer_.Root
-		bind:open={isOpen}
-		class=" border backdrop-blur-md backdrop-grayscale-100"
-		animate={animateDrawerRoot({})}
-	>
-		<Drawer_.Content
-			class="border-border shadow-foreground/50 inset-y-0 flex w-md flex-col border-l p-8 whitespace-nowrap shadow-sm"
-			animate={animateDrawerContent({ ease: 'easeOut', side: 'right' })}
-			{@attach clickoutDrawer((_, bond) => {
-				bond?.state?.close?.();
-			})}
-		>
-			<div>
-				<div>Svelte Fluent</div>
-			</div>
-		</Drawer_.Content>
-	</Drawer_.Root>
-
-	<button
-		class="bg-red-500 p-2"
-		onclick={() => {
-			isOpen = !isOpen;
-		}}>Open</button
-	>
-</Story>
-
-<Story name="Bottom" args={{}}>
-	<Drawer_.Root
-		bind:open={isOpen}
-		class=" border backdrop-blur-md backdrop-grayscale-100"
-		initial={(node) => {
-			animate(node, { opacity: +isOpen }, { duration: 0 });
-		}}
-		animate={animateDrawerRoot()}
-	>
-		<Drawer_.Content
-			class="border-border flex w-md min-w-full flex-col border-t p-8 whitespace-nowrap shadow-md"
-			animate={animateDrawerContent({ ease: 'easeOut', side: 'bottom' })}
-			{@attach clickoutDrawer((_, bond) => {
-				bond?.state?.close?.();
-			})}
-		>
-			<div>
-				<div>Svelte Fluent</div>
-			</div>
-		</Drawer_.Content>
-	</Drawer_.Root>
-
-	<button
-		class="bg-red-500 p-2"
-		onclick={() => {
-			isOpen = !isOpen;
-		}}>Open</button
-	>
-</Story>

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

@@ -1,3 +0,0 @@
-declare const Drawer: import("svelte").Component<Record<string, never>, {}, "">;
-type Drawer = ReturnType<typeof Drawer>;
-export default Drawer;

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

@@ -1,127 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Dropdown as ADropdown } from '.';
-	import { Input } from '../input';
-	import { flip } from 'svelte/animate';
-	import { filterDropdownData } 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', label: 'Apple' },
-		{ id: 2, value: 'banana', label: 'Banana' },
-		{ id: 3, value: 'cherry', label: 'Cherry' },
-		{ id: 4, value: 'date', label: 'Date' },
-		{ id: 5, value: 'elderberry', label: 'Elderberry' }
-	]);
-
-	const dd = filterDropdownData(
-		() => data,
-		(query, item) => item.label.toLowerCase().includes(query.toLowerCase())
-	);
-</script>
-
-<Story name="Dropdown" args={{}}>
-	<!-- Multi-select dropdown with search functionality -->
-	<div class="flex flex-col gap-4">
-		<ADropdown.Root bind:open keys={data.map((item) => item.value)} multiple>
-			{#snippet children({ dropdown })}
-				<!-- Compose ADropdown.Trigger with Input.Root for a custom trigger -->
-				<ADropdown.Trigger
-					base={Input.Root}
-					class="flex h-auto min-h-12 max-w-sm min-w-sm flex-col items-start gap-1 rounded-sm px-4 transition-colors duration-200"
-					onclick={(ev) => {
-						ev.preventDefault();
-
-						dropdown.state.open();
-					}}
-				>
-					<!-- Inline search input within the trigger -->
-					<input
-						class="w-full flex-1 px-1 outline-none"
-						placeholder="Search for fruits..."
-						bind:value={dd.query}
-					/>
-
-					<!-- Default usage  -->
-					<!-- <ADropdown.Selections class="flex flex-wrap gap-1" /> -->
-
-					<!-- Display selected values with animation -->
-					<ADropdown.Selections class="flex flex-wrap gap-1">
-						{#snippet children({ selections })}
-							{#each selections as selection (selection.id)}
-								<div animate:flip={{ duration: 200 }}>
-									<ADropdown.Selection {selection} />
-								</div>
-							{/each}
-						{/snippet}
-					</ADropdown.Selections>
-				</ADropdown.Trigger>
-
-				<!-- ADropdown list with filtered items -->
-				<ADropdown.Content>
-					{#each dd.current as item (item.id)}
-						<div animate:flip={{ duration: 200 }}>
-							<ADropdown.Item value={item.value}>{item.label}</ADropdown.Item>
-						</div>
-					{/each}
-				</ADropdown.Content>
-			{/snippet}
-		</ADropdown.Root>
-
-		<ADropdown.Root keys={data.map((item) => item.value)}>
-			{#snippet children({ dropdown })}
-				<!-- Compose ADropdown.Trigger with Input.Root for a custom trigger -->
-				<ADropdown.Trigger
-					base={Input.Root}
-					class="flex h-auto min-h-12 max-w-sm min-w-sm gap-1 rounded-sm px-4 transition-colors duration-200"
-					onclick={(ev) => {
-						ev.preventDefault();
-
-						dropdown.state.open();
-					}}
-				>
-					<!-- Display selected values with animation -->
-					<ADropdown.Selections class="flex flex-wrap gap-1" />
-
-					<!-- Ability to customize the display of selected item -->
-					<!-- <ADropdown.Selections class="flex flex-wrap gap-1" >
-						{#snippet children({selection})}
-							{selection?.text}
-						{/snippet}
-					</ADropdown.Selections> -->
-				</ADropdown.Trigger>
-
-				<!-- ADropdown list with filtered items -->
-				<ADropdown.Content>
-					<!-- Inline search input within the trigger -->
-					<input
-						bind:value={dd.query}
-						class="border-border flex-1 border-b px-4 py-3"
-						placeholder="Search for fruits..."
-					/>
-
-					{#each dd.current as item (item.id)}
-						<div animate:flip={{ duration: 200 }}>
-							<ADropdown.Item value={item.value}>{item.label}</ADropdown.Item>
-						</div>
-					{/each}
-				</ADropdown.Content>
-			{/snippet}
-		</ADropdown.Root>
-	</div>
-</Story>

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

@@ -1,3 +0,0 @@
-declare const Dropdown: import("svelte").Component<Record<string, never>, {}, "">;
-type Dropdown = ReturnType<typeof Dropdown>;
-export default Dropdown;

package/dist/components/element/element.stories.svelte

@@ -1,37 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import HtmlElement from './html-element.svelte';
-	import { Button } from '../button';
-	import { fade } from 'svelte/transition';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Element',
-		// 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 showElement = $state(true);
-</script>
-
-<Story name="Element" args={{}}>
-	<!-- Multi-select dropdown with search functionality -->
-	<div class="flex flex-col gap-4">
-		{#if showElement}
-			<HtmlElement enter={node=> ()=> fade(node, { duration: 500 })} exit={node => fade(node, { duration: 500 })} class="p-4 bg-blue-100 rounded" as="section">
-				Hello, I am an HtmlElement component! I can be used to render any HTML element with custom props and transitions.
-			</HtmlElement>
-		{/if}
-		
-		<Button onclick={() => showElement = !showElement}>
-			{showElement ? 'Hide' : 'Show'} HtmlElement
-		</Button>
-	</div>
-</Story>

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

@@ -1,3 +0,0 @@
-declare const Element: import("svelte").Component<Record<string, never>, {}, "">;
-type Element = ReturnType<typeof Element>;
-export default Element;

package/dist/components/form/field/field-errors.svelte

@@ -1,9 +0,0 @@
-<script>
-	import { FieldBond } from './bond.svelte';
-
-	const bond = FieldBond.get();
-
-	let { children = undefined } = $props();
-</script>
-
-{@render children?.({ errors: bond?.state.errors ?? [] })}

package/dist/components/form/field/field-errors.svelte.d.ts

@@ -1,11 +0,0 @@
-export default FieldErrors;
-type FieldErrors = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const FieldErrors: import("svelte").Component<{
-    children?: any;
-}, {}, "">;
-type $$ComponentProps = {
-    children?: any;
-};

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

@@ -1,96 +0,0 @@
-<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/form/form.stories.svelte.d.ts

@@ -1,18 +0,0 @@
-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 Form: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Form = InstanceType<typeof Form>;
-export default Form;

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

@@ -1,20 +0,0 @@
-<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/image/image.stories.svelte.d.ts

@@ -1,26 +0,0 @@
-export default Image;
-type Image = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
-};
-declare const Image: $$__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/input/input.stories.svelte

@@ -1,35 +0,0 @@
-<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/input/input.stories.svelte.d.ts

@@ -1,18 +0,0 @@
-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 Input: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Input = InstanceType<typeof Input>;
-export default Input;

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

@@ -1,15 +0,0 @@
-<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,26 +0,0 @@
-export default Label;
-type Label = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
-};
-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,28 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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/link/link.stories.svelte

@@ -1,15 +0,0 @@
-<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>