@aspect-ops/exon-ui 0.0.3 → 0.2.0

package/dist/components/SearchInput/SearchInput.svelte

@@ -0,0 +1,480 @@
+<script lang="ts">
+	import type { InputSize } from '../../types/index.js';
+
+	interface Props {
+		value?: string;
+		placeholder?: string;
+		suggestions?: string[];
+		size?: InputSize;
+		disabled?: boolean;
+		loading?: boolean;
+		maxSuggestions?: number;
+		class?: string;
+		oninput?: (e: Event & { currentTarget: HTMLInputElement }) => void;
+		onchange?: (e: Event & { currentTarget: HTMLInputElement }) => void;
+		onselect?: (value: string) => void;
+		onclear?: () => void;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Search...',
+		suggestions = [],
+		size = 'md',
+		disabled = false,
+		loading = false,
+		maxSuggestions = 5,
+		class: className = '',
+		oninput,
+		onchange,
+		onselect,
+		onclear
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let highlightedIndex = $state(-1);
+	let inputRef: HTMLInputElement;
+	let dropdownRef = $state<HTMLDivElement>();
+
+	// Filter and limit suggestions
+	const filteredSuggestions = $derived(() => {
+		if (!value.trim() || !suggestions.length) return [];
+		const filtered = suggestions.filter((suggestion) =>
+			suggestion.toLowerCase().includes(value.toLowerCase())
+		);
+		return filtered.slice(0, maxSuggestions);
+	});
+
+	const hasSuggestions = $derived(filteredSuggestions().length > 0);
+	const showClearButton = $derived(value.length > 0 && !disabled);
+	const showDropdown = $derived(isOpen && hasSuggestions && !disabled);
+
+	// Handle input changes
+	function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+		value = e.currentTarget.value;
+		isOpen = true;
+		highlightedIndex = -1;
+		oninput?.(e);
+	}
+
+	// Handle clear button click
+	function handleClear() {
+		value = '';
+		isOpen = false;
+		highlightedIndex = -1;
+		inputRef?.focus();
+		onclear?.();
+	}
+
+	// Handle suggestion selection
+	function selectSuggestion(suggestion: string) {
+		value = suggestion;
+		isOpen = false;
+		highlightedIndex = -1;
+		onselect?.(suggestion);
+	}
+
+	// Handle keyboard navigation
+	function handleKeyDown(e: KeyboardEvent) {
+		const suggestions = filteredSuggestions();
+
+		if (!suggestions.length) return;
+
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				highlightedIndex = Math.min(highlightedIndex + 1, suggestions.length - 1);
+				isOpen = true;
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				highlightedIndex = Math.max(highlightedIndex - 1, -1);
+				break;
+			case 'Enter':
+				e.preventDefault();
+				if (highlightedIndex >= 0 && highlightedIndex < suggestions.length) {
+					selectSuggestion(suggestions[highlightedIndex]);
+				}
+				break;
+			case 'Escape':
+				e.preventDefault();
+				isOpen = false;
+				highlightedIndex = -1;
+				inputRef?.blur();
+				break;
+		}
+	}
+
+	// Handle click outside to close dropdown
+	function handleClickOutside(e: MouseEvent) {
+		const target = e.target as Node;
+		if (inputRef && !inputRef.contains(target) && dropdownRef && !dropdownRef.contains(target)) {
+			isOpen = false;
+			highlightedIndex = -1;
+		}
+	}
+
+	// Highlight matching text in suggestions
+	function highlightMatch(text: string, query: string): string {
+		if (!query) return text;
+		const regex = new RegExp(`(${query})`, 'gi');
+		return text.replace(regex, '<mark>$1</mark>');
+	}
+
+	$effect(() => {
+		if (showDropdown) {
+			document.addEventListener('click', handleClickOutside);
+			return () => {
+				document.removeEventListener('click', handleClickOutside);
+			};
+		}
+	});
+</script>
+
+<div
+	class="search-input search-input--{size} {disabled ? 'search-input--disabled' : ''} {className}"
+>
+	<div class="search-input__wrapper">
+		<!-- Search Icon -->
+		<span class="search-input__icon search-input__icon--search" aria-hidden="true">
+			<svg
+				width="20"
+				height="20"
+				viewBox="0 0 20 20"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM18 18l-4.35-4.35"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</span>
+
+		<!-- Input Field -->
+		<input
+			bind:this={inputRef}
+			type="search"
+			class="search-input__field"
+			bind:value
+			{placeholder}
+			{disabled}
+			role="combobox"
+			aria-autocomplete="list"
+			aria-expanded={showDropdown}
+			aria-controls="search-suggestions"
+			aria-activedescendant={highlightedIndex >= 0 ? `suggestion-${highlightedIndex}` : undefined}
+			oninput={handleInput}
+			{onchange}
+			onkeydown={handleKeyDown}
+			onfocus={() => {
+				if (value && filteredSuggestions().length > 0) {
+					isOpen = true;
+				}
+			}}
+		/>
+
+		<!-- Loading Spinner -->
+		{#if loading}
+			<span class="search-input__icon search-input__icon--trailing" aria-hidden="true">
+				<svg
+					class="search-input__spinner"
+					width="20"
+					height="20"
+					viewBox="0 0 20 20"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<circle
+						cx="10"
+						cy="10"
+						r="8"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-dasharray="40 40"
+						stroke-dashoffset="0"
+					/>
+				</svg>
+			</span>
+		{/if}
+
+		<!-- Clear Button -->
+		{#if showClearButton && !loading}
+			<button
+				type="button"
+				class="search-input__clear"
+				aria-label="Clear search"
+				onclick={handleClear}
+			>
+				<svg
+					width="20"
+					height="20"
+					viewBox="0 0 20 20"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M15 5L5 15M5 5l10 10"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Suggestions Dropdown -->
+	{#if showDropdown}
+		<div
+			bind:this={dropdownRef}
+			class="search-input__suggestions"
+			id="search-suggestions"
+			role="listbox"
+		>
+			{#each filteredSuggestions() as suggestion, index}
+				<button
+					type="button"
+					class="search-input__suggestion"
+					class:search-input__suggestion--highlighted={index === highlightedIndex}
+					id="suggestion-{index}"
+					role="option"
+					aria-selected={index === highlightedIndex}
+					onclick={() => selectSuggestion(suggestion)}
+					onmouseenter={() => {
+						highlightedIndex = index;
+					}}
+				>
+					{@html highlightMatch(suggestion, value)}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.search-input {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.search-input--disabled {
+		opacity: 0.5;
+	}
+
+	.search-input__wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+
+	.search-input__field {
+		width: 100%;
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		padding-left: calc(var(--space-md, 1rem) * 2 + 1.25rem);
+		padding-right: calc(var(--space-md, 1rem) * 2 + 1.25rem);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.search-input__field::placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.search-input__field:focus {
+		outline: none;
+		border-color: var(--color-primary, #3b82f6);
+		box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+	}
+
+	.search-input__field:disabled {
+		background: var(--color-bg-muted, #f3f4f6);
+		cursor: not-allowed;
+	}
+
+	/* Remove default search input clear button */
+	.search-input__field::-webkit-search-cancel-button {
+		display: none;
+	}
+
+	/* Sizes */
+	.search-input--sm .search-input__field {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		padding-left: calc(var(--space-sm, 0.5rem) * 2 + 1.25rem);
+		padding-right: calc(var(--space-sm, 0.5rem) * 2 + 1.25rem);
+		font-size: var(--text-xs, 0.75rem);
+	}
+
+	.search-input--md .search-input__field {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		padding-left: calc(var(--space-md, 1rem) * 2 + 1.25rem);
+		padding-right: calc(var(--space-md, 1rem) * 2 + 1.25rem);
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.search-input--lg .search-input__field {
+		min-height: 3.25rem;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+		padding-left: calc(var(--space-lg, 1.5rem) * 2 + 1.5rem);
+		padding-right: calc(var(--space-lg, 1.5rem) * 2 + 1.5rem);
+		font-size: var(--text-base, 1rem);
+	}
+
+	/* Icons */
+	.search-input__icon {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-text-muted, #6b7280);
+		pointer-events: none;
+	}
+
+	.search-input__icon--search {
+		left: var(--space-md, 1rem);
+	}
+
+	.search-input__icon--trailing {
+		right: var(--space-md, 1rem);
+	}
+
+	.search-input--sm .search-input__icon--search {
+		left: var(--space-sm, 0.5rem);
+	}
+
+	.search-input--sm .search-input__icon--trailing {
+		right: var(--space-sm, 0.5rem);
+	}
+
+	.search-input--lg .search-input__icon--search {
+		left: var(--space-lg, 1.5rem);
+	}
+
+	.search-input--lg .search-input__icon--trailing {
+		right: var(--space-lg, 1.5rem);
+	}
+
+	/* Loading Spinner */
+	.search-input__spinner {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Clear Button */
+	.search-input__clear {
+		position: absolute;
+		right: var(--space-md, 1rem);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: var(--color-text-muted, #6b7280);
+		cursor: pointer;
+		transition: color var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.search-input__clear:hover {
+		color: var(--color-text, #1f2937);
+	}
+
+	.search-input__clear:focus {
+		outline: none;
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.search-input--sm .search-input__clear {
+		right: var(--space-sm, 0.5rem);
+	}
+
+	.search-input--lg .search-input__clear {
+		right: var(--space-lg, 1.5rem);
+	}
+
+	/* Suggestions Dropdown */
+	.search-input__suggestions {
+		position: absolute;
+		top: calc(100% + var(--space-xs, 0.25rem));
+		left: 0;
+		right: 0;
+		z-index: var(--z-dropdown, 100);
+		max-height: 300px;
+		overflow-y: auto;
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg-elevated, #ffffff);
+		box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+	}
+
+	.search-input__suggestion {
+		display: block;
+		width: 100%;
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border: none;
+		background: transparent;
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		text-align: left;
+		cursor: pointer;
+		transition: background-color var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.search-input__suggestion:hover,
+	.search-input__suggestion--highlighted {
+		background: var(--color-bg-hover, #f3f4f6);
+	}
+
+	.search-input__suggestion:active {
+		background: var(--color-bg-active, #e5e7eb);
+	}
+
+	/* Highlight matched text */
+	.search-input__suggestion :global(mark) {
+		background: var(--color-primary-bg, #e6f4fe);
+		color: var(--color-primary, #3b82f6);
+		font-weight: var(--font-medium, 500);
+	}
+
+	/* Mobile optimizations */
+	@media (max-width: 640px) {
+		.search-input__suggestions {
+			max-height: 200px;
+		}
+	}
+</style>

package/dist/components/SearchInput/SearchInput.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { InputSize } from '../../types/index.js';
+interface Props {
+    value?: string;
+    placeholder?: string;
+    suggestions?: string[];
+    size?: InputSize;
+    disabled?: boolean;
+    loading?: boolean;
+    maxSuggestions?: number;
+    class?: string;
+    oninput?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    onchange?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    onselect?: (value: string) => void;
+    onclear?: () => void;
+}
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/SearchInput/index.d.ts

@@ -0,0 +1 @@
+export { default as SearchInput } from './SearchInput.svelte';

package/dist/components/SearchInput/index.js

@@ -0,0 +1 @@
+export { default as SearchInput } from './SearchInput.svelte';