uisv 0.0.20 → 0.0.22

package/dist/components/accordion.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import { Accordion } from 'bits-ui';
 	import type { Component, Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type AccordionItem = {
 		label: string;
@@ -25,15 +24,15 @@
 		content?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
 		body?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
 		ui?: {
-			root?: ClassNameValue;
-			item?: ClassNameValue;
-			header?: ClassNameValue;
-			trigger?: ClassNameValue;
-			content?: ClassNameValue;
-			body?: ClassNameValue;
-			leadingicon?: ClassNameValue;
-			trailingicon?: ClassNameValue;
-			label?: ClassNameValue;
+			root?: ClassValue;
+			item?: ClassValue;
+			header?: ClassValue;
+			trigger?: ClassValue;
+			content?: ClassValue;
+			body?: ClassValue;
+			leadingicon?: ClassValue;
+			trailingicon?: ClassValue;
+			label?: ClassValue;
 		};
 	};
 </script>
@@ -51,9 +50,9 @@
 		trailing,
 		content,
 		body,
-		ui = {}
+		ui = {},
 	}: AccordionProps = $props();
-	const classes = $derived(
+	const variants = $derived(
 		tv({
 			slots: {
 				root: 'w-full',
@@ -67,23 +66,23 @@
 				leadingIcon: 'shrink-0 size-5',
 				trailingIcon:
 					'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
-				label: 'text-start break-words'
+				label: 'text-start break-words',
 			},
 			variants: {
 				disabled: {
 					true: {
-						trigger: 'cursor-not-allowed opacity-75'
-					}
-				}
-			}
+						trigger: 'cursor-not-allowed opacity-75',
+					},
+				},
+			},
 		})({
-			disabled
-		})
+			disabled,
+		}),
 	);
 </script>
 
 <Accordion.Root
