@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.26

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

@@ -1,113 +1,118 @@
-<script module lang="ts">
-	import type { Factory } from '../../types';
-
-	export type SlideoverRootProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ slideover: DrawerBond }]>;
-			initial?: (node: HTMLElement, bond: DrawerBond) => void;
-			enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
-			exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
-		}
-	> & {
-		open?: boolean;
-		disabled?: boolean;
-		onclose?: (event: Event, bond: DrawerBond) => void;
-		factory?: Factory<DrawerBond>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='dialog', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Override } from '../../types';
-	import { defineProperty, defineState } from '../../utils';
-	import { type TransitionFunction } from '../element';
-	import Teleport from '../portal/teleport.svelte';
-	import type { HtmlAtomProps, Base } from '../atom';
-	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	let {
-		open = $bindable(false),
-		children = undefined,
-		class: klass = '',
-		as = 'dialog',
-		disabled = false,
-		onclose = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		factory = _factory,
-		...restProps
-	}: SlideoverRootProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const bondProps = defineState<DrawerBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty('disabled', () => disabled)
-		],
-		() => ({})
-	);
-	const bond = _factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
-
-	$effect(() => {
-		if (bond.elements.root instanceof HTMLDialogElement) {
-			if (open) {
-				bond.elements.root?.show?.();
-			}
-		}
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new DrawerBondState(() => props);
-		const bond = new DrawerBond(bondState);
-
-		return bond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<Teleport
-	{as}
-	{bond}
-	portal="root.l1"
-	preset="drawer"
-	class={[
-		'pointer-events-auto h-full w-full overflow-hidden bg-transparent',
-		!open && 'pointer-events-none',
-		'$preset',
-		klass
-	]}
-	closeby="none"
-	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)}
-	{...rootProps}
->
-	{@render children?.({ drawer: bond })}
-</Teleport>
+<script module lang="ts">
+	import type { Factory } from '../../types';
+
+	export type SlideoverRootProps<
+		E extends keyof HTMLElementTagNameMap,
+		B extends Base = Base
+	> = Override<
+		HtmlAtomProps<E, B>,
+		{
+			children?: Snippet<[{ drawer: DrawerBond }]>;
+			initial?: (node: HTMLElement, bond: DrawerBond) => void;
+			enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
+			exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
+		}
+	> & {
+		open?: boolean;
+		disabled?: boolean;
+		portal?: string | PortalBond;
+		onclose?: (event: Event, bond: DrawerBond) => void;
+		factory?: Factory<DrawerBond>;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='dialog', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Override } from '../../types';
+	import { defineProperty, defineState } from '../../utils';
+	import { type TransitionFunction } from '../element';
+	import Teleport from '../portal/teleport.svelte';
+	import type { HtmlAtomProps, Base } from '../atom';
+	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
+	import { ActivePortal, type PortalBond } from '../portal';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	let {
+		open = $bindable(false),
+		children = undefined,
+		class: klass = '',
+		as = 'dialog',
+		disabled = false,
+		portal = undefined,
+		onclose = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		factory = _factory,
+		...restProps
+	}: SlideoverRootProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const bondProps = defineState<DrawerBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty('disabled', () => disabled)
+		],
+		() => ({})
+	);
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond?.root(),
+		...restProps
+	});
+
+	$effect(() => {
+		if (bond.elements.root instanceof HTMLDialogElement) {
+			if (open) {
+				bond.elements.root?.show?.();
+			}
+		}
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new DrawerBondState(() => props);
+		const bond = new DrawerBond(bondState);
+
+		return bond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<Teleport
+	{as}
+	{bond}
+	portal={portal ?? 'root.l1'}
+	preset="drawer"
+	class={[
+		'border-border pointer-events-auto h-full w-full overflow-hidden bg-transparent',
+		!open && 'pointer-events-none',
+		'$preset',
+		klass
+	]}
+	closeby="none"
+	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)}
+	{...rootProps}
+>
+	<ActivePortal portal={portal ?? 'root.l1'}>
+		{@render children?.({ drawer: bond })}
+	</ActivePortal>
+</Teleport>

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

@@ -1,7 +1,7 @@
 import type { Factory } from '../../types';
 export type SlideoverRootProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
     children?: Snippet<[{
-        slideover: DrawerBond;
+        drawer: DrawerBond;
     }]>;
     initial?: (node: HTMLElement, bond: DrawerBond) => void;
     enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
@@ -9,6 +9,7 @@ export type SlideoverRootProps<E extends keyof HTMLElementTagNameMap, B extends
 }> & {
     open?: boolean;
     disabled?: boolean;
+    portal?: string | PortalBond;
     onclose?: (event: Event, bond: DrawerBond) => void;
     factory?: Factory<DrawerBond>;
 };
