uisv 0.0.20 → 0.0.22

package/dist/components/banner.svelte

@@ -5,12 +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 { useId } from 'bits-ui';
+	import { app_icons } from '../contexts.js';
 
 	export type BannerProps = {
 		title: string | Snippet;
@@ -22,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,19 +44,8 @@
 		ui = {},
 		onclose = () => {},
 	}: BannerProps = $props();
-	const id = useId();
 
-	const close_props = $derived.by(() => {
-		return defu(typeof close === 'boolean' ? {} : close, {
-			icon: 'i-lucide-x',
-			variant: 'link',
-			color: variant === 'solid' ? 'surface' : color,
-			ui: {
-				icon: variant === 'solid' ? 'text-white' : '',
-			},
-		} as ButtonProps);
-	});
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				base: 'flex items-center gap-2 font-sans p-4',
@@ -75,8 +64,8 @@
 				},
 				variant: {
 					solid: {
-						base: 'text-white',
-						description: 'text-white/90',
+						base: 'text-label-inverted',
+						description: 'text-label-inverted/90',
 					},
 					outline: 'border',
 					soft: '',
@@ -92,7 +81,7 @@
 				{
 					variant: 'solid',
 					color: 'surface',
-					class: 'bg-surface-900',
+					class: 'bg-surface-inverted',
 				},
 				{
 					variant: 'solid',
@@ -118,94 +107,94 @@
 				{
 					variant: 'outline',
 					color: 'primary',
-					class: 'border-primary-300 text-primary-500',
+					class: 'border-primary/15 text-primary-500',
 				},
 				{
 					variant: 'outline',
 					color: 'surface',
-					class: 'border-surface-300 text-surface-900',
+					class: 'border-surface/15',
 				},
 				{
 					variant: 'outline',
 					color: 'info',
-					class: 'border-info-300 text-info-500',
+					class: 'border-info/15 text-info-500',
 				},
 				{
 					variant: 'outline',
 					color: 'success',
-					class: 'border-success-300 text-success-500',
+					class: 'border-success/15 text-success-500',
 				},
 				{
 					variant: 'outline',
 					color: 'warning',
-					class: 'border-warning-300 text-warning-500',
+					class: 'border-warning/15 text-warning-500',
 				},
 				{
 					variant: 'outline',
 					color: 'error',
-					class: 'border-error-300 text-error-500',
+					class: 'border-error/15 text-error-500',
 				},
 
 				{
 					variant: 'soft',
 					color: 'primary',
-					class: 'bg-primary-100 text-primary-500',
+					class: 'bg-primary/10 text-primary-500',
 				},
 				{
 					variant: 'soft',
 					color: 'surface',
-					class: 'bg-surface-50 text-surface-900',
+					class: 'bg-surface/10',
 				},
 				{
 					variant: 'soft',
 					color: 'info',
-					class: 'bg-info-50 text-info-500',
+					class: 'bg-info/10 text-info-500',
 				},
 				{
 					variant: 'soft',
 					color: 'success',
-					class: 'bg-success-50 text-success-500',
+					class: 'bg-success/10 text-success-500',
 				},
 				{
 					variant: 'soft',
 					color: 'warning',
-					class: 'bg-warning-50 text-warning-500',
+					class: 'bg-warning/10 text-warning-500',
 				},
 				{
 					variant: 'soft',
 					color: 'error',
-					class: 'bg-error-50 text-error-500',
+					class: 'bg-error/10 text-error-500',
 				},
 
 				{
 					variant: 'subtle',
 					color: 'primary',
-					class: 'bg-primary-100 text-primary-500 border-primary-300',
+					class: 'bg-primary/10 text-primary-500 border-primary/15',
 				},
 				{
 					variant: 'subtle',
 					color: 'surface',
-					class: 'bg-surface-50 text-surface-900 border-surface-300',
+					class: 'bg-surface/10 border-surface/15',
 				},
 				{
 					variant: 'subtle',
 					color: 'info',
-					class: 'bg-info-50 text-info-500 border-info-300',
+					class: 'bg-info/10 text-info-500 border-info/15',
 				},
 				{
 					variant: 'subtle',
 					color: 'success',
-					class: 'bg-success-50 text-success-500 border-success-300',
+					class: 'bg-success/10 text-success-500 border-success/15',
 				},
 				{
 					variant: 'subtle',
 					color: 'warning',
-					class: 'bg-warning-50 text-warning-500 border-warning-300',
+					class: 'bg-warning/10 text-warning-500 border-warning/15',
 				},
 				{
 					variant: 'subtle',
 					color: 'error',
-					class: 'bg-error-50 text-error-500  border-error-300',
+					class: 'bg-error/10 text-error-500  border-error/15',
 				},
 			],
 		})({ color, variant }),
