ui-svelte 0.1.0

package/dist/overlay/Modal.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { Dismiss24RegularIcon } from '../icons/index.js';
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import { popover } from '../utils/popover.js';
+	import type { Snippet } from 'svelte';
+	import { fade, scale } from 'svelte/transition';
+
+	type Props = {
+		open: boolean;
+		onclose?: () => void;
+		children: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+		class?: string;
+		headerClass?: string;
+		footerClass?: string;
+		contentClass?: string;
+		variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+		disableOverlayClose?: boolean;
+		hideCloseButton?: boolean;
+		isSolid?: boolean;
+	};
+
+	let {
+		open = $bindable(),
+		onclose,
+		header,
+		footer,
+		children,
+		class: className,
+		headerClass,
+		contentClass,
+		footerClass,
+		variant = 'ghost',
+		disableOverlayClose,
+		hideCloseButton,
+		isSolid
+	}: Props = $props();
+
+	let openContent = $state(false);
+
+	const variants = {
+		ghost: 'is-ghost',
+		surface: 'is-surface',
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted'
+	};
+
+	const handleOverlayClick = () => {
+		if (!disableOverlayClose) {
+			open = false;
+		}
+	};
+
+	$effect(() => {
+		if (open) {
+			setTimeout(() => {
+				openContent = true;
+			}, 20);
+		} else {
+			onclose?.();
+			openContent = false;
+		}
+	});
+</script>
+
+{#if open}
+	<div transition:fade class="modal-dialog" use:popover>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="modal-overlay" onclick={handleOverlayClick}></div>
+		{#if openContent}
+			<div
+				in:scale={{ duration: 100 }}
+				class={cn('modal', variants[variant], isSolid && 'is-solid', className)}
+			>
+				{#if header}
+					<div class={cn('modal-header', headerClass)}>
+						{@render header()}
+					</div>
+				{/if}
+				<div class={cn('modal-content', contentClass)}>
+					{@render children()}
+				</div>
+				{#if footer}
+					<div class={cn('modal-footer', footerClass)}>
+						{@render footer()}
+					</div>
+				{/if}
+				{#if !hideCloseButton}
+					<div class="btn-close">
+						<button onclick={() => (open = false)}>
+							<Icon icon={Dismiss24RegularIcon} class="btn-close-icon" />
+						</button>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    open: boolean;
+    onclose?: () => void;
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    class?: string;
+    headerClass?: string;
+    footerClass?: string;
+    contentClass?: string;
+    variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+    disableOverlayClose?: boolean;
+    hideCloseButton?: boolean;
+    isSolid?: boolean;
+};
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

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

@@ -0,0 +1,26 @@
+export default PopoverStack;
+type PopoverStack = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const PopoverStack: $$__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;
+}

package/dist/overlay/Toast.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+
+	import { Icon, toast } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import { popover } from '../utils/popover.js';
+	import {
+		CheckmarkCircle24RegularIcon,
+		Dismiss24RegularIcon,
+		DismissCircle24RegularIcon,
+		Info24RegularIcon,
+		Warning24RegularIcon
+	} from '../icons/index.js';
+
+	type Props = {
+		class?: string;
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		showIcon?: boolean;
+		isSolid?: boolean;
+	};
+
+	const { class: className, position = 'bottom-left', isSolid, showIcon }: Props = $props();
+
+	const positionClasses = {
+		'top-left': 'is-top-left',
+		'top-right': 'is-top-right',
+		'bottom-left': 'is-bottom-left',
+		'bottom-right': 'is-bottom-right'
+	};
+
+	const status = {
+		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'
+	};
+</script>
+
+{#if toast.messages.length > 0}
+	<div
+		use:popover
+		transition:slide
+		class={cn('toast-container', positionClasses[position], className)}
+	>
+		{#each toast.messages as message, index (message.id)}
+			<div
+				transition:slide
+				class={cn('toast', status[message.status], (message.isSolid || isSolid) && 'is-solid')}
+				style="--toast-index: {index}; --toast-total: {toast.messages.length}"
+			>
+				{#if showIcon}
+					{#if message.status === 'info'}
+						<Icon icon={Info24RegularIcon} class="toast-icon" />
+					{:else if message.status === 'success'}
+						<Icon icon={CheckmarkCircle24RegularIcon} class="toast-icon" />
+					{:else if message.status === 'warning'}
+						<Icon icon={Warning24RegularIcon} class="toast-icon" />
+					{:else if message.status === 'danger'}
+						<Icon icon={DismissCircle24RegularIcon} class="toast-icon" />
+					{/if}
+				{/if}
+				<div class="toast-content">
+					{#if message.title}
+						<div class="toast-title">{message.title}</div>
+					{/if}
+					<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>
+				</div>
+			</div>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,9 @@
+type Props = {
+    class?: string;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    showIcon?: boolean;
+    isSolid?: boolean;
+};
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/overlay/Tooltip.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		label: string;
+		children: Snippet;
+		variant?: 'primary' | 'secondary' | 'muted';
+		position?: 'top' | 'bottom' | 'start' | 'end';
+		isSolid?: boolean;
+		class?: string;
+	};
+
+	let {
+		label,
+		children,
+		variant = 'primary',
+		position = 'top',
+		isSolid = false,
+		class: className
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let triggerElement = $state<HTMLElement>();
+	let tooltipElement = $state<HTMLElement>();
+	let tooltipPosition = $state({
+		top: 0,
+		left: 0
+	});
+
+	const style = $derived(`top: ${tooltipPosition.top}px; left: ${tooltipPosition.left}px;`);
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted'
+	};
+
+	const positionClasses = {
+		top: 'position-top',
+		bottom: 'position-bottom',
+		start: 'position-start',
+		end: 'position-end'
+	};
+
+	const updatePosition = () => {
+		if (!triggerElement || !tooltipElement) return;
+
+		const triggerRect = triggerElement.getBoundingClientRect();
+		const tooltipRect = tooltipElement.getBoundingClientRect();
+		const gap = 8;
+
+		let top = 0;
+		let left = 0;
+
+		switch (position) {
+			case 'top':
+				top = triggerRect.top - tooltipRect.height - gap;
+				left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+				break;
+			case 'bottom':
+				top = triggerRect.bottom + gap;
+				left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+				break;
+			case 'start':
+				top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+				left = triggerRect.left - tooltipRect.width - gap;
+				break;
+			case 'end':
+				top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+				left = triggerRect.right + gap;
+				break;
+		}
+
+		top += window.scrollY;
+		left += window.scrollX;
+
+		const padding = 8;
+		if (left < padding) left = padding;
+		if (left + tooltipRect.width > window.innerWidth - padding) {
+			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;
+		}
+
+		tooltipPosition = { top, left };
+	};
+
+	const handleMouseEnter = () => {
+		isOpen = true;
+		setTimeout(updatePosition, 0);
+	};
+
+	const handleMouseLeave = () => {
+		isOpen = false;
+	};
+
+	const startEventListeners = () => {
+		window.addEventListener('resize', updatePosition);
+		window.addEventListener('scroll', updatePosition, true);
+	};
+
+	const stopEventListeners = () => {
+		window.removeEventListener('resize', updatePosition);
+		window.removeEventListener('scroll', updatePosition, true);
+	};
+
+	onMount(() => {
+		startEventListeners();
+		return () => stopEventListeners();
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class={cn('tooltip', className)}
+	bind:this={triggerElement}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+>
+	{@render children()}
+
+	<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>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    label: string;
+    children: Snippet;
+    variant?: 'primary' | 'secondary' | 'muted';
+    position?: 'top' | 'bottom' | 'start' | 'end';
+    isSolid?: boolean;
+    class?: string;
+};
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/overlay/css/drawer.css

@@ -0,0 +1,75 @@
+@layer components {
+	.drawer-panel {
+		@apply fixed inset-0 z-50;
+		@apply flex flex-col justify-center items-center;
+
+		.drawer-overlay {
+			@apply absolute inset-0 bg-overlay;
+		}
+		.drawer {
+			@apply absolute bg-surface flex flex-col;
+			@apply transition-all duration-300 ease-in-out;
+
+			&.is-start {
+				@apply inset-y-0 left-0 right-auto rounded-r-ui;
+				@apply transform -translate-x-full;
+			}
+
+			&.is-end {
+				@apply inset-y-0 right-0 left-auto rounded-l-ui;
+				@apply transform translate-x-full;
+			}
+
+			&.is-top {
+				@apply inset-x-0 top-0 bottom-auto rounded-b-ui;
+				@apply transform -translate-y-full;
+			}
+
+			&.is-bottom {
+				@apply inset-x-0 bottom-0 top-auto rounded-t-ui;
+				@apply transform translate-y-full;
+			}
+
+			&.is-active {
+				@apply transform translate-x-0! translate-y-0!;
+			}
+
+			&.is-ghost {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+			&.is-primary {
+				@apply bg-on-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-on-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-primary.is-solid {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary.is-solid {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted.is-solid {
+				@apply bg-on-muted text-muted;
+			}
+
+			.drawer-header {
+				@apply row gap-3 p-3;
+			}
+
+			.drawer-footer {
+				@apply row gap-3 p-3;
+			}
+
+			.drawer-body {
+				@apply flex min-h-0 flex-1 flex-col gap-3 p-3 overflow-auto;
+			}
+		}
+	}
+}

package/dist/overlay/css/dropdown.css

@@ -0,0 +1,24 @@
+@layer components {
+	.dropdown {
+		@apply relative inline-flex w-fit cursor-pointer select-none;
+	}
+	.dropdown-popover {
+		@apply overflow-y-auto flex flex-col gap-2 p-2 my-1;
+		@apply bg-background text-on-background rounded-ui;
+		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
+		@apply shadow shadow-muted;
+		position: fixed;
+		z-index: 9999;
+
+		&.is-active {
+			@apply visible opacity-100;
+		}
+	}
+	.dropdown-options {
+		@apply flex flex-1 w-full min-w-0 flex-col gap-1 overflow-y-auto scrollbar-hide;
+
+		.dropdown-options-divider {
+			@apply my-1 h-px w-full bg-muted;
+		}
+	}
+}

package/dist/overlay/css/hovercard.css

@@ -0,0 +1,11 @@
+@layer components {
+	.hovercard {
+		@apply relative inline-flex w-fit;
+	}
+	.hovercard-content {
+		@apply overflow-y-auto drop-shadow-sm flex flex-col gap-2 my-1;
+		@apply bg-background text-on-background border border-muted rounded-ui;
+		position: fixed;
+		z-index: 9999;
+	}
+}

package/dist/overlay/css/modal.css

@@ -0,0 +1,51 @@
+@layer components {
+	.modal-dialog {
+		@apply fixed inset-0 z-50;
+		@apply flex flex-col justify-center items-center;
+		.modal-overlay {
+			@apply absolute inset-0 bg-overlay;
+		}
+		.modal {
+			@apply relative flex flex-col gap-4 md:gap-6 rounded-ui py-4 md:py-6 max-w-[95vw] max-h-[95vh] overflow-hidden overflow-y-auto;
+
+			&.is-ghost {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+			&.is-primary {
+				@apply bg-on-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-on-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-primary.is-solid {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary.is-solid {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted.is-solid {
+				@apply bg-on-muted text-muted;
+			}
+			.modal-content {
+				@apply px-4 md:px-6;
+			}
+
+			.modal-header {
+				@apply grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 md:px-6;
+			}
+
+			.modal-footer {
+				@apply [.border-t]:pt-4 md:[.border-t]:pt-6 flex items-center px-4 md:px-6;
+			}
+		}
+		.modal-btn-close {
+			@apply absolute top-1 right-1 float-right z-50 size-6 p-1 hover:bg-muted rounded-full flex items-center justify-center text-on-muted hover:text-danger cursor-pointer;
+		}
+	}
+}

package/dist/overlay/css/toast.css

@@ -0,0 +1,80 @@
+@layer components {
+	.toast-container {
+		@apply fixed z-50 pointer-events-none;
+		max-width: 420px;
+		width: 100%;
+		perspective: 1000px;
+		min-height: 80px;
+
+		&.is-top-left {
+			@apply top-4 left-1/2 lg:left-4 -translate-x-1/2 lg:translate-x-0;
+		}
+		&.is-top-right {
+			@apply top-4 right-1/2 lg:right-4 translate-x-1/2 lg:translate-x-0;
+		}
+
+		&.is-bottom-left {
+			@apply bottom-4 left-1/2 lg:left-4 -translate-x-1/2 lg:translate-x-0;
+		}
+
+		&.is-bottom-right {
+			@apply bottom-4 right-1/2 lg:right-4 translate-x-1/2 lg:translate-x-0;
+		}
+	}
+
+	.toast {
+		@apply absolute inset-x-0 flex items-center gap-3 p-4 pointer-events-auto rounded-ui;
+		@apply transition-all duration-300 ease-out shadow-sm;
+
+		transform: translateY(calc((var(--toast-total) - var(--toast-index) - 1) * -8px))
+			scale(calc(1 - (var(--toast-total) - var(--toast-index) - 1) * 0.05));
+		opacity: calc(1 - (var(--toast-total) - var(--toast-index) - 1) * 0.2);
+		z-index: calc(50 + var(--toast-index));
+
+		&.is-success {
+			@apply bg-on-success text-success;
+
+			&.is-solid {
+				@apply bg-success text-on-success;
+			}
+		}
+
+		&.is-danger {
+			@apply bg-on-danger text-danger;
+
+			&.is-solid {
+				@apply bg-danger text-on-danger;
+			}
+		}
+
+		&.is-warning {
+			@apply bg-on-warning text-warning;
+
+			&.is-solid {
+				@apply bg-warning text-on-warning;
+			}
+		}
+
+		&.is-info {
+			@apply bg-on-info text-info;
+
+			&.is-solid {
+				@apply bg-info text-on-info;
+			}
+		}
+
+		.toast-icon {
+			@apply h-8 w-auto;
+		}
+
+		.toast-content {
+			@apply flex-1 flex flex-col gap-1;
+			.toast-title {
+				@apply text-sm font-semibold leading-tight;
+			}
+			.toast-description {
+				@apply text-sm leading-relaxed opacity-90;
+			}
+		}
+	}
+}