mertani-web-toolkit 0.1.48 → 0.1.50

package/dist/components/inputs/TextInputSuggestion/TextInputSuggestion.css

@@ -0,0 +1,326 @@
+.input-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.input-container.input-side {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.input-label {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text-primary);
+  margin-bottom: 4px;
+  display: block;
+}
+
+.input-container.input-side .input-label {
+  margin-bottom: 0;
+  min-width: 120px;
+}
+
+.input-label.label-left {
+  text-align: left;
+}
+
+.input-label.label-right {
+  text-align: right;
+}
+
+.label-subLabel {
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+  margin-left: 4px;
+}
+
+.label-required {
+  color: var(--color-text-error-ti);
+  margin-left: 4px;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  border: 1px solid var(--color-border-form);
+  border-radius: 6px;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.input-wrapper:has(input:disabled) {
+  background: var(--color-bg-disabled);
+  border-color: var(--color-border-disabled);
+}
+
+.input-wrapper.input-loading {
+  cursor: wait;
+}
+
+.input-wrapper.input-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.input-wrapper.input-error {
+  border-color: var(--color-text-error-ti);
+}
+
+.search-by-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid var(--color-border-form);
+  background: var(--color-bg-disabled);
+  flex-shrink: 0;
+  border-radius: 6px 0 0 6px;
+}
+
+.search-by-trigger {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  padding: 0 10px;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search-by-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.search-by-label {
+  white-space: nowrap;
+}
+
+.search-by-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  min-width: 140px;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-form);
+  border-radius: 4px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  z-index: 99999;
+}
+
+.search-by-item {
+  width: 100%;
+  padding: 10px 12px;
+  text-align: left;
+  background: transparent;
+  border: none;
+  font-size: 13px;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+.search-by-item + .search-by-item {
+  border-top: 1px solid color-mix(in srgb, var(--color-border-form) 45%, transparent);
+}
+
+.search-by-item:hover,
+.search-by-item.active {
+  background: var(--color-bg-disabled);
+}
+
+.prefix-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 0.625rem 0.75rem;
+  background: var(--color-bg-disabled);
+  border-right: 1px solid var(--color-border-form);
+  flex-shrink: 0;
+}
+
+.prefix-text {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+.suffix-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 0.625rem 0.75rem;
+  background: var(--color-bg-disabled);
+  border-left: 1px solid var(--color-border-form);
+  flex-shrink: 0;
+}
+
+.suffix-text {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+.input-field {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0.625rem 1rem;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  width: 100%;
+}
+
+.input-wrapper:has(.prefix-wrapper) .input-field {
+  padding-left: 0.75rem;
+}
+
+.input-wrapper:has(.suffix-wrapper) .input-field {
+  padding-right: 0.75rem;
+}
+
+.input-wrapper:has(.input-icon-right):not(:has(.suffix-wrapper)) .input-field {
+  padding-right: 2.5rem;
+}
+
+.input-wrapper:has(.input-loader.input-icon-right):not(:has(.suffix-wrapper)) .input-field {
+  padding-right: 2.5rem;
+}
+
+.input-wrapper:has(.input-icon-left):not(:has(.prefix-wrapper)) .input-field {
+  padding-left: 2.5rem;
+}
+
+.input-wrapper:has(.input-loader.input-icon-left):not(:has(.prefix-wrapper)) .input-field {
+  padding-left: 2.5rem;
+}
+
+.input-field:disabled {
+  cursor: not-allowed;
+}
+
+.input-field::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.input-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.input-icon-left {
+  left: 12px;
+}
+
+.input-icon-right {
+  right: 12px;
+}
+
+.input-loader {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.input-loader.input-icon-left {
+  left: 12px;
+}
+
+.input-loader.input-icon-right {
+  right: 12px;
+}
+
+.loader-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-right-color: currentColor;
+  border-radius: 50%;
+  animation: spinner-rotate 0.8s linear infinite;
+}
+
+@keyframes spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.error-message {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-text-error-ti);
+}
+
+.suggestions-menu {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 4px);
+  z-index: 20;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-form);
+  border-radius: 6px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.suggestion-item {
+  width: 100%;
+  padding: 8px 12px;
+  text-align: left;
+  background: transparent;
+  border: none;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  cursor: pointer;
+}
+
+.suggestion-item:hover,
+.suggestion-item.active {
+  background: var(--color-bg-disabled);
+}
+
+.suggestion-empty {
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--color-text-tertiary);
+}
+
+.suggestion-loading {
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--color-text-tertiary);
+}

