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

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/icon/icon.svelte.d.ts

@@ -28,6 +28,7 @@ declare function $$render<Src extends Component = Component, E extends HtmlEleme
         bond?: import("../..").Bond;
         base?: B | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & HTMLAttributes<HTMLDivElement>;
     exports: {};
     bindings: "";

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';

package/dist/components/input/{input-value.svelte → input-control.svelte}

@@ -1,27 +1,15 @@
 <script module lang="ts">
 	export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
-
-	export type InputProps = {
-		value?: ClassValue;
-		files?: File[];
-		date?: Date | null;
-		number?: number;
-		checked?: boolean;
-		class?: string;
-		type?: HTMLInputTypeAttribute | null;
-		preset?: PresetModuleName | (string & {});
-		children?: Snippet<[]>;
-	};
 </script>
 
-<script>
-	import type { Snippet } from 'svelte';
-	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+<script lang="ts" generics="B extends Base = Base">
 	import { on } from '../../attachments/event.svelte';
 	import { getPreset } from '../../context';
-	import { cn, toClassValue, type ClassValue } from '../../utils';
+	import { cn, toClassValue } from '../../utils';
 	import type { PresetModuleName } from '../../context/preset.svelte';
+	import type { Base } from '../atom';
 	import { InputBond } from './bond.svelte';
+	import type { InputControlProps } from './types';
 
 	const bond = InputBond.get();
 
@@ -33,11 +21,11 @@
 		checked = $bindable(),
 		class: klass = '',
 		type = 'text',
-		preset: presetKey = 'input.value',
+		preset: presetKey = 'input.control',
 		onchange = undefined,
 		oninput = undefined,
 		...restProps
-	}: InputProps = $props();
+	}: InputControlProps<B> = $props();
 
 	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
 
@@ -81,10 +69,15 @@
 			event: ev
 		});
 	}
+
+	function toFileList(files: File[]) {
+		const dataTransfer = new DataTransfer();
+		files.forEach((file) => dataTransfer.items.add(file));
+		return dataTransfer.files;
+	}
 </script>
 
 <input
-	{type}
 	bind:value={
 		() => value,
 		(v) => {
@@ -95,10 +88,11 @@
 		}
 	}
 	class={cn(
-		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
+		'text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
 		preset?.class,
 		toClassValue(klass, bond)
 	)}
+	type={type ?? 'text'}
 	onchange={handleChange}
 	oninput={handleInput}
 	{...valueProps}

package/dist/components/input/input-control.svelte.d.ts

@@ -0,0 +1,27 @@
+export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
+import type { Base } from '../atom';
+import type { InputControlProps } from './types';
+declare function $$render<B extends Base = Base>(): {
+    props: InputControlProps<B>;
+    exports: {};
+    bindings: "number" | "value" | "date" | "files" | "checked";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<B extends Base = Base> {
+    props(): ReturnType<typeof $$render<B>>['props'];
+    events(): ReturnType<typeof $$render<B>>['events'];
+    slots(): ReturnType<typeof $$render<B>>['slots'];
+    bindings(): "number" | "value" | "date" | "files" | "checked";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <B extends Base = Base>(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 = Base>(internal: unknown, props: ReturnType<__sveltets_Render<B>['props']> & {}): ReturnType<__sveltets_Render<B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const InputControl: $$IsomorphicComponent;
+type InputControl<B extends Base = Base> = InstanceType<typeof InputControl<B>>;
+export default InputControl;

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

@@ -7,7 +7,7 @@
 <Icon
 	preset="input.icon"
 	class={[
-		'flex aspect-square h-full items-center justify-center bg-transparent text-sm leading-0',
+		'border-border flex aspect-square h-full items-center justify-center bg-transparent text-sm leading-0',
 		'$preset',
 		klass
 	]}

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

@@ -34,8 +34,6 @@
 			return !bond?.state.props.files?.length;
 		}
 
-		console.log(!bond?.state.props.value);
-
 		return !bond?.state.props.value;
 	});
 </script>
@@ -44,7 +42,7 @@
 	<HtmlAtom
 		preset="input.placeholder"
 		class={[
-			'pointer-events-none absolute inset-0 flex h-full w-full items-center px-1 leading-1 outline-none',
+			'text-muted-foreground pointer-events-none absolute inset-0 flex h-full w-full items-center px-1 leading-1 outline-none',
 			'$preset',
 			klass
 		]}

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

@@ -17,6 +17,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         bond?: import("../..").Bond;
         base?: B | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & HTMLAttributes<ElementType<E>>;
     exports: {};
     bindings: "";

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

