uisv 0.0.21 → 0.0.23

package/dist/components/button.svelte

@@ -1,13 +1,12 @@
 <script module lang="ts">
 	import { type Component, type Snippet } from 'svelte';
-	import { isComponent, type PropColor, type PropVariant } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
+	import { type PropColor, type PropVariant, Icon } from '../index.js';
 	// 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';
+	import { tv, type ClassValue } from 'tailwind-variants';
+	import { getAppContext } from '../contexts.js';
 
-	export type ButtonProps = SvelteHTMLElements['button'] & {
+	export type ButtonBaseProps = {
 		/** 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. */
@@ -18,15 +17,15 @@
 		/** The type of the button when not a link. */
 		type?: 'submit' | 'reset' | 'button' | null | undefined;
 		/** When true, the icon will be displayed on the right side. */
-		loadingicon?: string | Snippet | Component;
+		loadingicon?: string | Component;
 		/** When true, the loading icon will be displayed. */
 		loading?: boolean;
 		/** The position of the icon, including the loading icon */
-		iconposition?: 'left' | 'right';
+		iconposition?: 'leading' | 'trailing';
 		/** Icon when `loading` is `false` */
-		icon?: string | Snippet | Component;
-		leadingicon?: string | Snippet | Component;
-		trailingicon?: string | Snippet | Component;
+		icon?: string | Component;
+		leadingicon?: string | Component;
+		trailingicon?: string | Component;
 		/** Route Location the link should navigate to when clicked on. */
 		href?: string;
 		label?: string;
@@ -49,13 +48,15 @@
 		/** Set loading state automatically based on the `@click` promise state */
 		loadingauto?: boolean;
 		ui?: {
-			base?: ClassNameValue;
-			icon?: ClassNameValue;
-			leadingicon?: ClassNameValue;
-			trailingicon?: ClassNameValue;
+			base?: ClassValue;
+			icon?: ClassValue;
+			leadingicon?: ClassValue;
+			trailingicon?: ClassValue;
 		};
 		children?: Snippet;
 	};
+
+	export type ButtonProps = SvelteHTMLElements['button'] & ButtonBaseProps;
 </script>
 
 <script lang="ts">
@@ -65,7 +66,7 @@
 		size = 'md',
 		variant = 'solid',
 		color = 'primary',
-		iconposition = 'left',
+		iconposition = 'leading',
 		children,
 		// active,
 		// activecolor,
@@ -79,7 +80,7 @@
 		href,
 		icon,
 		loading,
-		loadingicon = 'i-lucide-loader-circle',
+		loadingicon = getAppContext().icons.loading,
 		type,
 		trailingicon,
 		leadingicon,
@@ -93,7 +94,7 @@
 		return false;
 	});
 
