uisv 0.0.21 → 0.0.23

package/dist/components/accordion.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
+	import { getAppContext } from '../contexts.js';
 	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 +25,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>
@@ -45,15 +45,15 @@
 		collapsible = true,
 		disabled,
 		type = 'single',
-		trailingicon = 'i-lucide-baret-down',
+		trailingicon = getAppContext().icons.chevrondown,
 		leading,
 		default: defau,
 		trailing,
 		content,
 		body,
-		ui = {}
+		ui = {},
 	}: AccordionProps = $props();
-	const classes = $derived(
+	const variants = $derived(
 		tv({
 			slots: {
 				root: 'w-full',
@@ -67,23 +67,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 { getAppContext } 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: getAppContext().icons.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,63 @@
+<script module lang="ts">
+	import { DEFAULT_ICONS, setAppContext, type AppContext } from '../contexts.js';
+	import { mode, ModeWatcher } from '../mode.js';
+	import { Tooltip } from 'bits-ui';
+	import defu from 'defu';
+	import { type Snippet } from 'svelte';
+	import { Toaster } from 'svelte-sonner';
+	import { boxWith } from 'svelte-toolbelt';
+	import { Icon } from './index.js';
+
+	export type AppProps = Partial<AppContext> & {
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { children, modewatcher = {}, toaster = {}, tooltip = {}, icons = {} }: AppProps = $props();
+
+	const context = boxWith(() =>
+		defu({ icons, toaster, modewatcher, tooltip }, <AppContext>{
+			icons: DEFAULT_ICONS,
+			toaster: {
+				visibleToasts: 5,
+				duration: 6000,
+				theme: mode.current,
+			},
+			modewatcher: {},
+		}),
+	);
+	setAppContext(context.current);
+</script>
+
+<ModeWatcher {...context.current.modewatcher} />
+
+<Toaster {...context.current.toaster}>
+	{#snippet infoIcon()}
+		<Icon name={context.current.icons.info} />
+	{/snippet}
+
+	{#snippet closeIcon()}
+		<Icon name={context.current.icons.close} />
+	{/snippet}
+
+	{#snippet errorIcon()}
+		<Icon name={context.current.icons.error} />
+	{/snippet}
+
+	{#snippet loadingIcon()}
+		<Icon name={context.current.icons.loading} />
+	{/snippet}
+
+	{#snippet successIcon()}
+		<Icon name={context.current.icons.success} />
+	{/snippet}
+
+	{#snippet warningIcon()}
+		<Icon name={context.current.icons.warning} />
+	{/snippet}
+</Toaster>
+
+<Tooltip.Provider {...context.current.tooltip}>
+	{@render children?.()}
+</Tooltip.Provider>

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

@@ -0,0 +1,8 @@
+import { type AppContext } from '../contexts.js';
+import { type Snippet } from 'svelte';
+export type AppProps = Partial<AppContext> & {
+    children?: Snippet;
+};
+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-inverted text-inverted',
+					class: 'bg-surface-inverted text-label-inverted',
 				},
 				{
 					color: 'info',
@@ -102,7 +102,7 @@
 				{
 					color: 'surface',
 					variant: 'outline',
-					class: 'border-surface-accented text-highlighted',
+					class: 'border-surface-accented text-label-highlighted',
 				},
 				{
 					color: 'info',
@@ -133,7 +133,7 @@
 				{
 					color: 'surface',
 					variant: 'soft',
-					class: 'bg-surface/10 text-highlighted',
+					class: 'bg-surface/10 text-label-highlighted',
 				},
 				{
 					color: 'info',
@@ -164,7 +164,7 @@
 				{
 					color: 'surface',
 					variant: 'subtle',
-					class: 'bg-surface/10 text-highlighted border-surface/20 ',
+					class: 'bg-surface/10 text-label-highlighted border-surface/20 ',
 				},
 				{
 					color: 'info',
@@ -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, {}, "">;

package/dist/components/banner.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 { getAppContext } from '../contexts.js';
 
 	export type BannerProps = {
 		title: string | Snippet;
@@ -21,10 +22,10 @@
 		href?: string;
 		target?: string;
 		ui?: {
-			base?: ClassNameValue;
-			icon?: ClassNameValue;
-			description?: ClassNameValue;
-			title?: ClassNameValue;
+			base?: ClassValue;
+			icon?: ClassValue;
+			description?: ClassValue;
+			title?: ClassValue;
 		};
 		onclose?: () => void | Promise<void>;
 	};
@@ -44,7 +45,7 @@
 		onclose = () => {},
 	}: BannerProps = $props();
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				base: 'flex items-center gap-2 font-sans p-4',
@@ -63,8 +64,8 @@
 				},
 				variant: {
 					solid: {
-						base: 'text-inverted',
-						description: 'text-inverted/90',
+						base: 'text-label-inverted',
+						description: 'text-label-inverted/90',
 					},
 					outline: 'border',
 					soft: '',
@@ -204,23 +205,16 @@
 	this={href ? 'a' : 'button'}
 	{href}
 	{target}
-	class={classes.base({ class: [ui.base] })}
+	class={variants.base({ class: [ui.base] })}
 >
 	<div class="flex grow gap-2 text-sm items-center">
-		{#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>
+		{#if isSnippet(icon)}
+			{@render icon()}
+		{:else}
+			<Icon name={icon} class={variants.icon({ class: ui.icon })} />
 		{/if}
 
-		<div class={classes.title({ class: [ui.title] })}>
+		<div class={variants.title({ class: [ui.title] })}>
 			{#if isSnippet(title)}
 				{@render title()}
 			{:else}
@@ -244,11 +238,11 @@
 		<div>
 			<Button
 				{...defu<ButtonProps, [ButtonProps]>(typeof close === 'boolean' ? {} : close, {
-					icon: 'i-lucide-x',
+					icon: getAppContext().icons.close,
 					variant: 'ghost',
 					color: 'surface',
 					ui: {
-						icon: variant === 'solid' ? 'text-inverted' : '',
+						icon: variant === 'solid' ? 'text-label-inverted' : '',
 					},
 				})}
 				onclick={onclose}

package/dist/components/banner.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 BannerProps = {
     title: string | Snippet;
     icon?: string | Snippet | Component;
@@ -11,10 +11,10 @@ export type BannerProps = {
     href?: string;
     target?: string;
     ui?: {
-        base?: ClassNameValue;
-        icon?: ClassNameValue;
-        description?: ClassNameValue;
-        title?: ClassNameValue;
+        base?: ClassValue;
+        icon?: ClassValue;
+        description?: ClassValue;
+        title?: ClassValue;
     };
     onclose?: () => void | Promise<void>;
 };

package/dist/components/breadcrumb.svelte

@@ -1,30 +1,29 @@
 <script module lang="ts">
 	import type { Component, Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { Button, Icon, type ButtonProps } from './index.js';
+	import { Button, Icon, type ButtonProps, isSnippet } from '../index.js';
 	import { tv } from 'tailwind-variants';
-	import { isSnippet } from '../utilities.svelte.js';
+	import { getAppContext } from '../contexts.js';
 
 	export type BreadcrumbItem = Omit<ButtonProps, 'label'> & {
 		label?: string;
 		icon?: string | Component;
 		snippet?: string;
-		[key: string]: any;
+		[key: string]: unknown;
 	};
 
 	export type BreadcrumbProps = {
 		items: BreadcrumbItem[];
 		seperator?: string | Component | Snippet;
 		labelkey?: string;
-		[key: string]: any | Snippet<[BreadcrumbItem]>;
+		[key: string]: unknown | Snippet<[BreadcrumbItem]>;
 	};
 </script>
 
-<script lang="ts" generics="T extends BreadcrumbItem">
+<script lang="ts">
 	let {
 		items,
 		labelkey = 'label',
-		seperator = 'i-lucide:chevron-right',
+		seperator = getAppContext().icons.chevronright,
 		...rest
 	}: BreadcrumbProps = $props();
 
@@ -53,7 +52,7 @@
 					{/if}
 				{:else}
 					<Button
-						label={item[labelkey]}
+						label={item[labelkey] as undefined}
 						icon={item.icon}
 						href={item.href}
 						variant="link"

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

@@ -1,38 +1,17 @@
 import type { Component, Snippet } from 'svelte';
-import { type ButtonProps } from './index.js';
+import { type ButtonProps } from '../index.js';
 export type BreadcrumbItem = Omit<ButtonProps, 'label'> & {
     label?: string;
     icon?: string | Component;
     snippet?: string;
-    [key: string]: any;
+    [key: string]: unknown;
 };
 export type BreadcrumbProps = {
     items: BreadcrumbItem[];
     seperator?: string | Component | Snippet;
     labelkey?: string;
-    [key: string]: any | Snippet<[BreadcrumbItem]>;
+    [key: string]: unknown | Snippet<[BreadcrumbItem]>;
 };
-declare function $$render<T extends BreadcrumbItem>(): {
-    props: BreadcrumbProps;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends BreadcrumbItem> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends BreadcrumbItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends BreadcrumbItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Breadcrumb: $$IsomorphicComponent;
-type Breadcrumb<T extends BreadcrumbItem> = InstanceType<typeof Breadcrumb<T>>;
+declare const Breadcrumb: Component<BreadcrumbProps, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
 export default Breadcrumb;