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

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

@@ -1,3 +1,5 @@
 export * as Sidebar from './atoms';
+export * from './bond.svelte';
+export * from './motion.svelte';
 export * from './attachments.svelte';
 export * from './types';

package/dist/components/sidebar/index.js

@@ -1,3 +1,5 @@
 export * as Sidebar from './atoms';
+export * from './bond.svelte';
+export * from './motion.svelte';
 export * from './attachments.svelte';
 export * from './types';

package/dist/components/sidebar/motion.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Easing } from 'motion';
+type AnimateSidebarContentParams = {
+    duration?: number;
+    delay?: number;
+    ease?: Easing | Easing[];
+    axis?: 'x' | 'y';
+    0?: number | string;
+    1?: number | string;
+};
+export declare function animateSidebarContent(params: AnimateSidebarContentParams): (node: HTMLElement) => void;
+export {};

package/dist/components/sidebar/motion.svelte.js

@@ -0,0 +1,16 @@
+import { animate } from 'motion';
+import { DURATION } from '../../shared';
+import { SidebarBond } from '.';
+export function animateSidebarContent(params) {
+    const { duration = DURATION.fast / 1000, delay = 0, ease = 'easeInOut', axis = 'x', '0': collapsedSize = '96px', '1': expandedSize = 'auto' } = params;
+    const bond = SidebarBond.get();
+    return (node) => {
+        const isOpen = bond?.state.props.open ?? false;
+        const collapsedProp = axis === 'x' ? 'min-width' : 'min-height';
+        const prop = axis === 'x' ? 'width' : 'height';
+        animate(node, {
+            [prop]: isOpen ? expandedSize : collapsedSize,
+            [collapsedProp]: collapsedSize
+        }, { duration, ease, delay });
+    };
+}

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

@@ -1,50 +1,40 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	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 = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = _initial,
-		...restProps
-	}: SidebarRootProps<E, B> = $props();
-
-	const contentProps = $derived({
-		...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
-	{bond}
-	preset="sidebar.content"
-	class={['bg-card border-border', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...contentProps}
->
-	{@render children?.({ sidebar: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { SidebarBond } from './bond.svelte';
+	import { animateSidebarContent } from './motion.svelte';
+	import type { SidebarRootProps } from './types';
+
+	const bond = SidebarBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = animateSidebarContent({ '0': '0px', '1': 'auto' }),
+		enter = undefined,
+		exit = undefined,
+		initial = animateSidebarContent({ '0': '0px', '1': 'auto', duration: 0 }),
+		...restProps
+	}: SidebarRootProps<E, B> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="sidebar.content"
+	class={['bg-card border-border', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...contentProps}
+>
+	{@render children?.({ sidebar: bond })}
+</HtmlAtom>

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

@@ -1,39 +1,39 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { type Base } from '../atom';
-	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
-	import type { SidebarRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		disabled = false,
-		factory = _factory,
-		children = undefined
-	}: SidebarRootProps<E, B> = $props();
-
-	const bondProps = defineState<SidebarBondProps>([
-		defineProperty(
-			'open',
-			() => open,
-			(v) => {
-				open = v;
-			}
-		),
-		defineProperty('disabled', () => disabled)
-	]);
-
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new SidebarBondState(() => props);
-		const bond = new SidebarBond(bondState);
-
-		return bond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ sidebar: bond })}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { type Base } from '../atom';
+	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
+	import type { SidebarRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		factory = _factory,
+		children = undefined
+	}: SidebarRootProps<E, B> = $props();
+
+	const bondProps = defineState<SidebarBondProps>([
+		defineProperty(
+			'open',
+			() => open,
+			(v) => {
+				open = v;
+			}
+		),
+		defineProperty('disabled', () => disabled)
+	]);
+
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new SidebarBondState(() => props);
+		const bond = new SidebarBond(bondState);
+
+		return bond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ sidebar: bond })}

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

