@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/element/html-element.svelte

@@ -1,85 +1,114 @@
-<script lang="ts" generics="T extends HtmlElementTagName">
-	import { untrack } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAttachmentKey } from 'svelte/attachments';
-	import { cn, toClassValue } from '../../utils';
-	import type { ElementType, HtmlElementProps, HtmlElementTagName } from './types';
-
-	type Element = ElementType<T>;
-
-	let {
-		class: klass = '',
-		as = 'div' as T,
-		global = true,
-		initial = undefined,
-		enter = undefined,
-		exit = undefined,
-		animate = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		onintroend = undefined,
-		children = undefined,
-		...restProps
-	}: HtmlElementProps<T> & Omit<HTMLAttributes<Element>, keyof HtmlElementProps<T>> = $props();
-
-	let node = $state<Element>();
-	// If enter animation is defined, we want to wait for it first beafore running animate
-	let hasEntered = $state(!(untrack(() => enter) ?? false));
-
-	$effect(() => {
-		if (!node) return;
-
-		const unmount = untrack(() => onmount?.(node!));
-
-		return () => {
-			if (typeof unmount === 'function') unmount(node!);
-			ondestroy?.(node!);
-		};
-	});
-
-	$effect(() => {
-		if(!hasEntered) return;
-		if (!node) return;
-
-		animate?.(node);
-	});
-
-	const elementProps = $derived({
-		[createAttachmentKey()]: (n: Element) => {
-			node = n;
-		},
-		onintroend: (ev: TransitionEvent) => {
-			onintroend?.(ev);
-			if (ev.defaultPrevented) return;
-
-			hasEntered = true;
-		},
-		...restProps
-	}) as Record<string, any>;
-
-	const transitionSnippet = $derived(global ? globalTransition : localTransition);
-
-	function enterTransition(node: Element) {
-		initial?.(node);
-		
-		return enter?.(node) ?? {};
-	}
-
-	function exitTransition(node: Element) {
-		return exit?.(node) ?? {};
-	}
-</script>
-
-{#snippet globalTransition()}
-	<svelte:element this={as} class={cn(toClassValue(klass))} in:enterTransition|global out:exitTransition|global {...elementProps}>
-		{@render children?.()}
-	</svelte:element>
-{/snippet}
-
-{#snippet localTransition()}
-	<svelte:element this={as} class={cn(toClassValue(klass))} in:enterTransition out:exitTransition {...elementProps}>
-		{@render children?.()}
-	</svelte:element>
-{/snippet}
-
-{@render transitionSnippet()}
+<script lang="ts" generics="T extends HtmlElementTagName">
+	import { untrack } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, toClassValue } from '../../utils';
+	import type { ElementType, HtmlElementProps, HtmlElementTagName } from './types';
+
+	type Element = ElementType<T>;
+
+	let {
+		class: klass = '',
+		as = 'div' as T,
+		global = true,
+		initial = undefined,
+		enter = undefined,
+		exit = undefined,
+		animate = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		onintroend = undefined,
+		onexitend = undefined,
+		children = undefined,
+		...restProps
+	}: HtmlElementProps<T> & Omit<HTMLAttributes<Element>, keyof HtmlElementProps<T>> = $props();
+
+	let node = $state<Element>();
+	// If enter animation is defined, we want to wait for it first before running animate
+	let hasEntered = $state(!(untrack(() => enter) ?? false));
+	// Track whether initial() has been applied — must only fire once at mount
+	let hasInitialized = false;
+
+	$effect(() => {
+		if (!node) return;
+
+		const unmount = untrack(() => onmount?.(node!));
+
+		return () => {
+			if (typeof unmount === 'function') unmount(node!);
+			ondestroy?.(node!);
+		};
+	});
+
+	$effect(() => {
+		if (!hasEntered) return;
+		if (!node) return;
+
+		animate?.(node);
+	});
+
+	const attachFunction = (n: Element) => {
+		node = n;
+	};
+
+	const finalKlass = $derived(cn(toClassValue(klass)));
+	const hasTransitions = $derived(!!(enter ?? exit));
+	const transitionSnippet = $derived(
+		!hasTransitions ? bareElement : global ? globalTransition : localTransition
+	);
+
+	// Only include onintroend/onexitend when transitions are active —
+	// avoids attaching handlers that can never fire on bare elements.
+	const elementProps = $derived.by(() => {
+		const base = { ...restProps };
+		if (hasTransitions) {
+			base.onintroend = handleIntroEnd;
+			base.onoutroend = handleExitEnd;
+		}
+		return base as Record<string, any>;
+	});
+
+	function handleIntroEnd(ev: TransitionEvent) {
+		onintroend?.(ev);
+		if (ev.defaultPrevented) return;
+		hasEntered = true;
+	}
+
+	function handleExitEnd(ev: TransitionEvent) {
+		onexitend?.(ev);
+	}
+
+	function enterTransition(node: Element) {
+		return enter?.(node) ?? {};
+	}
+
+	function exitTransition(node: Element) {
+		return exit?.(node) ?? {};
+	}
+
+	function applyInitial(node: Element) {
+		if (!node) return;
+		if (hasInitialized) return;
+		hasInitialized = true;
+		untrack(() => initial?.(node!));
+	}
+</script>
+
+{#snippet bareElement()}
+	<svelte:element this={as} {@attach applyInitial} {@attach attachFunction} class={finalKlass} {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{/snippet}
+
+{#snippet globalTransition()}
+	<svelte:element this={as} {@attach applyInitial} {@attach attachFunction} class={finalKlass} in:enterTransition|global out:exitTransition|global {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{/snippet}
+
+{#snippet localTransition()}
+	<svelte:element this={as} {@attach applyInitial} {@attach attachFunction} class={finalKlass} in:enterTransition out:exitTransition {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{/snippet}
+
+{@render transitionSnippet()}

package/dist/components/element/html-element.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ElementType, HtmlElementProps, HtmlElementTagName } from './types';
 declare function $$render<T extends HtmlElementTagName>(): {
-    props: HtmlElementProps<T> & Omit<HTMLAttributes<ElementType<T>>, keyof HtmlElementProps<T>>;
+    props: HtmlElementProps<T, import("svelte").Snippet<[]>> & Omit<HTMLAttributes<ElementType<T>>, keyof HtmlElementProps<T, import("svelte").Snippet<[]>>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/element/svg-element.svelte

@@ -1,88 +1,88 @@
-<svelte:options namespace="svg" />
-
-<script lang="ts" generics="T extends SvgElementTagName">
-	import { untrack } from 'svelte';
-	import type { SVGAttributes } from 'svelte/elements';
-	import { createAttachmentKey } from 'svelte/attachments';
-	import { cn, toClassValue } from '../../utils';
-	import type { ElementType, SvgElementProps, SvgElementTagName } from './types';
-
-	type Element = ElementType<T>;
-
-	let {
-		class: klass = '',
-		as="g",
-		global = true,
-		initial = undefined,
-		enter = undefined,
-		exit = undefined,
-		animate = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		onintroend = undefined,
-		children = undefined,
-		...restProps
-	}: SvgElementProps<T> & Omit<SVGAttributes<Element>, keyof SvgElementProps<T>> = $props();
-
-	let node = $state<Element>();
-	// If enter animation is defined, we want to wait for it first beafore running animate
-	let hasEntered = $state(!(untrack(() => enter) ?? false));
-
-	$effect(() => {
-		if (!node) return;
-
-		const unmount = untrack(() => onmount?.(node!));
-
-		return () => {
-			if (typeof unmount === 'function') unmount(node!);
-			ondestroy?.(node!);
-		};
-	});
-
-	$effect(() => {
-		if(!hasEntered) return;
-		if (!node) return;
-
-		animate?.(node);
-	});
-
-	const elementProps = $derived({
-		[createAttachmentKey()]: (n: Element) => {
-			node = n;
-		},
-		class: cn(toClassValue(klass)),
-		onintroend: (ev: TransitionEvent) => {
-			onintroend?.(ev);
-			if (ev.defaultPrevented) return;
-
-			hasEntered = true;
-		},
-		...restProps
-	}) as Record<string, any>;
-
-	const transitionSnippet = $derived(global ? globalTransition : localTransition);
-
-	function enterTransition(node: Element) {
-		initial?.(node);
-		
-		return enter?.(node) ?? {};
-	}
-
-	function exitTransition(node: Element) {
-		return exit?.(node) ?? {};
-	}
-</script>
-
-{#snippet globalTransition()}
-	<svelte:element this={as} class={cn(toClassValue(klass))} in:enterTransition|global out:exitTransition|global {...elementProps}>
-		{@render children?.()}
-	</svelte:element>
-{/snippet}
-
-{#snippet localTransition()}
-	<svelte:element this={as} class={cn(toClassValue(klass))} in:enterTransition out:exitTransition {...elementProps}>
-		{@render children?.()}
-	</svelte:element>
-{/snippet}
-
-{@render transitionSnippet()}
+<svelte:options namespace="svg" />
+
+<script lang="ts" generics="T extends SvgElementTagName">
+	import { untrack } from 'svelte';
+	import type { SVGAttributes } from 'svelte/elements';
+	import { createAttachmentKey } from 'svelte/attachments';
+	import { cn, toClassValue } from '../../utils';
+	import type { ElementType, SvgElementProps, SvgElementTagName } from './types';
+
+	type Element = ElementType<T>;
+
+	let {
+		class: klass = '',
+		as="g",
+		global = true,
+		initial = undefined,
+		enter = undefined,
+		exit = undefined,
+		animate = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		onintroend = undefined,
+		children = undefined,
+		...restProps
+	}: SvgElementProps<T> & Omit<SVGAttributes<Element>, keyof SvgElementProps<T>> = $props();
+
+	let node = $state<Element>();
+	// If enter animation is defined, we want to wait for it first beafore running animate
+	let hasEntered = $state(!(untrack(() => enter) ?? false));
+
+	$effect(() => {
+		if (!node) return;
+
+		const unmount = untrack(() => onmount?.(node!));
+
+		return () => {
+			if (typeof unmount === 'function') unmount(node!);
+			ondestroy?.(node!);
+		};
+	});
+
+	$effect(() => {
+		if(!hasEntered) return;
+		if (!node) return;
+
+		animate?.(node);
+	});
+
+	const elementProps = $derived({
+		[createAttachmentKey()]: (n: Element) => {
+			node = n;
+		},
+		class: cn(toClassValue(klass)),
+		onintroend: (ev: TransitionEvent) => {
+			onintroend?.(ev);
+			if (ev.defaultPrevented) return;
+
+			hasEntered = true;
+		},
+		...restProps
+	}) as Record<string, any>;
+
+	const transitionSnippet = $derived(global ? globalTransition : localTransition);
+
+	function enterTransition(node: Element) {
+		initial?.(node);
+		
+		return enter?.(node) ?? {};
+	}
+
+	function exitTransition(node: Element) {
+		return exit?.(node) ?? {};
+	}
+</script>
+
+{#snippet globalTransition()}
+	<svelte:element this={as} class={cn(toClassValue(klass))} in:enterTransition|global out:exitTransition|global {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{/snippet}
+
+{#snippet localTransition()}
+	<svelte:element this={as} class={cn(toClassValue(klass))} in:enterTransition out:exitTransition {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{/snippet}
+
+{@render transitionSnippet()}

package/dist/components/element/types.d.ts

@@ -1,36 +1,48 @@
-import type { Snippet } from 'svelte';
 import type { HTMLAttributes, SVGAttributes } from 'svelte/elements';
 import type { TransitionConfig } from 'svelte/transition';
 import type { ClassValue } from '../../utils';
-export interface ElementProps<T extends ElementTagName> extends Record<string, unknown> {
+import type { Snippet } from 'svelte';
+export type HtmlElementTagName = keyof HTMLElementTagNameMap;
+export type SvgElementTagName = keyof SVGElementTagNameMap;
+export type ElementTagName = HtmlElementTagName | SvgElementTagName;
+export type HtmlElementType<T extends HtmlElementTagName> = HTMLElementTagNameMap[T];
+export type SvgElementType<T extends SvgElementTagName> = SVGElementTagNameMap[T];
+export type ElementType<T> = T extends HtmlElementTagName ? HTMLElementTagNameMap[T] : T extends SvgElementTagName ? SVGElementTagNameMap[T] : never;
+export type ElementAttributes<T extends ElementTagName> = T extends HtmlElementTagName ? HTMLAttributes<ElementType<T>> : T extends SvgElementTagName ? SVGAttributes<ElementType<T>> : never;
+export interface TransitionFunction<T extends Element = Element> {
+    (node: T): Partial<TransitionConfig> | void;
+}
+export interface NodeFunction<T extends ElementTagName = ElementTagName> {
+    (node: ElementType<T>, ...args: any[]): any;
+}
+export interface ElementProps<T extends ElementTagName = ElementTagName> extends Record<string, unknown> {
+    /** CSS class binding (string, array, or computed) */
     class?: ClassValue | ClassValue[];
+    /** Change the HTML tag (use polymorphic components) */
     as?: T | (string & {});
+    /** Apply styles globally */
     global?: boolean;
+    /** Initial animation/setup on mount */
     initial?: NodeFunction<T>;
+    /** Enter transition */
     enter?: TransitionFunction<T>;
+    /** Exit transition */
     exit?: TransitionFunction<T>;
+    /** Animation function */
     animate?: NodeFunction<T>;
+    /** Lifecycle: on mount */
     onmount?: NodeFunction<T>;
+    /** Lifecycle: on destroy */
     ondestroy?: NodeFunction<T>;
-    children?: Snippet<unknown[]>;
     [key: string]: unknown;
 }
-export type HtmlElementTagName = keyof HTMLElementTagNameMap;
-export type SvgElementTagName = keyof SVGElementTagNameMap;
-export interface HtmlElementProps<T extends HtmlElementTagName = 'div'> extends ElementProps<T> {
-    children?: Snippet<[]>;
-}
-export interface SvgElementProps<T extends SvgElementTagName = 'g'> extends ElementProps<T> {
-    children?: Snippet<[]>;
+export interface HtmlElementEventProps {
+    /** Fired when enter transition ends */
+    onintroend?: (ev: TransitionEvent) => void;
+    /** Fired when exit transition ends */
+    onexitend?: (ev: TransitionEvent) => void;
 }
-export type ElementTagName = HtmlElementTagName | SvgElementTagName;
-export type HtmlElementType<T extends HtmlElementTagName> = HTMLElementTagNameMap[T];
-export type SvgElementType<T extends SvgElementTagName> = SVGElementTagNameMap[T];
-export type ElementType<T> = T extends HtmlElementTagName ? HTMLElementTagNameMap[T] : T extends SvgElementTagName ? SVGElementTagNameMap[T] : never;
-export type ElementAttributes<T extends ElementTagName> = T extends HtmlElementTagName ? HTMLAttributes<ElementType<T>> : T extends SvgElementTagName ? SVGAttributes<ElementType<T>> : never;
-export interface TransitionFunction<T extends ElementTagName> {
-    (node: ElementType<T>): Partial<TransitionConfig> | (() => Partial<TransitionConfig>);
-}
-export interface NodeFunction<T extends ElementTagName> {
-    (node: ElementType<T>, ...args: any[]): any;
+export interface HtmlElementProps<T extends HtmlElementTagName = 'div', Children extends Snippet<unknown[]> = Snippet> extends ElementProps<T>, HtmlElementEventProps {
+    children?: Children;
 }
+export type SvgElementProps<T extends SvgElementTagName = 'g'> = ElementProps<T>;

package/dist/components/form/field/atoms.d.ts

@@ -1,4 +1,4 @@
 export { default as Root } from './field-root.svelte';
 export { default as Label } from './field-label.svelte';
 export { default as Control } from './field-control.svelte';
-export { default as Errors } from './field-errors.svelte';
+export { default as HelperText } from './field-helper-text.svelte';

package/dist/components/form/field/atoms.js

@@ -1,4 +1,4 @@
 export { default as Root } from './field-root.svelte';
 export { default as Label } from './field-label.svelte';
 export { default as Control } from './field-control.svelte';
-export { default as Errors } from './field-errors.svelte';
+export { default as HelperText } from './field-helper-text.svelte';

package/dist/components/form/field/bond.svelte.js

@@ -1,6 +1,5 @@
 import { getContext, setContext } from 'svelte';
 import { createAttachmentKey } from 'svelte/attachments';
-import { FormBond } from '../bond.svelte';
 import { Bond, BondState } from '../../../shared/bond.svelte';
 export class ZodValidationAdapter {
     validate(schema, value) {
@@ -98,13 +97,8 @@ export class FieldBondState extends BondState {
     #data = $state(undefined);
     #errors = $state([]);
     #isValidating = $state(false);
-    #form;
     constructor(props) {
         super(props);
-        this.#form = FormBond.get()?.state;
-        if (!this.#form) {
-            throw new Error('Form Context is undefined, FieldAtom must be used within a FormAtom context');
-        }
     }
     get value() {
         return this.props.value;

package/dist/components/form/field/field-control.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="B extends Base<{value: unknown}>">
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { HtmlAtom, type Base } from '../../atom';
 	import { FieldBond } from './bond.svelte';
 	import type { FieldControlProps } from '../types';
@@ -16,33 +16,54 @@
 		children = undefined,
 		oninput = undefined,
 		...restProps
-	}: FieldControlProps<B> = $props();
-	const controlProps = $derived({ ...bond.control(), ...restProps });
+	}: FieldControlProps<E, B> = $props();
+	const controlProps = $derived.by(() => {
+		const raw = /** @type {Record<string, unknown>} */ (bond?.control?.() ?? {});
+		return {
+			...raw,
+			...restProps
+		};
+	});
 
-	function handleInput(ev: CustomEvent, detail: any) {
-		oninput?.(ev);
+	function handleInput(
+		ev: CustomEvent<{
+			value?: unknown;
+			files?: File[];
+			date?: Date | null;
+			number?: number;
+			checked?: boolean;
+		}>
+	) {
+		oninput?.(ev, { value: ev?.detail?.value });
 
 		if (ev.defaultPrevented) {
 			return;
 		}
 
+		const detail = ev?.detail ?? {};
+
+		if (!bond) {
+			return;
+		}
+
 		bond.state.props.value = value = detail?.value;
 		bond.state.props.files = files = detail?.files ?? [];
 		bond.state.props.date = date = detail?.date ?? null;
-		bond.state.props.number = number = detail?.number ?? null;
+		if (detail?.number !== undefined) {
+			bond.state.props.number = number = detail.number;
+		}
 		bond.state.props.checked = checked = detail?.checked ?? false;
 	}
 </script>
 
 <HtmlAtom
-	{bond}
 	{value}
 	{checked}
 	{name}
 	preset="field.control"
 	class={['flex items-center', '$preset', klass]}
-	oninput={handleInput}
+	oninput={(ev: Event) => handleInput(ev as unknown as CustomEvent<{ value?: unknown; files?: File[]; date?: Date | null; number?: number; checked?: boolean }>)}
 	{...controlProps}
 >
-	{@render children?.()}
+	{@render children?.({ field: bond })}
 </HtmlAtom>

package/dist/components/form/field/field-control.svelte.d.ts

@@ -1,36 +1,26 @@
 import { type Base } from '../../atom';
 import type { FieldControlProps } from '../types';
-declare function $$render<B extends Base<{
-    value: unknown;
-}>>(): {
-    props: FieldControlProps<B>;
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: FieldControlProps<E, B>;
     exports: {};
     bindings: "number" | "value" | "date" | "checked" | "files";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<B extends Base<{
-    value: unknown;
-}>> {
-    props(): ReturnType<typeof $$render<B>>['props'];
-    events(): ReturnType<typeof $$render<B>>['events'];
-    slots(): ReturnType<typeof $$render<B>>['slots'];
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "number" | "value" | "date" | "checked" | "files";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <B extends Base<{
-        value: unknown;
-    }>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<B>['props']>, ReturnType<__sveltets_Render<B>['events']>, ReturnType<__sveltets_Render<B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<B>['bindings']>;
-    } & ReturnType<__sveltets_Render<B>['exports']>;
-    <B extends Base<{
-        value: unknown;
-    }>>(internal: unknown, props: ReturnType<__sveltets_Render<B>['props']> & {}): ReturnType<__sveltets_Render<B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const FieldControl: $$IsomorphicComponent;
-type FieldControl<B extends Base<{
-    value: unknown;
-}>> = InstanceType<typeof FieldControl<B>>;
+type FieldControl<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof FieldControl<E, B>>;
 export default FieldControl;

package/dist/components/form/field/field-helper-text.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../../atom';
+	import { FieldBond } from './bond.svelte';
+	import type { FieldTextProps } from '../types';
+
+	const bond = FieldBond.get();
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		children = undefined,
+		...restProps
+	}: FieldTextProps<E, B> = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	preset="field.helper-text"
+	class={['text-muted-foreground mt-1 text-xs', '$preset', klass]}
+	{...restProps}
+>
+	{@render children?.({ field: bond })}
+</HtmlAtom>