@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.26

package/dist/components/datagrid/datagrid.stories.svelte

@@ -1,75 +1,75 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import { DataGrid as DataGridCmp } from '.';
-	import { Dropdown } from '../dropdown';
-	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
-	import { Icon } from '../icon';
-	import { container } from '../../runes/container.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/DataGrid'
-	});
-</script>
-
-<script>
-	let values = $state([]);
-
-	const datagridContainer = container();
-</script>
-
-<Story name="DataGrid">
-	<Root>
-		{#snippet children({ args })}
-			<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
-				<DataGridCmp.Header>
-					<DataGridCmp.Tr header>
-						<DataGridCmp.Th width="auto">
-							<DataGridCmp.Checkbox />
-						</DataGridCmp.Th>
-						<DataGridCmp.Th
-							class="resize-x overflow-x-auto"
-							width="auto"
-							hidden={datagridContainer.current?.width
-								? datagridContainer.current.width < 1024
-								: false}>ID</DataGridCmp.Th
-						>
-						<DataGridCmp.Th>Name</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto"></DataGridCmp.Th>
-					</DataGridCmp.Tr>
-				</DataGridCmp.Header>
-
-				<DataGridCmp.Body>
-					{#each { length: 10 } as _, i (i)}
-						<DataGridCmp.Tr>
-							<DataGridCmp.Td>
-								<DataGridCmp.Checkbox />
-							</DataGridCmp.Td>
-
-							<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
-							<DataGridCmp.Td>John Doe</DataGridCmp.Td>
-							<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
-							<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
-
-							<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
-								<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
-									<Icon src={MoreVerticalIcon} />
-								</Dropdown.Trigger>
-								<Dropdown.List>
-									<Dropdown.Item value="ar">Arabic</Dropdown.Item>
-									<Dropdown.Item value="en">English</Dropdown.Item>
-									<Dropdown.Item value="sp">Spanish</Dropdown.Item>
-									<Dropdown.Item value="fr">Frensh</Dropdown.Item>
-								</Dropdown.List>
-							</DataGridCmp.Td>
-						</DataGridCmp.Tr>
-					{/each}
-				</DataGridCmp.Body>
-
-				<DataGridCmp.Footer></DataGridCmp.Footer>
-			</DataGridCmp.Root>
-		{/snippet}
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import { DataGrid as DataGridCmp } from '.';
+	import { Dropdown } from '../dropdown';
+	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
+	import { Icon } from '../icon';
+	import { container } from '../../runes/container.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/DataGrid'
+	});
+</script>
+
+<script>
+	let values = $state([]);
+
+	const datagridContainer = container();
+</script>
+
+<Story name="DataGrid">
+	<Root>
+		{#snippet children({ args })}
+			<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
+				<DataGridCmp.Header>
+					<DataGridCmp.Tr header>
+						<DataGridCmp.Th width="auto">
+							<DataGridCmp.Checkbox />
+						</DataGridCmp.Th>
+						<DataGridCmp.Th
+							class="resize-x overflow-x-auto"
+							width="auto"
+							hidden={datagridContainer.current?.width
+								? datagridContainer.current.width < 1024
+								: false}>ID</DataGridCmp.Th
+						>
+						<DataGridCmp.Th>Name</DataGridCmp.Th>
+						<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
+						<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
+						<DataGridCmp.Th width="auto"></DataGridCmp.Th>
+					</DataGridCmp.Tr>
+				</DataGridCmp.Header>
+
+				<DataGridCmp.Body>
+					{#each { length: 10 } as _, i (i)}
+						<DataGridCmp.Tr>
+							<DataGridCmp.Td>
+								<DataGridCmp.Checkbox />
+							</DataGridCmp.Td>
+
+							<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
+							<DataGridCmp.Td>John Doe</DataGridCmp.Td>
+							<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
+							<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
+
+							<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
+								<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
+									<Icon src={MoreVerticalIcon} />
+								</Dropdown.Trigger>
+								<Dropdown.List>
+									<Dropdown.Item value="ar">Arabic</Dropdown.Item>
+									<Dropdown.Item value="en">English</Dropdown.Item>
+									<Dropdown.Item value="sp">Spanish</Dropdown.Item>
+									<Dropdown.Item value="fr">Frensh</Dropdown.Item>
+								</Dropdown.List>
+							</DataGridCmp.Td>
+						</DataGridCmp.Tr>
+					{/each}
+				</DataGridCmp.Body>
+
+				<DataGridCmp.Footer></DataGridCmp.Footer>
+			</DataGridCmp.Root>
+		{/snippet}
+	</Root>
+</Story>

package/dist/components/datagrid/td/datagrid-td.svelte

@@ -65,7 +65,7 @@
 		}}
 		{bond}
 		preset="datagrid.td"
