ui-svelte 0.2.11 → 0.2.12

package/dist/navigation/css/tabs.css

@@ -19,95 +19,289 @@
 				@apply flex-col;
 			}
 		}
+
 		.tabs-list {
 			@apply flex w-auto max-w-min overflow-x-auto scrollbar-hide gap-2 p-1 relative select-none;
+
+			.tab {
+				@apply flex flex-nowrap cursor-pointer px-4 py-1 relative transition-colors;
+				.tabs-icon {
+					@apply mr-2 shrink-0 h-6 w-auto;
+				}
+				.tabs-label {
+					@apply whitespace-nowrap;
+				}
+			}
+		}
+
+		.tabs-list.is-solid {
+			@apply rounded-xl py-1;
+			.tab {
+				@apply rounded-lg;
+			}
 			&.is-primary {
-				@apply bg-primary/10 text-on-surface rounded-xl py-1;
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative rounded-lg transition-colors;
-					&.on-active {
-						@apply bg-primary text-on-primary;
-					}
+				@apply bg-primary/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-primary text-on-primary;
 				}
 			}
 			&.is-secondary {
-				@apply bg-secondary/10 text-on-surface rounded-xl py-1;
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative rounded-lg transition-colors;
-					&.on-active {
-						@apply bg-secondary text-on-secondary;
-					}
+				@apply bg-secondary/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-secondary text-on-secondary;
 				}
 			}
 			&.is-muted {
-				@apply bg-muted text-on-muted rounded-xl py-1;
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative rounded-lg transition-colors;
-					&.on-active {
-						@apply bg-on-muted text-muted;
-					}
+				@apply bg-muted text-on-muted;
+				.tab.on-active {
+					@apply bg-on-muted text-muted;
 				}
 			}
-			&.is-outline {
-				@apply border border-muted rounded-xl;
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative rounded-lg transition-colors;
-					&.on-active {
-						@apply bg-primary text-on-primary;
-					}
+			&.is-success {
+				@apply bg-success/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-success text-on-success;
 				}
 			}
-			&.is-line {
-				@apply gap-4;
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative;
-					&.on-active {
-						@apply text-primary border-b-2 border-primary;
-					}
+			&.is-info {
+				@apply bg-info/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-info text-on-info;
 				}
 			}
-			&.is-ghost {
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative;
-					&.on-active {
-						@apply text-primary;
-					}
+			&.is-warning {
+				@apply bg-warning/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-warning text-on-warning;
 				}
 			}
