styled raw & text input: include all props & add disabled

src/lib/TextInput.svelte

@@ -1,38 +1,27 @@
 <script lang="ts">
 	import Label from './Label.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
-	import { type ValidatorOptions } from '@svelte-toolkit/validate';
 	import { generateIdentifier } from './util';
 	import type { ClassValue } from 'svelte/elements';
+	import type { ComponentProps } from 'svelte';
 
-	interface Props {
+	interface Props extends ComponentProps<typeof StyledRawInput> {
 		id?: string;
-		name?: string;
 		label?: string;
 		value?: string;
-		placeholder?: string;
-		type?: HTMLInputElement['type'];
-		validate?: ValidatorOptions;
 		invalidMessage?: string;
-		focus?: boolean;
-		use?: (node: HTMLInputElement) => void;
 		ref?: HTMLInputElement | null;
 		class?: ClassValue | null | undefined;
 	}
 
 	let {
 		id = generateIdentifier('text-input'),
-		name,
 		label,
 		value = $bindable(''),
-		placeholder,
-		type,
-		validate: validateOpts,
 		invalidMessage = 'Field is required',
-		focus: focusOnMount = false,
-		use,
 		ref = $bindable<HTMLInputElement | null>(null),
-		class: classValue
+		class: classValue,
+		...others
 	}: Props = $props();
 
 	let valid: boolean = $state(true);
@@ -48,21 +37,16 @@
 	{/if}
 
 	<StyledRawInput
-		{placeholder}
 		{id}
-		{name}
-		{type}
 		bind:value
 		bind:ref
-		validate={validateOpts}
 		onvalidate={(e) => {
 			valid = e.detail.valid;
 		}}
-		focus={focusOnMount}
-		{use}
+		{...others}
 	/>
 
-	{#if validateOpts}
+	{#if others.validate}
 		<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
 			<Label for={id} error>
 				{invalidMessage}