uisv 0.0.20 → 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

@@ -6,7 +6,6 @@
 	import { isSnippet } from '../index.js';
 	import { tv } from 'tailwind-variants';
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { Button } from 'bits-ui';
 
 	export type ButtonProps = SvelteHTMLElements['button'] & {
 		/** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
@@ -81,7 +80,6 @@
 		icon,
 		loading,
 		loadingicon = 'i-lucide-loader-circle',
-		target,
 		type,
 		trailingicon,
 		leadingicon,
@@ -145,7 +143,7 @@
 				{
 					color: 'surface',
 					variant: 'solid',
-					class: 'bg-surface-inverted text-hightlighted hover:bg-toned',
+					class: 'bg-surface-inverted text-inverted hover:bg-toned',
 				},
 				{
 					color: 'info',
@@ -179,7 +177,7 @@
 					color: 'surface',
 					variant: 'outline',
 					class: {
-						base: 'border-surface-hightlighted text-surface-inverted hover:bg-surface/10',
+						base: 'border-surface-accented text-surface-inverted hover:bg-surface/10',
 					},
 				},
 				{
@@ -350,8 +348,6 @@
 
 		internal_loading = false;
 	}
-
-	$inspect(children, label, !!icon);
 </script>
 
 <svelte:element

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

@@ -2,7 +2,6 @@ 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'] & {
     /** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
     ref?: HTMLButtonElement | HTMLAnchorElement;

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/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.20",
+	"version": "0.0.21",
 	"description": "ui library for the rest of us",
 	"license": "MIT",
 	"repository": "ui-sv/uisv",