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

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

@@ -11,12 +11,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: SlideoverHeaderProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -30,12 +24,6 @@
 	{bond}
 	preset="drawer.header"
 	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)}
 	{...headerProps}
 	{...restProps}
 >

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

@@ -20,9 +20,11 @@
 		portal = undefined,
 		"z-index": zindex = 1,
 		onclose = undefined,
-		initial = animateDrawerRoot({ duration: 0 }),
-		animate = animateDrawerRoot({}),
 		factory = _factory,
+		fallback = {
+			animate: animateDrawerRoot({}),
+			initial: animateDrawerRoot({ duration: 0 }),
+		},
 		...restProps
 	}: SlideoverRootProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -86,8 +88,7 @@
 	]}
 	style="z-index: {layer.get()};"
 	closeby="none"
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
+	{fallback}
 	{...rootProps}
 >
 	<ActivePortal portal={portal ?? 'root.l0'}>

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

@@ -12,12 +12,6 @@
 		class: klass = '',
 		as = 'h3' as E,
 		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: SlideoverTitleProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -32,12 +26,6 @@
 	{bond}
 	preset="drawer.title"
 	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)}
 	{...titleProps}
 >
 	{@render children?.({ drawer: bond })}

package/dist/components/dropdown/dropdown-placeholder.svelte

@@ -7,12 +7,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	} = $props();
 

package/dist/components/dropdown/dropdown-placeholder.svelte.d.ts

@@ -3,12 +3,6 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B exten
     props: {
         class?: string;
         children?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
     } & Record<string, any>;
     exports: {};
     bindings: "";

package/dist/components/dropdown/dropdown-query.svelte

@@ -13,12 +13,6 @@
 		value = $bindable(),
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DropdownQueryProps = $props();
 </script>
