uisv 0.0.15 → 0.0.17

package/dist/components/button.svelte

@@ -291,7 +291,7 @@
 				{
 					color: 'surface',
 					variant: 'ghost',
-					class: 'text-surface-inverted hover-surface-elevated text-surface-inverted)',
+					class: 'text-surface-inverted hover:bg-surface-elevated',
 				},
 				{
 					color: 'info',

package/dist/components/checkbox-group.svelte

@@ -106,7 +106,7 @@
 					horizontal: {
 						container: 'flex-row',
 						checkbox:
-							'[&:not(:last-child)]:(-me-px ms-0) first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
+							'[&:not(:last-child)]:-me-px [&:not(:last-child)]:ms-0 first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
 					},
 					vertical: {
 						container: 'flex-col -space-y-px',

package/dist/components/h2.svelte

@@ -9,9 +9,9 @@
 	class={cn(
 		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
 		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'[&>a]:(focus-visible:outline-primary)',
-		'[&>a>code]:(transition-colors border-dashed font-bold text-xl/7)',
-		'hover:[&>a>code]:(border-primary text-primary)',
+		'[&>a]:focus-visible:outline-primary',
+		'[&>a>code]:transition-colors [&>a>code]:border-dashed [&>a>code]:font-bold [&>a>code]:text-xl/7',
+		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
 		classes,
 	)}
 >

package/dist/components/h4.svelte

@@ -9,8 +9,8 @@
 	class={cn(
 		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
 		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'hover:[&>a>code]:(border-primary text-primary)',
-		'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
+		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+		'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
 		'[&>a]:focus-visible:outline-primary',
 		classes,
 	)}

package/dist/components/h5.svelte

@@ -9,8 +9,8 @@
 	class={cn(
 		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
 		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'hover:[&>a>code]:(border-primary text-primary)',
-		'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
+		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+		'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
 		'[&>a]:focus-visible:outline-primary',
 		classes,
 	)}

package/dist/components/h6.svelte

@@ -9,8 +9,8 @@
 	class={cn(
 		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
 		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'hover:[&>a>code]:(border-primary text-primary)',
-		'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
+		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+		'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
 		'[&>a]:focus-visible:outline-primary',
 		classes,
 	)}

package/dist/components/icon.svelte

@@ -5,7 +5,7 @@
 	import { useDebounce, watch } from 'runed';
 
 	export type IconProps = SvelteHTMLElements['base'] & {
-		name: string | Component;
+		name?: string | Component;
 	};
 </script>
 
@@ -54,5 +54,5 @@
 	<div {...rest as SvelteHTMLElements['div']} class={[name, classname]}></div>
 {:else if isComponent(name)}
 	{@const Icon = name}
-	<Icon {...rest} />
+	<Icon {...rest} class={classname} />
 {/if}

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

@@ -1,7 +1,7 @@
 import type { SvelteHTMLElements } from 'svelte/elements';
 import type { Component } from 'svelte';
 export type IconProps = SvelteHTMLElements['base'] & {
-    name: string | Component;
+    name?: string | Component;
 };
 declare const Icon: Component<IconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;

package/dist/components/index.d.ts

@@ -1,8 +1,8 @@
 export * from './button.svelte';
 export { default as Button } from './button.svelte';
-export * from './badge.svelte';
+export * from './input.svelte';
 export { default as Input } from './input.svelte';
-export * from './badge.svelte';
+export * from './input-time.svelte';
 export { default as InputTime } from './input-time.svelte';
 export * from './badge.svelte';
 export { default as Badge } from './badge.svelte';

package/dist/components/index.js

@@ -1,8 +1,8 @@
 export * from './button.svelte';
 export { default as Button } from './button.svelte';
-export * from './badge.svelte';
+export * from './input.svelte';
 export { default as Input } from './input.svelte';
-export * from './badge.svelte';
+export * from './input-time.svelte';
 export { default as InputTime } from './input-time.svelte';
 export * from './badge.svelte';
 export { default as Badge } from './badge.svelte';

package/dist/components/input-time.svelte

@@ -79,7 +79,7 @@
 				icon: '',
 				segment: [
 					'rounded text-center outline-hidden transition-all focus:bg-surface-accented shrink',
-					'aria-[valuetext="Empty"]:text-dimmed data-[segment="literal"]:(text-muted px-1) data-invalid:text-error data-disabled:(cursor-not-allowed opacity-75)',
+					'aria-[valuetext="Empty"]:text-dimmed data-[segment="literal"]:text-muted data-[segment="literal"]:px-1 data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75',
 				],
 			},
 			variants: {

package/dist/components/input.svelte

@@ -39,12 +39,12 @@
 		 */
 		highlight?: boolean;
 		value?: string;
-		icon?: string | Snippet | Component;
+		icon?: string | Component;
 		iconposition?: 'leading' | 'trailing';
-		leading?: string | Snippet | Component;
-		trailing?: string | Snippet | Component;
+		leading?: string | Component;
+		trailing?: string | Component;
 		loading?: boolean;
-		loadingicon?: string | Snippet | Component;
+		loadingicon?: string | Component;
 		mask?: string | MaskInputOptions;
 		ui?: {
 			root?: ClassNameValue;
@@ -57,6 +57,8 @@
 </script>
 
 <script lang="ts">
+	import Icon from './icon.svelte';
+
 	let {
 		type,
 		value = $bindable(),
@@ -83,8 +85,8 @@
 			slots: {
 				root: 'inline-flex items-center rounded transition-all ring ring-inset ring-transparent',
 				base: 'appearance-none outline-none placeholder:text-muted',
-				leading: 'text-muted',
-				trailing: 'text-muted',
+				leading: 'text-muted flex items-center',
+				trailing: 'text-muted flex items-center',
 				icon: '',
 			},
 			variants: {
@@ -135,7 +137,7 @@
 					soft: {
 						root: 'bg-surface-muted hover:bg-surface-elevated focus-within:bg-surface-elevated',
 					},
-					subtle: { root: 'ring ring-dimmed' },
+					subtle: { root: 'bg-surface-muted ring ring-dimmed' },
 					ghost: { root: 'hover:bg-surface-elevated focus-within:bg-surface-elevated' },
 					none: { root: '' },
 				},
@@ -168,42 +170,42 @@
 					color: 'primary',
 					variant: ['outline', 'subtle'],
 					class: {
-						root: 'focus-within:(ring-primary-500 ring-2)',
+						root: 'focus-within:ring-primary-500 focus-within:ring-2',
 					},
 				},
 				{
 					color: 'surface',
 					variant: ['outline', 'subtle'],
 					class: {
-						root: 'focus-within:(ring-surface-800 ring-2)',
+						root: 'focus-within:ring-surface-800 focus-within:ring-2',
 					},
 				},
 				{
 					color: 'info',
 					variant: ['outline', 'subtle'],
 					class: {
-						root: 'focus-within:(ring-info-500 ring-2)',
+						root: 'focus-within:ring-info-500 focus-within:ring-2',
 					},
 				},
 				{
 					color: 'success',
 					variant: ['outline', 'subtle'],
 					class: {
-						root: 'focus-within:(ring-success-500 ring-2)',
+						root: 'focus-within:ring-success-500 focus-within:ring-2',
 					},
 				},
 				{
 					color: 'warning',
 					variant: ['outline', 'subtle'],
 					class: {
-						root: 'focus-within:(ring-warning-500 ring-2)',
+						root: 'focus-within:ring-warning-500 focus-within:ring-2',
 					},
 				},
 				{
 					color: 'error',
 					variant: ['outline', 'subtle'],
 					class: {
-						root: 'focus-within:(ring-error-500 ring-2)',
+						root: 'focus-within:ring-error-500 focus-within:ring-2',
 					},
 				},
 			],
@@ -234,16 +236,11 @@
 					{@const Leading = leading}
 					<Leading />
 				{/if}
-			{:else if typeof TrailingIcon === 'string'}
-				<div
-					class={variants.icon({
-						class: [loading && 'animate-spin', TrailingIcon, ui.icon],
-					})}
-				></div>
-			{:else if isSnippet(TrailingIcon)}
-				{@render TrailingIcon()}
-			{:else if isComponent(TrailingIcon)}
-				<TrailingIcon class={variants.icon({ class: [ui.icon] })} />
+			{:else}
+				<Icon
+					name={TrailingIcon}
+					class={variants.icon({ class: [loading ? 'animate-spin' : ''] })}
+				/>
 			{/if}
 		</span>
 	{/if}

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

@@ -1,5 +1,5 @@
 import { type PropColor, type PropVariant } from '../index.js';
-import type { Component, Snippet } from 'svelte';
+import type { Component } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import { type MaskInputOptions } from 'maska';
@@ -35,12 +35,12 @@ export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
      */
     highlight?: boolean;
     value?: string;
-    icon?: string | Snippet | Component;
+    icon?: string | Component;
     iconposition?: 'leading' | 'trailing';
-    leading?: string | Snippet | Component;
-    trailing?: string | Snippet | Component;
+    leading?: string | Component;
+    trailing?: string | Component;
     loading?: boolean;
-    loadingicon?: string | Snippet | Component;
+    loadingicon?: string | Component;
     mask?: string | MaskInputOptions;
     ui?: {
         root?: ClassNameValue;

package/dist/components/pin-input.svelte

@@ -7,7 +7,7 @@
 	export type PinInputProps = {
 		value?: number[] | string[];
 		color?: PropColor;
-		variant?: Omit<PropVariant, 'solid'>;
+		variant?: Exclude<PropVariant, 'solid'>;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		length?: number;
 		autofocus?: boolean | number;
@@ -80,12 +80,12 @@
 				},
 				variant: {
 					outline: {
-						cell: 'border border-surface-300 focus:(border-2)',
+						cell: 'border border-surface-300 focus:border-2',
 					},
 					soft: {
 						cell: 'bg-surface-50 hover:bg-surface-100 focus:bg-surface-100',
 					},
-					subtle: { cell: 'border border-surface-300 bg-surface-100 focus:(border-2)' },
+					subtle: { cell: 'border border-surface-300 bg-surface-100 focus:border-2' },
 					ghost: { cell: 'hover:bg-surface-100 focus:bg-surface-100' },
 					none: { cell: '' },
 				},

package/dist/components/pin-input.svelte.d.ts

@@ -3,7 +3,7 @@ import type { ClassNameValue } from 'tailwind-merge';
 export type PinInputProps = {
     value?: number[] | string[];
     color?: PropColor;
-    variant?: Omit<PropVariant, 'solid'>;
+    variant?: Exclude<PropVariant, 'solid'>;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     length?: number;
     autofocus?: boolean | number;

package/dist/components/progress.svelte

@@ -30,8 +30,8 @@
 		value,
 		orientation = 'horizontal',
 		color = 'primary',
-		height = '',
-		ui = {}
+		height = 8,
+		ui = {},
 	}: ProgressProps = $props();
 
 	const percentage = $derived.by(() => {
@@ -53,46 +53,46 @@
 				root: 'relative w-full rounded-full overflow-hidden bg-surface-300',
 				status: '',
 				indicator: 'absolute transition-all rounded-full',
-				steps: ''
+				steps: '',
 			},
 			variants: {
 				color: {
 					primary: {
-						indicator: 'bg-primary-500'
+						indicator: 'bg-primary-500',
 					},
 					surface: {
-						indicator: 'bg-surface-500'
+						indicator: 'bg-surface-500',
 					},
 					info: {
-						indicator: 'bg-info-500'
+						indicator: 'bg-info-500',
 					},
 					success: {
-						indicator: 'bg-success-500'
+						indicator: 'bg-success-500',
 					},
 					warning: {
-						indicator: 'bg-warning-500'
+						indicator: 'bg-warning-500',
 					},
 					error: {
-						indicator: 'bg-error-500'
-					}
+						indicator: 'bg-error-500',
+					},
 				},
 				animation: {
 					swing: [indeterminate ? 'animate-[swing_2s_ease-in-out_infinite' : ''],
 					carousel: [indeterminate ? '' : ''],
 					'carousel-inverse': [indeterminate ? '' : ''],
-					elastic: [indeterminate ? '' : '']
-				}
+					elastic: [indeterminate ? '' : ''],
+				},
 			},
-			compoundVariants: []
+			compoundVariants: [],
 		})({
 			color,
-			animation: animation ?? 'swing'
-		})
+			animation: animation ?? 'swing',
+		}),
 	);
 </script>
 
 <div data-state-indeterminate={indeterminate}>