@@ -1,15 +1,8 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { InputBond, InputState, type InputStateProps } from './bond.svelte';
-	import { defineProperty, defineState, toClassValue } from '../../utils';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
-
-	type Element = ElementType<E>;
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { InputRootProps } from './types';
 
 	let {
 		class: klass = '',
@@ -20,7 +13,7 @@
 		children = undefined,
 		factory = _factory,
 		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+	}: InputRootProps<E, B> = $props();
 
 	const bondProps = defineState<InputStateProps>([
 		defineProperty(
@@ -68,7 +61,7 @@
 <HtmlAtom
 	{preset}
 	class={[
-		'border-border text-foreground bg-input relative flex h-10 items-center overflow-hidden rounded-md border',
+		'border-border text-foreground bg-input relative flex h-10 w-auto items-center overflow-hidden rounded-md border',
 		'$preset',
 		klass
 	]}

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

@@ -1,24 +1,8 @@
-import type { HTMLAttributes } from 'svelte/elements';
 import { InputBond } from './bond.svelte';
-import { type ElementType, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { InputRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../../utils").ClassValue | import("../../utils").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-    } & HTMLAttributes<ElementType<E>>;
+    props: InputRootProps<E, B>;
     exports: {
         getBond: () => InputBond;
     };

package/dist/components/input/input.stories.svelte

@@ -26,9 +26,9 @@
 			<Label for="price-input">Price</Label>
 			<AInput.Root>
 				<AInput.Icon class="text-foreground box-content px-0">$</AInput.Icon>
-				<AInput.Value id="price-input" class="border-border box-content border-x px-2 py-2">
+				<AInput.Control id="price-input" class="border-border box-content border-x px-2 py-2">
 					<!--  -->
-				</AInput.Value>
+				</AInput.Control>
 				<AInput.Icon class="text-foreground box-content px-2">.00</AInput.Icon>
 
 				<AInput.Placeholder class="text-foreground/20 pl-2">Hello World</AInput.Placeholder>

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+import type { Base, ElementType, HtmlAtomProps } from '../atom';
+import type { Snippet } from 'svelte';
+import type { Override } from '../../types';
+export type InputRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & HTMLAttributes<ElementType<E>> & {
+    value?: string | number | string[] | null;
+    checked?: boolean;
+    files?: File[] | null;
+    children?: Snippet<[]>;
+};
+type InputControlBaseProps = {
+    value?: any;
+    files?: File[];
+    date?: Date | null;
+    number?: number;
+    checked?: boolean;
+    class?: string;
+    type?: HTMLInputTypeAttribute | null;
+    children?: Snippet<[]>;
+};
+export type InputControlProps<B extends Base = Base> = HtmlAtomProps<'input', B> & Override<HTMLAttributes<HTMLInputElement>, InputControlBaseProps>;
+export {};

package/dist/components/input/types.js

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

package/dist/components/label/label.svelte.d.ts

@@ -22,6 +22,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'label', B ext
         bond?: import("../..").Bond;
         base?: B | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & {
         for?: string | null;
         children?: Snippet<[]>;

package/dist/components/layer/layer-inner.svelte.d.ts

@@ -17,6 +17,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         bond?: import("../..").Bond;
         base?: B | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & HTMLAttributes<ElementType<E>>;
     exports: {};
     bindings: "";

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

@@ -17,6 +17,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         bond?: import("../..").Bond;
         base?: B | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../../utils").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & HTMLAttributes<ElementType<E>>;
     exports: {
         getBond: () => any;

package/dist/components/list/list-group.svelte

@@ -8,7 +8,7 @@
 <HtmlAtom
 	preset="list.group"
 	class={[
-		'rounded-b-inherit rounded-t-inherit flex flex-col',
+		'rounded-b-inherit rounded-t-inherit border-border flex flex-col',
 		'$preset',
 		toClassValue.apply(null, [klass, {}])
 	]}

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

@@ -13,7 +13,7 @@
 <HtmlAtom
 	{as}
 	preset={presetKey}
-	class={['flex w-full gap-2 px-4 py-1', '$preset', klass]}
+	class={['border-border flex w-full gap-2 px-4 py-1', '$preset', klass]}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -4,6 +4,11 @@
 	let { class: klass = '', as = 'ul' as T, children = undefined, ...restProps } = $props();
 </script>
 
-<HtmlAtom {as} preset="list.root" class={['flex flex-col', '$preset', klass]} {...restProps}>
+<HtmlAtom
+	{as}
+	preset="list.root"
+	class={['border-border flex flex-col', '$preset', klass]}
+	{...restProps}
+>
 	{@render children?.()}
 </HtmlAtom>

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

@@ -7,7 +7,7 @@
 <HtmlAtom
 	{as}
 	preset="list.title"
-	class={['mb-1 flex w-full px-6 py-1 font-medium', '$preset', klass]}
+	class={['border-border mb-1 flex w-full px-6 py-1 font-medium', '$preset', klass]}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/menu/menu-list.svelte

@@ -26,7 +26,7 @@
 	{base}
 	{bond}
 	preset="menu.list"
-	class={['bg-background overflow-hidden p-0', '$preset', klass]}
+	class={['bg-background border-border overflow-hidden p-0', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}

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

@@ -1,5 +1,6 @@
 import { type ComputePositionReturn, type Placement } from '@floating-ui/dom';
 import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte.js';
+import type { PortalBond } from '../portal';
 export type PopoverParams = {
     apply?: (node: HTMLElement, params: {
         x: number;
@@ -17,6 +18,7 @@ export type PopoverStateProps<T extends Record<string, unknown> = Record<string,
     placements: Placement[];
     placement: Placement | undefined;
     offset: number;
+    portal?: string | PortalBond;
     extend: T;
 };
 export type TriggerParams = {

package/dist/components/popover/bond.svelte.js

@@ -168,7 +168,7 @@ function popover(bond) {
         if (!bond.elements.trigger) {
             return;
         }
-        node.style.minWidth = bond.elements.trigger.clientWidth + 'px';
+        bond.elements.content.style.minWidth = bond.elements.trigger.clientWidth + 'px';
         const middleware = [];
         if (bond.elements.arrow) {
             middleware.push(arrow({ element: bond.elements.arrow }));