ui-svelte 0.2.1 → 0.2.2

package/dist/display/Marquee.svelte

@@ -17,13 +17,13 @@
 		fade?: boolean;
 		fadeColor?: string;
 		gap?: string;
-		class?: string;
+		rootClass?: string;
 		itemClass?: string;
 		children?: Snippet;
 	};
 
 	const {
-		class: className,
+		rootClass,
 		itemClass,
 		items = [],
 		speed = 'normal',
@@ -106,7 +106,7 @@
 </script>
 
 <div
-	class={cn('marquee', isVertical && 'is-vertical', fade && 'has-fade', className)}
+	class={cn('marquee', isVertical && 'is-vertical', fade && 'has-fade', rootClass)}
 	bind:this={containerEl}
 	onmouseenter={handleMouseEnter}
 	onmouseleave={handleMouseLeave}

package/dist/display/Marquee.svelte.d.ts

@@ -12,7 +12,7 @@ type Props = {
     fade?: boolean;
     fadeColor?: string;
     gap?: string;
-    class?: string;
+    rootClass?: string;
     itemClass?: string;
     children?: Snippet;
 };

package/dist/display/Section.svelte

@@ -3,7 +3,7 @@
 	import type { Snippet } from 'svelte';
 
 	type Props = {
-		class?: string;
+		rootClass?: string;
 		bodyClass?: string;
 		coverClass?: string;
 		overlayClass?: string;
@@ -25,7 +25,7 @@
 	};
 
 	const {
-		class: className,
+		rootClass,
 		bodyClass,
 		coverClass,
 		overlayClass,
@@ -56,7 +56,7 @@
 		variantClasses[variant],
 		isSolid && 'is-solid',
 		isBoxed && 'boxed',
-		className
+		rootClass
 	)}
 >
 	{#if cover}

package/dist/display/Section.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 type Props = {
-    class?: string;
+    rootClass?: string;
     bodyClass?: string;
     coverClass?: string;
     overlayClass?: string;

package/dist/display/css/alert.css

@@ -1,6 +1,6 @@
 @layer components {
 	.alert {
-		@apply flex rounded-ui text-sm w-full p-2 gap-2;
+		@apply flex rounded-ui text-sm w-full px-4 py-2 md:px-6 md:py-4 gap-4;
 
 		&.is-solid {
 			&.is-success {

package/dist/display/css/card.css

@@ -8,75 +8,22 @@
 		}
 	}
 
-	.card.has-divider {
-		.card-header {
-			@apply border-b;
-		}
-		.card-footer {
-			@apply border-t;
-		}
-	}
-
-	.card.has-shadow {
-		@apply shadow-sm shadow-muted;
-	}
-
 	.card.is-primary {
 		@apply bg-on-primary text-primary;
 	}
 
-	.card.is-primary.has-divider {
-		.card-header {
-			@apply border-primary;
-		}
-
-		.card-footer {
-			@apply border-primary;
-		}
-	}
-
 	.card.is-primary.is-solid {
 		@apply bg-primary text-on-primary;
 	}
 
-	.card.is-primary.is-solid.has-divider {
-		.card-header {
-			@apply border-on-primary;
-		}
-
-		.card-footer {
-			@apply border-on-primary;
-		}
-	}
-
 	.card.is-secondary {
 		@apply bg-on-secondary text-secondary;
 	}
 
-	.card.is-secondary.has-divider {
-		.card-header {
-			@apply border-secondary;
-		}
-
-		.card-footer {
-			@apply border-secondary;
-		}
-	}
-
 	.card.is-secondary.is-solid {
 		@apply bg-secondary text-on-secondary;
 	}
 
-	.card.is-secondary.is-solid.has-divider {
-		.card-header {
-			@apply border-on-secondary;
-		}
-
-		.card-footer {
-			@apply border-on-secondary;
-		}
-	}
-
 	.card.is-success {
 		@apply bg-on-success text-success;
 	}
@@ -85,16 +32,6 @@
 		@apply bg-success text-on-success;
 	}
 
-	.card.is-success.is-solid.has-divider {
-		.card-header {
-			@apply border-on-success;
-		}
-
-		.card-footer {
-			@apply border-on-success;
-		}
-	}
-
 	.card.is-info {
 		@apply bg-on-info text-info;
 	}
@@ -103,16 +40,6 @@
 		@apply bg-info text-on-info;
 	}
 
-	.card.is-info.is-solid.has-divider {
-		.card-header {
-			@apply border-on-info;
-		}
-
-		.card-footer {
-			@apply border-on-info;
-		}
-	}
-
 	.card.is-warning {
 		@apply bg-on-warning text-warning;
 	}
@@ -121,16 +48,6 @@
 		@apply bg-warning text-on-warning;
 	}
 
-	.card.is-warning.is-solid.has-divider {
-		.card-header {
-			@apply border-on-warning;
-		}
-
-		.card-footer {
-			@apply border-on-warning;
-		}
-	}
-
 	.card.is-danger {
 		@apply bg-on-danger text-danger;
 	}
@@ -139,58 +56,18 @@
 		@apply bg-danger text-on-danger;
 	}
 
