@makolabs/ripple 2.2.0 → 2.4.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/elements/file-upload/FileUpload.svelte

@@ -40,6 +40,8 @@
 	const dropzoneEnabled = $derived(!disabled && !dropzoneFull);
 
 	let isDragging = $state(false);
+	let truncationMessage = $state('');
+	let truncationTimer: ReturnType<typeof setTimeout> | undefined;
 	let inputRef: HTMLInputElement;
 
 	function makeId(): string {
@@ -60,6 +62,18 @@
 		// Multi-file mode: cap and stage
 		const room = Math.max(0, maxFiles - files.length);
 		const accepted = arr.slice(0, room);
+		const dropped = arr.length - accepted.length;
+
+		if (dropped > 0) {
+			clearTimeout(truncationTimer);
+			truncationMessage = `${dropped} file${dropped > 1 ? 's' : ''} could not be added — maximum of ${maxFiles} reached.`;
+			truncationTimer = setTimeout(() => {
+				truncationMessage = '';
+			}, 5000);
+		} else {
+			truncationMessage = '';
+		}
+
 		const toAdd: StagedFile[] = accepted.map((file) => ({
 			id: makeId(),
 			file,
@@ -70,10 +84,12 @@
 
 	function handleRemove(fileId: string) {
 		files = files.filter((f) => f.id !== fileId);
+		truncationMessage = '';
 	}
 
 	function handleClearAll() {
 		files = [];
+		truncationMessage = '';
 	}
 
 	const readyCount = $derived(files.filter((f) => !f.status || f.status === 'ready').length);
@@ -167,6 +183,7 @@
 		ondragover={handleDragOver}
 		ondrop={handleDrop}
 		for={id}
+		data-dropzone-full={dropzoneFull ? 'true' : undefined}
 	>
 		<input
 			type="file"
@@ -190,34 +207,75 @@
 			</div>
 
 			<div class={slots.textBlock()}>
-				{#if !uploadContent}
+				{#if dropzoneFull}
+					<div class={slots.mainText()}>
+						<span class="text-default-500 font-medium">Maximum of {maxFiles} files reached.</span>
+					</div>
+					<div class={slots.hintText()}>Remove a file to add more.</div>
+				{:else if !uploadContent}
 					<div class={slots.mainText()}>
 						<span class="text-primary-500 font-medium">Click here</span>
 						<span class="text-default-600"> to upload your file or drag and drop.</span>
 					</div>
+					<div class={slots.hintText()}>
+						Supported Format: {allowedMimeTypes.length
+							? allowedMimeTypes.join(', ')
+							: 'SVG, JPG, PNG'}
+						{#if maxSize}
+							({formatFileSize(maxSize)} each)
+						{:else}
+							(10MB each)
+						{/if}
+					</div>
 				{:else}
 					{@render uploadContent()}
+					<div class={slots.hintText()}>
+						Supported Format: {allowedMimeTypes.length
+							? allowedMimeTypes.join(', ')
+							: 'SVG, JPG, PNG'}
+						{#if maxSize}
+							({formatFileSize(maxSize)} each)
+						{:else}
+							(10MB each)
+						{/if}
+					</div>
 				{/if}
-
-				<div class={slots.hintText()}>
-					Supported Format: {allowedMimeTypes.length
-						? allowedMimeTypes.join(', ')
-						: 'SVG, JPG, PNG'}
-					{#if maxSize}
-						({formatFileSize(maxSize)} each)
-					{:else}
-						(10MB each)
-					{/if}
-				</div>
 			</div>
 		</div>
 	</label>
 
+	{#if truncationMessage}
+		<div
+			class="text-warning-700 bg-warning-50 border-warning-200 flex items-center gap-2 rounded-lg border px-3 py-2 text-xs"
+			data-fileupload-truncation-warning=""
+		>
+			<svg
+				class="text-warning-500 size-4 shrink-0"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+				/>
+			</svg>
+			{truncationMessage}
+		</div>
+	{/if}
+
 	{#if isMulti && hasAnyFile}
 		<div class="flex flex-col gap-2">
 			<div class="flex items-center justify-between">
-				<span class="text-default-700 text-sm font-medium">
-					{filesListLabel} ({files.length})
+				<span
+					class={cn('text-sm font-medium', dropzoneFull ? 'text-warning-600' : 'text-default-700')}
+				>
+					{filesListLabel} ({files.length}/{maxFiles})
+					{#if dropzoneFull}
+						<span class="text-warning-500 ml-1 text-xs font-normal">— full</span>
+					{/if}
 				</span>
 				<div class="flex gap-2">
 					<Button

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