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

package/dist/components/drawer/drawer-content.svelte

@@ -1,42 +1,49 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import type { SlideoverContentProps } from './types';
-	import { DrawerBond } from './bond.svelte';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = DrawerBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const contentProps = $derived({
-		...bond?.content(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	preset="drawer.content"
-	class={['bg-card text-foreground border-border absolute', '$preset', klass]}
-	{bond}
-	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)}
-	{...contentProps}
->
-	{@render children?.({ drawer: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom as Atom, type Base } from '../atom';
+	import type { SlideoverContentProps } from './types';
+	import { DrawerBond } from './bond.svelte';
+	import { animateDrawerContent } from './motion';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+	const isOpen = $derived(bond?.state.props.open);
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = animateDrawerContent({ ease: 'easeOut', side: 'left' }),
+		enter = undefined,
+		exit = undefined,
+		initial = animateDrawerContent({ ease: 'easeOut', side: 'left', duration: 0 }),
+		...restProps
+	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+</script>
+
+<Atom
+	preset="drawer.content"
+	class={[
+		'bg-card text-foreground border-border pointer-events-none absolute',
+		isOpen && 'pointer-events-auto',
+		'$preset',
+		klass
+	]}
+	{bond}
+	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)}
+	{...contentProps}
+>
+	{@render children?.({ drawer: bond })}
+</Atom>

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

@@ -1,224 +1,144 @@
-<script module>
-	import { cubicOut } from 'svelte/easing';
-	import gsap from 'gsap';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Drawer as Drawer_ } from '.';
-	import Root from '../root/root.svelte';
-	import { DrawerBond } from './bond.svelte';
-	import { on } from '../../attachments/event.svelte';
-
-	// 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">
-	let isOpen = $state(false);
-</script>
-
-<Story name="Left" args={{}}>
-	<Root class="p-4">
-		<Drawer_.Root
-			class=" border backdrop-blur-md backdrop-grayscale-100"
-			bind:open={isOpen}
-			initial={(node) => {
-				gsap.set(node, { opacity: +isOpen });
-			}}
-			animate={(node) => {
-				gsap.to(node, {
-					opacity: +isOpen,
-					duration: 0.3,
-					onComplete: () => !isOpen && node.close?.()
-				});
-			}}
-			{@attach (node) => {
-				const bond = DrawerBond.get();
-
-				return on('click', (ev) => {
-					bond?.state?.close?.();
-				})(node);
-			}}
-		>
-			<Drawer_.Content
-				class="border-border flex min-h-full w-md flex-col border-r p-8 whitespace-nowrap shadow-md"
-				initial={(node) => {
-					gsap.set(node, { xPercent: isOpen ? 0 : -100, left: 0 });
-				}}
-				animate={(node) => {
-					gsap.to(node, { xPercent: isOpen ? 0 : -100, left: 0, duration: 0.2, ease: cubicOut });
-				}}
-			>
-				<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
-		>
-	</Root>
-</Story>
-
-<Story name="Top" args={{}}>
-	<Root class="p-4">
-		<Drawer_.Root
-			class=" border backdrop-blur-md backdrop-grayscale-100"
-			bind:open={isOpen}
-			initial={(node) => gsap.set(node, { opacity: +isOpen })}
-			animate={(node) => {
-				gsap.to(node, {
-					opacity: +isOpen,
-					duration: 0.3,
-					onComplete: () => !isOpen && node.close?.()
-				});
-			}}
-			{@attach (node) => {
-				const bond = DrawerBond.get();
-
-				return on('click', (ev) => {
-					bond?.state?.close?.();
-				})(node);
-			}}
-		>
-			<Drawer_.Content
-				class="border-border flex w-md min-w-full flex-col border-b p-8 whitespace-nowrap shadow-md"
-				initial={(node) => {
-					gsap.set(node, { yPercent: isOpen ? 0 : -100, top: 0 });
-				}}
-				animate={(node) => {
-					gsap.to(node, { yPercent: isOpen ? 0 : -100, top: 0, duration: 0.2, ease: cubicOut });
-				}}
-			>
-				<div>
-					<div>Svelte Fluent</div>
-				</div>
-			</Drawer_.Content>
-		</Drawer_.Root>
-
-		<button
-			class="bg-red-500 p-2"
-			onclick={() => {
-				isOpen = !isOpen;
-			}}>Open</button
-		>
-	</Root>
-</Story>
-
-<Story name="Right" args={{}}>
-	<Root class="p-4">
-		<Drawer_.Root
-			class=" border backdrop-blur-md backdrop-grayscale-100"
-			bind:open={isOpen}
-			initial={(node) => {
-				gsap.set(node, { opacity: +isOpen });
-			}}
-			animate={(node) => {
-				gsap.to(node, {
-					opacity: +isOpen,
-					duration: 0.3,
-					onComplete: () => !isOpen && node.close?.()
-				});
-			}}
-			{@attach (node) => {
-				const bond = DrawerBond.get();
-
-				return on('click', (ev) => {
-					bond?.state?.close?.();
-				})(node);
-			}}
-		>
-			<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) => {
-					gsap.set(node, { xPercent: isOpen ? 0 : 100, right: 0 });
-				}}
-				animate={(node) => {
-					gsap.to(node, { xPercent: isOpen ? 0 : 100, right: 0, duration: 0.2, ease: cubicOut });
-				}}
-				{@attach on('click', (ev) => {
-					ev.stopPropagation();
-				})}
-			>
-				<div>
-					<div>Svelte Fluent</div>
-				</div>
-			</Drawer_.Content>
-		</Drawer_.Root>
-
-		<button
-			class="bg-red-500 p-2"
-			onclick={() => {
-				isOpen = !isOpen;
-			}}>Open</button
-		>
-	</Root>
-</Story>
-
-<Story name="Bottom" args={{}}>
-	<Root class="p-4">
-		<Drawer_.Root
-			class=" border backdrop-blur-md backdrop-grayscale-100"
-			bind:open={isOpen}
-			initial={(node) => {
-				gsap.set(node, { opacity: +isOpen });
-			}}
-			animate={(node) => {
-				gsap.to(node, {
-					opacity: +isOpen,
-					duration: 0.3,
-					onComplete: () => !isOpen && node.close?.()
-				});
-			}}
-			{@attach (node) => {
-				const bond = DrawerBond.get();
-
-				return on('click', (ev) => {
-					bond?.state?.close?.();
-				})(node);
-			}}
-		>
-			<Drawer_.Content
-				class="border-border flex w-md min-w-full flex-col border-t p-8 whitespace-nowrap shadow-md"
-				onmount={(node) => {
-					gsap.set(node, { yPercent: isOpen ? 0 : 100, bottom: 0 });
-				}}
-				animate={(node) => {
-					gsap.to(node, { yPercent: isOpen ? 0 : 100, bottom: 0, duration: 0.2, ease: cubicOut });
-				}}
-			>
-				<div>
-					<div>Svelte Fluent</div>
-				</div>
-			</Drawer_.Content>
-		</Drawer_.Root>
-
-		<button
-			class="bg-red-500 p-2"
-			onclick={() => {
-				isOpen = !isOpen;
-			}}>Open</button
-		>
-	</Root>
-</Story>
+<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' })}
+			{@attach clickoutDrawer((_, bond) => {
+				bond?.state?.close?.();
+			})}
+		>
+			<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/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

@@ -10,7 +10,7 @@
 		disabled = false,
 		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
 		placement = 'bottom-start',
-		offset = 4,
+		offset = 1,
 		keys = [],
 		factory = _factory,
 		children = undefined,