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

package/dist/components/tabs/tab/tab-description.svelte

@@ -1,41 +1,41 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
-	import type { TabDescriptionProps } from '../types';
-	import { HtmlAtom, type Base } from '../../atom';
-	import { TabBond } from './bond.svelte';
-
-	const bond = TabBond.get();
-
-	let {
-		class: klass = '',
-		as = 'p' as E,
-		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: TabDescriptionProps<E, B> = $props();
-
-	const descriptionProps = $derived({
-		...bond?.description(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="tab.description"
-	class={['border-border', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{as}
-	{...descriptionProps}
->
-	{@render children?.({ tab: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+	import type { TabDescriptionProps } from '../types';
+	import { HtmlAtom, type Base } from '../../atom';
+	import { TabBond } from './bond.svelte';
+
+	const bond = TabBond.get();
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		children,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: TabDescriptionProps<E, B> = $props();
+
+	const descriptionProps = $derived({
+		...bond?.description(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="tab.description"
+	class={['border-border', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{as}
+	{...descriptionProps}
+>
+	{@render children?.({ tab: bond })}
+</HtmlAtom>

package/dist/components/tabs/tab/tab-header.svelte

@@ -1,71 +1,71 @@
-<script
-	lang="ts"
-	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
->
-	import type { TabHeaderProps } from '../types';
-	import { TabBond } from './bond.svelte';
-	import { HtmlAtom, type Base } from '../../atom';
-
-	const bond = TabBond.get();
-
-	const isActive = $derived(bond?.state.isActive);
-	const isDisabled = $derived(bond?.state.props.disabled);
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		children,
-		onpointerdown,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: TabHeaderProps = $props();
-
-	const headerProps = $derived({
-		...bond?.header(),
-		...restProps
-	});
-
-	function handlePointerDown(ev: PointerEvent) {
-		if (isDisabled) return;
-
-		onpointerdown?.(ev, { tab: bond });
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		bond?.state.select();
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="tab.header"
-	as="button"
-	class={[
-		'border-border text-foreground/60 hover:text-foreground/80 active:text-foreground/100 bg-foreground/0 hover:bg-foreground/5 active:bg-foreground/10 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
-		isActive && 'text-primary bg-accent/10 hover:bg-accent/15 active:bg-accent/20',
-		isDisabled && 'opacity-50',
-		'$preset',
-		klass
-	]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	type="button"
-	disabled={isDisabled}
-	onpointerdown={handlePointerDown}
-	{...headerProps}
->
-	{@render children?.({
-		tab: bond
-	})}
-</HtmlAtom>
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import type { TabHeaderProps } from '../types';
+	import { TabBond } from './bond.svelte';
+	import { HtmlAtom, type Base } from '../../atom';
+
+	const bond = TabBond.get();
+
+	const isActive = $derived(bond?.state.isActive);
+	const isDisabled = $derived(bond?.state.props.disabled);
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		children,
+		onpointerdown,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: TabHeaderProps = $props();
+
+	const headerProps = $derived({
+		...bond?.header(),
+		...restProps
+	});
+
+	function handlePointerDown(ev: PointerEvent) {
+		if (isDisabled) return;
+
+		onpointerdown?.(ev, { tab: bond });
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond?.state.select();
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="tab.header"
+	as="button"
+	class={[
+		'border-border text-foreground/60 hover:text-foreground/80 active:text-foreground/100 bg-foreground/0 hover:bg-foreground/5 active:bg-foreground/10 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
+		isActive && 'text-primary bg-accent/10 hover:bg-accent/15 active:bg-accent/20',
+		isDisabled && 'opacity-50',
+		'$preset',
+		klass
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	type="button"
+	disabled={isDisabled}
+	onpointerdown={handlePointerDown}
+	{...headerProps}
+>
+	{@render children?.({
+		tab: bond
+	})}
+</HtmlAtom>

package/dist/components/tabs/tab/tab-root.svelte

@@ -1,86 +1,86 @@
-<script
-	lang="ts"
-	generics="D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
->
-	import { nanoid } from 'nanoid';
-	import { animate as motion } from 'motion';
-	import { defineProperty, defineState } from '../../../utils';
-	import { TabBond, TabBondState, type TabBondProps } from './bond.svelte';
-	import { TabsBond } from '../bond.svelte';
-	import { type Base } from '../../atom';
-	import { Stack } from '../../stack';
-
-	const tabsBond = TabsBond.get();
-
-	const headerElement = $derived(tabsBond?.elements.header);
-
-	let {
-		class: klass = '',
-		value = nanoid(),
-		disabled = false,
-		data = undefined,
-		factory = _factory,
-		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	const bondProps = defineState<TabBondProps<D>>([
-		defineProperty('value', () => value),
-		defineProperty('disabled', () => disabled),
-		defineProperty('data', () => data)
-	]);
-
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
-
-	const isActive = $derived(bond.state.isActive ?? false);
-
-	const unmount = bond.mount();
-	$effect(() => unmount);
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new TabBondState(() => props);
-
-		return new TabBond(bondState);
-	}
-
-	function _animate(node: HTMLElement) {
-		motion(node, { opacity: +isActive }, { duration: 0 });
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{#if headerElement && children}
-	<Stack.Item
-		{bond}
-		preset="tab"
-		class={[
-			'border-border tab-root flex flex-col',
-			!isActive && 'pointer-events-none',
-			'$preset',
-			klass
-		]}
-		onmount={onmount?.bind(bond.state)}
-		ondestroy={ondestroy?.bind(bond.state)}
-		enter={enter?.bind(bond.state)}
-		exit={exit?.bind(bond.state)}
-		initial={initial?.bind(bond.state)}
-		animate={animate?.bind(bond.state)}
-		{...rootProps}
-	>
-		{@render children?.({ tab: bond })}
-	</Stack.Item>
-{/if}
+<script
+	lang="ts"
+	generics="D, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
+>
+	import { nanoid } from 'nanoid';
+	import { animate as motion } from 'motion';
+	import { defineProperty, defineState } from '../../../utils';
+	import { TabBond, TabBondState, type TabBondProps } from './bond.svelte';
+	import { TabsBond } from '../bond.svelte';
+	import { type Base } from '../../atom';
+	import { Stack } from '../../stack';
+
+	const tabsBond = TabsBond.get();
+
+	const headerElement = $derived(tabsBond?.elements.header);
+
+	let {
+		class: klass = '',
+		value = nanoid(),
+		disabled = false,
+		data = undefined,
+		factory = _factory,
+		children,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	const bondProps = defineState<TabBondProps<D>>([
+		defineProperty('value', () => value),
+		defineProperty('disabled', () => disabled),
+		defineProperty('data', () => data)
+	]);
+
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond?.root(),
+		...restProps
+	});
+
+	const isActive = $derived(bond.state.isActive ?? false);
+
+	const unmount = bond.mount();
+	$effect(() => unmount);
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new TabBondState(() => props);
+
+		return new TabBond(bondState);
+	}
+
+	function _animate(node: HTMLElement) {
+		motion(node, { opacity: +isActive }, { duration: 0 });
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{#if headerElement && children}
+	<Stack.Item
+		{bond}
+		preset="tab"
+		class={[
+			'border-border tab-root flex flex-col',
+			!isActive && 'pointer-events-none',
+			'$preset',
+			klass
+		]}
+		onmount={onmount?.bind(bond.state)}
+		ondestroy={ondestroy?.bind(bond.state)}
+		enter={enter?.bind(bond.state)}
+		exit={exit?.bind(bond.state)}
+		initial={initial?.bind(bond.state)}
+		animate={animate?.bind(bond.state)}
+		{...rootProps}
+	>
+		{@render children?.({ tab: bond })}
+	</Stack.Item>
+{/if}

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

@@ -1,38 +1,38 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom } from '../atom';
-	import type { ToastDescriptionProps } from './types';
-	import { ToastBond } from './bond';
-	export type { ToastDescriptionProps } from './types';
-
-	const bond = ToastBond.get();
-
-	let {
-		as = 'p' as T,
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ToastDescriptionProps<T> & HTMLAttributes<HTMLElementTagNameMap[T]> = $props();
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="toast.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)}
-	{...bond?.title(restProps)}
->
-	{@render children?.({ toast: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '../atom';
+	import type { ToastDescriptionProps } from './types';
+	import { ToastBond } from './bond';
+	export type { ToastDescriptionProps } from './types';
+
+	const bond = ToastBond.get();
+
+	let {
+		as = 'p' as T,
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ToastDescriptionProps<T> & HTMLAttributes<HTMLElementTagNameMap[T]> = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="toast.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)}
+	{...bond?.title(restProps)}
+>
+	{@render children?.({ toast: bond })}
+</HtmlAtom>

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

@@ -1,61 +1,61 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { ToastBond, ToastBondState, type ToastBondProps } from './bond';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom } from '../atom';
-	import type { ToastRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		class: klass = '',
-		disabled = false,
-		extend = {},
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ToastRootProps<T> & HTMLAttributes<HTMLElementTagNameMap[T]> = $props();
-
-	const bondProps = defineState<ToastBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			)
-		],
-		() => ({ disabled, extend })
-	);
-
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new ToastBondState(() => props);
-		return new ToastBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	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)}
-	{...bond?.root(restProps)}
->
-	{@render children?.({ toast: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { ToastBond, ToastBondState, type ToastBondProps } from './bond';
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import type { ToastRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		class: klass = '',
+		disabled = false,
+		extend = {},
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ToastRootProps<T> & HTMLAttributes<HTMLElementTagNameMap[T]> = $props();
+
+	const bondProps = defineState<ToastBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			)
+		],
+		() => ({ disabled, extend })
+	);
+
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new ToastBondState(() => props);
+		return new ToastBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	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)}
+	{...bond?.root(restProps)}
+>
+	{@render children?.({ toast: bond })}
+</HtmlAtom>

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

@@ -1,35 +1,35 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom } from '../atom';
-	import { ToastBond } from './bond';
-	import type { ToastTitleProps } from './types';
-
-	const bond = ToastBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ToastTitleProps<T> & HTMLAttributes<HTMLElementTagNameMap[T]> = $props();
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="toast.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)}
-	{...bond?.title(restProps)}
->
-	{@render children?.({ toast: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '../atom';
+	import { ToastBond } from './bond';
+	import type { ToastTitleProps } from './types';
+
+	const bond = ToastBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ToastTitleProps<T> & HTMLAttributes<HTMLElementTagNameMap[T]> = $props();
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="toast.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)}
+	{...bond?.title(restProps)}
+>
+	{@render children?.({ toast: bond })}
+</HtmlAtom>