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

package/dist/components/dropdown-menu/item/types.d.ts

@@ -0,0 +1,57 @@
+import type { Snippet } from 'svelte';
+import type { DropdownMenuItemController } from './controller.svelte';
+import type { ClassValue } from '../../../utils';
+import type { Base, HtmlAtomProps } from '../../atom';
+export interface DropdownMenuItemProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
+    /**
+     * Custom CSS class(es) to apply to the menu item
+     */
+    class?: ClassValue;
+    /**
+     * Preset key for styling
+     * @default 'dropdown-menu.item'
+     */
+    preset?: string;
+    /**
+     * Whether the menu item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click event handler
+     */
+    onclick?: (event: MouseEvent) => void;
+    /**
+     * Mount lifecycle callback
+     */
+    onmount?: (this: DropdownMenuItemController) => void;
+    /**
+     * Destroy lifecycle callback
+     */
+    ondestroy?: (this: DropdownMenuItemController) => void;
+    /**
+     * Animation configuration
+     */
+    animate?: (this: DropdownMenuItemController) => any;
+    /**
+     * Enter animation configuration
+     */
+    enter?: (this: DropdownMenuItemController) => any;
+    /**
+     * Exit animation configuration
+     */
+    exit?: (this: DropdownMenuItemController) => any;
+    /**
+     * Initial state configuration
+     */
+    initial?: (this: DropdownMenuItemController) => any;
+    /**
+     * Factory function to create a custom DropdownMenuItemController instance
+     */
+    factory?: () => DropdownMenuItemController;
+    /**
+     * Render prop for children
+     */
+    children?: Snippet<[{
+        menuItem: DropdownMenuItemController;
+    }]>;
+}

package/dist/components/dropdown-menu/item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/dropdown-menu/types.d.ts

@@ -0,0 +1,3 @@
+import type { HtmlAtomProps, Base } from '../atom';
+export interface DropdownMenuListProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
+}

package/dist/components/dropdown-menu/types.js

@@ -0,0 +1 @@
+export {};

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.d.ts

@@ -1,4 +1,4 @@
-import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte';
+import { Bond, BondAtom, BondState, type BondStateProps } from '../../../shared/bond.svelte';
 export interface ValidationError {
     path: (string | number)[];
     message: string;
@@ -13,12 +13,13 @@ export interface ValidationAdapter<Schema, Value> {
     validate(schema: Schema, value: Value): ValidationResult<Value>;
     validateAsync?(schema: Schema, value: Value): Promise<ValidationResult<Value>>;
 }
-export declare class ZodValidationAdapter<T extends {
-    parse: (value: unknown) => any;
-    parseAsync?: (value: unknown) => Promise<any>;
-}> implements ValidationAdapter<T, any> {
-    validate(schema: T, value: unknown): ValidationResult<any>;
-    validateAsync(schema: T, value: unknown): Promise<ValidationResult<any>>;
+type ZodLikeSchema = {
+    parse: (value: unknown) => unknown;
+    parseAsync?: (value: unknown) => Promise<unknown>;
+};
+export declare class ZodValidationAdapter<T extends ZodLikeSchema> implements ValidationAdapter<T, unknown> {
+    validate(schema: T, value: unknown): ValidationResult;
+    validateAsync(schema: T, value: unknown): Promise<ValidationResult>;
 }
 export type FieldStateProps<Extension extends Record<string, unknown> = Record<string, unknown>, Schema = unknown, Value = unknown> = BondStateProps & {
     disabled: boolean;
@@ -31,7 +32,7 @@ export type FieldStateProps<Extension extends Record<string, unknown> = Record<s
     checked?: boolean;
     schema?: Schema;
     validator?: ValidationAdapter<Schema, Value>;
-    onvalidation?: (errors: ValidationError[]) => void;
+    onvalidation?: (result: ValidationResult<Value>) => void;
     extend: Extension;
 };
 export type FieldDomElements = {
@@ -39,31 +40,41 @@ export type FieldDomElements = {
     label: HTMLElement;
     control: HTMLElement;
 };
-export declare class FieldBond extends Bond<FieldStateProps, FieldBondState, FieldDomElements> {
-    static CONTEXT_KEY: string;
-    constructor(state: FieldBondState);
-    root(): {
-        [x: symbol]: (node: HTMLElement) => void;
+export declare class FieldRootAtom extends BondAtom<FieldBond, HTMLElement> {
+    constructor(bond: FieldBond);
+    get attrs(): {
         id: string;
         role: string;
         'aria-labelledby': string;
         'aria-describedby': string | undefined;
         'aria-invalid': string;
     };
-    label(): {
-        [x: symbol]: (node: HTMLElement) => void;
+}
+export declare class FieldLabelAtom extends BondAtom<FieldBond, HTMLElement> {
+    constructor(bond: FieldBond);
+    get attrs(): {
         id: string;
         for: string;
     };
-    control(): {
-        [x: symbol]: (node: HTMLElement) => void;
+}
+export declare class FieldControlAtom extends BondAtom<FieldBond, HTMLElement> {
+    constructor(bond: FieldBond);
+    get attrs(): {
         id: string;
         'aria-labelledby': string;
         'aria-describedby': string | undefined;
         'aria-invalid': string;
         'aria-disabled': string;
         'aria-readonly': string;
+        'aria-errormessage': string | undefined;
     };
+}
+export declare class FieldBond extends Bond<FieldStateProps, FieldBondState, FieldDomElements> {
+    static CONTEXT_KEY: string;
+    constructor(state: FieldBondState);
+    root(): FieldRootAtom;
+    label(): FieldLabelAtom;
+    control(): FieldControlAtom;
     share(): this;
     static get(): FieldBond | undefined;
     static set(bond: FieldBond): FieldBond;
@@ -86,3 +97,4 @@ export declare class FieldBondState<Props extends FieldStateProps = FieldStatePr
         value: unknown;
     };
 }
+export {};