@synthaxai/ui 1.0.0 → 1.1.0

package/dist/forms/TextInput/TextInput.svelte

@@ -1,13 +1,15 @@
 <!--
   @component TextInput
   
-  A fully accessible text input component with validation states,
-  icons, character counting, and comprehensive ARIA support.
+  A fully accessible, enhanced text input component with validation states,
+  input masking, clearable button, password toggle, prefix/suffix support,
+  and comprehensive ARIA support.
   
-  Designed for healthcare applications with proper error handling
-  and clear visual feedback.
+  Designed for healthcare applications with proper error handling,
+  clear visual feedback, and support for common healthcare data formats
+  like SSN, phone numbers, dates, NPI, and member IDs.
   
-  @example
+  @example Basic usage
   <TextInput
     id="patient-name"
     label="Patient Name"
@@ -16,22 +18,85 @@
     required
   />
   
-  @example
+  @example With masking (phone number)
+  <TextInput
+    label="Phone Number"
+    value={phone}
+    mask="(###) ###-####"
+    inputMode="tel"
+    placeholder="(555) 555-5555"
+  />
+  
+  @example Clearable with loading
   <TextInput
-    id="member-id"
     label="Member ID"
     value={memberId}
-    error={memberIdError}
-    hint="Enter your insurance member ID"
-    oninput={(e) => handleInput(e)}
+    clearable
+    loading={isValidating}
+    hint="Enter your 12-digit member ID"
+  />
+  
+  @example Password with toggle
+  <TextInput
+    label="Password"
+    type="password"
+    value={password}
+    showPasswordToggle
+  />
+  
+  @example With prefix/suffix
+  <TextInput
+    label="Amount"
+    value={amount}
+    prefix="$"
+    suffix=".00"
+    inputMode="decimal"
   />
 -->
+<script lang="ts" module>
+	/**
+	 * Healthcare-specific input mask presets.
+	 * Use these with the `mask` prop for consistent formatting.
+	 */
+	export const INPUT_MASKS = {
+		/** US Phone: (555) 555-5555 */
+		PHONE_US: '(###) ###-####',
+		/** US Phone with country code: +1 (555) 555-5555 */
+		PHONE_US_INTL: '+1 (###) ###-####',
+		/** Social Security Number: 123-45-6789 */
+		SSN: '###-##-####',
+		/** Date (US format): 01/15/1990 */
+		DATE_US: '##/##/####',
+		/** Date (ISO format): 1990-01-15 */
+		DATE_ISO: '####-##-##',
+		/** ZIP Code: 12345 */
+		ZIP: '#####',
+		/** ZIP+4: 12345-6789 */
+		ZIP_PLUS4: '#####-####',
+		/** National Provider Identifier: 1234567890 */
+		NPI: '##########',
+		/** 12-digit Member ID */
+		MEMBER_ID_12: '############',
+		/** Credit Card: 4111-1111-1111-1111 */
+		CREDIT_CARD: '####-####-####-####',
+		/** CVV: 123 */
+		CVV: '###',
+		/** Time 12hr: 12:30 */
+		TIME_12: '##:##',
+		/** Time 24hr: 14:30 */
+		TIME_24: '##:##',
+	} as const;
+
+	export type InputMask = (typeof INPUT_MASKS)[keyof typeof INPUT_MASKS] | string;
+</script>
+
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { Check, AlertCircle, Info } from 'lucide-svelte';
+	import { Check, AlertCircle, Info, X, Eye, EyeOff, Loader2 } from 'lucide-svelte';
 	import { cn } from '../../utils/cn.js';
 	import { generateId } from '../../utils/keyboard.js';
+	import { announce, prefersReducedMotion } from '../../utils/accessibility.js';
 	import type { InputMode, AutoComplete } from '../../types/index.js';
 
 	type InputSize = 'sm' | 'md' | 'lg';
@@ -46,7 +111,7 @@
 		type?: InputType;
 		/** Label text for the input */
 		label: string;
-		/** Current value */
+		/** Current value (bindable) */
 		value?: string;
 		/** Placeholder text */
 		placeholder?: string;
@@ -84,14 +149,45 @@
 		hideLabel?: boolean;
 		/** Additional CSS classes for the wrapper */
 		class?: string;