-	<div class={classes.root({ class: [ui.base] })} style:height={`${height || 8}px`}>
+	<div class={classes.root({ class: [ui.base] })} style:height={`${height}px`}>
 		<span class={classes.indicator({ class: ['h-full left-0'] })} style:width={`${percentage}%`}>
 		</span>
 	</div>
@@ -101,7 +101,7 @@
 		<p
 			class={[
 				'text-right transition',
-				value && value > 0 && max[value] ? 'text-primary-500' : 'text-surface-500'
+				value && value > 0 && max[value] ? 'text-primary-500' : 'text-surface-500',
 			]}
 		>
 			{(value && max[value]) || max[0]}

package/dist/components/select.svelte

@@ -2,6 +2,7 @@
 	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 { tv } from 'tailwind-variants';
 
 	export type SelectItem<T> =
@@ -21,6 +22,35 @@
 		variant?: Exclude<PropVariant, 'solid'>;
 		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;
+		};
 	} & (
 		| {
 				value?: T;
@@ -45,86 +75,324 @@
 		variant = 'outline',
 		highlight,
 		placeholder,
+		ui = {},
 	}: SelectProps<T> = $props();
 
 	const classes = $derived(
 		tv({
 			slots: {
-				trigger: 'transition-all rounded w-48 flex items-center justify-between',
+				base: [
+					'relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
+					'transition-colors',
+				],
+				leading: 'absolute inset-y-0 start-0 flex items-center',
+				leadingIcon: 'shrink-0 text-dimmed',
+				leadingAvatar: 'shrink-0',
+				leadingAvatarSize: '',
+				trailing: 'absolute inset-y-0 end-0 flex items-center',
+				trailingIcon: 'shrink-0 text-dimmed',
+				value: 'truncate pointer-events-none',
+				placeholder: 'truncate text-dimmed',
+				arrow: 'fill-bg stroke-default',
+				content:
+					'max-h-60 w-(--bits-select-anchor-width) bg-inverted shadow-lg rounded-md ring ring-surface-accented overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--bits-select-content-transform-origin) pointer-events-auto flex flex-col',
+				viewport: 'relative divide-y divide-base scroll-py-1 overflow-y-auto flex-1',
+				group: 'p-1 isolate',
+				empty: 'text-center text-muted',
+				label: 'font-semibold text-highlighted',
+				separator: '-mx-1 my-1 h-px bg-border',
+				item: [
+					'group relative w-full flex items-start select-none outline-none before:absolute before:content-[""] before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-[data-disabled]:before:bg-surface-elevated/50',
+					'transition-colors before:transition-colors',
+				],
+				itemLeadingIcon: [
+					'shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default',
+					'transition-colors',
+				],
+				itemLeadingAvatar: 'shrink-0',
+				itemLeadingAvatarSize: '',
+				itemLeadingChip: 'shrink-0',
+				itemLeadingChipSize: '',
+				itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
+				itemTrailingIcon: 'shrink-0',
+				itemWrapper: 'flex-1 flex flex-col min-w-0',
+				itemLabel: 'truncate',
+				itemDescription: 'truncate text-muted',
 			},
 			variants: {
-				color: {
-					primary: {
-						trigger: 'outline-primary focus:(border-primary)',
-					},
-					surface: {
-						trigger: 'outline-surface focus:(border-surface)',
-					},
-					info: {
-						trigger: 'outline-info focus:(border-info)',
-					},
-					success: {
-						trigger: 'outline-success focus:(border-success)',
-					},
-					warning: {
-						trigger: 'outline-warning focus:(border-warning)',
-					},
-					error: {
-						trigger: 'outline-error focus:(border-error)',
-					},
+				fieldGroup: {
+					horizontal:
+						'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
+					vertical:
+						'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]',
 				},
 				size: {
 					xs: {
-						trigger: 'h-6 px-1 text-xs gap-1',
+						base: 'px-2 py-1 text-xs gap-1',
+						leading: 'ps-2',
+						trailing: 'pe-2',
+						leadingIcon: 'size-4',
+						leadingAvatarSize: '3xs',
+						trailingIcon: 'size-4',
+						label: 'p-1 text-[10px]/3 gap-1',
+						item: 'p-1 text-xs gap-1',
+						itemLeadingIcon: 'size-4',
+						itemLeadingAvatarSize: '3xs',
+						itemLeadingChip: 'size-4',
+						itemLeadingChipSize: 'sm',
+						itemTrailingIcon: 'size-4',
+						empty: 'p-2 text-xs',
 					},
 					sm: {
-						trigger: 'h-7 px-2 text-xs gap-1',
+						base: 'px-2.5 py-1.5 text-xs gap-1.5',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						leadingIcon: 'size-4',
+						leadingAvatarSize: '3xs',
+						trailingIcon: 'size-4',
+						label: 'p-1.5 text-[10px]/3 gap-1.5',
+						item: 'p-1.5 text-xs gap-1.5',
+						itemLeadingIcon: 'size-4',
+						itemLeadingAvatarSize: '3xs',
+						itemLeadingChip: 'size-4',
+						itemLeadingChipSize: 'sm',
+						itemTrailingIcon: 'size-4',
+						empty: 'p-2.5 text-xs',
 					},
 					md: {
-						trigger: 'h-8 px-2 text-sm gap-2 ',
+						base: 'px-2.5 py-1.5 text-sm gap-1.5',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						leadingIcon: 'size-5',
+						leadingAvatarSize: '2xs',
+						trailingIcon: 'size-5',
+						label: 'p-1.5 text-xs gap-1.5',
+						item: 'p-1.5 text-sm gap-1.5',
+						itemLeadingIcon: 'size-5',
+						itemLeadingAvatarSize: '2xs',
+						itemLeadingChip: 'size-5',
+						itemLeadingChipSize: 'md',
+						itemTrailingIcon: 'size-5',
+						empty: 'p-2.5 text-sm',
 					},
 					lg: {
-						trigger: 'h-9 px-3 text-sm gap-3',
+						base: 'px-3 py-2 text-sm gap-2',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						leadingIcon: 'size-5',
+						leadingAvatarSize: '2xs',
+						trailingIcon: 'size-5',
+						label: 'p-2 text-xs gap-2',
+						item: 'p-2 text-sm gap-2',
+						itemLeadingIcon: 'size-5',
+						itemLeadingAvatarSize: '2xs',
+						itemLeadingChip: 'size-5',
+						itemLeadingChipSize: 'md',
+						itemTrailingIcon: 'size-5',
+						empty: 'p-3 text-sm',
 					},
 					xl: {
-						trigger: 'h-10 px-3 gap-4',
+						base: 'px-3 py-2 text-base gap-2',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						leadingIcon: 'size-6',
+						leadingAvatarSize: 'xs',
+						trailingIcon: 'size-6',
+						label: 'p-2 text-sm gap-2',
+						item: 'p-2 text-base gap-2',
+						itemLeadingIcon: 'size-6',
+						itemLeadingAvatarSize: 'xs',
+						itemLeadingChip: 'size-6',
+						itemLeadingChipSize: 'lg',
+						itemTrailingIcon: 'size-6',
+						empty: 'p-3 text-base',
 					},
 				},
 				variant: {
-					outline: {
-						trigger: 'border border-surface-accented focus:(outline)',
-					},
-					soft: {
-						trigger: 'bg-surface-elevated',
-					},
-					subtle: {
-						trigger: 'bg-surface-elevated border border-surface-accented focus:(outline)',
-					},
-					ghost: {
-						trigger: 'hover:bg-surface-elevated',
-					},
-					none: {},
+					outline:
+						'text-highlighted bg-default ring ring-inset ring-surface-accented hover:bg-surface-elevated disabled:bg-surface-default',
+					soft: 'text-highlighted bg-surface-elevated/50 hover:bg-surface-elevated focus:bg-surface-elevated disabled:bg-surface-elevated/50',
+					subtle:
+						'text-highlighted bg-surface-elevated ring ring-inset ring-accented hover:bg-surface-accented/75 disabled:bg-surface-elevated',
+					ghost:
+						'text-highlighted bg-transparent hover:bg-surface-elevated focus:bg-surface-elevated disabled:bg-transparent dark:disabled:bg-transparent',
+					none: 'text-highlighted bg-transparent',
+				},
+				color: {
+					primary: '',
+					surface: '',
+					success: '',
+					info: '',
+					warning: '',
+					error: '',
+				},
+				leading: {
+					true: '',
+				},
+				trailing: {
+					true: '',
 				},
-				placeholder: {
-					true: { trigger: 'text-muted' },
-					false: {},
+				loading: {
+					true: '',
 				},
 				highlight: {
-					true: {
-						trigger: 'border',
-					},
-					false: {},
+					true: '',
+				},
+				fixed: {
+					false: '',
+				},
+				type: {
+					file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
 				},
 			},
 			compoundVariants: [
-				{ color: 'primary', highlight: true, class: { trigger: 'border-primary-500' } },
-				{ color: 'surface', highlight: true, class: { trigger: 'border-surface-500' } },
-				{ color: 'info', highlight: true, class: { trigger: 'border-info-500' } },
-				{ color: 'success', highlight: true, class: { trigger: 'border-success-500' } },
-				{ color: 'warning', highlight: true, class: { trigger: 'border-warning-500' } },
-				{ color: 'error', highlight: true, class: { trigger: 'border-error-500' } },
+				{
+					color: 'primary',
+					variant: ['outline', 'subtle'],
+					class: 'focus:ring-2 focus:ring-inset focus:ring-primary',
+				},
+				{
+					color: 'primary',
+					highlight: true,
+					class: 'ring ring-inset ring-primary',
+				},
+				{
+					color: 'surface',
+					variant: ['outline', 'subtle'],
+					class: 'focus:ring-2 focus:ring-inset focus:ring-surface-inverted',
+				},
+				{
+					color: 'surface',
+					highlight: true,
+					class: 'ring ring-inset ring-surface-inverted',
+				},
+				{
+					color: 'error',
+					variant: ['outline', 'subtle'],
+					class: 'focus:ring-2 focus:ring-inset focus:ring-error',
+				},
+				{
+					color: 'error',
+					highlight: true,
+					class: 'ring ring-inset ring-error',
+				},
+				{
+					color: 'info',
+					variant: ['outline', 'subtle'],
+					class: 'focus:ring-2 focus:ring-inset focus:ring-info',
+				},
+				{
+					color: 'info',
+					highlight: true,
+					class: 'ring ring-inset ring-info',
+				},
+				{
+					color: 'success',
+					variant: ['outline', 'subtle'],
+					class: 'focus:ring-2 focus:ring-inset focus:ring-success',
+				},
+				{
+					color: 'success',
+					highlight: true,
+					class: 'ring ring-inset ring-success',
+				},
+				{
+					color: 'warning',
+					variant: ['outline', 'subtle'],
+					class: 'focus:ring-2 focus:ring-inset focus:ring-warning',
+				},
+				{
+					color: 'warning',
+					highlight: true,
+					class: 'ring ring-inset ring-warning',
+				},
+				{
+					leading: true,
+					size: 'xs',
+					class: 'ps-7',
+				},
+				{
+					leading: true,
+					size: 'sm',
+					class: 'ps-8',
+				},
+				{
+					leading: true,
+					size: 'md',
+					class: 'ps-9',
+				},
+				{
+					leading: true,
+					size: 'lg',
+					class: 'ps-10',
+				},
+				{
+					leading: true,
+					size: 'xl',
+					class: 'ps-11',
+				},
+				{
+					trailing: true,
+					size: 'xs',
+					class: 'pe-7',
+				},
+				{
+					trailing: true,
+					size: 'sm',
+					class: 'pe-8',
+				},
+				{
+					trailing: true,
+					size: 'md',
+					class: 'pe-9',
+				},
+				{
+					trailing: true,
+					size: 'lg',
+					class: 'pe-10',
+				},
+				{
+					trailing: true,
+					size: 'xl',
+					class: 'pe-11',
+				},
+				{
+					loading: true,
+					leading: true,
+					class: {
+						leadingIcon: 'animate-spin',
+					},
+				},
+				{
+					loading: true,
+					leading: false,
+					trailing: true,
+					class: {
+						trailingIcon: 'animate-spin',
+					},
+				},
+				{
+					fixed: false,
+					size: 'xs',
+					class: 'md:text-xs',
+				},
+				{
+					fixed: false,
+					size: 'sm',
+					class: 'md:text-xs',
+				},
+				{
+					fixed: false,
+					size: 'md',
+					class: 'md:text-sm',
+				},
+				{
+					fixed: false,
+					size: 'lg',
+					class: 'md:text-sm',
+				},
 			],
-		})({ size, color, variant, placeholder: !!placeholder, highlight }),
+		})({ size, color, variant, highlight }),
 	);
 </script>
 
@@ -139,12 +407,16 @@
 		(v) => (value = v as T | T[] | undefined)
 	}
 >
