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

package/dist/attachments/clickout.svelte.d.ts

@@ -1 +1 @@
-export declare function clickout<T extends Element>(onclick?: (ev: PointerEvent, node?: T) => void): (node: T) => () => void;
+export declare function clickout<T extends Element>(onclick?: (ev: PointerEvent, node?: T) => void, options?: AddEventListenerOptions | undefined): (node: T) => () => void;

package/dist/attachments/clickout.svelte.js

@@ -1,5 +1,5 @@
 import { on } from 'svelte/events';
-export function clickout(onclick) {
+export function clickout(onclick, options) {
     return (node) => {
         const handler = (ev) => {
             const target = ev.target;
@@ -7,7 +7,7 @@ export function clickout(onclick) {
                 onclick?.(ev, node);
             }
         };
-        const cleanup = on(window, 'click', handler);
+        const cleanup = on(window, 'click', handler, options);
         return () => {
             cleanup();
         };

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

@@ -1,61 +1,61 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { AccordionBond, AccordionState, type AccordionStateProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import type { AccordionRootProps } from './types';
-
-	let {
-		value = $bindable(undefined),
-		values = $bindable([]),
-		data = $bindable([]),
-		class: klass = '',
-		multiple = false,
-		collapsible = false,
-		disabled = false,
-		children = undefined,
-		factory = _factory,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AccordionRootProps<E, B> = $props();
-
-	const bondProps = defineState<AccordionStateProps>([
-		defineProperty(
-			'values',
-			() => (multiple ? values : ([value].filter(Boolean) as string[])),
-			(v) => {
-				values = v;
-				value = values[0];
-			}
-		)
-	]);
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps = bondProps) {
-		const bondState = new AccordionState(() => props);
-
-		return new AccordionBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	preset="accordion"
-	class={['bg-card border-border flex list-none flex-col', '$preset', klass]}
-	{bond}
-	{...rootProps}
->
-	{@render children?.({ accordion: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AccordionBond, AccordionState, type AccordionStateProps } from './bond.svelte';
+	import type { AccordionRootProps } from './types';
+
+	let {
+		value = $bindable(undefined),
+		values = $bindable([]),
+		data = $bindable([]),
+		class: klass = '',
+		multiple = false,
+		collapsible = false,
+		disabled = false,
+		children = undefined,
+		factory = _factory,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AccordionRootProps<E, B> = $props();
+
+	const bondProps = defineState<AccordionStateProps>([
+		defineProperty(
+			'values',
+			() => (multiple ? values : ([value].filter(Boolean) as string[])),
+			(v) => {
+				values = v;
+				value = values[0];
+			}
+		)
+	]);
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps = bondProps) {
+		const bondState = new AccordionState(() => props);
+
+		return new AccordionBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	preset="accordion"
+	class={['bg-card border-border flex list-none flex-col', '$preset', klass]}
+	{bond}
+	{...rootProps}
+>
+	{@render children?.({ accordion: bond })}
+</HtmlAtom>

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

@@ -1,5 +1,5 @@
-import { AccordionBond } from './bond.svelte';
 import { type Base } from '../atom';
+import { AccordionBond } from './bond.svelte';
 import type { AccordionRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AccordionRootProps<E, B>;

package/dist/components/accordion/accordion.stories.svelte

@@ -1,134 +1,145 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Accordion as AAccordion, AccordionItem } from '.';
-	import Root from '../root/root.svelte';
-	import gsap from 'gsap';
-	import { linear } from 'svelte/easing';
-	import { toTransitionConfig } from '../../utils/gsap';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Accordion',
-		// 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">
-</script>
-
-<Story name="Accordion" args={{ collapsible: false, multiple: false, disabled: false }}>
-	{#snippet children(args)}
-		<Root class="flex items-center justify-center p-4">
-			<AAccordion class="backdrop-blur-sm" {...args}>
-				<AccordionItem.Root>
-					<AccordionItem.Header>
-						<div>Hello Atomic UI 1</div>
-						<AccordionItem.Indicator />
-					</AccordionItem.Header>
-
-					<AccordionItem.Body
-						initial={(node) => {
-							gsap.set(node, { opacity: 0, height: 0 });
-						}}
-						enter={function (node) {
-							console.log(this);
-							const tween = gsap.to(node, {
-								opacity: 1,
-								height: 'auto',
-								duration: 0.2,
-								ease: linear
-							});
-
-							return toTransitionConfig(tween);
-						}}
-						exit={(node) => {
-							const tween = gsap.to(node, { opacity: 0, height: 0, duration: 0.2, ease: linear });
-
-							return toTransitionConfig(tween);
-						}}
-					>
-						<div class="p-2">
-							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.
-						</div>
-					</AccordionItem.Body>
-				</AccordionItem.Root>
-
-				<AccordionItem.Root>
-					<AccordionItem.Header>
-						<div>Hello Atomic UI 2</div>
-						<AccordionItem.Indicator />
-					</AccordionItem.Header>
-
-					<AccordionItem.Body
-						initial={(node) => {
-							gsap.set(node, { opacity: 0, height: 0 });
-						}}
-						enter={(node) => {
-							const tween = gsap.to(node, {
-								opacity: 1,
-								height: 'auto',
-								duration: 0.2,
-								ease: linear
-							});
-
-							return toTransitionConfig(tween);
-						}}
-						exit={(node) => {
-							const tween = gsap.to(node, { opacity: 0, height: 0, duration: 0.2, ease: linear });
-
-							return toTransitionConfig(tween);
-						}}
-					>
-						<div class="p-2">
-							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.
-						</div>
-					</AccordionItem.Body>
-				</AccordionItem.Root>
-
-				<AccordionItem.Root>
-					<AccordionItem.Header>
-						<div>Hello Atomic UI 3</div>
-						<AccordionItem.Indicator />
-					</AccordionItem.Header>
-
-					<AccordionItem.Body
-						initial={(node) => {
-							gsap.set(node, { opacity: 0, height: 0 });
-						}}
-						enter={(node) => {
-							const tween = gsap.to(node, {
-								opacity: 1,
-								height: 'auto',
-								duration: 0.2,
-								ease: linear
-							});
-
-							return toTransitionConfig(tween);
-						}}
-						exit={(node) => {
-							const tween = gsap.to(node, { opacity: 0, height: 0, duration: 0.2, ease: linear });
-
-							return toTransitionConfig(tween);
-						}}
-					>
-						<div class="p-2">
-							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.
-						</div>
-					</AccordionItem.Body>
-				</AccordionItem.Root>
-			</AAccordion>
-		</Root>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Accordion as AAccordion, AccordionItem } from '.';
+	import { linear } from 'svelte/easing';
+	import { animate } from 'motion';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Accordion',
+		// 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">
+</script>
+
+<Story name="Accordion" args={{ collapsible: false, multiple: false, disabled: false }}>
+	{#snippet children(args)}
+		<AAccordion class="backdrop-blur-sm" {...args}>
+			<AccordionItem.Root>
+				<AccordionItem.Header>
+					<div>Hello Atomic UI 1</div>
+					<AccordionItem.Indicator />
+				</AccordionItem.Header>
+
+				<AccordionItem.Body
+					initial={(node) => {
+						Object.assign(node.style, { opacity: 0, height: 0 });
+					}}
+					enter={function (node) {
+						const d = 0.2;
+						animate(
+							node,
+							{
+								opacity: 1,
+								height: 'auto'
+							},
+							{
+								duration: d
+							}
+						);
+
+						return { duration: d * 1000 };
+					}}
+					exit={(node) => {
+						const d = 0.2;
+						animate(node, { opacity: 0, height: 0 }, { duration: d });
+
+						return { duration: d * 1000 };
+					}}
+				>
+					<div class="p-2">
+						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.
+					</div>
+				</AccordionItem.Body>
+			</AccordionItem.Root>
+
+			<AccordionItem.Root>
+				<AccordionItem.Header>
+					<div>Hello Atomic UI 2</div>
+					<AccordionItem.Indicator />
+				</AccordionItem.Header>
+
+				<AccordionItem.Body
+					initial={(node) => {
+						Object.assign(node.style, { opacity: 0, height: 0 });
+					}}
+					enter={(node) => {
+						animate(
+							node,
+							{
+								opacity: 1,
+								height: 'auto'
+							},
+							{
+								duration: 0.2,
+								ease: linear
+							}
+						);
+
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						animate(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: linear });
+
+						return { duration: 0.2 };
+					}}
+				>
+					<div class="p-2">
+						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.
+					</div>
+				</AccordionItem.Body>
+			</AccordionItem.Root>
+
+			<AccordionItem.Root>
+				<AccordionItem.Header>
+					<div>Hello Atomic UI 3</div>
+					<AccordionItem.Indicator />
+				</AccordionItem.Header>
+
+				<AccordionItem.Body
+					initial={(node) => {
+						Object.assign(node.style, { opacity: 0, height: 0 });
+					}}
+					enter={(node) => {
+						animate(
+							node,
+							{
+								opacity: 1,
+								height: 'auto'
+							},
+							{
+								duration: 0.2,
+								ease: linear
+							}
+						);
+
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						animate(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: linear });
+
+						return { duration: 0.2 };
+					}}
+				>
+					<div class="p-2">
+						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.
+					</div>
+				</AccordionItem.Body>
+			</AccordionItem.Root>
+		</AAccordion>
+	{/snippet}
+</Story>

package/dist/components/alert/alert-actions.svelte

@@ -1,43 +1,43 @@
-<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 { AlertBond } from './bond.svelte';
-	import type { AlertActionsProps } from './types';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		preset = 'alert.actions',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertActionsProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const actionsProps = $derived({
-		...bond?.actions(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	{preset}
-	class={['alert-actions border-border mt-3 flex items-center gap-2', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	{...actionsProps}
->
-	{@render children?.({ alert: bond! })}
-</HtmlAtom>
+<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 { AlertBond } from './bond.svelte';
+	import type { AlertActionsProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'alert.actions',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertActionsProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const actionsProps = $derived({
+		...bond?.actions(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	{preset}
+	class={['alert-actions border-border mt-3 flex items-center gap-2', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{...actionsProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>

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

@@ -1,70 +1,70 @@
-<script
-	lang="ts"
-	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
->
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import { AlertBond } from './bond.svelte';
-	import type { AlertCloseButtonProps } from './types';
-	import { Icon } from '../icon';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		preset = 'alert.close-button',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertCloseButtonProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const isDismissible = $derived(bond?.state.isDismissible ?? false);
-
-	const closeButtonProps = $derived({
-		...bond?.closeButton(),
-		...restProps
-	});
-</script>
-
-{#if isDismissible}
-	<HtmlAtom
-		{as}
-		{bond}
-		{preset}
-		class={[
-			'alert-close-button border-border flex size-6 items-center justify-center rounded p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
-			'$preset',
-			klass
-		]}
-		onmount={onmount?.bind(bond.state)}
-		ondestroy={ondestroy?.bind(bond.state)}
-		animate={animate?.bind(bond.state)}
-		enter={enter?.bind(bond.state)}
-		exit={exit?.bind(bond.state)}
-		initial={initial?.bind(bond.state)}
-		{...closeButtonProps}
-	>
-		{#if children}
-			{@render children({ alert: bond! })}
-		{:else}
-			<Icon class="h-full">
-				<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
-			</Icon>
-		{/if}
-	</HtmlAtom>
-{/if}
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertCloseButtonProps } from './types';
+	import { Icon } from '../icon';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		preset = 'alert.close-button',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertCloseButtonProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const isDismissible = $derived(bond?.state.isDismissible ?? false);
+
+	const closeButtonProps = $derived({
+		...bond?.closeButton(),
+		...restProps
+	});
+</script>
+
+{#if isDismissible}
+	<HtmlAtom
+		{as}
+		{bond}
+		{preset}
+		class={[
+			'alert-close-button border-border flex size-6 items-center justify-center rounded p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
+			'$preset',
+			klass
+		]}
+		onmount={onmount?.bind(bond.state)}
+		ondestroy={ondestroy?.bind(bond.state)}
+		animate={animate?.bind(bond.state)}
+		enter={enter?.bind(bond.state)}
+		exit={exit?.bind(bond.state)}
+		initial={initial?.bind(bond.state)}
+		{...closeButtonProps}
+	>
+		{#if children}
+			{@render children({ alert: bond! })}
+		{:else}
+			<Icon class="h-full">
+				<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</Icon>
+		{/if}
+	</HtmlAtom>
+{/if}