@@ -216,23 +205,16 @@
 	this={href ? 'a' : 'button'}
 	{href}
 	{target}
-	class={classes.base({ class: [ui.base] })}
+	class={variants.base({ class: [ui.base] })}
 >
-	<div class="flex 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>
+	<div class="flex grow gap-2 text-sm items-center">
+		{#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}
@@ -254,7 +236,17 @@
 
 	{#if close}
 		<div>
-			<Button {...close_props} onclick={onclose} />
+			<Button
+				{...defu<ButtonProps, [ButtonProps]>(typeof close === 'boolean' ? {} : close, {
+					icon: app_icons.get().close,
+					variant: 'ghost',
+					color: 'surface',
+					ui: {
+						icon: variant === 'solid' ? 'text-label-inverted' : '',
+					},
+				})}
+				onclick={onclose}
+			/>
 		</div>
 	{/if}
 </svelte:element>

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,30 @@
 <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 { tv } from 'tailwind-variants';
 	import { isSnippet } from '../utilities.svelte.js';
+	import { app_icons } 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 = app_icons.get().chevronright,
 		...rest
 	}: BreadcrumbProps = $props();
 
@@ -53,7 +53,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

@@ -4,35 +4,14 @@ 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;

package/dist/components/button.svelte

@@ -1,14 +1,12 @@
 <script module lang="ts">
 	import { type Component, type Snippet } from 'svelte';
-	import { isComponent, type PropColor, type PropVariant } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
+	import { type PropColor, type PropVariant, Icon } from '../index.js';
 	// import { FORM_LOADING_CONTEXT_KEY } from '../utils/keys.js';
-	import { isSnippet } from '../index.js';
-	import { tv } from 'tailwind-variants';
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { Button } from 'bits-ui';
+	import { tv, type ClassValue } from 'tailwind-variants';
+	import { app_icons } from '../contexts.js';
 
-	export type ButtonProps = SvelteHTMLElements['button'] & {
+	export type ButtonBaseProps = {
 		/** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
 		ref?: HTMLButtonElement | HTMLAnchorElement;
 		/** Where to display the linked URL, as the name for a browsing context. */
@@ -19,15 +17,15 @@
 		/** The type of the button when not a link. */
 		type?: 'submit' | 'reset' | 'button' | null | undefined;
 		/** When true, the icon will be displayed on the right side. */
-		loadingicon?: string | Snippet | Component;
+		loadingicon?: string | Component;
 		/** When true, the loading icon will be displayed. */
 		loading?: boolean;
 		/** The position of the icon, including the loading icon */
-		iconposition?: 'left' | 'right';
+		iconposition?: 'leading' | 'trailing';
 		/** Icon when `loading` is `false` */
-		icon?: string | Snippet | Component;
-		leadingicon?: string | Snippet | Component;
-		trailingicon?: string | Snippet | Component;
+		icon?: string | Component;
+		leadingicon?: string | Component;
+		trailingicon?: string | Component;
 		/** Route Location the link should navigate to when clicked on. */
 		href?: string;
 		label?: string;
@@ -50,13 +48,15 @@
 		/** Set loading state automatically based on the `@click` promise state */
 		loadingauto?: boolean;
 		ui?: {
-			base?: ClassNameValue;
-			icon?: ClassNameValue;
-			leadingicon?: ClassNameValue;
-			trailingicon?: ClassNameValue;
+			base?: ClassValue;
+			icon?: ClassValue;
+			leadingicon?: ClassValue;
+			trailingicon?: ClassValue;
 		};
 		children?: Snippet;
 	};
+
+	export type ButtonProps = SvelteHTMLElements['button'] & ButtonBaseProps;
 </script>
 
 <script lang="ts">
@@ -66,7 +66,7 @@
 		size = 'md',
 		variant = 'solid',
 		color = 'primary',
-		iconposition = 'left',
+		iconposition = 'leading',
 		children,
 		// active,
 		// activecolor,
@@ -80,8 +80,7 @@
 		href,
 		icon,
 		loading,
-		loadingicon = 'i-lucide-loader-circle',
-		target,
+		loadingicon = app_icons.get().loading,
 		type,
 		trailingicon,
 		leadingicon,
@@ -95,7 +94,7 @@
 		return false;
 	});
 
