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

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

@@ -1,96 +1,96 @@
-<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>
+<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,20 +1,20 @@
-<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>
+<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,35 +1,35 @@
-<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>
+<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,15 +1,15 @@
-<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>
+<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/lazy/lazy.stories.svelte

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

@@ -1,15 +1,15 @@
-<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>
+<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/list/list-item.svelte

@@ -4,7 +4,7 @@
 	let {
 		class: klass = '',
 		as = 'li' as T,
-		preset: presetKey = 'list.item',
+		preset = 'list.item',
 		children = undefined,
 		...restProps
 	} = $props();
@@ -12,7 +12,7 @@
 
 <HtmlAtom
 	{as}
-	preset={presetKey}
+	{preset}
 	class={['border-border flex w-full gap-2 px-4 py-1', '$preset', klass]}
 	{...restProps}
 >

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

@@ -1,3 +1,9 @@
-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 { default as Root } from './menu-root.svelte';
+export { default as Content } from './menu-content.svelte';
+/**
+ * @deprecated Use Menu.Content instead
+ */
+export { default as List } from './menu-content.svelte';
+export { default as Item } from './item/menu-item.svelte';
+export { Trigger, Arrow, Indicator } from '../popover/atoms';
+export { Divider, Group, Title } from '../list/atoms';

package/dist/components/menu/atoms.js

@@ -1,3 +1,9 @@
-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 { default as Root } from './menu-root.svelte';
+export { default as Content } from './menu-content.svelte';
+/**
+ * @deprecated Use Menu.Content instead
+ */
+export { default as List } from './menu-content.svelte';
+export { default as Item } from './item/menu-item.svelte';
+export { Trigger, Arrow, Indicator } from '../popover/atoms';
+export { Divider, Group, Title } from '../list/atoms';

package/dist/components/menu/bond.svelte.d.ts

@@ -0,0 +1,54 @@
+import { PopoverBond, PopoverState, type PopoverDomElements, type PopoverStateProps } from '../popover/bond.svelte';
+import type { MenuItemController } from './item/controller.svelte';
+export type MenuBondProps = PopoverStateProps;
+export type MenuBondElements = PopoverDomElements;
+export declare class MenuBond<Props extends MenuBondProps = MenuBondProps, State extends MenuBondState<Props> = MenuBondState<Props>, Elements extends MenuBondElements = MenuBondElements> extends PopoverBond<Props, State, Elements> {
+    constructor(state: State);
+    content(): {
+        role: string;
+        'aria-activedescendant': string | undefined;
+        'aria-orientation': "vertical";
+        onkeydown: (ev: KeyboardEvent) => void;
+        id: string;
+        'aria-modal': boolean;
+        'aria-labelledby': string;
+        inert: boolean | undefined;
+        tabindex: number;
+        'data-atom': string;
+        'data-kind': string;
+        'data-active': boolean;
+    };
+    trigger(): {
+        'aria-haspopup': "menu";
+        onkeydown: (ev: KeyboardEvent) => void;
+        id: string;
+        role: string;
+        disabled: boolean | undefined;
+        tabindex: number;
+        'aria-expanded': boolean;
+        'aria-disabled': boolean;
+        'aria-controls': string;
+        'data-kind': string;
+        onclick: (ev: PointerEvent) => void;
+    };
+    item(): {
+        role: string;
+        onkeyup: (ev: KeyboardEvent) => void;
+    };
+    static get<Props extends MenuBondProps = MenuBondProps, State extends MenuBondState<Props> = MenuBondState<Props>, Elements extends MenuBondElements = MenuBondElements>(): MenuBond<Props, State, Elements> | undefined;
+    static set<Props extends MenuBondProps = MenuBondProps, State extends MenuBondState<Props> = MenuBondState<Props>, Elements extends MenuBondElements = MenuBondElements>(context: MenuBond<Props, State, Elements>): MenuBond<Props, State, Elements>;
+}
+export declare class MenuBondState<Props extends MenuBondProps = MenuBondProps> extends PopoverState<Props> {
+    #private;
+    constructor(props: () => Props);
+    get items(): Map<string, MenuItemController>;
+    get highlightedId(): string | null;
+    get highlightedItem(): MenuItemController | null;
+    get navigation(): {
+        next: () => MenuItemController | null;
+        previous: () => MenuItemController | null;
+    };
+    mountItem(id: string, item: MenuItemController): () => void;
+    unmountItem(id: string): void;
+    item(id: string): MenuItemController | undefined;
+}