@@ -1,43 +1,43 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Sidebar as Sidebar_ } from '.';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Sidebar',
-		// 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="Sidebar" args={{}}>
-	<Sidebar_.Root class="" bind:open={isOpen}>
-		{#snippet children({ sidebar })}
-			<div class="flex size-full">
-				<Sidebar_.Content
-					class="flex min-w-32 flex-col border-r px-6 py-10 whitespace-nowrap"
-					width="300px"
-				>
-					<div>
-						<button
-							onclick={() => {
-								sidebar?.state.toggle?.();
-							}}>Open</button
-						>
-					</div>
-				</Sidebar_.Content>
-
-				<main class="bg-foreground/2 flex-1 p-8">Hello World!</main>
-			</div>
-		{/snippet}
-	</Sidebar_.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Sidebar as Sidebar_ } from '.';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Sidebar',
+		// 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="Sidebar" args={{}}>
+	<Sidebar_.Root class="" bind:open={isOpen}>
+		{#snippet children({ sidebar })}
+			<div class="flex size-full">
+				<Sidebar_.Content
+					class="flex min-w-32 flex-col border-r px-6 py-10 whitespace-nowrap"
+					width="300px"
+				>
+					<div>
+						<button
+							onclick={() => {
+								sidebar?.state.toggle?.();
+							}}>Open</button
+						>
+					</div>
+				</Sidebar_.Content>
+
+				<main class="bg-foreground/2 flex-1 p-8">Hello World!</main>
+			</div>
+		{/snippet}
+	</Sidebar_.Root>
+</Story>

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

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte';
-import type { Override } from '../../types';
 import type { Factory } from '../../types';
 import type { SidebarBond } from './bond.svelte';
 import type { Base, HtmlAtomProps } from '../atom';
@@ -13,19 +11,11 @@ export interface SidebarRootExtendProps {
  */
 export interface SidebarContentExtendProps {
 }
-export interface SidebarRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        sidebar?: SidebarBond;
-    }]>;
-}>, SidebarRootExtendProps {
+export interface SidebarRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, 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>, {
-    children?: Snippet<[{
-        sidebar?: SidebarBond<any>;
-    }]>;
-}>, SidebarContentExtendProps {
+export interface SidebarContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> extends HtmlAtomProps<E, B>, SidebarContentExtendProps {
 }

package/dist/components/tabs/tabs.stories.svelte

@@ -1,56 +1,56 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Tabs as Tabs_, Tab } from '.';
-	import { Root as TabsRoot } from './atoms';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Tabs',
-		// 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 value = $state('ar');
-</script>
-
-<Story name="Tabs" args={{}}>
-	<Tabs_.Root bind:value>
-		<Tabs_.Header class="border-b" />
-		<Tabs_.Body>
-			<Tab.Root value="en">
-				<Tab.Header>English</Tab.Header>
-				<Tab.Body class="">
-					<div>
-						Ligula ex tincidunt efficitur netus consequat aenean finibus. Dictum ex pretium torquent
-						vel scelerisque quisque class nisl penatibus blandit risus. Pretium praesent egestas
-						ante placerat lacus pede risus pulvinar facilisi.
-					</div>
-				</Tab.Body>
-			</Tab.Root>
-
-			<Tab.Root value="ar">
-				<Tab.Header>Arabic</Tab.Header>
-				<Tab.Body class="h-[1440px]">
-					<div>
-						Interdum turpis taciti mauris orci condimentum vitae malesuada ornare ridiculus ultrices
-						quisque feugiat pretium facilisis justo ligula pede volutpat nisi viverra adipiscing
-						donec torquent ac sapien aliquet parturient posuere leo litora vivamus luctus vestibulum
-						aptent faucibus platea libero dolor purus integer fusce nam senectus nibh nostra diam
-						tortor dictumst praesent tellus montes ad iaculis sociosqu mollis sodales consectetuer
-						hac accumsan dictum blandit conubia velit elit efficitur duis nascetur erat mattis
-						semper et aliquam magna lorem bibendum ante id cursus nulla eget ut pellentesque
-						himenaeos consectetur potenti si maximus ullamcorper etiam nec magnis ipsum mus porta
-						lobortis natoque rhoncus fringilla
-					</div>
-				</Tab.Body>
-			</Tab.Root>
-		</Tabs_.Body>
-	</Tabs_.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Tabs as Tabs_, Tab } from '.';
+	import { Root as TabsRoot } from './atoms';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Tabs',
+		// 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 value = $state('ar');
+</script>
+
+<Story name="Tabs" args={{}}>
+	<Tabs_.Root bind:value>
+		<Tabs_.Header class="border-b" />
+		<Tabs_.Body>
+			<Tab.Root value="en">
+				<Tab.Header>English</Tab.Header>
+				<Tab.Body class="">
+					<div>
+						Ligula ex tincidunt efficitur netus consequat aenean finibus. Dictum ex pretium torquent
+						vel scelerisque quisque class nisl penatibus blandit risus. Pretium praesent egestas
+						ante placerat lacus pede risus pulvinar facilisi.
+					</div>
+				</Tab.Body>
+			</Tab.Root>
+
+			<Tab.Root value="ar">
+				<Tab.Header>Arabic</Tab.Header>
+				<Tab.Body class="h-[1440px]">
+					<div>
+						Interdum turpis taciti mauris orci condimentum vitae malesuada ornare ridiculus ultrices
+						quisque feugiat pretium facilisis justo ligula pede volutpat nisi viverra adipiscing
+						donec torquent ac sapien aliquet parturient posuere leo litora vivamus luctus vestibulum
+						aptent faucibus platea libero dolor purus integer fusce nam senectus nibh nostra diam
+						tortor dictumst praesent tellus montes ad iaculis sociosqu mollis sodales consectetuer
+						hac accumsan dictum blandit conubia velit elit efficitur duis nascetur erat mattis
+						semper et aliquam magna lorem bibendum ante id cursus nulla eget ut pellentesque
+						himenaeos consectetur potenti si maximus ullamcorper etiam nec magnis ipsum mus porta
+						lobortis natoque rhoncus fringilla
+					</div>
+				</Tab.Body>
+			</Tab.Root>
+		</Tabs_.Body>
+	</Tabs_.Root>
+</Story>

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

