uisv 0.0.13 → 0.0.15

package/dist/components/input.svelte

@@ -0,0 +1,285 @@
+<script module lang="ts">
+	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';
+	import { maska } from 'maska/svelte';
+	import { type MaskInputOptions } from 'maska';
+	import { tv } from 'tailwind-variants';
+
+	export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
+		name?: string;
+		/**
+		 * The placeholder text when the input is empty.
+		 */
+		placeholder?: string;
+		/**
+		 * @default primary
+		 */
+		color?: PropColor;
+		/**
+		 * @default outline
+		 */
+		variant?: Exclude<PropVariant, 'solid'>;
+		/**
+		 * @default md
+		 */
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		/**
+		 * @default off
+		 */
+		autocomplete?: 'on' | 'off';
+		/**
+		 * @default false
+		 */
+		autofocus?: boolean | number;
+		disabled?: boolean;
+		/**
+		 * Highlight the ring color like a focus state.
+		 */
+		highlight?: boolean;
+		value?: string;
+		icon?: string | Snippet | Component;
+		iconposition?: 'leading' | 'trailing';
+		leading?: string | Snippet | Component;
+		trailing?: string | Snippet | Component;
+		loading?: boolean;
+		loadingicon?: string | Snippet | Component;
+		mask?: string | MaskInputOptions;
+		ui?: {
+			root?: ClassNameValue;
+			base?: ClassNameValue;
+			leading?: ClassNameValue;
+			icon?: ClassNameValue;
+			trailing?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		type,
+		value = $bindable(),
+		color = 'primary',
+		variant = 'outline',
+		size = 'md',
+		icon,
+		iconposition,
+		disabled,
+		highlight,
+		leading,
+		loading,
+		loadingicon = 'i-lucide-loader-circle',
+		required,
+		trailing,
+		mask,
+		ui = {},
+		...rest
+	}: InputProps = $props();
+	const id = $props.id();
+
+	const variants = $derived(
+		tv({
+			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',
+				icon: '',
+			},
+			variants: {
+				fieldGroup: {
+					horizontal: {
+						root: '',
+						base: '',
+					},
+					vertical: {
+						root: '',
+						base: '',
+					},
+				},
+				size: {
+					xs: {
+						base: 'px-2 py-1 text-xs gap-1',
+						leading: 'ps-2',
+						trailing: 'pe-2',
+						icon: 'size-4',
+					},
+					sm: {
+						base: 'px-2.5 py-1.5 text-xs gap-1.5',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						icon: 'size-4',
+					},
+					md: {
+						base: 'px-2.5 py-1.5 text-sm gap-1.5',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						icon: 'size-5',
+					},
+					lg: {
+						base: 'px-3 py-2 text-sm gap-2',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						icon: 'size-5',
+					},
+					xl: {
+						base: 'px-3 py-2 text-base gap-2',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						icon: 'size-6',
+					},
+				},
+				variant: {
+					outline: { root: 'ring ring-dimmed' },
+					soft: {
+						root: 'bg-surface-muted hover:bg-surface-elevated focus-within:bg-surface-elevated',
+					},
+					subtle: { root: 'ring ring-dimmed' },
+					ghost: { root: 'hover:bg-surface-elevated focus-within:bg-surface-elevated' },
+					none: { root: '' },
+				},
+				color: {
+					primary: { root: '' },
+					surface: { root: '' },
+					info: { root: '' },
+					success: { root: '' },
+					warning: { root: '' },
+					error: { root: '' },
+				},
+				leading: {
+					false: { leading: 'hidden' },
+				},
+				trailing: {
+					false: { trailing: 'hidden' },
+				},
+				loading: {
+					true: '',
+				},
+				highlight: {
+					true: '',
+				},
+				type: {
+					file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
+				},
+			},
+			compoundVariants: [
+				{
+					color: 'primary',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-primary-500 ring-2)',
+					},
+				},
+				{
+					color: 'surface',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-surface-800 ring-2)',
+					},
+				},
+				{
+					color: 'info',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-info-500 ring-2)',
+					},
+				},
+				{
+					color: 'success',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-success-500 ring-2)',
+					},
+				},
+				{
+					color: 'warning',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-warning-500 ring-2)',
+					},
+				},
+				{
+					color: 'error',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-error-500 ring-2)',
+					},
+				},
+			],
+		})({
+			size,
+			color,
+			variant,
+			highlight,
+			loading,
+			leading: !!leading || (!!icon && iconposition === 'leading') || loading,
+			trailing: !!trailing || (!!icon && iconposition === 'trailing'),
+			type: type === 'file' ? 'file' : undefined,
+		}),
+	);
+</script>
+
+<div class={variants.root({ class: ui.root })}>
+	{#if leading || (icon && iconposition === 'leading') || loading}
+		{@const TrailingIcon = loading ? loadingicon : icon}
+
+		<span class={variants.leading({ class: ui.leading })}>
+			{#if !!leading && !loading}
+				{#if typeof leading === 'string'}
+					{leading}
+				{:else if isSnippet(leading)}
+					{@render leading()}
+				{:else if isComponent(leading)}
+					{@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] })} />
+			{/if}
+		</span>
+	{/if}
+
+	<input
+		{id}
+		{type}
+		{...rest}
+		class={variants.base({ class: [ui.base] })}
+		{...rest}
+		use:maska={mask}
+	/>
+
+	{#if trailing || (icon && iconposition === 'trailing')}
+		<span class={variants.trailing({ class: ui.trailing })}>
+			{#if !!trailing}
+				{#if typeof trailing === 'string'}
+					{trailing}
+				{:else if isSnippet(trailing)}
+					{@render trailing()}
+				{:else if isComponent(trailing)}
+					{@const Trailing = trailing}
+					<Trailing />
+				{/if}
+			{:else if typeof icon === 'string'}
+				<div
+					class={variants.icon({
+						class: [icon, ui.icon],
+					})}
+				></div>
+			{:else if isSnippet(icon)}
+				{@render icon()}
+			{:else if isComponent(icon)}
+				{@const Icon = icon}
+				<Icon class={variants.icon({ class: [ui.icon] })} />
+			{/if}
+		</span>
+	{/if}
+</div>

package/dist/components/{input/index.d.ts → input.svelte.d.ts}

@@ -1,10 +1,8 @@
-import type { PropColor } from '../../index.js';
+import { type PropColor, type PropVariant } from '../index.js';
 import type { Component, Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
-import type { MaskInputOptions } from 'maska';
-export { default as Input } from './input.svelte';
-export * from './style.js';
+import { type MaskInputOptions } from 'maska';
 export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
     name?: string;
     /**
@@ -18,7 +16,7 @@ export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
     /**
      * @default outline
      */
-    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    variant?: Exclude<PropVariant, 'solid'>;
     /**
      * @default md
      */
@@ -52,3 +50,6 @@ export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
         trailing?: ClassNameValue;
     };
 };
+declare const Input: Component<InputProps, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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?: Omit<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: '' }
-				}
+					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?: Omit<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/select.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import type { PropColor } from '../index.js';
+	import type { PropColor, PropVariant } from '../index.js';
 	import { Select } from 'bits-ui';
 	import type { Component, Snippet } from 'svelte';
 	import { tv } from 'tailwind-variants';
@@ -18,7 +18,7 @@
 		item?: Snippet<[{ item: SelectItem<T> }]>;
 		color?: PropColor;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		variant?: Exclude<PropVariant, 'solid'>;
 		highlight?: boolean;
 		placeholder?: string;
 	} & (