From b60eca43bea89292756e6d22aff5d90c2ffbd550 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 21 Dec 2025 02:56:36 -0800
Subject: [PATCH] add clearable prop to Input component

---
 src/lib/components/ui/Input.svelte | 52 ++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ui/Input.svelte b/src/lib/components/ui/Input.svelte
index 1bccea5a..4258d5de 100644
--- a/src/lib/components/ui/Input.svelte
+++ b/src/lib/components/ui/Input.svelte
@@ -10,6 +10,8 @@
 		label?: string
 		leftIcon?: string
 		rightIcon?: string
+		clearable?: boolean
+		onClear?: () => void
 		counter?: number
 		maxLength?: number
 		hidden?: boolean
@@ -31,6 +33,8 @@
 		label,
 		leftIcon,
 		rightIcon,
+		clearable = false,
+		onClear,
 		counter,
 		maxLength,
 		hidden = false,
@@ -69,7 +73,12 @@
 	const showCounter = $derived(
 		counter !== undefined || (charsRemaining !== undefined && charsRemaining <= 5)
 	)
-	const hasWrapper = $derived(accessory || leftIcon || rightIcon || maxLength !== undefined || validationIcon)
+	const hasWrapper = $derived(accessory || leftIcon || rightIcon || clearable || maxLength !== undefined || validationIcon)
+
+	function handleClear() {
+		value = ''
+		onClear?.()
+	}
 
 	const fieldsetClasses = $derived(
 		['fieldset', hidden && 'hidden', fullWidth && 'full', className].filter(Boolean).join(' ')
@@ -92,11 +101,6 @@
 			.join(' ')
 	)
 
-	// Debug: log what's in restProps
-	$effect(() => {
-		console.log('[Input] restProps keys:', Object.keys(restProps))
-		console.log('[Input] hasWrapper:', hasWrapper, 'validationIcon:', validationIcon)
-	})
 </script>
 
 <fieldset class={fieldsetClasses}>
@@ -144,6 +148,12 @@
 				</span>
 			{/if}
 
+			{#if clearable && value}
+				<button type="button" class="clearButton" onclick={handleClear}>
+					<Icon name="close" size={14} />
+				</button>
+			{/if}
+
 			{#if showCounter}
 				<span class="counter" class:warning={charsRemaining !== undefined && charsRemaining <= 5}>
 					{charsRemaining !== undefined ? charsRemaining : currentCount}
@@ -345,6 +355,32 @@
 				}
 			}
 
+			.clearButton {
+				position: absolute;
+				right: $unit-2x;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 20px;
+				height: 20px;
+				padding: 0;
+				border: none;
+				background: transparent;
+				color: var(--text-secondary);
+				cursor: pointer;
+				border-radius: $unit-half;
+				@include smooth-transition($duration-quick, background-color, color);
+
+				&:hover {
+					background: var(--surface-tertiary);
+					color: var(--text-primary);
+				}
+
+				:global(svg) {
+					fill: currentColor;
+				}
+			}
+
 			&:has(.iconLeft) input {
 				padding-left: $unit-5x;
 			}
@@ -357,6 +393,10 @@
 				padding-right: $unit-5x;
 			}
 
+			&:has(.clearButton) input {
+				padding-right: $unit-5x;
+			}
+
 			&:has(.counter) input {
 				padding-right: $unit-8x;
 			}