uisv 0.0.20 → 0.0.22

package/dist/components/card.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import type { PropVariant } 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';
 
 	export type CardProps = {
 		children: Snippet;
@@ -10,10 +9,10 @@
 		footer?: Snippet;
 		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		ui?: {
-			base?: ClassNameValue;
-			header?: ClassNameValue;
-			content?: ClassNameValue;
-			footer?: ClassNameValue;
+			base?: ClassValue;
+			header?: ClassValue;
+			content?: ClassValue;
+			footer?: ClassValue;
 		};
 	};
 </script>
@@ -21,7 +20,7 @@
 <script lang="ts">
 	let { header, children, footer, variant = 'solid', ui = {} }: CardProps = $props();
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				base: 'rounded overflow-hidden',
@@ -32,18 +31,18 @@
 			variants: {
 				variant: {
 					solid: {
-						base: 'bg-surface-900 text-surface-50',
+						base: 'bg-surface-inverted text-label-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',
 					},
 				},
 			},
@@ -52,19 +51,19 @@
 	);
 </script>
 
-<div class={classes.base({ class: [ui.base] })}>
+<div class={variants.base({ class: [ui.base] })}>
 	{#if header}
-		<div class={classes.header({ class: [ui.header] })}>
+		<div class={variants.header({ class: [ui.header] })}>
 			{@render header()}
 		</div>
 	{/if}
 
-	<div class={classes.content({ class: ui.content })}>
+	<div class={variants.content({ class: ui.content })}>
 		{@render children()}
 	</div>
 
 	{#if footer}
-		<div class={classes.header({ class: [ui.header] })}>
+		<div class={variants.header({ class: [ui.header] })}>
 			{@render footer()}
 		</div>
 	{/if}

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

@@ -1,16 +1,16 @@
 import type { PropVariant } from '../index.js';
 import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type CardProps = {
     children: Snippet;
     header?: Snippet;
     footer?: Snippet;
     variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     ui?: {
-        base?: ClassNameValue;
-        header?: ClassNameValue;
-        content?: ClassNameValue;
-        footer?: ClassNameValue;
+        base?: ClassValue;
+        header?: ClassValue;
+        content?: ClassValue;
+        footer?: ClassValue;
     };
 };
 declare const Card: import("svelte").Component<CardProps, {}, "">;

package/dist/components/checkbox-group.svelte

@@ -1,6 +1,5 @@
 <script module lang="ts">
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import type { Component, Snippet } from 'svelte';
 	import { type PropColor, isComponent, isSnippet, Checkbox } from '../index.js';
 
@@ -21,9 +20,9 @@
 		legend?: string | Snippet | Component;
 		orientation?: 'horizontal' | 'vertical';
 		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			checkbox?: ClassNameValue;
+			root?: ClassValue;
+			container?: ClassValue;
+			checkbox?: ClassValue;
 		};
 	};
 </script>
@@ -44,7 +43,7 @@
 		...props
 	}: CheckboxGroupProps = $props();
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: '',
@@ -96,10 +95,10 @@
 				},
 				variant: {
 					list: { container: 'gap-2' },
-					card: { container: 'gap-2', checkbox: 'p-4 rounded-lg border border-neutral-200' },
+					card: { container: 'gap-2', checkbox: 'p-4 rounded-lg border border-surface-accented' },
 					table: {
 						container: 'gap-0 ',
-						checkbox: 'border border-neutral-200 p-4 data-[state=checked]:z-1',
+						checkbox: 'border border-surface-accented p-4 data-[state=checked]:z-1',
 					},
 				},
 				orientation: {
@@ -128,7 +127,7 @@
 					selected: true,
 					variant: ['table', 'card'],
 					class: {
-						checkbox: 'border-surface-500',
+						checkbox: 'border-label-muted',
 					},
 				},
 				{
@@ -177,7 +176,7 @@
 					selected: true,
 					variant: ['table'],
 					class: {
-						checkbox: 'bg-surface-100',
+						checkbox: 'bg-surface-elevated',
 					},
 				},
 				{
@@ -217,7 +216,7 @@
 	);
 </script>
 
