uisv 0.0.19 → 0.0.21

package/dist/components/badge.svelte

@@ -71,7 +71,7 @@
 				{
 					color: 'surface',
 					variant: 'solid',
-					class: 'bg-surface-900',
+					class: 'bg-surface-inverted text-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-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-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-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 });

package/dist/components/banner.svelte

@@ -10,7 +10,6 @@
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
 	import { defu } from 'defu';
-	import { useId } from 'bits-ui';
 
 	export type BannerProps = {
 		title: string | Snippet;
@@ -44,18 +43,7 @@
 		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(() =>
 		tv({
 			slots: {
@@ -75,8 +63,8 @@
 				},
 				variant: {
 					solid: {
-						base: 'text-white',
-						description: 'text-white/90',
+						base: 'text-inverted',
+						description: 'text-inverted/90',
 					},
 					outline: 'border',
 					soft: '',
@@ -92,7 +80,7 @@
 				{
 					variant: 'solid',
 					color: 'surface',
-					class: 'bg-surface-900',
+					class: 'bg-surface-inverted',
 				},
 				{
 					variant: 'solid',
@@ -118,94 +106,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 }),
@@ -218,7 +206,7 @@
 	{target}
 	class={classes.base({ class: [ui.base] })}
 >
-	<div class="flex flex-grow gap-2 text-sm items-center">
+	<div class="flex grow gap-2 text-sm items-center">
 		{#if icon}
 			<div class="size-6">
 				{#if typeof icon === 'string'}
@@ -254,7 +242,17 @@
 
 	{#if close}
 		<div>
-			<Button {...close_props} onclick={onclose} />
+			<Button
+				{...defu<ButtonProps, [ButtonProps]>(typeof close === 'boolean' ? {} : close, {
+					icon: 'i-lucide-x',
+					variant: 'ghost',
+					color: 'surface',
+					ui: {
+						icon: variant === 'solid' ? 'text-inverted' : '',
+					},
+				})}
+				onclick={onclose}
+			/>
 		</div>
 	{/if}
 </svelte:element>

package/dist/components/button.svelte

@@ -5,8 +5,9 @@
 	// 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';
 
-	export type ButtonProps = {
+	export type ButtonProps = SvelteHTMLElements['button'] & {
 		/** 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. */
@@ -47,7 +48,6 @@
 		block?: boolean;
 		/** Set loading state automatically based on the `@click` promise state */
 		loadingauto?: boolean;
-		onclick?: (event: MouseEvent) => void | Promise<void>;
 		ui?: {
 			base?: ClassNameValue;
 			icon?: ClassNameValue;
@@ -73,17 +73,17 @@
 		block,
 		label,
 		loadingauto,
-		onclick,
+		onclick = () => {},
 		ui = {},
 		disabled,
 		href,
 		icon,
 		loading,
 		loadingicon = 'i-lucide-loader-circle',
-		target,
 		type,
 		trailingicon,
 		leadingicon,
+		...rest
 	}: ButtonProps = $props();
 
 	let internal_loading = $state(false);
@@ -170,148 +170,136 @@
 					color: 'primary',
 					variant: 'outline',
 					class: {
-						base: [
-							'border-primary/50 text-primary-500 hover:bg-primary-50',
-							'dark:hover:bg-primary-950',
-						],
+						base: 'border-primary/50 text-primary-500 hover:bg-primary/10',
 					},
 				},
 				{
 					color: 'surface',
 					variant: 'outline',
 					class: {
-						base: [
-							'border-surface-accented text-surface-inverted hover:bg-surface/10',
-							'dark:hover:bg-surface-800',
-						],
+						base: 'border-surface-accented text-surface-inverted hover:bg-surface/10',
 					},
 				},
 				{
 					color: 'info',
 					variant: 'outline',
 					class: {
-						base: ['border-info/50 text-info-500 hover:bg-info/10', 'dark:hover:bg-info-950'],
+						base: 'border-info/50 text-info-500 hover:bg-info/10',
 					},
 				},
 				{
 					color: 'success',
 					variant: 'outline',
 					class: {
-						base: [
-							'border-success/50 text-success-500 hover:bg-success/10',
-							'dark:hover:bg-success-950',
-						],
+						base: 'border-success/50 text-success-500 hover:bg-success/10',
 					},
 				},
 				{
 					color: 'error',
 					variant: 'outline',
 					class: {
-						base: ['border-error/50 text-error-500 hover:bg-error/10', 'dark:hover:bg-error-950'],
+						base: 'border-error/50 text-error-500 hover:bg-error/10',
 					},
 				},
 				{
 					color: 'warning',
 					variant: 'outline',
 					class: {
-						base: [
-							'border-warning/50 text-warning-500 hover:bg-warning/10',
-							'dark:hover:bg-warning-950',
-						],
+						base: 'border-warning/50 text-warning-500 hover:bg-warning/10',
 					},
 				},
 
 				{
 					color: 'primary',
 					variant: 'soft',
-					class: 'bg-primary-50 text-primary-500 hover:bg-primary-100',
+					class: 'bg-primary/10 text-primary-500 hover:bg-primary/15',
 				},
 				{
 					color: 'surface',
 					variant: 'soft',
-					class: 'bg-surface-100 text-surface-800 hover:bg-surface-200',
+					class: 'bg-surface/10 text-hightlighted hover:bg-surface/15',
 				},
 				{
 					color: 'info',
 					variant: 'soft',
-					class: 'bg-info-100 text-info-500 hover:bg-info-50',
+					class: 'bg-info/10 text-info-500 hover:bg-info/15',
 				},
 				{
 					color: 'success',
 					variant: 'soft',
-					class: 'bg-success-100 text-success-500 hover:bg-success-50',
+					class: 'bg-success/10 text-success-500 hover:bg-success/15',
 				},
 				{
 					color: 'error',
 					variant: 'soft',
-					class: 'bg-error-100 text-error-500 hover:bg-error-50',
+					class: 'bg-error/10 text-error-500 hover:bg-error/15',
 				},
 				{
 					color: 'warning',
 					variant: 'soft',
-					class: 'bg-warning-100 text-warning-500 hover:bg-warning-50',
+					class: 'bg-warning/10 text-warning-500 hover:bg-warning/15',
 				},
 
 				{
 					color: 'primary',
 					variant: 'subtle',
-					class: 'bg-primary-50 text-primary-500 border-primary-200 hover:bg-primary-100',
+					class: 'bg-primary/10 text-primary-500 border-primary/25 hover:bg-primary/15',
 				},
 				{
 					color: 'surface',
 					variant: 'subtle',
-					class: 'bg-surface-50 text-surface-800 border-surface-300 hover:bg-surface-100',
+					class: 'bg-surface/10 text-hightlighted border-surface/25 hover:bg-surface/15',
 				},
 				{
 					color: 'info',
 					variant: 'subtle',
-					class: 'bg-info-50 text-info-600 border-info-200 hover:bg-info-100',
+					class: 'bg-info/10 text-info-600 border-info/25 hover:bg-info/15',
 				},
 				{
 					color: 'success',
 					variant: 'subtle',
-					class: 'bg-success-100 text-success-600 border-success-300 hover:bg-success-100',
+					class: 'bg-success/10 text-success-600 border-success/25 hover:bg-success/15',
 				},
 				{
 					color: 'error',
 					variant: 'subtle',
-					class: 'bg-error-50 text-error-600 border-error-200 hover:bg-error-100',
+					class: 'bg-error/10 text-error-600 border-error/25 hover:bg-error/15',
 				},
 				{
 					color: 'warning',
 					variant: 'subtle',
-					class: 'bg-warning-50 text-warning-600 border-warning-300 hover:bg-warning-100',
+					class: 'bg-warning/10 text-warning-600 border-warning/25 hover:bg-warning/15',
 				},
 
 				{
 					color: 'primary',
 					variant: 'ghost',
-					class: 'text-primary-500 hover:bg-primary-100',
+					class: 'text-primary-500 hover:bg-primary/15',
 				},
 				{
 					color: 'surface',
 					variant: 'ghost',
-					class: 'text-surface-inverted hover:bg-surface-elevated',
+					class: 'text-highlighted hover:bg-surface/15',
 				},
 				{
 					color: 'info',
 					variant: 'ghost',
-					class: 'text-info-600 hover:bg-info-100',
+					class: 'text-info-600 hover:bg-info/15',
 				},
 				{
 					color: 'success',
 					variant: 'ghost',
-					class: 'text-success-600 hover:bg-success-100',
+					class: 'text-success-600 hover:bg-success/15',
 				},
 				{
 					color: 'error',
 					variant: 'ghost',
-					class: 'text-error-600 hover:bg-error-100',
+					class: 'text-error-600 hover:bg-error/15',
 				},
 				{
 					color: 'warning',
 					variant: 'ghost',
-					class: 'text-warning-600 hover:bg-warning-100',
+					class: 'text-warning-600 hover:bg-warning/15',
 				},
 
 				{
@@ -350,41 +338,34 @@
 
 	const only_icon = $derived(!(children || label) && !!icon);
 
-	async function onClickWrapper(event: MouseEvent) {
+	async function onClickWrapper(
+		e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement },
+	) {
 		if (!onclick) return;
 		internal_loading = true;
 
-		await onclick(event);
+		await onclick(e);
 
 		internal_loading = false;
 	}
 </script>
 
-{#if href}
-	<a
-		{href}
-		{target}
-		class={variants.base({
-			class: [only_icon ? 'px-0 aspect-square justify-center' : '', 'cursor-pointer', ui.base],
-		})}
-		onclick={onClickWrapper}
-	>
-		{@render Content()}
-	</a>
-{:else}
-	<button
-		{type}
-		disabled={disabled || is_loading}
-		class={variants.base({
-			class: [only_icon ? 'px-0 aspect-square justify-center' : '', ui.base],
-		})}
-		onclick={onClickWrapper}
-	>
-		{@render Content()}
-	</button>
-{/if}
-
-{#snippet Content()}
+<svelte:element
+	this={href ? 'a' : 'button'}
+	data-button-root
+	type={href ? undefined : type}
+	href={href && !disabled ? href : undefined}
+	disabled={disabled || is_loading}
+	aria-disabled={href ? disabled : undefined}
+	role={href && disabled ? 'link' : undefined}
+	tabindex={href && disabled ? -1 : 0}
+	bind:this={ref}
+	class={variants.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}
@@ -398,7 +379,7 @@
 	{#if iconposition !== 'left' || trailingicon}
 		{@render Icon(trailingicon || icon, ui.trailingicon)}
 	{/if}
-{/snippet}
+</svelte:element>
 
 {#snippet Icon(IconProp?: string | Snippet | Component, classvalue?: ClassNameValue)}
 	{#if typeof IconProp === 'string'}

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

@@ -1,7 +1,8 @@
 import { type Component, type Snippet } from 'svelte';
 import { type PropColor, type PropVariant } from '../index.js';
 import type { ClassNameValue } from 'tailwind-merge';
-export type ButtonProps = {
+import type { SvelteHTMLElements } from 'svelte/elements';
+export type ButtonProps = SvelteHTMLElements['button'] & {
     /** 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. */
@@ -39,7 +40,6 @@ export type ButtonProps = {
     block?: boolean;
     /** Set loading state automatically based on the `@click` promise state */
     loadingauto?: boolean;
-    onclick?: (event: MouseEvent) => void | Promise<void>;
     ui?: {
         base?: ClassNameValue;
         icon?: ClassNameValue;

package/dist/components/card.svelte

@@ -32,18 +32,18 @@
 			variants: {
 				variant: {
 					solid: {
-						base: 'bg-surface-900 text-surface-50',
+						base: 'bg-surface-inverted text-inverted',
 						header: 'border-transparent',
 						footer: 'border-transparent',
 					},
 					outline: {
-						base: 'border border-surface-300 divide-y divide-surface-300',
+						base: 'border border-surface-accented divide-y divide-surface-accented',
 					},
 					soft: {
-						base: 'bg-surface-50 divide-y divide-surface-300',
+						base: 'bg-surface/10 divide-y divide-surface-accented',
 					},
 					subtle: {
-						base: 'bg-surface-50 border-surface-300 border divide-y divide-surface-300',
+						base: 'bg-surface/10 border-surface-accented border divide-y divide-surface-accented',
 					},
 				},
 			},

package/dist/components/chip.svelte

@@ -24,7 +24,7 @@
 		color = 'primary',
 		position = 'top-right',
 		size = 8,
-		ui = {}
+		ui = {},
 	}: ChipProps = $props();
 
 	const classes = $derived.by(() =>
@@ -32,39 +32,39 @@
 			slots: {
 				base: 'relative inline-flex items-center justify-center shrink-0',
 				chip: [
-					'absolute rounded-full ring ring-white flex items-center justify-center text-white font-medium whitespace-nowrap',
-					'-translate-y-1/2 translate-x-1/2 px-0.5'
-				]
+					'absolute rounded-full ring ring-inverted flex items-center justify-center text-inverted font-medium whitespace-nowrap',
+					'-translate-y-1/2 translate-x-1/2 px-0.5',
+				],
 			},
 			variants: {
 				color: {
 					primary: {
-						chip: 'bg-primary'
+						chip: 'bg-primary',
 					},
 					surface: {
-						chip: 'bg-surface'
+						chip: 'bg-surface',
 					},
 					success: {
-						chip: 'bg-success'
+						chip: 'bg-success',
 					},
 					info: {
-						chip: 'bg-info'
+						chip: 'bg-info',
 					},
 					warning: {
-						chip: 'bg-warning'
+						chip: 'bg-warning',
 					},
 					error: {
-						chip: 'bg-error'
-					}
+						chip: 'bg-error',
+					},
 				},
 				position: {
 					'top-right': { chip: 'top-0 right-0' },
 					'bottom-right': { chip: 'bottom-0 right-0' },
 					'top-left': { chip: 'top-0 left-0' },
-					'bottom-left': { chip: 'bottom-0 left-0' }
-				}
-			}
-		})({ color, position })
+					'bottom-left': { chip: 'bottom-0 left-0' },
+				},
+			},
+		})({ color, position }),
 	);
 </script>
 

package/dist/components/icon.svelte

@@ -46,8 +46,6 @@
 		},
 	);
 
-	$inspect(isComponent(name), name);
-
 	useStyle(() => css_style);
 </script>
 

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components/index.js';
 export * from './utilities.svelte.js';
 export * from './types.js';
+export { ModeWatcher } from 'mode-watcher';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './components/index.js';
 export * from './utilities.svelte.js';
 export * from './types.js';
+export { ModeWatcher } from 'mode-watcher';

package/dist/mode.d.ts

@@ -0,0 +1 @@
+export * from 'mode-watcher';

package/dist/mode.js

@@ -0,0 +1 @@
+export * from 'mode-watcher';

package/dist/vite.d.ts

@@ -48,4 +48,5 @@ export type PluginOptions = {
      */
     icons?: Parameters<typeof presetIcons>[0];
 };
-export declare function uisv(options: PluginOptions): import("vite").Plugin<any>[][];
+declare const _default: (options?: PluginOptions) => import("vite").Plugin<any>[][];
+export default _default;

package/dist/vite.js

@@ -3,7 +3,7 @@ import { transformerVariantGroup, transformerCompileClass, transformerDirectives
 import {} from '@unocss/preset-web-fonts';
 import { defu } from 'defu';
 import { getColors } from 'theme-colors';
-export function uisv(options) {
+export default (options = {}) => {
     const _opts = defu(options, {
         colors: {
             primary: {
@@ -139,4 +139,4 @@ export function uisv(options) {
             },
         }),
     ];
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "uisv",
-	"version": "0.0.19",
+	"version": "0.0.21",
 	"description": "ui library for the rest of us",
 	"license": "MIT",
 	"repository": "ui-sv/uisv",
@@ -44,6 +44,11 @@
 			"types": "./dist/date.d.ts",
 			"svelte": "./dist/date.js",
 			"default": "./dist/date.js"
+		},
+		"./mode": {
+			"types": "./dist/mode.d.ts",
+			"svelte": "./dist/mode.js",
+			"default": "./dist/mode.js"
 		}
 	},
 	"peerDependencies": {
@@ -78,7 +83,7 @@
 	"dependencies": {
 		"@internationalized/date": "^3.11.0",
 		"@unocss/preset-web-fonts": "^66.6.0",
-		"bits-ui": "^2.16.2",
+		"bits-ui": "^2.16.5",
 		"colortranslator": "^5.0.0",
 		"defu": "^6.1.4",
 		"maska": "^3.2.0",