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

package/dist/components/root/root.svelte

@@ -1,121 +1,121 @@
-<script module lang="ts">
-	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
-</script>
-
-<script lang="ts">
-	import { cn, defineState, defineProperty } from '../../utils';
-	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
-	import { Portal, ActivePortal, Portals } from '../portal';
-	import { Stack } from '../stack';
-	import { HtmlAtom } from '../atom';
-	import { HtmlElement, MathmlElement, SvgElement } from '../element';
-
-	let {
-		class: klass = '',
-		base = undefined,
-		children = undefined,
-		portals = undefined,
-		...restProps
-	} = $props();
-
-	let html: typeof HtmlElement | undefined = HtmlElement;
-	let svg: typeof SvgElement | undefined = undefined;
-	let mathml: typeof MathmlElement | undefined = undefined;
-
-	type Renderers = {
-		html?: typeof HtmlElement;
-		svg?: typeof SvgElement;
-		mathml?: typeof MathmlElement;
-	};
-
-	const renderers = defineState<Renderers>([
-		defineProperty('html', () => {
-			if (!html) {
-				import('../element/html-element.svelte').then((mod) => {
-					html = mod.default;
-				});
-			}
-
-			return html;
-		}),
-		defineProperty('svg', () => {
-			if (!svg) {
-				import('../element/svg-element.svelte').then((mod) => {
-					svg = mod.default;
-				});
-			}
-
-			return svg;
-		}),
-		defineProperty('mathml', () => {
-			if (!mathml) {
-				import('../element/mathml-element.svelte').then((mod) => {
-					mathml = mod.default;
-				});
-			}
-
-			return mathml;
-		})
-	]);
-
-	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
-
-	const bondState = new RootBondState(() => bondProps);
-	const bond = new RootBond(bondState).share();
-</script>
-
-<Portals id="root">
-	<HtmlAtom
-		{@attach (node) => {
-			bond.rootElement = node;
-		}}
-		{base}
-		preset="root"
-		class={cn(
-			'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
-			'$preset',
-			klass
-		)}
-		{...restProps}
-	>
-		{#if portals}
-			{@render portals?.()}
-		{:else}
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l0"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l1"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l2"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l3"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-		{/if}
-
-		<ActivePortal portal="root.l0">
-			{@render children?.()}
-		</ActivePortal>
-	</HtmlAtom>
-</Portals>
+<script module lang="ts">
+	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
+</script>
+
+<script lang="ts">
+	import { cn, defineState, defineProperty } from '../../utils';
+	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
+	import { Portal, ActivePortal, Portals } from '../portal';
+	import { Stack } from '../stack';
+	import { HtmlAtom } from '../atom';
+	import { HtmlElement, MathmlElement, SvgElement } from '../element';
+
+	let {
+		class: klass = '',
+		base,
+		children = undefined,
+		portals = undefined,
+		...restProps
+	} = $props();
+
+	let html: typeof HtmlElement | undefined = HtmlElement;
+	let svg: typeof SvgElement | undefined = undefined;
+	let mathml: typeof MathmlElement | undefined = undefined;
+
+	type Renderers = {
+		html?: typeof HtmlElement;
+		svg?: typeof SvgElement;
+		mathml?: typeof MathmlElement;
+	};
+
+	const renderers = defineState<Renderers>([
+		defineProperty('html', () => {
+			if (!html) {
+				import('../element/html-element.svelte').then((mod) => {
+					html = mod.default;
+				});
+			}
+
+			return html;
+		}),
+		defineProperty('svg', () => {
+			if (!svg) {
+				import('../element/svg-element.svelte').then((mod) => {
+					svg = mod.default;
+				});
+			}
+
+			return svg;
+		}),
+		defineProperty('mathml', () => {
+			if (!mathml) {
+				import('../element/mathml-element.svelte').then((mod) => {
+					mathml = mod.default;
+				});
+			}
+
+			return mathml;
+		})
+	]);
+
+	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
+
+	const bondState = new RootBondState(() => bondProps);
+	const bond = new RootBond(bondState).share();
+</script>
+
+<Portals id="root">
+	<Stack.Root
+		{@attach (node) => {
+			bond.rootElement = node;
+		}}
+		{base}
+		preset="root"
+		class={cn(
+			'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start justify-stretch font-sans',
+			'$preset',
+			klass
+		)}
+		{...restProps}
+	>
+		{#if portals}
+			{@render portals?.()}
+		{:else}
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l0"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l1"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l2"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l3"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+		{/if}
+
+		<ActivePortal portal="root.l0">
+			{@render children?.()}
+		</ActivePortal>
+	</Stack.Root>
+</Portals>

package/dist/components/root/root.svelte.d.ts

@@ -1,7 +1,7 @@
 export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
 declare const Root: import("svelte").Component<{
     class?: string;
-    base?: any;
+    base: any;
     children?: any;
     portals?: any;
 } & Record<string, any>, {}, "">;

package/dist/components/scrollable/scrollable.stories.svelte

@@ -1,126 +1,116 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Scrollable as Scrollable_ } from '.';
-	import { Root as ScrollableRoot } from './atoms';
-	import gsap from 'gsap';
-	import { ScrollableBond } from './bond.svelte';
-	import Root from '../root/root.svelte';
-	import { on } from '../../attachments/event.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Scrollable'
-	});
-</script>
-
-<Story name="Scrollable">
-	<Root class="p-0">
-		{#snippet children({ args })}
-			<div class="h-full w-full flex-1">
-				<Scrollable_.Root
-					class="border-border box-border flex min-h-full w-full rounded-lg border shadow-inner"
-					open={false}
-					{@attach (node) => {
-						const scrollable = ScrollableBond.get();
-						if (!scrollable) return;
-
-						const c1 = on('pointerenter', () => {
-							scrollable.state.props.open = true;
-						})(node);
-
-						const c2 = on('pointerleave', () => {
-							scrollable.state.props.open = false;
-						})(node);
-
-						return () => {
-							c1();
-							c2();
-						};
-					}}
-				>
-					{#snippet children({ scrollable })}
-						<Scrollable_.Container class="max-h-[100svh]">
-							<Scrollable_.Content>
-								<div class="mx-auto w-[600px] p-4">
-									<h3 class="mb-4 text-lg font-semibold">Scrollable Content (New API)</h3>
-									<div class="grid grid-cols-3 gap-4">
-										{#each Array(99) as _, i}
-											<div class="rounded border p-4 shadow">
-												<h4 class="font-medium">Card {i + 1}</h4>
-												<p class="mt-2 text-sm">
-													This is some sample content in card {i + 1}. You can scroll horizontally
-													and vertically to see more content.
-												</p>
-											</div>
-										{/each}
-									</div>
-
-									<div class="bg-foreground/10 mt-6 rounded p-4">
-										<p class="text-sm">
-											This content area is larger than the container, so you can scroll both
-											horizontally and vertically using the custom scrollbars or mouse wheel.
-										</p>
-									</div>
-
-									<div class="mt-4 flex gap-2">
-										<button
-											class="rounded bg-blue-500 px-3 py-2 hover:bg-blue-600"
-											onclick={() => scrollable.scrollTo(0, 0)}
-										>
-											Scroll to Top
-										</button>
-										<button
-											class="rounded bg-green-500 px-3 py-2 hover:bg-green-600"
-											onclick={() => scrollable.scrollBy(50, 50)}
-										>
-											Scroll +50px
-										</button>
-									</div>
-								</div>
-							</Scrollable_.Content>
-						</Scrollable_.Container>
-
-						<!-- New unified vertical scrollbar -->
-						<Scrollable_.Track
-							orientation="vertical"
-							class="inset-y-0 right-0 w-[2px] rounded-md"
-							initial={(node) => gsap.set(node, { opacity: 0, right: 0, top: 0, bottom: 0 })}
-							enter={(node) => {
-								const tween = gsap.to(node, {
-									opacity: 1,
-									duration: 0.3,
-									right: 8,
-									top: 8,
-									bottom: 8,
-									ease: 'power2.out'
-								});
-
-								return {
-									duration: tween.duration() * 1000
-								};
-							}}
-							exit={(node) => {
-								const tween = gsap.to(node, {
-									opacity: 0,
-									right: 0,
-									top: 0,
-									bottom: 0,
-									duration: 0.3,
-									ease: 'power2.out'
-								});
-
-								return {
-									duration: tween.duration() * 1000
-								};
-							}}
-						>
-							<Scrollable_.Thumb
-								orientation="vertical"
-								class="left-[50%] w-2 origin-center translate-x-[-50%] rounded-none transition-colors"
-							/>
-						</Scrollable_.Track>
-					{/snippet}
-				</Scrollable_.Root>
-			</div>
-		{/snippet}
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Scrollable as Scrollable_ } from '.';
+	import { animate } from 'motion';
+	import { ScrollableBond } from './bond.svelte';
+	import { on } from '../../attachments/event.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Scrollable'
+	});
+</script>
+
+<Story name="Scrollable">
+	{#snippet children({ args })}
+		<div class="h-full w-full flex-1">
+			<Scrollable_.Root
+				class="border-border box-border flex min-h-full w-full rounded-lg border shadow-inner"
+				open={false}
+				{@attach (node) => {
+					const scrollable = ScrollableBond.get();
+					if (!scrollable) return;
+
+					const c1 = on('pointerenter', () => {
+						scrollable.state.props.open = true;
+					})(node);
+
+					const c2 = on('pointerleave', () => {
+						scrollable.state.props.open = false;
+					})(node);
+
+					return () => {
+						c1();
+						c2();
+					};
+				}}
+			>
+				{#snippet children({ scrollable })}
+					<Scrollable_.Container class="max-h-[100svh]">
+						<Scrollable_.Content>
+							<div class="mx-auto w-[600px] p-4">
+								<h3 class="mb-4 text-lg font-semibold">Scrollable Content (New API)</h3>
+								<div class="grid grid-cols-3 gap-4">
+									{#each Array(99) as _, i}
+										<div class="rounded border p-4 shadow">
+											<h4 class="font-medium">Card {i + 1}</h4>
+											<p class="mt-2 text-sm">
+												This is some sample content in card {i + 1}. You can scroll horizontally and
+												vertically to see more content.
+											</p>
+										</div>
+									{/each}
+								</div>
+
+								<div class="bg-foreground/10 mt-6 rounded p-4">
+									<p class="text-sm">
+										This content area is larger than the container, so you can scroll both
+										horizontally and vertically using the custom scrollbars or mouse wheel.
+									</p>
+								</div>
+
+								<div class="mt-4 flex gap-2">
+									<button
+										class="rounded bg-blue-500 px-3 py-2 hover:bg-blue-600"
+										onclick={() => scrollable.scrollTo(0, 0)}
+									>
+										Scroll to Top
+									</button>
+									<button
+										class="rounded bg-green-500 px-3 py-2 hover:bg-green-600"
+										onclick={() => scrollable.scrollBy(50, 50)}
+									>
+										Scroll +50px
+									</button>
+								</div>
+							</div>
+						</Scrollable_.Content>
+					</Scrollable_.Container>
+
+					<!-- New unified vertical scrollbar -->
+					<Scrollable_.Track
+						orientation="vertical"
+						class="inset-y-0 right-0 w-[2px] rounded-md"
+						initial={(node) => {
+							animate(node, { opacity: 0, right: 0, top: 0, bottom: 0 }, { duration: 0 });
+						}}
+						enter={(node) => {
+							animate(
+								node,
+								{ opacity: 1, right: 8, top: 8, bottom: 8 },
+								{ duration: 0.3, ease: 'easeOut' }
+							);
+							return {
+								duration: 300
+							};
+						}}
+						exit={(node) => {
+							animate(
+								node,
+								{ opacity: 0, right: 0, top: 0, bottom: 0 },
+								{ duration: 0.3, ease: 'easeOut' }
+							);
+							return {
+								duration: 300
+							};
+						}}
+					>
+						<Scrollable_.Thumb
+							orientation="vertical"
+							class="left-[50%] w-2 origin-center translate-x-[-50%] rounded-none transition-colors"
+						/>
+					</Scrollable_.Track>
+				{/snippet}
+			</Scrollable_.Root>
+		</div>
+	{/snippet}
+</Story>

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

@@ -2,18 +2,20 @@
 	import { HtmlAtom, type Base } from '../atom';
 	import { SidebarBond } from './bond.svelte';
 	import type { SidebarRootProps } from './types';
+	import { animate as motion } from 'motion';
 
 	const bond = SidebarBond.get();
 
 	let {
 		class: klass = '',
+		width = 'auto',
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
-		animate = undefined,
+		animate = _animate,
 		enter = undefined,
 		exit = undefined,
-		initial = undefined,
+		initial = _initial,
 		...restProps
 	}: SidebarRootProps<E, B> = $props();
 
@@ -21,6 +23,15 @@
 		...bond?.content(),
 		...restProps
 	});
+
+	const isOpen = $derived(bond?.state.props.open);
+
+	function _initial(node: HTMLElement) {
+		motion(node, { width: isOpen ? width : 0 }, { duration: 0 });
+	}
+	function _animate(node: HTMLElement) {
+		motion(node, { width: isOpen ? width : 0 }, { duration: 0.3, ease: 'anticipate' });
+	}
 </script>
 
 <HtmlAtom

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

@@ -11,18 +11,16 @@
 		children = undefined
 	}: SidebarRootProps<E, B> = $props();
 