-<div class={classes.root({ class: [ui.root] })}>
+<div class={variants.root({ class: [ui.root] })}>
 	{#if typeof legend === 'string'}
 		<legend>{legend}</legend>
 	{:else if isSnippet(legend)}
@@ -227,7 +226,7 @@
 		<Legend />
 	{/if}
 
-	<fieldset class={classes.container({ class: [ui.container] })}>
+	<fieldset class={variants.container({ class: [ui.container] })}>
 		{#each items as item, index (index)}
 			{@const key = typeof item === 'object' ? item[valuekey] : item}
 
@@ -236,7 +235,7 @@
 				{color}
 				as={variant === 'list' ? 'div' : 'label'}
 				ui={{
-					root: classes.checkbox({
+					root: variants.checkbox({
 						class: [ui.checkbox],
 						selected: value.includes(key),
 					}),

package/dist/components/checkbox-group.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 import type { Component, Snippet } from 'svelte';
 import { type PropColor } from '../index.js';
 export type CheckboxGroupProps = {
@@ -16,9 +16,9 @@ export type CheckboxGroupProps = {
     legend?: string | Snippet | Component;
     orientation?: 'horizontal' | 'vertical';
     ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        checkbox?: ClassNameValue;
+        root?: ClassValue;
+        container?: ClassValue;
+        checkbox?: ClassValue;
     };
 };
 declare const CheckboxGroup: Component<CheckboxGroupProps, {}, "value">;

package/dist/components/checkbox.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import { 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 'vitest-browser-svelte';
 
 	export type CheckboxProps = {
@@ -18,11 +17,11 @@
 		indicator?: 'start' | 'end' | 'hidden';
 		as?: string;
 		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			icon?: ClassNameValue;
-			label?: ClassNameValue;
-			description?: ClassNameValue;
+			root?: ClassValue;
+			container?: ClassValue;
+			icon?: ClassValue;
+			label?: ClassValue;
+			description?: ClassValue;
 		};
 	};
 </script>
@@ -40,89 +39,91 @@
 		required,
 		indicator = 'start',
 		as = 'div',
-		ui = {}
+		ui = {},
 	}: CheckboxProps = $props();
 	const id = $props.id();
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: 'relative flex-inline gap-2',
 				container:
-					'rounded-md border border-neutral-200 relative transition m-0.5 mr-0 grid place-items-center',
+					'rounded-md border border-surface-accented relative transition m-0.5 mr-0 grid place-items-center',
 				icon: 'pi text-white',
 				label: 'text-sm font-medium',
-				description: 'text-sm text-neutral-500'
+				description: 'text-sm text-label-muted',
 			},
 			variants: {
 				color: {
 					primary: {
-						container: [value && 'bg-primary-500 border-primary-500 text-primary-500']
+						container: [value && 'bg-primary-500 border-primary-500 text-primary-500'],
 					},
 					surface: {
-						container: [value && 'bg-neutral-900 border-neutral-900 text-neutral-900']
+						container: [
+							value && 'bg-surface-inverted border-surface-inverted text-surface-inverted',
+						],
 					},
 					info: {
-						container: [value && 'bg-info-500 border-info-500 text-info-500']
+						container: [value && 'bg-info-500 border-info-500 text-info-500'],
 					},
 					success: {
-						container: [value && 'bg-success-500 border-success-500 text-success-500']
+						container: [value && 'bg-success-500 border-success-500 text-success-500'],
 					},
 					warning: {
-						container: [value && 'bg-warning-500 border-warning-500 text-warning-500']
+						container: [value && 'bg-warning-500 border-warning-500 text-warning-500'],
 					},
 					error: {
-						container: [value && 'bg-error-500 border-error-500 text-error-500']
-					}
+						container: [value && 'bg-error-500 border-error-500 text-error-500'],
+					},
 				},
 				size: {
 					xs: {
 						container: 'size-3',
-						icon: 'size-3'
+						icon: 'size-3',
 					},
 					sm: {
 						container: 'size-3.5',
-						icon: 'size-3.5'
+						icon: 'size-3.5',
 					},
 					md: {
 						container: 'size-4',
-						icon: 'size-4'
+						icon: 'size-4',
 					},
 					lg: {
 						container: 'size-4.5',
-						icon: 'size-4.5'
+						icon: 'size-4.5',
 					},
 					xl: {
 						container: 'size-5',
-						icon: 'size-5'
-					}
+						icon: 'size-5',
+					},
 				},
 				indicator: {
 					start: '',
 					end: {
-						root: 'flex-row-reverse'
+						root: 'flex-row-reverse',
 					},
 					hidden: {
-						container: 'hidden'
-					}
-				}
+						container: 'hidden',
+					},
+				},
 			},
