@synthaxai/ui 1.0.0

package/dist/forms/TextInput/TextInput.svelte

@@ -0,0 +1,628 @@
+<!--
+  @component TextInput
+  
+  A fully accessible text input component with validation states,
+  icons, character counting, and comprehensive ARIA support.
+  
+  Designed for healthcare applications with proper error handling
+  and clear visual feedback.
+  
+  @example
+  <TextInput
+    id="patient-name"
+    label="Patient Name"
+    value={patientName}
+    oninput={(e) => patientName = e.target.value}
+    required
+  />
+  
+  @example
+  <TextInput
+    id="member-id"
+    label="Member ID"
+    value={memberId}
+    error={memberIdError}
+    hint="Enter your insurance member ID"
+    oninput={(e) => handleInput(e)}
+  />
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { Check, AlertCircle, Info } from 'lucide-svelte';
+	import { cn } from '../../utils/cn.js';
+	import { generateId } from '../../utils/keyboard.js';
+	import type { InputMode, AutoComplete } from '../../types/index.js';
+
+	type InputSize = 'sm' | 'md' | 'lg';
+	type InputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';
+
+	interface Props extends Omit<HTMLInputAttributes, 'class' | 'size'> {
+		/** Unique identifier for the input */
+		id?: string;
+		/** Form field name */
+		name?: string;
+		/** Input type */
+		type?: InputType;
+		/** Label text for the input */
+		label: string;
+		/** Current value */
+		value?: string;
+		/** Placeholder text */
+		placeholder?: string;
+		/** Whether the field is required */
+		required?: boolean;
+		/** Whether the field is disabled */
+		disabled?: boolean;
+		/** Whether the field is read-only */
+		readonly?: boolean;
+		/** Error message to display */
+		error?: string;
+		/** Hint text to display below the input */
+		hint?: string;
+		/** Success message when valid */
+		successMessage?: string;
+		/** Maximum character length */
+		maxLength?: number;
+		/** Minimum character length */
+		minLength?: number;
+		/** Whether to show character count */
+		showCharCount?: boolean;
+		/** Pattern for validation (regex) */
+		pattern?: string;
+		/** Input mode for mobile keyboards */
+		inputMode?: InputMode;
+		/** Autocomplete value */
+		autocomplete?: AutoComplete;
+		/** Size of the input */
+		size?: InputSize;
+		/** Icon to display on the left */
+		iconLeft?: Snippet;
+		/** Icon to display on the right (for custom icons) */
+		iconRight?: Snippet;
+		/** Whether to hide the label visually (still accessible) */
+		hideLabel?: boolean;
+		/** Additional CSS classes for the wrapper */
+		class?: string;
+		/** Format function to transform input value */
+		formatFn?: (value: string) => string;
+		/** Input handler */
+		oninput?: (event: Event) => void;
+		/** Blur handler */
+		onblur?: (event: FocusEvent) => void;
+		/** Focus handler */
+		onfocus?: (event: FocusEvent) => void;
+		/** Test ID for e2e testing (Playwright, Cypress) */
+		testId?: string;
+		/** Show validation state immediately without waiting for interaction */
+		validateOnMount?: boolean;
+	}
+
+	let {
+		id = generateId('input'),
+		name,
+		type = 'text',
+		label,
+		value = '',
+		placeholder = '',
+		required = false,
+		disabled = false,
+		readonly = false,
+		error = '',
+		hint = '',
+		successMessage = '',
+		maxLength,
+		minLength,
+		showCharCount = false,
+		pattern,
+		inputMode = 'text',
+		autocomplete = 'off',
+		size = 'md',
+		iconLeft,
+		iconRight,
+		hideLabel = false,
+		class: className = '',
+		formatFn,
+		oninput,
+		onblur,
+		onfocus,
+		testId,
+		validateOnMount = false,
+		...restProps
+	}: Props = $props();
+
+	// Internal state
+	let isFocused = $state(false);
+	let hasInteracted = $state(false);
+
+	// Derived states
+	// Validation shows: after interaction OR if validateOnMount is enabled
+	const shouldValidate = $derived(hasInteracted || validateOnMount);
+	const showError = $derived(shouldValidate && !!error);
+	const showSuccess = $derived(shouldValidate && !error && !!value && !!successMessage);
+	const isValid = $derived(shouldValidate && !error && !!value && !!successMessage);
+	const errorId = $derived(`${id}-error`);
+	const hintId = $derived(`${id}-hint`);
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		let newValue = target.value;
+
+		if (formatFn) {
+			newValue = formatFn(newValue);
+			target.value = newValue;
+		}
+
+		oninput?.(e);
+	}
+
+	function handleBlur(e: FocusEvent) {
+		isFocused = false;
+		hasInteracted = true;
+		onblur?.(e);
+	}
+
+	function handleFocus(e: FocusEvent) {
+		isFocused = true;
+		onfocus?.(e);
+	}
+
+	// Build aria-describedby
+	const ariaDescribedBy = $derived(
+		[error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+	);
+</script>
+
+<div class={cn('input-wrapper', `input-${size}`, disabled && 'input-disabled', className)}>
+	<!-- Label -->
+	<label for={id} class={cn('input-label', hideLabel && 'sr-only')}>
+		{label}
+		{#if required}
+			<span class="input-required" aria-hidden="true">*</span>
+		{/if}
+		{#if hint && !hideLabel}
+			<span class="input-hint-icon" title={hint}>
+				<Info size={14} />
+			</span>
+		{/if}
+	</label>
+
+	<!-- Input wrapper -->
+	<div class="input-field-wrapper">
+		{#if iconLeft}
+			<span class={cn('input-icon-left', isFocused && 'input-icon-focused')} aria-hidden="true">
+				{@render iconLeft()}
+			</span>
+		{/if}
+
+		<input
+			{id}
+			{name}
+			{type}
+			{value}
+			{placeholder}
+			{disabled}
+			{readonly}
+			{required}
+			{pattern}
+			maxlength={maxLength}
+			minlength={minLength}
+			inputmode={inputMode}
+			{autocomplete}
+			aria-invalid={showError}
+			aria-describedby={ariaDescribedBy}
+			aria-required={required}
+			data-testid={testId}
+			class={cn(
+				'input-field',
+				iconLeft && 'input-has-icon-left',
+				(iconRight || showError || isValid) && 'input-has-icon-right',
+				showError && 'input-error',
+				isValid && 'input-valid'
+			)}
+			oninput={handleInput}
+			onblur={handleBlur}
+			onfocus={handleFocus}
+			{...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()}
+			</span>
+		{/if}
+	</div>
+
+	<!-- Footer messages -->
+	<div class="input-footer">
+		<div class="input-messages">
+			{#if showError}
+				<p id={errorId} class="input-message input-message-error" role="alert" aria-live="assertive">
+					{error}
+				</p>
+			{:else if showSuccess}
+				<p class="input-message input-message-success">
+					{successMessage}
+				</p>
+			{:else if hint && isFocused}
+				<p id={hintId} class="input-message input-message-hint">
+					{hint}
+				</p>
+			{/if}
+		</div>
+
+		{#if showCharCount && maxLength}
+			<span class={cn('input-char-count', value.length > maxLength * 0.9 && 'input-char-count-warning')}>
+				{value.length}/{maxLength}
+			</span>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* ========================================
+	   BASE WRAPPER
+	   ======================================== */
+	.input-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.input-disabled {
+		opacity: 0.6;
+	}
+
+	/* ========================================
+	   LABEL
+	   ======================================== */
+	.input-label {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-weight: 500;
+		color: var(--ui-text-primary);
+	}
+
+	.input-sm .input-label {
+		font-size: 0.75rem;
+	}
+
+	.input-md .input-label,
+	.input-lg .input-label {
+		font-size: 0.875rem;
+	}
+
+	.input-required {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .input-required {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .input-required {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.input-hint-icon {
+		color: var(--ui-text-tertiary);
+		cursor: help;
+	}
+
+	/* ========================================
+	   FIELD WRAPPER
+	   ======================================== */
+	.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;
+		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 {
+		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 {
+			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 {
+		border-color: rgb(var(--ui-color-error));
+	}
+
+	.input-error:focus-visible {
+		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 {
+		border-color: rgb(var(--ui-color-error-light));
+	}
+
+	:global([data-theme='dark']) .input-error:focus-visible {
+		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 {
+			border-color: rgb(var(--ui-color-error-light));
+		}
+
+		:global(:root:not([data-theme='light'])) .input-error:focus-visible {
+			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 {
+		border-color: rgb(var(--ui-color-success));
+	}
+
+	.input-valid:focus-visible {
+		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 {
+		border-color: rgb(var(--ui-color-success-light));
+	}
+
+	:global([data-theme='dark']) .input-valid:focus-visible {
+		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 {
+			border-color: rgb(var(--ui-color-success-light));
+		}
+
+		:global(:root:not([data-theme='light'])) .input-valid:focus-visible {
+			border-color: rgb(var(--ui-color-success-light));
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-success-light) / 0.5);
+		}
+	}
+
+	/* ========================================
+	   ICONS
+	   ======================================== */
+	.input-icon-left {
+		position: absolute;
+		left: 0.75rem;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 1;
+		pointer-events: none;
+		color: var(--ui-text-tertiary);
+		transition: color 0.2s ease;
+	}
+
+	.input-icon-focused {
+		color: rgb(var(--ui-color-primary));
+	}
+
+	:global([data-theme='dark']) .input-icon-focused {
+		color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .input-icon-focused {
+			color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	.input-icon-right {
+		position: absolute;
+		right: 0.75rem;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 1;
+		pointer-events: none;
+		color: var(--ui-text-tertiary);
+	}
+
+	.input-icon-error {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .input-icon-error {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .input-icon-error {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.input-icon-success {
+		color: rgb(var(--ui-color-success));
+	}
+
+	:global([data-theme='dark']) .input-icon-success {
+		color: rgb(var(--ui-color-success-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .input-icon-success {
+			color: rgb(var(--ui-color-success-light));
+		}
+	}
+
+	/* ========================================
+	   FOOTER & MESSAGES
+	   ======================================== */
+	.input-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		min-height: 1.25rem;
+	}
+
+	.input-messages {
+		flex: 1;
+	}
+
+	.input-message {
+		font-size: 0.75rem;
+		animation: slide-in 0.2s ease-out;
+	}
+
+	.input-message-error {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .input-message-error {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .input-message-error {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.input-message-success {
+		color: rgb(var(--ui-color-success));
+	}
+
+	:global([data-theme='dark']) .input-message-success {
+		color: rgb(var(--ui-color-success-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .input-message-success {
+			color: rgb(var(--ui-color-success-light));
+		}
+	}
+
+	.input-message-hint {
+		color: var(--ui-text-tertiary);
+	}
+
+	.input-char-count {
+		font-size: 0.75rem;
+		margin-left: 0.5rem;
+		color: var(--ui-text-tertiary);
+	}
+
+	.input-char-count-warning {
+		color: rgb(var(--ui-color-warning));
+	}
+
+	:global([data-theme='dark']) .input-char-count-warning {
+		color: rgb(var(--ui-color-warning-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .input-char-count-warning {
+			color: rgb(var(--ui-color-warning-light));
+		}
+	}
+
+	/* ========================================
+	   UTILITIES
+	   ======================================== */
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	@keyframes slide-in {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>

package/dist/forms/TextInput/TextInput.svelte.d.ts

@@ -0,0 +1,97 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { InputMode, AutoComplete } from '../../types/index.js';
+type InputSize = 'sm' | 'md' | 'lg';
+type InputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';
+interface Props extends Omit<HTMLInputAttributes, 'class' | 'size'> {
+    /** Unique identifier for the input */
+    id?: string;
+    /** Form field name */
+    name?: string;
+    /** Input type */
+    type?: InputType;
+    /** Label text for the input */
+    label: string;
+    /** Current value */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readonly?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Hint text to display below the input */
+    hint?: string;
+    /** Success message when valid */
+    successMessage?: string;
+    /** Maximum character length */
+    maxLength?: number;
+    /** Minimum character length */
+    minLength?: number;
+    /** Whether to show character count */
+    showCharCount?: boolean;
+    /** Pattern for validation (regex) */
+    pattern?: string;
+    /** Input mode for mobile keyboards */
+    inputMode?: InputMode;
+    /** Autocomplete value */
+    autocomplete?: AutoComplete;
+    /** Size of the input */
+    size?: InputSize;
+    /** Icon to display on the left */
+    iconLeft?: Snippet;
+    /** Icon to display on the right (for custom icons) */
+    iconRight?: Snippet;
+    /** Whether to hide the label visually (still accessible) */
+    hideLabel?: boolean;
+    /** Additional CSS classes for the wrapper */
+    class?: string;
+    /** Format function to transform input value */
+    formatFn?: (value: string) => string;
+    /** Input handler */
+    oninput?: (event: Event) => void;
+    /** Blur handler */
+    onblur?: (event: FocusEvent) => void;
+    /** Focus handler */
+    onfocus?: (event: FocusEvent) => void;
+    /** Test ID for e2e testing (Playwright, Cypress) */
+    testId?: string;
+    /** Show validation state immediately without waiting for interaction */
+    validateOnMount?: boolean;
+}
+/**
+ * TextInput
+ *
+ * A fully accessible text input component with validation states,
+ * icons, character counting, and comprehensive ARIA support.
+ *
+ * Designed for healthcare applications with proper error handling
+ * and clear visual feedback.
+ *
+ * @example
+ * <TextInput
+ *   id="patient-name"
+ *   label="Patient Name"
+ *   value={patientName}
+ *   oninput={(e) => patientName = e.target.value}
+ *   required
+ * />
+ *
+ * @example
+ * <TextInput
+ *   id="member-id"
+ *   label="Member ID"
+ *   value={memberId}
+ *   error={memberIdError}
+ *   hint="Enter your insurance member ID"
+ *   oninput={(e) => handleInput(e)}
+ * />
+ */
+declare const TextInput: import("svelte").Component<Props, {}, "">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;
+//# sourceMappingURL=TextInput.svelte.d.ts.map