uisv 0.0.14 → 0.0.16

package/dist/components/input-time.svelte

@@ -1,11 +1,10 @@
 <script module lang="ts">
-	import { type PropColor } from '../index.js';
+	import { type PropColor, type PropVariant } from '../index.js';
 	import type { Component, Snippet } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
-	import { Time } from '@internationalized/date';
+	import { Time } from '../date.js';
 
-	export { Time };
 	export { default as InputTime } from './input-time.svelte';
 
 	export type InputTimeProps = {
@@ -25,7 +24,7 @@
 		/**
 		 * @default outline
 		 */
-		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		variant?: Exclude<PropVariant, 'solid'>;
 		/**
 		 * @default md
 		 */
@@ -80,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-time.svelte.d.ts

@@ -1,8 +1,7 @@
-import { type PropColor } from '../index.js';
+import { type PropColor, type PropVariant } from '../index.js';
 import type { Component, Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
-import { Time } from '@internationalized/date';
-export { Time };
+import { Time } from '../date.js';
 export { default as InputTime } from './input-time.svelte';
 export type InputTimeProps = {
     id?: string;
@@ -21,7 +20,7 @@ export type InputTimeProps = {
     /**
      * @default outline
      */
-    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    variant?: Exclude<PropVariant, 'solid'>;
     /**
      * @default md
      */

package/dist/components/input.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { type PropColor, isComponent, isSnippet } from '../index.js';
+	import { type PropColor, type PropVariant, isComponent, isSnippet } from '../index.js';
 	import type { Component, Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import type { ClassNameValue } from 'tailwind-merge';
@@ -20,7 +20,7 @@
 		/**
 		 * @default outline
 		 */
-		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		variant?: Exclude<PropVariant, 'solid'>;
 		/**
 		 * @default md
 		 */
@@ -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 } from '../index.js';
-import type { Component, Snippet } from 'svelte';
+import { type PropColor, type PropVariant } from '../index.js';
+import type { Component } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import { type MaskInputOptions } from 'maska';
@@ -16,7 +16,7 @@ export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
     /**
      * @default outline
      */
-    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    variant?: Exclude<PropVariant, 'solid'>;
     /**
      * @default md
      */
@@ -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/kbd.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import type { PropColor } from '../index.js';
+	import type { PropColor, PropVariant } from '../index.js';
 	import type { Snippet } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
@@ -8,7 +8,7 @@
 		children?: Snippet;
 		value?: string;
 		color?: PropColor;
-		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		size?: 'sm' | 'md' | 'lg';
 		class?: ClassNameValue;
 	};
@@ -35,7 +35,7 @@
 		pageup: '⇞',
 		pagedown: '⇟',
 		home: '↖',
-		end: '↘'
+		end: '↘',
 	};
 
 	export type KbdKey = keyof typeof KBD_KEYS;
@@ -49,7 +49,7 @@
 		color = 'primary',
 		variant = 'outline',
 		size = 'md',
-		class: klass
+		class: klass,
 	}: KbdProps = $props();
 
 	const macOS = $derived.by(() => {
@@ -61,7 +61,7 @@
 	const kbdKeysSpecificMap = $derived({
 		meta: macOS ? KBD_KEYS.command : 'Ctrl',
 		alt: macOS ? KBD_KEYS.command : 'Ctrl',
-		ctrl: macOS ? KBD_KEYS.option : 'Alt'
+		ctrl: macOS ? KBD_KEYS.option : 'Alt',
 	});
 
 	function getKey(value?: KbdKey | string) {
@@ -87,148 +87,148 @@
 				info: '',
 				success: '',
 				warning: '',
-				error: ''
+				error: '',
 			},
 			variant: {
 				solid: 'text-white border border-b-3 border-r-2',
 				outline: 'border border-b-3 border-r-2',
 				soft: '',
-				subtle: 'border border-b-3 border-r-2'
+				subtle: 'border border-b-3 border-r-2',
 			},
 			size: {
 				sm: 'h-4 min-w-4',
 				md: 'h-5 min-w-5',
-				lg: 'h-6 min-w-6'
-			}
+				lg: 'h-6 min-w-6',
+			},
 		},
 		compoundVariants: [
 			{
 				color: 'primary',
 				variant: 'outline',
-				class: 'border-primary text-primary'
+				class: 'border-primary text-primary',
 			},
 			{
 				color: 'surface',
 				variant: 'outline',
-				class: 'border-surface-600'
+				class: 'border-surface-600',
 			},
 			{
 				color: 'info',
 				variant: 'outline',
-				class: 'border-info text-info'
+				class: 'border-info text-info',
 			},
 			{
 				color: 'success',
 				variant: 'outline',
-				class: 'border-success text-success'
+				class: 'border-success text-success',
 			},
 			{
 				color: 'warning',
 				variant: 'outline',
-				class: 'border-warning text-warning'
+				class: 'border-warning text-warning',
 			},
 			{
 				color: 'error',
 				variant: 'outline',
-				class: 'border-error text-error'
+				class: 'border-error text-error',
 			},
 
 			// SOLID
 			{
 				color: 'primary',
 				variant: 'solid',
-				class: 'bg-primary border-primary-600'
+				class: 'bg-primary border-primary-600',
 			},
 			{
 				color: 'surface',
 				variant: 'solid',
-				class: 'bg-surface-600 border-surface-700'
+				class: 'bg-surface-600 border-surface-700',
 			},
 			{
 				color: 'info',
 				variant: 'solid',
-				class: 'bg-info border-info-600'
+				class: 'bg-info border-info-600',
 			},
 			{
 				color: 'success',
 				variant: 'solid',
-				class: 'bg-success border-success-600'
+				class: 'bg-success border-success-600',
 			},
 			{
 				color: 'warning',
 				variant: 'solid',
-				class: 'bg-warning border-warning-600'
+				class: 'bg-warning border-warning-600',
 			},
 			{
 				color: 'error',
 				variant: 'solid',
-				class: 'bg-error border-error-600'
+				class: 'bg-error border-error-600',
 			},
 
 			// SOFT
 			{
 				color: 'primary',
 				variant: 'soft',
-				class: 'bg-primary-100 text-primary'
+				class: 'bg-primary-100 text-primary',
 			},
 			{
 				color: 'surface',
 				variant: 'soft',
-				class: 'bg-surface-100 text-surface-700'
+				class: 'bg-surface-100 text-surface-700',
 			},
 			{
 				color: 'info',
 				variant: 'soft',
-				class: 'bg-info-100 text-info'
+				class: 'bg-info-100 text-info',
 			},
 			{
 				color: 'success',
 				variant: 'soft',
-				class: 'bg-success-100 text-success'
+				class: 'bg-success-100 text-success',
 			},
 			{
 				color: 'warning',
 				variant: 'soft',
-				class: 'bg-warning-100 text-warning'
+				class: 'bg-warning-100 text-warning',
 			},
 			{
 				color: 'error',
 				variant: 'soft',
-				class: 'bg-error-100 text-error'
+				class: 'bg-error-100 text-error',
 			},
 
 			// SUBTLE
 			{
 				color: 'primary',
 				variant: 'subtle',
-				class: 'bg-primary-100 border-primary-200 text-primary'
+				class: 'bg-primary-100 border-primary-200 text-primary',
 			},
 			{
 				color: 'surface',
 				variant: 'subtle',
-				class: 'bg-surface-100 border-surface-200 text-surface-700'
+				class: 'bg-surface-100 border-surface-200 text-surface-700',
 			},
 			{
 				color: 'info',
 				variant: 'subtle',
-				class: 'bg-info-100 border-info-200 text-info'
+				class: 'bg-info-100 border-info-200 text-info',
 			},
 			{
 				color: 'success',
 				variant: 'subtle',
-				class: 'bg-success-100 border-success-200 text-success'
+				class: 'bg-success-100 border-success-200 text-success',
 			},
 			{
 				color: 'warning',
 				variant: 'subtle',
-				class: 'bg-warning-100 border-warning-200 text-warning'
+				class: 'bg-warning-100 border-warning-200 text-warning',
 			},
 			{
 				color: 'error',
 				variant: 'subtle',
-				class: 'bg-error-100 border-error-200 text-error'
-			}
-		]
+				class: 'bg-error-100 border-error-200 text-error',
+			},
+		],
 	})({ color, variant, size, class: [klass] })}
 >
 	{#if value}

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

@@ -1,11 +1,11 @@
-import type { PropColor } from '../index.js';
+import type { PropColor, PropVariant } from '../index.js';
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 export type KbdProps = {
     children?: Snippet;
     value?: string;
     color?: PropColor;
-    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     size?: 'sm' | 'md' | 'lg';
     class?: ClassNameValue;
 };

package/dist/components/pin-input.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import type { PropColor } from '../index.js';
+	import type { PropColor, PropVariant } from '../index.js';
 	import { onMount } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
@@ -7,7 +7,7 @@
 	export type PinInputProps = {
 		value?: number[] | string[];
 		color?: PropColor;
-		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		variant?: Exclude<PropVariant, 'solid'>;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		length?: number;
 		autofocus?: boolean | number;
@@ -36,7 +36,7 @@
 		'Tab',
 		'Shift',
 		'Control',
-		'Meta'
+		'Meta',
 	];
 
 	let {
@@ -54,7 +54,7 @@
 		placeholder,
 		required,
 		type = 'text',
-		ui = {}
+		ui = {},
 	}: PinInputProps = $props();
 	const internal_id = $props.id();
 	let input_els = $state<HTMLInputElement[]>([]);
@@ -69,60 +69,60 @@
 					info: '',
 					success: '',
 					warning: '',
-					error: ''
+					error: '',
 				},
 				size: {
 					xs: { root: '', cell: 'size-6' },
 					sm: { root: '', cell: 'size-7' },
 					md: { root: '', cell: 'size-8' },
 					lg: { root: '', cell: 'size-9' },
-					xl: { root: '', cell: 'size-10' }
+					xl: { root: '', cell: 'size-10' },
 				},
 				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)'
