uisv 0.0.21 → 0.0.23

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

@@ -1,10 +1,11 @@
 import type { PropColor, PropVariant } from '../index.js';
 import { Select } from 'bits-ui';
 import type { Component, Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type SelectItem<T> = T | {
     icon?: string | Component;
-    label: string | Component;
+    iconposition?: 'leading' | 'trailing';
+    label: string | Component | Snippet;
     value: T;
 };
 export type SelectProps<T> = {
@@ -19,34 +20,26 @@ export type SelectProps<T> = {
     highlight?: boolean;
     placeholder?: string;
     ui?: {
-        base?: ClassNameValue;
-        leading?: ClassNameValue;
-        leadingIcon?: ClassNameValue;
-        leadingAvatar?: ClassNameValue;
-        leadingAvatarSize?: ClassNameValue;
-        trailing?: ClassNameValue;
-        trailingIcon?: ClassNameValue;
-        value?: ClassNameValue;
-        placeholder?: ClassNameValue;
-        arrow?: ClassNameValue;
-        content?: ClassNameValue;
-        viewport?: ClassNameValue;
-        group?: ClassNameValue;
-        empty?: ClassNameValue;
-        label?: ClassNameValue;
-        separator?: ClassNameValue;
-        item?: ClassNameValue;
-        itemLeadingIcon?: ClassNameValue;
-        itemLeadingAvatar?: ClassNameValue;
-        itemLeadingAvatarSize?: ClassNameValue;
-        itemLeadingChip?: ClassNameValue;
-        itemLeadingChipSize?: ClassNameValue;
-        itemTrailing?: ClassNameValue;
-        itemTrailingIcon?: ClassNameValue;
-        itemWrapper?: ClassNameValue;
-        itemLabel?: ClassNameValue;
-        itemDescription?: ClassNameValue;
+        base?: ClassValue;
+        leading?: ClassValue;
+        icon?: ClassValue;
+        leadingAvatar?: ClassValue;
+        leadingAvatarSize?: ClassValue;
+        trailing?: ClassValue;
+        value?: ClassValue;
+        placeholder?: ClassValue;
+        arrow?: ClassValue;
+        content?: ClassValue;
+        viewport?: ClassValue;
+        group?: ClassValue;
+        empty?: ClassValue;
+        label?: ClassValue;
+        separator?: ClassValue;
+        item?: ClassValue;
+        itemicon?: ClassValue;
+        dropdownicon?: ClassValue;
     };
+    dropdownicon?: string | Component;
 } & ({
     value?: T;
     type?: 'single';

package/dist/components/seperator.svelte

@@ -1,12 +1,11 @@
 <script module lang="ts">
 	import { Icon, type PropColor, isComponent, isSnippet } from '../index.js';
 	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import type { Component } from 'svelte';
 
 	export type SeperatorProps = {
-		label?: string | Snippet<[ClassNameValue]> | Component;
+		label?: string | Snippet<[ClassValue]> | Component;
 		icon?: string | Component;
 		color?: PropColor;
 		type?: 'dashed' | 'solid' | 'dotted';
@@ -14,10 +13,10 @@
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		orientation?: 'horizontal' | 'vertical';
 		ui?: {
-			root?: ClassNameValue;
-			border?: ClassNameValue;
-			icon?: ClassNameValue;
-			label?: ClassNameValue;
+			root?: ClassValue;
+			border?: ClassValue;
+			icon?: ClassValue;
+			label?: ClassValue;
 		};
 	};
 </script>
@@ -199,7 +198,7 @@
 		{:else if typeof label === 'string' && label.length > 0}
 			<span class={variants.label({ class: ui.label })}>{label}</span>
 		{:else if isSnippet(label)}
-			{@render label()}
+			{@render label(variants.label({ class: ui.label }))}
 		{:else if isComponent(label)}
 			{@const Label = label}
 			<Label class={variants.label({ class: ui.label })} />

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

@@ -1,9 +1,9 @@
 import { type PropColor } from '../index.js';
 import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 import type { Component } from 'svelte';
 export type SeperatorProps = {
-    label?: string | Snippet<[ClassNameValue]> | Component;
+    label?: string | Snippet<[ClassValue]> | Component;
     icon?: string | Component;
     color?: PropColor;
     type?: 'dashed' | 'solid' | 'dotted';
@@ -11,10 +11,10 @@ export type SeperatorProps = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     orientation?: 'horizontal' | 'vertical';
     ui?: {
-        root?: ClassNameValue;
-        border?: ClassNameValue;
-        icon?: ClassNameValue;
-        label?: ClassNameValue;
+        root?: ClassValue;
+        border?: ClassValue;
+        icon?: ClassValue;
+        label?: ClassValue;
     };
 };
 declare const Seperator: Component<SeperatorProps, {}, "">;

package/dist/components/slider.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import { Slider } from 'bits-ui';
 	import type { PropColor } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type SliderProps<T> = {
 		value?: T;
@@ -16,9 +15,9 @@
 		min?: number;
 		max?: number;
 		ui?: {
-			root?: ClassNameValue;
-			range?: ClassNameValue;
-			thumb?: ClassNameValue;
+			root?: ClassValue;
+			range?: ClassValue;
+			thumb?: ClassValue;
 		};
 	};
 </script>
@@ -54,15 +53,15 @@
 		},
 	});
 	const thumbs = $derived(slider_value.get()?.length ?? 1);
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: [
-					'relative w-full flex rounded-full bg-neutral-300',
+					'relative w-full flex rounded-full bg-label-dimmed',
 					orientation === 'horizontal' ? 'items-center' : 'justify-center mx-1',
 				],
 				range: [
-					'rounded-full bg-neutral-200 p-0.5 relative transition',
+					'rounded-full bg-surface-accented p-0.5 relative transition',
 					orientation === 'horizontal' ? 'h-full' : 'w-full',
 				],
 				thumb: 'bg-white rounded-full border-2 outline-none transition',
@@ -76,8 +75,8 @@
 						thumb: 'border-primary-500',
 					},
 					surface: {
-						range: ['bg-neutral-900'],
-						thumb: 'border-neutral-900',
+						range: ['bg-surface-inverted'],
+						thumb: 'border-surface-inverted',
 					},
 					info: {
 						range: ['bg-info-500'],
@@ -149,18 +148,18 @@
 	{step}
 	{orientation}
 	{disabled}
-	class={classes.root({ class: [disabled ? 'opacity-75 cursor-not-allowed' : '', ui.root] })}
+	class={variants.root({ class: [disabled ? 'opacity-75 cursor-not-allowed' : '', ui.root] })}
 >
-	<Slider.Range class={classes.range({ class: [ui.range] })} />
+	<Slider.Range class={variants.range({ class: [ui.range] })} />
 
 	{#each { length: thumbs }, index (index)}
-		<Slider.Thumb {index} class={classes.thumb({ class: ['group', ui.thumb] })}>
+		<Slider.Thumb {index} class={variants.thumb({ class: ['group', ui.thumb] })}>
 			{#if thumblabel}
 				<Slider.ThumbLabel
 					{index}
 					position="bottom"
 					class={[
-						'opacity-0 transition pointer-events-none text-sm shadow-md px-2 h-6 flex items-center rounded-md mt-1 border border-surface-200',
+						'opacity-0 transition pointer-events-none text-sm shadow-md px-2 h-6 flex items-center rounded-md mt-1 border border-surface-accented',
 						'data-[active=""]:opacity-100 group-hover:opacity-100',
 					]}
 				>

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

@@ -1,6 +1,6 @@
 import { Slider } from 'bits-ui';
 import type { PropColor } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type SliderProps<T> = {
     value?: T;
     default?: number | number[];
@@ -13,9 +13,9 @@ export type SliderProps<T> = {
     min?: number;
     max?: number;
     ui?: {
-        root?: ClassNameValue;
-        range?: ClassNameValue;
-        thumb?: ClassNameValue;
+        root?: ClassValue;
+        range?: ClassValue;
+        thumb?: ClassValue;
     };
 };
 declare function $$render<T extends number | number[]>(): {

package/dist/components/switch.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
+	import { getAppContext } from '../contexts.js';
 	import { type PropColor, Icon } from '../index.js';
 	import type { Snippet, Component } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type SwitchProps = {
 		value?: boolean;
@@ -17,11 +17,11 @@
 		description?: string | Snippet;
 		required?: boolean;
 		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			thumb?: ClassNameValue;
-			label?: ClassNameValue;
-			description?: ClassNameValue;
+			root?: ClassValue;
+			container?: ClassValue;
+			thumb?: ClassValue;
+			label?: ClassValue;
+			description?: ClassValue;
 		};
 	};
 </script>
@@ -33,7 +33,7 @@
 		size = 'md',
 		disabled,
 		loading,
-		loadingicon = 'i-lucide-loader-circle',
+		loadingicon = getAppContext().icons.loading,
 		uncheckedicon,
 		checkedicon,
 		label,
@@ -42,18 +42,18 @@
 		ui = {},
 	}: SwitchProps = $props();
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: 'flex-inline gap-2',
-				container: 'rounded-full bg-neutral-200 p-0.5 relative transition',
+				container: 'rounded-full bg-surface-accented p-0.5 relative transition',
 				thumb: [
 					'bg-white block rounded-full absolute top-0.5 transition grid place-items-center',
-					value ? 'translate-x-full' : 'text-neutral-500',
+					value ? 'translate-x-full' : 'text-label-muted',
 				],
 				icon: 'pi',
 				label: 'text-sm',
-				description: 'text-sm text-neutral-500',
+				description: 'text-sm text-label-muted',
 			},
 			variants: {
 				color: {
@@ -61,7 +61,7 @@
 						container: ['', value && 'bg-primary-500 text-primary-500'],
 					},
 					surface: {
-						container: ['', value && 'bg-neutral-900 text-neutral-900'],
+						container: ['', value && 'bg-surface-inverted text-surface-inverted'],
 					},
 					info: {
 						container: ['', value && 'bg-info-500 text-info-500'],
@@ -111,23 +111,23 @@
 
 <div
 	data-state={value ? 'checked' : 'unchecked'}
-	class={classes.root({
+	class={variants.root({
 		class: [(loading || disabled) && 'opacity-50', ui.thumb],
 	})}
 >
 	<button
 		aria-label="switch"
 		data-state={value ? 'checked' : 'unchecked'}
-		class={classes.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
+		class={variants.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
 		onclick={() => {
 			if (loading || disabled) return;
 			value = !value;
 		}}
 	>
-		<span data-state={value ? 'checked' : 'unchecked'} class={classes.thumb({ class: ui.thumb })}>
+		<span data-state={value ? 'checked' : 'unchecked'} class={variants.thumb({ class: ui.thumb })}>
 			<Icon
 				name={loading ? loadingicon : value ? checkedicon : uncheckedicon}
-				class={classes.icon({ class: [loading && 'animate-spin'] })}
+				class={variants.icon({ class: [loading && 'animate-spin'] })}
 			/>
 		</span>
 	</button>
@@ -135,7 +135,7 @@
 	{#if label}
 		<span>
 			<div
-				class={classes.label({
+				class={variants.label({
 					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.thumb],
 				})}
 			>
@@ -147,7 +147,7 @@
 			</div>
 
 			{#if description}
-				<div class={classes.description({ class: ui.thumb })}>
+				<div class={variants.description({ class: ui.thumb })}>
 					{#if typeof description === 'string'}
 						{description}
 					{:else}
@@ -158,7 +158,3 @@
 		</span>
 	{/if}
 </div>
-
-{#snippet icon(ico?: SwitchProps['checkedicon'], icon_class?: ClassNameValue)}
-	<div class={['absolute', icon_class]}></div>
-{/snippet}

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

@@ -1,6 +1,6 @@
 import { type PropColor } from '../index.js';
 import type { Snippet, Component } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type SwitchProps = {
     value?: boolean;
     color?: PropColor;
@@ -14,11 +14,11 @@ export type SwitchProps = {
     description?: string | Snippet;
     required?: boolean;
     ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        thumb?: ClassNameValue;
-        label?: ClassNameValue;
-        description?: ClassNameValue;
+        root?: ClassValue;
+        container?: ClassValue;
+        thumb?: ClassValue;
+        label?: ClassValue;
+        description?: ClassValue;
     };
 };
 declare const Switch: Component<SwitchProps, {}, "value">;

package/dist/components/tabs.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import { Tabs } from 'bits-ui';
 	import { isComponent, isSnippet, useElementRects, type PropColor } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import { type Component, type Snippet } from 'svelte';
 	import { ElementRect } from 'runed';
 
@@ -24,12 +23,12 @@
 		disabled?: boolean;
 		orientation?: 'vertical' | 'horizontal';
 		ui?: {
-			root?: ClassNameValue;
-			item?: ClassNameValue;
-			list?: ClassNameValue;
-			content?: ClassNameValue;
-			icon?: ClassNameValue;
-			indicator?: ClassNameValue;
+			root?: ClassValue;
+			item?: ClassValue;
+			list?: ClassValue;
+			content?: ClassValue;
+			icon?: ClassValue;
+			indicator?: ClassValue;
 		};
 		[k: `content_${string}`]: Snippet<[{ item: TabItem; value: number }]>;
 	};
@@ -65,12 +64,12 @@
 		return result;
 	});
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: '',
 				list: 'flex relative p-1',
-				item: 'flex items-center justify-center text-muted data-[state="inactive"]:hover:text-highlighted font-medium z-1 transition-all',
+				item: 'flex items-center justify-center text-label-muted data-[state="inactive"]:hover:text-label-highlighted font-medium z-1 transition-all',
 				icon: '',
 				content: 'mt-2',
 				indicator: 'absolute z-0 transition-all duration-200 rounded-md w---width',
@@ -79,7 +78,7 @@
 				variant: {
 					pill: {
 						list: 'bg-surface-elevated rounded-lg',
-						item: 'flex-1 data-[state="active"]:text-inverted',
+						item: 'flex-1 data-[state="active"]:text-label-inverted',
 						trigger: 'flex-1',
 						indicator: 'rounded-md shadow-xs',
 					},
@@ -96,8 +95,8 @@
 						indicator: 'bg-primary-500',
 					},
 					surface: {
-						item: 'data-[variant="link"]:data-[state="active"]:text-surface-500',
-						indicator: 'bg-surface-900',
+						item: 'data-[variant="link"]:data-[state="active"]:text-label-muted',
+						indicator: 'bg-surface-inverted',
 					},
 					info: {
 						item: 'data-[variant="link"]:data-[state="active"]:text-info-500',
@@ -183,10 +182,10 @@
 <Tabs.Root
 	{disabled}
 	bind:value={() => value.toString(), (v) => (value = parseInt(v))}
-	class={classes.root({ class: ui.root })}
+	class={variants.root({ class: ui.root })}
 	{orientation}
 >
-	<Tabs.List bind:ref={container_el} class={classes.list({ class: ui.list })}>
+	<Tabs.List bind:ref={container_el} class={variants.list({ class: ui.list })}>
 		{#each items as item, idx (idx)}
 			{@const label = typeof item === 'string' ? item : item.label}
 
@@ -201,7 +200,7 @@
 					}
 				}
 				value={idx.toString()}
-				class={classes.item({ class: ui.item })}
+				class={variants.item({ class: ui.item })}
 				data-variant={variant}
 			>
 				{@render RenderIcon(typeof item === 'string' ? undefined : item.icon)}
@@ -211,7 +210,7 @@
 		{/each}
 
 		<span
-			class={classes.indicator({ class: ui.indicator })}
+			class={variants.indicator({ class: ui.indicator })}
 			style:--width="{rect.w}px"
 			style:--left="{rect.l}px"
 			style:--height="{rect.w}px"
@@ -221,7 +220,7 @@
 	{#each items as item, idx (idx)}
 		{#if typeof item === 'object' && item.content}
 			{@const Content = item.content}
-			<Tabs.Content value={idx.toString()} class={classes.content({ class: ui.content })}>
+			<Tabs.Content value={idx.toString()} class={variants.content({ class: ui.content })}>
 				{#if `content_${idx}` in rest}
 					{@render rest[`content_${idx}`]({ item, value: idx })}
 				{:else if typeof Content === 'string'}
@@ -238,8 +237,8 @@
 	{#if isSnippet(IconProp)}
 		{@render IconProp()}
 	{:else if isComponent(IconProp)}
-		<IconProp class={classes.icon({ class: ui.icon })} />
+		<IconProp class={variants.icon({ class: ui.icon })} />
 	{:else if typeof IconProp === 'string'}
-		<div class={classes.icon({ class: [IconProp, ui.icon] })}></div>
+		<div class={variants.icon({ class: [IconProp, ui.icon] })}></div>
 	{/if}
 {/snippet}

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

@@ -1,6 +1,6 @@
 import { Tabs } from 'bits-ui';
 import { type PropColor } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 import { type Component, type Snippet } from 'svelte';
 export type TabItem = string | {
     label: string;
@@ -17,12 +17,12 @@ export type TabsProps = {
     disabled?: boolean;
     orientation?: 'vertical' | 'horizontal';
     ui?: {
-        root?: ClassNameValue;
-        item?: ClassNameValue;
-        list?: ClassNameValue;
-        content?: ClassNameValue;
-        icon?: ClassNameValue;
-        indicator?: ClassNameValue;
+        root?: ClassValue;
+        item?: ClassValue;
+        list?: ClassValue;
+        content?: ClassValue;
+        icon?: ClassValue;
+        indicator?: ClassValue;
     };
     [k: `content_${string}`]: Snippet<[{
         item: TabItem;