feat: rename Input.Value to Input.Control component and update relate…

src/lib/components/combobox/atoms.ts

@@ -1,5 +1,9 @@
 export { default as Root } from './combobox-root.svelte';
 export { default as Trigger } from './combobox-trigger.svelte';
 export { default as Item } from './compobox-item.svelte';
-export { default as Input } from './combobox-input.svelte';
+/**
+ * @deprecated use Combobox.Control instead
+ */
+export { default as Input } from './combobox-control.svelte';
+export { default as Control } from './combobox-control.svelte';
 export { Arrow, Indicator, List } from '$svelte-atoms/core/components/dropdown/atoms';

src/lib/components/combobox/combobox-input.svelte → src/lib/components/combobox/combobox-control.svelte

@@ -37,9 +37,9 @@
 	);
 </script>
 
-<Input.Value
+<Input.Control
 	{value}
-	preset="combobox.input"
+	preset="combobox.control"
 	class={['flex-1 py-1', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}

src/lib/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,7 +65,7 @@
 					<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>

src/lib/components/input/atoms.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';

src/lib/components/input/input-value.svelte → src/lib/components/input/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 '$svelte-atoms/core/attachments/event.svelte';
 	import { getPreset } from '$svelte-atoms/core/context';
-	import { cn, toClassValue, type ClassValue } from '$svelte-atoms/core/utils';
+	import { cn, toClassValue } from '$svelte-atoms/core/utils';
 	import type { PresetModuleName } from '$svelte-atoms/core/context/preset.svelte';
+	import type { Base } from '$svelte-atoms/core/components/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}

src/lib/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
 	]}

src/lib/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
 		]}

src/lib/components/input/input-root.svelte

@@ -8,6 +8,7 @@
 		type HtmlAtomProps,
 		type Base
 	} from '$svelte-atoms/core/components/atom';
+	import type { InputRootProps } from './types';
 
 	type Element = ElementType<E>;
 
@@ -20,7 +21,7 @@
 		children = undefined,
 		factory = _factory,
 		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+	}: InputRootProps<E, B> = $props();
 
 	const bondProps = defineState<InputStateProps>([
 		defineProperty(

src/lib/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>

src/lib/components/input/types.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+import type { Base, ElementType, HtmlAtomProps } from '../atom';
+import type { ClassValue } from '$svelte-atoms/core/utils';
+import type { Snippet } from 'svelte';
+import type { Override } from '$svelte-atoms/core/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>;

src/lib/context/preset.svelte.ts

@@ -31,7 +31,7 @@ export type PresetModuleName =
 	| 'collapsible.header'
 	| 'collapsible.indicator'
 	| 'collapsible'
-	| 'combobox.input'
+	| 'combobox.control'
 	| 'combobox.trigger'
 	| 'combobox.item'
 	| 'dialog.close-button'
@@ -54,7 +54,7 @@ export type PresetModuleName =
 	| 'form'
 	| 'icon'
 	| 'input'
-	| 'input.value'
+	| 'input.control'
 	| 'input.placeholder'
 	| 'label'
 	| 'layer.inner'