partially refactor components to ui package

components/StyledRawInput.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { validate, type InputValidatorEvent, type ValidatorOptions } from '@repo/validate';
+
+	type $Props = Omit<HTMLInputAttributes, 'name' | 'value'> & {
+		name: string;
+		value?: string;
+		validate?: ValidatorOptions;
+		ref?: HTMLInputElement | null;
+		onvalidate?: (e: InputValidatorEvent) => void;
+	};
+
+	let {
+		name,
+		value = $bindable(''),
+		placeholder,
+		validate: validateOpts,
+		ref = $bindable<HTMLInputElement | null>(null),
+		onvalidate,
+		...others
+	}: $Props = $props();
+
+	let valid: boolean = $state(true);
+
+	$effect(() => {
+		// default autovalOnInvalid to true unless explicitly set to false
+		if (validateOpts !== undefined && validateOpts.autovalOnInvalid === undefined) {
+			validateOpts.autovalOnInvalid = true;
+		}
+	});
+</script>
+
+<input
+	id={name}
+	{name}
+	{placeholder}
+	aria-label={placeholder}
+	{...others}
+	bind:value
+	class={[
+		'border-accent w-full rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
+		'text-text placeholder:text-text/60 dark:border-accent/50 dark:bg-text-800 placeholder:font-normal',
+		'dark:text-background dark:placeholder:text-background/60 dark:sm:bg-slate-800',
+		'placeholder-shown:text-ellipsis',
+		!valid && 'border-red-500!',
+		others.class
+	]}
+	use:validate={validateOpts}
+	onvalidate={(e) => {
+		valid = e.detail.valid;
+		if (onvalidate) onvalidate(e);
+	}}
+	bind:this={ref}
+/>