+			&.is-danger {
+				@apply bg-danger/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-danger text-on-danger;
+				}
+			}
+		}
+
+		.tabs-list.is-outline {
+			@apply border border-muted rounded-xl;
 			.tab {
-				.tabs-icon {
-					@apply mr-2 shrink-0 h-6 w-auto;
+				@apply rounded-lg;
+			}
+			&.is-primary {
+				.tab.on-active {
+					@apply bg-primary text-on-primary;
 				}
-				.tabs-label {
-					@apply whitespace-nowrap;
+			}
+			&.is-secondary {
+				.tab.on-active {
+					@apply bg-secondary text-on-secondary;
+				}
+			}
+			&.is-muted {
+				.tab.on-active {
+					@apply bg-on-muted text-muted;
+				}
+			}
+			&.is-success {
+				.tab.on-active {
+					@apply bg-success text-on-success;
+				}
+			}
+			&.is-info {
+				.tab.on-active {
+					@apply bg-info text-on-info;
+				}
+			}
+			&.is-warning {
+				.tab.on-active {
+					@apply bg-warning text-on-warning;
+				}
+			}
+			&.is-danger {
+				.tab.on-active {
+					@apply bg-danger text-on-danger;
 				}
 			}
 		}
-		&.is-top,
-		&.is-bottom {
-			.tabs-list {
-				&.is-pill:not(.is-line) {
-					@apply rounded-full;
-					.tab {
-						@apply rounded-full;
-					}
+
+		.tabs-list.is-line {
+			@apply gap-4;
+			&.is-primary {
+				.tab.on-active {
+					@apply text-primary border-b-2 border-primary;
+				}
+			}
+			&.is-secondary {
+				.tab.on-active {
+					@apply text-secondary border-b-2 border-secondary;
+				}
+			}
+			&.is-muted {
+				.tab.on-active {
+					@apply text-on-muted border-b-2 border-on-muted;
+				}
+			}
+			&.is-success {
+				.tab.on-active {
+					@apply text-success border-b-2 border-success;
+				}
+			}
+			&.is-info {
+				.tab.on-active {
+					@apply text-info border-b-2 border-info;
+				}
+			}
+			&.is-warning {
+				.tab.on-active {
+					@apply text-warning border-b-2 border-warning;
+				}
+			}
+			&.is-danger {
+				.tab.on-active {
+					@apply text-danger border-b-2 border-danger;
+				}
+			}
+		}
+
+		.tabs-list.is-ghost {
+			&.is-primary {
+				.tab.on-active {
+					@apply text-primary;
+				}
+			}
+			&.is-secondary {
+				.tab.on-active {
+					@apply text-secondary;
+				}
+			}
+			&.is-muted {
+				.tab.on-active {
+					@apply text-on-muted;
+				}
+			}
+			&.is-success {
+				.tab.on-active {
+					@apply text-success;
+				}
+			}
+			&.is-info {
+				.tab.on-active {
+					@apply text-info;
+				}
+			}
+			&.is-warning {
+				.tab.on-active {
+					@apply text-warning;
+				}
+			}
+			&.is-danger {
+				.tab.on-active {
+					@apply text-danger;
+				}
+			}
+		}
+
+		.tabs-list.is-pills {
+			@apply rounded-full py-1;
+			.tab {
+				@apply rounded-full;
+			}
+			&.is-primary {
+				@apply bg-primary/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-primary text-on-primary;
+				}
+			}
+			&.is-secondary {
+				@apply bg-secondary/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-secondary text-on-secondary;
+				}
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+				.tab.on-active {
+					@apply bg-on-muted text-muted;
+				}
+			}
+			&.is-success {
+				@apply bg-success/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-success text-on-success;
+				}
+			}
+			&.is-info {
+				@apply bg-info/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-info text-on-info;
+				}
+			}
+			&.is-warning {
+				@apply bg-warning/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-warning text-on-warning;
+				}
+			}
+			&.is-danger {
+				@apply bg-danger/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-danger text-on-danger;
 				}
 			}
 		}
