ui-svelte 0.1.0 → 0.2.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 SappsJs
+Copyright (c) 2025 UiSvelte
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,7 +2,7 @@
 
 **A modern, accessible UI component library built for Svelte 5**
 
-SappsUI is a comprehensive UI component library designed to leverage Svelte 5's latest features. Build beautiful, accessible interfaces with minimal configuration and maximum developer experience.
+Ui Svelte is a comprehensive UI component library designed to leverage Svelte 5's latest features. Build beautiful, accessible interfaces with minimal configuration and maximum developer experience.
 
 ---
 
@@ -62,7 +62,7 @@ Optimized bundle size with tree-shaking support. Only import what you need for b
 
 ```bash
 # or
-bun add sappsui
+bun add ui-svelte
 ```
 
 ---
@@ -71,13 +71,13 @@ bun add sappsui
 
 ```svelte
 <script lang="ts">
-	import { Button, Card, TextField } from 'sappsui';
+	import { Button, Card, TextField } from 'ui-svelte';
 
 	let name = $state('');
 </script>
 
 <Card>
-	<h2>Welcome to SappsUI</h2>
+	<h2>Welcome to Ui Svelte</h2>
 
 	<TextField name="username" label="Your Name" placeholder="Enter your name..." bind:value={name} />
 
@@ -109,9 +109,9 @@ SappsUI includes a comprehensive set of components for building modern web appli
 
 ## 🌟 Support
 
-If you find SappsUI helpful, please consider giving it a star on GitHub! Your support helps us continue improving the library.
+If you find UiSvelte helpful, please consider giving it a star on GitHub! Your support helps us continue improving the library.
 
-For questions, issues, or feature requests, please visit our [GitHub Issues](https://github.com/sappsdev/sappsui_svelte/issues) page.
+For questions, issues, or feature requests, please visit our [GitHub Issues](https://github.com/sappsdev/ui-svelte/issues) page.
 
 ---
 

package/dist/control/Audio.svelte

@@ -9,7 +9,7 @@
 		variant?:
 			| 'primary'
 			| 'secondary'
-			| 'soft'
+			| 'muted'
 			| 'outlined'
 			| 'ghost'
 			| 'success'
@@ -176,7 +176,7 @@
 <div class={baseClasses}>
 	<audio bind:this={audio} {src}></audio>
 
-	<Button onclick={togglePlay} size="md" variant="ghost">
+	<Button onclick={togglePlay} size="md" {variant}>
 		{#if isPlaying}
 			<Icon icon={Pause24RegularIcon} />
 		{:else}

package/dist/control/Audio.svelte.d.ts

@@ -1,7 +1,7 @@
 type Props = {
     class?: string;
     src: string;
-    variant?: 'primary' | 'secondary' | 'soft' | 'outlined' | 'ghost' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'ghost' | 'success' | 'info' | 'danger' | 'warning';
 };
 declare const Audio: import("svelte").Component<Props, {}, "">;
 type Audio = ReturnType<typeof Audio>;

package/dist/control/Record.svelte

@@ -110,7 +110,6 @@
 			visualize();
 		} catch (error) {
 			console.error('Error accessing microphone:', error);
-			alert('No se pudo acceder al micrófono');
 		}
 	}
 
@@ -135,11 +134,8 @@
 			if (!response.ok) {
 				throw new Error(`Upload failed: ${response.statusText}`);
 			}
-
-			console.log('Audio uploaded successfully');
 		} catch (error) {
 			console.error('Error uploading audio:', error);
-			alert('Error al subir el audio');
 		} finally {
 			isUploading = false;
 		}
@@ -354,7 +350,7 @@
 
 <div class={baseClasses}>
 	{#if isReviewing}
-		<Button onclick={togglePlayback} size="md" variant="ghost">
+		<Button onclick={togglePlayback} size="md" {variant}>
 			{#if isPlaying}
 				<Icon icon={Pause24RegularIcon} />
 			{:else}
@@ -376,18 +372,18 @@
 		<span class="media-time">{formatTime(recordingTime)}</span>
 
 		<div class="flex gap-2">
-			<Button onclick={discardRecording} size="md" variant="ghost">
+			<Button onclick={discardRecording} size="md" {variant}>
 				<Icon icon={Delete24RegularIcon} />
 			</Button>
-			<Button onclick={continueRecording} size="md" variant="ghost">
+			<Button onclick={continueRecording} size="md" {variant}>
 				<Icon icon={Record24RegularIcon} />
 			</Button>
-			<Button onclick={confirmRecording} size="md" variant="ghost">
+			<Button onclick={confirmRecording} size="md" {variant}>
 				<Icon icon={Checkmark24RegularIcon} />
 			</Button>
 		</div>
 	{:else if !isRecording}
-		<Button onclick={startRecording} size="md" variant="ghost">
+		<Button onclick={startRecording} size="md" {variant}>
 			<Icon icon={Record24RegularIcon} />
 		</Button>
 
@@ -401,7 +397,7 @@
 
 		<span class="media-time">{formatTime(recordingTime)}</span>
 	{:else}
-		<Button onclick={handleToggleRecording} size="md" variant="ghost">
+		<Button onclick={handleToggleRecording} size="md" {variant}>
 			{#if isPaused}
 				<Icon icon={Play24RegularIcon} />
 			{:else}
@@ -423,7 +419,7 @@
 
 		<span class="media-time">{formatTime(recordingTime)}</span>
 
-		<Button onclick={stopRecording} size="md" variant="ghost" isLoading={isUploading}>
+		<Button onclick={stopRecording} size="md" {variant} isLoading={isUploading}>
 			<Icon icon={RecordStop24RegularIcon} />
 		</Button>
 	{/if}

package/dist/css/base.css

@@ -1,6 +1,6 @@
 @layer base {
 	body {
-		@apply h-dvh flex flex-col;
+		@apply h-dvh flex flex-col relative;
 		@apply bg-background text-on-background;
 	}
 

package/dist/display/Item.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { Avatar } from '../index.js';
+	import { Avatar, Icon } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import type { Snippet } from 'svelte';
+	import type { IconData } from './Icon.svelte';
 
 	type Props = {
 		id?: string | number;
 		label?: string;
 		description?: string;
+		icon?: IconData;
 		src?: string;
 		variant?: 'ghost' | 'outlined' | 'surface' | 'primary' | 'secondary' | 'muted';
 		size?: 'sm' | 'md' | 'lg';
@@ -29,6 +31,7 @@
 		label,
 		description,
 		src,
+		icon,
 		variant = 'ghost',
 		size = 'md',
 		status,
@@ -88,6 +91,9 @@
 </script>
 
 {#snippet itemContent()}
+	{#if icon}
+		<Icon {icon} />
+	{/if}
 	{#if src}
 		<Avatar {src} {status} size={avatarSizes[size]} variant="transparent" />
 	{/if}

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

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
+import type { IconData } from './Icon.svelte';
 type Props = {
     id?: string | number;
     label?: string;
     description?: string;
+    icon?: IconData;
     src?: string;
     variant?: 'ghost' | 'outlined' | 'surface' | 'primary' | 'secondary' | 'muted';
     size?: 'sm' | 'md' | 'lg';

package/dist/display/Section.svelte

@@ -50,14 +50,22 @@
 	};
 </script>
 
-<div class={cn('section', variantClasses[variant], isSolid && 'is-solid', className)}>
+<div
+	class={cn(
+		'section',
+		variantClasses[variant],
+		isSolid && 'is-solid',
+		isBoxed && 'boxed',
+		className
+	)}
+>
 	{#if cover}
 		<img src={cover} alt="cover" class={cn('section-cover', coverClass)} />
 	{/if}
 	{#if hasOverlay}
 		<div class={cn('section-overlay', overlayClass)}></div>
 	{/if}
-	<div class={cn('section-body', isBoxed && 'boxed', bodyClass)}>
+	<div class={cn('section-body', bodyClass)}>
 		{@render children()}
 	</div>
 </div>

package/dist/display/css/card.css

@@ -1,7 +1,7 @@
 @layer components {
 	.card {
 		@apply relative flex flex-col rounded-ui overflow-hidden;
-		@apply transition-colors duration-300 ease-in-out;
+		@apply transition-all duration-300 ease-in-out;
 
 		&:has(> .card-cover) {
 			@apply bg-transparent! text-white! text-shadow-sm! z-0;

package/dist/display/css/item.css

@@ -17,6 +17,10 @@
 	.item.is-sm {
 		@apply p-2 gap-2;
 
+		.icon {
+			@apply w-4 h-4;
+		}
+
 		.item-label {
 			@apply text-sm;
 		}
@@ -29,6 +33,10 @@
 	.item.is-md {
 		@apply p-3 gap-3;
 
+		.icon {
+			@apply w-5 h-5;
+		}
+
 		.item-label {
 			@apply text-base;
 		}
@@ -41,6 +49,10 @@
 	.item.is-lg {
 		@apply p-4 gap-4;
 
+		.icon {
+			@apply w-6 h-6;
+		}
+
 		.item-label {
 			@apply text-lg;
 		}

package/dist/form/TextField.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Icon } from '../index.js';
+	import type { IconData } from '../types.js';
 	import { cn } from '../utils/class-names.js';
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
@@ -11,8 +13,10 @@
 		type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 		class?: string;
 		controlClass?: string;
-		prefix?: Snippet;
-		suffix?: Snippet;
+		startIcon?: IconData;
+		endIcon?: IconData;
+		startText?: string;
+		endText?: string;
 		onchange?: (value: unknown) => void;
 		oninput?: (value: unknown) => void;
 		variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
@@ -39,8 +43,10 @@
 		type = 'text',
 		class: className,
 		controlClass,
-		prefix,
-		suffix,
+		startIcon,
+		endIcon,
+		startText,
+		endText,
 		onchange,
 		oninput,
 		variant = 'outlined',
@@ -119,7 +125,13 @@
 			</span>
 		{/if}
 
-		{@render prefix?.()}
+		{#if startIcon}
+			<Icon icon={startIcon} class={iconClasses} />
+		{/if}
+
+		{#if startText}
+			<span class={textClasses}>{startText}</span>
+		{/if}
 
 		<input
 			{type}
@@ -143,7 +155,13 @@
 			onfocusout={() => (isFocused = false)}
 		/>
 
-		{@render suffix?.()}
+		{#if endText}
+			<span class={textClasses}>{endText}</span>
+		{/if}
+
+		{#if endIcon}
+			<Icon icon={endIcon} class={iconClasses} />
+		{/if}
 	</label>
 
 	{#if errorText || helpText}

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { IconData } from '../types.js';
 import type { HTMLInputAttributes } from 'svelte/elements';
 type Props = {
     el?: HTMLInputElement;
@@ -8,8 +8,10 @@ type Props = {
     type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
     class?: string;
     controlClass?: string;
-    prefix?: Snippet;
-    suffix?: Snippet;
+    startIcon?: IconData;
+    endIcon?: IconData;
+    startText?: string;
+    endText?: string;
     onchange?: (value: unknown) => void;
     oninput?: (value: unknown) => void;
     variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';

package/dist/index.css

@@ -71,8 +71,8 @@
 	--color-primary: var(--primary, oklch(54.6% 0.245 262.881)); /* blue-600 */
 	--color-on-primary: var(--on-primary, oklch(93.2% 0.032 255.585)); /* blue-100 */
 
-	--color-secondary: var(--secondary, oklch(60% 0.118 184.704)); /* teal-600  */
-	--color-on-secondary: var(--on-secondary, oklch(95.3% 0.051 180.801)); /* teal-100 */
+	--color-secondary: var(--secondary, oklch(0.592 0.249 0.584)); /* pink-600  */
+	--color-on-secondary: var(--on-secondary, oklch(0.948 0.028 342.258)); /* pink-100 */
 
 	--color-muted: var(--muted, oklch(87.2% 0.01 258.338)); /* gray-300  */
 	--color-on-muted: var(--on-muted, oklch(27.8% 0.033 256.848)); /* gray-700  */

package/dist/layout/AppBar.svelte

@@ -15,6 +15,8 @@
 		isBlurred?: boolean;
 		isBordered?: boolean;
 		hideOnScroll?: boolean;
+		isSticky?: boolean;
+		isBoxed?: boolean;
 	};
 
 	const {
@@ -28,6 +30,8 @@
 		endClass,
 		isBordered,
 		isBlurred,
+		isSticky,
+		isBoxed,
 		hideOnScroll
 	}: Props = $props();
 
@@ -48,14 +52,18 @@
 	});
 
 	$effect(() => {
-		if (hideOnScroll && scroll.scrollY > headerHeight) {
+		if (!hideOnScroll) {
+			return;
+		}
+
+		if (scroll.scrollY > headerHeight) {
 			if (scroll.scrollY > lastScrollY) {
 				isHidden = true;
 			} else if (scroll.scrollY < lastScrollY) {
 				isHidden = false;
 			}
 			lastScrollY = scroll.scrollY;
-		} else if (hideOnScroll) {
+		} else {
 			isHidden = false;
 			lastScrollY = scroll.scrollY;
 		}
@@ -71,10 +79,11 @@
 		isBordered && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',
+		isSticky && 'is-sticky',
 		className
 	)}
 >
-	<div class={cn('appbar-content', contentClass)}>
+	<div class={cn('appbar-content', isBoxed && 'boxed', contentClass)}>
 		{#if start}
 			<div class={cn('appbar-start', startClass)}>
 				{@render start()}

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

@@ -11,6 +11,8 @@ type Props = {
     isBlurred?: boolean;
     isBordered?: boolean;
     hideOnScroll?: boolean;
+    isSticky?: boolean;
+    isBoxed?: boolean;
 };
 declare const AppBar: import("svelte").Component<Props, {}, "">;
 type AppBar = ReturnType<typeof AppBar>;

package/dist/layout/Footer.svelte

@@ -14,6 +14,7 @@
 		endClass?: string;
 		isBlurred?: boolean;
 		isBordered?: boolean;
+		isBoxed?: boolean;
 		hideOnScroll?: boolean;
 	};
 
@@ -28,6 +29,7 @@
 		endClass,
 		isBordered,
 		isBlurred,
+		isBoxed,
 		hideOnScroll
 	}: Props = $props();
 
@@ -74,7 +76,7 @@
 		className
 	)}
 >
-	<div class={cn('footer-content', contentClass)}>
+	<div class={cn('footer-content', isBoxed && 'boxed', contentClass)}>
 		{#if start}
 			<div class={cn('footer-start', startClass)}>
 				{@render start()}

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

@@ -10,6 +10,7 @@ type Props = {
     endClass?: string;
     isBlurred?: boolean;
     isBordered?: boolean;
+    isBoxed?: boolean;
     hideOnScroll?: boolean;
 };
 declare const Footer: import("svelte").Component<Props, {}, "">;

package/dist/layout/Scaffold.svelte

@@ -12,6 +12,7 @@
 		mainClass?: string;
 		startClass?: string;
 		endClass?: string;
+		isBoxed?: boolean;
 	};
 
 	const {
@@ -23,15 +24,18 @@
 		bodyClass,
 		mainClass,
 		startClass,
-		endClass
+		endClass,
+		isBoxed
 	}: Props = $props();
 </script>
 
 {@render appBar?.()}
-<div class={cn('scaffold-body', bodyClass)}>
+<div class={cn('scaffold-body', isBoxed && 'boxed', bodyClass)}>
 	{#if start}
 		<aside class={cn('scaffold-start', startClass)}>
-			{@render start()}
+			<div class={cn('scaffold-content')}>
+				{@render start()}
+			</div>
 		</aside>
 	{/if}
 	<div class={cn('scaffold-main', mainClass)}>
@@ -39,7 +43,9 @@
 	</div>
 	{#if end}
 		<aside class={cn('scaffold-end', endClass)}>
-			{@render end()}
+			<div class={cn('scaffold-content')}>
+				{@render end()}
+			</div>
 		</aside>
 	{/if}
 </div>

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

@@ -9,6 +9,7 @@ type Props = {
     mainClass?: string;
     startClass?: string;
     endClass?: string;
+    isBoxed?: boolean;
 };
 declare const Scaffold: import("svelte").Component<Props, {}, "">;
 type Scaffold = ReturnType<typeof Scaffold>;

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

@@ -1,10 +1,13 @@
 @layer components {
 	.appbar {
-		@apply w-full fixed top-0 z-30 bg-background;
-		@apply transition-all duration-300 ease-in-out;
+		@apply w-full z-30;
+
+		&.is-sticky {
+			@apply fixed top-0;
+		}
 
 		&.is-blurred {
-			@apply backdrop-blur-lg bg-transparent;
+			@apply backdrop-blur-lg;
 		}
 
 		&.is-bordered {
@@ -20,15 +23,15 @@
 			@apply w-full px-2 h-full min-h-12;
 
 			.appbar-start {
-				@apply flex flex-nowrap justify-start items-center p-2 md:p-3 gap-2 md:gap-3 relative;
+				@apply flex flex-nowrap justify-start items-center p-3 gap-3 relative;
 			}
 
 			.appbar-center {
-				@apply flex flex-1 flex-nowrap justify-center items-center p-2 md:p-3 gap-2 md:gap-3 relative;
+				@apply flex flex-1 flex-nowrap justify-center items-center p-3 gap-3 relative;
 			}
 
 			.appbar-end {
-				@apply flex flex-nowrap justify-end items-center p-2 md:p-3 gap-2 md:gap-3 relative;
+				@apply flex flex-nowrap justify-end items-center p-3 gap-3 relative;
 			}
 		}
 	}

package/dist/layout/css/scaffold.css

@@ -1,15 +1,21 @@
 @layer components {
 	.scaffold-body {
 		@apply flex h-full w-full relative;
-		@apply bg-background text-on-background;
 		.scaffold-main {
 			@apply relative flex-1 flex flex-col min-w-0;
 		}
 		.scaffold-start {
-			@apply fixed z-10;
+			@apply relative;
 		}
 		.scaffold-end {
-			@apply fixed right-0 z-10;
+			@apply relative;
+		}
+
+		.scaffold-start,
+		.scaffold-end {
+			.scaffold-content {
+				@apply fixed w-fit h-full;
+			}
 		}
 	}
 }

package/dist/layout/css/sidebar.css

@@ -1,17 +1,17 @@
 @layer components {
 	.sidebar {
-		@apply flex h-full flex-col bg-background text-on-background;
+		@apply flex w-fit h-full flex-col;
 
 		.sidebar-header {
-			@apply flex flex-col gap-3 p-3;
+			@apply relative flex flex-col gap-3 p-3;
 		}
 
 		.sidebar-footer {
-			@apply flex flex-col gap-3 p-3;
+			@apply relative flex flex-col gap-3 p-3;
 		}
 
 		.sidebar-body {
-			@apply flex min-h-0 flex-1 flex-col gap-3 p-3 overflow-auto;
+			@apply relative flex min-h-0 w-full flex-col gap-3 p-3 overflow-hidden hover:overflow-y-auto;
 		}
 	}
 }

package/dist/navigation/SideNav.svelte

@@ -43,13 +43,15 @@
 		class: className,
 		variant = 'primary',
 		size = 'md',
-		isWide = false,
-		isCompact = false,
-		isCollapsible = false
+		isWide,
+		isCompact,
+		isCollapsible
 	}: Props = $props();
 
-	let openSubmenus = $state<Record<number, boolean>>(
-		items.reduce(
+	let openSubmenus = $state<Record<number, boolean>>({});
+
+	$effect(() => {
+		const initialState = items.reduce(
 			(acc, item, index) => {
 				if (item.type === 'submenu' && item.open) {
 					acc[index] = true;
@@ -57,10 +59,15 @@
 				return acc;
 			},
 			{} as Record<number, boolean>
-		)
-	);
+		);
+		openSubmenus = initialState;
+	});
+
+	let isExpanded = $state(true);
 
-	let isExpanded = $state(!isCollapsible);
+	$effect(() => {
+		isExpanded = !isCollapsible;
+	});
 
 	const variantClasses = {
 		primary: 'sidenav-primary',
@@ -184,6 +191,9 @@
 					class="sidenav-header sidenav-submenu-trigger"
 					onclick={() => toggleSubmenu(index)}
 				>
+					{#if item.icon}
+						<Icon icon={item.icon} />
+					{/if}
 					{#if isExpanded || !isCollapsible}
 						<div class="sidenav-header-content">
 							<div class="sidenav-header-label">{item.label}</div>

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

@@ -79,7 +79,7 @@
 
 		&.navmenu-primary {
 			.navmenu-item.is-active {
-				@apply bg-primary/10 text-primary;
+				@apply bg-on-primary text-primary;
 
 				.navmenu-icon {
 					@apply text-primary;
@@ -89,7 +89,7 @@
 
 		&.navmenu-secondary {
 			.navmenu-item.is-active {
-				@apply bg-secondary/10 text-secondary;
+				@apply bg-on-secondary text-secondary;
 
 				.navmenu-icon {
 					@apply text-secondary;

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

@@ -29,7 +29,6 @@
 
 			&.sidenav-header-link {
 				@apply cursor-pointer rounded-ui outline-none;
-				@apply transition-all duration-200;
 				@apply hover:bg-muted/50;
 
 				&.is-active {
@@ -51,7 +50,7 @@
 		}
 
 		.sidenav-item {
-			@apply relative flex w-fit items-center gap-2 rounded-ui pl-4 pr-3 py-2;
+			@apply relative flex w-fit items-center gap-2 rounded-ui px-3 py-2;
 			@apply cursor-pointer select-none outline-none;
 			@apply hover:bg-muted;
 
@@ -102,7 +101,7 @@
 
 		&.is-sm {
 			.sidenav-item {
-				@apply gap-1.5 pl-3 pr-2 py-1.5 text-xs;
+				@apply gap-1.5 px-2 py-1.5 text-xs;
 
 				.sidenav-icon-wrapper .sidenav-icon {
 					@apply h-4 w-4;
@@ -120,7 +119,7 @@
 
 		&.is-md {
 			.sidenav-item {
-				@apply gap-2 pl-4 pr-3 py-2 text-sm;
+				@apply gap-2 px-3 py-2 text-sm;
 
 				.sidenav-icon-wrapper .sidenav-icon {
 					@apply h-5 w-5;
@@ -138,7 +137,7 @@
 
 		&.is-lg {
 			.sidenav-item {
-				@apply gap-3 pl-5 pr-4 py-3 text-base;
+				@apply gap-3 px-4 py-3 text-base;
 
 				.sidenav-icon-wrapper .sidenav-icon {
 					@apply h-6 w-6;
@@ -227,16 +226,15 @@
 
 			.sidenav-submenu-trigger {
 				@apply w-full cursor-pointer rounded-ui outline-none;
-				@apply transition-all duration-200;
 				@apply hover:bg-muted/50;
 				@apply justify-start;
 			}
 
 			.sidenav-submenu-content {
-				@apply ml-6 flex flex-col gap-0.5 border-l border-muted pl-2;
+				@apply ml-5 flex flex-col gap-0.5 border-l border-muted pl-2;
 
 				.sidenav-subitem {
-					@apply text-sm pl-2;
+					@apply text-sm;
 				}
 			}
 		}

package/dist/overlay/Dropdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Item } from '../index.js';
+	import type { IconData } from '../types.js';
 	import { onMount, type Snippet } from 'svelte';
 
 	type Option = {
@@ -7,6 +8,7 @@
 		label: string;
 		description?: string;
 		src?: string;
+		icon?: IconData;
 		href?: string;
 		onclick?: (option: Option) => void;
 	};
@@ -125,6 +127,7 @@
 				<Item
 					label={item.label}
 					src={item.src}
+					icon={item.icon}
 					description={item.description}
 					id={item.id}
 					href={item.href}

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { IconData } from './display/Icon.svelte';
 export interface DatePosition {
     top: number;
     left: number;
@@ -14,62 +15,4 @@ export type BandScale = ((value: string) => number) & {
     bandwidth: () => number;
     step: () => number;
 };
-export interface ChartConfig {
-    [key: string]: {
-        label: string;
-        color: string;
-        icon?: string;
-    };
-}
-export interface ChartDataPoint {
-    [key: string]: string | number;
-}
-export interface ChartMargin {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-}
-export type ChartData = ChartDataPoint[];
-export interface ChartProps {
-    data: ChartData;
-    config: ChartConfig;
-    className?: string;
-    width?: number;
-    height?: number;
-}
-export interface BarChartProps extends ChartProps {
-    xKey: string;
-    yKeys: string[];
-    showGrid?: boolean;
-    showAxis?: boolean;
-    barSpacing?: number;
-}
-export interface LineChartProps extends ChartProps {
-    xKey: string;
-    yKeys: string[];
-    showGrid?: boolean;
-    showAxis?: boolean;
-    smooth?: boolean;
-    showDots?: boolean;
-}
-export interface PieChartProps extends ChartProps {
-    valueKey: string;
-    labelKey: string;
-    showLabels?: boolean;
-    innerRadius?: number;
-}
-export interface AreaChartProps extends ChartProps {
-    xKey: string;
-    yKeys: string[];
-    showGrid?: boolean;
-    showAxis?: boolean;
-    smooth?: boolean;
-    stacked?: boolean;
-}
-export interface DoughnutChartProps extends ChartProps {
-    valueKey: string;
-    labelKey: string;
-    showLabels?: boolean;
-    innerRadius?: number;
-}
+export type { IconData };

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "ui-svelte",
-	"version": "0.1.0",
+	"version": "0.2.1",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/sappsdev/sappsui_svelte.git"
+		"url": "https://github.com/sappsdev/ui-svelte.git"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^6.1.0",
@@ -43,7 +43,7 @@
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
-	"homepage": "https://svelte.sappsdev.com",
+	"homepage": "https://ui-svelte.sappsdev.com",
 	"keywords": [
 		"svelte"
 	],