-			compoundVariants: []
-		})({ color, size, indicator })
+			compoundVariants: [],
+		})({ color, size, indicator }),
 	);
 </script>
 
 <svelte:element
 	this={as}
 	data-state={value ? 'checked' : 'unchecked'}
-	class={classes.root({
-		class: [disabled && 'opacity-50', ui.root]
+	class={variants.root({
+		class: [disabled && 'opacity-50', ui.root],
 	})}
 >
 	<button
 		{id}
 		aria-label="checkbox"
-		class={classes.container({ class: [ui.container] })}
+		class={variants.container({ class: [ui.container] })}
 		onclick={() => {
 			if (disabled) return;
 			if (value === 'intermediate') return (value = true);
@@ -137,8 +138,8 @@
 		<div class="flex flex-col justify-start">
 			<label
 				for={id}
-				class={classes.label({
-					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.label]
+				class={variants.label({
+					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.label],
 				})}
 			>
 				{#if typeof label === 'string'}
@@ -149,7 +150,7 @@
 			</label>
 
 			{#if description}
-				<div class={classes.description({ class: ui.description })}>
+				<div class={variants.description({ class: ui.description })}>
 					{#if typeof description === 'string'}
 						{description}
 					{:else}
@@ -161,10 +162,10 @@
 	{/if}
 </svelte:element>
 
-{#snippet Icon(ico?: CheckboxProps['icon'], icon_class?: ClassNameValue)}
+{#snippet Icon(ico?: CheckboxProps['icon'], icon_class?: ClassValue)}
 	<div class={['absolute', icon_class]}>
 		{#if typeof ico === 'string'}
-			<div class={classes.icon({ class: [ico, ui.icon] })}></div>
+			<div class={variants.icon({ class: [ico, ui.icon] })}></div>
 		{:else if isSnippet(ico)}
 			{@render ico()}
 		{:else if isComponent(ico)}

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

@@ -1,6 +1,6 @@
 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 'vitest-browser-svelte';
 export type CheckboxProps = {
     value?: boolean | 'intermediate';
@@ -15,11 +15,11 @@ export type CheckboxProps = {
     indicator?: 'start' | 'end' | 'hidden';
     as?: string;
     ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        icon?: ClassNameValue;
-        label?: ClassNameValue;
-        description?: ClassNameValue;
+        root?: ClassValue;
+        container?: ClassValue;
+        icon?: ClassValue;
+        label?: ClassValue;
+        description?: ClassValue;
     };
 };
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value">;

package/dist/components/chip.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import type { PropColor } 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';
 
 	export type ChipProps = {
 		children: Snippet;
@@ -11,8 +10,8 @@
 		position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
 		size?: number;
 		ui?: {
-			base?: ClassNameValue;
-			chip?: ClassNameValue;
+			base?: ClassValue;
+			chip?: ClassValue;
 		};
 	};
 </script>
@@ -24,55 +23,55 @@
 		color = 'primary',
 		position = 'top-right',
 		size = 8,
-		ui = {}
+		ui = {},
 	}: ChipProps = $props();
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			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-label-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>
 
-<div class={classes.base({ class: [ui.base] })}>
+<div class={variants.base({ class: [ui.base] })}>
 	{@render children()}
 
 	<span
-		class={classes.chip({ class: ui.chip })}
+		class={variants.chip({ class: ui.chip })}
 		style:height="{size}px"
 		style:min-width="{size}px"
 		style:font-size="{size}px"

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

@@ -1,6 +1,6 @@
 import type { PropColor } from '../index.js';
 import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type ChipProps = {
     children: Snippet;
     text?: string;
@@ -8,8 +8,8 @@ export type ChipProps = {
     position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
     size?: number;
     ui?: {
-        base?: ClassNameValue;
-        chip?: ClassNameValue;
+        base?: ClassValue;
+        chip?: ClassValue;
     };
 };
 declare const Chip: import("svelte").Component<ChipProps, {}, "">;

package/dist/components/collapsible.svelte

@@ -2,16 +2,15 @@
 	import { type ButtonProps, Button } from '../index.js';
 	import { Collapsible } from 'bits-ui';
 	import { defu } from 'defu';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type CollapsibleProps = ButtonProps & {
 		open?: boolean;
 		disabled?: boolean;
-		class?: ClassNameValue;
+		class?: ClassValue;
 		ui?: {
-			root?: ClassNameValue;
-			content?: ClassNameValue;
+			root?: ClassValue;
+			content?: ClassValue;
 		};
 	};
 </script>

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

@@ -1,13 +1,13 @@
 import { type ButtonProps } from '../index.js';
 import { Collapsible } from 'bits-ui';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type CollapsibleProps = ButtonProps & {
     open?: boolean;
     disabled?: boolean;
-    class?: ClassNameValue;
+    class?: ClassValue;
     ui?: {
-        root?: ClassNameValue;
-        content?: ClassNameValue;
+        root?: ClassValue;
+        content?: ClassValue;
     };
 };
 declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "open">;

package/dist/components/color-picker.svelte

@@ -22,7 +22,7 @@
 
 	const translated = $derived(new ColorTranslator(value));
 
-	const classes = $derived(
+	const variants = $derived(
 		tv({
 			slots: {
 				root: '',

package/dist/components/h1.svelte

@@ -2,14 +2,15 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 	const { children, class: classes, ...rest }: SvelteHTMLElements['h1'] = $props();
+
+	const classname = $derived(
+		cn(
+			'text-4xl font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
+			classes,
+		),
+	);
 </script>
 
-<h1
-	{...rest}
-	class={cn(
-		'text-4xl font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
-		classes,
-	)}
->
+<h1 {...rest} class={classname}>
 	{@render children?.()}
 </h1>

package/dist/components/h2.svelte

@@ -2,18 +2,19 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 	const { children, class: classes, ...rest }: SvelteHTMLElements['h2'] = $props();
+
+	const classname = $derived(
+		cn(
+			'relative text-2xl text-label-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 [&>a>code]:border-dashed [&>a>code]:font-bold [&>a>code]:text-xl/7',
+			'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+			classes,
+		),
+	);
 </script>
 
-<h2
-	{...rest}
-	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 [&>a>code]:border-dashed [&>a>code]:font-bold [&>a>code]:text-xl/7',
-		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
-		classes,
-	)}
->
+<h2 {...rest} class={classname}>
 	{@render children?.()}
 </h2>

package/dist/components/h3.svelte

@@ -2,15 +2,16 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 	const { children, class: classes, ...rest }: SvelteHTMLElements['h3'] = $props();
+
+	const classname = $derived(
+		cn(
+			'relative text-xl text-label-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
+			'[&>a>code]:transition-colors',
+			classes,
+		),
+	);
 </script>
 
-<h3
-	{...rest}
-	class={cn(
-		'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
-		'[&>a>code]:transition-colors',
-		classes,
-	)}
->
+<h3 {...rest} class={classname}>
 	{@render children?.()}
 </h3>