ui-svelte 0.2.2 → 0.2.3

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/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/navigation/FooterGroup.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type FooterLink = {
+		label: string;
+		href: string;
+		external?: boolean;
+	};
+
+	type Props = {
+		title?: string;
+		links?: FooterLink[];
+		children?: Snippet;
+		class?: string;
+	};
+
+	const { title, links = [], children, class: className }: Props = $props();
+</script>
+
+<div class={cn('footer-group', className)}>
+	{#if title}
+		<h3 class="footer-group-title">{title}</h3>
+	{/if}
+
+	{#if links.length > 0}
+		<ul class="footer-group-links">
+			{#each links as link}
+				<li>
+					<a
+						href={link.href}
+						class="footer-group-link"
+						target={link.external ? '_blank' : undefined}
+						rel={link.external ? 'noopener noreferrer' : undefined}
+					>
+						{link.label}
+						{#if link.external}
+							<span class="sr-only">(abre en nueva ventana)</span>
+						{/if}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if children}
+		<div class="footer-group-content">
+			{@render children()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type FooterLink = {
+    label: string;
+    href: string;
+    external?: boolean;
+};
+type Props = {
+    title?: string;
+    links?: FooterLink[];
+    children?: Snippet;
+    class?: string;
+};
+declare const FooterGroup: import("svelte").Component<Props, {}, "">;
+type FooterGroup = ReturnType<typeof FooterGroup>;
+export default FooterGroup;

package/dist/{layout/FooterLinks.svelte → navigation/FooterNav.svelte}

@@ -19,9 +19,9 @@
 	}
 </script>
 
-<div class={cn('footer-links', className)}>
+<div class={cn('footer-nav', className)}>
 	{#each links as link}
-		<a href={link.href} class={cn('footer-link', isLinkActive(link.href) && 'is-active')}>
+		<a href={link.href} class={cn('footer-nav-link', isLinkActive(link.href) && 'is-active')}>
 			{link.label}
 		</a>
 	{/each}

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

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

package/dist/navigation/css/footer-group.css

@@ -0,0 +1,27 @@
+@layer components {
+	.footer-group {
+		@apply flex flex-col gap-4;
+
+		.footer-group-title {
+			@apply text-base font-semibold;
+			@apply mb-2;
+		}
+
+		.footer-group-links {
+			@apply flex flex-col gap-2;
+			@apply list-none p-0 m-0;
+
+			.footer-group-link {
+				@apply text-sm text-on-muted;
+				@apply transition-colors duration-200;
+				@apply hover:underline;
+				@apply focus:outline-none;
+				@apply inline-flex items-center gap-1;
+			}
+		}
+
+		.footer-group-content {
+			@apply flex flex-col gap-3;
+		}
+	}
+}

package/dist/{layout/css/footer-links.css → navigation/css/footer-nav.css}

@@ -1,11 +1,11 @@
 @layer components {
-	.footer-links {
+	.footer-nav {
 		@apply column md:row items-start md:items-center gap-3 md:gap-6;
 
-		.footer-link {
+		.footer-nav-link {
 			@apply text-sm opacity-70;
 			@apply transition-all duration-200;
-			@apply hover:opacity-100;
+			@apply hover:underline;
 			@apply focus:outline-none;
 			@apply cursor-pointer select-none;
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"

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

@@ -1,11 +0,0 @@
-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;