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

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

@@ -1,58 +1,58 @@
-<script
-	lang="ts"
-	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
->
-	import { Icon } from '../icon';
-	import Close from '../../icons/icon-close.svelte';
-	import { HtmlAtom, type Base } from '../atom';
-	import { DialogBond } from './bond.svelte';
-	import type { DialogCloseButtonProps } from './types';
-
-	const bond = DialogBond.get();
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		onclick = undefined,
-		...restProps
-	}: DialogCloseButtonProps<E, B> = $props();
-
-	function onclick_(ev: MouseEvent) {
-		onclick?.(ev);
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		bond?.state.close();
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="dialog.close-button"
-	class={['border-border cursor-pointer', '$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={onclick_}
-	{...restProps}
->
-	{#if children}
-		{@render children?.()}
-	{:else}
-		<Icon>
-			<Close />
-		</Icon>
-	{/if}
-</HtmlAtom>
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import { Icon } from '../icon';
+	import Close from '../../icons/icon-close.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogCloseButtonProps } from './types';
+
+	const bond = DialogBond.get();
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		onclick = undefined,
+		...restProps
+	}: DialogCloseButtonProps<E, B> = $props();
+
+	function onclick_(ev: MouseEvent) {
+		onclick?.(ev);
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond?.state.close();
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="dialog.close-button"
+	class={['border-border cursor-pointer', '$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={onclick_}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<Icon>
+			<Close />
+		</Icon>
+	{/if}
+</HtmlAtom>

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

@@ -45,7 +45,7 @@
 <HtmlAtom
 	preset="dialog.content"
 	class={[
-		'bg-card text-foreground border-border flex h-fit w-full max-w-[90svw] flex-col rounded-md border py-4 shadow-sm md:min-w-sm lg:max-w-xl lg:min-w-md',
+		'bg-card text-foreground border-border flex h-fit w-full max-w-[90svw] flex-col rounded-md border py-4 shadow-sm',
 		'$preset',
 		klass
 	]}

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

@@ -1,40 +1,40 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import type { DialogDescriptionProps } from './types';
-	import { DialogBond } from './bond.svelte';
-
-	let {
-		class: klass = '',
-		as = 'p' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogDescriptionProps<E, B> = $props();
-
-	const bond = DialogBond.get();
-
-	const descriptionProps = $derived({
-		...bond?.description({}),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	preset="dialog.description"
-	class={['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)}
-	{...descriptionProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import type { DialogDescriptionProps } from './types';
+	import { DialogBond } from './bond.svelte';
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogDescriptionProps<E, B> = $props();
+
+	const bond = DialogBond.get();
+
+	const descriptionProps = $derived({
+		...bond?.description({}),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	preset="dialog.description"
+	class={['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)}
+	{...descriptionProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>

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

@@ -1,39 +1,39 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { DialogBond } from './bond.svelte';
-	import type { DialogFooterProps } from './types';
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogFooterProps<E, B> = $props();
-
-	const bond = DialogBond.get();
-
-	const footerProps = $derived({
-		...bond?.footer({}),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="dialog.footer"
-	class={['border-border', 'flex px-4', '$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)}
-	{...footerProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogFooterProps } from './types';
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogFooterProps<E, B> = $props();
+
+	const bond = DialogBond.get();
+
+	const footerProps = $derived({
+		...bond?.footer({}),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="dialog.footer"
+	class={['border-border', 'flex px-4', '$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)}
+	{...footerProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>

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

@@ -1,39 +1,39 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import type { DialogHeaderProps } from './types';
-	import { DialogBond } from './bond.svelte';
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogHeaderProps<E, B> = $props();
-
-	const bond = DialogBond.get();
-
-	const headerProps = $derived({
-		...bond?.header({}),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="dialog.header"
-	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)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...headerProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import type { DialogHeaderProps } from './types';
+	import { DialogBond } from './bond.svelte';
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogHeaderProps<E, B> = $props();
+
+	const bond = DialogBond.get();
+
+	const headerProps = $derived({
+		...bond?.header({}),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="dialog.header"
+	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)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...headerProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>

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

@@ -1,110 +1,110 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { animate as motion } from 'motion';
-	import { Teleport, ActivePortal } from '../portal';
-	import { defineProperty, defineState } from '../../utils';
-	import type { Base } from '../atom';
-	import { DURATION } from '../../shared';
-	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
-	import type { DialogProps } from './types';
-
-	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>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { animate as motion } from 'motion';
+	import { Teleport, ActivePortal } from '../portal';
+	import { defineProperty, defineState } from '../../utils';
+	import type { Base } from '../atom';
+	import { DURATION } from '../../shared';
+	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
+	import type { DialogProps } from './types';
+
+	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-title.svelte

@@ -1,41 +1,41 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { DialogBond } from './bond.svelte';
-	import type { DialogTitleProps } from './types';
-
-	let {
-		class: klass = '',
-		as = 'h3' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogTitleProps<E, B> = $props();
-
-	const bond = DialogBond.get();
-
-	const titleProps = $derived({
-		...bond?.title({}),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="dialog.title"
-	class={['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)}
-	{...titleProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogTitleProps } from './types';
+
+	let {
+		class: klass = '',
+		as = 'h3' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogTitleProps<E, B> = $props();
+
+	const bond = DialogBond.get();
+
+	const titleProps = $derived({
+		...bond?.title({}),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="dialog.title"
+	class={['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)}
+	{...titleProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>