ui-svelte 0.1.0

package/dist/navigation/SideNav.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import type { IconData } from '../display/Icon.svelte';
+	import { ChevronRight24RegularIcon } from '../icons/index.js';
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
+
+	type SubmenuItem = {
+		label: string;
+		href?: string;
+		onclick?: (item: SubmenuItem) => void;
+		description?: string;
+		status?: string | Snippet;
+		icon?: IconData;
+	};
+
+	type NavItem = {
+		type?: 'item' | 'divider' | 'header' | 'submenu';
+		label?: string;
+		description?: string;
+		href?: string;
+		onclick?: (item: NavItem) => void;
+		status?: string | Snippet;
+		icon?: IconData;
+		subitems?: SubmenuItem[];
+		open?: boolean;
+	};
+
+	type Props = {
+		items: NavItem[];
+		variant?: 'primary' | 'secondary' | 'muted';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		isWide?: boolean;
+		isCompact?: boolean;
+		isCollapsible?: boolean;
+	};
+
+	const {
+		items = [],
+		class: className,
+		variant = 'primary',
+		size = 'md',
+		isWide = false,
+		isCompact = false,
+		isCollapsible = false
+	}: Props = $props();
+
+	let openSubmenus = $state<Record<number, boolean>>(
+		items.reduce(
+			(acc, item, index) => {
+				if (item.type === 'submenu' && item.open) {
+					acc[index] = true;
+				}
+				return acc;
+			},
+			{} as Record<number, boolean>
+		)
+	);
+
+	let isExpanded = $state(!isCollapsible);
+
+	const variantClasses = {
+		primary: 'sidenav-primary',
+		secondary: 'sidenav-secondary',
+		muted: 'sidenav-muted'
+	};
+
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	function toggleSubmenu(index: number) {
+		openSubmenus[index] = !openSubmenus[index];
+	}
+
+	function isItemActive(href?: string): boolean {
+		if (!href) return false;
+		return page.url.pathname.includes(href);
+	}
+
+	function toggleExpand() {
+		if (isCollapsible) {
+			isExpanded = !isExpanded;
+		}
+	}
+</script>
+
+{#snippet navItemContent(item: NavItem | SubmenuItem, isSubitem = false)}
+	<div class="sidenav-content">
+		<div class="sidenav-label">{item.label}</div>
+		{#if item.description && (isExpanded || !isCollapsible)}
+			<div class="sidenav-description">{item.description}</div>
+		{/if}
+	</div>
+	{#if item.status && (isExpanded || !isCollapsible)}
+		<div class="sidenav-status-wrapper">
+			{#if typeof item.status === 'string'}
+				<span class="sidenav-status">{item.status}</span>
+			{:else}
+				{@render item.status()}
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<nav
+	class={cn(
+		'sidenav',
+		variantClasses[variant],
+		sizeClasses[size],
+		isCompact && 'is-compact',
+		isCollapsible && 'is-collapsible',
+		!isExpanded && 'is-collapsed',
+		className
+	)}
+	onmouseenter={() => isCollapsible && (isExpanded = true)}
+	onmouseleave={() => isCollapsible && (isExpanded = false)}
+>
+	{#each items as item, index}
+		{#if item.type === 'divider'}
+			<div class="sidenav-divider"></div>
+		{:else if item.type === 'header'}
+			{#if item.href || item.onclick}
+				{#if item.href}
+					<a
+						href={item.href}
+						class={cn('sidenav-header sidenav-header-link', isItemActive(item.href) && 'is-active')}
+					>
+						{#if item.icon}
+							<Icon icon={item.icon} />
+						{/if}
+						{#if isExpanded || !isCollapsible}
+							<div class="sidenav-header-content">
+								<div class="sidenav-header-label">{item.label}</div>
+								{#if item.description}
+									<div class="sidenav-header-description">{item.description}</div>
+								{/if}
+							</div>
+						{/if}
+					</a>
+				{:else}
+					<button
+						type="button"
+						class="sidenav-header sidenav-header-link"
+						onclick={() => item.onclick?.(item)}
+					>
+						{#if item.icon}
+							<Icon icon={item.icon} />
+						{/if}
+						{#if isExpanded || !isCollapsible}
+							<div class="sidenav-header-content">
+								<div class="sidenav-header-label">{item.label}</div>
+								{#if item.description}
+									<div class="sidenav-header-description">{item.description}</div>
+								{/if}
+							</div>
+						{/if}
+					</button>
+				{/if}
+			{:else}
+				<div class="sidenav-header">
+					{#if item.icon}
+						<Icon icon={item.icon} />
+					{/if}
+					{#if isExpanded || !isCollapsible}
+						<div class="sidenav-header-content">
+							<div class="sidenav-header-label">{item.label}</div>
+							{#if item.description}
+								<div class="sidenav-header-description">{item.description}</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		{:else if item.type === 'submenu'}
+			<div class="sidenav-submenu-wrapper">
+				<button
+					type="button"
+					class="sidenav-header sidenav-submenu-trigger"
+					onclick={() => toggleSubmenu(index)}
+				>
+					{#if isExpanded || !isCollapsible}
+						<div class="sidenav-header-content">
+							<div class="sidenav-header-label">{item.label}</div>
+							{#if item.description}
+								<div class="sidenav-header-description">{item.description}</div>
+							{/if}
+						</div>
+					{/if}
+					{#if isExpanded || !isCollapsible}
+						<div class="sidenav-arrow-wrapper">
+							<Icon
+								icon={ChevronRight24RegularIcon}
+								class={cn('sidenav-arrow', openSubmenus[index] && 'is-open')}
+							/>
+						</div>
+					{/if}
+				</button>
+
+				{#if openSubmenus[index] && item.subitems && (isExpanded || !isCollapsible)}
+					<div transition:slide class="sidenav-submenu-content">
+						{#each item.subitems as subitem}
+							{#if subitem.href}
+								<a
+									href={subitem.href}
+									class={cn(
+										'sidenav-item sidenav-subitem',
+										isWide && 'is-wide',
+										isItemActive(subitem.href) && 'is-active'
+									)}
+								>
+									{@render navItemContent(subitem, true)}
+								</a>
+							{:else}
+								<button
+									type="button"
+									class="sidenav-item sidenav-subitem"
+									onclick={() => subitem.onclick?.(subitem)}
+								>
+									{@render navItemContent(subitem, true)}
+								</button>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{:else if item.href}
+			<a
+				href={item.href}
+				class={cn('sidenav-item', isWide && 'is-wide', isItemActive(item.href) && 'is-active')}
+			>
+				{@render navItemContent(item)}
+			</a>
+		{:else}
+			<button
+				type="button"
+				class={cn('sidenav-item', isWide && 'is-wide')}
+				onclick={() => item.onclick?.(item)}
+			>
+				{@render navItemContent(item)}
+			</button>
+		{/if}
+	{/each}
+</nav>

package/dist/navigation/Tabs.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type Tab = {
+		id: string;
+		label: string;
+		content: Snippet | string;
+	};
+	type Props = {
+		tabs: Tab[];
+		position?: 'top' | 'bottom' | 'start' | 'end';
+		variant?: 'primary' | 'secondary' | 'muted' | 'outline' | 'line' | 'ghost';
+		pill?: boolean;
+		class?: string;
+		tabListClass?: string;
+		tabClass?: string;
+		tabContentClass?: string;
+	};
+	const {
+		class: className,
+		tabClass,
+		tabListClass,
+		tabContentClass,
+		tabs,
+		variant = 'muted',
+		pill,
+		position = 'top'
+	}: Props = $props();
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		outline: 'is-outline',
+		line: 'is-line',
+		ghost: 'is-ghost'
+	};
+
+	const positionClasses = {
+		top: 'is-top',
+		bottom: 'is-bottom',
+		start: 'is-start',
+		end: 'is-end'
+	};
+
+	let activeTab = $state(tabs[0]);
+
+	function handleTabChange(tab: Tab) {
+		activeTab = tab;
+	}
+</script>
+
+<div class={cn('tabs', positionClasses[position], className)}>
+	<div class={cn('tabs-list', variantClasses[variant], pill && 'is-pill', tabListClass)}>
+		{#each tabs as tab}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class:on-active={activeTab.id === tab.id}
+				class={cn('tab', tabClass)}
+				onclick={() => handleTabChange(tab)}
+			>
+				<span class="tabs-label">{tab.label}</span>
+			</div>
+		{/each}
+	</div>
+	<div class={cn('tabs-wrapper', tabContentClass)}>
+		{#key activeTab.id}
+			<div class="tabs-content">
+				{#if typeof activeTab.content === 'string'}
+					{activeTab.content}
+				{:else}
+					{@render activeTab.content()}
+				{/if}
+			</div>
+		{/key}
+	</div>
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Tab = {
+    id: string;
+    label: string;
+    content: Snippet | string;
+};
+type Props = {
+    tabs: Tab[];
+    position?: 'top' | 'bottom' | 'start' | 'end';
+    variant?: 'primary' | 'secondary' | 'muted' | 'outline' | 'line' | 'ghost';
+    pill?: boolean;
+    class?: string;
+    tabListClass?: string;
+    tabClass?: string;
+    tabContentClass?: string;
+};
+declare const Tabs: import("svelte").Component<Props, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

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

@@ -0,0 +1,168 @@
+@layer components {
+	.navmenu {
+		@apply flex items-center gap-1 text-on-background;
+
+		.navmenu-item {
+			@apply relative flex items-center gap-2 rounded-ui px-4 py-2;
+			@apply cursor-pointer select-none outline-none;
+			@apply transition-all duration-200;
+			@apply hover:bg-muted;
+
+			.navmenu-icon {
+				@apply h-5 w-5 shrink-0;
+			}
+
+			.navmenu-label {
+				@apply font-medium text-sm whitespace-nowrap;
+			}
+
+			.navmenu-arrow {
+				@apply h-4 w-4 transition-transform duration-200;
+
+				&.is-open {
+					@apply rotate-180;
+				}
+			}
+
+			&.is-active {
+				@apply bg-muted;
+			}
+		}
+
+		&.is-sm {
+			@apply gap-0.5;
+
+			.navmenu-item {
+				@apply gap-1.5 px-3 py-1.5 text-xs;
+
+				.navmenu-icon {
+					@apply h-4 w-4;
+				}
+
+				.navmenu-arrow {
+					@apply h-3 w-3;
+				}
+			}
+		}
+
+		&.is-md {
+			@apply gap-1;
+
+			.navmenu-item {
+				@apply gap-2 px-4 py-2 text-sm;
+
+				.navmenu-icon {
+					@apply h-5 w-5;
+				}
+
+				.navmenu-arrow {
+					@apply h-4 w-4;
+				}
+			}
+		}
+
+		&.is-lg {
+			@apply gap-1.5;
+
+			.navmenu-item {
+				@apply gap-2.5 px-5 py-2.5 text-base;
+
+				.navmenu-icon {
+					@apply h-6 w-6;
+				}
+
+				.navmenu-arrow {
+					@apply h-5 w-5;
+				}
+			}
+		}
+
+		&.navmenu-primary {
+			.navmenu-item.is-active {
+				@apply bg-primary/10 text-primary;
+
+				.navmenu-icon {
+					@apply text-primary;
+				}
+			}
+		}
+
+		&.navmenu-secondary {
+			.navmenu-item.is-active {
+				@apply bg-secondary/10 text-secondary;
+
+				.navmenu-icon {
+					@apply text-secondary;
+				}
+			}
+		}
+
+		&.navmenu-muted {
+			.navmenu-item.is-active {
+				@apply bg-muted text-on-muted;
+
+				.navmenu-icon {
+					@apply text-on-muted;
+				}
+			}
+		}
+	}
+
+	.navmenu-popover {
+		@apply 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-sm shadow-muted border border-muted;
+		position: fixed;
+		z-index: 9999;
+		max-height: 80vh;
+		overflow-y: auto;
+
+		&.is-active {
+			@apply visible opacity-100;
+		}
+
+		&.is-megamenu {
+			@apply min-w-[600px] max-w-4xl;
+		}
+
+		.navmenu-popover-content {
+			@apply flex flex-col gap-1;
+		}
+
+		.navmenu-submenu-item {
+			@apply flex items-center gap-2 rounded-ui px-3 py-2;
+			@apply cursor-pointer select-none outline-none;
+			@apply transition-all duration-200;
+			@apply hover:bg-muted;
+
+			.navmenu-submenu-icon {
+				@apply h-5 w-5 shrink-0;
+			}
+
+			.navmenu-submenu-content {
+				@apply flex flex-1 flex-col overflow-hidden;
+
+				.navmenu-submenu-label {
+					@apply font-medium text-sm;
+				}
+
+				.navmenu-submenu-description {
+					@apply text-xs text-on-muted/70;
+				}
+			}
+
+			&.is-active {
+				@apply bg-muted;
+			}
+		}
+
+		.navmenu-divider {
+			@apply my-1 h-px w-full bg-muted;
+		}
+
+		.navmenu-header {
+			@apply px-3 py-2 text-xs font-semibold text-on-muted/70 uppercase tracking-wide;
+		}
+	}
+}