-	const variants = $derived(
+	const classnames = $derived(
 		tv({
 			slots: {
 				icon: '',
@@ -112,7 +111,7 @@
 				},
 				variant: {
 					link: '',
-					solid: 'text-inverted',
+					solid: 'text-label-inverted',
 					outline: 'border',
 					soft: '',
 					subtle: 'border',
@@ -145,7 +144,7 @@
 				{
 					color: 'surface',
 					variant: 'solid',
-					class: 'bg-surface-inverted text-hightlighted hover:bg-toned',
+					class: 'bg-surface-inverted text-label-inverted hover:bg-label-toned',
 				},
 				{
 					color: 'info',
@@ -179,7 +178,7 @@
 					color: 'surface',
 					variant: 'outline',
 					class: {
-						base: 'border-surface-hightlighted text-surface-inverted hover:bg-surface/10',
+						base: 'border-surface-accented text-label hover:bg-surface-elevated',
 					},
 				},
 				{
@@ -219,7 +218,7 @@
 				{
 					color: 'surface',
 					variant: 'soft',
-					class: 'bg-surface/10 text-hightlighted hover:bg-surface/15',
+					class: 'bg-surface/10 text-label-highlighted hover:bg-surface/15',
 				},
 				{
 					color: 'info',
@@ -250,7 +249,7 @@
 				{
 					color: 'surface',
 					variant: 'subtle',
-					class: 'bg-surface/10 text-hightlighted border-surface/25 hover:bg-surface/15',
+					class: 'bg-surface/10 text-label-highlighted border-surface/25 hover:bg-surface/15',
 				},
 				{
 					color: 'info',
@@ -281,7 +280,7 @@
 				{
 					color: 'surface',
 					variant: 'ghost',
-					class: 'text-highlighted hover:bg-surface/15',
+					class: 'text-label-label-highlighted hover:bg-surface/15',
 				},
 				{
 					color: 'info',
@@ -312,7 +311,7 @@
 				{
 					color: 'surface',
 					variant: 'link',
-					class: 'text-muted hover:text-surface-inverted',
+					class: 'text-label-muted hover:text-surface-inverted',
 				},
 				{
 					color: 'info',
@@ -350,13 +349,10 @@
 
 		internal_loading = false;
 	}
-
-	$inspect(children, label, !!icon);
 </script>
 
 <svelte:element
 	this={href ? 'a' : 'button'}
-	data-button-root
 	type={href ? undefined : type}
 	href={href && !disabled ? href : undefined}
 	disabled={disabled || is_loading}
@@ -364,14 +360,17 @@
 	role={href && disabled ? 'link' : undefined}
 	tabindex={href && disabled ? -1 : 0}
 	bind:this={ref}
-	class={variants.base({
+	class={classnames.base({
 		class: [only_icon && 'px-0 aspect-square justify-center', href && 'cursor-pointer', ui.base],
 	})}
 	onclick={onClickWrapper}
 	{...rest}
 >
-	{#if iconposition === 'left' || leadingicon}
-		{@render Icon(is_loading ? loadingicon : leadingicon || icon, ui.leadingicon)}
+	{#if iconposition === 'leading' || leadingicon || loading}
+		<Icon
+			name={is_loading ? loadingicon : leadingicon || icon}
+			class={[ui.leadingicon, loading && 'animate-spin', iconposition === 'leading' && ui.icon]}
+		/>
 	{/if}
 
 	{#if label}
@@ -380,21 +379,10 @@
 		{@render children?.()}
 	{/if}
 
-	{#if iconposition !== 'left' || trailingicon}
-		{@render Icon(trailingicon || icon, ui.trailingicon)}
+	{#if iconposition === 'trailing' || trailingicon}
+		<Icon
+			name={trailingicon || icon}
+			class={[ui.trailingicon, iconposition === 'trailing' && ui.icon]}
+		/>
 	{/if}
 </svelte:element>
-
-{#snippet Icon(IconProp?: string | Snippet | Component, classvalue?: ClassNameValue)}
-	{#if typeof IconProp === 'string'}
-		<div
-			class={variants.icon({
-				class: [is_loading && 'animate-spin', IconProp, ui.icon, classvalue],
-			})}
-		></div>
-	{:else if isSnippet(IconProp)}
-		{@render IconProp()}
-	{:else if isComponent(IconProp)}
-		<IconProp />
-	{/if}
-{/snippet}

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

@@ -1,9 +1,8 @@
 import { type Component, type Snippet } from 'svelte';
 import { type PropColor, type PropVariant } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
 import type { SvelteHTMLElements } from 'svelte/elements';
-import { Button } from 'bits-ui';
-export type ButtonProps = SvelteHTMLElements['button'] & {
+import { type ClassValue } from 'tailwind-variants';
+export type ButtonBaseProps = {
     /** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
     ref?: HTMLButtonElement | HTMLAnchorElement;
     /** Where to display the linked URL, as the name for a browsing context. */
@@ -13,15 +12,15 @@ export type ButtonProps = SvelteHTMLElements['button'] & {
     /** The type of the button when not a link. */
     type?: 'submit' | 'reset' | 'button' | null | undefined;
     /** When true, the icon will be displayed on the right side. */
-    loadingicon?: string | Snippet | Component;
+    loadingicon?: string | Component;
     /** When true, the loading icon will be displayed. */
     loading?: boolean;
     /** The position of the icon, including the loading icon */
-    iconposition?: 'left' | 'right';
+    iconposition?: 'leading' | 'trailing';
     /** Icon when `loading` is `false` */
-    icon?: string | Snippet | Component;
-    leadingicon?: string | Snippet | Component;
-    trailingicon?: string | Snippet | Component;
+    icon?: string | Component;
+    leadingicon?: string | Component;
+    trailingicon?: string | Component;
     /** Route Location the link should navigate to when clicked on. */
     href?: string;
     label?: string;
@@ -42,13 +41,14 @@ export type ButtonProps = SvelteHTMLElements['button'] & {
     /** Set loading state automatically based on the `@click` promise state */
     loadingauto?: boolean;
     ui?: {
-        base?: ClassNameValue;
-        icon?: ClassNameValue;
-        leadingicon?: ClassNameValue;
-        trailingicon?: ClassNameValue;
+        base?: ClassValue;
+        icon?: ClassValue;
+        leadingicon?: ClassValue;
+        trailingicon?: ClassValue;
     };
     children?: Snippet;
 };
+export type ButtonProps = SvelteHTMLElements['button'] & ButtonBaseProps;
 declare const Button: Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/calendar.svelte

@@ -1,8 +1,7 @@
 <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 { type DateValue, today } from '../date.js';
 	import { Calendar, type CalendarRootProps } from 'bits-ui';
 
@@ -11,8 +10,8 @@
 		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		ui?: {
-			base?: ClassNameValue;
-			icon?: ClassNameValue;
+			base?: ClassValue;
+			icon?: ClassValue;
 		};
 	};
 </script>
@@ -30,7 +29,7 @@
 		children,
 	}: CalendarProps = $props();
 
-	const classes = $derived.by(() => {
+	const variants = $derived.by(() => {
 		return tv({
 			slots: { icon: '', base: '' },
 			variants: {
@@ -63,7 +62,7 @@
 	});
 </script>
 
-<Calendar.Root type={type as typeof type} bind:value>
+<Calendar.Root type={type as 'single'} bind:value={() => value as DateValue, (v) => (value = v)}>
 	{#snippet children({ months, weekdays })}
 		<Calendar.Header>
 			<Calendar.PrevButton />
@@ -71,7 +70,7 @@
 			<Calendar.NextButton />
 		</Calendar.Header>
 
-		{#each months as month}
+		{#each months as month (month)}
 			<Calendar.Grid>
 				<Calendar.GridHead>
 					<Calendar.GridRow>

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

@@ -1,14 +1,14 @@
 import type { Component } from 'svelte';
+import { type ClassValue } from 'tailwind-variants';
 import { type PropColor, type PropVariant } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
 import { Calendar, type CalendarRootProps } from 'bits-ui';
 export type CalendarProps = CalendarRootProps & {
     color?: PropColor;
     variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     ui?: {
-        base?: ClassNameValue;
-        icon?: ClassNameValue;
+        base?: ClassValue;
+        icon?: ClassValue;
     };
 };
 declare const Calendar: Component<CalendarProps, {}, "value">;