package/dist/components/inputs/TextInputSuggestion/TextInputSuggestion.svelte

@@ -0,0 +1,612 @@
+<script lang="ts">
+	import { Icon } from '../../../index.js';
+	import type { TIconName } from '../../../icons/index.js';
+	import './TextInputSuggestion.css';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type SuggestionOption =
+		| string
+		| {
+				label: string;
+				id?: string | number;
+				value?: string;
+				detail?: unknown;
+		  };
+	type SearchByOption = {
+		label: string;
+		value: string;
+	};
+
+	interface Props extends HTMLInputAttributes {
+		// ===Styles===
+		// Label
+		labelColor?: string;
+		aligment?: 'side' | 'top';
+		position?: 'left' | 'right';
+
+		// Field
+		size?: 48 | 40 | 32;
+		backgroundColor?: string;
+		borderColor?: string;
+		accentColor?: string;
+		textColor?: string;
+		errorColor?: string;
+		icon?: TIconName;
+		iconColor?: string;
+		iconPosition?: 'left' | 'right';
+		borderRadius?: number;
+		boxShadow?: string;
+
+		// ===Properties===
+		// Data
+		id?: string;
+		label?: string;
+		subLabel?: string;
+		placeholder?: string;
+		value?: string;
+		prefix?: string;
+		suffix?: string;
+
+		// Suggestions
+		suggestions?: SuggestionOption[];
+		searchByOptions?: SearchByOption[];
+		searchBy?: string;
+		minChars?: number;
+		maxSuggestions?: number;
+		showSuggestionsOnFocus?: boolean;
+		emptyMessage?: string;
+		closeOnSelect?: boolean;
+		loadingSuggestions?: boolean;
+
+		// Events
+		onSelectSuggestion?: (value: string, option: SuggestionOption) => void;
+		onclick?: (event: MouseEvent) => void;
+		oninput?: (event: Event) => void;
+		onchange?: (event: Event) => void;
+		onfocus?: (event: FocusEvent) => void;
+		onblur?: (event: FocusEvent) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+
+		// Validation
+		isMandatory?: boolean;
+		regex?: RegExp;
+		minLength?: number;
+		maxLength?: number;
+		customValidation?: (value: string) => string | null;
+
+		// Additional Actions
+		isLoading?: boolean;
+		isShow?: boolean;
+		disabled?: boolean;
+		readOnly?: boolean;
+		tooltip?: string;
+
+		// Any
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		// ===Styles===
+		// Label
+		labelColor = 'var(--color-text-primary)',
+		aligment = 'top',
+		position = 'left',
+
+		// Field
+		size = 40,
+		backgroundColor = 'var(--color-bg-surface)',
+		borderColor = 'var(--color-border-form)',
+		accentColor = 'var(--color-bg-act-primary)',
+		textColor = 'var(--color-text-primary)',
+		errorColor = 'var(--color-text-error-ti)',
+		icon,
+		iconColor = 'var(--color-text-primary)',
+		iconPosition = 'right',
+		borderRadius,
+		boxShadow = '',
+
+		// ===Properties===
+		// Data
+		id = '',
+		label = '',
+		subLabel = '',
+		placeholder = '',
+		value = $bindable(''),
+		prefix = '',
+		suffix = '',
+
+		// Suggestions
+		suggestions = [],
+		searchByOptions = [],
+		searchBy = $bindable(''),
+		minChars = 1,
+		maxSuggestions = 8,
+		showSuggestionsOnFocus = true,
+		emptyMessage = 'Tidak ada hasil',
+		closeOnSelect = true,
+		loadingSuggestions = false,
+
+		// Events
+		onSelectSuggestion,
+		onclick,
+		oninput,
+		onchange,
+		onfocus,
+		onblur,
+		onkeydown,
+
+		// Validation
+		isMandatory = false,
+		regex,
+		minLength,
+		maxLength,
+		customValidation,
+
+		// Additional Actions
+		isLoading = false,
+		isShow = true,
+		disabled = false,
+		readOnly = false,
+		tooltip = '',
+
+		class: className = '',
+		style: customStyle = '',
+		...props
+	}: Props = $props();
+
+	let inputValue = $state(value);
+	let errorMessage = $state('');
+	let isFocused = $state(false);
+	let showList = $state(false);
+	let activeIndex = $state(-1);
+	let wrapperEl: HTMLDivElement | null = $state(null);
+	let searchByValue = $state(searchBy);
+	let searchByOpen = $state(false);
+
+	$effect(() => {
+		inputValue = value;
+	});
+
+	$effect(() => {
+		searchByValue = searchBy;
+	});
+
+	$effect(() => {
+		if (!searchByValue && searchByOptions.length) {
+			searchByValue = searchByOptions[0].value;
+			searchBy = searchByValue;
+		}
+	});
+
+	const sizeConfig = $derived(() => {
+		switch (size) {
+			case 48:
+				return {
+					height: '48px',
+					labelFontSize: '16px',
+					inputFontSize: '16px',
+					borderRadius: 8,
+					padding: '8px 12px'
+				};
+			case 40:
+				return {
+					height: '40px',
+					labelFontSize: '14px',
+					inputFontSize: '16px',
+					borderRadius: 8,
+					padding: '6px 12px'
+				};
+			case 32:
+				return {
+					height: '32px',
+					labelFontSize: '14px',
+					inputFontSize: '14px',
+					borderRadius: 6,
+					padding: '6px 12px'
+				};
+			default:
+				return {
+					height: '40px',
+					labelFontSize: '14px',
+					inputFontSize: '16px',
+					borderRadius: 8,
+					padding: '6px 12px'
+				};
+		}
+	});
+
+	const wrapperStyles = $derived(() => {
+		const styles: string[] = [];
+		styles.push(`height: ${sizeConfig().height};`);
+
+		if (borderColor) {
+			styles.push(`border-color: ${borderColor};`);
+		}
+
+		const radius = borderRadius || sizeConfig().borderRadius;
+		styles.push(`border-radius: ${radius}px;`);
+
+		if (boxShadow) {
+			styles.push(`box-shadow: ${boxShadow};`);
+		}
+
+		if (isFocused && accentColor) {
+			styles.push(`border-color: ${accentColor};`);
+			styles.push(`box-shadow: 0 0 0 2px ${accentColor}40;`);
+		}
+
+		if (errorMessage && errorColor) {
+			styles.push(`border-color: ${errorColor};`);
+		}
+
+		if (disabled) {
+			styles.push(`background: var(--color-bg-disabled);`);
+		} else if (backgroundColor) {
+			styles.push(`background: ${backgroundColor};`);
+		}
+
+		if (customStyle) {
+			styles.push(customStyle);
+		}
+
+		return styles.join(' ');
+	});
+
+	const prefixStyles = $derived(() => {
+		const radius = borderRadius || sizeConfig().borderRadius;
+		return `border-radius: ${radius}px 0 0 ${radius}px;`;
+	});
+
+	const suffixStyles = $derived(() => {
+		const radius = borderRadius || sizeConfig().borderRadius;
+		return `border-radius: 0 ${radius}px ${radius}px 0;`;
+	});
+
+	const inputStyles = $derived(() => {
+		const styles: string[] = [];
+		styles.push(`font-size: ${sizeConfig().inputFontSize};`);
+		styles.push(`padding: ${sizeConfig().padding};`);
+
+		if (textColor) {
+			styles.push(`color: ${textColor};`);
+		}
+
+		return styles.join(' ');
+	});
+
+	const labelStyles = $derived(() => {
+		const styles: string[] = [];
+		styles.push(`font-size: ${sizeConfig().labelFontSize};`);
+
+		if (labelColor) {
+			styles.push(`color: ${labelColor};`);
+		}
+
+		return styles.join(' ');
+	});
+
+	const wrapperClasses = $derived(() => {
+		const classes = ['input-wrapper'];
+
+		if (isLoading) {
+			classes.push('input-loading');
+		}
+
+		if (disabled) {
+			classes.push('input-disabled');
+		}
+
+		if (errorMessage) {
+			classes.push('input-error');
+		}
+
+		if (className) {
+			classes.push(className);
+		}
+
+		return classes.join(' ');
+	});
+
+	function normalizeSuggestion(option: SuggestionOption) {
+		if (typeof option === 'string') {
+			return { label: option, value: option, raw: option };
+		}
+		const val = option.value ?? option.label;
+		return { label: option.label, value: val, raw: option };
+	}
+
+	const filteredSuggestions = $derived(() => {
+		const normalized = suggestions.map(normalizeSuggestion);
+		const query = inputValue.trim().toLowerCase();
+
+		if (query.length < minChars && !(showSuggestionsOnFocus && isFocused && minChars === 0)) {
+			return [];
+		}
+
+		const result = query
+			? normalized.filter((item) => item.label.toLowerCase().includes(query))
+			: normalized;
+		return result.slice(0, maxSuggestions);
+	});
+
+	const shouldShowEmpty = $derived(() => {
+		const query = inputValue.trim();
+		if (!showList) return false;
+		if (query.length < minChars && !(showSuggestionsOnFocus && isFocused && minChars === 0))
+			return false;
+		return !loadingSuggestions && suggestions.length > 0 && filteredSuggestions().length === 0;
+	});
+
+	function openSuggestions() {
+		if (disabled || isLoading) return;
+		showList = true;
+	}
+
+	function closeSuggestions() {
+		showList = false;
+		activeIndex = -1;
+	}
+
+	function validateInput(value: string): string {
+		if (customValidation) {
+			const customError = customValidation(value);
+			if (customError) {
+				return customError;
+			}
+		}
+
+		if (isMandatory && !value.trim()) {
+			return 'Field ini wajib diisi';
+		}
+
+		if (minLength !== undefined && value.length < minLength) {
+			return `Minimal ${minLength} karakter`;
+		}
+
+		if (maxLength !== undefined && value.length > maxLength) {
+			return `Maksimal ${maxLength} karakter`;
+		}
+
+		if (regex && value && !regex.test(value)) {
+			return 'Format tidak valid';
+		}
+
+		return '';
+	}
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		const nextValue = target.value;
+		inputValue = nextValue;
+		// keep parent in sync
+		value = inputValue;
+		errorMessage = validateInput(nextValue);
+		openSuggestions();
+		oninput?.(e);
+	}
+
+	function handleSearchByChange(e: Event) {
+		const target = e.target as HTMLSelectElement;
+		searchByValue = target.value;
+		searchBy = target.value;
+	}
+
+	function selectSearchBy(option: SearchByOption) {
+		searchByValue = option.value;
+		searchBy = option.value;
+		searchByOpen = false;
+	}
+
+	function getSearchByLabel() {
+		const current = searchByOptions.find((opt) => opt.value === searchByValue);
+		return current?.label || 'Search';
+	}
+
+	function handleChange(e: Event) {
+		const target = e.target as HTMLInputElement;
+		const value = target.value;
+		errorMessage = validateInput(value);
+		onchange?.(e);
+	}
+
+	function handleFocus(e: FocusEvent) {
+		isFocused = true;
+		if (showSuggestionsOnFocus) {
+			openSuggestions();
+		}
+		onfocus?.(e);
+	}
+
+	function handleBlur(e: FocusEvent) {
+		isFocused = false;
+		const target = e.target as HTMLInputElement;
+		errorMessage = validateInput(target.value);
+		onblur?.(e);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		const list = filteredSuggestions();
+		if (list.length > 0) {
+			if (e.key === 'ArrowDown') {
+				e.preventDefault();
+				openSuggestions();
+				activeIndex = Math.min(activeIndex + 1, list.length - 1);
+			} else if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				openSuggestions();
+				activeIndex = Math.max(activeIndex - 1, 0);
+			} else if (e.key === 'Enter' && showList && activeIndex >= 0) {
+				e.preventDefault();
+				selectSuggestion(list[activeIndex]);
+			} else if (e.key === 'Escape') {
+				closeSuggestions();
+			}
+		}
+		onkeydown?.(e);
+	}
+
+	function handleClick(e: MouseEvent) {
+		if (!disabled && !isLoading && onclick) {
+			onclick(e);
+		}
+	}
+
+	function selectSuggestion(item: { label: string; value: string; raw: SuggestionOption }) {
+		inputValue = item.value;
+		value = item.value;
+		onSelectSuggestion?.(item.value, item.raw);
+		if (closeOnSelect) {
+			closeSuggestions();
+		}
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		if (wrapperEl && !wrapperEl.contains(e.target as Node)) {
+			closeSuggestions();
+			searchByOpen = false;
+		}
+	}
+
+	$effect(() => {
+		if (showList) {
+			setTimeout(() => document.addEventListener('click', handleClickOutside), 10);
+		} else {
+			document.removeEventListener('click', handleClickOutside);
+		}
+		return () => document.removeEventListener('click', handleClickOutside);
+	});
+</script>
+
+{#if isShow}
+	<div class="input-container" class:input-side={aligment === 'side'}>
+		{#if label}
+			<label
+				for={id}
+				class="input-label"
+				class:label-left={position === 'left'}
+				class:label-right={position === 'right'}
+				style={labelStyles()}
+			>
+				{label}
+				{#if subLabel}
+					<span class="label-subLabel">{subLabel}</span>
+				{/if}
+				{#if isMandatory}
+					<span class="label-required">*</span>
+				{/if}
+			</label>
+		{/if}
+		<div class={wrapperClasses()} style={wrapperStyles()} bind:this={wrapperEl}>
+			{#if searchByOptions.length}
+				<div class="search-by-wrapper">
+					<button
+						type="button"
+						class="search-by-trigger"
+						onclick={() => !disabled && !isLoading && (searchByOpen = !searchByOpen)}
+						disabled={disabled || isLoading}
+					>
+						<span class="search-by-label">{getSearchByLabel()}</span>
+						<Icon
+							name="bs-chevron-down"
+							style="transform-origin: center; transition: transform 0.25s; transform: rotate({searchByOpen
+								? '180deg'
+								: '0deg'});"
+						/>
+					</button>
+					{#if searchByOpen}
+						<div class="search-by-menu">
+							{#each searchByOptions as option (option.value)}
+								<button
+									type="button"
+									class="search-by-item"
+									class:active={option.value === searchByValue}
+									onmousedown={(e) => {
+										e.preventDefault();
+										selectSearchBy(option);
+									}}
+								>
+									{option.label}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
+			{#if prefix}
+				<div class="prefix-wrapper" style={prefixStyles()}>
+					<span class="prefix-text">{prefix}</span>
+				</div>
+			{/if}
+			{#if isLoading && iconPosition === 'left'}
+				<div class="input-loader input-icon-left">
+					<span class="loader-spinner"></span>
+				</div>
+			{:else if icon && iconPosition === 'left' && !prefix}
+				<div class="input-icon input-icon-left">
+					<Icon name={icon} color={iconColor || 'currentColor'} width={16} height={16} />
+				</div>
+			{/if}
+			<input
+				{id}
+				class="input-field"
+				style={inputStyles()}
+				value={inputValue}
+				{placeholder}
+				disabled={disabled || isLoading}
+				readonly={readOnly}
+				oninput={handleInput}
+				onchange={handleChange}
+				onfocus={handleFocus}
+				onblur={handleBlur}
+				onkeydown={handleKeyDown}
+				onclick={handleClick}
+				title={tooltip || ''}
+				{...props}
+			/>
+			{#if isLoading && iconPosition === 'right'}
+				<div class="input-loader input-icon-right">
+					<span class="loader-spinner"></span>
+				</div>
+			{:else if icon && iconPosition === 'right' && !suffix}
+				<div class="input-icon input-icon-right">
+					<Icon name={icon} color={iconColor || 'currentColor'} width={16} height={16} />
+				</div>
+			{/if}
+			{#if suffix}
+				<div class="suffix-wrapper" style={suffixStyles()}>
+					<span class="suffix-text">{suffix}</span>
+				</div>
+			{/if}
+
+			{#if showList}
+				<div class="suggestions-menu">
+					{#if loadingSuggestions}
+						<div class="suggestion-loading">Loading...</div>
+					{:else if filteredSuggestions().length}
+						{#each filteredSuggestions() as item, index (item.value)}
+							<button
+								type="button"
+								class="suggestion-item"
+								class:active={index === activeIndex}
+								onmousedown={(e) => {
+									e.preventDefault();
+									selectSuggestion(item);
+								}}
+							>
+								{item.label}
+							</button>
+						{/each}
+					{:else if shouldShowEmpty()}
+						<div class="suggestion-empty">{emptyMessage}</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+		{#if errorMessage}
+			<p class="error-message" style={errorColor ? `color: ${errorColor};` : ''}>
+				{errorMessage}
+			</p>
+		{/if}
+	</div>
+{/if}

package/dist/components/inputs/TextInputSuggestion/TextInputSuggestion.svelte.d.ts

@@ -0,0 +1,67 @@
+import type { TIconName } from '../../../icons/index.js';
+import './TextInputSuggestion.css';
+import type { HTMLInputAttributes } from 'svelte/elements';
+type SuggestionOption = string | {
+    label: string;
+    id?: string | number;
+    value?: string;
+    detail?: unknown;
+};
+type SearchByOption = {
+    label: string;
+    value: string;
+};
+interface Props extends HTMLInputAttributes {
+    labelColor?: string;
+    aligment?: 'side' | 'top';
+    position?: 'left' | 'right';
+    size?: 48 | 40 | 32;
+    backgroundColor?: string;
+    borderColor?: string;
+    accentColor?: string;
+    textColor?: string;
+    errorColor?: string;
+    icon?: TIconName;
+    iconColor?: string;
+    iconPosition?: 'left' | 'right';
+    borderRadius?: number;
+    boxShadow?: string;
+    id?: string;
+    label?: string;
+    subLabel?: string;
+    placeholder?: string;
+    value?: string;
+    prefix?: string;
+    suffix?: string;
+    suggestions?: SuggestionOption[];
+    searchByOptions?: SearchByOption[];
+    searchBy?: string;
+    minChars?: number;
+    maxSuggestions?: number;
+    showSuggestionsOnFocus?: boolean;
+    emptyMessage?: string;
+    closeOnSelect?: boolean;
+    loadingSuggestions?: boolean;
+    onSelectSuggestion?: (value: string, option: SuggestionOption) => void;
+    onclick?: (event: MouseEvent) => void;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    isMandatory?: boolean;
+    regex?: RegExp;
+    minLength?: number;
+    maxLength?: number;
+    customValidation?: (value: string) => string | null;
+    isLoading?: boolean;
+    isShow?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    tooltip?: string;
+    class?: string;
+    style?: string;
+}
+declare const TextInputSuggestion: import("svelte").Component<Props, {}, "value" | "searchBy">;
+type TextInputSuggestion = ReturnType<typeof TextInputSuggestion>;
+export default TextInputSuggestion;

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as TextInput } from './components/inputs/TextInput/TextInput.svelte';
+export { default as TextInputSuggestion } from './components/inputs/TextInputSuggestion/TextInputSuggestion.svelte';
 export { default as TextareaInput } from './components/inputs/TextareaInput/TextareaInput.svelte';
 export { default as SelectInput } from './components/inputs/SelectInput/SelectInput.svelte';
 export { default as MultiSelectInput } from './components/inputs/MultiSelectInput/MultiSelectInput.svelte';
+export type { IMultiSelectOption } from './components/inputs/MultiSelectInput/MultiSelectInput.ts';
 export { default as Radio } from './components/inputs/Radio/Radio.svelte';
 export { default as Toggle } from './components/inputs/Toggle/Toggle.svelte';
 export { default as Segmented } from './components/inputs/Segmented/Segmented.svelte';

package/dist/index.js

@@ -2,6 +2,7 @@
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as TextInput } from './components/inputs/TextInput/TextInput.svelte';
+export { default as TextInputSuggestion } from './components/inputs/TextInputSuggestion/TextInputSuggestion.svelte';
 export { default as TextareaInput } from './components/inputs/TextareaInput/TextareaInput.svelte';
 export { default as SelectInput } from './components/inputs/SelectInput/SelectInput.svelte';
 export { default as MultiSelectInput } from './components/inputs/MultiSelectInput/MultiSelectInput.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.48",
+	"version": "0.1.50",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",