@@ -18,10 +19,11 @@ import type { Override } from '../../types';
 import { type TransitionFunction } from '../element';
 import type { HtmlAtomProps, Base } from '../atom';
 import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
+import { type PortalBond } from '../portal';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'dialog', B extends Base = Base>(): {
     props: Omit<HtmlAtomProps<E, B>, "initial" | "enter" | "exit" | "children"> & {
         children?: Snippet<[{
-            slideover: DrawerBond;
+            drawer: DrawerBond;
         }]>;
         initial?: (node: HTMLElement, bond: DrawerBond) => void;
         enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<"dialog">;
@@ -29,6 +31,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'dialog', B ex
     } & {
         open?: boolean;
         disabled?: boolean;
+        portal?: string | PortalBond;
         onclose?: (event: Event, bond: DrawerBond) => void;
         factory?: Factory<DrawerBond>;
     } & HTMLAttributes<HTMLElementTagNameMap[E]>;

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

@@ -44,7 +44,7 @@
 	{as}
 	{bond}
 	preset="drawer.title"
-	class={['$preset', klass]}
+	class={['border-border', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}

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

@@ -29,7 +29,7 @@
 		{bond}
 		preset="dropdown.placeholder"
 		class={[
-			'absolute inset-0 flex h-full w-full items-center px-2 leading-1 opacity-50 outline-none',
+			'border-border absolute inset-0 flex h-full w-full items-center px-2 leading-1 opacity-50 outline-none',
 			'$preset',
 			klass
 		]}

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

@@ -38,7 +38,7 @@
 	);
 </script>
 
-<Input.Value
+<Input.Control
 	bind:value={bond.state.query}
 	{bond}
 	preset="dropdown.query"

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

@@ -39,7 +39,7 @@
 	{as}
 	{bond}
 	preset="dropdown.trigger"
-	class={['relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
+	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)}

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

@@ -28,8 +28,6 @@
 		ev.preventDefault();
 		ev.stopPropagation();
 
-		console.log('unselect', value);
-
 		bond?.state.unselect([value]);
 	}
 </script>
@@ -39,7 +37,7 @@
 	{bond}
 	preset="dropdown.value"
 	class={[
-		'dropdown-value bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
+		'dropdown-value border-border bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
 		'$preset',
 		klass
 	]}

package/dist/components/dropdown/item/bond.svelte.d.ts

@@ -19,6 +19,10 @@ export declare class DropdownItemBond<T = unknown> extends Bond<DropdownItemBond
     mount(): () => void;
     unmount(): void;
     share(): this;
+    root(): {
+        [x: symbol]: (node: HTMLElement) => void;
+        'data-selected': boolean;
+    };
     static get(): DropdownItemBond | undefined;
     static set(bond: DropdownItemBond): DropdownItemBond;
 }

package/dist/components/dropdown/item/bond.svelte.js

@@ -1,6 +1,7 @@
 import { getContext, setContext } from 'svelte';
 import { Bond, BondState } from '../../../shared/bond.svelte';
 import { DropdownBond, DropdownBondState } from '../bond.svelte';