+
 		&.is-start {
 			.tabs-list.is-line {
-				.tab.on-active {
+				&.is-primary .tab.on-active {
 					@apply border-b-0 border-l-2 border-primary;
 				}
+				&.is-secondary .tab.on-active {
+					@apply border-b-0 border-l-2 border-secondary;
+				}
+				&.is-muted .tab.on-active {
+					@apply border-b-0 border-l-2 border-on-muted;
+				}
+				&.is-success .tab.on-active {
+					@apply border-b-0 border-l-2 border-success;
+				}
+				&.is-info .tab.on-active {
+					@apply border-b-0 border-l-2 border-info;
+				}
+				&.is-warning .tab.on-active {
+					@apply border-b-0 border-l-2 border-warning;
+				}
+				&.is-danger .tab.on-active {
+					@apply border-b-0 border-l-2 border-danger;
+				}
 			}
 		}
 		&.is-end {
 			.tabs-list.is-line {
-				.tab.on-active {
+				&.is-primary .tab.on-active {
 					@apply border-b-0 border-r-2 border-primary;
 				}
+				&.is-secondary .tab.on-active {
+					@apply border-b-0 border-r-2 border-secondary;
+				}
+				&.is-muted .tab.on-active {
+					@apply border-b-0 border-r-2 border-on-muted;
+				}
+				&.is-success .tab.on-active {
+					@apply border-b-0 border-r-2 border-success;
+				}
+				&.is-info .tab.on-active {
+					@apply border-b-0 border-r-2 border-info;
+				}
+				&.is-warning .tab.on-active {
+					@apply border-b-0 border-r-2 border-warning;
+				}
+				&.is-danger .tab.on-active {
+					@apply border-b-0 border-r-2 border-danger;
+				}
 			}
 		}
+
 		.tabs-wrapper {
 			@apply flex flex-1 overflow-hidden relative;
 			.tabs-content {

package/dist/overlay/Command.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+	import type { SearchState, SearchOption } from '../hooks/use-search.svelte.js';
+	import { Search24RegularIcon, DotsMoveIcon } from '../icons/index.js';
+	import { Icon, Item, type IconData } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import { popover } from '../utils/popover.js';
+	import { tick } from 'svelte';
+	import { fade, scale } from 'svelte/transition';
+
+	type CommandGroup = {
+		label: string;
+		options: SearchOption[];
+	};
+
+	type Props = {
+		search: SearchState;
+		open?: boolean;
+		placeholder?: string;
+		emptyText?: string;
+		loadingText?: string;
+		loadingMoreText?: string;
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		disableOverlayClose?: boolean;
+		disableGlobalShortcut?: boolean;
+		shortcut?: string;
+		showFooter?: boolean;
+		groups?: CommandGroup[];
+		onselect?: (item: SearchOption) => void;
+		onclose?: () => void;
+		class?: string;
+	};
+
+	let {
+		search,
+		open = $bindable(false),
+		placeholder = 'Search...',
+		emptyText = 'No results found',
+		loadingText = 'Loading...',
+		loadingMoreText = 'Loading more...',
+		color = 'muted',
+		disableOverlayClose = false,
+		disableGlobalShortcut = false,
+		shortcut = 'k',
+		showFooter = true,
+		groups,
+		onselect,
+		onclose,
+		class: className
+	}: Props = $props();
+
+	let openContent = $state(false);
+	let optionsEl = $state<HTMLElement>();
+	let searchInputEl = $state<HTMLInputElement>();
+	let focusedIndex = $state(-1);
+	let hasSearched = $state(false);
+
+	// Flatten options for keyboard navigation
+	const flatOptions = $derived(() => {
+		if (groups && groups.length > 0) {
+			return groups.flatMap((g) => g.options);
+		}
+		return search.options;
+	});
+
+	const scrollToItem = (index: number) => {
+		if (!optionsEl) return;
+		const items = Array.from(optionsEl.querySelectorAll('.item'));
+		const target = items[index] as HTMLElement;
+		if (!target) return;
+
+		target.scrollIntoView({ block: 'nearest' });
+	};
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		const items = flatOptions();
+		if (!items.length && event.key !== 'Escape') return;
+
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				focusedIndex = (focusedIndex + 1) % items.length;
+				scrollToItem(focusedIndex);
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				focusedIndex = (focusedIndex - 1 + items.length) % items.length;
+				scrollToItem(focusedIndex);
+				break;
+			case 'Enter': {
+				event.preventDefault();
+				if (focusedIndex >= 0 && focusedIndex < items.length) {
+					handleSelect(items[focusedIndex]);
+				}
+				break;
+			}
+			case 'Escape':
+				event.preventDefault();
+				handleClose();
+				break;
+		}
+	};
+
+	const handleGlobalKeyDown = (event: KeyboardEvent) => {
+		if (disableGlobalShortcut) return;
+
+		const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+		const modifier = isMac ? event.metaKey : event.ctrlKey;
+
+		if (modifier && event.key.toLowerCase() === shortcut.toLowerCase()) {
+			event.preventDefault();
+			open = !open;
+		}
+	};
+
+	const handleScroll = async () => {
+		if (!optionsEl || !search.hasMore || search.isLoadingMore) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = optionsEl;
+		const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+
+		if (scrollPercentage >= 0.8) {
+			await search.loadMore();
+		}
+	};
+
+	const handleSelect = (item: SearchOption) => {
+		if (item.href) {
+			open = false;
+			search.setSearch('');
+		} else {
+			onselect?.(item);
+			open = false;
+			search.setSearch('');
+		}
+	};
+
+	const handleOverlayClick = () => {
+		if (!disableOverlayClose) {
+			handleClose();
+		}
+	};
+
+	const handleClose = () => {
+		open = false;
+		focusedIndex = -1;
+		hasSearched = false;
+		search.setSearch('');
+		onclose?.();
+	};
+
+	$effect(() => {
+		if (search.search && search.search.length > 0) {
+			hasSearched = true;
+		}
+	});
+
+	$effect(() => {
+		if (open) {
+			setTimeout(() => {
+				openContent = true;
+			}, 20);
+			document.addEventListener('keydown', handleKeyDown);
+		} else {
+			openContent = false;
+			document.removeEventListener('keydown', handleKeyDown);
+		}
+
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	});
+
+	$effect(() => {
+		if (openContent && searchInputEl) {
+			tick().then(() => {
+				searchInputEl?.focus();
+				focusedIndex = -1;
+				hasSearched = false;
+			});
+		}
+	});
+
+	$effect(() => {
+		if (!disableGlobalShortcut) {
+			document.addEventListener('keydown', handleGlobalKeyDown);
+		}
+
+		return () => {
+			document.removeEventListener('keydown', handleGlobalKeyDown);
+		};
+	});
+
+	const isMac =
+		typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+	const modifierKey = isMac ? '⌘' : 'Ctrl';
+</script>
+
+{#if open}
+	<div transition:fade class="command-dialog" use:popover>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="command-overlay" onclick={handleOverlayClick}></div>
+		{#if openContent}
+			<div in:scale={{ duration: 100 }} class={cn('command', className)}>
+				<div class="command-search">
+					<Icon icon={Search24RegularIcon} class="command-search-icon" />
+					<input
+						bind:this={searchInputEl}
+						type="text"
+						class="command-search-input"
+						{placeholder}
+						bind:value={search.search}
+					/>
+					<div class="command-kbd">
+						<kbd>Esc</kbd>
+						<span>to close</span>
+					</div>
+				</div>
+
+				<div class="command-results" bind:this={optionsEl} onscroll={handleScroll}>
+					{#if search.isLoading}
+						<div class="command-loading">
+							<Icon icon={DotsMoveIcon} class="command-loading-spinner" />
+							<span>{loadingText}</span>
+						</div>
+					{:else if flatOptions().length === 0 && hasSearched}
+						<div class="command-empty">{emptyText}</div>
+					{:else if groups && groups.length > 0}
+						{#each groups as group}
+							{#if group.options.length > 0}
+								<div class="command-group">
+									<div class="command-group-label">{group.label}</div>
+									{#each group.options as item}
+										{@const globalIndex = flatOptions().indexOf(item)}
+										{#if item.href}
+											<Item
+												id={item.id}
+												label={item.label}
+												icon={item.icon as IconData}
+												src={item.src}
+												description={item.description}
+												href={item.href as string}
+												isFocused={focusedIndex === globalIndex}
+												isDisabled={item.disabled}
+												{color}
+												size="sm"
+												isCompact
+												onclick={() => handleSelect(item)}
+											/>
+										{:else}
+											<Item
+												id={item.id}
+												label={item.label}
+												icon={item.icon as IconData}
+												src={item.src}
+												description={item.description}
+												isFocused={focusedIndex === globalIndex}
+												isDisabled={item.disabled}
+												{color}
+												size="sm"
+												isCompact
+												onclick={() => handleSelect(item)}
+											/>
+										{/if}
+									{/each}
+								</div>
+							{/if}
+						{/each}
+
+						{#if search.isLoadingMore}
+							<div class="command-loading">
+								<Icon icon={DotsMoveIcon} class="command-loading-spinner" />
+								<span>{loadingMoreText}</span>
+							</div>
+						{/if}
+					{:else if search.options.length > 0}
+						{#each search.options as item, index}
+							{#if item.href}
+								<Item
+									id={item.id}
+									label={item.label}
+									icon={item.icon as IconData}
+									src={item.src}
+									description={item.description}
+									href={item.href as string}
+									isFocused={focusedIndex === index}
+									isDisabled={item.disabled}
+									{color}
+									size="sm"
+									isCompact
+									onclick={() => handleSelect(item)}
+								/>
+							{:else}
+								<Item
+									id={item.id}
+									label={item.label}
+									icon={item.icon as IconData}
+									src={item.src}
+									description={item.description}
+									isFocused={focusedIndex === index}
+									isDisabled={item.disabled}
+									{color}
+									size="sm"
+									isCompact
+									onclick={() => handleSelect(item)}
+								/>
+							{/if}
+						{/each}
+
+						{#if search.isLoadingMore}
+							<div class="command-loading">
+								<Icon icon={DotsMoveIcon} class="command-loading-spinner" />
+								<span>{loadingMoreText}</span>
+							</div>
+						{/if}
+					{/if}
+				</div>
+
+				{#if showFooter}
+					<div class="command-footer">
+						<div class="command-shortcut">
+							<div class="command-shortcut-item">
+								<kbd>↑</kbd><kbd>↓</kbd>
+								<span>Navigate</span>
+							</div>
+							<div class="command-shortcut-item">
+								<kbd>↵</kbd>
+								<span>Select</span>
+							</div>
+						</div>
+						<div class="command-shortcut-item">
+							<kbd>{modifierKey}</kbd><kbd>{shortcut.toUpperCase()}</kbd>
+							<span>Toggle</span>
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}