-		class={['flex h-full items-center py-2 text-left', '$preset', klass]}
+		class={['border-border flex h-full items-center py-2 text-left', '$preset', klass]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
 		initial={initial?.bind(bond.state)}

package/dist/components/datagrid/th/datagrid-th-sort-icon.svelte

@@ -34,7 +34,7 @@
 	<HtmlAtom
 		{bond}
 		preset="datagrid.sort-icon"
-		class={['$preset', klass]}
+		class={['border-border', '$preset', klass]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
 		initial={initial?.bind(bond.state)}

package/dist/components/datagrid/th/datagrid-th.svelte

@@ -107,7 +107,7 @@
 		{bond}
 		preset="datagrid.th"
 		class={[
-			'flex cursor-pointer py-1 font-medium select-none',
+			'border-border flex cursor-pointer py-1 font-medium select-none',
 			!!sortable && 'sortable',
 			'$preset',
 			klass

package/dist/components/dialog/dialog-body.svelte

@@ -32,7 +32,7 @@
 <HtmlAtom
 	{bond}
 	preset="dialog.body"
-	class={['px-4 py-2', '$preset', klass]}
+	class={['border-border px-4 py-2', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/dialog/dialog-close-button.svelte

@@ -41,7 +41,7 @@
 	{as}
 	{bond}
 	preset="dialog.close-button"
-	class={['cursor-pointer', '$preset', klass]}
+	class={['border-border cursor-pointer', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -7,8 +7,9 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { animate as motion } from 'motion';
-	import { DialogBond } from './bond.svelte';
+	import { DURATION } from '../../shared';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
 
 	const bond = DialogBond.get();
 
@@ -32,20 +33,16 @@
 	const open = $derived(bond?.state?.props?.open ?? false);
 
 	function _animate(node: HTMLElement) {
+		if (open) {
+			bond?.elements.root?.show?.();
+		}
+
 		motion(
 			node,
 			{ scale: 0.9 + 0.1 * +open, opacity: +open },
 			{
-				duration: 0.3,
-				ease: 'anticipate',
-				onComplete: () => {
-					if (!open) {
-						const root = bond?.elements.root;
-
-						root?.close?.();
-						console.log(root);
-					}
-				}
+				duration: DURATION.normal / 1000,
+				ease: 'anticipate'
 			}
 		);
 	}

package/dist/components/dialog/dialog-description.svelte

@@ -33,7 +33,7 @@
 <HtmlAtom
 	{as}
 	preset="dialog.description"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/dialog/dialog-footer.svelte

@@ -32,7 +32,7 @@
 <HtmlAtom
 	{bond}
 	preset="dialog.footer"
-	class={['flex px-4', '$preset', klass]}
+	class={['border-border', 'flex px-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/dialog/dialog-header.svelte

@@ -32,7 +32,7 @@
 <HtmlAtom
 	{bond}
 	preset="dialog.header"
-	class={['flex w-full px-4 text-xl', '$preset', klass]}
+	class={['border-border', 'flex w-full px-4 text-xl', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -1,120 +1,123 @@
-<script module lang="ts">
-	export type DialogProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		open?: boolean;
-		disabled?: boolean;
-		factory?: (props: DialogBondProps) => DialogBond;
-		children?: Snippet<[{ dialog: DialogBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { animate as motion } from 'motion';
-	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
-	import { Teleport, ActivePortal } from '../portal';
-	import { defineProperty, defineState } from '../../utils';
-	import type { HtmlAtomProps, Base } from '../atom';
-
-	let {
-		class: klass = '',
-		open = $bindable(false),
-		disabled = false,
-		as = 'dialog' as E,
-		factory = _factory,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		children = undefined,
-		...restProps
-	}: DialogProps<E, B> = $props();
-
-	const bondProps = defineState<DialogBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			)
-		],
-		() => ({ disabled })
-	);
-	const bond = _factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond?.root({}),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new DialogBondState(() => props);
-		return new DialogBond(bondState);
-	}
-
-	function _animate(node: HTMLDialogElement) {
-		if (open) {
-			bond.elements.root?.show?.();
-			motion(
-				node,
-				{
-					opacity: +open
-				},
-				{
-					duration: 0,
-					ease: 'anticipate'
-				}
-			);
-		}
-	}
-
-	function onclickDialogElement(ev: MouseEvent) {
-		if (bond?.elements?.content?.contains(ev.target)) {
-			return;
-		}
-
-		// Clicked the backdrop
-		bond.state.close();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<Teleport
-	{as}
-	{bond}
-	preset="dialog"
-	portal="root.l1"
-	class={[
-		'pointer-events-auto fixed top-0 left-0 flex h-full w-full items-center justify-center bg-neutral-900/10 opacity-0',
-		!open && 'pointer-events-none',
-		'$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)}
-	onclick={onclickDialogElement}
-	oncancel={(ev) => {
-		ev.preventDefault();
-		open = false;
-	}}
-	{...rootProps}
->
-	<!-- <div class="w-full h-full flex items-center justify-center"> -->
-	<ActivePortal id="root.l1">
-		{@render children?.({ dialog: bond })}
-	</ActivePortal>
-	<!-- </div> -->
-</Teleport>
+<script module lang="ts">
+	export type DialogProps<
+		E extends keyof HTMLElementTagNameMap = 'div',
+		B extends Base = Base
+	> = HtmlAtomProps<E, B> & {
+		open?: boolean;
+		disabled?: boolean;
+		portal?: string | PortalBond;
+		factory?: (props: DialogBondProps) => DialogBond;
+		children?: Snippet<[{ dialog: DialogBond }]>;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import { animate as motion } from 'motion';
+	import { Teleport, ActivePortal, PortalBond } from '../portal';
+	import { defineProperty, defineState } from '../../utils';
+	import type { HtmlAtomProps, Base } from '../atom';
+	import { DURATION } from '../../shared';
+	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
+
+	let {
+		class: klass = '',
+		open = $bindable(false),
+		disabled = false,
+		as = 'dialog' as E,
+		portal = undefined,
+		factory = _factory,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		children = undefined,
+		...restProps
+	}: DialogProps<E, B> = $props();
+
+	const bondProps = defineState<DialogBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			)
+		],
+		() => ({ disabled })
+	);
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond?.root({}),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new DialogBondState(() => props);
+		return new DialogBond(bondState);
+	}
+
+	function _animate(node: HTMLDialogElement) {
+		motion(
+			node,
+			{
+				opacity: +open
+			},
+			{
+				duration: DURATION.normal / 1000,
+				ease: 'anticipate',
+				onComplete: () => {
+					if (!open) {
+						node?.close?.();
+					}
+				}
+			}
+		);
+	}
+
+	function onclickDialogElement(ev: MouseEvent) {
+		if (bond?.elements?.content?.contains(ev.target)) {
+			return;
+		}
+
+		// Clicked the backdrop
+		bond.state.close();
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<Teleport
+	{as}
+	{bond}
+	preset="dialog"
+	portal={portal ?? 'root.l1'}
+	class={[
+		'border-border pointer-events-auto fixed top-0 left-0 flex h-full w-full items-center justify-center bg-neutral-900/10 opacity-0',
+		!open && 'pointer-events-none',
+		'$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)}
+	onclick={onclickDialogElement}
+	oncancel={(ev) => {
+		ev.preventDefault();
+		open = false;
+	}}
+	{...rootProps}
+>
+	<ActivePortal portal={portal ?? 'root.l1'}>
+		{@render children?.({ dialog: bond })}
+	</ActivePortal>
+</Teleport>

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

@@ -1,14 +1,16 @@
 export type DialogProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
     open?: boolean;
     disabled?: boolean;
+    portal?: string | PortalBond;
     factory?: (props: DialogBondProps) => DialogBond;
     children?: Snippet<[{
         dialog: DialogBond;
     }]>;
 };
 import type { Snippet } from 'svelte';
-import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
+import { PortalBond } from '../portal';
 import type { HtmlAtomProps, Base } from '../atom';
+import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: DialogProps<E, B>;
     exports: {

package/dist/components/dialog/dialog-title.svelte

@@ -34,7 +34,7 @@
 	{as}
 	{bond}
 	preset="dialog.title"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -36,7 +36,7 @@
 <HtmlAtom
 	{bond}
 	preset="drawer.backdrop"
-	class={['absolute inset-0 z-0 bg-black/30', '$preset', klass]}
+	class={['border-border absolute inset-0 z-0 bg-black/30', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}

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

@@ -43,7 +43,7 @@
 <HtmlAtom
 	{bond}
 	preset="drawer.body"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}

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

@@ -44,7 +44,7 @@
 	{as}
 	{bond}
 	preset="drawer.description"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}

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

@@ -41,7 +41,7 @@
 
 <HtmlAtom
 	{bond}
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}

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

@@ -42,7 +42,7 @@
 <HtmlAtom
 	{bond}
 	preset="drawer.header"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}