+import { createAttachmentKey } from 'svelte/attachments';
 export class DropdownItemBond extends Bond {
     static CONTEXT_KEY = '@atoms/context/dropdown/item';
     #dropdown;
@@ -31,6 +32,14 @@ export class DropdownItemBond extends Bond {
     share() {
         return DropdownItemBond.set(this);
     }
+    root() {
+        return {
+            'data-selected': this.state.isSelected,
+            [createAttachmentKey()]: (node) => {
+                this.elements.root = node;
+            }
+        };
+    }
     static get() {
         return getContext(DropdownItemBond.CONTEXT_KEY);
     }

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

@@ -41,6 +41,11 @@
 	const unmount = bond.mount();
 	$effect(() => unmount);
 
+	const rootProps = $derived({
+		...bond?.root?.(),
+		...restProps
+	});
+
 	function _factory() {
 		const item = dropdown?.state.item(value);
 
@@ -56,7 +61,7 @@
 		return new DropdownItemBond(bondState);
 	}
 
-	function _onclick(ev: MouseEvent) {
+	function handleClick(ev: MouseEvent) {
 		onclick?.(ev);
 
 		if (ev.defaultPrevented) {
@@ -76,12 +81,11 @@
 </script>
 
 <Item
-	{@attach (node) => (bond.elements.root = node)}
 	{bond}
 	{preset}
 	class={[
-		bond.state.isHighlighted && 'bg-foreground/10',
-		bond.state.isSelected && 'bg-accent/10',
+		bond.state.isHighlighted && 'bg-foreground/5',
+		bond.state.isSelected && 'bg-primary/5 hover:bg-primary/10 active:bg-primary/15',
 		'$preset',
 		klass
 	]}
@@ -91,8 +95,8 @@
 	animate={animate?.bind(bond.state)}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
-	onclick={_onclick}
-	{...restProps}
+	onclick={handleClick}
+	{...rootProps}
 >
 	{@render children?.({ dropdownItem: bond })}
 </Item>

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

@@ -25,6 +25,10 @@ export type FieldStateProps<Extension extends Record<string, unknown> = Record<s
     readonly: boolean;
     name?: string;
     value?: Value;
+    files?: File[];
+    date?: Date | null;
+    number?: number;
+    checked?: boolean;
     schema?: Schema;
     validator?: ValidationAdapter<Schema, Value>;
     onvalidation?: (errors: ValidationError[]) => void;
@@ -68,6 +72,10 @@ export declare class FieldBondState<Props extends FieldStateProps = FieldStatePr
     #private;
     constructor(props: () => Props);
     get value(): unknown;
+    get files(): File[] | undefined;
+    get date(): Date | null | undefined;
+    get number(): number | undefined;
+    get checked(): boolean | undefined;
     get errors(): ValidationError[];
     get isValidating(): boolean;
     validate(): ValidationResult;

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

@@ -101,7 +101,7 @@ export class FieldBondState extends BondState {
     #form;
     constructor(props) {
         super(props);
-        this.#form = FormBond.get().state;
+        this.#form = FormBond.get()?.state;
         if (!this.#form) {
             throw new Error('Form Context is undefined, FieldAtom must be used within a FormAtom context');
         }
@@ -109,6 +109,18 @@ export class FieldBondState extends BondState {
     get value() {
         return this.props.value;
     }
+    get files() {
+        return this.props.files;
+    }
+    get date() {
+        return this.props.date;
+    }
+    get number() {
+        return this.props.number;
+    }
+    get checked() {
+        return this.props.checked;
+    }
     get errors() {
         return [...this.#errors];
     }

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

@@ -26,6 +26,9 @@
 		class: klass = '',
 		value = $bindable(),
 		checked = $bindable(),
+		number = $bindable(),
+		date = $bindable(),
+		files = $bindable(),
 		children = undefined,
 		oninput = undefined,
 		...restProps
@@ -41,6 +44,10 @@
 		}
 
 		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>
 

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

@@ -19,7 +19,7 @@ declare function $$render<B extends Base<{
 }>>(): {
     props: FieldInputProps<B>;
     exports: {};
-    bindings: "value" | "checked";
+    bindings: "number" | "value" | "date" | "files" | "checked";
     slots: {};
     events: {};
 };
@@ -29,7 +29,7 @@ declare class __sveltets_Render<B extends Base<{
     props(): ReturnType<typeof $$render<B>>['props'];
     events(): ReturnType<typeof $$render<B>>['events'];
     slots(): ReturnType<typeof $$render<B>>['slots'];
-    bindings(): "value" | "checked";
+    bindings(): "number" | "value" | "date" | "files" | "checked";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/form/form.stories.svelte

@@ -44,7 +44,7 @@
 							<Field.Label>First Name</Field.Label>
 							<Input.Root>
 								<Field.Control
-									base={Input.Value}
+									base={Input.Control}
 									placeholder="Enter your first name"
 									onblur={() => {
 										const results = field?.state.validate();
@@ -65,14 +65,14 @@
 					<Field.Root name="last name" schema={personSchema.shape.lastName}>
 						<Field.Label>Last Name</Field.Label>
 						<Input.Root>
-							<Field.Control base={Input.Value} placeholder="Enter your last name" />
+							<Field.Control base={Input.Control} placeholder="Enter your last name" />
 						</Input.Root>
 					</Field.Root>
 				</div>
 
 				<div class="flex flex-col">
 					<Field.Root name="is admin" schema={personSchema.shape.isAdmin}>
-						<Field.Label>Is Admin</Field.Label>
+						<Field.Label>Is Admin?</Field.Label>
 						<Field.Control base={Checkbox} />
 					</Field.Root>
 				</div>

package/dist/components/input/atoms.d.ts

@@ -1,4 +1,8 @@
 export { default as Root } from './input-root.svelte';
-export { default as Value } from './input-value.svelte';
+/**
+ * @deprecated use Input.Control instead
+ */
+export { default as Value } from './input-control.svelte';
+export { default as Control } from './input-control.svelte';
 export { default as Icon } from './input-icon.svelte';
 export { default as Placeholder } from './input-placeholder.svelte';

package/dist/components/input/atoms.js

@@ -1,4 +1,8 @@
 export { default as Root } from './input-root.svelte';
-export { default as Value } from './input-value.svelte';
+/**
+ * @deprecated use Input.Control instead
+ */
+export { default as Value } from './input-control.svelte';
+export { default as Control } from './input-control.svelte';
 export { default as Icon } from './input-icon.svelte';
 export { default as Placeholder } from './input-placeholder.svelte';