-		/** Format function to transform input value */
+		/** Format function to transform input value (legacy, prefer mask) */
 		formatFn?: (value: string) => string;
+		
+		// ============================================================================
+		// Enhanced Features
+		// ============================================================================
+		
+		/** 
+		 * Input mask pattern. Use # for digits, A for letters, * for alphanumeric.
+		 * Example: "###-##-####" for SSN, "(###) ###-####" for phone
+		 */
+		mask?: InputMask;
+		/** Character to show for unfilled mask positions (default: none) */
+		maskPlaceholder?: string;
+		/** Whether to include mask literals in the value (default: false, returns only user input) */
+		maskIncludeLiterals?: boolean;
+		/** Show clear button when input has value */
+		clearable?: boolean;
+		/** Show password visibility toggle (only for type="password") */
+		showPasswordToggle?: boolean;
+		/** Static text to display before the input */
+		prefix?: string;
+		/** Static text to display after the input */
+		suffix?: string;
+		/** Show loading spinner */
+		loading?: boolean;
+		/** Debounce delay for oninput (in ms) */
+		debounce?: number;
+		/** Called with debounced value */
+		ondebounce?: (value: string) => void;
+		
 		/** Input handler */
 		oninput?: (event: Event) => void;
 		/** Blur handler */
 		onblur?: (event: FocusEvent) => void;
 		/** Focus handler */
 		onfocus?: (event: FocusEvent) => void;
+		/** Called when clear button is clicked */
+		onclear?: () => void;
 		/** Test ID for e2e testing (Playwright, Cypress) */
 		testId?: string;
 		/** Show validation state immediately without waiting for interaction */
@@ -103,7 +199,7 @@
 		name,
 		type = 'text',
 		label,
-		value = '',
+		value = $bindable(''),
 		placeholder = '',
 		required = false,
 		disabled = false,
@@ -123,34 +219,249 @@
 		hideLabel = false,
 		class: className = '',
 		formatFn,
+		// Enhanced features
+		mask,
+		maskPlaceholder,
+		maskIncludeLiterals = false,
+		clearable = false,
+		showPasswordToggle = false,
+		prefix,
+		suffix,
+		loading = false,
+		debounce = 0,
+		ondebounce,
 		oninput,
 		onblur,
 		onfocus,
+		onclear,
 		testId,
 		validateOnMount = false,
 		...restProps
 	}: Props = $props();
 
-	// Internal state
+	// ============================================================================
+	// State
+	// ============================================================================
+
+	let inputRef: HTMLInputElement | undefined = $state();
 	let isFocused = $state(false);
 	let hasInteracted = $state(false);
+	let passwordVisible = $state(false);
+	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// ============================================================================
+	// Derived State
+	// ============================================================================
 
-	// Derived states
-	// Validation shows: after interaction OR if validateOnMount is enabled
+	// Validation display logic
 	const shouldValidate = $derived(hasInteracted || validateOnMount);
 	const showError = $derived(shouldValidate && !!error);
 	const showSuccess = $derived(shouldValidate && !error && !!value && !!successMessage);
 	const isValid = $derived(shouldValidate && !error && !!value && !!successMessage);
+
+	// IDs for accessibility
 	const errorId = $derived(`${id}-error`);
 	const hintId = $derived(`${id}-hint`);
 
