From 48e456c3a7ae1af81e5135574eebd40926c38f79 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Mon, 7 Jul 2025 17:35:39 -0700
Subject: [PATCH] styled raw & text input: include all props & add disabled

---
 src/lib/StyledRawInput.svelte |  7 +++++--
 src/lib/TextInput.svelte      | 28 ++++++----------------------
 src/routes/+page.svelte       |  6 +++++-
 3 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/lib/StyledRawInput.svelte b/src/lib/StyledRawInput.svelte
index 1cd08e5..4f80f82 100644
--- a/src/lib/StyledRawInput.svelte
+++ b/src/lib/StyledRawInput.svelte
@@ -8,7 +8,7 @@
 	import { generateIdentifier } from './util';
 	import { onMount } from 'svelte';
 
-	type $Props = Omit<HTMLInputAttributes, 'name' | 'value' | 'class'> & {
+	type $Props = Omit<HTMLInputAttributes, 'name' | 'value'> & {
 		name?: string;
 		value?: string;
 		validate?: ValidatorOptions;
@@ -16,7 +16,6 @@
 		use?: (node: HTMLInputElement) => void;
 		ref?: HTMLInputElement | null;
 		onvalidate?: (e: InputValidatorEvent) => void;
-		class?: ClassValue | null | undefined;
 	};
 
 	let {
@@ -25,6 +24,7 @@
 		value = $bindable(''),
 		placeholder,
 		validate: validateOpts,
+		disabled = false,
 		focus: focusOnMount = false,
 		use,
 		ref = $bindable<HTMLInputElement | null>(null),
@@ -68,8 +68,11 @@
 		'dark:text-sui-background dark:placeholder:text-sui-background/60 dark:sm:bg-slate-800',
 		'ring-sui-primary ring-offset-1 placeholder-shown:text-ellipsis focus:ring-2',
 		!valid && 'border-red-500!',
+		disabled &&
+			'border-sui-accent/20 text-sui-text/60 dark:text-sui-background/60 cursor-not-allowed',
 		classValue
 	]}
+	{disabled}
 	use:validate={validateOpts}
 	use:conditionalUse
 	onvalidate={(e) => {
diff --git a/src/lib/TextInput.svelte b/src/lib/TextInput.svelte
index cfc3a81..ee0175a 100644
--- a/src/lib/TextInput.svelte
+++ b/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}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 424c8a3..5921a4d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -150,12 +150,16 @@
 </div>
 
 <div class="component">
-	<p class="title">Styled Raw Input, Text Input</p>
+	<p class="title">Styled Raw Input, Text Input, Disabled Input</p>
 
 	<InputGroup>
 		<StyledRawInput placeholder="Type here..." class="basis-1/2" />
 		<TextInput label="Write something here" placeholder="Enter text..." class="basis-1/2" />
 	</InputGroup>
+
+	<InputGroup>
+		<TextInput label="Disabled input" placeholder="You can't enter text" disabled />
+	</InputGroup>
 </div>
 
 <div class="component">