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

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

@@ -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';

package/dist/components/menu/menu-item.svelte

@@ -1,51 +1,69 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { PopoverBond } from '../popover/bond.svelte';
-	import type { Base } from '../atom';
-	import { List } from '../list';
-
-	const bond = PopoverBond.get();
-
-	let {
-		class: klass = '',
-		preset: presetKey = 'menu.item',
-		children = undefined,
-		onclick = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	function _onclick(ev: MouseEvent) {
-		onclick?.(ev);
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		bond?.state.close();
-	}
-</script>
-
-<List.Item
-	{bond}
-	preset={presetKey}
-	class={[
-		'border-border last:border-b-none hover:bg-foreground/5 active:bg-foreground/10 cursor-pointer border-b',
-		'$preset',
-		klass
-	]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onclick={_onclick}
-	{...restProps}
->
-	{@render children?.({ menu: bond })}
-</List.Item>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { PopoverBond } from '../popover/bond.svelte';
+	import type { Base } from '../atom';
+	import { List } from '../list';
+
+	const bond = PopoverBond.get();
+
+	let {
+		class: klass = '',
+		preset: presetKey = 'menu.item',
+		children = undefined,
+		onclick = undefined,
+		disabled = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	function _onclick(ev: MouseEvent) {
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond?.state.close();
+	}
+
+	function _onkeydown(ev: KeyboardEvent) {
+		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
+			onclick?.(ev as unknown as MouseEvent);
+			bond?.state.close();
+		}
+	}
+</script>
+
+<List.Item
+	{bond}
+	preset={presetKey}
+	class={[
+		'border-border last:border-b-none hover:bg-foreground/5 active:bg-foreground/10 cursor-pointer border-b',
+		'$preset',
+		klass
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	role="menuitem"
+	aria-disabled={disabled ? true : undefined}
+	tabIndex={disabled ? -1 : 0}
+	onkeydown={_onkeydown}
+	onclick={_onclick}
+	{...restProps}
+>
+	{@render children?.({ menu: bond })}
+</List.Item>

package/dist/components/menu/menu-item.svelte.d.ts

@@ -5,6 +5,7 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B exten
         preset?: string;
         children?: any;
         onclick?: any;
+        disabled?: any;
         onmount?: any;
         ondestroy?: any;
         animate?: any;