-	const bondProps = defineState<SidebarBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty('disabled', () => disabled)
-		]
-	);
+	const bondProps = defineState<SidebarBondProps>([
+		defineProperty(
+			'open',
+			() => open,
+			(v) => {
+				open = v;
+			}
+		),
+		defineProperty('disabled', () => disabled)
+	]);
 
 	const bond = factory(bondProps).share();
 

package/dist/components/sidebar/sidebar.stories.svelte

@@ -1,11 +1,6 @@
 <script module>
-	import { cubicOut } from 'svelte/easing';
-	import gsap from 'gsap';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { Sidebar as Sidebar_ } from '.';
-	import Root from '../root/root.svelte';
-	import { on } from '../../attachments';
-	import { SidebarBond } from './bond.svelte';
 
 	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 	const { Story } = defineMeta({
@@ -22,26 +17,20 @@
 
 <script lang="ts">
 	let isOpen = $state(false);
-	$inspect(isOpen);
 </script>
 
 <Story name="Sidebar" args={{}}>
-	<Root class="">
-		<Sidebar_.Root class="" bind:open={isOpen}>
+	<Sidebar_.Root class="" bind:open={isOpen}>
+		{#snippet children({ sidebar })}
 			<div class="flex size-full">
 				<Sidebar_.Content
-					class="flex flex-col border-r px-6 py-10 whitespace-nowrap"
-					initial={(node) => gsap.set(node, { width: isOpen ? 240 : 96 })}
-					animate={(node) =>
-						gsap.to(node, { width: isOpen ? 240 : 96, duration: 0.2, ease: cubicOut })}
+					class="flex min-w-32 flex-col border-r px-6 py-10 whitespace-nowrap"
+					width="300px"
 				>
 					<div>
 						<button
-							{@attach (node) => {
-								const bond = SidebarBond.get();
-								return on('click', (ev) => {
-									bond?.state.toggle?.();
-								})(node);
+							onclick={() => {
+								sidebar?.state.toggle?.();
 							}}>Open</button
 						>
 					</div>
@@ -49,6 +38,6 @@
 
 				<main class="bg-foreground/2 flex-1 p-8">Hello World!</main>
 			</div>
-		</Sidebar_.Root>
-	</Root>
+		{/snippet}
+	</Sidebar_.Root>
 </Story>

package/dist/components/sidebar/types.d.ts

@@ -20,6 +20,7 @@ export interface SidebarRootProps<E extends keyof HTMLElementTagNameMap = 'div',
 }>, SidebarRootExtendProps {
     open?: boolean;
     disabled?: boolean;
+    width?: string | number;
     factory?: Factory<SidebarBond>;
 }
 export interface SidebarContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {

package/dist/components/tabs/tab/bond.svelte.d.ts

@@ -18,7 +18,10 @@ export declare class TabBond<T = unknown> extends Bond<TabBondProps<T>, TabBondS
     mount(): (() => void) | undefined;
     unmount(): void;
     share(): this;
-    root(props?: Record<string, unknown>): {};
+    root(props?: Record<string, unknown>): {
+        'data-active': boolean;
+        'data-kind': string;
+    };
     header(props?: Record<string, unknown>): {
         id: string;
         role: string;

package/dist/components/tabs/tab/bond.svelte.js

@@ -30,7 +30,10 @@ export class TabBond extends Bond {
         return TabBond.set(this);
     }
     root(props) {
-        return {};
+        return {
+            'data-active': this.state.isActive,
+            'data-kind': 'tab-root'
+        };
     }
     header(props) {
         const id = getElementId(this.id, TAB_ELEMENTS_KIND.header);