ui-svelte 0.2.2 → 0.2.4

package/dist/control/Audio.svelte

@@ -194,18 +194,14 @@
 		aria-valuemin="0"
 		aria-valuemax="100"
 	>
-		{#if isAnalyzing}
-			<div class="media-loading">Analizando...</div>
-		{:else}
-			<div class="media-bars">
-				{#each waveformData as height, i}
-					{@const progress = duration > 0 ? currentTime / duration : 0}
-					{@const barPosition = (i + 0.5) / waveformData.length}
-					{@const isPlayed = barPosition <= progress}
-					<div class="media-bar" class:active={isPlayed} style="height: {height * 100}%"></div>
-				{/each}
-			</div>
-		{/if}
+		<div class="media-bars">
+			{#each waveformData as height, i}
+				{@const progress = duration > 0 ? currentTime / duration : 0}
+				{@const barPosition = (i + 0.5) / waveformData.length}
+				{@const isPlayed = barPosition <= progress}
+				<div class="media-bar" class:active={isPlayed} style="height: {height * 100}%"></div>
+			{/each}
+		</div>
 	</div>
 
 	<span class="media-time">{duration > 0 ? formatTime(duration - currentTime) : '0:00'}</span>

package/dist/control/css/btn.css

@@ -194,7 +194,7 @@
 	}
 
 	.btn-close {
-		@apply absolute right-1 top-1;
+		@apply absolute right-2 top-2;
 	}
 	.btn-close-icon {
 		@apply h-4 w-4 cursor-pointer;

package/dist/display/Code.svelte

@@ -1,31 +1,43 @@
 <script lang="ts">
 	import { codeToHtml } from 'shiki';
 	import { useClipboard } from '../hooks/use-clipboard.svelte.js';
-	import { Button, IconButton } from '../index.js';
+	import { IconButton } from '../index.js';
 	import { Checkmark24RegularIcon, Copy24RegularIcon } from '../icons/index.js';
+	import { theme } from '../stores/theme.svelte.js';
 
 	type Props = {
 		code: string;
-		lang?: string;
-		theme?: string;
-		showCopy?: boolean;
+		lang: string;
+		lightTheme?: string;
+		darkTheme?: string;
+		disableCopy?: boolean;
+		hideLang?: boolean;
 	};
 
-	let { code, lang = 'html', theme = 'catppuccin-frappe', showCopy }: Props = $props();
+	let {
+		code,
+		lang,
+		lightTheme = 'catppuccin-latte',
+		darkTheme = 'catppuccin-frappe',
+		disableCopy,
+		hideLang
+	}: Props = $props();
 
 	let html: string = $state('');
 	let open = $state(false);
+	let hover = $state(false);
 
-	const generateCode = async (value: string) => {
+	const generateCode = async (value: string, currentTheme: string) => {
 		html = await codeToHtml(value, {
 			lang,
-			theme
+			theme: currentTheme
 		});
 		open = true;
 	};
 
 	$effect(() => {
-		generateCode(code);
+		const currentTheme = theme.isDark ? darkTheme : lightTheme;
+		generateCode(code, currentTheme);
 	});
 
 	const clipboard = useClipboard();
@@ -36,13 +48,18 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="code">
+<div class="code" onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)}>
 	{#if open}
-		{#if showCopy}
+		{#if !hover && !hideLang}
+			<div class="code-info">
+				<div class="code-lang">{lang}</div>
+			</div>
+		{/if}
+		{#if hover && !disableCopy}
 			<div class="code-info">
 				<IconButton
 					onclick={handleCopy}
-					variant="primary"
+					variant="ghost"
 					size="sm"
 					icon={clipboard.copied ? Checkmark24RegularIcon : Copy24RegularIcon}
 				/>

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

@@ -1,8 +1,10 @@
 type Props = {
     code: string;
-    lang?: string;
-    theme?: string;
-    showCopy?: boolean;
+    lang: string;
+    lightTheme?: string;
+    darkTheme?: string;
+    disableCopy?: boolean;
+    hideLang?: boolean;
 };
 declare const Code: import("svelte").Component<Props, {}, "">;
 type Code = ReturnType<typeof Code>;

package/dist/display/css/card.css

@@ -72,16 +72,6 @@
 		@apply bg-surface text-on-surface;
 	}
 
-	.card.is-surface.has-divider {
-		.card-header {
-			@apply border-on-surface;
-		}
-
-		.card-footer {
-			@apply border-on-surface;
-		}
-	}
-
 	.card.is-ghost {
 		@apply bg-transparent;
 	}

package/dist/display/css/code.css

@@ -4,14 +4,20 @@
 		tab-size: 4;
 		-moz-tab-size: 4;
 	}
+
 	.code-content {
 		@apply size-full overflow-auto rounded-md;
 		background-color: inherit;
 	}
 
 	.code-info {
-		@apply absolute top-2 right-2 flex justify-end items-center gap-2;
+		@apply absolute top-2 right-2 flex justify-end items-center gap-2 z-10;
+	}
+
+	.code-lang {
+		@apply text-sm font-medium text-on-muted;
 	}
+
 	.shiki {
 		@apply p-3 rounded-ui;
 		min-width: fit-content;

package/dist/form/ComboBox.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import type { SearchState, SearchOption } from '../hooks/use-search.svelte.js';
-	import { Avatar, Icon, Item } from '../index.js';
-	import type { IconName } from '../types.js';
+	import {
+		ArrowDown24RegularIcon,
+		Dismiss24RegularIcon,
+		DotsMoveIcon,
+		Search24RegularIcon
+	} from '../icons/index.js';
+	import { Avatar, Icon, Item, type IconData } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import { onMount, tick } from 'svelte';
 
@@ -27,7 +32,7 @@
 		isSolid?: boolean;
 		isClearable?: boolean;
 		isDisabled?: boolean;
-		arrowIcon?: IconName;
+		arrowIcon?: IconData;
 	};
 
 	let {
@@ -52,7 +57,7 @@
 		isSolid,
 		isClearable = false,
 		isDisabled = false,
-		arrowIcon = 'fluent:arrow-sort-down-24-regular'
+		arrowIcon = ArrowDown24RegularIcon
 	}: Props = $props();
 
 	const variantClasses = {
@@ -356,13 +361,8 @@
 			</span>
 		{/if}
 
-		{#if selected?.src || selected?.icon}
-			<Avatar
-				src={selected.src}
-				name={selected.label}
-				icon={selected.icon as IconName}
-				size={avatarSizes[size]}
-			/>
+		{#if selected?.src}
+			<Avatar src={selected.src} name={selected.label} size={avatarSizes[size]} />
 		{/if}
 
 		<div class="control-selected">
@@ -386,10 +386,10 @@
 					onclick={handleClear}
 					aria-label="Clear selection"
 				>
-					<Icon name="fluent:dismiss-16-regular" />
+					<Icon icon={Dismiss24RegularIcon} />
 				</button>
 			{/if}
-			<Icon name={arrowIcon} class={cn('control-arrow', isOpen && 'is-active')} />
+			<Icon icon={arrowIcon} class={cn('control-arrow', isOpen && 'is-active')} />
 		</div>
 	</button>
 
@@ -399,7 +399,7 @@
 
 	<div class:is-active={isOpen} class="combo-box-popover" bind:this={contentEl} {style}>
 		<div class={cn('combo-box-search', variantClasses[variant])}>
-			<Icon name="fluent:search-24-regular" class="combo-box-search-icon" />
+			<Icon icon={Search24RegularIcon} class="combo-box-search-icon" />
 			<input
 				type="text"
 				class="combo-box-search-input"
@@ -410,7 +410,7 @@
 
 		{#if search.isLoading}
 			<div class="combo-box-loading">
-				<Icon name="fluent:spinner-ios-20-regular" class="combo-box-loading-spinner" />
+				<Icon icon={DotsMoveIcon} class="combo-box-loading-spinner" />
 				<span>{loadingText}</span>
 			</div>
 		{:else if search.options.length === 0 && hasSearched}
@@ -421,7 +421,7 @@
 					<li>
 						<Item
 							label={item.label}
-							icon={item.icon as IconName}
+							icon={item.icon as IconData}
 							src={item.src}
 							description={item.description}
 							id={item.id}
@@ -438,7 +438,7 @@
 
 				{#if search.isLoadingMore}
 					<li class="combo-box-loading-more">
-						<Icon name="fluent:spinner-ios-20-regular" class="combo-box-loading-spinner" />
+						<Icon icon={DotsMoveIcon} class="combo-box-loading-spinner" />
 						<span>{loadingMoreText}</span>
 					</li>
 				{/if}

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

@@ -1,5 +1,5 @@
 import type { SearchState, SearchOption } from '../hooks/use-search.svelte.js';
-import type { IconName } from '../types.js';
+import { type IconData } from '../index.js';
 type Props = {
     search: SearchState;
     value?: string | number | null;
@@ -22,7 +22,7 @@ type Props = {
     isSolid?: boolean;
     isClearable?: boolean;
     isDisabled?: boolean;
-    arrowIcon?: IconName;
+    arrowIcon?: IconData;
 };
 declare const ComboBox: import("svelte").Component<Props, {}, "value" | "selected">;
 type ComboBox = ReturnType<typeof ComboBox>;

package/dist/hooks/use-search.svelte.d.ts

@@ -1,8 +1,9 @@
+import type { IconData } from '../types.svelte.js';
 export interface SearchOption {
     id: string | number;
     label: string;
     description?: string;
-    icon?: string;
+    icon?: IconData;
     src?: string;
     disabled?: boolean;
     [key: string]: unknown;

package/dist/index.css

@@ -51,12 +51,13 @@
 @import './layout/css/app-bar.css';
 @import './layout/css/bottom-bar.css';
 @import './layout/css/footer.css';
-@import './layout/css/footer-links.css';
 @import './layout/css/scaffold.css';
 @import './layout/css/sidebar.css';
 
 @import './navigation/css/bottom-nav.css';
 @import './navigation/css/nav-menu.css';
+@import './navigation/css/footer-nav.css';
+@import './navigation/css/footer-group.css';
 @import './navigation/css/side-nav.css';
 @import './navigation/css/tabs.css';
 

package/dist/index.d.ts

@@ -45,11 +45,12 @@ import Toggle from './form/Toggle.svelte';
 import AppBar from './layout/AppBar.svelte';
 import Provider from './layout/Provider.svelte';
 import Footer from './layout/Footer.svelte';
-import FooterLinks from './layout/FooterLinks.svelte';
 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 FooterNav from './navigation/FooterNav.svelte';
+import FooterGroup from './navigation/FooterGroup.svelte';
 import SideNav, { type SideNavItem, type SideNavSubItem } from './navigation/SideNav.svelte';
 import Tabs from './navigation/Tabs.svelte';
 import AlertDialog from './overlay/AlertDialog.svelte';
@@ -73,5 +74,5 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 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 { 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, FooterNav, FooterGroup, 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

@@ -45,11 +45,12 @@ import Toggle from './form/Toggle.svelte';
 import AppBar from './layout/AppBar.svelte';
 import Provider from './layout/Provider.svelte';
 import Footer from './layout/Footer.svelte';
-import FooterLinks from './layout/FooterLinks.svelte';
 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 FooterNav from './navigation/FooterNav.svelte';
+import FooterGroup from './navigation/FooterGroup.svelte';
 import SideNav, {} from './navigation/SideNav.svelte';
 import Tabs from './navigation/Tabs.svelte';
 import AlertDialog from './overlay/AlertDialog.svelte';
@@ -73,4 +74,4 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 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 { 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, FooterNav, FooterGroup, 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 };

package/dist/layout/AppBar.svelte

@@ -14,9 +14,20 @@
 		endClass?: string;
 		isBlurred?: boolean;
 		isBordered?: boolean;
+		borderOnScrollOnly?: boolean;
 		hideOnScroll?: boolean;
 		isSticky?: boolean;
 		isBoxed?: boolean;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'ghost';
 	};
 
 	const {
@@ -29,9 +40,11 @@
 		centerClass,
 		endClass,
 		isBordered,
+		borderOnScrollOnly = false,
 		isBlurred,
 		isSticky,
 		isBoxed,
+		variant = 'ghost',
 		hideOnScroll
 	}: Props = $props();
 
@@ -42,6 +55,18 @@
 
 	const scroll = useScroll();
 
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		ghost: 'is-ghost'
+	};
+
 	$effect(() => {
 		if (headerElement) {
 			headerHeight = headerElement.offsetHeight;
@@ -70,13 +95,15 @@
 	});
 
 	const shouldBlur = $derived(isBlurred && scroll.isScrolled);
+	const shouldShowBorder = $derived(isBordered && (!borderOnScrollOnly || scroll.isScrolled));
 </script>
 
 <header
 	bind:this={headerElement}
 	class={cn(
 		'appbar',
-		isBordered && 'is-bordered',
+		variantClasses[variant],
+		shouldShowBorder && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',
 		isSticky && 'is-sticky',

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

@@ -10,9 +10,11 @@ type Props = {
     endClass?: string;
     isBlurred?: boolean;
     isBordered?: boolean;
+    borderOnScrollOnly?: boolean;
     hideOnScroll?: boolean;
     isSticky?: boolean;
     isBoxed?: boolean;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'ghost';
 };
 declare const AppBar: import("svelte").Component<Props, {}, "">;
 type AppBar = ReturnType<typeof AppBar>;

package/dist/layout/Footer.svelte

@@ -16,6 +16,16 @@
 		isBordered?: boolean;
 		isBoxed?: boolean;
 		hideOnScroll?: boolean;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'ghost';
 	};
 
 	const {
@@ -30,7 +40,8 @@
 		isBordered,
 		isBlurred,
 		isBoxed,
-		hideOnScroll
+		hideOnScroll,
+		variant = 'ghost'
 	}: Props = $props();
 
 	let footerElement = $state<HTMLElement | null>(null);
@@ -40,6 +51,18 @@
 
 	const scroll = useScroll();
 
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		ghost: 'is-ghost'
+	};
+
 	$effect(() => {
 		if (footerElement) {
 			footerHeight = footerElement.offsetHeight;
@@ -70,6 +93,7 @@
 	bind:this={footerElement}
 	class={cn(
 		'footer',
+		variantClasses[variant],
 		isBordered && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',

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

@@ -12,6 +12,7 @@ type Props = {
     isBordered?: boolean;
     isBoxed?: boolean;
     hideOnScroll?: boolean;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'ghost';
 };
 declare const Footer: import("svelte").Component<Props, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/layout/Sidebar.svelte

@@ -10,13 +10,43 @@
 		contentClass?: string;
 		headerClass?: string;
 		footerClass?: string;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'ghost';
 	};
 
-	const { children, header, footer, rootClass, contentClass, headerClass, footerClass }: Props =
-		$props();
+	const {
+		children,
+		header,
+		footer,
+		rootClass,
+		contentClass,
+		headerClass,
+		footerClass,
+		variant = 'ghost'
+	}: Props = $props();
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		ghost: 'is-ghost'
+	};
 </script>
 
-<aside class={cn('sidebar', rootClass)}>
+<aside class={cn('sidebar', variantClasses[variant], rootClass)}>
 	{#if header}
 		<div class={cn('sidebar-header', headerClass)}>
 			{@render header()}

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

@@ -7,6 +7,7 @@ type Props = {
     contentClass?: string;
     headerClass?: string;
     footerClass?: string;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'ghost';
 };
 declare const Sidebar: import("svelte").Component<Props, {}, "">;
 type Sidebar = ReturnType<typeof Sidebar>;

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

@@ -35,4 +35,67 @@
 			}
 		}
 	}
+	.appbar.is-primary {
+		@apply bg-on-primary text-primary;
+	}
+
+	.appbar.is-primary.is-solid {
+		@apply bg-primary text-on-primary;
+	}
+
+	.appbar.is-secondary {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.appbar.is-secondary.is-solid {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.appbar.is-success {
+		@apply bg-on-success text-success;
+	}
+
+	.appbar.is-success.is-solid {
+		@apply bg-success text-on-success;
+	}
+
+	.appbar.is-info {
+		@apply bg-on-info text-info;
+	}
+
+	.appbar.is-info.is-solid {
+		@apply bg-info text-on-info;
+	}
+
+	.appbar.is-warning {
+		@apply bg-on-warning text-warning;
+	}
+
+	.appbar.is-warning.is-solid {
+		@apply bg-warning text-on-warning;
+	}
+
+	.appbar.is-danger {
+		@apply bg-on-danger text-danger;
+	}
+
+	.appbar.is-danger.is-solid {
+		@apply bg-danger text-on-danger;
+	}
+
+	.appbar.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.appbar.is-muted.is-solid {
+		@apply bg-on-muted text-muted;
+	}
+
+	.appbar.is-ghost {
+		@apply bg-background text-on-background;
+	}
+
+	.appbar.is-surface {
+		@apply bg-surface text-on-surface;
+	}
 }