ui-svelte 0.2.11 → 0.2.13

package/dist/navigation/NavMenu.svelte

@@ -1,33 +1,39 @@
-<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';
+<script lang="ts" module>
+	import type { IconData } from '../index.js';
 
-	type SubmenuItem = {
+	export type NavMenuSubItem = {
 		label: string;
 		description?: string;
 		href?: string;
-		onclick?: (item: SubmenuItem) => void;
+		onclick?: (item: NavMenuSubItem) => void;
+		icon?: IconData;
 	};
 
-	type MenuItem = {
+	export type NavMenuItem = {
 		label: string;
 		description?: string;
 		href?: string;
-		onclick?: (item: MenuItem) => void;
-		subitems?: SubmenuItem[];
+		onclick?: (item: NavMenuItem) => void;
+		subitems?: NavMenuSubItem[];
 		megamenu?: Snippet;
 		type?: 'item' | 'submenu' | 'megamenu';
+		icon?: IconData;
 	};
+</script>
+
+<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 Props = {
-		items: MenuItem[];
+		items: NavMenuItem[];
 		size?: 'sm' | 'md' | 'lg';
-		isSolid?: boolean;
-		variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		variant?: 'solid' | 'soft' | 'ghost';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 		class?: string;
 	};
 
@@ -35,8 +41,8 @@
 		items = [],
 		class: className,
 		size = 'md',
-		isSolid = false,
-		variant = 'muted'
+		variant = 'ghost',
+		color = 'muted'
 	}: Props = $props();
 
 	let openSubmenuIndex = $state<number | null>(null);
@@ -56,9 +62,13 @@
 		lg: 'is-lg'
 	};
 
-	const solidClass = $derived(isSolid ? 'is-filled' : 'is-default');
-
 	const variantClasses = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		ghost: 'is-ghost'
+	};
+
+	const colorClasses = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
@@ -77,7 +87,7 @@
 		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
 	}
 
-	function hasActiveSubmenu(subitems?: SubmenuItem[]): boolean {
+	function hasActiveSubmenu(subitems?: NavMenuSubItem[]): boolean {
 		if (!subitems) return false;
 		return subitems.some((item) => isItemActive(item.href));
 	}
@@ -164,7 +174,7 @@
 		document.removeEventListener('click', handleClickOutside);
 	}
 
