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

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

@@ -1,7 +1,18 @@
 import { getContext, setContext } from 'svelte';
-import { createAttachmentKey } from 'svelte/attachments';
-import { FormBond } from '../bond.svelte';
-import { Bond, BondState } from '../../../shared/bond.svelte';
+import { Bond, BondAtom, BondState } from '../../../shared/bond.svelte';
+function isZodLikeError(error) {
+    return (typeof error === 'object' &&
+        error !== null &&
+        'issues' in error &&
+        Array.isArray(error.issues));
+}
+function toValidationError(issue) {
+    return {
+        path: issue.path || [],
+        message: issue.message || 'Validation error',
+        ...(issue.code ? { code: issue.code } : {})
+    };
+}
 export class ZodValidationAdapter {
     validate(schema, value) {
         try {
@@ -9,14 +20,10 @@ export class ZodValidationAdapter {
             return { success: true, data, errors: [] };
         }
         catch (error) {
-            if (error?.issues && Array.isArray(error.issues)) {
+            if (isZodLikeError(error)) {
                 return {
                     success: false,
-                    errors: error.issues.map((issue) => ({
-                        path: issue.path || [],
-                        message: issue.message || 'Validation error',
-                        code: issue.code
-                    }))
+                    errors: error.issues.map(toValidationError)
                 };
             }
             throw error;
@@ -31,59 +38,74 @@ export class ZodValidationAdapter {
             return { success: true, data, errors: [] };
         }
         catch (error) {
-            if (error?.issues && Array.isArray(error.issues)) {
+            if (isZodLikeError(error)) {
                 return {
                     success: false,
-                    errors: error.issues.map((issue) => ({
-                        path: issue.path || [],
-                        message: issue.message || 'Validation error',
-                        code: issue.code
-                    }))
+                    errors: error.issues.map(toValidationError)
                 };
             }
             throw error;
         }
     }
 }
-export class FieldBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/form/field';
-    constructor(state) {
-        super(state);
+export class FieldRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
     }
-    root() {
+    get attrs() {
         return {
-            id: `root-${this.id}`,
+            ...super.attrs,
+            id: `root-${this.bond.id}`,
             role: 'group',
-            'aria-labelledby': `label-${this.id}`,
-            'aria-describedby': this.state.errors.length > 0 ? `error-${this.id}` : undefined,
-            'aria-invalid': !!this.state.errors.length + '',
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
+            'aria-labelledby': `label-${this.bond.id}`,
+            'aria-describedby': this.bond.state.errors.length > 0 ? `error-${this.bond.id}` : undefined,
+            'aria-invalid': `${this.bond.state.errors.length > 0}`
         };
     }
-    label() {
+}
+export class FieldLabelAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'label');
+    }
+    get attrs() {
         return {
-            id: `label-${this.id}`,
-            for: `control-${this.id}`,
-            [createAttachmentKey()]: (node) => {
-                this.elements.label = node;
-            }
+            ...super.attrs,
+            id: `label-${this.bond.id}`,
+            for: `control-${this.bond.id}`
         };
     }
-    control() {
+}
+export class FieldControlAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'control');
+    }
+    get attrs() {
         return {
-            id: `control-${this.id}`,
-            'aria-labelledby': `label-${this.id}`,
-            'aria-describedby': this.state.errors.length > 0 ? `error-${this.id}` : undefined,
-            'aria-invalid': !!this.state.errors.length + '',
-            'aria-disabled': this.state.props.disabled + '',
-            'aria-readonly': this.state.props.readonly + '',
-            [createAttachmentKey()]: (node) => {
-                this.elements.control = node;
-            }
+            ...super.attrs,
+            id: `control-${this.bond.id}`,
+            'aria-labelledby': `label-${this.bond.id}`,
+            'aria-describedby': this.bond.state.errors.length > 0 ? `error-${this.bond.id}` : undefined,
+            'aria-invalid': `${this.bond.state.errors.length > 0}`,
+            'aria-disabled': `${this.bond.state.props.disabled}`,
+            'aria-readonly': `${this.bond.state.props.readonly}`,
+            'aria-errormessage': this.bond.state.errors.length > 0 ? `error-${this.bond.id}` : undefined
         };
     }
+}
+export class FieldBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/form/field';
+    constructor(state) {
+        super(state, 'field');
+    }
+    root() {
+        return this.atom('root', () => new FieldRootAtom(this));
+    }
+    label() {
+        return this.atom('label', () => new FieldLabelAtom(this));
+    }
+    control() {
+        return this.atom('control', () => new FieldControlAtom(this));
+    }
     share() {
         return FieldBond.set(this);
     }