-	.card.is-danger.is-solid.has-divider {
-		.card-header {
-			@apply border-on-danger;
-		}
-
-		.card-footer {
-			@apply border-on-danger;
-		}
-	}
-
 	.card.is-muted {
 		@apply bg-muted text-on-muted;
 	}
 
-	.card.is-muted.has-divider {
-		.card-header {
-			@apply border-on-muted;
-		}
-
-		.card-footer {
-			@apply border-on-muted;
-		}
-	}
-
 	.card.is-muted.is-solid {
 		@apply bg-on-muted text-muted;
 	}
 
-	.card.is-muted.is-solid.has-divider {
-		.card-header {
-			@apply border-muted;
-		}
-
-		.card-footer {
-			@apply border-muted;
-		}
-	}
-
 	.card.is-outlined {
 		@apply border border-muted;
 	}
 
-	.card.is-outlined.has-divider {
-		.card-header {
-			@apply border-muted;
-		}
-
-		.card-footer {
-			@apply border-muted;
-		}
-	}
-
 	.card.is-surface {
 		@apply bg-surface text-on-surface;
 	}
@@ -218,14 +95,18 @@
 	}
 
 	.card-body {
-		@apply flex-1 w-full column p-3 gap-3;
+		@apply flex-1 w-full p-4 md:p-6;
+	}
+
+	.card-body:not(.prose) {
+		@apply column gap-4 md:gap-6;
 	}
 
 	.card-header {
-		@apply w-full flex justify-between items-center p-3 gap-3;
+		@apply w-full flex justify-between items-center px-4 pt-4 gap-4 md:px-6 md:pt-6 md:gap-6;
 	}
 
 	.card-footer {
-		@apply w-full flex justify-between items-center p-3 gap-3;
+		@apply w-full flex justify-between items-center px-4 pb-4 gap-4 md:px-6 md:pb-6 md:gap-6;
 	}
 }

package/dist/display/css/section.css

@@ -15,7 +15,11 @@
 		}
 
 		.section-body {
-			@apply w-full column p-3 gap-3;
+			@apply w-full p-4 md:p-6;
+		}
+
+		.section-body:not(.prose) {
+			@apply column gap-4 md:gap-6;
 		}
 	}
 

package/dist/form/Select.svelte

@@ -20,7 +20,7 @@
 		variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
 		size?: 'sm' | 'md' | 'lg';
 		name?: string;
-		class?: string;
+		rootClass?: string;
 		label?: string;
 		isLabelActive?: boolean;
 		helpText?: string;
@@ -30,7 +30,7 @@
 	};
 
 	let {
-		class: className,
+		rootClass,
 		options = [],
 		value = $bindable(),
 		selected = $bindable(),
@@ -268,7 +268,7 @@
 	});
 </script>
 