-	<Select.Trigger class={classes.trigger()}>
+	<Select.Trigger class={classes.base({ class: ui.base })}>
 		{value || placeholder}
 		<div class="i-lucide-chevron-down size-4"></div>
 	</Select.Trigger>
 	<Select.Portal>
-		<Select.Content class="bg-red">
+		<Select.Content
+			class={classes.content({ class: ui.content })}
+			preventScroll={true}
+			sideOffset={8}
+		>
 			<Select.ScrollUpButton />
 			<Select.Viewport>
 				{#each items as item, idx (idx)}
@@ -153,12 +425,15 @@
 							<Select.GroupHeading />
 
 							{#each item as group_item, gidx (gidx)}
-								<Select.Item value=""></Select.Item>
+								<Select.Item class={classes.item({ class: ui.item })} value=""></Select.Item>
 							{/each}
 						</Select.Group>
 					{:else}
 						{@const is_object = typeof item === 'object' && item !== null && 'value' in item}
-						<Select.Item value={(is_object ? item.value : item) as string}>
+						<Select.Item
+							class={classes.item({ class: ui.item })}
+							value={(is_object ? item.value : item) as string}
+						>
 							{item}
 						</Select.Item>
 					{/if}

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

@@ -1,6 +1,7 @@
 import type { PropColor, PropVariant } from '../index.js';
 import { Select } from 'bits-ui';
 import type { Component, Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
 export type SelectItem<T> = T | {
     icon?: string | Component;
     label: string | Component;
@@ -17,6 +18,35 @@ export type SelectProps<T> = {
     variant?: Exclude<PropVariant, 'solid'>;
     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;
+    };
 } & ({
     value?: T;
     type?: 'single';

package/dist/components/slider.svelte

@@ -35,7 +35,7 @@
 		step,
 		min,
 		max,
-		ui = {}
+		ui = {},
 	}: SliderProps<T> = $props();
 
 	const default_value = $derived.by(() => {
@@ -51,7 +51,7 @@
 		},
 		set(v: number[]) {
 			value = (v?.length !== 1 ? v : v[0]) as T;
-		}
+		},
 	});
 	const thumbs = $derived(slider_value.get()?.length ?? 1);
 	const classes = $derived.by(() =>
@@ -59,85 +59,85 @@
 			slots: {
 				root: [
 					'relative w-full flex rounded-full bg-neutral-300',
-					orientation === 'horizontal' ? 'items-center' : 'justify-center mx-1'
+					orientation === 'horizontal' ? 'items-center' : 'justify-center mx-1',
 				],
 				range: [
 					'rounded-full bg-neutral-200 p-0.5 relative transition',
-					orientation === 'horizontal' ? 'h-full' : 'w-full'
+					orientation === 'horizontal' ? 'h-full' : 'w-full',
 				],
 				thumb: 'bg-white rounded-full border-2 outline-none transition',
-				tick: ''
+				tick: '',
 			},
 			variants: {
 				color: {
 					primary: {
 						root: '',
 						range: 'bg-primary-500',
-						thumb: 'border-primary-500'
+						thumb: 'border-primary-500',
 					},
 					surface: {
 						range: ['bg-neutral-900'],
-						thumb: 'border-neutral-900'
+						thumb: 'border-neutral-900',
 					},
 					info: {
 						range: ['bg-info-500'],
-						thumb: 'border-info-500'
+						thumb: 'border-info-500',
 					},
 					success: {
 						range: ['bg-success-500'],
-						thumb: 'border-success-500'
+						thumb: 'border-success-500',
 					},
 					warning: {
 						range: ['bg-warning-500'],
-						thumb: 'border-warning-500'
+						thumb: 'border-warning-500',
 					},
 					error: {
 						range: ['bg-error-500'],
-						thumb: 'border-error-500'
-					}
+						thumb: 'border-error-500',
+					},
 				},
 				size: {
 					xs: {
 						root: [orientation === 'horizontal' ? 'h-1.5' : ''],
 						thumb: 'size-4',
-						tick: 'size-2.5'
+						tick: 'size-2.5',
 					},
 					sm: {
 						root: [orientation === 'horizontal' ? 'h-1.75' : ''],
 						thumb: 'size-4.5',
-						tick: 'size-3'
+						tick: 'size-3',
 					},
 					md: {
 						root: [orientation === 'horizontal' ? 'h-2' : 'w-2 h-48'],
 						thumb: 'size-5',
-						tick: 'size-3.5'
+						tick: 'size-3.5',
 					},
 					lg: {
 						root: [orientation === 'horizontal' ? 'h-2.5' : ''],
 						thumb: 'size-5.5',
-						tick: 'size-4'
+						tick: 'size-4',
 					},
 					xl: {
 						root: [orientation === 'horizontal' ? 'h-3' : 'w-3'],
 						thumb: 'size-6',
-						tick: 'size-4.5'
-					}
+						tick: 'size-4.5',
+					},
 				},
 				orientation: {
 					horizontal: {
 						root: '',
 						thumb: '',
-						tick: ''
+						tick: '',
 					},
 					vertical: {
 						root: '',
 						thumb: '',
-						tick: ''
-					}
-				}
+						tick: '',
+					},
+				},
 			},
