ui-svelte 0.2.1 → 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/Collapsible.svelte

@@ -12,7 +12,7 @@
 		disabled?: boolean;
 		defaultOpen?: boolean;
 		variant?: 'primary' | 'secondary' | 'muted' | 'outline';
-		class?: string;
+		rootClass?: string;
 		headerClass?: string;
 		contentClass?: string;
 	};
@@ -24,7 +24,7 @@
 		disabled = false,
 		defaultOpen = false,
 		variant = 'muted',
-		class: className,
+		rootClass,
 		headerClass,
 		contentClass
 	}: Props = $props();
@@ -44,7 +44,7 @@
 	}
 </script>
 
-<div class={cn('collapsible', variants[variant], className, disabled && 'is-disabled')}>
+<div class={cn('collapsible', variants[variant], rootClass, disabled && 'is-disabled')}>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn('collapsible-header', headerClass, isOpen && 'is-open')} onclick={toggle}>

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

@@ -6,7 +6,7 @@ type Props = {
     disabled?: boolean;
     defaultOpen?: boolean;
     variant?: 'primary' | 'secondary' | 'muted' | 'outline';
-    class?: string;
+    rootClass?: string;
     headerClass?: string;
     contentClass?: string;
 };

package/dist/display/Empty.svelte

@@ -7,7 +7,7 @@
 		href?: string;
 		onclick?: () => void;
 	};
-	let { type = 'template', class: className }: Props = $props();
+	let { type = 'template', class: className, title, description }: Props = $props();
 </script>
 
 <div class="empty">
@@ -455,8 +455,14 @@
 			/>
 		</svg>
 	{/if}
-	<div>
-		<h6>Title</h6>
-		<p>Description Error</p>
-	</div>
+	{#if title || description}
+		<div class="column center">
+			{#if title}
+				<h6>{title}</h6>
+			{/if}
+			{#if description}
+				<p>{description}</p>
+			{/if}
+		</div>
+	{/if}
 </div>

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/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/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/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/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 {