+						cell: 'bg-surface-50 hover:bg-surface-100 focus:bg-surface-100',
 					},
-					subtle: { cell: 'border border-surface-300 bg-surface-100 focus:(border-2)' },
-					ghost: { cell: 'hover:(bg-surface-100) focus:(bg-surface-100)' },
-					none: { cell: '' }
-				}
+					subtle: { cell: 'border border-surface-300 bg-surface-100 focus:border-2' },
+					ghost: { cell: 'hover:bg-surface-100 focus:bg-surface-100' },
+					none: { cell: '' },
+				},
 			},
 			compoundVariants: [
 				{
 					variant: ['outline', 'subtle'],
 					color: 'primary',
-					class: { cell: 'focus:(border-primary-500)' }
+					class: { cell: 'focus:border-primary-500' },
 				},
 				{
 					variant: ['outline', 'subtle'],
 					color: 'surface',
-					class: { cell: 'focus:(border-surface-900)' }
+					class: { cell: 'focus:border-surface-900' },
 				},
 				{
 					variant: ['outline', 'subtle'],
 					color: 'info',
-					class: { cell: 'focus:(border-info-500)' }
+					class: { cell: 'focus:border-info-500' },
 				},
 				{
 					variant: ['outline', 'subtle'],
 					color: 'success',
-					class: { cell: 'focus:(border-success-500)' }
+					class: { cell: 'focus:border-success-500' },
 				},
 				{
 					variant: ['outline', 'subtle'],
 					color: 'warning',
-					class: { cell: 'focus:(border-warning-500)' }
+					class: { cell: 'focus:border-warning-500' },
 				},
 				{
 					variant: ['outline', 'subtle'],
 					color: 'error',
-					class: { cell: 'focus:(border-error-500)' }
-				}
-			]
-		})({ size, color, variant, class: ui.root })
+					class: { cell: 'focus:border-error-500' },
+				},
+			],
+		})({ size, color, variant, class: ui.root }),
 	);
 
 	onMount(() => {

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

@@ -1,9 +1,9 @@
-import type { PropColor } from '../index.js';
+import type { PropColor, PropVariant } from '../index.js';
 import type { ClassNameValue } from 'tailwind-merge';
 export type PinInputProps = {
     value?: number[] | string[];
     color?: PropColor;
-    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    variant?: Exclude<PropVariant, 'solid'>;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     length?: number;
     autofocus?: boolean | number;

package/dist/components/placeholder.svelte

@@ -8,7 +8,7 @@
 <svg
 	{...rest}
 	class={cx(
-		'inset-0 w-full stroke-surface/10 border border-dashed border-surface rounded-md',
+		'inset-0 w-full stroke-surface-elevated border border-dashed border-surface-accented rounded-md',
 		klass,
 	)}
 	fill="none"

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]}