From 9d17fef232c118df2fc53fb84ae89110ea98e4fd Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Tue, 8 Jul 2025 12:24:36 -0700
Subject: [PATCH] styled, raw input: improve error message control, add compact
 mode

---
 src/lib/StyledRawInput.svelte | 7 +++++--
 src/lib/TextInput.svelte      | 4 ++--
 src/routes/+page.svelte       | 4 +++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/lib/StyledRawInput.svelte b/src/lib/StyledRawInput.svelte
index 4f80f82..a0f3444 100644
--- a/src/lib/StyledRawInput.svelte
+++ b/src/lib/StyledRawInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ClassValue, HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 	import {
 		validate,
 		type InputValidatorEvent,
@@ -13,6 +13,7 @@
 		value?: string;
 		validate?: ValidatorOptions;
 		focus?: boolean;
+		compact?: boolean;
 		use?: (node: HTMLInputElement) => void;
 		ref?: HTMLInputElement | null;
 		onvalidate?: (e: InputValidatorEvent) => void;
@@ -26,6 +27,7 @@
 		validate: validateOpts,
 		disabled = false,
 		focus: focusOnMount = false,
+		compact = false,
 		use,
 		ref = $bindable<HTMLInputElement | null>(null),
 		onvalidate,
@@ -63,10 +65,11 @@
 	{...others}
 	bind:value
 	class={[
-		'border-sui-accent w-full rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
+		'border-sui-accent w-full rounded-sm border bg-white font-normal transition-colors',
 		'text-sui-text placeholder:text-sui-text/60 dark:border-sui-accent/50 dark:bg-sui-text-800 placeholder:font-normal',
 		'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',
+		!compact ? 'px-[1.125rem] py-3.5' : 'px-[0.75rem] py-2',
 		!valid && 'border-red-500!',
 		disabled &&
 			'border-sui-accent/20 text-sui-text/60 dark:text-sui-background/60 cursor-not-allowed',
diff --git a/src/lib/TextInput.svelte b/src/lib/TextInput.svelte
index ee0175a..d4a910b 100644
--- a/src/lib/TextInput.svelte
+++ b/src/lib/TextInput.svelte
@@ -9,7 +9,7 @@
 		id?: string;
 		label?: string;
 		value?: string;
-		invalidMessage?: string;
+		invalidMessage?: string | null;
 		ref?: HTMLInputElement | null;
 		class?: ClassValue | null | undefined;
 	}
@@ -46,7 +46,7 @@
 		{...others}
 	/>
 
-	{#if others.validate}
+	{#if others.validate && invalidMessage !== null}
 		<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 e3aab1b..cbeec5f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -160,7 +160,7 @@
 </div>
 
 <div class="component">
-	<p class="title">Styled Raw Input, Text Input, Disabled Input</p>
+	<p class="title">Styled Raw Input, Text Input, Disabled Input, Compact Input</p>
 
 	<InputGroup>
 		<StyledRawInput placeholder="Type here..." class="basis-1/2" />
@@ -169,6 +169,8 @@
 
 	<InputGroup>
 		<TextInput label="Disabled input" placeholder="You can't enter text" disabled />
+
+		<TextInput label="Compact Input" placeholder="Small input field" compact />
 	</InputGroup>
 </div>