@makolabs/ripple 2.1.0 → 2.3.0

package/dist/elements/dropdown/Select.svelte

@@ -23,10 +23,17 @@
 		searchInputClass = '',
 		icon: Icon,
 		iconClass = '',
-		triggerClass = '', // recently, just now
+		triggerClass = '',
+		errors = [],
 		onselect = () => {},
 		onopen = () => {},
 		onclose = () => {},
+		onsearch,
+		debounceMs = 200,
+		minSearchLength = 0,
+		loadingText = 'Loading...',
+		emptyText = 'No items found',
+		itemSnippet,
 		testId
 	}: SelectProps = $props();
 
@@ -35,10 +42,17 @@
 	let labelRef = $state<HTMLLabelElement | null>(null);
 	let searchInputRef = $state<HTMLInputElement | null>(null);
 	let highlightedIndex = $state(-1);
+	let asyncResults = $state<SelectItem[]>([]);
+	let asyncLoading = $state(false);
+	let hasSearched = $state(false);
+	let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+	let searchSeq = 0;
+
+	const isAsync = $derived(!!onsearch);
+	const isSearchable = $derived(searchable || isAsync);
 
 	const selectId = crypto.randomUUID().slice(0, 8);
 
-	// Convert value to array for internal processing if multiple is true
 	const valueArray = $derived.by(() => {
 		if (multiple) {
 			return Array.isArray(value) ? value : value ? [value] : [];
@@ -50,7 +64,8 @@
 		selectTV({
 			size,
 			disabled,
-			multiple
+			multiple,
+			error: !!errors?.length
 		})
 	);
 
@@ -63,25 +78,86 @@
 	const itemClass_ = $derived(cn(item(), itemClass));
 	const emptyMessageClass = $derived(cn(emptyMessage()));
 
-	const selectedItem = $derived(items.find((item) => item.value === value));
-	const selectedItems = $derived(items.filter((item) => valueArray.includes(item.value)));
-
-	const filteredItems = $derived(
-		searchable && searchQuery
-			? items.filter((item) => item.label.toLowerCase().includes(searchQuery.toLowerCase()))
-			: items
+	const selectedItem = $derived(
+		(isAsync ? asyncResults : items).find((i) => i.value === value) ??
+			items.find((i) => i.value === value)
 	);
+	const selectedItems = $derived(items.filter((i) => valueArray.includes(i.value)));
+
+	const filteredItems = $derived.by<SelectItem[]>(() => {
+		if (isAsync) return asyncResults;
+		if (isSearchable && searchQuery) {
+			return items.filter(
+				(i) =>
+					i.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					(i.description ?? '').toLowerCase().includes(searchQuery.toLowerCase())
+			);
+		}
+		return items;
+	});
+
+	const groupedItems = $derived.by(() => {
+		const hasGroups = filteredItems.some((i) => i.group);
+		if (!hasGroups) return null;
+		const groups: Array<{ label: string | null; items: SelectItem[] }> = [];
+		const idxMap: Record<string, number> = {};
+		let nullIdx = -1;
+		for (const i of filteredItems) {
+			const key = i.group;
+			let idx: number;
+			if (!key) {
+				if (nullIdx === -1) {
+					nullIdx = groups.length;
+					groups.push({ label: null, items: [] });
+				}
+				idx = nullIdx;
+			} else {
+				idx = idxMap[key] ?? -1;
+				if (idx === -1) {
+					idx = groups.length;
+					idxMap[key] = idx;
+					groups.push({ label: key, items: [] });
+				}
+			}
+			groups[idx].items.push(i);
+		}
+		return groups;
+	});
+
+	$effect(() => {
+		if (!isAsync || !onsearch || !hasSearched) return;
+		const query = searchQuery;
+		clearTimeout(debounceTimer);
+		if (query.length < minSearchLength) {
+			++searchSeq;
+			asyncResults = [];
+			asyncLoading = false;
+			return;
+		}
+		debounceTimer = setTimeout(async () => {
+			const seq = ++searchSeq;
+			asyncLoading = true;
+			try {
+				const fetched = await onsearch(query);
+				if (seq !== searchSeq) return;
+				asyncResults = fetched;
+			} finally {
+				if (seq === searchSeq) asyncLoading = false;
+			}
+		}, debounceMs);
+		return () => clearTimeout(debounceTimer);
+	});
 
 	function handleToggle() {
 		if (disabled) return;
 		open = !open;
 
 		if (open) {
-			highlightedIndex = !multiple ? filteredItems.findIndex((item) => item.value === value) : -1;
+			highlightedIndex = !multiple ? filteredItems.findIndex((i) => i.value === value) : -1;
 
 			onopen();
 
-			if (searchable) {
+			if (isSearchable) {
 				tick().then(() => {
 					searchInputRef?.focus();
 				});
@@ -89,6 +165,7 @@
 		} else {
 			onclose();
 			searchQuery = '';
+			hasSearched = false;
 		}
 	}
 
@@ -107,7 +184,7 @@
 			}
 
 			// Keep dropdown open when multiple selection is enabled
-			if (searchable && searchInputRef) {
+			if (isSearchable && searchInputRef) {
 				searchInputRef.focus();
 			}
 		} else {
@@ -196,6 +273,69 @@
 	}
 </script>
 
+{#snippet itemButton(
+	selectItem: SelectItem,
+	index: number,
+	selected: boolean,
+	highlighted: boolean
+)}
+	<li>
+		<button
+			type="button"
+			onclick={(event) => {
+				handleSelect(selectItem);
+				event.preventDefault();
+			}}
+			disabled={selectItem.disabled}
+			class={itemClass_}
+			role="option"
+			aria-selected={selected}
+			data-selected={selected}
+			data-highlighted={highlighted}
+			data-index={index}
+			data-testid={buildTestId('select', 'option', testId, index)}
+		>
+			{#if itemSnippet}
+				{@render itemSnippet(selectItem, { highlighted, selected })}
+			{:else}
+				<span class="flex w-full items-center justify-between">
+					<span class="flex items-center gap-2 overflow-hidden">
+						{#if selectItem.icon}
+							{@const ItemIcon = selectItem.icon}
+							<ItemIcon class="h-4 w-4 flex-shrink-0" />
+						{/if}
+						<span class="min-w-0">
+							<span class="block truncate">{selectItem.label}</span>
+							{#if selectItem.description}
+								<span class="text-default-500 block truncate text-xs">
+									{selectItem.description}
+								</span>
+							{/if}
+						</span>
+					</span>
+
+					{#if selected}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="text-info-500 flex-shrink-0"
+						>
+							<polyline points="20 6 9 17 4 12" />
+						</svg>
+					{/if}
+				</span>
+			{/if}
+		</button>
+	</li>
+{/snippet}
+
 <svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
 
 <label
@@ -228,7 +368,7 @@
 				{selectedItem.label}
 			</span>
 		{:else}
-			<span id="{selectId}-label" class="text-default-500 px-1">
+			<span id="{selectId}-label" class="text-default-400 px-1">
 				{placeholder}
 			</span>
 		{/if}
@@ -254,6 +394,12 @@
 	</span>
 </label>
 
+{#if errors?.length}
+	{#each errors as error, i (i)}
+		<p class="text-danger-600 mt-1 text-sm">{error}</p>
+	{/each}
+{/if}
+
 {#if open}
 	<Portal target={labelRef}>
 		<div
@@ -262,7 +408,7 @@
 			aria-labelledby="{selectId}-label"
 			data-testid={buildTestId('select', 'list', testId)}
 		>
-			{#if searchable}
+			{#if isSearchable}
 				<div class={searchInputClass_}>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -280,63 +426,45 @@
 						bind:this={searchInputRef}
 						bind:value={searchQuery}
 						type="text"
-						class="ring-0 outline-0"
+						class="w-full ring-0 outline-0"
 						placeholder="Search..."
 						aria-label="Search select options"
+						oninput={() => (hasSearched = true)}
 						data-testid={buildTestId('select', 'search', testId)}
 					/>
 				</div>
 			{/if}
 
-			{#if filteredItems.length === 0}
-				<div class={emptyMessageClass}>No items found</div>
-			{:else}
+			{#if asyncLoading}
+				<div class={emptyMessageClass} data-select-loading="">{loadingText}</div>
+			{:else if filteredItems.length === 0}
+				<div class={emptyMessageClass}>{emptyText}</div>
+			{:else if groupedItems}
 				<ul class={listClass_}>
-					{#each filteredItems as item, index (item.value)}
-						<li>
-							<button
-								type="button"
-								onclick={(event) => {
-									handleSelect(item);
-									event.preventDefault();
-								}}
-								disabled={item.disabled}
-								class={itemClass_}
-								role="option"
-								aria-selected={valueArray.includes(item.value)}
-								data-selected={valueArray.includes(item.value)}
-								data-highlighted={index === highlightedIndex}
-								data-index={index}
-								data-testid={buildTestId('select', 'option', testId, index)}
+					{#each groupedItems as group, gIdx (group.label ?? `__null__${gIdx}`)}
+						{#if group.label !== null}
+							<li
+								class="text-default-500 bg-default-50 px-3 py-1.5 text-xs font-semibold tracking-wide uppercase"
+								role="presentation"
+								data-select-group={group.label}
 							>
-								<span class="flex w-full items-center justify-between">
-									<span class="flex items-center gap-2 overflow-hidden">
-										{#if item.icon}
-											{@const Icon = item.icon}
-											<Icon class="h-4 w-4 flex-shrink-0" />
-										{/if}
-										<span class="truncate">{item.label}</span>
-									</span>
-
-									{#if valueArray.includes(item.value)}
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											width="16"
-											height="16"
-											viewBox="0 0 24 24"
-											fill="none"
-											stroke="currentColor"
-											stroke-width="2"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											class="text-info-500"
-										>
-											<polyline points="20 6 9 17 4 12" />
-										</svg>
-									{/if}
-								</span>
-							</button>
-						</li>
+								{group.label}
+							</li>
+						{/if}
+						{#each group.items as groupItem (groupItem.value)}
+							{@const flatIdx = filteredItems.indexOf(groupItem)}
+							{@const selected = valueArray.includes(groupItem.value)}
+							{@const highlighted = flatIdx === highlightedIndex}
+							{@render itemButton(groupItem, flatIdx, selected, highlighted)}
+						{/each}
+					{/each}
+				</ul>
+			{:else}
+				<ul class={listClass_}>
+					{#each filteredItems as flatItem, index (flatItem.value)}
+						{@const selected = valueArray.includes(flatItem.value)}
+						{@const highlighted = index === highlightedIndex}
+						{@render itemButton(flatItem, index, selected, highlighted)}
 					{/each}
 				</ul>
 			{/if}

package/dist/elements/dropdown/dropdown-types.d.ts

@@ -41,9 +41,11 @@ export type SelectItem = {
     value: string;
     disabled?: boolean;
     icon?: Component;
+    description?: string;
+    group?: string;
 };
 export type SelectProps = {
-    items: SelectItem[];
+    items?: SelectItem[];
     value?: string | string[];
     multiple?: boolean;
     placeholder?: string;
@@ -59,10 +61,20 @@ export type SelectProps = {
     clearable?: boolean;
     icon?: Component;
     iconClass?: ClassValue;
+    errors?: string[];
     onselect?: ({ value }: {
         value: string | string[];
     }) => void;
     onopen?: () => void;
     onclose?: () => void;
     testId?: string;
+    onsearch?: (query: string) => SelectItem[] | Promise<SelectItem[]>;
+    debounceMs?: number;
+    minSearchLength?: number;
+    loadingText?: string;
+    emptyText?: string;
+    itemSnippet?: Snippet<[SelectItem, {
+        highlighted: boolean;
+        selected: boolean;
+    }]>;
 };

package/dist/elements/dropdown/select.d.ts

@@ -50,6 +50,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    error: {
+        true: {
+            trigger: string;
+        };
+    };
     multiple: {
         true: {
             trigger: string;
@@ -116,6 +121,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    error: {
+        true: {
+            trigger: string;
+        };
+    };
     multiple: {
         true: {
             trigger: string;
@@ -182,6 +192,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    error: {
+        true: {
+            trigger: string;
+        };
+    };
     multiple: {
         true: {
             trigger: string;

package/dist/elements/dropdown/select.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 import { Size } from '../../variants.js';
 export const selectTV = tv({
     slots: {
-        base: '',
+        base: 'w-full',
         trigger: `relative flex items-center justify-between w-full text-left bg-white border
 			border-default-300 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:border-primary-500 focus-within:ring-primary-500 rounded-lg shadow-xs cursor-pointer transition-colors hover:border-default-400`,
         triggerIcon: 'transition-transform duration-200 text-default-500',
@@ -23,42 +23,42 @@ export const selectTV = tv({
                 triggerIcon: 'h-3 w-3',
                 container: 'max-h-40',
                 item: 'px-2 py-1 text-xs',
-                base: 'w-24'
+                base: 'min-w-24'
             },
             [Size.SM]: {
                 trigger: 'h-8 px-3 py-2 text-sm gap-1.5',
                 triggerIcon: 'h-3.5 w-3.5',
                 container: 'max-h-48',
                 item: 'px-2.5 py-1.5 text-xs',
-                base: 'w-32'
+                base: 'min-w-32'
             },
             [Size.BASE]: {
                 trigger: 'h-10 px-3 py-2 text-base gap-2',
                 triggerIcon: 'h-4 w-4',
                 container: 'max-h-60',
                 item: 'px-3 py-2 text-sm',
-                base: 'w-40'
+                base: 'min-w-40'
             },
             [Size.LG]: {
                 trigger: 'h-12 px-3 py-2 text-lg gap-2.5',
                 triggerIcon: 'h-5 w-5',
                 container: 'max-h-72',
                 item: 'px-4 py-2.5 text-base',
-                base: 'w-48'
+                base: 'min-w-48'
             },
             [Size.XL]: {
                 trigger: 'h-12 px-5 py-3 text-lg gap-3',
                 triggerIcon: 'h-6 w-6',
                 container: 'max-h-80',
                 item: 'px-5 py-3 text-lg',
-                base: 'w-56'
+                base: 'min-w-56'
             },
             [Size.XXL]: {
                 trigger: 'h-14 px-6 py-3.5 text-xl gap-4',
                 triggerIcon: 'h-7 w-7',
                 container: 'max-h-96',
                 item: 'px-6 py-3.5 text-xl',
-                base: 'w-64'
+                base: 'min-w-64'
             }
         },
         disabled: {
@@ -68,6 +68,11 @@ export const selectTV = tv({
                 item: 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent'
             }
         },
+        error: {
+            true: {
+                trigger: 'border-danger-300 focus-within:ring-danger-500 focus-within:border-danger-500'
+            }
+        },
         multiple: {
             true: {
                 trigger: 'flex-wrap min-h-[2.5rem]'
@@ -77,6 +82,7 @@ export const selectTV = tv({
     defaultVariants: {
         size: 'base',
         disabled: false,
-        multiple: false
+        multiple: false,
+        error: false
     }
 });

package/dist/forms/DateRange.svelte

@@ -14,6 +14,7 @@
 		startLabel = 'Start date',
 		endLabel = 'End date',
 		format = 'MM/dd/yyyy',
+		errors = [],
 		id,
 		name,
 		onselect
@@ -236,14 +237,18 @@
 			{id}
 			type="button"
 			class={cn(
-				'border-default-300 flex w-full items-center justify-between rounded-md border bg-white px-3 py-2 text-sm shadow-sm',
+				'border-default-300 flex w-full items-center justify-between rounded-lg border bg-white px-3 py-2 text-sm shadow-xs',
 				disabled
-					? 'bg-default-100 text-default-400 cursor-not-allowed'
-					: 'focus:border-primary-500 focus:ring-primary-500 hover:border-default-400 focus:ring-2'
+					? 'bg-default-100 text-default-400 cursor-not-allowed opacity-50'
+					: errors?.length
+						? 'border-danger-300 focus-within:ring-danger-500 focus-within:border-danger-500 focus-within:ring-2'
+						: 'focus-visible:border-primary-500 focus-visible:ring-primary-500 hover:border-default-400 focus-visible:ring-2'
 			)}
 			onclick={toggleDatepicker}
 			aria-haspopup="true"
 			aria-expanded={isOpen}
+			aria-invalid={errors?.length ? 'true' : undefined}
+			aria-describedby={errors?.length ? `${id}-errors` : undefined}
 			{disabled}
 		>
 			<span class={startDate && endDate ? 'text-default-900' : 'text-default-500'}>
@@ -280,6 +285,14 @@
 		{/if}
 	</div>
 
+	{#if errors?.length}
+		<div id="{id}-errors">
+			{#each errors as error, i (i)}
+				<p class="text-danger-600 mt-1 text-sm">{error}</p>
+			{/each}
+		</div>
+	{/if}
+
 	{#if isOpen}
 		<Portal target={datePickerRef}>
 			<div

package/dist/forms/Input.svelte

@@ -22,12 +22,13 @@
 	const BASIC_TYPES = ['text', 'email', 'password', 'number', 'tel', 'url', 'date', 'textarea'];
 	const inputClasses = $derived(
 		cn(
-			'transition-colors',
+			'transition-colors placeholder:text-default-400',
 			{
-				'border rounded-lg shadow-xs w-full bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2':
+				'border rounded-lg shadow-xs w-full bg-white px-3 py-2 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2':
 					BASIC_TYPES.includes(type),
 				'w-full bg-white px-3 py-2 text-sm resize-y min-h-[100px]': type === 'textarea',
-				'border-danger-300 focus:border-danger-500 focus:ring-danger-500': errors.length,
+				'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500':
+					errors.length,
 				'opacity-50 cursor-not-allowed': disabled,
 				...(BASIC_TYPES.includes(type)
 					? {
@@ -36,7 +37,8 @@
 							'h-12 text-lg': size === Size.LG
 						}
 					: {}),
-				'border-default-300 focus:border-primary-500 focus:ring-primary-500': !errors.length
+				'border-default-300 focus-within:border-primary-500 focus-within:ring-primary-500':
+					!errors.length
 			},
 			className
 		)

package/dist/forms/MarketSelector.svelte

@@ -14,14 +14,12 @@
 		name = '',
 		showFlags = true,
 		label = '',
-		variant = undefined,
-		collapsed = false,
 		appearance = 'surface',
 		orientation = 'horizontal',
-		labelLayout = undefined,
+		labelLayout = 'inline',
 		labelClass = undefined,
 		color = Color.PRIMARY,
-		size = Size.BASE,
+		size = Size.SM,
 		compact = false,
 		disabled = false,
 		class: className = '',
@@ -29,24 +27,6 @@
 		testId
 	}: MarketSelectorProps = $props();
 
-	const resolvedAppearance = $derived.by(() => {
-		if (variant === 'default') return 'clarkDefault';
-		if (variant === 'sidebar') return 'clarkSidebar';
-		return appearance;
-	});
-
-	const resolvedLabelLayout = $derived(labelLayout ?? (variant !== undefined ? 'inline' : 'above'));
-
-	const resolvedOrientation = $derived(
-		variant === 'sidebar' && collapsed ? 'vertical' : orientation
-	);
-
-	const resolvedCompact = $derived(variant === 'sidebar' && collapsed ? true : compact);
-
-	const resolvedLabelClass = $derived(
-		labelClass ?? (variant === 'sidebar' && collapsed && label ? 'sr-only' : undefined)
-	);
-
 	const options = $derived.by((): SegmentedOption[] => {
 		return markets.map((code) => ({
 			value: code,
@@ -77,13 +57,13 @@
 		{options}
 		{name}
 		{label}
-		appearance={resolvedAppearance}
-		orientation={resolvedOrientation}
-		labelLayout={resolvedLabelLayout}
-		labelClass={resolvedLabelClass}
+		{appearance}
+		{orientation}
+		{labelLayout}
+		{labelClass}
 		{color}
 		{size}
-		compact={resolvedCompact}
+		{compact}
 		{disabled}
 		{testId}
 		onchange={handleChange}

package/dist/forms/NumberInput.svelte

@@ -28,7 +28,7 @@
 
 	const containerClass = $derived(
 		cn(
-			'relative flex items-center gap-1 rounded-lg border bg-white shadow-sm',
+			'relative flex items-center gap-1 rounded-lg border bg-white shadow-xs',
 			{
 				'border-danger-300': errors?.length,
 				'cursor-not-allowed opacity-50': disabled
@@ -44,11 +44,14 @@
 	);
 
 	const inputClass = $derived(
-		cn('w-full bg-transparent outline-none disabled:cursor-not-allowed px-3', {
-			'text-sm': size === Size.SM,
-			'text-base': size === Size.BASE,
-			'text-lg': size === Size.LG
-		})
+		cn(
+			'w-full bg-transparent outline-none disabled:cursor-not-allowed px-3 placeholder:text-default-400',
+			{
+				'text-sm': size === Size.SM,
+				'text-base': size === Size.BASE,
+				'text-lg': size === Size.LG
+			}
+		)
 	);
 
 	const dropdownClass = cn(