styled, raw input: improve error message control, add compact mode

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',

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}

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>