ui-svelte 0.2.10 → 0.2.12

package/dist/overlay/Command.svelte.d.ts

@@ -1,26 +1,25 @@
-export default Command;
-type Command = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+import type { SearchState, SearchOption } from '../hooks/use-search.svelte.js';
+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;
 };
-declare const Command: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const Command: import("svelte").Component<Props, {}, "open">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/overlay/Drawer.svelte

@@ -5,7 +5,7 @@
 	import { fade } from 'svelte/transition';
 	import { afterNavigate } from '$app/navigation';
 	import { Dismiss24RegularIcon } from '../icons/index.js';
-	import { Icon } from '../index.js';
+	import { IconButton } from '../index.js';
 
 	type Props = {
 		open: boolean;
@@ -18,10 +18,19 @@
 		headerClass?: string;
 		footerClass?: string;
 		bodyClass?: string;
-		variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+		color?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'default';
+		variant?: 'solid' | 'soft';
 		disableOverlayClose?: boolean;
 		hideCloseButton?: boolean;
-		isSolid?: boolean;
 	};
 
 	let {
@@ -35,10 +44,10 @@
 		headerClass,
 		bodyClass,
 		footerClass,
-		variant = 'ghost',
+		color = 'default',
+		variant = 'solid',
 		disableOverlayClose,
-		hideCloseButton,
-		isSolid
+		hideCloseButton
 	}: Props = $props();
 
 	const positionClasses = {
@@ -48,12 +57,33 @@
 		bottom: 'is-bottom'
 	};
 
-	const variants = {
-		ghost: 'is-ghost',
-		surface: 'is-surface',
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		muted: 'is-muted'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning',
+		surface: 'is-surface',
+		default: 'is-default'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
+	};
+
+	const closeColors = {
+		primary: 'primary',
+		secondary: 'secondary',
+		muted: 'muted',
+		success: 'success',
+		info: 'info',
+		warning: 'warning',
+		danger: 'danger',
+		surface: 'muted',
+		default: 'muted'
 	};
 
 	let openDrawer = $state(false);
@@ -95,13 +125,7 @@
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="drawer-overlay" onclick={handleOverlayClick}></div>
 		<div