-	function handleItemClick(item: MenuItem, index: number) {
+	function handleItemClick(item: NavMenuItem, index: number) {
 		if (item.subitems || item.megamenu) {
 			toggleSubmenu(index);
 		} else if (item.onclick) {
@@ -172,7 +182,7 @@
 		}
 	}
 
-	function handleSubmenuItemClick(item: SubmenuItem) {
+	function handleSubmenuItemClick(item: NavMenuSubItem) {
 		if (item.onclick) {
 			item.onclick(item);
 		}
@@ -185,10 +195,15 @@
 	});
 </script>
 
-<nav class={cn('navmenu', sizeClasses[size], solidClass, variantClasses[variant], className)}>
+<nav
+	class={cn('navmenu', sizeClasses[size], variantClasses[variant], colorClasses[color], 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')}>
+				{#if item.icon}
+					<Icon icon={item.icon} class="navmenu-icon" />
+				{/if}
 				<span class="navmenu-label" data-text={item.label}>{item.label}</span>
 			</a>
 		{:else}
@@ -202,6 +217,9 @@
 				bind:this={triggerElements[index]}
 				onclick={() => handleItemClick(item, index)}
 			>
+				{#if item.icon}
+					<Icon icon={item.icon} class="navmenu-icon" />
+				{/if}
 				<span class="navmenu-label" data-text={item.label}>{item.label}</span>
 				{#if item.subitems || item.megamenu}
 					<Icon
@@ -240,6 +258,9 @@
 								stopEventListeners();
 							}}
 						>
+							{#if subitem.icon}
+								<Icon icon={subitem.icon} class="navmenu-submenu-icon" />
+							{/if}
 							<div class="navmenu-submenu-content">
 								<div class="navmenu-submenu-label">{subitem.label}</div>
 								{#if subitem.description}
@@ -253,6 +274,9 @@
 							class="navmenu-submenu-item"
 							onclick={() => handleSubmenuItemClick(subitem)}
 						>
+							{#if subitem.icon}
+								<Icon icon={subitem.icon} class="navmenu-submenu-icon" />
+							{/if}
 							<div class="navmenu-submenu-content">
 								<div class="navmenu-submenu-label">{subitem.label}</div>
 								{#if subitem.description}

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

@@ -0,0 +1,29 @@
+import type { IconData } from '../index.js';
+export type NavMenuSubItem = {
+    label: string;
+    description?: string;
+    href?: string;
+    onclick?: (item: NavMenuSubItem) => void;
+    icon?: IconData;
+};
+export type NavMenuItem = {
+    label: string;
+    description?: string;
+    href?: string;
+    onclick?: (item: NavMenuItem) => void;
+    subitems?: NavMenuSubItem[];
+    megamenu?: Snippet;
+    type?: 'item' | 'submenu' | 'megamenu';
+    icon?: IconData;
+};
+import type { Snippet } from 'svelte';
+type Props = {
+    items: NavMenuItem[];
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'solid' | 'soft' | 'ghost';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    class?: string;
+};
+declare const NavMenu: import("svelte").Component<Props, {}, "">;
+type NavMenu = ReturnType<typeof NavMenu>;
+export default NavMenu;

package/dist/navigation/Pagination.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { IconButton, Button } from '../index.js';
+	import { ArrowLeftRegularIcon, ArrowRightRegularIcon } from '../icons/index.js';
+	import { cn } from '../utils/class-names.js';
+
+	type Props = {
+		page: number;
+		totalPages: number;
+		onPageChange?: (page: number) => void;
+		onPrev?: () => void;
+		onNext?: () => void;
+		hasPrevPage?: boolean;
+		hasNextPage?: boolean;
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		align?: 'start' | 'center' | 'end';
+		class?: string;
+		hidePageNumbers?: boolean;
+	};
+
+	let {
+		page = 1,
+		totalPages = 1,
+		onPageChange,
+		onPrev,
+		onNext,
+		hasPrevPage,
+		hasNextPage,
+		color = 'primary',
+		variant = 'solid',
+		size = 'md',
+		align = 'center',
+		class: className,
+		hidePageNumbers
+	}: Props = $props();
+
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const aligns = {
+		start: 'is-start',
+		center: 'is-center',
+		end: 'is-end'
+	};
+
+	const getPageNumbers = (current: number, total: number): (number | string)[] => {
+		const pages: (number | string)[] = [];
+		const delta = 1;
+
+		if (total <= 7) {
+			for (let i = 1; i <= total; i++) {
+				pages.push(i);
+			}
+		} else {
+			pages.push(1);
+			const start = Math.max(2, current - delta);
+			const end = Math.min(total - 1, current + delta);
+
+			if (start > 2) {
+				pages.push('...');
+			}
+			for (let i = start; i <= end; i++) {
+				pages.push(i);
+			}
+
+			if (end < total - 1) {
+				pages.push('...');
+			}
+			pages.push(total);
+		}
+		return pages;
+	};
+
+	const pageNumbers = $derived(!hidePageNumbers ? getPageNumbers(page, totalPages) : []);
+
+	const canGoPrev = $derived(hasPrevPage ?? page > 1);
+	const canGoNext = $derived(hasNextPage ?? page < totalPages);
+
+	const handlePrev = () => {
+		if (onPrev) {
+			onPrev();
+		} else if (onPageChange && page > 1) {
+			onPageChange(page - 1);
+		}
+	};
+
+	const handleNext = () => {
+		if (onNext) {
+			onNext();
+		} else if (onPageChange && page < totalPages) {
+			onPageChange(page + 1);
+		}
+	};
+
+	const handlePageClick = (pageNum: number) => {
+		if (onPageChange) {
+			onPageChange(pageNum);
+		}
+	};
+
+	const alignStyles = {
+		start: 'flex-start',
+		center: 'center',
+		end: 'flex-end'
+	};
+
+	let baseClasses = $derived(cn('pagination', colors[color], className));
+</script>
+
+<div class={cn('pagination-container', aligns[align])}>
+	<div class={baseClasses}>
+		<IconButton
+			icon={ArrowLeftRegularIcon}
+			onclick={handlePrev}
+			isDisabled={!canGoPrev}
+			{color}
+			{variant}
+			{size}
+			class="pagination-btn pagination-nav"
+		/>
+
+		{#if !hidePageNumbers}
+			{#each pageNumbers as pageNum}
+				{#if pageNum === '...'}
+					<span class="pagination-ellipsis">...</span>
+				{:else}
+					<Button
+						onclick={() => handlePageClick(pageNum as number)}
+						color={pageNum === page ? color : 'muted'}
+						variant={pageNum === page ? variant : 'ghost'}
+						{size}
+						class="pagination-btn pagination-page"
+					>
+						{pageNum}
+					</Button>
+				{/if}
+			{/each}
+		{/if}
+
+		<IconButton
+			icon={ArrowRightRegularIcon}
+			onclick={handleNext}
+			isDisabled={!canGoNext}
+			{color}
+			{variant}
+			{size}
+			class="pagination-btn pagination-nav"
+		/>
+	</div>
+</div>

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

@@ -0,0 +1,18 @@
+type Props = {
+    page: number;
+    totalPages: number;
+    onPageChange?: (page: number) => void;
+    onPrev?: () => void;
+    onNext?: () => void;
+    hasPrevPage?: boolean;
+    hasNextPage?: boolean;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    align?: 'start' | 'center' | 'end';
+    class?: string;
+    hidePageNumbers?: boolean;
+};
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/navigation/SideNav.svelte

@@ -34,10 +34,9 @@
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
 		isWide?: boolean;
-		isCompact?: boolean;
 		isCollapsible?: boolean;
-		isSolid?: boolean;
-		variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		variant?: 'solid' | 'soft' | 'ghost';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 	};
 
 	const {
@@ -45,10 +44,9 @@
 		class: className,
 		size = 'md',
 		isWide,
-		isCompact,
 		isCollapsible,
-		isSolid = false,
-		variant = 'muted'
+		variant = 'ghost',
+		color = 'muted'
 	}: Props = $props();
 
 	let openSubmenus = $state<Record<number, boolean>>({});
@@ -78,9 +76,13 @@
 		lg: 'is-lg'
 	};
 
-	const solidClass = $derived(isSolid ? 'is-solid' : '');
-
 	const variantClasses = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		ghost: 'is-ghost'
+	};
+
+	const colorClasses = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
@@ -106,9 +108,17 @@
 	}
 </script>
 
+{#snippet navItemIcon(icon: IconData | undefined)}
+	{#if icon}
+		<div class="sidenav-icon-wrapper">
+			<Icon {icon} class="sidenav-icon" />
+		</div>
+	{/if}
+{/snippet}
+
 {#snippet navItemContent(item: SideNavItem | SideNavSubItem, isSubitem = false)}
 	<div class="sidenav-content">
-		<div class="sidenav-label">{item.label}</div>
+		<div class="sidenav-label" data-text={item.label}>{item.label}</div>
 		{#if item.description && (isExpanded || !isCollapsible)}
 			<div class="sidenav-description">{item.description}</div>
 		{/if}
@@ -128,9 +138,8 @@
 	class={cn(
 		'sidenav',
 		sizeClasses[size],
-		solidClass,
-		isSolid && variantClasses[variant],
-		isCompact && 'is-compact',
+		variantClasses[variant],
+		colorClasses[color],
 		isCollapsible && 'is-collapsible',
 		!isExpanded && 'is-collapsed',
 		className
@@ -148,9 +157,7 @@
 						href={item.href}
 						class={cn('sidenav-header sidenav-header-link', isItemActive(item.href) && 'is-active')}
 					>
-						{#if item.icon}
-							<Icon icon={item.icon} />
-						{/if}
+						{@render navItemIcon(item.icon)}
 						{#if isExpanded || !isCollapsible}
 							<div class="sidenav-header-content">
 								<div class="sidenav-header-label">{item.label}</div>
@@ -166,9 +173,7 @@
 						class="sidenav-header sidenav-header-link"
 						onclick={() => item.onclick?.(item)}
 					>
-						{#if item.icon}
-							<Icon icon={item.icon} />
-						{/if}
+						{@render navItemIcon(item.icon)}
 						{#if isExpanded || !isCollapsible}
 							<div class="sidenav-header-content">
 								<div class="sidenav-header-label">{item.label}</div>
@@ -181,9 +186,7 @@
 				{/if}
 			{:else}
 				<div class="sidenav-header">
-					{#if item.icon}
-						<Icon icon={item.icon} />
-					{/if}
+					{@render navItemIcon(item.icon)}
 					{#if isExpanded || !isCollapsible}
 						<div class="sidenav-header-content">
 							<div class="sidenav-header-label">{item.label}</div>
@@ -201,9 +204,7 @@
 					class="sidenav-header sidenav-submenu-trigger"
 					onclick={() => toggleSubmenu(index)}
 				>
-					{#if item.icon}
-						<Icon icon={item.icon} />
-					{/if}
+					{@render navItemIcon(item.icon)}
 					{#if isExpanded || !isCollapsible}
 						<div class="sidenav-header-content">
 							<div class="sidenav-header-label">{item.label}</div>
@@ -234,14 +235,16 @@
 										isItemActive(subitem.href) && 'is-active'
 									)}
 								>
+									{@render navItemIcon(subitem.icon)}
 									{@render navItemContent(subitem, true)}
 								</a>
 							{:else}
 								<button
 									type="button"
-									class="sidenav-item sidenav-subitem"
+									class={cn('sidenav-item sidenav-subitem', isWide && 'is-wide')}
 									onclick={() => subitem.onclick?.(subitem)}
 								>
+									{@render navItemIcon(subitem.icon)}
 									{@render navItemContent(subitem, true)}
 								</button>
 							{/if}
@@ -254,6 +257,7 @@
 				href={item.href}
 				class={cn('sidenav-item', isWide && 'is-wide', isItemActive(item.href) && 'is-active')}
 			>
+				{@render navItemIcon(item.icon)}
 				{@render navItemContent(item)}
 			</a>
 		{:else}
@@ -262,6 +266,7 @@
 				class={cn('sidenav-item', isWide && 'is-wide')}
 				onclick={() => item.onclick?.(item)}
 			>
+				{@render navItemIcon(item.icon)}
 				{@render navItemContent(item)}
 			</button>
 		{/if}

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

@@ -24,10 +24,9 @@ type Props = {
     size?: 'sm' | 'md' | 'lg';
     class?: string;
     isWide?: boolean;
-    isCompact?: boolean;
     isCollapsible?: boolean;
-    isSolid?: boolean;
-    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    variant?: 'solid' | 'soft' | 'ghost';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 };
 declare const SideNav: import("svelte").Component<Props, {}, "">;
 type SideNav = ReturnType<typeof SideNav>;

package/dist/navigation/Tabs.svelte

@@ -10,8 +10,8 @@
 	type Props = {
 		tabs: Tab[];
 		position?: 'top' | 'bottom' | 'start' | 'end';
-		variant?: 'primary' | 'secondary' | 'muted' | 'outline' | 'line' | 'ghost';
-		pill?: boolean;
+		variant?: 'solid' | 'outline' | 'line' | 'ghost' | 'pills';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
 		rootClass?: string;
 		tabListClass?: string;
 		tabClass?: string;
@@ -23,18 +23,27 @@
 		tabListClass,
 		tabContentClass,
 		tabs,
-		variant = 'muted',
-		pill,
+		variant = 'solid',
+		color = 'muted',
 		position = 'top'
 	}: Props = $props();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
 		outline: 'is-outline',
 		line: 'is-line',
-		ghost: 'is-ghost'
+		ghost: 'is-ghost',
+		pills: 'is-pills'
 	};
 
 	const positionClasses = {
@@ -44,6 +53,7 @@
 		end: 'is-end'
 	};
 
+	// svelte-ignore state_referenced_locally
 	let activeTab = $state(tabs[0]);
 
 	function handleTabChange(tab: Tab) {
@@ -52,7 +62,7 @@
 </script>
 
 <div class={cn('tabs', positionClasses[position], rootClass)}>
-	<div class={cn('tabs-list', variantClasses[variant], pill && 'is-pill', tabListClass)}>
+	<div class={cn('tabs-list', variants[variant], colors[color], tabListClass)}>
 		{#each tabs as tab}
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->

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

@@ -7,8 +7,8 @@ type Tab = {
 type Props = {
     tabs: Tab[];
     position?: 'top' | 'bottom' | 'start' | 'end';
-    variant?: 'primary' | 'secondary' | 'muted' | 'outline' | 'line' | 'ghost';
-    pill?: boolean;
+    variant?: 'solid' | 'outline' | 'line' | 'ghost' | 'pills';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
     rootClass?: string;
     tabListClass?: string;
     tabClass?: string;