ui-svelte 0.1.0

package/dist/layout/FooterLinks.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { cn } from '../utils/class-names.js';
+
+	type FooterLink = {
+		label: string;
+		href: string;
+	};
+
+	type Props = {
+		links: FooterLink[];
+		class?: string;
+	};
+
+	const { links = [], class: className }: Props = $props();
+
+	function isLinkActive(href: string): boolean {
+		return page.url.pathname === href;
+	}
+</script>
+
+<div class={cn('footer-links', className)}>
+	{#each links as link}
+		<a href={link.href} class={cn('footer-link', isLinkActive(link.href) && 'is-active')}>
+			{link.label}
+		</a>
+	{/each}
+</div>

package/dist/layout/FooterLinks.svelte.d.ts

@@ -0,0 +1,11 @@
+type FooterLink = {
+    label: string;
+    href: string;
+};
+type Props = {
+    links: FooterLink[];
+    class?: string;
+};
+declare const FooterLinks: import("svelte").Component<Props, {}, "">;
+type FooterLinks = ReturnType<typeof FooterLinks>;
+export default FooterLinks;

package/dist/layout/Provider.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { onNavigate } from '$app/navigation';
+	import { Toast } from '../index.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+		toastSolid?: boolean;
+		toastIcon?: boolean;
+		toastPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	};
+
+	const { children, toastSolid, toastPosition, toastIcon }: Props = $props();
+
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) return;
+		return new Promise((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
+</script>
+
+<svelte:head>
+	<meta
+		name="viewport"
+		content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content"
+	/>
+	<script>
+		let themeState = 'light';
+
+		if (typeof window !== 'undefined' && localStorage) {
+			const storedTheme = localStorage.getItem('theme-preference');
+			if (storedTheme) {
+				themeState = storedTheme;
+			} else {
+				const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+				themeState = prefersDark ? '' : 'light';
+				localStorage.setItem('theme-preference', themeState);
+			}
+		}
+
+		if (themeState === 'dark') {
+			document.documentElement.classList.add('dark');
+		}
+	</script>
+</svelte:head>
+
+{@render children()}
+<Toast position={toastPosition} showIcon={toastIcon} isSolid={toastSolid} />

package/dist/layout/Provider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+    toastSolid?: boolean;
+    toastIcon?: boolean;
+    toastPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+declare const Provider: import("svelte").Component<Props, {}, "">;
+type Provider = ReturnType<typeof Provider>;
+export default Provider;

package/dist/layout/Scaffold.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+		appBar?: Snippet;
+		start?: Snippet;
+		end?: Snippet;
+		bottomBar?: Snippet;
+		bodyClass?: string;
+		mainClass?: string;
+		startClass?: string;
+		endClass?: string;
+	};
+
+	const {
+		children,
+		appBar,
+		start,
+		end,
+		bottomBar,
+		bodyClass,
+		mainClass,
+		startClass,
+		endClass
+	}: Props = $props();
+</script>
+
+{@render appBar?.()}
+<div class={cn('scaffold-body', bodyClass)}>
+	{#if start}
+		<aside class={cn('scaffold-start', startClass)}>
+			{@render start()}
+		</aside>
+	{/if}
+	<div class={cn('scaffold-main', mainClass)}>
+		{@render children()}
+	</div>
+	{#if end}
+		<aside class={cn('scaffold-end', endClass)}>
+			{@render end()}
+		</aside>
+	{/if}
+</div>
+{@render bottomBar?.()}

package/dist/layout/Scaffold.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+    appBar?: Snippet;
+    start?: Snippet;
+    end?: Snippet;
+    bottomBar?: Snippet;
+    bodyClass?: string;
+    mainClass?: string;
+    startClass?: string;
+    endClass?: string;
+};
+declare const Scaffold: import("svelte").Component<Props, {}, "">;
+type Scaffold = ReturnType<typeof Scaffold>;
+export default Scaffold;

package/dist/layout/Sidebar.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+		class?: string;
+		contentClass?: string;
+		headerClass?: string;
+		footerClass?: string;
+	};
+
+	const {
+		children,
+		header,
+		footer,
+		class: className,
+		contentClass,
+		headerClass,
+		footerClass
+	}: Props = $props();
+</script>
+
+<aside class={cn('sidebar', className)}>
+	{#if header}
+		<div class={cn('sidebar-header', headerClass)}>
+			{@render header()}
+		</div>
+	{/if}
+	<div class={cn('sidebar-body', contentClass)}>
+		{@render children()}
+	</div>
+	{#if footer}
+		<div class={cn('sidebar-footer', footerClass)}>
+			{@render footer()}
+		</div>
+	{/if}
+</aside>

package/dist/layout/Sidebar.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    class?: string;
+    contentClass?: string;
+    headerClass?: string;
+    footerClass?: string;
+};
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/layout/css/app-bar.css

@@ -0,0 +1,35 @@
+@layer components {
+	.appbar {
+		@apply w-full fixed top-0 z-30 bg-background;
+		@apply transition-all duration-300 ease-in-out;
+
+		&.is-blurred {
+			@apply backdrop-blur-lg bg-transparent;
+		}
+
+		&.is-bordered {
+			@apply border-b border-muted;
+		}
+
+		&.is-hidden {
+			@apply -translate-y-full;
+		}
+
+		.appbar-content {
+			@apply flex flex-nowrap items-center justify-between relative;
+			@apply w-full px-2 h-full min-h-12;
+
+			.appbar-start {
+				@apply flex flex-nowrap justify-start items-center p-2 md:p-3 gap-2 md:gap-3 relative;
+			}
+
+			.appbar-center {
+				@apply flex flex-1 flex-nowrap justify-center items-center p-2 md:p-3 gap-2 md:gap-3 relative;
+			}
+
+			.appbar-end {
+				@apply flex flex-nowrap justify-end items-center p-2 md:p-3 gap-2 md:gap-3 relative;
+			}
+		}
+	}
+}

package/dist/layout/css/bottom-bar.css

@@ -0,0 +1,12 @@
+@layer components {
+	.dock {
+		@apply w-full fixed bottom-0 z-30;
+		@apply transition-all duration-300 ease-in-out;
+
+		.dock-content {
+			@apply w-full px-2 gap-4 relative;
+			@apply flex flex-row flex-nowrap items-center justify-between;
+			@apply overflow-hidden;
+		}
+	}
+}

package/dist/layout/css/footer-links.css

@@ -0,0 +1,17 @@
+@layer components {
+	.footer-links {
+		@apply column md:row items-start md:items-center gap-3 md:gap-6;
+
+		.footer-link {
+			@apply text-sm opacity-70;
+			@apply transition-all duration-200;
+			@apply hover:opacity-100;
+			@apply focus:outline-none;
+			@apply cursor-pointer select-none;
+
+			&.is-active {
+				@apply opacity-100 font-medium;
+			}
+		}
+	}
+}

package/dist/layout/css/footer.css

@@ -0,0 +1,35 @@
+@layer components {
+	.footer {
+		@apply w-full bg-background mt-auto;
+		@apply transition-all duration-300 ease-in-out;
+
+		&.is-blurred {
+			@apply backdrop-blur-lg bg-transparent;
+		}
+
+		&.is-bordered {
+			@apply border-t border-muted;
+		}
+
+		&.is-hidden {
+			@apply translate-y-full;
+		}
+
+		.footer-content {
+			@apply column md:row flex-nowrap items-center justify-between relative;
+			@apply w-full px-2 h-full min-h-12;
+
+			.footer-start {
+				@apply flex flex-nowrap justify-start items-center p-2 md:p-3 gap-2 md:gap-3 relative;
+			}
+
+			.footer-center {
+				@apply flex flex-1 flex-nowrap justify-center items-center p-2 md:p-3 gap-2 md:gap-3 relative;
+			}
+
+			.footer-end {
+				@apply flex flex-nowrap justify-end items-center p-2 md:p-3 gap-2 md:gap-3 relative;
+			}
+		}
+	}
+}

package/dist/layout/css/scaffold.css

@@ -0,0 +1,15 @@
+@layer components {
+	.scaffold-body {
+		@apply flex h-full w-full relative;
+		@apply bg-background text-on-background;
+		.scaffold-main {
+			@apply relative flex-1 flex flex-col min-w-0;
+		}
+		.scaffold-start {
+			@apply fixed z-10;
+		}
+		.scaffold-end {
+			@apply fixed right-0 z-10;
+		}
+	}
+}

package/dist/layout/css/sidebar.css

@@ -0,0 +1,17 @@
+@layer components {
+	.sidebar {
+		@apply flex h-full flex-col bg-background text-on-background;
+
+		.sidebar-header {
+			@apply flex flex-col gap-3 p-3;
+		}
+
+		.sidebar-footer {
+			@apply flex flex-col gap-3 p-3;
+		}
+
+		.sidebar-body {
+			@apply flex min-h-0 flex-1 flex-col gap-3 p-3 overflow-auto;
+		}
+	}
+}

package/dist/navigation/BottomNav.svelte.d.ts

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

@@ -0,0 +1,254 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { ChevronDown24RegularIcon } from '../icons/index.js';
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	type SubmenuItem = {
+		label: string;
+		description?: string;
+		href?: string;
+		onclick?: (item: SubmenuItem) => void;
+	};
+
+	type MenuItem = {
+		label: string;
+		description?: string;
+		href?: string;
+		onclick?: (item: MenuItem) => void;
+		subitems?: SubmenuItem[];
+		megamenu?: Snippet;
+		type?: 'item' | 'submenu' | 'megamenu';
+	};
+
+	type Props = {
+		items: MenuItem[];
+		variant?: 'primary' | 'secondary' | 'muted';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+	};
+
+	const { items = [], class: className, variant = 'primary', size = 'md' }: Props = $props();
+
+	let openSubmenuIndex = $state<number | null>(null);
+	let triggerElements = $state<Record<number, HTMLElement>>({});
+	let popoverElement = $state<HTMLElement>();
+	let position = $state({
+		top: 0,
+		left: 0,
+		width: 'auto',
+		isBottomHalf: false,
+		isMegamenu: false
+	});
+
+	const variantClasses = {
+		primary: 'navmenu-primary',
+		secondary: 'navmenu-secondary',
+		muted: 'navmenu-muted'
+	};
+
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	const style = $derived(
+		`top: ${position.top}px; left: ${position.left}px; ${position.width !== 'auto' ? `width: ${position.width}px;` : ''} transform-origin: ${position.isBottomHalf ? 'bottom' : 'top'} center;`
+	);
+
+	function isItemActive(href?: string): boolean {
+		if (!href) return false;
+		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
+	}
+
+	function hasActiveSubmenu(subitems?: SubmenuItem[]): boolean {
+		if (!subitems) return false;
+		return subitems.some((item) => isItemActive(item.href));
+	}
+
+	function updatePosition(index: number) {
+		const triggerEl = triggerElements[index];
+		if (!triggerEl || !popoverElement) return;
+
+		const rect = triggerEl.getBoundingClientRect();
+		const windowHeight = window.innerHeight;
+		const popoverHeight = popoverElement.getBoundingClientRect().height;
+		const isBottomHalf = rect.bottom + popoverHeight > windowHeight;
+		const isMegamenu = items[index]?.type === 'megamenu';
+
+		let left = rect.left + window.scrollX;
+		let width: number | 'auto' = 'auto';
+
+		if (isMegamenu) {
+			const popoverWidth = popoverElement.getBoundingClientRect().width;
+			left = rect.left + rect.width / 2 - popoverWidth / 2 + window.scrollX;
+
+			if (left < 8) left = 8;
+			if (left + popoverWidth > window.innerWidth - 8) {
+				left = window.innerWidth - popoverWidth - 8;
+			}
+		}
+
+		position = {
+			top: isBottomHalf ? rect.top - popoverHeight - 8 : rect.bottom + 8,
+			left,
+			width,
+			isBottomHalf,
+			isMegamenu
+		};
+	}
+
+	function toggleSubmenu(index: number) {
+		if (openSubmenuIndex === index) {
+			stopEventListeners();
+			openSubmenuIndex = null;
+		} else {
+			openSubmenuIndex = index;
+			startEventListeners();
+			requestAnimationFrame(() => updatePosition(index));
+		}
+	}
+
+	function handleClickOutside(event: Event) {
+		const target = event.target as Node;
+		const isInsideTrigger = Object.values(triggerElements).some((el) => el?.contains(target));
+		const isInsidePopover = popoverElement?.contains(target);
+
+		if (!isInsideTrigger && !isInsidePopover) {
+			openSubmenuIndex = null;
+			stopEventListeners();
+		}
+	}
+
+	function startEventListeners() {
+		window.addEventListener('resize', () => {
+			if (openSubmenuIndex !== null) updatePosition(openSubmenuIndex);
+		});
+		window.addEventListener(
+			'scroll',
+			() => {
+				if (openSubmenuIndex !== null) updatePosition(openSubmenuIndex);
+			},
+			true
+		);
+		document.addEventListener('click', handleClickOutside);
+	}
+
+	function stopEventListeners() {
+		window.removeEventListener('resize', () => {
+			if (openSubmenuIndex !== null) updatePosition(openSubmenuIndex);
+		});
+		window.removeEventListener(
+			'scroll',
+			() => {
+				if (openSubmenuIndex !== null) updatePosition(openSubmenuIndex);
+			},
+			true
+		);
+		document.removeEventListener('click', handleClickOutside);
+	}
+
+	function handleItemClick(item: MenuItem, index: number) {
+		if (item.subitems || item.megamenu) {
+			toggleSubmenu(index);
+		} else if (item.onclick) {
+			item.onclick(item);
+		}
+	}
+
+	function handleSubmenuItemClick(item: SubmenuItem) {
+		if (item.onclick) {
+			item.onclick(item);
+		}
+		openSubmenuIndex = null;
+		stopEventListeners();
+	}
+
+	onMount(() => {
+		return () => stopEventListeners();
+	});
+</script>
+
+<nav class={cn('navmenu', variantClasses[variant], sizeClasses[size], className)}>
+	{#each items as item, index}
+		{#if item.href && !item.subitems && !item.megamenu}
+			<a href={item.href} class={cn('navmenu-item', isItemActive(item.href) && 'is-active')}>
+				<span class="navmenu-label">{item.label}</span>
+			</a>
+		{:else}
+			<button
+				type="button"
+				class={cn(
+					'navmenu-item',
+					openSubmenuIndex === index && 'is-active',
+					hasActiveSubmenu(item.subitems) && 'is-active'
+				)}
+				bind:this={triggerElements[index]}
+				onclick={() => handleItemClick(item, index)}
+			>
+				<span class="navmenu-label">{item.label}</span>
+				{#if item.subitems || item.megamenu}
+					<Icon
+						icon={ChevronDown24RegularIcon}
+						class={cn('navmenu-arrow', openSubmenuIndex === index && 'is-open')}
+					/>
+				{/if}
+			</button>
+		{/if}
+	{/each}
+</nav>
+
+{#if openSubmenuIndex !== null}
+	{@const currentItem = items[openSubmenuIndex]}
+	<div
+		class={cn(
+			'navmenu-popover',
+			openSubmenuIndex !== null && 'is-active',
+			position.isMegamenu && 'is-megamenu'
+		)}
+		bind:this={popoverElement}
+		{style}
+	>
+		{#if currentItem?.megamenu}
+			{@render currentItem.megamenu()}
+		{:else if currentItem?.subitems}
+			<div class="navmenu-popover-content">
+				{#each currentItem.subitems as subitem}
+					{#if subitem.href}
+						<a
+							href={subitem.href}
+							class={cn('navmenu-submenu-item', isItemActive(subitem.href) && 'is-active')}
+							onclick={() => {
+								openSubmenuIndex = null;
+								stopEventListeners();
+							}}
+						>
+							<div class="navmenu-submenu-content">
+								<div class="navmenu-submenu-label">{subitem.label}</div>
+								{#if subitem.description}
+									<div class="navmenu-submenu-description">{subitem.description}</div>
+								{/if}
+							</div>
+						</a>
+					{:else}
+						<button
+							type="button"
+							class="navmenu-submenu-item"
+							onclick={() => handleSubmenuItemClick(subitem)}
+						>
+							<div class="navmenu-submenu-content">
+								<div class="navmenu-submenu-label">{subitem.label}</div>
+								{#if subitem.description}
+									<div class="navmenu-submenu-description">{subitem.description}</div>
+								{/if}
+							</div>
+						</button>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}