@@ -95,16 +117,10 @@ export class FieldBond extends Bond {
     }
 }
 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;
@@ -131,20 +147,22 @@ export class FieldBondState extends BondState {
         const { schema, validator, value, onvalidation } = this.props;
         if (!schema || !validator) {
             this.#errors = [];
-            onvalidation?.([]);
-            return { errors: this.#errors };
+            const result = { success: true, data: value, errors: [] };
+            onvalidation?.(result);
+            return result;
         }
         const result = validator.validate(schema, value);
         this.#errors = result.errors;
-        onvalidation?.({ data: result.data, errors: this.#errors });
+        onvalidation?.(result);
         return result;
     }
     async validateASync() {
         const { schema, validator, value, onvalidation } = this.props;
         if (!schema || !validator) {
             this.#errors = [];
-            onvalidation?.([]);
-            return { errors: this.#errors };
+            const result = { success: true, data: value, errors: [] };
+            onvalidation?.(result);
+            return result;
         }
         this.#isValidating = true;
         try {
@@ -152,7 +170,7 @@ export class FieldBondState extends BondState {
                 ? await validator.validateAsync(schema, value)
                 : validator.validate(schema, value);
             this.#errors = result.errors;
-            onvalidation?.({ data: result.data, errors: this.#errors });
+            onvalidation?.(result);
             return result;
         }
         finally {

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

@@ -1,8 +1,10 @@
-<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';
 
+	type InputDetail = { value?: unknown; files?: File[]; date?: Date | null; number?: number; checked?: boolean }
+
 	const bond = FieldBond.get();
 	const name = $derived(bond?.state?.props?.name);
 
@@ -16,33 +18,55 @@
 		children = undefined,
 		oninput = undefined,
 		...restProps
-	}: FieldControlProps<B> = $props();
-	const controlProps = $derived({ ...bond.control(), ...restProps });
+	}: FieldControlProps<E, B> = $props();
+	
+	const controlProps = $derived.by(() => {
+		return {
+			...(bond?.control().spread ?? {}),
+			...restProps
+		};
+	});
 
-	function handleInput(ev: CustomEvent, detail: any) {
-		oninput?.(ev);
+	function handleInput(
+		ev: InputEvent,
+		inputDetail: InputDetail
+	) {
+		oninput?.(ev, inputDetail);
 
 		if (ev.defaultPrevented) {
 			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;
+		const detail = inputDetail ?? {};
+
+		value = detail?.value;
+		files = detail?.files ?? [];
+		date = detail?.date ?? null;
+		if (detail?.number !== undefined) {
+			number = detail.number;
+		}
+		checked = detail?.checked ?? false;
+
+		if (!bond) {
+			return;
+		}
+
+		bond.state.props.value = value
+		bond.state.props.files = files
+		bond.state.props.date = date
+		bond.state.props.number = 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: InputEvent, detail: InputDetail) => handleInput(ev, detail)}
 	{...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>

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

@@ -0,0 +1,26 @@
+import { type Base } from '../../atom';
+import type { FieldTextProps } from '../types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(): {
+    props: FieldTextProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'p', 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(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'p', 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 = 'p', 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 FieldHelperText: $$IsomorphicComponent;
+type FieldHelperText<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> = InstanceType<typeof FieldHelperText<E, B>>;
+export default FieldHelperText;

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

@@ -1,6 +1,5 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
-	import { Label } from '../../label';
-	import type { Base } from '../../atom';
+	import { HtmlAtom, type Base } from '../../atom';
 	import { FieldBond } from './bond.svelte';
 	import type { FieldLabelProps } from '../types';
 
@@ -8,17 +7,16 @@
 
 	let {
 		class: klass = '',
-		as = 'label' as E,
 		children = undefined,
 		...restProps
-	}: FieldLabelProps = $props();
+	}: FieldLabelProps<E, B> = $props();
 
 	const labelProps = $derived({
-		...bond?.label(),
+		...(bond?.label().spread ?? {}),
 		...restProps
 	});
 </script>
 
-<Label {as} {bond} preset="field.label" class={['flex flex-col', '$preset', klass]} {...labelProps}>
-	{@render children?.()}
-</Label>
+<HtmlAtom preset="field.label" class={['flex', '$preset', klass]} {...labelProps}>
+	{@render children?.({ field: bond })}
+</HtmlAtom>

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

@@ -1,7 +1,7 @@
-import type { Base } from '../../atom';
+import { type Base } from '../../atom';
 import type { FieldLabelProps } from '../types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base>(): {
-    props: FieldLabelProps;
+    props: FieldLabelProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { onDestroy } from 'svelte';
+	import { onDestroy, untrack } from 'svelte';
 	import { defineProperty, defineState } from '../../../utils';
 	import { HtmlAtom, type Base } from '../../atom';
 	import { FieldBond, FieldBondState, type FieldStateProps } from './bond.svelte';
@@ -32,16 +32,25 @@
 		),
 		defineProperty('type', () => typeof value),
 		defineProperty('schema', () => schema),
-		defineProperty('validator', () => validator ?? formBond.state.props.validator)
+		defineProperty(
+			'validator',
+			() =>
+				validator ??
+				(formBond?.state?.props as { validator?: FieldStateProps['validator'] } | undefined)
+					?.validator
+		)
 	]);
-	const bond = factory(bondProps).share();
+	const bondFactory = untrack(() => factory);
+	const bond = bondFactory(bondProps).share();
 
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
+	const rootProps = $derived(
+		({
+			...bond.root().spread,
+			...restProps
+		}) as Record<string, unknown>
+	);
 
-	const unmount = formBond.state.mountField(bond.id, bond);
+	const unmount = formBond?.state.mountField(bond.id, bond) ?? (() => {});
 	onDestroy(() => unmount());
 
 	function _factory(props: typeof bondProps) {
@@ -52,6 +61,7 @@
 	export function getBond() {
 		return bond;
 	}
+	
 </script>
 
 <HtmlAtom preset="field" class={['flex flex-col', '$preset', klass]} {...rootProps}>

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

@@ -1,66 +1,66 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import { defineState, defineProperty } from '../../utils/state';
-	import type { Override, Factory } from '../../types';
-	import { FormBond, FormBondState, type FormProps } from './bond.svelte';
-
-	type CommonProps = {
-		factory?: Factory<FormBond>;
-	};
-
-	type RenderlessProps = {
-		renderless?: true;
-		children?: Snippet<[{ form: FormBond }]>;
-	};
-
-	type RenderfullProps<B extends Base = Base> = Override<
-		HtmlAtomProps<'form', B>,
-		{
-			renderless?: false;
-			children?: Snippet<[{ form: FormBond }]>;
-		}
-	>;
-
-	export type FormRootProps<B extends Base = Base> = CommonProps &
-		(RenderlessProps | RenderfullProps<B>);
-</script>
-
-<script lang="ts" generics="B extends Base = Base">
-	let {
-		class: klass = '',
-		renderless = false,
-		validator = undefined,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: FormRootProps<S> & HTMLAttributes<HTMLFormElement> = $props();
-
-	const bondProps = defineState<FormProps>([
-		defineProperty('renderless', () => renderless),
-		defineProperty('validator', () => validator),
-		defineProperty('rest', () => restProps)
-	]);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		// Placeholder for any factory logic if needed
-
-		const bondState = new FormBondState(() => props);
-
-		return new FormBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{#if renderless}
-	{@render children?.({ form: bond })}
-{:else}
-	<HtmlAtom {bond} preset="form" class={['$preset', klass]} as="form" {...restProps}>
-		{@render children?.({ form: bond })}
-	</HtmlAtom>
-{/if}
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { defineState, defineProperty } from '../../utils/state';
+	import type { Override, Factory } from '../../types';
+	import { FormBond, FormBondState, type FormProps } from './bond.svelte';
+
+	type CommonProps = {
+		factory?: Factory<FormBond>;
+	};
+
+	type RenderlessProps = {
+		renderless?: true;
+		children?: Snippet<[{ form: FormBond }]>;
+	};
+
+	type RenderfullProps<B extends Base = Base> = Override<
+		HtmlAtomProps<'form', B>,
+		{
+			renderless?: false;
+			children?: Snippet<[{ form: FormBond }]>;
+		}
+	>;
+
+	export type FormRootProps<B extends Base = Base> = CommonProps &
+		(RenderlessProps | RenderfullProps<B>);
+</script>
+
+<script lang="ts" generics="B extends Base = Base">
+	let {
+		class: klass = '',
+		renderless = false,
+		validator = undefined,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: FormRootProps<S> & HTMLAttributes<HTMLFormElement> = $props();
+
+	const bondProps = defineState<FormProps>([
+		defineProperty('renderless', () => renderless),
+		defineProperty('validator', () => validator),
+		defineProperty('rest', () => restProps)
+	]);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		// Placeholder for any factory logic if needed
+
+		const bondState = new FormBondState(() => props);
+
+		return new FormBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{#if renderless}
+	{@render children?.({ form: bond })}
+{:else}
+	<HtmlAtom {bond} preset="form" class={['$preset', klass]} as="form" {...restProps}>
+		{@render children?.({ form: bond })}
+	</HtmlAtom>
+{/if}