package/dist/components/menu/bond.svelte.js

@@ -0,0 +1,132 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { PopoverBond, PopoverState } from '../popover/bond.svelte';
+export class MenuBond extends PopoverBond {
+    constructor(state) {
+        super(state);
+    }
+    content() {
+        const superProps = super.content();
+        const onkeydown = superProps.onkeydown;
+        const highlightedId = this.state.highlightedId;
+        return {
+            ...superProps,
+            role: 'menu',
+            'aria-activedescendant': highlightedId ? `item-${highlightedId}` : undefined,
+            'aria-orientation': 'vertical',
+            onkeydown: (ev) => {
+                // Call any additional onkeydown handler
+                onkeydown?.(ev);
+                if (ev.defaultPrevented)
+                    return;
+                // Handle arrow key navigation
+                if (ev.key === 'ArrowDown') {
+                    this.state.navigation.next();
+                }
+                if (ev.key === 'ArrowUp') {
+                    this.state.navigation.previous();
+                }
+            }
+        };
+    }
+    trigger() {
+        const superProps = super.trigger();
+        return {
+            ...superProps,
+            'aria-haspopup': 'menu',
+            'onkeydown': (ev) => {
+                if (ev.key === 'ArrowDown') {
+                    this.state.navigation.next();
+                }
+                if (ev.key === 'ArrowUp') {
+                    this.state.navigation.previous();
+                }
+                if ((ev.key === 'Enter' || ev.key === ' ') && this.state.props.open && this.state.highlightedItem) {
+                    if (ev.key === ' ') {
+                        ev.preventDefault();
+                    }
+                    this.state.highlightedItem?.element?.click();
+                }
+                // Call any additional onkeydown handler
+                superProps.onkeydown?.(ev);
+            }
+        };
+    }
+    item() {
+        return {
+            role: 'menuitem',
+            onkeyup: (ev) => {
+                const currentTarget = ev.currentTarget;
+                const disabled = currentTarget.getAttribute('disabled') ||
+                    currentTarget.getAttribute('aria-disabled') === 'true';
+                if (disabled)
+                    return;
+                // Activate on Enter or Space
+                if (ev.key === 'Enter' || ev.key === ' ') {
+                    ev.preventDefault();
+                    // Call the click handler if provided
+                    // cast to any to avoid strict event-type mismatch when forwarding
+                    this?.state.close();
+                }
+            }
+        };
+    }
+    static get() {
+        return PopoverBond.get();
+    }
+    static set(context) {
+        return PopoverBond.set(context);
+    }
+}
+export class MenuBondState extends PopoverState {
+    #keys = new SvelteSet();
+    #items = new SvelteMap();
+    #itemsAsArray = $derived(Array.from(this.#items.values()));
+    #index = $state(-1);
+    #highlightedId = $derived(Array.from(this.#items.keys())[this.#index] ?? null);
+    #highlightedItem = $derived(this.#itemsAsArray[this.#index] ?? null);
+    constructor(props) {
+        super(props);
+    }
+    get items() {
+        return this.#items;
+    }
+    get highlightedId() {
+        return this.#highlightedId;
+    }
+    get highlightedItem() {
+        return this.#highlightedItem;
+    }
+    get navigation() {
+        return {
+            next: () => {
+                if (this.#index < 0) {
+                    this.#index = 0;
+                    return this.#highlightedItem;
+                }
+                const length = this.#items.size;
+                this.#index = Math.min((this.#index + 1) % length, length - 1);
+                return this.#highlightedItem;
+            },
+            previous: () => {
+                if (this.#index <= 0) {
+                    this.#index = this.#items.size - 1;
+                    return this.#highlightedItem;
+                }
+                this.#index = Math.max(this.#index - 1, 0);
+                return this.#highlightedItem;
+            }
+        };
+    }
+    mountItem(id, item) {
+        this.#items.set(id, item);
+        return () => this.unmountItem(id);
+    }
+    unmountItem(id) {
+        if (this.#keys.has(id))
+            return; // keep the item if it's still in the data source
+        this.#items.delete(id);
+    }
+    item(id) {
+        return this.#items.get(id);
+    }
+}

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

@@ -1,3 +1,5 @@
 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';
+export * from './item';