+	// Determine effective input type
+	const effectiveType = $derived(
+		type === 'password' && passwordVisible ? 'text' : type
+	);
+
+	// Determine if we need right-side space for icons/buttons
+	const hasRightContent = $derived(
+		loading ||
+		showError ||
+		isValid ||
+		(clearable && value && !disabled && !readonly) ||
+		(showPasswordToggle && type === 'password') ||
+		iconRight
+	);
+
+	// Count right icons for padding calculation
+	const rightIconCount = $derived.by(() => {
+		let count = 0;
+		if (loading) count++;
+		else if (showError || isValid) count++;
+		if (clearable && value && !disabled && !readonly) count++;
+		if (showPasswordToggle && type === 'password') count++;
+		if (iconRight && !loading && !showError && !isValid) count++;
+		return count;
+	});
+
+	// Calculate if mask is complete
+	const maskComplete = $derived.by(() => {
+		if (!mask) return true;
+		const requiredDigits = (mask.match(/#/g) || []).length;
+		const requiredLetters = (mask.match(/A/g) || []).length;
+		const requiredAny = (mask.match(/\*/g) || []).length;
+		const rawValue = getRawValue(value);
+		return rawValue.length >= requiredDigits + requiredLetters + requiredAny;
+	});
+
+	// Build aria-describedby
+	const ariaDescribedBy = $derived(
+		[error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+	);
+
+	// ============================================================================
+	// Mask Logic
+	// ============================================================================
+
+	/**
+	 * Check if character is valid for mask position
+	 */
+	function isValidMaskChar(char: string, maskChar: string): boolean {
+		if (maskChar === '#') return /\d/.test(char);
+		if (maskChar === 'A') return /[a-zA-Z]/.test(char);
+		if (maskChar === '*') return /[a-zA-Z0-9]/.test(char);
+		return false;
+	}
+
+	/**
+	 * Extract raw characters from input based on mask type
+	 */
+	function extractRawChars(input: string): string {
+		if (!mask) return input;
+		
+		// Determine what character types the mask expects
+		const hasDigitSlots = mask.includes('#');
+		const hasLetterSlots = mask.includes('A');
+		const hasAnySlots = mask.includes('*');
+		
+		let result = '';
+		for (const char of input) {
+			if (hasDigitSlots && /\d/.test(char)) {
+				result += char;
+			} else if (hasLetterSlots && /[a-zA-Z]/.test(char)) {
+				result += char;
+			} else if (hasAnySlots && /[a-zA-Z0-9]/.test(char)) {
+				result += char;
+			}
+		}
+		return result;
+	}
+
+	/**
+	 * Get raw value without mask literals (for external use)
+	 */
+	function getRawValue(maskedValue: string): string {
+		if (!mask) return maskedValue;
+		return extractRawChars(maskedValue);
+	}
+
+	/**
+	 * Apply mask to raw input characters
+	 */
+	function applyMask(input: string): string {
+		if (!mask) return input;
+
+		// Extract only valid characters
+		const rawChars = extractRawChars(input);
+		
+		// Build masked output
+		let result = '';
+		let charIndex = 0;
+		
+		for (let i = 0; i < mask.length && charIndex < rawChars.length; i++) {
+			const maskChar = mask[i];
+			if (maskChar === '#' || maskChar === 'A' || maskChar === '*') {
+				// This is a placeholder slot - fill with next raw char
+				const rawChar = rawChars[charIndex];
+				if (isValidMaskChar(rawChar, maskChar)) {
+					result += rawChar;
+					charIndex++;
+				} else {
+					// Character doesn't match expected type, skip it
+					charIndex++;
+					i--; // Try this mask position again
+				}
+			} else {
+				// This is a literal character - add it
+				result += maskChar;
+			}
+		}
+
+		// Add mask placeholder for remaining positions if specified and focused
+		if (maskPlaceholder && isFocused) {
+			for (let i = result.length; i < mask.length; i++) {
+				const maskChar = mask[i];
+				if (maskChar === '#' || maskChar === 'A' || maskChar === '*') {
+					result += maskPlaceholder;
+				} else {
+					result += maskChar;
+				}
+			}
+		}
+
+		return result;
+	}
+
+	/**
+	 * Calculate cursor position after mask application
+	 */
+	function calculateCursorPosition(rawLength: number): number {
+		if (!mask) return rawLength;
+		
+		let position = 0;
+		let rawCount = 0;
+		
+		for (let i = 0; i < mask.length && rawCount < rawLength; i++) {
+			const maskChar = mask[i];
+			position++;
+			if (maskChar === '#' || maskChar === 'A' || maskChar === '*') {
+				rawCount++;
+			}
+		}
+		
+		return position;
+	}
+
+	// ============================================================================
+	// Event Handlers
+	// ============================================================================
+
 	function handleInput(e: Event) {
 		const target = e.target as HTMLInputElement;
 		let newValue = target.value;
 
-		if (formatFn) {
-			newValue = formatFn(newValue);
+		// Apply mask if present
+		if (mask) {
+			// Apply mask to the input value
+			newValue = applyMask(newValue);
+			const rawValue = getRawValue(newValue);
+			
+			// Calculate cursor position based on raw value length
+			const newCursorPos = calculateCursorPosition(rawValue.length);
+			
 			target.value = newValue;
+			
+			// Restore cursor position
+			requestAnimationFrame(() => {
+				if (target && document.activeElement === target) {
+					target.setSelectionRange(newCursorPos, newCursorPos);
+				}
+			});
+			
+			// Update value (raw or with literals based on setting)
+			value = maskIncludeLiterals ? newValue : rawValue;
+		} else {
+			// Apply legacy format function
+			if (formatFn) {
+				newValue = formatFn(newValue);
+				target.value = newValue;
+			}
+			
+			// Update value
+			value = newValue;
+		}
+
+		// Handle debounce
+		if (debounce > 0 && ondebounce) {
+			if (debounceTimer) clearTimeout(debounceTimer);
+			debounceTimer = setTimeout(() => {
+				ondebounce(value);
+			}, debounce);
 		}
 
 		oninput?.(e);
@@ -159,18 +470,88 @@
 	function handleBlur(e: FocusEvent) {
 		isFocused = false;
 		hasInteracted = true;
+
+		// Clear debounce and fire immediately
+		if (debounceTimer && ondebounce) {
+			clearTimeout(debounceTimer);
+			debounceTimer = null;
+			ondebounce(value);
+		}
+
+		// Remove mask placeholder on blur
+		if (mask && maskPlaceholder && inputRef) {
+			const rawValue = getRawValue(value);
+			if (rawValue) {
+				inputRef.value = applyMask(rawValue);
+			}
+		}
+
 		onblur?.(e);
 	}
 
 	function handleFocus(e: FocusEvent) {
 		isFocused = true;
+		
+		// Show mask placeholder on focus
+		if (mask && maskPlaceholder && inputRef) {
+			const currentRaw = getRawValue(inputRef.value);
+			inputRef.value = applyMask(currentRaw);
+		}
+		
 		onfocus?.(e);
 	}
 
-	// Build aria-describedby
-	const ariaDescribedBy = $derived(
-		[error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
-	);
+	function handleClear() {
+		value = '';
+		if (inputRef) {
+			inputRef.value = '';
+			inputRef.focus();
+		}
+		announce('Input cleared', 'polite');
+		onclear?.();
+		
+		// Trigger debounce callback with empty value
+		if (ondebounce) {
+			if (debounceTimer) clearTimeout(debounceTimer);
+			ondebounce('');
+		}
+	}
+
+	function togglePasswordVisibility() {
+		passwordVisible = !passwordVisible;
+		announce(passwordVisible ? 'Password shown' : 'Password hidden', 'polite');
+		// Keep focus on input
+		inputRef?.focus();
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		// Handle Escape to clear when clearable
+		if (e.key === 'Escape' && clearable && value && !disabled && !readonly) {
+			e.preventDefault();
+			handleClear();
+		}
+	}
+
+	// ============================================================================
+	// Effects
+	// ============================================================================
+
+	// Apply initial mask formatting
+	$effect(() => {
+		if (mask && inputRef && value) {
+			const maskedValue = applyMask(maskIncludeLiterals ? value : getRawValue(value) || value);
+			if (inputRef.value !== maskedValue) {
+				inputRef.value = maskedValue;
+			}
+		}
+	});
+
+	// Cleanup debounce timer
+	$effect(() => {
+		return () => {
+			if (debounceTimer) clearTimeout(debounceTimer);
+		};
+	});
 </script>
 
 <div class={cn('input-wrapper', `input-${size}`, disabled && 'input-disabled', className)}>
@@ -188,7 +569,23 @@
 	</label>
 
 	<!-- Input wrapper -->
-	<div class="input-field-wrapper">
+	<div
+		class={cn(
+			'input-field-wrapper',
+			isFocused && 'input-field-wrapper-focused',
+			showError && 'input-field-wrapper-error',
+			isValid && 'input-field-wrapper-valid',
+			disabled && 'input-field-wrapper-disabled'
+		)}
+	>
+		<!-- Prefix (inside input container) -->
+		{#if prefix}
+			<span class={cn('input-prefix', isFocused && 'input-prefix-focused')} aria-hidden="true">
+				{prefix}
+			</span>
+		{/if}
+
+		<!-- Left icon -->
 		{#if iconLeft}
 			<span class={cn('input-icon-left', isFocused && 'input-icon-focused')} aria-hidden="true">
 				{@render iconLeft()}
@@ -196,10 +593,11 @@
 		{/if}
 
 		<input
+			bind:this={inputRef}
 			{id}
 			{name}
-			{type}
-			{value}
+			type={effectiveType}
+			value={mask ? applyMask(maskIncludeLiterals ? value : value) : value}
 			{placeholder}
 			{disabled}
 			{readonly}
@@ -207,7 +605,7 @@
 			{pattern}
 			maxlength={maxLength}
 			minlength={minLength}
-			inputmode={inputMode}
+			inputmode={mask ? 'numeric' : inputMode}
 			{autocomplete}
 			aria-invalid={showError}
 			aria-describedby={ariaDescribedBy}
@@ -215,29 +613,79 @@
 			data-testid={testId}
 			class={cn(
 				'input-field',
+				prefix && 'input-has-prefix',
+				suffix && 'input-has-suffix',
 				iconLeft && 'input-has-icon-left',
-				(iconRight || showError || isValid) && 'input-has-icon-right',
-				showError && 'input-error',
-				isValid && 'input-valid'
+				(prefix && iconLeft) && 'input-has-prefix-and-icon',
+				hasRightContent && 'input-has-icon-right',
+				rightIconCount > 1 && 'input-has-multiple-right',
+				rightIconCount > 2 && 'input-has-triple-right',
+				(suffix && hasRightContent) && 'input-has-suffix-and-right'
 			)}
 			oninput={handleInput}
 			onblur={handleBlur}
 			onfocus={handleFocus}
+			onkeydown={handleKeyDown}
 			{...restProps}
 		/>
 
-		<!-- Status icon or custom right icon -->
-		{#if showError}
-			<span class="input-icon-right input-icon-error" aria-hidden="true">
-				<AlertCircle size={18} />
-			</span>
-		{:else if isValid}
-			<span class="input-icon-right input-icon-success" aria-hidden="true">
-				<Check size={18} />
-			</span>
-		{:else if iconRight}
-			<span class="input-icon-right" aria-hidden="true">
-				{@render iconRight()}
+		<!-- Right side icons and buttons -->
+		<div class={cn('input-right-content', suffix && 'input-right-content-before-suffix')}>
+			<!-- Loading spinner -->
+			{#if loading}
+				<span class="input-icon-loading" aria-hidden="true">
+					<Loader2 size={size === 'sm' ? 14 : 16} class="input-spinner" />
+				</span>
+			{:else if showError}
+				<span class="input-icon-right input-icon-error" aria-hidden="true">
+					<AlertCircle size={size === 'sm' ? 14 : 16} />
+				</span>
+			{:else if isValid}
+				<span class="input-icon-right input-icon-success" aria-hidden="true">
+					<Check size={size === 'sm' ? 14 : 16} />
+				</span>
+			{:else if iconRight}
+				<span class="input-icon-right" aria-hidden="true">
+					{@render iconRight()}
+				</span>
+			{/if}
+
+			<!-- Clear button -->
+			{#if clearable && value && !disabled && !readonly}
+				<button
+					type="button"
+					class="input-clear-button"
+					onclick={handleClear}
+					aria-label="Clear input"
+					tabindex={-1}
+				>
+					<X size={size === 'sm' ? 14 : 16} />
+				</button>
+			{/if}
+
+			<!-- Password toggle -->
+			{#if showPasswordToggle && type === 'password'}
+				<button
+					type="button"
+					class="input-password-toggle"
+					onclick={togglePasswordVisibility}
+					aria-label={passwordVisible ? 'Hide password' : 'Show password'}
+					aria-pressed={passwordVisible}
+					tabindex={-1}
+				>
+					{#if passwordVisible}
+						<EyeOff size={size === 'sm' ? 14 : 16} />
+					{:else}
+						<Eye size={size === 'sm' ? 14 : 16} />
+					{/if}
+				</button>
+			{/if}
+		</div>
+
+		<!-- Suffix (inside input container) -->
+		{#if suffix}
+			<span class={cn('input-suffix', isFocused && 'input-suffix-focused')} aria-hidden="true">
+				{suffix}
 			</span>
 		{/if}
 	</div>
@@ -322,156 +770,250 @@
 	}
 
 	/* ========================================
-	   FIELD WRAPPER
+	   FIELD WRAPPER (Unified container)
 	   ======================================== */
 	.input-field-wrapper {
 		position: relative;
 		display: flex;
 		align-items: center;
-	}
-
-	/* ========================================
-	   INPUT FIELD
-	   ======================================== */
-	.input-field {
-		width: 100%;
 		border: 2px solid var(--ui-border-default);
 		border-radius: 0.5rem;
 		background: var(--ui-bg-secondary);
-		color: var(--ui-text-primary);
 		transition: all 0.2s ease;
 	}
 
-	.input-field::placeholder {
-		color: var(--ui-text-tertiary);
-	}
-
-	.input-field:focus-visible {
-		outline: none;
+	.input-field-wrapper-focused {
 		background: var(--ui-bg-primary);
 		border-color: rgb(var(--ui-color-primary));
 		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
 	}
 
-	:global([data-theme='dark']) .input-field:focus-visible {
+	:global([data-theme='dark']) .input-field-wrapper-focused {
 		border-color: rgb(var(--ui-color-primary-light));
 		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
 	}
 
 	@media (prefers-color-scheme: dark) {
-		:global(:root:not([data-theme='light'])) .input-field:focus-visible {
+		:global(:root:not([data-theme='light'])) .input-field-wrapper-focused {
 			border-color: rgb(var(--ui-color-primary-light));
 			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
 		}
 	}
 
-	.input-field:disabled {
-		cursor: not-allowed;
-		background: var(--ui-bg-tertiary);
-	}
-
-	.input-field:read-only {
-		background: var(--ui-bg-tertiary);
-		cursor: default;
-	}
-
-	/* Size variants */
-	.input-sm .input-field {
-		height: 2rem;
-		padding: 0 0.75rem;
-		font-size: 0.875rem;
-	}
-
-	.input-md .input-field {
-		height: 2.5rem;
-		padding: 0 0.75rem;
-		font-size: 0.875rem;
-	}
-
-	.input-lg .input-field {
-		height: 3rem;
-		padding: 0 1rem;
-		font-size: 1rem;
-	}
-
-	/* Icon padding adjustments - use !important to override size-specific padding */
-	.input-field.input-has-icon-left {
-		padding-left: 2.25rem !important;
-	}
-
-	.input-field.input-has-icon-right {
-		padding-right: 2.25rem !important;
-	}
-
-	/* Error state */
-	.input-error {
+	.input-field-wrapper-error {
 		border-color: rgb(var(--ui-color-error));
 	}
 
-	.input-error:focus-visible {
+	.input-field-wrapper-focused.input-field-wrapper-error {
 		border-color: rgb(var(--ui-color-error));
 		box-shadow: 0 0 0 3px rgb(var(--ui-color-error) / 0.4);
 	}
 
-	:global([data-theme='dark']) .input-error {
+	:global([data-theme='dark']) .input-field-wrapper-error {
 		border-color: rgb(var(--ui-color-error-light));
 	}
 
-	:global([data-theme='dark']) .input-error:focus-visible {
+	:global([data-theme='dark']) .input-field-wrapper-focused.input-field-wrapper-error {
 		border-color: rgb(var(--ui-color-error-light));
 		box-shadow: 0 0 0 3px rgb(var(--ui-color-error-light) / 0.5);
 	}
 
 	@media (prefers-color-scheme: dark) {
-		:global(:root:not([data-theme='light'])) .input-error {
+		:global(:root:not([data-theme='light'])) .input-field-wrapper-error {
 			border-color: rgb(var(--ui-color-error-light));
 		}
 
-		:global(:root:not([data-theme='light'])) .input-error:focus-visible {
+		:global(:root:not([data-theme='light'])) .input-field-wrapper-focused.input-field-wrapper-error {
 			border-color: rgb(var(--ui-color-error-light));
 			box-shadow: 0 0 0 3px rgb(var(--ui-color-error-light) / 0.5);
 		}
 	}
 
-	/* Valid state */
-	.input-valid {
+	.input-field-wrapper-valid {
 		border-color: rgb(var(--ui-color-success));
 	}
 
-	.input-valid:focus-visible {
+	.input-field-wrapper-focused.input-field-wrapper-valid {
 		border-color: rgb(var(--ui-color-success));
 		box-shadow: 0 0 0 3px rgb(var(--ui-color-success) / 0.4);
 	}
 
-	:global([data-theme='dark']) .input-valid {
+	:global([data-theme='dark']) .input-field-wrapper-valid {
 		border-color: rgb(var(--ui-color-success-light));
 	}
 
-	:global([data-theme='dark']) .input-valid:focus-visible {
+	:global([data-theme='dark']) .input-field-wrapper-focused.input-field-wrapper-valid {
 		border-color: rgb(var(--ui-color-success-light));
 		box-shadow: 0 0 0 3px rgb(var(--ui-color-success-light) / 0.5);
 	}
 
 	@media (prefers-color-scheme: dark) {
-		:global(:root:not([data-theme='light'])) .input-valid {
+		:global(:root:not([data-theme='light'])) .input-field-wrapper-valid {
 			border-color: rgb(var(--ui-color-success-light));
 		}
 
-		:global(:root:not([data-theme='light'])) .input-valid:focus-visible {
+		:global(:root:not([data-theme='light'])) .input-field-wrapper-focused.input-field-wrapper-valid {
 			border-color: rgb(var(--ui-color-success-light));
 			box-shadow: 0 0 0 3px rgb(var(--ui-color-success-light) / 0.5);
 		}
 	}
 
+	.input-field-wrapper-disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+		background: var(--ui-bg-tertiary);
+	}
+
+	/* ========================================
+	   PREFIX & SUFFIX (Inside container)
+	   ======================================== */
+	.input-prefix,
+	.input-suffix {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		padding: 0 0.75rem;
+		color: var(--ui-text-tertiary);
+		font-size: 0.875rem;
+		font-weight: 500;
+		white-space: nowrap;
+		pointer-events: none;
+		user-select: none;
+		transition: color 0.2s ease;
+	}
+
+	.input-prefix {
+		padding-right: 0.375rem;
+		border-right: 1px solid var(--ui-border-default);
+		margin-right: 0.5rem;
+	}
+
+	.input-suffix {
+		padding-left: 0.375rem;
+		border-left: 1px solid var(--ui-border-default);
+		margin-left: 0.5rem;
+	}
+
+	.input-prefix-focused,
+	.input-suffix-focused {
+		color: var(--ui-text-secondary);
+	}
+
+	.input-sm .input-prefix,
+	.input-sm .input-suffix {
+		padding: 0 0.5rem;
+		font-size: 0.8125rem;
+	}
+
+	.input-sm .input-prefix {
+		padding-right: 0.25rem;
+		margin-right: 0.375rem;
+	}
+
+	.input-sm .input-suffix {
+		padding-left: 0.25rem;
+		margin-left: 0.375rem;
+	}
+
+	.input-lg .input-prefix,
+	.input-lg .input-suffix {
+		padding: 0 1rem;
+		font-size: 1rem;
+	}
+
+	.input-lg .input-prefix {
+		padding-right: 0.5rem;
+		margin-right: 0.625rem;
+	}
+
+	.input-lg .input-suffix {
+		padding-left: 0.5rem;
+		margin-left: 0.625rem;
+	}
+
+	/* ========================================
+	   INPUT FIELD (Inside unified container)
+	   ======================================== */
+	.input-field {
+		flex: 1;
+		min-width: 0;
+		border: none;
+		border-radius: 0;
+		background: transparent;
+		color: var(--ui-text-primary);
+		outline: none;
+	}
+
+	.input-field::placeholder {
+		color: var(--ui-text-tertiary);
+	}
+
+	.input-field:focus-visible {
+		outline: none;
+	}
+
+	.input-field:disabled {
+		cursor: not-allowed;
+	}
+
+	.input-field:read-only {
+		cursor: default;
+	}
+
+	/* Size variants - now applies to wrapper */
+	.input-sm .input-field-wrapper {
+		min-height: 2rem;
+	}
+
+	.input-md .input-field-wrapper {
+		min-height: 2.5rem;
+	}
+
+	.input-lg .input-field-wrapper {
+		min-height: 3rem;
+	}
+
+	.input-sm .input-field {
+		padding: 0 0.5rem;
+		font-size: 0.875rem;
+	}
+
+	.input-md .input-field {
+		padding: 0 0.625rem;
+		font-size: 0.875rem;
+	}
+
+	.input-lg .input-field {
+		padding: 0 0.75rem;
+		font-size: 1rem;
+	}
+
+	/* Padding adjustments - input is now flex child */
+	.input-field.input-has-prefix {
+		padding-left: 0.25rem !important;
+	}
+
+	.input-field.input-has-suffix {
+		padding-right: 0.25rem !important;
+	}
+
+	.input-field.input-has-icon-left {
+		padding-left: 0.25rem !important;
+	}
+
+	.input-field.input-has-prefix-and-icon {
+		padding-left: 0.25rem !important;
+	}
+
 	/* ========================================
 	   ICONS
 	   ======================================== */
 	.input-icon-left {
-		position: absolute;
-		left: 0.75rem;
-		top: 50%;
-		transform: translateY(-50%);
-		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		padding-left: 0.75rem;
 		pointer-events: none;
 		color: var(--ui-text-tertiary);
 		transition: color 0.2s ease;
@@ -491,14 +1033,25 @@
 		}
 	}
 
+	/* Right content container */
+	.input-right-content {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		flex-shrink: 0;
+		padding-right: 0.5rem;
+	}
+
+	.input-right-content-before-suffix {
+		padding-right: 0;
+	}
+
 	.input-icon-right {
-		position: absolute;
-		right: 0.75rem;
-		top: 50%;
-		transform: translateY(-50%);
-		z-index: 1;
-		pointer-events: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		color: var(--ui-text-tertiary);
+		pointer-events: none;
 	}
 
 	.input-icon-error {
@@ -529,6 +1082,88 @@
 		}
 	}
 
+	/* Loading spinner */
+	.input-icon-loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: rgb(var(--ui-color-primary));
+	}
+
+	:global([data-theme='dark']) .input-icon-loading {
+		color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .input-icon-loading {
+			color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	.input-spinner {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from { transform: rotate(0deg); }
+		to { transform: rotate(360deg); }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.input-spinner {
+			animation: none;
+		}
+	}
+
+	/* ========================================
+	   INTERACTIVE BUTTONS (Clear, Password Toggle)
+	   ======================================== */
+	.input-clear-button,
+	.input-password-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		padding: 0;
+		border: none;
+		border-radius: 0.25rem;
+		background: transparent;
+		color: var(--ui-text-tertiary);
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.input-clear-button:hover,
+	.input-password-toggle:hover {
+		background: var(--ui-bg-tertiary);
+		color: var(--ui-text-primary);
+	}
+
+	.input-clear-button:focus-visible,
+	.input-password-toggle:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px rgb(var(--ui-color-primary) / 0.5);
+	}
+
+	:global([data-theme='dark']) .input-clear-button:focus-visible,
+	:global([data-theme='dark']) .input-password-toggle:focus-visible {
+		box-shadow: 0 0 0 2px rgb(var(--ui-color-primary-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .input-clear-button:focus-visible,
+		:global(:root:not([data-theme='light'])) .input-password-toggle:focus-visible {
+			box-shadow: 0 0 0 2px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	.input-sm .input-clear-button,
+	.input-sm .input-password-toggle {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
 	/* ========================================
 	   FOOTER & MESSAGES
 	   ======================================== */
@@ -548,6 +1183,12 @@
 		animation: slide-in 0.2s ease-out;
 	}
 
+	@media (prefers-reduced-motion: reduce) {
+		.input-message {
+			animation: none;
+		}
+	}
+
 	.input-message-error {
 		color: rgb(var(--ui-color-error));
 	}