-	const variants = $derived(
+	const classnames = $derived(
 		tv({
 			slots: {
 				icon: '',
@@ -110,7 +111,7 @@
 				},
 				variant: {
 					link: '',
-					solid: 'text-inverted',
+					solid: 'text-label-inverted',
 					outline: 'border',
 					soft: '',
 					subtle: 'border',
@@ -143,7 +144,7 @@
 				{
 					color: 'surface',
 					variant: 'solid',
-					class: 'bg-surface-inverted text-inverted hover:bg-toned',
+					class: 'bg-surface-inverted text-label-inverted hover:bg-label-toned',
 				},
 				{
 					color: 'info',
@@ -177,7 +178,7 @@
 					color: 'surface',
 					variant: 'outline',
 					class: {
-						base: 'border-surface-accented text-surface-inverted hover:bg-surface/10',
+						base: 'border-surface-accented text-label hover:bg-surface-elevated',
 					},
 				},
 				{
@@ -217,7 +218,7 @@
 				{
 					color: 'surface',
 					variant: 'soft',
-					class: 'bg-surface/10 text-hightlighted hover:bg-surface/15',
+					class: 'bg-surface/10 text-label-highlighted hover:bg-surface/15',
 				},
 				{
 					color: 'info',
@@ -248,7 +249,7 @@
 				{
 					color: 'surface',
 					variant: 'subtle',
-					class: 'bg-surface/10 text-hightlighted border-surface/25 hover:bg-surface/15',
+					class: 'bg-surface/10 text-label-highlighted border-surface/25 hover:bg-surface/15',
 				},
 				{
 					color: 'info',
@@ -279,7 +280,7 @@
 				{
 					color: 'surface',
 					variant: 'ghost',
-					class: 'text-highlighted hover:bg-surface/15',
+					class: 'text-label-label-highlighted hover:bg-surface/15',
 				},
 				{
 					color: 'info',
@@ -310,7 +311,7 @@
 				{
 					color: 'surface',
 					variant: 'link',
-					class: 'text-muted hover:text-surface-inverted',
+					class: 'text-label-muted hover:text-surface-inverted',
 				},
 				{
 					color: 'info',
@@ -352,7 +353,6 @@
 
 <svelte:element
 	this={href ? 'a' : 'button'}
-	data-button-root
 	type={href ? undefined : type}
 	href={href && !disabled ? href : undefined}
 	disabled={disabled || is_loading}
@@ -360,14 +360,17 @@
 	role={href && disabled ? 'link' : undefined}
 	tabindex={href && disabled ? -1 : 0}
 	bind:this={ref}
-	class={variants.base({
+	class={classnames.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 iconposition === 'leading' || leadingicon || loading}
+		<Icon
+			name={is_loading ? loadingicon : leadingicon || icon}
+			class={[ui.leadingicon, loading && 'animate-spin', iconposition === 'leading' && ui.icon]}
+		/>
 	{/if}
 
 	{#if label}
@@ -376,21 +379,10 @@
 		{@render children?.()}
 	{/if}
 
-	{#if iconposition !== 'left' || trailingicon}
-		{@render Icon(trailingicon || icon, ui.trailingicon)}
+	{#if iconposition === 'trailing' || trailingicon}
+		<Icon
+			name={trailingicon || icon}
+			class={[ui.trailingicon, iconposition === 'trailing' && ui.icon]}
+		/>
 	{/if}
 </svelte:element>
-
-{#snippet Icon(IconProp?: string | Snippet | Component, classvalue?: ClassNameValue)}
-	{#if typeof IconProp === 'string'}
-		<div
-			class={variants.icon({
-				class: [is_loading && 'animate-spin', IconProp, ui.icon, classvalue],
-			})}
-		></div>
-	{:else if isSnippet(IconProp)}
-		{@render IconProp()}
-	{:else if isComponent(IconProp)}
-		<IconProp />
-	{/if}
-{/snippet}

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

@@ -1,8 +1,8 @@
 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';
-export type ButtonProps = SvelteHTMLElements['button'] & {
+import { type ClassValue } from 'tailwind-variants';
+export type ButtonBaseProps = {
     /** 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. */
@@ -12,15 +12,15 @@ export type ButtonProps = SvelteHTMLElements['button'] & {
     /** The type of the button when not a link. */
     type?: 'submit' | 'reset' | 'button' | null | undefined;
     /** When true, the icon will be displayed on the right side. */
-    loadingicon?: string | Snippet | Component;
+    loadingicon?: string | Component;
     /** When true, the loading icon will be displayed. */
     loading?: boolean;
     /** The position of the icon, including the loading icon */
-    iconposition?: 'left' | 'right';
+    iconposition?: 'leading' | 'trailing';
     /** Icon when `loading` is `false` */
-    icon?: string | Snippet | Component;
-    leadingicon?: string | Snippet | Component;
-    trailingicon?: string | Snippet | Component;
+    icon?: string | Component;
+    leadingicon?: string | Component;
+    trailingicon?: string | Component;
     /** Route Location the link should navigate to when clicked on. */
     href?: string;
     label?: string;
@@ -41,13 +41,14 @@ export type ButtonProps = SvelteHTMLElements['button'] & {
     /** Set loading state automatically based on the `@click` promise state */
     loadingauto?: boolean;
     ui?: {
-        base?: ClassNameValue;
-        icon?: ClassNameValue;
-        leadingicon?: ClassNameValue;
-        trailingicon?: ClassNameValue;
+        base?: ClassValue;
+        icon?: ClassValue;
+        leadingicon?: ClassValue;
+        trailingicon?: ClassValue;
     };
     children?: Snippet;
 };
+export type ButtonProps = SvelteHTMLElements['button'] & ButtonBaseProps;
 declare const Button: Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/calendar.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>
 	import type { Component, Snippet } from 'svelte';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import { type PropColor, type PropVariant, isSnippet } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
 	import { type DateValue, today } from '../date.js';
 	import { Calendar, type CalendarRootProps } from 'bits-ui';
 
@@ -11,8 +10,8 @@
 		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		ui?: {
-			base?: ClassNameValue;
-			icon?: ClassNameValue;
+			base?: ClassValue;
+			icon?: ClassValue;
 		};
 	};
 </script>
@@ -30,7 +29,7 @@
 		children,
 	}: CalendarProps = $props();
 
-	const classes = $derived.by(() => {
+	const variants = $derived.by(() => {
 		return tv({
 			slots: { icon: '', base: '' },
 			variants: {
@@ -63,7 +62,7 @@
 	});
 </script>
 
-<Calendar.Root type={type as typeof type} bind:value>
+<Calendar.Root type={type as 'single'} bind:value={() => value as DateValue, (v) => (value = v)}>
 	{#snippet children({ months, weekdays })}
 		<Calendar.Header>
 			<Calendar.PrevButton />
@@ -71,7 +70,7 @@
 			<Calendar.NextButton />
 		</Calendar.Header>
 
-		{#each months as month}
+		{#each months as month (month)}
 			<Calendar.Grid>
 				<Calendar.GridHead>
 					<Calendar.GridRow>

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

@@ -1,14 +1,14 @@
 import type { Component } from 'svelte';
+import { type ClassValue } from 'tailwind-variants';
 import { type PropColor, type PropVariant } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
 import { Calendar, type CalendarRootProps } from 'bits-ui';
 export type CalendarProps = CalendarRootProps & {
     color?: PropColor;
     variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     ui?: {
-        base?: ClassNameValue;
-        icon?: ClassNameValue;
+        base?: ClassValue;
+        icon?: ClassValue;
     };
 };
 declare const Calendar: Component<CalendarProps, {}, "value">;

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,7 +31,7 @@
 			variants: {
 				variant: {
 					solid: {
-						base: 'bg-surface-inverted text-inverted',
+						base: 'bg-surface-inverted text-label-inverted',
 						header: 'border-transparent',
 						footer: 'border-transparent',
 					},
@@ -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">;