ui-svelte 0.1.0

package/dist/navigation/css/side-nav.css

@@ -0,0 +1,244 @@
+@layer components {
+	.sidenav {
+		@apply flex w-full min-w-0 flex-col gap-0.5 text-on-muted;
+
+		.sidenav-divider {
+			@apply my-2 h-px w-full bg-muted;
+		}
+
+		.sidenav-header {
+			@apply flex items-center gap-2 px-3 py-3 text-sm font-bold text-on-surface;
+			@apply mt-4 mb-1 first:mt-0;
+			@apply justify-start;
+
+			.icon {
+				@apply h-5 w-5 shrink-0 text-on-surface;
+			}
+
+			.sidenav-header-content {
+				@apply flex flex-1 flex-col overflow-hidden;
+
+				.sidenav-header-label {
+					@apply truncate font-bold uppercase text-xs tracking-wider text-left;
+				}
+
+				.sidenav-header-description {
+					@apply truncate text-xs font-normal text-on-muted/70 text-left;
+				}
+			}
+
+			&.sidenav-header-link {
+				@apply cursor-pointer rounded-ui outline-none;
+				@apply transition-all duration-200;
+				@apply hover:bg-muted/50;
+
+				&.is-active {
+					@apply bg-muted;
+				}
+			}
+
+			.sidenav-arrow-wrapper {
+				@apply flex shrink-0 items-center justify-center ml-auto;
+
+				.sidenav-arrow {
+					@apply h-4 w-4 transition-transform duration-200;
+
+					&.is-open {
+						@apply rotate-90;
+					}
+				}
+			}
+		}
+
+		.sidenav-item {
+			@apply relative flex w-fit items-center gap-2 rounded-ui pl-4 pr-3 py-2;
+			@apply cursor-pointer select-none outline-none;
+			@apply hover:bg-muted;
+
+			&.is-wide {
+				@apply w-full;
+			}
+
+			.sidenav-icon-wrapper {
+				@apply flex shrink-0 items-center justify-center;
+
+				.sidenav-icon {
+					@apply h-5 w-5;
+				}
+			}
+
+			.sidenav-content {
+				@apply flex flex-1 flex-col overflow-hidden;
+
+				.sidenav-label {
+					@apply truncate font-medium text-sm;
+				}
+
+				.sidenav-description {
+					@apply truncate text-xs text-on-muted/70;
+				}
+			}
+
+			.sidenav-status-wrapper {
+				@apply flex shrink-0 items-center;
+
+				.sidenav-status {
+					@apply rounded-full bg-muted px-2 py-0.5 text-xs font-medium;
+				}
+			}
+
+			.sidenav-arrow-wrapper {
+				@apply flex shrink-0 items-center justify-center;
+
+				.sidenav-arrow {
+					@apply h-4 w-4 transition-transform duration-200;
+
+					&.is-open {
+						@apply rotate-90;
+					}
+				}
+			}
+		}
+
+		&.is-sm {
+			.sidenav-item {
+				@apply gap-1.5 pl-3 pr-2 py-1.5 text-xs;
+
+				.sidenav-icon-wrapper .sidenav-icon {
+					@apply h-4 w-4;
+				}
+			}
+
+			.sidenav-header {
+				@apply gap-1.5 px-2 py-1.5 text-xs;
+
+				.sidenav-header-icon {
+					@apply h-4 w-4;
+				}
+			}
+		}
+
+		&.is-md {
+			.sidenav-item {
+				@apply gap-2 pl-4 pr-3 py-2 text-sm;
+
+				.sidenav-icon-wrapper .sidenav-icon {
+					@apply h-5 w-5;
+				}
+			}
+
+			.sidenav-header {
+				@apply gap-2 px-3 py-2 text-sm;
+
+				.sidenav-header-icon {
+					@apply h-5 w-5;
+				}
+			}
+		}
+
+		&.is-lg {
+			.sidenav-item {
+				@apply gap-3 pl-5 pr-4 py-3 text-base;
+
+				.sidenav-icon-wrapper .sidenav-icon {
+					@apply h-6 w-6;
+				}
+			}
+
+			.sidenav-header {
+				@apply gap-3 px-4 py-3 text-base;
+
+				.sidenav-header-icon {
+					@apply h-6 w-6;
+				}
+			}
+		}
+
+		&.is-compact {
+			.sidenav-item {
+				@apply py-1.5;
+			}
+
+			.sidenav-header {
+				@apply py-1;
+			}
+		}
+
+		&.is-collapsible {
+			@apply w-16;
+
+			&.is-collapsed {
+				.sidenav-item {
+					@apply justify-center;
+
+					.sidenav-content,
+					.sidenav-status-wrapper,
+					.sidenav-arrow-wrapper {
+						@apply hidden;
+					}
+				}
+
+				.sidenav-header-content {
+					@apply hidden;
+				}
+
+				.sidenav-submenu-content {
+					@apply hidden;
+				}
+			}
+
+			&:hover {
+				@apply w-full;
+			}
+		}
+
+		&.sidenav-primary {
+			.sidenav-item.is-active {
+				@apply bg-on-primary text-primary;
+
+				.sidenav-icon {
+					@apply text-primary;
+				}
+			}
+		}
+
+		&.sidenav-secondary {
+			.sidenav-item.is-active {
+				@apply bg-on-secondary text-secondary;
+
+				.sidenav-icon {
+					@apply text-secondary;
+				}
+			}
+		}
+
+		&.sidenav-muted {
+			.sidenav-item.is-active {
+				@apply bg-muted text-on-muted;
+
+				.sidenav-icon {
+					@apply text-on-muted;
+				}
+			}
+		}
+
+		.sidenav-submenu-wrapper {
+			@apply flex flex-col gap-0.5;
+
+			.sidenav-submenu-trigger {
+				@apply w-full cursor-pointer rounded-ui outline-none;
+				@apply transition-all duration-200;
+				@apply hover:bg-muted/50;
+				@apply justify-start;
+			}
+
+			.sidenav-submenu-content {
+				@apply ml-6 flex flex-col gap-0.5 border-l border-muted pl-2;
+
+				.sidenav-subitem {
+					@apply text-sm pl-2;
+				}
+			}
+		}
+	}
+}