-<div class={cn('field', className)}>
+<div class={cn('field', rootClass)}>
 	<input type="text" {name} bind:value hidden />
 
 	{#if !isFloatLabel && label}

package/dist/form/Select.svelte.d.ts

@@ -13,7 +13,7 @@ type Props = {
     variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
     size?: 'sm' | 'md' | 'lg';
     name?: string;
-    class?: string;
+    rootClass?: string;
     label?: string;
     isLabelActive?: boolean;
     helpText?: string;

package/dist/form/TextField.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-	import { Icon } from '../index.js';
-	import type { IconData } from '../types.js';
+	import { Icon, type IconData } from '../index.js';
 	import { cn } from '../utils/class-names.js';
-	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	type Props = {
@@ -11,7 +9,7 @@
 		defaultValue?: string;
 		placeholder?: string;
 		type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
-		class?: string;
+		rootClass?: string;
 		controlClass?: string;
 		startIcon?: IconData;
 		endIcon?: IconData;
@@ -41,7 +39,7 @@
 		placeholder,
 		autocomplete,
 		type = 'text',
-		class: className,
+		rootClass,
 		controlClass,
 		startIcon,
 		endIcon,
@@ -95,7 +93,7 @@
 	});
 </script>
 
-<div class={cn('field', className)}>
+<div class={cn('field', rootClass)}>
 	{#if !isFloatLabel && label}
 		<span class="field-label">{label}</span>
 	{/if}

package/dist/form/TextField.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { IconData } from '../types.js';
+import { type IconData } from '../index.js';
 import type { HTMLInputAttributes } from 'svelte/elements';
 type Props = {
     el?: HTMLInputElement;
@@ -6,7 +6,7 @@ type Props = {
     defaultValue?: string;
     placeholder?: string;
     type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
-    class?: string;
+    rootClass?: string;
     controlClass?: string;
     startIcon?: IconData;
     endIcon?: IconData;

package/dist/form/css/control.css

@@ -10,7 +10,7 @@
 	}
 
 	.control-label.is-active {
-		@apply text-xs left-3 top-px! translate-y-px!;
+		@apply text-xs left-3 top-[1.2px]! translate-y-px!;
 	}
 
 	.control.is-sm {

package/dist/index.d.ts

@@ -22,7 +22,7 @@ import Code from './display/Code.svelte';
 import Collapsible from './display/Collapsible.svelte';
 import Divider from './display/Divider.svelte';
 import Empty from './display/Empty.svelte';
-import Icon from './display/Icon.svelte';
+import Icon, { type IconData } from './display/Icon.svelte';
 import Item from './display/Item.svelte';
 import Marquee from './display/Marquee.svelte';
 import Section from './display/Section.svelte';
@@ -50,7 +50,7 @@ import Scaffold from './layout/Scaffold.svelte';
 import Sidebar from './layout/Sidebar.svelte';
 import NavMenu from './navigation/NavMenu.svelte';
 import BottomNav from './navigation/BottomNav.svelte';
-import SideNav from './navigation/SideNav.svelte';
+import SideNav, { type SideNavItem, type SideNavSubItem } from './navigation/SideNav.svelte';
 import Tabs from './navigation/Tabs.svelte';
 import AlertDialog from './overlay/AlertDialog.svelte';
 import Command from './overlay/Command.svelte';
@@ -74,3 +74,4 @@ import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
 export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterLinks, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export type { IconData, SideNavItem, SideNavSubItem };

package/dist/index.js

@@ -22,7 +22,7 @@ import Code from './display/Code.svelte';
 import Collapsible from './display/Collapsible.svelte';
 import Divider from './display/Divider.svelte';
 import Empty from './display/Empty.svelte';
-import Icon from './display/Icon.svelte';
+import Icon, {} from './display/Icon.svelte';
 import Item from './display/Item.svelte';
 import Marquee from './display/Marquee.svelte';
 import Section from './display/Section.svelte';
@@ -50,7 +50,7 @@ import Scaffold from './layout/Scaffold.svelte';
 import Sidebar from './layout/Sidebar.svelte';
 import NavMenu from './navigation/NavMenu.svelte';
 import BottomNav from './navigation/BottomNav.svelte';
-import SideNav from './navigation/SideNav.svelte';
+import SideNav, {} from './navigation/SideNav.svelte';
 import Tabs from './navigation/Tabs.svelte';
 import AlertDialog from './overlay/AlertDialog.svelte';
 import Command from './overlay/Command.svelte';

package/dist/layout/AppBar.svelte

@@ -7,7 +7,7 @@
 		start?: Snippet;
 		center?: Snippet;
 		end?: Snippet;
-		class?: string;
+		rootClass?: string;
 		contentClass?: string;
 		startClass?: string;
 		centerClass?: string;
@@ -23,7 +23,7 @@
 		start,
 		center,
 		end,
-		class: className,
+		rootClass,
 		contentClass,
 		startClass,
 		centerClass,
@@ -80,7 +80,7 @@
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',
 		isSticky && 'is-sticky',
-		className
+		rootClass
 	)}
 >
 	<div class={cn('appbar-content', isBoxed && 'boxed', contentClass)}>

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

@@ -3,7 +3,7 @@ type Props = {
     start?: Snippet;
     center?: Snippet;
     end?: Snippet;
-    class?: string;
+    rootClass?: string;
     contentClass?: string;
     startClass?: string;
     centerClass?: string;

package/dist/layout/Footer.svelte

@@ -7,7 +7,7 @@
 		start?: Snippet;
 		center?: Snippet;
 		end?: Snippet;
-		class?: string;
+		rootClass?: string;
 		contentClass?: string;
 		startClass?: string;
 		centerClass?: string;
@@ -22,7 +22,7 @@
 		start,
 		center,
 		end,
-		class: className,
+		rootClass,
 		contentClass,
 		startClass,
 		centerClass,
@@ -73,7 +73,7 @@
 		isBordered && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',
-		className
+		rootClass
 	)}
 >
 	<div class={cn('footer-content', isBoxed && 'boxed', contentClass)}>

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

@@ -3,7 +3,7 @@ type Props = {
     start?: Snippet;
     center?: Snippet;
     end?: Snippet;
-    class?: string;
+    rootClass?: string;
     contentClass?: string;
     startClass?: string;
     centerClass?: string;

package/dist/layout/Sidebar.svelte

@@ -6,24 +6,17 @@
 		children: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
-		class?: string;
+		rootClass?: string;
 		contentClass?: string;
 		headerClass?: string;
 		footerClass?: string;
 	};
 
-	const {
-		children,
-		header,
-		footer,
-		class: className,
-		contentClass,
-		headerClass,
-		footerClass
-	}: Props = $props();
+	const { children, header, footer, rootClass, contentClass, headerClass, footerClass }: Props =
+		$props();
 </script>
 
-<aside class={cn('sidebar', className)}>
+<aside class={cn('sidebar', rootClass)}>
 	{#if header}
 		<div class={cn('sidebar-header', headerClass)}>
 			{@render header()}

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

@@ -3,7 +3,7 @@ type Props = {
     children: Snippet;
     header?: Snippet;
     footer?: Snippet;
-    class?: string;
+    rootClass?: string;
     contentClass?: string;
     headerClass?: string;
     footerClass?: string;

package/dist/navigation/BottomNav.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { Icon, type IconData } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+
+	type BottomNavItem = {
+		id: string;
+		label?: string;
+		icon: IconData;
+		href?: string;
+		onclick?: (item: BottomNavItem) => void;
+	};
+
+	type Props = {
+		items: BottomNavItem[];
+		variant?: 'primary' | 'secondary' | 'muted';
+		size?: 'sm' | 'md' | 'lg';
+		showLabels?: boolean;
+		class?: string;
+	};
+
+	const {
+		items = [],
+		class: className,
+		variant = 'primary',
+		size = 'md',
+		showLabels = true
+	}: Props = $props();
+
+	const variantClasses = {
+		primary: 'bottomnav-primary',
+		secondary: 'bottomnav-secondary',
+		muted: 'bottomnav-muted'
+	};
+
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	function isItemActive(href?: string): boolean {
+		if (!href) return false;
+		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
+	}
+
+	function handleItemClick(item: BottomNavItem) {
+		if (item.onclick) {
+			item.onclick(item);
+		}
+	}
+</script>
+
+<nav
+	class={cn(
+		'bottomnav',
+		variantClasses[variant],
+		sizeClasses[size],
+		!showLabels && 'is-icon-only',
+		className
+	)}
+>
+	{#each items as item}
+		{#if item.href}
+			<a href={item.href} class={cn('bottomnav-item', isItemActive(item.href) && 'is-active')}>
+				<Icon icon={item.icon} class="bottomnav-icon" />
+				{#if showLabels && item.label}
+					<span class="bottomnav-label">{item.label}</span>
+				{/if}
+			</a>
+		{:else}
+			<button type="button" class="bottomnav-item" onclick={() => handleItemClick(item)}>
+				<Icon icon={item.icon} class="bottomnav-icon" />
+				{#if showLabels && item.label}
+					<span class="bottomnav-label">{item.label}</span>
+				{/if}
+			</button>
+		{/if}
+	{/each}
+</nav>