-			compoundVariants: []
-		})({ color, size, orientation })
+			compoundVariants: [],
+		})({ color, size, orientation }),
 	);
 </script>
 
@@ -161,7 +161,7 @@
 					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',
-						'data-[active=""]:(opacity-100) group-hover:(opacity-100)'
+						'data-[active=""]:opacity-100 group-hover:opacity-100',
 					]}
 				>
 					{slider_value.get()[index]}

package/dist/components/switch.svelte

@@ -1,9 +1,8 @@
 <script module lang="ts">
-	import { type PropColor, isComponent, isSnippet } from '../index.js';
-	import type { Snippet } from 'svelte';
+	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 type { Component } from 'vitest-browser-svelte';
 
 	export type SwitchProps = {
 		value?: boolean;
@@ -11,9 +10,9 @@
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		disabled?: boolean;
 		loading?: boolean;
-		loadingicon?: string | Snippet | Component;
-		uncheckedicon?: string | Snippet | Component;
-		checkedicon?: string | Snippet | Component;
+		loadingicon?: string | Component;
+		uncheckedicon?: string | Component;
+		checkedicon?: string | Component;
 		label?: string | Snippet;
 		description?: string | Snippet;
 		required?: boolean;
@@ -121,18 +120,15 @@
 		data-state={value ? 'checked' : 'unchecked'}
 		class={classes.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
 		onclick={() => {
-			console.log('click');
-			if (loading) return;
+			if (loading || disabled) return;
 			value = !value;
 		}}
 	>
 		<span data-state={value ? 'checked' : 'unchecked'} class={classes.thumb({ class: ui.thumb })}>
-			{@render Icon(uncheckedicon, [(loading || value) && 'opacity-0'])}
-			{@render Icon(checkedicon, [(loading || !value) && 'opacity-0'])}
-			{@render Icon(loadingicon || 'i-lucide-loader-circle', [
-				'animate-spin',
-				!loading && 'opacity-0',
-			])}
+			<Icon
+				name={loading ? loadingicon : value ? checkedicon : uncheckedicon}
+				class={classes.icon({ class: [loading && 'animate-spin'] })}
+			/>
 		</span>
 	</button>
 
@@ -163,18 +159,6 @@
 	{/if}
 </div>
 
-{#snippet Icon(ico?: SwitchProps['checkedicon'], icon_class?: ClassNameValue)}
-	<div class={['absolute', icon_class]}>
-		{#if typeof ico === 'string'}
-			<div
-				data-state={value ? 'checked' : 'unchecked'}
-				class={classes.icon({ class: [ico] })}
-			></div>
-		{:else if isSnippet(ico)}
-			{@render ico()}
-		{:else if isComponent(ico)}
-			{@const Iconn = ico}
-			<Iconn />
-		{/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,16 +1,15 @@
 import { type PropColor } from '../index.js';
-import type { Snippet } from 'svelte';
+import type { Snippet, Component } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
-import type { Component } from 'vitest-browser-svelte';
 export type SwitchProps = {
     value?: boolean;
     color?: PropColor;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     disabled?: boolean;
     loading?: boolean;
-    loadingicon?: string | Snippet | Component;
-    uncheckedicon?: string | Snippet | Component;
-    checkedicon?: string | Snippet | Component;
+    loadingicon?: string | Component;
+    uncheckedicon?: string | Component;
+    checkedicon?: string | Component;
     label?: string | Snippet;
     description?: string | Snippet;
     required?: boolean;
@@ -22,6 +21,6 @@ export type SwitchProps = {
         description?: ClassNameValue;
     };
 };
-declare const Switch: import("svelte").Component<SwitchProps, {}, "value">;
+declare const Switch: Component<SwitchProps, {}, "value">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/tabs.svelte

@@ -70,7 +70,7 @@
 			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-muted data-[state="inactive"]:hover:text-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 +79,7 @@
 				variant: {
 					pill: {
 						list: 'bg-surface-elevated rounded-lg',
-						item: 'flex-1 data-[state="active"]:(text-inverted)',
+						item: 'flex-1 data-[state="active"]:text-inverted',
 						trigger: 'flex-1',
 						indicator: 'rounded-md shadow-xs',
 					},

package/dist/index.d.ts

@@ -1,6 +1,3 @@
 export * from './components/index.js';
 export * from './utilities.svelte.js';
-export type PropColor = 'primary' | 'surface' | 'info' | 'success' | 'warning' | 'error';
-export declare const COLORS: PropColor[];
-export type PropVariant = 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
-export type PropSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export * from './types.js';

package/dist/index.js

@@ -1,3 +1,3 @@
 export * from './components/index.js';
 export * from './utilities.svelte.js';
-export const COLORS = ['primary', 'surface', 'info', 'success', 'warning', 'error'];
+export * from './types.js';

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type PropColor = 'primary' | 'surface' | 'info' | 'success' | 'warning' | 'error';
+export type PropVariant = 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+export type PropSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utilities.svelte.d.ts

@@ -5,13 +5,13 @@ import { type MaybeGetter, type ElementSizeOptions } from 'runed';
  * @param v - The value to check
  * @returns true if the value is a component, false otherwise
  */
-export declare const isComponent: (v: unknown) => v is Component;
+export declare function isComponent(v: unknown): v is Component;
 /**
  * Checks if a value is a Svelte snippet
  * @param v - The value to check
  * @returns true if the value is a snippet, false otherwise
  */
-export declare const isSnippet: (v: unknown) => v is Snippet;
+export declare function isSnippet(v: unknown): v is Snippet;
 /**
  * Returns a reactive value holding the dom rect of `node`s.
  *

package/dist/utilities.svelte.js

@@ -4,17 +4,17 @@ import { extract, useMutationObserver, useResizeObserver, } from 'runed';
  * @param v - The value to check
  * @returns true if the value is a component, false otherwise
  */
-export const isComponent = (v) => {
+export function isComponent(v) {
     return typeof v === 'function' || (typeof v === 'object' && v !== null && !('$$render' in v));
-};
+}
 /**
  * Checks if a value is a Svelte snippet
  * @param v - The value to check
  * @returns true if the value is a snippet, false otherwise
  */
-export const isSnippet = (v) => {
+export function isSnippet(v) {
     return typeof v === 'object' && v !== null && '$$render' in v;
-};
+}
 /**
  * Returns a reactive value holding the dom rect of `node`s.
  *

package/dist/vite.js

@@ -71,14 +71,14 @@ export function uisv(options) {
                         if (typeof colors.surface !== 'object')
                             return '';
                         const variables = `
-              --colors-DEFAULT: ${colors.surface['200']};
+              --colors-base: ${colors.surface['200']};
       				--colors-dimmed: ${colors.surface['500']};
       				--colors-muted: ${colors.surface['400']};
       				--colors-toned: ${colors.surface['300']};
       				--colors-highlighted: white;
       				--colors-inverted: ${colors.surface['900']};
 
-      				--colors-surface-DEFAULT: ${colors.surface['900']};
+      				--colors-surface-base: ${colors.surface['900']};
       				--colors-surface-muted: ${colors.surface['800']};
       				--colors-surface-elevated: ${colors.surface['800']};
       				--colors-surface-accented: ${colors.surface['700']};
@@ -120,14 +120,14 @@ export function uisv(options) {
                     colors[color] = in_theme ? in_theme : getColors(value);
                 }
                 if (typeof colors.surface === 'object') {
-                    colors['DEFAULT'] = colors.surface['700'];
+                    colors['base'] = colors.surface['700'];
                     colors['dimmed'] = colors.surface['400'];
                     colors['muted'] = colors.surface['500'];
                     colors['toned'] = colors.surface['600'];
                     colors['highlighted'] = colors.surface['900'];
                     colors['inverted'] = 'white';
                     colors['surface'] = defu(colors.surface, {
-                        DEFAULT: 'white',
+                        base: 'white',
                         muted: colors.surface['50'],
                         elevated: colors.surface['100'],
                         accented: colors.surface['200'],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "uisv",
-	"version": "0.0.15",
+	"version": "0.0.17",
 	"description": "ui library for the rest of us",
 	"license": "MIT",
 	"repository": "ui-sv/uisv",