package/dist/navigation/css/tabs.css

@@ -0,0 +1,118 @@
+@layer components {
+	.tabs {
+		@apply flex relative;
+		&.is-top {
+			@apply flex-col;
+		}
+		&.is-bottom {
+			@apply flex-col-reverse;
+		}
+		&.is-start {
+			@apply flex-row h-fit gap-1;
+			.tabs-list {
+				@apply flex-col;
+			}
+		}
+		&.is-end {
+			@apply flex-row-reverse h-fit gap-1;
+			.tabs-list {
+				@apply flex-col;
+			}
+		}
+		.tabs-list {
+			@apply flex w-auto max-w-min overflow-x-auto scrollbar-hide gap-2 p-1 relative select-none;
+			&.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;
+					}
+				}
+			}
+			&.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;
+					}
+				}
+			}
+			&.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;
+					}
+				}
+			}
+			&.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-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-ghost {
+				.tab {
+					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative;
+					&.on-active {
+						@apply text-primary;
+					}
+				}
+			}
+			.tab {
+				.tabs-icon {
+					@apply mr-2 shrink-0 h-6 w-auto;
+				}
+				.tabs-label {
+					@apply whitespace-nowrap;
+				}
+			}
+		}
+		&.is-top,
+		&.is-bottom {
+			.tabs-list {
+				&.is-pill:not(.is-line) {
+					@apply rounded-full;
+					.tab {
+						@apply rounded-full;
+					}
+				}
+			}
+		}
+		&.is-start {
+			.tabs-list.is-line {
+				.tab.on-active {
+					@apply border-b-0 border-l-2 border-primary;
+				}
+			}
+		}
+		&.is-end {
+			.tabs-list.is-line {
+				.tab.on-active {
+					@apply border-b-0 border-r-2 border-primary;
+				}
+			}
+		}
+		.tabs-wrapper {
+			@apply flex flex-1 overflow-hidden relative;
+			.tabs-content {
+				@apply relative w-full;
+			}
+		}
+	}
+}

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

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

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