-	class={classes.root({ class: ui.root })}
+	class={variants.root({ class: ui.root })}
 	type="multiple"
 	bind:value={
 		() => {

package/dist/components/accordion.svelte.d.ts

@@ -1,6 +1,6 @@
 import { Accordion } from 'bits-ui';
 import type { Component, Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type AccordionItem = {
     label: string;
     icon?: string | Snippet | Component;
@@ -42,15 +42,15 @@ export type AccordionProps = {
         open: boolean;
     }]>;
     ui?: {
-        root?: ClassNameValue;
-        item?: ClassNameValue;
-        header?: ClassNameValue;
-        trigger?: ClassNameValue;
-        content?: ClassNameValue;
-        body?: ClassNameValue;
-        leadingicon?: ClassNameValue;
-        trailingicon?: ClassNameValue;
-        label?: ClassNameValue;
+        root?: ClassValue;
+        item?: ClassValue;
+        header?: ClassValue;
+        trigger?: ClassValue;
+        content?: ClassValue;
+        body?: ClassValue;
+        leadingicon?: ClassValue;
+        trailingicon?: ClassValue;
+        label?: ClassValue;
     };
 };
 declare const Accordion: Component<AccordionProps, {}, "value">;

package/dist/components/alert.svelte

@@ -5,11 +5,12 @@
 		type ButtonProps,
 		Button,
 		type PropVariant,
+		Icon,
 	} from '../index.js';
 	import type { Component, Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import { defu } from 'defu';
+	import { app_icons } from '../contexts.js';
 
 	export type AlertProps = {
 		title?: string | Snippet;
@@ -21,10 +22,10 @@
 		actions?: ButtonProps[];
 		close?: boolean | ButtonProps;
 		ui?: {
-			base?: ClassNameValue;
-			icon?: ClassNameValue;
-			description?: ClassNameValue;
-			title?: ClassNameValue;
+			base?: ClassValue;
+			icon?: ClassValue;
+			description?: ClassValue;
+			title?: ClassValue;
 		};
 		onclose?: () => void | Promise<void>;
 	};
@@ -46,7 +47,7 @@
 
 	const close_props = $derived.by(() => {
 		return defu(typeof close === 'boolean' ? {} : close, {
-			icon: 'i-lucide-x',
+			icon: app_icons.get().close,
 			variant: 'link',
 			color: variant === 'solid' ? 'surface' : color,
 			ui: {
@@ -54,7 +55,7 @@
 			},
 		} as ButtonProps);
 	});
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				base: 'flex gap-2 font-sans p-4 rounded-lg',
@@ -99,7 +100,7 @@
 				{
 					variant: 'solid',
 					color: 'surface',
-					class: 'bg-surface-900',
+					class: 'bg-surface-inverted',
 				},
 				{
 					variant: 'solid',
@@ -130,7 +131,7 @@
 				{
 					variant: 'outline',
 					color: 'surface',
-					class: 'border-surface-300 text-surface-900',
+					class: 'border-surface-accented text-surface-inverted',
 				},
 				{
 					variant: 'outline',
@@ -161,7 +162,7 @@
 				{
 					variant: 'soft',
 					color: 'surface',
-					class: 'bg-surface-50 text-surface-900',
+					class: 'bg-surface-muted text-surface-inverted',
 				},
 				{
 					variant: 'soft',
@@ -192,7 +193,7 @@
 				{
 					variant: 'subtle',
 					color: 'surface',
-					class: 'bg-surface-50 text-surface-900 border-surface-300',
+					class: 'bg-surface-muted text-surface-inverted border-surface-accented',
 				},
 				{
 					variant: 'subtle',
@@ -219,24 +220,17 @@
 	);
 </script>
 
-<div class={classes.base({ class: [position === 'bottom' ? '' : 'flex', ui.base] })}>
-	<div class="flex gap-2 flex-grow">
-		{#if icon}
-			<div class="size-6">
-				{#if typeof icon === 'string'}
-					<div class={classes.icon({ class: [icon] })}></div>
-				{:else if isSnippet(icon)}
-					{@render icon()}
-				{:else}
-					{@const Icon = icon}
-					<Icon />
-				{/if}
-			</div>
+<div class={variants.base({ class: [position === 'bottom' ? '' : 'flex', ui.base] })}>
+	<div class="flex gap-2 grow">
+		{#if isSnippet(icon)}
+			{@render icon()}
+		{:else}
+			<Icon name={icon} class={variants.icon({ class: ui.icon })} />
 		{/if}
 
-		<div class="space-y-1 flex-grow">
+		<div class="space-y-1 grow">
 			{#if title}
-				<div class={classes.title({ class: [ui.title] })}>
+				<div class={variants.title({ class: [ui.title] })}>
 					{#if isSnippet(title)}
 						{@render title()}
 					{:else}
@@ -246,7 +240,7 @@
 			{/if}
 
 			{#if description}
-				<div class={classes.description({ class: [ui.title] })}>
+				<div class={variants.description({ class: [ui.title] })}>
 					{#if isSnippet(description)}
 						{@render description()}
 					{:else}

package/dist/components/alert.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type PropColor, type ButtonProps, type PropVariant } from '../index.js';
 import type { Component, Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type AlertProps = {
     title?: string | Snippet;
     description?: string | Snippet;
@@ -11,10 +11,10 @@ export type AlertProps = {
     actions?: ButtonProps[];
     close?: boolean | ButtonProps;
     ui?: {
-        base?: ClassNameValue;
-        icon?: ClassNameValue;
-        description?: ClassNameValue;
-        title?: ClassNameValue;
+        base?: ClassValue;
+        icon?: ClassValue;
+        description?: ClassValue;
+        title?: ClassValue;
     };
     onclose?: () => void | Promise<void>;
 };

package/dist/components/app.svelte

@@ -0,0 +1,57 @@
+<script module lang="ts">
+	import { app_icons, DEFAULT_ICONS, type AppIcons } from '../contexts.js';
+	import { ModeWatcher, type ModeWatcherProps } from '../mode.js';
+	import { Tooltip } from 'bits-ui';
+	import defu from 'defu';
+	import { type Snippet } from 'svelte';
+	import { Toaster, type ToasterProps } from 'svelte-sonner';
+	import { boxWith } from 'svelte-toolbelt';
+	import { Icon } from './index.js';
+
+	export type AppProps = {
+		children?: Snippet;
+		modewatcher?: ModeWatcherProps;
+		toaster?: ToasterProps;
+		tooltip?: Tooltip.ProviderProps;
+		icons?: Partial<Record<AppIcons, `i-${string}:${string}`>>;
+	};
+</script>
+
+<script lang="ts">
+	let { children, modewatcher, toaster, tooltip, icons = {} }: AppProps = $props();
+
+	const _icons = boxWith(() => defu(icons, DEFAULT_ICONS));
+
+	app_icons.set(_icons.current);
+</script>
+
+<ModeWatcher {...modewatcher} />
+<Toaster {...toaster}>
+	{#snippet infoIcon()}
+		<Icon name={app_icons.get().info} />
+	{/snippet}
+
+	{#snippet closeIcon()}
+		<Icon name={app_icons.get().close} />
+	{/snippet}
+
+	{#snippet errorIcon()}
+		<Icon name={app_icons.get().error} />
+	{/snippet}
+
+	{#snippet loadingIcon()}
+		<Icon name={app_icons.get().loading} />
+	{/snippet}
+
+	{#snippet successIcon()}
+		<Icon name={app_icons.get().success} />
+	{/snippet}
+
+	{#snippet warningIcon()}
+		<Icon name={app_icons.get().warning} />
+	{/snippet}
+</Toaster>
+
+<Tooltip.Provider {...tooltip}>
+	{@render children?.()}
+</Tooltip.Provider>

package/dist/components/app.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type AppIcons } from '../contexts.js';
+import { type ModeWatcherProps } from '../mode.js';
+import { Tooltip } from 'bits-ui';
+import { type Snippet } from 'svelte';
+import { type ToasterProps } from 'svelte-sonner';
+export type AppProps = {
+    children?: Snippet;
+    modewatcher?: ModeWatcherProps;
+    toaster?: ToasterProps;
+    tooltip?: Tooltip.ProviderProps;
+    icons?: Partial<Record<AppIcons, `i-${string}:${string}`>>;
+};
+declare const App: import("svelte").Component<AppProps, {}, "">;
+type App = ReturnType<typeof App>;
+export default App;

package/dist/components/badge.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
 	import type { Component, Snippet } from 'svelte';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import { type PropColor, type PropVariant, isSnippet } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
+	import Icon from './icon.svelte';
 
 	export type BadgeProps = {
 		label?: string;
@@ -13,8 +13,8 @@
 		trailingicon?: boolean;
 		children?: Snippet;
 		ui?: {
-			base?: ClassNameValue;
-			icon?: ClassNameValue;
+			base?: ClassValue;
+			icon?: ClassValue;
 		};
 	};
 </script>
@@ -31,7 +31,7 @@
 		children,
 	}: BadgeProps = $props();
 
-	const classes = $derived.by(() => {
+	const variants = $derived.by(() => {
 		return tv({
 			slots: { icon: '', base: 'flex-inline items-center font-sans' },
 			variants: {
@@ -71,7 +71,7 @@
 				{
 					color: 'surface',
 					variant: 'solid',
-					class: 'bg-surface-900',
+					class: 'bg-surface-inverted text-label-inverted',
 				},
 				{
 					color: 'info',
@@ -97,94 +97,94 @@
 				{
 					color: 'primary',
 					variant: 'outline',
-					class: 'border-primary-300 text-primary-400',
+					class: 'border-primary/50 text-primary',
 				},
 				{
 					color: 'surface',
 					variant: 'outline',
-					class: 'border-surface-300 text-surface-900',
+					class: 'border-surface-accented text-label-highlighted',
 				},
 				{
 					color: 'info',
 					variant: 'outline',
-					class: 'border-info-300 text-info-500',
+					class: 'border-info/50 text-info',
 				},
 				{
 					color: 'success',
 					variant: 'outline',
-					class: 'border-green-300 text-success-500',
+					class: 'border-green/50 text-success',
 				},
 				{
 					color: 'error',
 					variant: 'outline',
-					class: 'border-error-300 text-error-500',
+					class: 'border-error/50 text-error',
 				},
 				{
 					color: 'warning',
 					variant: 'outline',
-					class: 'border-warning-300 text-warning-500',
+					class: 'border-warning/50 text-warning',
 				},
 
 				{
 					color: 'primary',
 					variant: 'soft',
-					class: ' bg-primary-50 text-primary-500',
+					class: ' bg-primary/10 text-primary-500',
 				},
 				{
 					color: 'surface',
 					variant: 'soft',
-					class: 'bg-surface-100 text-surface-800',
+					class: 'bg-surface/10 text-label-highlighted',
 				},
 				{
 					color: 'info',
 					variant: 'soft',
-					class: 'bg-info-100 text-info-500',
+					class: 'bg-info/10 text-info-500',
 				},
 				{
 					color: 'success',
 					variant: 'soft',
-					class: 'bg-success-100 text-success-500',
+					class: 'bg-success/10 text-success-500',
 				},
 				{
 					color: 'error',
 					variant: 'soft',
-					class: 'bg-error-100 text-error-500',
+					class: 'bg-error/10 text-error-500',
 				},
 				{
 					color: 'warning',
 					variant: 'soft',
-					class: 'bg-warning-100 text-warning-500 ',
+					class: 'bg-warning/10 text-warning-500 ',
 				},
 
 				{
 					color: 'primary',
 					variant: 'subtle',
-					class: 'bg-primary-50 text-primary-500 border-primary-200 ',
+					class: 'bg-primary/10 text-primary-500 border-primary/20',
 				},
 				{
 					color: 'surface',
 					variant: 'subtle',
-					class: 'bg-surface-100 text-surface-800 border-surface-300 ',
+					class: 'bg-surface/10 text-label-highlighted border-surface/20 ',
 				},
 				{
 					color: 'info',
 					variant: 'subtle',
-					class: 'bg-info-50 text-info-600 border-info-200',
+					class: 'bg-info/10 text-info-600 border-info/20',
 				},
 				{
 					color: 'success',
 					variant: 'subtle',
-					class: 'bg-success-100 text-success-600 border-success-300',
+					class: 'bg-success/10 text-success-600 border-success/20',
 				},
 				{
 					color: 'error',
 					variant: 'subtle',
-					class: 'bg-error-50 text-error-600 border-error-200',
+					class: 'bg-error/10 text-error-600 border-error/20',
 				},
 				{
 					color: 'warning',
 					variant: 'subtle',
-					class: 'bg-warning-50 text-warning-600 border-warning-300',
+					class: 'bg-warning/10 text-warning-600 border-warning/20',
 				},
 			],
 		})({ variant, size, color });
@@ -192,12 +192,16 @@
 </script>
 
 <span
-	class={classes.base({
+	class={variants.base({
 		class: [icon && !(children || label) ? 'px-0 aspect-square justify-center' : '', ui.base],
 	})}
 >
 	{#if !trailingicon}
-		{@render Icon()}
+		{#if isSnippet(icon)}
+			{@render icon()}
+		{:else}
+			<Icon name={icon} class={variants.icon({ class: ui.icon })} />
+		{/if}
 	{/if}
 
 	{#if label}
@@ -207,19 +211,10 @@
 	{/if}
 
 	{#if trailingicon}
-		{@render Icon()}
-	{/if}
-</span>
-
-{#snippet Icon()}
-	{#if icon}
-		{#if typeof icon === 'string'}
-			<div class={['pi', icon, classes.icon(), ui.icon]}></div>
-		{:else if isSnippet(icon)}
+		{#if isSnippet(icon)}
 			{@render icon()}
 		{:else}
-			{@const Icon = icon}
-			<Icon />
+			<Icon name={icon} class={variants.icon({ class: ui.icon })} />
 		{/if}
 	{/if}
-{/snippet}
+</span>

package/dist/components/badge.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Component, Snippet } from 'svelte';
+import { type ClassValue } from 'tailwind-variants';
 import { type PropColor, type PropVariant } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
 export type BadgeProps = {
     label?: string;
     color?: PropColor;
@@ -10,8 +10,8 @@ export type BadgeProps = {
     trailingicon?: boolean;
     children?: Snippet;
     ui?: {
-        base?: ClassNameValue;
-        icon?: ClassNameValue;
+        base?: ClassValue;
+        icon?: ClassValue;
     };
 };
 declare const Badge: Component<BadgeProps, {}, "">;