-			class={cn(
-				'drawer',
-				positionClasses[position],
-				variants[variant],
-				isSolid && 'is-solid',
-				className
-			)}
+			class={cn('drawer', positionClasses[position], variants[variant], colors[color], className)}
 			class:is-active={openContent}
 		>
 			{#if header}
@@ -118,10 +142,14 @@
 				</div>
 			{/if}
 			{#if !hideCloseButton}
-				<div class="btn-close">
-					<button onclick={() => (open = false)}>
-						<Icon icon={Dismiss24RegularIcon} class="btn-close-icon" />
-					</button>
+				<div class="drawer-btn-close">
+					<IconButton
+						icon={Dismiss24RegularIcon}
+						variant={variant === 'solid' ? 'soft' : 'solid'}
+						color={closeColors[color] as any}
+						size="xs"
+						onclick={() => (open = false)}
+					/>
 				</div>
 			{/if}
 		</div>

package/dist/overlay/Drawer.svelte.d.ts

@@ -10,10 +10,10 @@ type Props = {
     headerClass?: string;
     footerClass?: string;
     bodyClass?: string;
-    variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    variant?: 'solid' | 'soft';
     disableOverlayClose?: boolean;
     hideCloseButton?: boolean;
-    isSolid?: boolean;
 };
 declare const Drawer: import("svelte").Component<Props, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/overlay/Dropdown.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { Item } from '../index.js';
-	import type { IconData } from '../types.js';
+	import { Item, type IconData } from '../index.js';
 	import { onMount, type Snippet } from 'svelte';
 
 	type Option = {
@@ -15,13 +14,13 @@
 
 	type Props = {
 		options: Option[];
-		variant?: 'primary' | 'secondary' | 'muted';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'danger' | 'warning' | 'info';
 		children: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
 	};
 
-	const { children, header, footer, options, variant = 'primary' }: Props = $props();
+	const { children, header, footer, options, color = 'primary' }: Props = $props();
 
 	let isOpen = $state(false);
 	let controlElement = $state<HTMLElement>();
@@ -132,7 +131,7 @@
 					id={item.id}
 					href={item.href}
 					onclick={() => item.onclick?.(item)}
-					{variant}
+					{color}
 					size="sm"
 					isCompact
 				/>

package/dist/overlay/Modal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import IconButton from '../control/IconButton.svelte';
 	import { Dismiss24RegularIcon } from '../icons/index.js';
 	import { Icon } from '../index.js';
 	import { cn } from '../utils/class-names.js';
@@ -12,14 +13,23 @@
 		children: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
-		class?: string;
+		rootClass?: string;
 		headerClass?: string;
 		footerClass?: string;
 		contentClass?: string;
-		variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+		color?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'default';
+		variant?: 'solid' | 'soft';
 		disableOverlayClose?: boolean;
 		hideCloseButton?: boolean;
-		isSolid?: boolean;
 	};
 
 	let {
@@ -28,24 +38,45 @@
 		header,
 		footer,
 		children,
-		class: className,
+		rootClass,
 		headerClass,
 		contentClass,
 		footerClass,
-		variant = 'ghost',
+		color = 'default',
+		variant = 'solid',
 		disableOverlayClose,
-		hideCloseButton,
-		isSolid
+		hideCloseButton
 	}: Props = $props();
 
 	let openContent = $state(false);
 
-	const variants = {
-		ghost: 'is-ghost',
-		surface: 'is-surface',
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		muted: 'is-muted'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning',
+		surface: 'is-surface',
+		default: 'is-default'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
+	};
+
+	const closeColors = {
+		primary: 'primary',
+		secondary: 'secondary',
+		muted: 'muted',
+		success: 'success',
+		info: 'info',
+		warning: 'warning',
+		danger: 'danger',
+		surface: 'muted',
+		default: 'muted'
 	};
 
 	const handleOverlayClick = () => {
@@ -74,14 +105,14 @@
 		{#if openContent}
 			<div
 				in:scale={{ duration: 100 }}
-				class={cn('modal', variants[variant], isSolid && 'is-solid', className)}
+				class={cn('modal', variants[variant], colors[color], rootClass)}
 			>
 				{#if header}
 					<div class={cn('modal-header', headerClass)}>
 						{@render header()}
 					</div>
 				{/if}
-				<div class={cn('modal-content', contentClass)}>
+				<div class={cn('modal-body', contentClass)}>
 					{@render children()}
 				</div>
 				{#if footer}
@@ -91,9 +122,13 @@
 				{/if}
 				{#if !hideCloseButton}
 					<div class="btn-close">
-						<button onclick={() => (open = false)}>
-							<Icon icon={Dismiss24RegularIcon} class="btn-close-icon" />
-						</button>
+						<IconButton
+							icon={Dismiss24RegularIcon}
+							variant={variant === 'solid' ? 'soft' : 'solid'}
+							color={closeColors[color] as any}
+							size="xs"
+							onclick={() => (open = false)}
+						/>
 					</div>
 				{/if}
 			</div>

package/dist/overlay/Modal.svelte.d.ts

@@ -5,14 +5,14 @@ type Props = {
     children: Snippet;
     header?: Snippet;
     footer?: Snippet;
-    class?: string;
+    rootClass?: string;
     headerClass?: string;
     footerClass?: string;
     contentClass?: string;
-    variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    variant?: 'solid' | 'soft';
     disableOverlayClose?: boolean;
     hideCloseButton?: boolean;
-    isSolid?: boolean;
 };
 declare const Modal: import("svelte").Component<Props, {}, "open">;
 type Modal = ReturnType<typeof Modal>;

package/dist/overlay/Toast.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 
-	import { Icon, toast } from '../index.js';
+	import { Icon, IconButton, toast } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import { popover } from '../utils/popover.js';
 	import {
@@ -16,10 +16,15 @@
 		class?: string;
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		showIcon?: boolean;
-		isSolid?: boolean;
+		variant?: 'solid' | 'soft';
 	};
 
-	const { class: className, position = 'bottom-left', isSolid, showIcon }: Props = $props();
+	const {
+		class: className,
+		position = 'bottom-left',
+		variant = 'soft',
+		showIcon
+	}: Props = $props();
 
 	const positionClasses = {
 		'top-left': 'is-top-left',
@@ -28,18 +33,29 @@
 		'bottom-right': 'is-bottom-right'
 	};
 
-	const status = {
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
 		info: 'is-info',
 		success: 'is-success',
 		warning: 'is-warning',
 		danger: 'is-danger'
 	};
 
-	const icons = {
-		info: 'fluent:error-circle-24-regular',
-		success: 'fluent:checkmark-circle-24-regular',
-		warning: 'fluent:warning-24-regular',
-		danger: 'fluent:block-24-regular'
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
+	};
+
+	const closeColors = {
+		primary: 'primary',
+		secondary: 'secondary',
+		muted: 'muted',
+		success: 'success',
+		info: 'info',
+		warning: 'warning',
+		danger: 'danger'
 	};
 </script>
 
@@ -52,17 +68,21 @@
 		{#each toast.messages as message, index (message.id)}
 			<div
 				transition:slide
-				class={cn('toast', status[message.status], (message.isSolid || isSolid) && 'is-solid')}
+				class={cn(
+					'toast',
+					colors[message.color],
+					message.variant ? variants[message.variant] : variants[variant]
+				)}
 				style="--toast-index: {index}; --toast-total: {toast.messages.length}"
 			>
 				{#if showIcon}
-					{#if message.status === 'info'}
+					{#if message.color === 'info'}
 						<Icon icon={Info24RegularIcon} class="toast-icon" />
-					{:else if message.status === 'success'}
+					{:else if message.color === 'success'}
 						<Icon icon={CheckmarkCircle24RegularIcon} class="toast-icon" />
-					{:else if message.status === 'warning'}
+					{:else if message.color === 'warning'}
 						<Icon icon={Warning24RegularIcon} class="toast-icon" />
-					{:else if message.status === 'danger'}
+					{:else if message.color === 'danger'}
 						<Icon icon={DismissCircle24RegularIcon} class="toast-icon" />
 					{/if}
 				{/if}
@@ -73,9 +93,13 @@
 					<div class="toast-description">{message.description}</div>
 				</div>
 				<div class="btn-close">
-					<button onclick={() => toast.close(message.id)}>
-						<Icon icon={Dismiss24RegularIcon} class="btn-close-icon" />
-					</button>
+					<IconButton
+						icon={Dismiss24RegularIcon}
+						variant={variant === 'solid' ? 'soft' : 'solid'}
+						color={closeColors[message.color] as any}
+						size="xs"
+						onclick={() => toast.close(message.id)}
+					/>
 				</div>
 			</div>
 		{/each}

package/dist/overlay/Toast.svelte.d.ts

@@ -2,7 +2,7 @@ type Props = {
     class?: string;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     showIcon?: boolean;
-    isSolid?: boolean;
+    variant?: 'solid' | 'soft';
 };
 declare const Toast: import("svelte").Component<Props, {}, "">;
 type Toast = ReturnType<typeof Toast>;

package/dist/overlay/Tooltip.svelte

@@ -6,18 +6,18 @@
 	type Props = {
 		label: string;
 		children: Snippet;
-		variant?: 'primary' | 'secondary' | 'muted';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft';
 		position?: 'top' | 'bottom' | 'start' | 'end';
-		isSolid?: boolean;
 		class?: string;
 	};
 
 	let {
 		label,
 		children,
-		variant = 'primary',
+		color = 'primary',
+		variant = 'soft',
 		position = 'top',
-		isSolid = false,
 		class: className
 	}: Props = $props();
 
@@ -31,10 +31,19 @@
 
 	const style = $derived(`top: ${tooltipPosition.top}px; left: ${tooltipPosition.left}px;`);
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		muted: 'is-muted'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
 	};
 
 	const positionClasses = {
@@ -73,8 +82,9 @@
 				break;
 		}
 
-		top += window.scrollY;
-		left += window.scrollX;
+		// Note: Don't add scroll offsets for position: fixed
+		// getBoundingClientRect() returns viewport-relative coordinates
+		// and position: fixed is also relative to the viewport
 
 		const padding = 8;
 		if (left < padding) left = padding;
@@ -82,19 +92,24 @@
 			left = window.innerWidth - tooltipRect.width - padding;
 		}
 		if (top < padding) top = padding;
-		if (top + tooltipRect.height > window.innerHeight + window.scrollY - padding) {
-			top = window.innerHeight + window.scrollY - tooltipRect.height - padding;
+		if (top + tooltipRect.height > window.innerHeight - padding) {
+			top = window.innerHeight - tooltipRect.height - padding;
 		}
 
 		tooltipPosition = { top, left };
 	};
 
 	const handleMouseEnter = () => {
+		startEventListeners();
 		isOpen = true;
-		setTimeout(updatePosition, 0);
+		// Use requestAnimationFrame to ensure the element is rendered before calculating position
+		requestAnimationFrame(() => {
+			updatePosition();
+		});
 	};
 
 	const handleMouseLeave = () => {
+		stopEventListeners();
 		isOpen = false;
 	};
 
@@ -109,7 +124,6 @@
 	};
 
 	onMount(() => {
-		startEventListeners();
 		return () => stopEventListeners();
 	});
 </script>
@@ -122,19 +136,19 @@
 	onmouseleave={handleMouseLeave}
 >
 	{@render children()}
+</div>
 
-	<div
-		bind:this={tooltipElement}
-		class={cn(
-			'tooltip-popover',
-			variantClasses[variant],
-			positionClasses[position],
-			isSolid && 'is-solid',
-			isOpen && 'is-active'
-		)}
-		{style}
-	>
-		<div class={cn('tooltip-arrow', variantClasses[variant], isSolid && 'is-solid')}></div>
-		{label}
-	</div>
+<div
+	bind:this={tooltipElement}
+	class={cn(
+		'tooltip-popover',
+		colors[color],
+		variants[variant],
+		positionClasses[position],
+		isOpen && 'is-active'
+	)}
+	{style}
+>
+	<div class="tooltip-arrow"></div>
+	{label}
 </div>

package/dist/overlay/Tooltip.svelte.d.ts

@@ -2,9 +2,9 @@ import type { Snippet } from 'svelte';
 type Props = {
     label: string;
     children: Snippet;
-    variant?: 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft';
     position?: 'top' | 'bottom' | 'start' | 'end';
-    isSolid?: boolean;
     class?: string;
 };
 declare const Tooltip: import("svelte").Component<Props, {}, "">;

package/dist/overlay/css/command.css

@@ -0,0 +1,80 @@
+@layer components {
+	.command-dialog {
+		@apply fixed inset-0 z-50;
+		@apply flex flex-col justify-start items-center pt-[15vh];
+
+		.command-overlay {
+			@apply absolute inset-0 bg-overlay;
+		}
+
+		.command {
+			@apply relative flex flex-col rounded-box max-w-xl w-full max-h-[60vh];
+			@apply shadow-lg overflow-hidden;
+			@apply bg-background text-on-background;
+		}
+	}
+
+	.command-search {
+		@apply relative flex items-center w-full gap-3 px-4 py-3;
+		@apply border-b border-muted;
+	}
+
+	.command-search-icon {
+		@apply h-5 w-auto text-on-muted shrink-0;
+	}
+
+	.command-search-input {
+		@apply flex-1 border-none outline-none bg-transparent text-on-background;
+		@apply placeholder:text-on-muted/70 text-base;
+	}
+
+	.command-kbd {
+		@apply hidden md:flex items-center gap-1 text-xs text-on-muted;
+	}
+
+	.command-kbd kbd {
+		@apply px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono uppercase;
+	}
+
+	.command-results {
+		@apply flex-1 overflow-y-auto p-2;
+		@apply max-h-80;
+	}
+
+	.command-group {
+		@apply mb-2;
+	}
+
+	.command-group-label {
+		@apply px-2 py-1.5 text-xs font-medium text-on-muted uppercase tracking-wide;
+	}
+
+	.command-empty {
+		@apply flex items-center justify-center py-8 text-sm text-on-muted;
+	}
+
+	.command-loading {
+		@apply flex items-center justify-center gap-2 py-8 text-sm text-on-muted;
+	}
+
+	.command-loading-spinner {
+		@apply size-4 animate-spin;
+	}
+
+	.command-footer {
+		@apply flex items-center justify-between px-4 py-2;
+		@apply border-t border-muted/30 text-xs text-on-muted;
+	}
+
+	.command-shortcut {
+		@apply flex items-center gap-2;
+	}
+
+	.command-shortcut-item {
+		@apply flex items-center gap-1;
+	}
+
+	.command-shortcut-item kbd {
+		@apply px-1.5 py-0.5 bg-muted/20 rounded text-[10px] font-mono;
+	}
+}