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

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

@@ -1,41 +1,41 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { Trigger } from '../popover/atoms';
-	import type { Base } from '../atom';
-	import { DropdownBond } from './bond.svelte';
-	import type { DropdownTriggerProps } from './types';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('dropdown atom was not found');
-	}
-
-	let {
-		class: klass = '',
-		as = 'button' as T,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DropdownTriggerProps<T, B> = $props();
-</script>
-
-<Trigger
-	{as}
-	{bond}
-	preset="dropdown.trigger"
-	class={['border-border relative flex h-auto min-h-10 flex-wrap items-center', '$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?.({ dropdown: bond })}
-</Trigger>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Trigger } from '../popover/atoms';
+	import type { Base } from '../atom';
+	import { DropdownBond } from './bond.svelte';
+	import type { DropdownTriggerProps } from './types';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('dropdown atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button' as T,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DropdownTriggerProps<T, B> = $props();
+</script>
+
+<Trigger
+	{as}
+	{bond}
+	preset="dropdown.trigger"
+	class={['border-border relative flex h-auto min-h-10 flex-wrap items-center', '$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?.({ dropdown: bond })}
+</Trigger>

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

@@ -1,60 +1,60 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { Icon } from '../icon';
-	import { HtmlAtom, type Base } from '../atom';
-	import CloseIcon from '../../icons/icon-close.svelte';
-	import { DropdownBond } from './bond.svelte';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('DropdownValue must be used within a Dropdown');
-	}
-
-	let {
-		class: klass = '',
-		as = 'div' as T,
-		value,
-		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	function handleClick(ev: Event) {
-		ev.preventDefault();
-		ev.stopPropagation();
-
-		bond?.state.unselect([value]);
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="dropdown.value"
-	class={[
-		'dropdown-value border-border bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
-		'$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?.()}
-
-	<button
-		class="bg-foreground/5 flex aspect-square h-4 cursor-pointer items-center justify-center rounded-xs p-0"
-		onclick={handleClick}
-	>
-		<Icon class="h-3" src={CloseIcon} />
-	</button>
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Icon } from '../icon';
+	import { HtmlAtom, type Base } from '../atom';
+	import CloseIcon from '../../icons/icon-close.svelte';
+	import { DropdownBond } from './bond.svelte';
+
+	const bond = DropdownBond.get();
+
+	if (!bond) {
+		throw new Error('DropdownValue must be used within a Dropdown');
+	}
+
+	let {
+		class: klass = '',
+		as = 'div' as T,
+		value,
+		children,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	function handleClick(ev: Event) {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		bond?.state.unselect([value]);
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="dropdown.value"
+	class={[
+		'dropdown-value border-border bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
+		'$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?.()}
+
+	<button
+		class="bg-foreground/5 flex aspect-square h-4 cursor-pointer items-center justify-center rounded-xs p-0"
+		onclick={handleClick}
+	>
+		<Icon class="h-3" src={CloseIcon} />
+	</button>
+</HtmlAtom>

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

@@ -1,85 +1,85 @@
-<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,
-		children = undefined,
-		...restProps
-	}: HtmlElementProps<T> & Omit<HTMLAttributes<Element>, keyof HtmlElementProps<T>> = $props();
-
-	let node = $state<Element>();
-
-	let skipFirstAnimate = $state(!!enter);
-
-	$effect(() => {
-		if (!node) return;
-
-		const unmount = untrack(() => onmount?.(node!));
-
-		return () => {
-			if (typeof unmount === 'function') unmount(node!);
-			ondestroy?.(node!);
-		};
-	});
-
-	$effect(() => {
-		const fn = animate;
-
-		if (!node) return;
-		const shouldSkip = untrack(() => skipFirstAnimate);
-
-		if (shouldSkip) {
-			skipFirstAnimate = false;
-			return;
-		}
-
-		fn?.(node);
-	});
-
-	const elementProps = $derived({
-		[createAttachmentKey()]: (n: Element) => {
-			node = n;
-		},
-		class: cn(toClassValue(klass)),
-		...restProps
-	});
-
-	function _enter(node: Element) {
-		initial?.(node);
-		return () => {
-			const { duration = 0, delay = 0, easing = undefined } = enter?.(node) ?? {};
-			return { duration, delay, easing };
-		};
-	}
-
-	function _exit(node: Element) {
-		return () => {
-			const { duration = 0, delay = 0, easing = undefined } = exit?.(node) ?? {};
-			return { duration, delay, easing };
-		};
-	}
-</script>
-
-{#if global}
-	<svelte:element this={as} in:_enter|global out:_exit|global {...elementProps}>
-		{@render children?.()}
-	</svelte:element>
-{:else}
-	<svelte:element this={as} in:_enter out:_exit {...elementProps}>
-		{@render children?.()}
-	</svelte:element>
-{/if}
+<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,
+		children = undefined,
+		...restProps
+	}: HtmlElementProps<T> & Omit<HTMLAttributes<Element>, keyof HtmlElementProps<T>> = $props();
+
+	let node = $state<Element>();
+
+	let skipFirstAnimate = $state(!!enter);
+
+	$effect(() => {
+		if (!node) return;
+
+		const unmount = untrack(() => onmount?.(node!));
+
+		return () => {
+			if (typeof unmount === 'function') unmount(node!);
+			ondestroy?.(node!);
+		};
+	});
+
+	$effect(() => {
+		const fn = animate;
+
+		if (!node) return;
+		const shouldSkip = untrack(() => skipFirstAnimate);
+
+		if (shouldSkip) {
+			skipFirstAnimate = false;
+			return;
+		}
+
+		fn?.(node);
+	});
+
+	const elementProps = $derived({
+		[createAttachmentKey()]: (n: Element) => {
+			node = n;
+		},
+		class: cn(toClassValue(klass)),
+		...restProps
+	});
+
+	function _enter(node: Element) {
+		initial?.(node);
+		return () => {
+			const { duration = 0, delay = 0, easing = undefined } = enter?.(node) ?? {};
+			return { duration, delay, easing };
+		};
+	}
+
+	function _exit(node: Element) {
+		return () => {
+			const { duration = 0, delay = 0, easing = undefined } = exit?.(node) ?? {};
+			return { duration, delay, easing };
+		};
+	}
+</script>
+
+{#if global}
+	<svelte:element this={as} in:_enter|global out:_exit|global {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{:else}
+	<svelte:element this={as} in:_enter out:_exit {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{/if}

package/dist/components/form/bond.svelte.d.ts

@@ -24,5 +24,5 @@ export declare class FormBondState<Props extends FormProps = FormProps> extends
     unmountField(id: string): void;
     validate(): void;
     clear(): void;
-    get fields(): FieldBond[];
+    get fields(): any;
 }

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

@@ -1,48 +1,48 @@
-<script lang="ts" generics="B extends Base<{value: unknown}>">
-	import { HtmlAtom, type Base } from '../../atom';
-	import { FieldBond } from './bond.svelte';
-	import type { FieldControlProps } from '../types';
-
-	const bond = FieldBond.get();
-	const name = $derived(bond?.state?.props?.name);
-
-	let {
-		class: klass = '',
-		value = $bindable(),
-		checked = $bindable(),
-		number = $bindable(),
-		date = $bindable(),
-		files = $bindable(),
-		children = undefined,
-		oninput = undefined,
-		...restProps
-	}: FieldControlProps<B> = $props();
-	const controlProps = $derived({ ...bond.control(), ...restProps });
-
-	function handleInput(ev: CustomEvent, detail: any) {
-		oninput?.(ev);
-
-		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;
-		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}
-	{...controlProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="B extends Base<{value: unknown}>">
+	import { HtmlAtom, type Base } from '../../atom';
+	import { FieldBond } from './bond.svelte';
+	import type { FieldControlProps } from '../types';
+
+	const bond = FieldBond.get();
+	const name = $derived(bond?.state?.props?.name);
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		checked = $bindable(),
+		number = $bindable(),
+		date = $bindable(),
+		files = $bindable(),
+		children = undefined,
+		oninput = undefined,
+		...restProps
+	}: FieldControlProps<B> = $props();
+	const controlProps = $derived({ ...bond.control(), ...restProps });
+
+	function handleInput(ev: CustomEvent, detail: any) {
+		oninput?.(ev);
+
+		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;
+		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}
+	{...controlProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

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

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

@@ -1,59 +1,59 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { onDestroy } from 'svelte';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type Base } from '../../atom';
-	import { FieldBond, FieldBondState, type FieldStateProps } from './bond.svelte';
-	import type { FieldRootProps } from '../types';
-	import { FormBond } from '../bond.svelte';
-
-	const formBond = FormBond.get();
-
-	let {
-		value = $bindable(),
-		class: klass = '',
-		name = undefined,
-		schema = undefined,
-		validator = undefined,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: FieldRootProps<E, B> = $props();
-
-	const bondProps = defineState<FieldStateProps>([
-		defineProperty(
-			'name',
-			() => name,
-			(v) => (name = v)
-		),
-		defineProperty(
-			'value',
-			() => value,
-			(v) => (value = v)
-		),
-		defineProperty('type', () => typeof value),
-		defineProperty('schema', () => schema),
-		defineProperty('validator', () => validator ?? formBond.state.props.validator)
-	]);
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
-
-	const unmount = formBond.state.mountField(bond.id, bond);
-	onDestroy(() => unmount());
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new FieldBondState(() => props);
-		return new FieldBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom preset="field" class={['flex flex-col', '$preset', klass]} {...rootProps}>
-	{@render children?.({ field: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { onDestroy } from 'svelte';
+	import { defineProperty, defineState } from '../../../utils';
+	import { HtmlAtom, type Base } from '../../atom';
+	import { FieldBond, FieldBondState, type FieldStateProps } from './bond.svelte';
+	import type { FieldRootProps } from '../types';
+	import { FormBond } from '../bond.svelte';
+
+	const formBond = FormBond.get();
+
+	let {
+		value = $bindable(),
+		class: klass = '',
+		name = undefined,
+		schema = undefined,
+		validator = undefined,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: FieldRootProps<E, B> = $props();
+
+	const bondProps = defineState<FieldStateProps>([
+		defineProperty(
+			'name',
+			() => name,
+			(v) => (name = v)
+		),
+		defineProperty(
+			'value',
+			() => value,
+			(v) => (value = v)
+		),
+		defineProperty('type', () => typeof value),
+		defineProperty('schema', () => schema),
+		defineProperty('validator', () => validator ?? formBond.state.props.validator)
+	]);
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond?.root(),
+		...restProps
+	});
+
+	const unmount = formBond.state.mountField(bond.id, bond);
+	onDestroy(() => unmount());
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new FieldBondState(() => props);
+		return new FieldBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom preset="field" class={['flex flex-col', '$preset', klass]} {...rootProps}>
+	{@render children?.({ field: bond })}
+</HtmlAtom>