@@ -1,2 +1,3 @@
 export { default as Root } from './textarea-root.svelte';
 export { default as Input } from './textarea-input.svelte';
+export { default as Control } from './textarea-input.svelte';

package/dist/components/textarea/atoms.js

@@ -1,2 +1,3 @@
 export { default as Root } from './textarea-root.svelte';
 export { default as Input } from './textarea-input.svelte';
+export { default as Control } from './textarea-input.svelte';

package/dist/components/textarea/textarea-input.svelte

@@ -2,5 +2,8 @@
 	let { class: klass = '', value = $bindable(), ...restProps } = $props();
 </script>
 
-<textarea class={['border-border w-full outline-none', '$preset', klass]} bind:value {...restProps}
+<textarea
+	class={['border-border w-full p-2 outline-none', '$preset', klass]}
+	bind:value
+	{...restProps}
 ></textarea>

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

@@ -1,9 +1,9 @@
 <script>
 	import { Input } from '../input';
 
-	let { children, ...restProps } = $props();
+	let { class: klass = '', children, ...restProps } = $props();
 </script>
 
-<Input.Root preset="textarea" {...restProps}>
+<Input.Root preset="textarea" class={['h-auto', klass]} {...restProps}>
 	{@render children?.()}
 </Input.Root>

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

@@ -4,8 +4,10 @@ type TextareaRoot = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const TextareaRoot: import("svelte").Component<{
+    class?: string;
     children: any;
 } & Record<string, any>, {}, "">;
 type $$ComponentProps = {
+    class?: string;
     children: any;
 } & Record<string, any>;

package/dist/components/tooltip/tooltip-trigger.svelte

