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

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

@@ -1,9 +1,7 @@
 <script module>
 	import { animate } from 'motion';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Drawer as Drawer_ } from '.';
-	import { DrawerBond } from './bond.svelte';
-	import { on } from '../../attachments/event.svelte';
+	import { clickoutDrawer, Drawer as Drawer_ } from '.';
 
 	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 	const { Story } = defineMeta({
@@ -19,37 +17,23 @@
 </script>
 
 <script lang="ts">
+	import { animateDrawerContent, animateDrawerRoot } from './motion';
+
 	let isOpen = $state(false);
 </script>
 
 <Story name="Left" args={{}}>
 	<Drawer_.Root
-		class=" border backdrop-blur-md backdrop-grayscale-100"
 		bind:open={isOpen}
-		initial={(node) => {
-			animate(node, { opacity: +isOpen }, { duration: 0 });
-		}}
-		animate={(node) => {
-			animate(node, { opacity: +isOpen }, { duration: 0.3 }).finished.then(() => {
-				if (!isOpen) node.close?.();
-			});
-		}}
-		{@attach (node) => {
-			const bond = DrawerBond.get();
-
-			return on('click', (ev) => {
-				bond?.state?.close?.();
-			})(node);
-		}}
+		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"
-			initial={(node) => {
-				animate(node, { x: isOpen ? 0 : -100 + '%' } as any, { duration: 0 });
-			}}
-			animate={(node) => {
-				animate(node, { x: isOpen ? 0 : -100 + '%' } as any, { duration: 0.2, ease: 'easeOut' });
-			}}
+			animate={animateDrawerContent({ ease: 'easeOut', side: 'left' })}
+			{@attach clickoutDrawer((_, bond) => {
+				bond?.state?.close?.();
+			})}
 		>
 			<Drawer_.Header class="flex items-center justify-between">
 				<div class="flex flex-col">
@@ -77,30 +61,16 @@
 
 <Story name="Top" args={{}}>
 	<Drawer_.Root
-		class=" border backdrop-blur-md backdrop-grayscale-100"
 		bind:open={isOpen}
-		initial={(node) => animate(node, { opacity: +isOpen }, { duration: 0 })}
-		animate={(node) => {
-			animate(node, { opacity: +isOpen }, { duration: 0.3 }).finished.then(() => {
-				if (!isOpen) node.close?.();
-			});
-		}}
-		{@attach (node) => {
-			const bond = DrawerBond.get();
-
-			return on('click', (ev) => {
-				bond?.state?.close?.();
-			})(node);
-		}}
+		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"
-			initial={(node) => {
-				animate(node, { y: isOpen ? 0 : -100 + '%' } as any, { duration: 0 });
-			}}
-			animate={(node) => {
-				animate(node, { y: isOpen ? 0 : -100 + '%' } as any, { duration: 0.2, ease: 'easeOut' });
-			}}
+			animate={animateDrawerContent({ ease: 'easeOut', side: 'top' })}
+			{@attach clickoutDrawer((_, bond) => {
+				bond?.state?.close?.();
+			})}
 		>
 			<div>
 				<div>Svelte Fluent</div>
@@ -118,37 +88,15 @@
 
 <Story name="Right" args={{}}>
 	<Drawer_.Root
-		class=" border backdrop-blur-md backdrop-grayscale-100"
 		bind:open={isOpen}
-		initial={(node) => {
-			animate(node, { opacity: +isOpen }, { duration: 0 });
-		}}
-		animate={(node) => {
-			animate(node, { opacity: +isOpen }, { duration: 0.3 }).finished.then(() => {
-				if (!isOpen) node.close?.();
-			});
-		}}
-		{@attach (node) => {
-			const bond = DrawerBond.get();
-
-			return on('click', (ev) => {
-				bond?.state?.close?.();
-			})(node);
-		}}
+		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-lg"
-			initial={(node) => {
-				animate(node, { x: isOpen ? 0 : 100 + '%', right: 0 } as any, { duration: 0 });
-			}}
-			animate={(node) => {
-				animate(node, { x: isOpen ? 0 : 100 + '%', right: 0 } as any, {
-					duration: 0.2,
-					ease: 'easeOut'
-				});
-			}}
-			{@attach on('click', (ev) => {
-				ev.stopPropagation();
+			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>
@@ -167,35 +115,19 @@
 
 <Story name="Bottom" args={{}}>
 	<Drawer_.Root
-		class=" border backdrop-blur-md backdrop-grayscale-100"
 		bind:open={isOpen}
+		class=" border backdrop-blur-md backdrop-grayscale-100"
 		initial={(node) => {
 			animate(node, { opacity: +isOpen }, { duration: 0 });
 		}}
-		animate={(node) => {
-			animate(node, { opacity: +isOpen }, { duration: 0.3 }).finished.then(() => {
-				if (!isOpen) node.close?.();
-			});
-		}}
-		{@attach (node) => {
-			const bond = DrawerBond.get();
-
-			return on('click', (ev) => {
-				bond?.state?.close?.();
-			})(node);
-		}}
+		animate={animateDrawerRoot()}
 	>
 		<Drawer_.Content
 			class="border-border flex w-md min-w-full flex-col border-t p-8 whitespace-nowrap shadow-md"
-			initial={(node) => {
-				animate(node, { y: isOpen ? 0 : 100 + '%', bottom: 0 } as any, { duration: 0 });
-			}}
-			animate={(node) => {
-				animate(node, { y: isOpen ? 0 : 100 + '%', bottom: 0 } as any, {
-					duration: 0.2,
-					ease: 'easeOut'
-				});
-			}}
+			animate={animateDrawerContent({ ease: 'easeOut', side: 'bottom' })}
+			{@attach clickoutDrawer((_, bond) => {
+				bond?.state?.close?.();
+			})}
 		>
 			<div>
 				<div>Svelte Fluent</div>

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

@@ -1,4 +1,6 @@
 export * as Drawer from './atoms';
 export { clickoutDrawer, closeDrawer, openDrawer, drawer, toggleDrawer } from './attachments.svelte';
 export { DrawerBond, type DrawerBondElements, type DrawerBondProps, DrawerBondState } from './bond.svelte';
+export * from './attachments.svelte';
+export * from './motion';
 export * from './types';

package/dist/components/drawer/index.js

@@ -1,4 +1,6 @@
 export * as Drawer from './atoms';
 export { clickoutDrawer, closeDrawer, openDrawer, drawer, toggleDrawer } from './attachments.svelte';
 export { DrawerBond, DrawerBondState } from './bond.svelte';
+export * from './attachments.svelte';
+export * from './motion';
 export * from './types';

package/dist/components/drawer/motion.d.ts

@@ -0,0 +1,15 @@
+import { type Easing } from 'motion';
+type AnimateDrawerContentParams = {
+    duration?: number;
+    delay?: number;
+    ease?: Easing | Easing[];
+    side?: 'left' | 'right' | 'top' | 'bottom';
+};
+export declare function animateDrawerContent(params: AnimateDrawerContentParams): (node: HTMLElement) => void;
+type AnimateDrawerRootParams = {
+    duration?: number;
+    delay?: number;
+    ease?: Easing | Easing[];
+};
+export declare function animateDrawerRoot(params?: AnimateDrawerRootParams): (node: HTMLElement) => void;
+export {};

package/dist/components/drawer/motion.js

@@ -0,0 +1,28 @@
+import { animate } from 'motion';
+import { DURATION } from '../../shared';
+import { DrawerBond } from '.';
+export function animateDrawerContent(params) {
+    const { duration = DURATION.fast / 1000, delay = 0, ease = 'easeInOut', side = 'left' } = params;
+    const bond = DrawerBond.get();
+    const isOpen = bond?.state.props.open ?? false;
+    const mainProp = side === 'left' || side === 'right' ? 'x' : 'y';
+    const crossProp = mainProp === 'x' ? 'y' : 'x';
+    const d = side === 'left' || side === 'top' ? -1 : 1;
+    return (node) => {
+        animate(node, {
+            [mainProp]: isOpen ? 0 : d * 100 + '%',
+            [crossProp]: 0,
+            left: 'unset',
+            right: 'unset',
+            [side]: 0
+        }, { duration, ease, delay });
+    };
+}
+export function animateDrawerRoot(params = {}) {
+    const { duration = DURATION.fast / 1000, delay = 0, ease = 'easeInOut' } = params;
+    return (node) => {
+        const bond = DrawerBond.get();
+        const isOpen = bond?.state.props.open ?? false;
+        animate(node, { opacity: +isOpen }, { duration, ease, delay });
+    };
+}

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

@@ -6,4 +6,4 @@ export { default as Query } from './dropdown-query.svelte';
 export { default as Value } from './dropdown-value.svelte';
 export { default as Values } from './dropdown-values.svelte';
 export { Arrow, Indicator } from '../popover/atoms';
-export { List } from '../menu/atoms';
+export { List, Divider, Title, Group } from '../menu/atoms';

package/dist/components/dropdown/atoms.js

@@ -6,4 +6,4 @@ export { default as Query } from './dropdown-query.svelte';
 export { default as Value } from './dropdown-value.svelte';
 export { default as Values } from './dropdown-values.svelte';
 export { Arrow, Indicator } from '../popover/atoms';
-export { List } from '../menu/atoms';
+export { List, Divider, Title, Group } from '../menu/atoms';

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

@@ -13,14 +13,18 @@ export type DropdownBondElements = PopoverDomElements & {
 export declare class DropdownBond<Props extends DropdownStateProps = DropdownStateProps, State extends DropdownBondState<Props> = DropdownBondState<Props>, Elements extends DropdownBondElements = DropdownBondElements> extends PopoverBond<Props, State, Elements> {
     constructor(state: State);
     content(props?: Record<string, unknown>): {
+        onchange?: (node: HTMLElement, position: import("@floating-ui/core").ComputePositionReturn) => void;
         id: string;
         role: string;
         'aria-modal': boolean;
         'aria-labelledby': string;
-        'aria-controlledby': string;
+        'aria-hidden': boolean;
+        inert: string | undefined;
+        tabindex: number;
         'data-atom': string;
         'data-kind': string;
         'data-active': boolean;
+        onkeydown: ((ev: KeyboardEvent) => void) | undefined;
     };
     placeholder(): {
         [x: symbol]: (node: HTMLElement) => void;

package/dist/components/dropdown/dropdown-root.svelte

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T">
-	import { defineProperty, defineState } from '../../utils';
-	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		values = $bindable(),
-		multiple = false,
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 1,
-		keys = [],
-		factory = _factory,
-		children = undefined,
-		onquerychange = undefined,
-		...restProps
-	} = $props();
-
-	const bondProps = defineState<DropdownStateProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value].filter(Boolean)),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty('multiple', () => multiple),
-			defineProperty('disabled', () => disabled),
-			defineProperty('placement', () => placement),
-			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? []),
-			defineProperty('keys', () => keys ?? [])
-		],
-		() => ({ onquerychange })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new DropdownBondState<T>(() => props);
-		return new DropdownBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ dropdown: bond })}
+<script lang="ts" generics="T">
+	import { defineProperty, defineState } from '../../utils';
+	import { DropdownBond, DropdownBondState, type DropdownStateProps } from './bond.svelte';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		values = $bindable(),
+		multiple = false,
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 1,
+		keys = [],
+		factory = _factory,
+		children = undefined,
+		onquerychange = undefined,
+		...restProps
+	} = $props();
+
+	const bondProps = defineState<DropdownStateProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'values',
+				() => (multiple ? values : [value].filter(Boolean)),
+				(v) => {
+					values = v;
+					value = v[0];
+				}
+			),
+			defineProperty('multiple', () => multiple),
+			defineProperty('disabled', () => disabled),
+			defineProperty('placement', () => placement),
+			defineProperty('offset', () => offset),
+			defineProperty('placements', () => placements ?? []),
+			defineProperty('keys', () => keys ?? [])
+		],
+		() => ({ onquerychange })
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new DropdownBondState<T>(() => props);
+		return new DropdownBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ dropdown: bond })}

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

@@ -1,80 +1,80 @@
-<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>
+<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/dropdown/index.d.ts

@@ -2,3 +2,4 @@ export * as Dropdown from './atoms';
 export { DropdownBond, type DropdownBondElements, DropdownBondState, type DropdownStateProps } from './bond.svelte';
 export { filter } from './runes.svelte';
 export * from './types';
+export type { AnimatePopoverContentParams as AnimateDropdownContentParams, animatePopoverContent as animateDropdownContent } from '../popover/motion';