From 723fc4ee48b53efca5262030abc4d2059aad8f5b Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Thu, 3 Jul 2025 14:17:16 -0700
Subject: [PATCH] text input: make name optional, custom class support

---
 src/lib/TextInput.svelte | 38 ++++++++++++++++++++++++--------------
 src/routes/+page.svelte  |  4 ++--
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/lib/TextInput.svelte b/src/lib/TextInput.svelte
index 08cd51b..a597b7c 100644
--- a/src/lib/TextInput.svelte
+++ b/src/lib/TextInput.svelte
@@ -2,18 +2,12 @@
 	import Label from './Label.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
 	import { type ValidatorOptions } from '@svelte-toolkit/validate';
+	import { generateIdentifier } from './util.js';
+	import type { ClassValue } from 'svelte/elements';
 
-	let {
-		name,
-		label,
-		value = $bindable(''),
-		placeholder,
-		type,
-		validate: validateOpts,
-		invalidMessage = 'Field is required',
-		ref = $bindable<HTMLInputElement | null>(null)
-	}: {
-		name: string;
+	interface Props {
+		id?: string;
+		name?: string;
 		label?: string;
 		value?: string;
 		placeholder?: string;
@@ -21,18 +15,33 @@
 		validate?: ValidatorOptions;
 		invalidMessage?: string;
 		ref?: HTMLInputElement | null;
-	} = $props();
+		class?: ClassValue | null | undefined;
+	}
+
+	let {
+		id = generateIdentifier('text-input'),
+		name,
+		label,
+		value = $bindable(''),
+		placeholder,
+		type,
+		validate: validateOpts,
+		invalidMessage = 'Field is required',
+		ref = $bindable<HTMLInputElement | null>(null),
+		class: classList
+	}: Props = $props();
 
 	let valid: boolean = $state(true);
 </script>
 
 <div>
 	{#if label}
-		<Label for={name}>{label}</Label>
+		<Label for={id}>{label}</Label>
 	{/if}
 
 	<StyledRawInput
 		{placeholder}
+		{id}
 		{name}
 		{type}
 		bind:value
@@ -41,11 +50,12 @@
 		onvalidate={(e) => {
 			valid = e.detail.valid;
 		}}
+		class={classList}
 	/>
 
 	{#if validateOpts}
 		<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
-			<Label for={name} error>
+			<Label for={id} error>
 				{invalidMessage}
 			</Label>
 		</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6048bd1..d81cca3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -117,8 +117,8 @@
 <div class="component">
 	<p class="title">Styled Raw Input, Text Input</p>
 
-	<StyledRawInput name="example-raw-input" placeholder="Type here..." />
-	<TextInput name="example-text-input" placeholder="Enter text..." />
+	<StyledRawInput placeholder="Type here..." />
+	<TextInput label="Write something here" placeholder="Enter text..." />
 </div>
 
 <div class="component">