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

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

@@ -1,113 +1,107 @@
-<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';
-	import { on } from '../../attachments/event.svelte';
-	import { getPreset } from '../../context';
-	import { cn, toClassValue, type ClassValue } from '../../utils';
-	import type { PresetModuleName } from '../../context/preset.svelte';
-	import { InputBond } from './bond.svelte';
-
-	const bond = InputBond.get();
-
-	let {
-		value = $bindable(),
-		files = $bindable(),
-		date = $bindable(),
-		number = $bindable(),
-		checked = $bindable(),
-		class: klass = '',
-		type = 'text',
-		preset: presetKey = 'input.value',
-		onchange = undefined,
-		oninput = undefined,
-		...restProps
-	}: InputProps = $props();
-
-	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
-
-	const valueProps = $derived({
-		...(bond?.input?.() ?? {}),
-		...restProps
-	});
-
-	function handleChange(ev: CustomEvent) {
-		if (!onchange) return;
-
-		onchange?.(ev, {
-			value: value,
-			files: files,
-			date: date,
-			number: number,
-			checked: checked,
-			event: ev
-		});
-	}
-
-	function handleInput(ev: InputEvent) {
-		if (!oninput) return;
-
-		const currentTarget = ev.currentTarget as HTMLInputElement;
-
-		if (type === 'number') {
-			number = currentTarget.valueAsNumber;
-		}
-
-		if (type === 'date' || type == 'time' || type === 'datetime-local' || type === 'date-local') {
-			date = currentTarget.valueAsDate;
-		}
-
-		oninput?.(ev, {
-			value: value,
-			files: files,
-			date: date,
-			number: number,
-			checked: checked,
-			event: ev
-		});
-	}
-</script>
-
-<input
-	{type}
-	bind:value={
-		() => value,
-		(v) => {
-			value = v;
-			if (bond) {
-				bond.state.props.value = v;
-			}
-		}
-	}
-	class={cn(
-		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
-		preset?.class,
-		toClassValue(klass, bond)
-	)}
-	onchange={handleChange}
-	oninput={handleInput}
-	{...valueProps}
-	{@attach (node) => {
-		if (type === 'file') {
-			return on('input', () => {
-				files = Array.from(node.files || []);
-				bond!.state.props.files = files;
-			})(node);
-		}
-	}}
-/>
+<script module lang="ts">
+	export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
+</script>
+
+<script lang="ts" generics="B extends Base = Base">
+	import { on } from '../../attachments/event.svelte';
+	import { getPreset } from '../../context';
+	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();
+
+	let {
+		value = $bindable(),
+		files = $bindable(),
+		date = $bindable(),
+		number = $bindable(),
+		checked = $bindable(),
+		class: klass = '',
+		type = 'text',
+		preset: presetKey = 'input.control',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputControlProps<B> = $props();
+
+	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
+
+	const valueProps = $derived({
+		...(bond?.input?.() ?? {}),
+		...restProps
+	});
+
+	function handleChange(ev: CustomEvent) {
+		if (!onchange) return;
+
+		onchange?.(ev, {
+			value: value,
+			files: files,
+			date: date,
+			number: number,
+			checked: checked,
+			event: ev
+		});
+	}
+
+	function handleInput(ev: InputEvent) {
+		if (!oninput) return;
+
+		const currentTarget = ev.currentTarget as HTMLInputElement;
+
+		if (type === 'number') {
+			number = currentTarget.valueAsNumber;
+		}
+
+		if (type === 'date' || type == 'time' || type === 'datetime-local' || type === 'date-local') {
+			date = currentTarget.valueAsDate;
+		}
+
+		oninput?.(ev, {
+			value: value,
+			files: files,
+			date: date,
+			number: number,
+			checked: checked,
+			event: ev
+		});
+	}
+
+	function toFileList(files: File[]) {
+		const dataTransfer = new DataTransfer();
+		files.forEach((file) => dataTransfer.items.add(file));
+		return dataTransfer.files;
+	}
+</script>
+
+<input
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+			if (bond) {
+				bond.state.props.value = v;
+			}
+		}
+	}
+	class={cn(
+		'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}
+	{@attach (node) => {
+		if (type === 'file') {
+			return on('input', () => {
+				files = Array.from(node.files || []);
+				bond!.state.props.files = files;
+			})(node);
+		}
+	}}
+/>

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

@@ -1,56 +1,54 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { InputBond } from './bond.svelte';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
-
-	type Element = ElementType<E>;
-
-	const bond = InputBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const placeholderProps = $derived({
-		...bond?.placeholder(),
-		...restProps
-	});
-
-	const shouldShowPlaceholder = $derived.by(() => {
-		const type = bond?.elements?.input?.type ?? '';
-
-		if (['radio', 'checkbox'].includes(type)) {
-			return false;
-		}
-
-		if (['files'].includes(type)) {
-			return !bond?.state.props.files?.length;
-		}
-
-		console.log(!bond?.state.props.value);
-
-		return !bond?.state.props.value;
-	});
-</script>
-
-{#if shouldShowPlaceholder}
-	<HtmlAtom
-		preset="input.placeholder"
-		class={[
-			'pointer-events-none absolute inset-0 flex h-full w-full items-center px-1 leading-1 outline-none',
-			'$preset',
-			klass
-		]}
-		style="left:{bond?.elements?.input?.offsetLeft ?? 0}px"
-		{...placeholderProps}
-	>
-		{@render children?.()}
-	</HtmlAtom>
-{/if}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { InputBond } from './bond.svelte';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+
+	type Element = ElementType<E>;
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const placeholderProps = $derived({
+		...bond?.placeholder(),
+		...restProps
+	});
+
+	const shouldShowPlaceholder = $derived.by(() => {
+		const type = bond?.elements?.input?.type ?? '';
+
+		if (['radio', 'checkbox'].includes(type)) {
+			return false;
+		}
+
+		if (['files'].includes(type)) {
+			return !bond?.state.props.files?.length;
+		}
+
+		return !bond?.state.props.value;
+	});
+</script>
+
+{#if shouldShowPlaceholder}
+	<HtmlAtom
+		preset="input.placeholder"
+		class={[
+			'text-muted-foreground pointer-events-none absolute inset-0 flex h-full w-full items-center px-1 leading-1 outline-none',
+			'$preset',
+			klass
+		]}
+		style="left:{bond?.elements?.input?.offsetLeft ?? 0}px"
+		{...placeholderProps}
+	>
+		{@render children?.()}
+	</HtmlAtom>
+{/if}

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,25 +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 & {});
-        variants?: import("../../utils").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & 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/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 }));