@@ -33,11 +27,5 @@
 	{bond}
 	preset="dropdown.query"
 	class={['inline-flex h-auto w-auto flex-1 py-1', '$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)}
 	{...restProps}
 />

package/dist/components/dropdown-menu/bond.svelte.d.ts

@@ -10,10 +10,6 @@ export declare class DropdownMenuContentAtom extends PopoverContentAtom {
         role: "menu";
         'aria-activedescendant': string | undefined;
         'aria-orientation': "vertical";
-        'aria-modal': boolean;
-        'aria-labelledby': string;
-        inert: boolean | undefined;
-        tabindex: number;
         'data-active': boolean;
     };
     get handlers(): {

package/dist/components/dropdown-menu/dropdown-menu-content.svelte

@@ -12,12 +12,6 @@
 		base = Root as B,
 		preset = 'dropdown-menu.content',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	} = $props();
 </script>
@@ -28,12 +22,6 @@
 	{bond}
 	{preset}
 	class={['border-border overflow-hidden p-0', '$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)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/dropdown-menu/dropdown-menu-content.svelte.d.ts

@@ -6,12 +6,6 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B exten
         base?: B;
         preset?: string;
         children?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
     } & Record<string, any>;
     exports: {};
     bindings: "";

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

@@ -1,7 +1,7 @@
 export * as DropdownMenu from './atoms';
 export * from './types';
 export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams } from '../popover';
-export type { AnimatePopoverContentParams as AnimateDropdownMenuContentParams, animatePopoverContent as animateDropdownMenuContent } from '../popover/motion';
+export type { AnimatePopoverContentParams as AnimateDropdownMenuContentParams, animatePopoverContent as animateDropdownMenuContent } from '../popover/motion.svelte';
 export * from './item';
 export { dropdownMenu } from './attachments.svelte';
 export { DropdownMenuBond, DropdownMenuBondState, DropdownMenuContentAtom, DropdownMenuTriggerAtom, DropdownMenuItemAtom, type DropdownMenuBondProps, type DropdownMenuBondElements } from './bond.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 {};

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

@@ -1,6 +1,18 @@
 import { getContext, setContext } from 'svelte';
-import { createAttachmentKey } from 'svelte/attachments';
-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 {
@@ -8,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;
@@ -30,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);
     }
@@ -94,7 +117,6 @@ export class FieldBond extends Bond {
     }
 }
 export class FieldBondState extends BondState {
-    #data = $state(undefined);
     #errors = $state([]);
     #isValidating = $state(false);
     constructor(props) {
@@ -125,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 {
@@ -146,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

@@ -3,6 +3,8 @@
 	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);
 
@@ -17,41 +19,42 @@
 		oninput = undefined,
 		...restProps
 	}: FieldControlProps<E, B> = $props();
+	
 	const controlProps = $derived.by(() => {
-		const raw = /** @type {Record<string, unknown>} */ (bond?.control?.() ?? {});
 		return {
-			...raw,
+			...(bond?.control().spread ?? {}),
 			...restProps
 		};
 	});
 
 	function handleInput(
-		ev: CustomEvent<{
-			value?: unknown;
-			files?: File[];
-			date?: Date | null;
-			number?: number;
-			checked?: boolean;
-		}>
+		ev: InputEvent,
+		inputDetail: InputDetail
 	) {
-		oninput?.(ev, { value: ev?.detail?.value });
+		oninput?.(ev, inputDetail);
 
 		if (ev.defaultPrevented) {
 			return;
 		}
 
-		const detail = ev?.detail ?? {};
+		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 = detail?.value;
-		bond.state.props.files = files = detail?.files ?? [];
-		bond.state.props.date = date = detail?.date ?? null;
-		if (detail?.number !== undefined) {
-			bond.state.props.number = number = detail.number;
-		}
+		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>
@@ -62,7 +65,7 @@
 	{name}
 	preset="field.control"
 	class={['flex items-center', '$preset', klass]}
-	oninput={(ev: Event) => handleInput(ev as unknown as CustomEvent<{ value?: unknown; files?: File[]; date?: Date | null; number?: number; checked?: boolean }>)}
+	oninput={(ev: InputEvent, detail: InputDetail) => handleInput(ev, detail)}
 	{...controlProps}
 >
 	{@render children?.({ field: bond })}

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

@@ -12,11 +12,11 @@
 	}: FieldLabelProps<E, B> = $props();
 
 	const labelProps = $derived({
-		...bond?.label(),
+		...(bond?.label().spread ?? {}),
 		...restProps
 	});
 </script>
 
-<HtmlAtom preset="field.label" class={['flex flex-col', '$preset', klass]} {...labelProps}>
+<HtmlAtom preset="field.label" class={['flex', '$preset', klass]} {...labelProps}>
 	{@render children?.({ field: bond })}
 </HtmlAtom>

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

@@ -45,7 +45,7 @@
 
 	const rootProps = $derived(
 		({
-			...bond?.root(),
+			...bond.root().spread,
 			...restProps
 		}) as Record<string, unknown>
 	);
@@ -61,6 +61,7 @@
 	export function getBond() {
 		return bond;
 	}
+	
 </script>
 
 <HtmlAtom preset="field" class={['flex flex-col', '$preset', klass]} {...rootProps}>

package/dist/components/index.d.ts

@@ -52,3 +52,5 @@ export * from './image';
 export * from './virtual';
 export * from './switch';
 export * from './slider';
+export * from './progress';
+export * from './kbd';

package/dist/components/index.js

@@ -52,3 +52,5 @@ export * from './image';
 export * from './virtual';
 export * from './switch';
 export * from './slider';
+export * from './progress';
+export * from './kbd';

package/dist/components/input/input-file-control.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
 	import { HtmlAtom } from '../atom';
 	import { InputBond } from './bond.svelte';
 	import type { InputFileControlProps } from './types';
@@ -23,17 +22,6 @@
 
 	const hasFiles = $derived(files.length > 0);
 
-	const fileLabel = $derived(() => {
-		if (!hasFiles) return null;
-		if (files.length === 1) {
-			const f = files[0];
-			const ext = f.name.split('.').pop()?.toUpperCase() ?? '';
-			const size = formatSize(f.size);
-			return { name: f.name, ext, size };
-		}
-		return { name: `${files.length} files selected`, ext: '', size: formatSize(files.reduce((a, f) => a + f.size, 0)) };
-	});
-
 	function formatSize(bytes: number): string {
 		if (bytes < 1024) return `${bytes} B`;
 		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;

package/dist/components/input/input-icon.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { Icon, type IconProps } from '../icon';
 
-	let { class: klass = '', children = undefined, ...restProps }: IconProps = $props();
+	let { class: klass = '', preset = "input.icon", children = undefined, ...restProps }: IconProps = $props();
 </script>
 
 <Icon
-	preset="input.icon"
+	{preset}
 	class={[
 		'border-border flex aspect-square h-full items-center justify-center bg-transparent text-sm leading-0',
 		'$preset',
@@ -13,5 +13,5 @@
 	]}
 	{...restProps}
 >
-	{@render children?.()}
+	{@render children?.({})}
 </Icon>