From 5466a70916c481c229f5642d58933754cd52ea7b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 17 Sep 2025 22:08:37 -0700
Subject: [PATCH] Refactored Input component

---
 src/lib/components/ui/Input.svelte            | 467 ++++++++++++++++++
 src/lib/components/ui/input/Input.svelte      | 342 -------------
 src/lib/components/ui/input/input.module.scss | 207 --------
 3 files changed, 467 insertions(+), 549 deletions(-)
 create mode 100644 src/lib/components/ui/Input.svelte
 delete mode 100644 src/lib/components/ui/input/Input.svelte
 delete mode 100644 src/lib/components/ui/input/input.module.scss

diff --git a/src/lib/components/ui/Input.svelte b/src/lib/components/ui/Input.svelte
new file mode 100644
index 00000000..41b656f7
--- /dev/null
+++ b/src/lib/components/ui/Input.svelte
@@ -0,0 +1,467 @@
+<script lang="ts">
+	import { Label } from 'bits-ui'
+	import type { HTMLInputAttributes } from 'svelte/elements'
+	import Icon from '../Icon.svelte'
+
+	interface Props extends HTMLInputAttributes {
+		variant?: 'default' | 'bound' | 'duration' | 'number' | 'range'
+		bound?: boolean
+		error?: string
+		label?: string
+		leftIcon?: string
+		rightIcon?: string
+		counter?: number
+		maxLength?: number
+		hidden?: boolean
+		fullWidth?: boolean
+		fullHeight?: boolean
+		alignRight?: boolean
+		accessory?: boolean
+	}
+
+	let {
+		variant = 'default',
+		bound = false,
+		error,
+		label,
+		leftIcon,
+		rightIcon,
+		counter,
+		maxLength,
+		hidden = false,
+		fullWidth = false,
+		fullHeight = false,
+		alignRight = false,
+		accessory = false,
+		value = $bindable(''),
+		type = 'text',
+		placeholder,
+		disabled = false,
+		readonly = false,
+		required = false,
+		class: className = '',
+		...restProps
+	}: Props = $props()
+
+	const showCounter = $derived(counter !== undefined || maxLength !== undefined)
+	const currentCount = $derived(String(value).length)
+	const hasWrapper = $derived(accessory || leftIcon || rightIcon || showCounter)
+
+	const fieldsetClasses = $derived(
+		['fieldset', hidden && 'hidden', fullWidth && 'full', className].filter(Boolean).join(' ')
+	)
+
+	const inputClasses = $derived(
+		[
+			'input',
+			(variant === 'bound' || bound) && 'bound',
+			variant === 'duration' && 'duration',
+			variant === 'number' && 'number',
+			variant === 'range' && 'range',
+			alignRight && 'alignRight',
+			fullHeight && 'fullHeight',
+			accessory && 'accessory',
+			hasWrapper && 'wrapper'
+		]
+			.filter(Boolean)
+			.join(' ')
+	)
+</script>
+
+{#if label || error}
+	<fieldset class={fieldsetClasses}>
+		{#if label}
+			<Label.Root class="label" for={restProps.id}>
+				{label}
+				{#if required}
+					<span class="required">*</span>
+				{/if}
+			</Label.Root>
+		{/if}
+
+		{#if hasWrapper}
+			<div class={inputClasses}>
+				{#if leftIcon}
+					<span class="iconLeft">
+						<Icon name={leftIcon} size={16} />
+					</span>
+				{/if}
+
+				<input
+					bind:value
+					{type}
+					{placeholder}
+					{disabled}
+					{readonly}
+					{required}
+					{maxLength}
+					{...restProps}
+				/>
+
+				{#if rightIcon}
+					<span class="iconRight">
+						<Icon name={rightIcon} size={16} />
+					</span>
+				{/if}
+
+				{#if showCounter}
+					<span class="counter">
+						{currentCount}{maxLength ? `/${maxLength}` : ''}
+					</span>
+				{/if}
+			</div>
+		{:else}
+			<input
+				bind:value
+				class={inputClasses}
+				{type}
+				{placeholder}
+				{disabled}
+				{readonly}
+				{required}
+				{maxLength}
+				{...restProps}
+			/>
+		{/if}
+
+		{#if error}
+			<span class="error">{error}</span>
+		{/if}
+	</fieldset>
+{:else if hasWrapper}
+	<div class={inputClasses}>
+		{#if leftIcon}
+			<span class="iconLeft">
+				<Icon name={leftIcon} size={16} />
+			</span>
+		{/if}
+
+		<input
+			bind:value
+			{type}
+			{placeholder}
+			{disabled}
+			{readonly}
+			{required}
+			{maxLength}
+			{...restProps}
+		/>
+
+		{#if rightIcon}
+			<span class="iconRight">
+				<Icon name={rightIcon} size={16} />
+			</span>
+		{/if}
+
+		{#if showCounter}
+			<span class="counter">
+				{currentCount}{maxLength ? `/${maxLength}` : ''}
+			</span>
+		{/if}
+	</div>
+{:else}
+	<input
+		bind:value
+		class={inputClasses}
+		{type}
+		{placeholder}
+		{disabled}
+		{readonly}
+		{required}
+		{maxLength}
+		{...restProps}
+	/>
+{/if}
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/layout' as *;
+	@use '$src/themes/mixins' as *;
+	@use '$src/themes/effects' as *;
+
+	.fieldset {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
+
+		&:last-child .error {
+			margin-bottom: 0;
+		}
+
+		&.hidden {
+			display: none;
+		}
+
+		&.full {
+			width: 100%;
+		}
+
+		:global(.label) {
+			color: var(--text-primary);
+			font-size: $font-small;
+			font-weight: $medium;
+			margin-bottom: $unit-half;
+		}
+
+		:global(.label .required) {
+			color: $error;
+			margin-left: $unit-fourth;
+		}
+
+		.error {
+			color: $error;
+			font-size: $font-small;
+			padding: $unit-half $unit-2x;
+			min-width: 100%;
+			margin-bottom: $unit;
+			width: 0;
+		}
+	}
+
+	// Root level .input styles for standalone inputs
+	.input {
+		-webkit-font-smoothing: antialiased;
+		background-color: var(--input-bg);
+		border-radius: $input-corner;
+		border: none;
+		box-sizing: border-box;
+		color: var(--text-primary);
+		display: block;
+		font-family: var(--font-family);
+		font-size: $font-regular;
+		width: 100%;
+		@include smooth-transition($duration-quick, background-color);
+
+		&:not(.wrapper) {
+			padding: calc($unit * 1.5) $unit-2x;
+		}
+
+		&.fullHeight {
+			height: 100%;
+		}
+
+		&.accessory,
+		&.wrapper {
+			align-items: center;
+			background: var(--input-bg);
+			border-radius: $input-corner;
+			box-sizing: border-box;
+			position: relative;
+			display: flex;
+			padding: 0;
+
+			.counter {
+				color: var(--text-tertiary);
+				display: block;
+				font-weight: $bold;
+				line-height: calc($unit * 6);
+				position: absolute;
+				right: $unit-2x;
+				top: 0;
+				pointer-events: none;
+			}
+
+			input {
+				background: transparent;
+				border-radius: $input-corner;
+				// border: 2px solid transparent;
+				box-sizing: border-box;
+				color: var(--text-primary);
+				padding: calc($unit * 1.75) $unit-2x;
+				width: 100%;
+				font-size: $font-regular;
+				font-family: inherit;
+				@include smooth-transition($duration-quick, border-color);
+
+				&:focus {
+					@include focus-ring($blue);
+				}
+			}
+
+			.iconLeft,
+			.iconRight {
+				position: absolute;
+				display: flex;
+				align-items: center;
+				pointer-events: none;
+				color: var(--text-secondary);
+
+				:global(svg) {
+					fill: currentColor;
+				}
+			}
+
+			.iconLeft {
+				left: $unit-2x;
+			}
+
+			.iconRight {
+				right: $unit-2x;
+			}
+
+			&:has(.iconLeft) input {
+				padding-left: $unit-5x;
+			}
+
+			&:has(.iconRight) input {
+				padding-right: $unit-5x;
+			}
+
+			&:has(.counter) input {
+				padding-right: $unit-8x;
+			}
+		}
+
+		&[type='number']::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+		}
+
+		&.bound {
+			background-color: var(--input-bound-bg);
+
+			&:hover:not(:disabled) {
+				background-color: var(--input-bound-bg-hover);
+			}
+
+			// For wrapper variant with bound
+			&.wrapper {
+				background-color: var(--input-bound-bg);
+
+				&:hover:not(:has(input:disabled)) {
+					background-color: var(--input-bound-bg-hover);
+				}
+			}
+		}
+
+		&.duration {
+			background: transparent;
+			border: none;
+			padding: 0;
+			width: initial;
+			height: 100%;
+			padding: calc($unit-2x - 2px) 0;
+
+			&:hover {
+				background: transparent;
+			}
+
+			&:focus,
+			&:focus-visible {
+				border: none;
+			}
+		}
+
+		&.number {
+			text-align: right;
+			width: $unit-8x;
+		}
+
+		&.range {
+			text-align: right;
+			width: $unit-12x;
+		}
+
+		&.alignRight {
+			text-align: right;
+		}
+
+		&:hover:not(:disabled):not(.bound) {
+			background-color: var(--input-bg-hover);
+		}
+
+		&:focus {
+			@include focus-ring($blue);
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
+
+	// Direct input element styles
+	input.input {
+		-webkit-font-smoothing: antialiased;
+		background-color: var(--input-bg);
+		border-radius: $input-corner;
+		border: 2px solid transparent;
+		box-sizing: border-box;
+		color: var(--text-primary);
+		display: block;
+		font-family: var(--font-family);
+		font-size: $font-regular;
+		width: 100%;
+		padding: calc($unit * 1.5) $unit-2x;
+		@include smooth-transition($duration-quick, background-color);
+
+		&[type='number']::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+		}
+
+		&.bound {
+			background-color: var(--input-bound-bg);
+
+			&:hover:not(:disabled) {
+				background-color: var(--input-bound-bg-hover);
+			}
+		}
+
+		&.duration {
+			background: transparent;
+			border: none;
+			padding: calc($unit-2x - 2px) 0;
+			width: initial;
+			height: 100%;
+
+			&:hover {
+				background: transparent;
+			}
+
+			&:focus,
+			&:focus-visible {
+				border: none;
+			}
+		}
+
+		&.number {
+			text-align: right;
+			width: $unit-8x;
+		}
+
+		&.range {
+			text-align: right;
+			width: $unit-12x;
+		}
+
+		&.alignRight {
+			text-align: right;
+		}
+
+		&.fullHeight {
+			height: 100%;
+		}
+
+		&:hover:not(:disabled):not(.bound) {
+			background-color: var(--input-bg-hover);
+		}
+
+		&:focus {
+			@include focus-ring($blue);
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
+
+	// Placeholder styles
+	.input::placeholder,
+	.input > input::placeholder,
+	input.input::placeholder {
+		color: var(--text-tertiary);
+		opacity: 1;
+	}
+</style>
diff --git a/src/lib/components/ui/input/Input.svelte b/src/lib/components/ui/input/Input.svelte
deleted file mode 100644
index 0a2b0078..00000000
--- a/src/lib/components/ui/input/Input.svelte
+++ /dev/null
@@ -1,342 +0,0 @@
-<script lang="ts">
-	import { Label } from 'bits-ui';
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import Icon from '../../Icon.svelte';
-
-	interface Props extends HTMLInputAttributes {
-		variant?: 'default' | 'bound' | 'duration' | 'number' | 'range';
-		error?: string;
-		label?: string;
-		leftIcon?: string;
-		rightIcon?: string;
-		counter?: number;
-		maxLength?: number;
-		hidden?: boolean;
-		fullWidth?: boolean;
-		fullHeight?: boolean;
-		alignRight?: boolean;
-		accessory?: boolean;
-		children?: any;
-	}
-
-	let {
-		variant = 'default',
-		error,
-		label,
-		leftIcon,
-		rightIcon,
-		counter,
-		maxLength,
-		hidden = false,
-		fullWidth = false,
-		fullHeight = false,
-		alignRight = false,
-		accessory = false,
-		value = $bindable(''),
-		type = 'text',
-		placeholder,
-		disabled = false,
-		readonly = false,
-		required = false,
-		class: className = '',
-		children,
-		...restProps
-	}: Props = $props();
-
-	const showCounter = $derived(counter !== undefined || maxLength !== undefined);
-	const currentCount = $derived(String(value).length);
-
-	const fieldsetClasses = $derived([
-		'fieldset',
-		hidden && 'hidden',
-		fullWidth && 'full',
-		className
-	].filter(Boolean).join(' '));
-
-	const inputClasses = $derived([
-		'input',
-		variant === 'bound' && 'bound',
-		variant === 'duration' && 'duration',
-		variant === 'number' && 'number',
-		variant === 'range' && 'range',
-		alignRight && 'alignRight',
-		fullHeight && 'fullHeight',
-		accessory && 'accessory',
-		(leftIcon || rightIcon || showCounter) && 'wrapper'
-	].filter(Boolean).join(' '));
-</script>
-
-<fieldset class={fieldsetClasses}>
-	{#if label}
-		<Label.Root class="label" for={restProps.id}>
-			{label}
-			{#if required}
-				<span class="required">*</span>
-			{/if}
-		</Label.Root>
-	{/if}
-
-	{#if accessory || leftIcon || rightIcon || showCounter}
-		<div class={inputClasses}>
-			{#if leftIcon}
-				<span class="iconLeft">
-					<Icon name={leftIcon} size={16} />
-				</span>
-			{/if}
-
-			<input
-				bind:value
-				{type}
-				{placeholder}
-				{disabled}
-				{readonly}
-				{required}
-				{maxLength}
-				{...restProps}
-			/>
-
-			{#if rightIcon}
-				<span class="iconRight">
-					<Icon name={rightIcon} size={16} />
-				</span>
-			{/if}
-
-			{#if showCounter}
-				<span class="counter">
-					{currentCount}{maxLength ? `/${maxLength}` : ''}
-				</span>
-			{/if}
-		</div>
-	{:else}
-		<input
-			bind:value
-			class={inputClasses}
-			{type}
-			{placeholder}
-			{disabled}
-			{readonly}
-			{required}
-			{maxLength}
-			{...restProps}
-		/>
-	{/if}
-
-	{#if error}
-		<span class="error">{error}</span>
-	{/if}
-
-	{#if children}
-		{@render children()}
-	{/if}
-</fieldset>
-
-<style lang="scss">
-	@use '$src/themes/spacing' as *;
-	@use '$src/themes/colors' as *;
-	@use '$src/themes/typography' as *;
-	@use '$src/themes/layout' as *;
-	@use '$src/themes/mixins' as *;
-	@use '$src/themes/effects' as *;
-
-	.fieldset {
-		display: flex;
-		flex-direction: column;
-		gap: $unit-half;
-
-		&:last-child .error {
-			margin-bottom: 0;
-		}
-
-		&.hidden {
-			display: none;
-		}
-
-		&.full {
-			width: 100%;
-		}
-
-		:global(.label) {
-			color: var(--text-primary);
-			font-size: $font-small;
-			font-weight: $medium;
-			margin-bottom: $unit-half;
-
-			.required {
-				color: $error;
-				margin-left: $unit-fourth;
-			}
-		}
-
-		.error {
-			color: $error;
-			font-size: $font-small;
-			padding: $unit-half $unit-2x;
-			min-width: 100%;
-			margin-bottom: $unit;
-			width: 0;
-		}
-
-		.fullHeight {
-			height: 100%;
-		}
-
-		.input {
-			-webkit-font-smoothing: antialiased;
-			background-color: var(--input-bg);
-			border-radius: $input-corner;
-			border: none;
-			box-sizing: border-box;
-			color: var(--text-primary);
-			display: block;
-			font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-			font-size: $font-regular;
-			width: 100%;
-			@include smooth-transition($duration-quick, background-color);
-
-			&:not(.wrapper) {
-				padding: calc($unit * 1.5) $unit-2x;
-			}
-
-			&.accessory,
-			&.wrapper {
-				$offset: 2px;
-
-				align-items: center;
-				background: var(--input-bg);
-				border-radius: $input-corner;
-				box-sizing: border-box;
-				position: relative;
-				display: flex;
-				padding: 0;
-
-				.counter {
-					color: var(--text-tertiary);
-					display: block;
-					font-weight: $bold;
-					line-height: calc($unit * 6);
-					position: absolute;
-					right: $unit-2x;
-					top: 0;
-					pointer-events: none;
-				}
-
-				input {
-					background: transparent;
-					border-radius: $input-corner;
-					border: 2px solid transparent;
-					box-sizing: border-box;
-					color: var(--text-primary);
-					padding: calc($unit * 1.75) $unit-2x;
-					width: 100%;
-					font-size: $font-regular;
-					font-family: inherit;
-					@include smooth-transition($duration-quick, border-color);
-
-					&:focus {
-						@include focus-ring($blue);
-					}
-				}
-
-				.iconLeft,
-				.iconRight {
-					position: absolute;
-					display: flex;
-					align-items: center;
-					pointer-events: none;
-					color: var(--text-secondary);
-
-					:global(svg) {
-						fill: currentColor;
-					}
-				}
-
-				.iconLeft {
-					left: $unit-2x;
-				}
-
-				.iconRight {
-					right: $unit-2x;
-				}
-
-				&:has(.iconLeft) input {
-					padding-left: $unit-5x;
-				}
-
-				&:has(.iconRight) input {
-					padding-right: $unit-5x;
-				}
-
-				&:has(.counter) input {
-					padding-right: $unit-8x;
-				}
-			}
-
-			&[type='number']::-webkit-inner-spin-button {
-				-webkit-appearance: none;
-			}
-
-			&.bound {
-				background-color: var(--input-bound-bg);
-
-				&:hover {
-					background-color: var(--input-bound-bg-hover);
-				}
-			}
-
-			&.duration {
-				background: transparent;
-				border: none;
-				padding: 0;
-				width: initial;
-				height: 100%;
-				padding: calc($unit-2x - 2px) 0;
-
-				&:hover {
-					background: transparent;
-				}
-
-				&:focus,
-				&:focus-visible {
-					border: none;
-				}
-			}
-
-			&.number {
-				text-align: right;
-				width: $unit-8x;
-			}
-
-			&.range {
-				text-align: right;
-				width: $unit-12x;
-			}
-
-			&.alignRight {
-				text-align: right;
-			}
-
-			&:hover:not(:disabled) {
-				background-color: var(--input-bg-hover);
-			}
-
-			&:focus {
-				@include focus-ring($blue);
-			}
-
-			&:disabled {
-				opacity: 0.5;
-				cursor: not-allowed;
-			}
-		}
-
-		.counter {
-			display: none;
-		}
-	}
-
-	.input::placeholder,
-	.input > input::placeholder {
-		color: var(--text-tertiary);
-		opacity: 1;
-	}
-</style>
\ No newline at end of file
diff --git a/src/lib/components/ui/input/input.module.scss b/src/lib/components/ui/input/input.module.scss
deleted file mode 100644
index 9289ba40..00000000
--- a/src/lib/components/ui/input/input.module.scss
+++ /dev/null
@@ -1,207 +0,0 @@
-@use 'themes/spacing';
-@use 'themes/colors';
-@use 'themes/typography';
-@use 'themes/layout';
-@use 'themes/mixins';
-
-.fieldset {
-  display: flex;
-  flex-direction: column;
-  gap: spacing.$unit-half;
-
-  &:last-child .error {
-    margin-bottom: 0;
-  }
-
-  &.hidden {
-    display: none;
-  }
-
-  &.full {
-    width: 100%;
-  }
-
-  .label {
-    color: var(--text-primary);
-    font-size: typography.$font-small;
-    font-weight: typography.$medium;
-    margin-bottom: spacing.$unit-half;
-
-    .required {
-      color: colors.$error;
-      margin-left: spacing.$unit-fourth;
-    }
-  }
-
-  .error {
-    color: colors.$error;
-    font-size: typography.$font-small;
-    padding: calc(spacing.$unit / 2) (spacing.$unit * 2);
-    min-width: 100%;
-    margin-bottom: spacing.$unit;
-    width: 0;
-  }
-
-  .fullHeight {
-    height: 100%;
-  }
-
-  .input {
-    -webkit-font-smoothing: antialiased;
-    background-color: var(--input-bg);
-    border-radius: layout.$input-corner;
-    border: none;
-    box-sizing: border-box;
-    color: var(--text-primary);
-    display: block;
-    font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: typography.$font-regular;
-    width: 100%;
-
-    &:not(.wrapper) {
-      padding: (spacing.$unit * 1.5) spacing.$unit-2x;
-    }
-
-    &.accessory,
-    &.wrapper {
-      $offset: 2px;
-
-      align-items: center;
-      background: var(--input-bg);
-      border-radius: layout.$input-corner;
-      box-sizing: border-box;
-      position: relative;
-      display: flex;
-      padding: 0;
-
-      .counter {
-        color: var(--text-tertiary);
-        display: block;
-        font-weight: typography.$bold;
-        line-height: 48px;
-        position: absolute;
-        right: spacing.$unit-2x;
-        top: 0;
-        pointer-events: none;
-      }
-
-      input {
-        background: transparent;
-        border-radius: layout.$input-corner;
-        border: 2px solid transparent;
-        box-sizing: border-box;
-        color: var(--text-primary);
-        padding: (spacing.$unit * 1.75) spacing.$unit-2x;
-        width: 100%;
-        font-size: typography.$font-regular;
-        font-family: inherit;
-
-        &:focus {
-          border: 2px solid colors.$blue;
-          outline: none;
-        }
-      }
-
-      .iconLeft,
-      .iconRight {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        pointer-events: none;
-        color: var(--text-secondary);
-
-        svg {
-          fill: currentColor;
-        }
-      }
-
-      .iconLeft {
-        left: spacing.$unit-2x;
-      }
-
-      .iconRight {
-        right: spacing.$unit-2x;
-      }
-
-      &:has(.iconLeft) input {
-        padding-left: spacing.$unit-5x;
-      }
-
-      &:has(.iconRight) input {
-        padding-right: spacing.$unit-5x;
-      }
-
-      &:has(.counter) input {
-        padding-right: spacing.$unit-8x;
-      }
-    }
-
-    &[type='number']::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-    }
-
-    &.bound {
-      background-color: var(--input-bound-bg);
-
-      &:hover {
-        background-color: var(--input-bound-bg-hover);
-      }
-    }
-
-    &.duration {
-      background: transparent;
-      border: none;
-      padding: 0;
-      width: initial;
-      height: 100%;
-      padding: calc(spacing.$unit-2x - 2px) 0;
-
-      &:hover {
-        background: transparent;
-      }
-
-      &:focus,
-      &:focus-visible {
-        border: none;
-      }
-    }
-
-    &.number {
-      text-align: right;
-      width: spacing.$unit-8x;
-    }
-
-    &.range {
-      text-align: right;
-      width: spacing.$unit-12x;
-    }
-
-    &.alignRight {
-      text-align: right;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--input-bg-hover);
-    }
-
-    &:focus {
-      border: 2px solid colors.$blue;
-      outline: none;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .counter {
-    display: none;
-  }
-}
-
-.input::placeholder,
-.input > input::placeholder {
-  color: var(--text-tertiary);
-  opacity: 1;
-}
\ No newline at end of file