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

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);

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

@@ -1,59 +1,56 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Tabs as Tabs_, Tab } from '.';
-	import { Root as TabsRoot } from './atoms';
-	import Root from '../root/root.svelte';
-
-	// 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={{}}>
-	<Root class="p-4">
-		<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>
-	</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/tooltip/tooltip-trigger.svelte

@@ -1,37 +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 (ev: PointerEvent) => {
-			await popoverBond?.isReady;
-			popoverBond?.state.open();
-		};
-		const onpointerleave = (ev: PointerEvent) => {
-			popoverBond?.state.close();
-		};
-
-		node.addEventListener('pointerenter', onpointerenter);
-		node.addEventListener('pointerleave', onpointerleave);
-
-		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, ...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>

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

@@ -1,35 +1,32 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Tooltip as Tooltip_ } from '.';
-	import { Root as TooltipRoot } from './atoms';
-	import Root from '../root/root.svelte';
-	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={{}}>
-	<Root class="p-4">
-		<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>
-	</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/tree.stories.svelte

@@ -1,134 +1,142 @@
-<script module>
-	import { untrack } from 'svelte';
-	import gsap from 'gsap';
-	import { RenderScan } from 'svelte-render-scan';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { dev } from '$app/environment';
-	import { Tree as Tree_ } from '.';
-	import { tree } from './attachments.svelte';
-	import { Root as TreeRoot } from './atoms';
-	import { TreeBond } from './bond.svelte';
-	import Root from '../root/root.svelte';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Tree',
-		// 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(true);
-</script>
-
-<Story name="Tree" args={{}}>
-	<Root class="p-4">
-		<Tree_.Root class="" bind:open>
-			{#if dev}
-				<RenderScan duration={300} />
-			{/if}
-
-			<Tree_.Header>Vehicles</Tree_.Header>
-
-			<Tree_.Body
-				class="border-l border-l-neutral-200"
-				onmount={(node) => {
-					const bond = TreeBond.get();
-					const isOpen = untrack(() => bond?.state.props.open ?? false);
-					gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
-				}}
-				{@attach tree((node, bond) => {
-					const isOpen = bond?.state.props.open ?? false;
-					gsap.to(node, {
-						height: +isOpen ? 'auto' : 0,
-						opacity: +isOpen,
-						pointerEvents: isOpen ? 'all' : 'none',
-						duration: 0.1
-					});
-				})}
-			>
-				<Tree_.Root>
-					<Tree_.Header>Cars</Tree_.Header>
-					<Tree_.Body
-						class="border-l border-l-neutral-200"
-						onmount={(node) => {
-							const bond = TreeBond.get();
-							const isOpen = bond?.state.props.open ?? false;
-							gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
-						}}
-						animate={(node) => {
-							const bond = TreeBond.get();
-							const isOpen = bond?.state.props.open ?? false;
-							gsap.to(node, {
-								height: +isOpen ? 'auto' : 0,
-								opacity: +isOpen,
-								pointerEvents: isOpen ? 'all' : 'none',
-								duration: 0.1
-							});
-						}}
-					>
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</Tree_.Body>
-				</Tree_.Root>
-
-				<Tree_.Root>
-					<Tree_.Header>Trucks</Tree_.Header>
-					<Tree_.Body
-						class="border-l border-l-neutral-200"
-						onmount={(node) => {
-							const bond = TreeBond.get();
-							const isOpen = bond?.state.props.open ?? false;
-							gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
-						}}
-						{@attach tree((node, bond) => {
-							const isOpen = bond?.state.props.open ?? false;
-							gsap.to(node, {
-								height: +isOpen ? 'auto' : 0,
-								opacity: +isOpen,
-								pointerEvents: isOpen ? 'all' : 'none',
-								duration: 0.1
-							});
-						})}
-					>
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</Tree_.Body>
-				</Tree_.Root>
-
-				<Tree_.Root>
-					<Tree_.Header>Bikes</Tree_.Header>
-					<Tree_.Body
-						class="border-l border-l-neutral-200"
-						onmount={(node) => {
-							const bond = TreeBond.get();
-							const isOpen = untrack(() => bond?.state.props.open ?? false);
-							gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
-						}}
-						{@attach tree((node, bond) => {
-							const isOpen = bond?.state.props.open ?? false;
-							gsap.to(node, {
-								height: +isOpen ? 'auto' : 0,
-								opacity: +isOpen,
-								pointerEvents: isOpen ? 'all' : 'none',
-								duration: 0.1
-							});
-						})}
-					>
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</Tree_.Body>
-				</Tree_.Root>
-			</Tree_.Body>
-		</Tree_.Root>
-	</Root>
-</Story>
+<script module>
+	import { untrack } from 'svelte';
+	import { animate } from 'motion';
+	import { RenderScan } from 'svelte-render-scan';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { dev } from '$app/environment';
+	import { Tree as Tree_ } from '.';
+	import { tree } from './attachments.svelte';
+	import { TreeBond } from './bond.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Tree',
+		// 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(true);
+</script>
+
+<Story name="Tree" args={{}}>
+	<Tree_.Root class="" bind:open>
+		{#if dev}
+			<RenderScan duration={300} />
+		{/if}
+
+		<Tree_.Header>Vehicles</Tree_.Header>
+
+		<Tree_.Body
+			class="border-l border-l-neutral-200"
+			onmount={(node) => {
+				const bond = TreeBond.get();
+				const isOpen = untrack(() => bond?.state.props.open ?? false);
+				animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
+			}}
+			{@attach tree((node, bond) => {
+				const isOpen = bond?.state.props.open ?? false;
+				animate(
+					node,
+					{
+						height: +isOpen ? 'auto' : 0,
+						opacity: +isOpen,
+						pointerEvents: isOpen ? 'all' : 'none'
+					},
+					{ duration: 0.1 }
+				);
+			})}
+		>
+			<Tree_.Root>
+				<Tree_.Header>Cars</Tree_.Header>
+				<Tree_.Body
+					class="border-l border-l-neutral-200"
+					onmount={(node) => {
+						const bond = TreeBond.get();
+						const isOpen = bond?.state.props.open ?? false;
+						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
+					}}
+					animate={(node) => {
+						const bond = TreeBond.get();
+						const isOpen = bond?.state.props.open ?? false;
+						animate(
+							node,
+							{
+								height: +isOpen ? 'auto' : 0,
+								opacity: +isOpen,
+								pointerEvents: isOpen ? 'all' : 'none'
+							},
+							{ duration: 0.1 }
+						);
+					}}
+				>
+					Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+					tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+					dolor diam nascetur.
+				</Tree_.Body>
+			</Tree_.Root>
+
+			<Tree_.Root>
+				<Tree_.Header>Trucks</Tree_.Header>
+				<Tree_.Body
+					class="border-l border-l-neutral-200"
+					onmount={(node) => {
+						const bond = TreeBond.get();
+						const isOpen = bond?.state.props.open ?? false;
+						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
+					}}
+					{@attach tree((node, bond) => {
+						const isOpen = bond?.state.props.open ?? false;
+						animate(
+							node,
+							{
+								height: +isOpen ? 'auto' : 0,
+								opacity: +isOpen,
+								pointerEvents: isOpen ? 'all' : 'none'
+							},
+							{ duration: 0.1 }
+						);
+					})}
+				>
+					Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+					tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+					dolor diam nascetur.
+				</Tree_.Body>
+			</Tree_.Root>
+
+			<Tree_.Root>
+				<Tree_.Header>Bikes</Tree_.Header>
+				<Tree_.Body
+					class="border-l border-l-neutral-200"
+					onmount={(node) => {
+						const bond = TreeBond.get();
+						const isOpen = untrack(() => bond?.state.props.open ?? false);
+						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
+					}}
+					{@attach tree((node, bond) => {
+						const isOpen = bond?.state.props.open ?? false;
+						animate(
+							node,
+							{
+								height: +isOpen ? 'auto' : 0,
+								opacity: +isOpen,
+								pointerEvents: isOpen ? 'all' : 'none'
+							},
+							{ duration: 0.1 }
+						);
+					})}
+				>
+					Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+					tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+					dolor diam nascetur.
+				</Tree_.Body>
+			</Tree_.Root>
+		</Tree_.Body>
+	</Tree_.Root>
+</Story>

package/dist/context/preset.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ClassValue } from 'svelte/elements';
 import type { Base } from '../components/atom';
 import type { Bond } from '../shared';
 export type PresetModuleName = 'accordion' | 'accordion.item.body' | 'accordion.item.header' | 'accordion.item.indicator' | 'accordion.item' | 'alert.actions' | 'alert.close-button' | 'alert.content' | 'alert.description' | 'alert.icon' | 'alert' | 'alert.title' | 'card.content' | 'card.description' | 'card.footer' | 'card.header' | 'card.media' | 'card' | 'card.subtitle' | 'card.title' | 'collapsible.body' | 'collapsible.header' | 'collapsible.indicator' | 'collapsible' | 'combobox.control' | 'combobox.trigger' | 'combobox.item' | 'dialog.close-button' | 'dialog.body' | 'dialog.content' | 'dialog.description' | 'dialog.footer' | 'dialog.header' | 'dialog' | 'dialog.title' | 'divider' | 'dropdown.placeholder' | 'dropdown.query' | 'dropdown.trigger' | 'dropdown.value' | 'dropdown' | 'field.control' | 'field.label' | 'field' | 'form' | 'icon' | 'input' | 'input.control' | 'input.placeholder' | 'label' | 'layer.inner' | 'layer' | 'link' | 'list.divider' | 'list.group' | 'list.item' | 'list.item' | 'list.item' | 'dropdown.item' | 'menu.body' | 'popover.arrow' | 'popover.indicator' | 'popover.content' | 'popover.trigger' | 'portal.inner' | 'portal' | 'root' | 'root.portals' | 'sidebar.content' | 'sidebar' | 'drawer.backdrop' | 'drawer.body' | 'drawer.content' | 'drawer.description' | 'drawer.title' | 'drawer.footer' | 'drawer.header' | 'drawer' | 'stack.root' | 'stack.item' | 'tabs.body' | 'tabs.header' | 'tabs' | 'tab.header' | 'tab.body' | 'tab.description' | 'tab' | 'tree.body' | 'tree.header' | 'tree.indicator' | 'tree' | 'datagrid' | 'datagrid.header' | 'datagrid.th' | 'datagrid.body' | 'datagrid.tr' | 'datagrid.td' | 'datagrid.footer' | 'datagrid.checkbox' | 'datagrid.sort-icon' | 'scrollable' | 'scrollable.container' | 'scrollable.content' | 'scrollable.track' | 'scrollable.thumb' | 'breadcrumb' | 'breadcrumb.item' | 'breadcrumb.separator' | 'badge' | 'button' | 'checkbox' | 'checkbox.checkmark' | 'checkbox.indeterminate' | 'radio' | 'radio.group' | 'container' | 'calendar' | 'calendar.day' | 'calendar.header' | 'calendar.weekday' | 'calendar.body' | 'datepicker.trigger' | 'datepicker.calendar' | 'datepicker.years' | 'datepicker.months' | 'datepicker.header';
-export type PresetEntryRecord = {
+export interface PresetEntryRecord {
     [key: string]: unknown;
     class?: ClassValue;
     as?: string;
@@ -10,8 +10,8 @@ export type PresetEntryRecord = {
     variants?: Record<string, Record<string, any>>;
     compounds?: Array<Record<string, any>>;
     defaults?: Record<string, any>;
-};
-export type PresetEntry = (this: Bond | undefined | null, bond: Bond | undefined | null, ...args: any[]) => PresetEntryRecord;
+}
+export type PresetEntry = (bond: Bond | undefined | null, ...args: any[]) => PresetEntryRecord | (() => PresetEntryRecord);
 export type Preset = Record<PresetModuleName, PresetEntry>;
 export declare function getPreset<K extends PresetModuleName>(key: K): PresetEntry | undefined;
 export declare function getPreset(): Partial<Preset> | undefined;

package/dist/utils/function.d.ts

@@ -0,0 +1,2 @@
+export declare function call<const T = (...args: any) => any>(param: T, ...args: any[]): ReturnType<T>;
+export declare function call<const T>(param: T, ...args: any[]): T;

package/dist/utils/function.js

@@ -0,0 +1,6 @@
+export function call(param, ...args) {
+    if (typeof param === 'function') {
+        return param(...args);
+    }
+    return param;
+}