package/dist/overlay/Drawer.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import { popover } from '../utils/popover.js';
+	import type { Snippet } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { afterNavigate } from '$app/navigation';
+	import { Dismiss24RegularIcon } from '../icons/index.js';
+	import { Icon } from '../index.js';
+
+	type Props = {
+		open: boolean;
+		onclose?: () => void;
+		position?: 'start' | 'end' | 'top' | 'bottom';
+		children: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+		class?: string;
+		headerClass?: string;
+		footerClass?: string;
+		bodyClass?: string;
+		variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+		disableOverlayClose?: boolean;
+		hideCloseButton?: boolean;
+		isSolid?: boolean;
+	};
+
+	let {
+		open = $bindable(),
+		onclose,
+		position = 'start',
+		header,
+		footer,
+		children,
+		class: className,
+		headerClass,
+		bodyClass,
+		footerClass,
+		variant = 'ghost',
+		disableOverlayClose,
+		hideCloseButton,
+		isSolid
+	}: Props = $props();
+
+	const positionClasses = {
+		start: 'is-start',
+		end: 'is-end',
+		top: 'is-top',
+		bottom: 'is-bottom'
+	};
+
+	const variants = {
+		ghost: 'is-ghost',
+		surface: 'is-surface',
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted'
+	};
+
+	let openDrawer = $state(false);
+	let openContent = $state(false);
+
+	const handleOverlayClick = () => {
+		if (!disableOverlayClose) {
+			open = false;
+		}
+	};
+
+	$effect(() => {
+		afterNavigate(() => {
+			if (open) {
+				open = false;
+			}
+		});
+	});
+
+	$effect(() => {
+		if (open) {
+			openDrawer = true;
+			setTimeout(() => {
+				openContent = true;
+			}, 100);
+		} else {
+			onclose?.();
+			openContent = false;
+			setTimeout(() => {
+				openDrawer = false;
+			}, 300);
+		}
+	});
+</script>
+
+{#if openDrawer}
+	<div transition:fade class="drawer-panel" use:popover>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- 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:is-active={openContent}
+		>
+			{#if header}
+				<div class={cn('drawer-header', headerClass)}>
+					{@render header()}
+				</div>
+			{/if}
+			<div class={cn('drawer-body', bodyClass)}>
+				{@render children()}
+			</div>
+			{#if footer}
+				<div class={cn('drawer-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>
+	</div>
+{/if}

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

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

package/dist/overlay/Dropdown.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { Item } from '../index.js';
+	import { onMount, type Snippet } from 'svelte';
+
+	type Option = {
+		id?: string | number;
+		label: string;
+		description?: string;
+		src?: string;
+		href?: string;
+		onclick?: (option: Option) => void;
+	};
+
+	type Props = {
+		options: Option[];
+		variant?: 'primary' | 'secondary' | 'muted';
+		children: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+	};
+
+	const { children, header, footer, options, variant = 'primary' }: Props = $props();
+
+	let isOpen = $state(false);
+	let controlElement = $state<HTMLElement>();
+	let contentEl = $state<HTMLElement>();
+	let optionsEl = $state<HTMLElement>();
+	let position = $state({
+		top: 0,
+		left: 0,
+		width: 'auto',
+		isBottomHalf: false
+	});
+	const style = $derived(
+		`top: ${position.top}px; left: ${position.left}px; width: ${position.width}px; transform-origin: ${position.isBottomHalf ? 'bottom' : 'top'} center;`
+	);
+
+	const updatePosition = () => {
+		if (!controlElement || !contentEl) return;
+
+		const rect = controlElement.getBoundingClientRect();
+		const windowHeight = window.innerHeight;
+		const contentHeight = contentEl.getBoundingClientRect().height;
+		const contentWidth = contentEl?.getBoundingClientRect().width;
+		const centerX = rect.left + rect.width / 2;
+		const isBottomHalf = rect.top + rect.height / 2 > windowHeight / 2;
+		const isRightHalf = centerX > window.innerWidth / 2;
+
+		const top = isBottomHalf ? rect.top - contentHeight - 8 : rect.top + rect.height;
+		const left = isRightHalf
+			? rect.left - contentWidth + rect.width + window.scrollX
+			: rect.left + window.scrollX;
+		position = {
+			top: top,
+			left: left,
+			width: 'auto',
+			isBottomHalf
+		};
+	};
+
+	const toggleDropdown = () => {
+		if (!isOpen) {
+			startEventListeners();
+			updatePosition();
+			isOpen = true;
+		} else {
+			stopEventListeners();
+			isOpen = false;
+		}
+	};
+
+	const handleClickOutside = (event: Event) => {
+		if (
+			isOpen &&
+			!controlElement?.contains(event.target as Node) &&
+			!contentEl?.contains(event.target as Node)
+		) {
+			isOpen = false;
+		}
+	};
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if (!isOpen) return;
+	};
+
+	const startEventListeners = () => {
+		window.addEventListener('resize', updatePosition);
+		window.addEventListener('scroll', updatePosition, true);
+		document.addEventListener('click', handleClickOutside);
+		document.addEventListener('keydown', handleKeyDown);
+	};
+
+	const stopEventListeners = () => {
+		window.removeEventListener('resize', updatePosition);
+		window.removeEventListener('scroll', updatePosition, true);
+		document.removeEventListener('click', handleClickOutside);
+		document.removeEventListener('keydown', handleKeyDown);
+	};
+
+	onMount(() => {
+		return () => stopEventListeners();
+	});
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="dropdown" bind:this={controlElement} onclick={toggleDropdown}>
+	{@render children()}
+</div>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class:is-active={isOpen}
+	class="dropdown-popover"
+	bind:this={contentEl}
+	{style}
+	onclick={() => (isOpen = false)}
+>
+	{@render header?.()}
+	<ul class="dropdown-options" bind:this={optionsEl}>
+		{#each options as item}
+			<li>
+				<Item
+					label={item.label}
+					src={item.src}
+					description={item.description}
+					id={item.id}
+					href={item.href}
+					onclick={() => item.onclick?.(item)}
+					{variant}
+					size="sm"
+					isCompact
+				/>
+			</li>
+		{/each}
+	</ul>
+	{@render footer?.()}
+</div>