@@ -1,39 +1,39 @@
-<script lang="ts">
-	import { PopoverBond } from '../popover/bond.svelte';
-	import { Trigger } from '../popover/atoms';
-
-	const popoverBond = PopoverBond.get();
-
-	let { onmount, children, ...restProps } = $props();
-
-	function tooltip(node: HTMLElement) {
-		const onpointerenter = async () => {
-			requestAnimationFrame(() => {
-				popoverBond?.state.open();
-			});
-			node.addEventListener('pointerleave', onpointerleave);
-		};
-		const onpointerleave = () => {
-			popoverBond?.state.close();
-			node.removeEventListener('pointerleave', onpointerleave);
-		};
-
-		node.addEventListener('pointerenter', onpointerenter, { passive: true });
-
-		const cleanup = () => {
-			node.removeEventListener('pointerenter', onpointerenter);
-			node.removeEventListener('pointerleave', onpointerleave);
-		};
-
-		const unmount = onmount?.(node);
-
-		return () => {
-			cleanup?.();
-			unmount?.();
-		};
-	}
-</script>
-
-<Trigger preset="tooltip.trigger" onmount={tooltip} {...restProps}>
-	{@render children?.()}
-</Trigger>
+<script lang="ts">
+	import { PopoverBond } from '../popover/bond.svelte';
+	import { Trigger } from '../popover/atoms';
+
+	const popoverBond = PopoverBond.get();
+
+	let { onmount, children, onclick = undefined, ...restProps } = $props();
+
+	function tooltip(node: HTMLElement) {
+		const onpointerenter = async () => {
+			requestAnimationFrame(() => {
+				popoverBond?.state.open();
+			});
+			node.addEventListener('pointerleave', onpointerleave);
+		};
+		const onpointerleave = () => {
+			popoverBond?.state.close();
+			node.removeEventListener('pointerleave', onpointerleave);
+		};
+
+		node.addEventListener('pointerenter', onpointerenter, { passive: true });
+
+		const cleanup = () => {
+			node.removeEventListener('pointerenter', onpointerenter);
+			node.removeEventListener('pointerleave', onpointerleave);
+		};
+
+		const unmount = onmount?.(node);
+
+		return () => {
+			cleanup?.();
+			unmount?.();
+		};
+	}
+</script>
+
+<Trigger preset="tooltip.trigger" onmount={tooltip} {onclick} {...restProps}>
+	{@render children?.()}
+</Trigger>

package/dist/components/tooltip/tooltip-trigger.svelte.d.ts

@@ -1,6 +1,7 @@
 declare const TooltipTrigger: import("svelte").Component<{
     onmount: any;
     children: any;
+    onclick?: any;
 } & Record<string, any>, {}, "">;
 type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
 export default TooltipTrigger;

package/dist/components/tooltip/tooltip.stories.svelte

@@ -1,32 +1,32 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Tooltip as Tooltip_ } from '.';
-	import { Root as TooltipRoot } from './atoms';
-	import { Button } from '../button';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Tooltip',
-		// 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);
-</script>
-
-<Story name="Tooltip" args={{}}>
-	<Tooltip_.Root bind:open offset={0}>
-		<Tooltip_.Trigger base={Button}>Open Popover</Tooltip_.Trigger>
-		<Tooltip_.Content>
-			<div>Hello World !</div>
-			<Tooltip_.Arrow />
-		</Tooltip_.Content>
-	</Tooltip_.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Tooltip as Tooltip_ } from '.';
+	import { Root as TooltipRoot } from './atoms';
+	import { Button } from '../button';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Tooltip',
+		// 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);
+</script>
+
+<Story name="Tooltip" args={{}}>
+	<Tooltip_.Root bind:open offset={0}>
+		<Tooltip_.Trigger base={Button}>Open Popover</Tooltip_.Trigger>
+		<Tooltip_.Content>
+			<div>Hello World !</div>
+			<Tooltip_.Arrow />
+		</Tooltip_.Content>
+	</Tooltip_.Root>
+</Story>

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

@@ -1,2 +1,3 @@
 export * from './types';
 export * as Tree from './atoms';
+export * from './motion.svelte';

package/dist/components/tree/index.js

@@ -1,2 +1,3 @@
 export * from './types';
 export * as Tree from './atoms';
+export * from './motion.svelte';