ui-svelte 0.2.10 → 0.2.12

package/dist/form/PasswordField.svelte

@@ -1,25 +1,22 @@
 <script lang="ts">
-	import Button from '../control/Button.svelte';
-	import { Icon } from '../index.js';
+	import IconButton from '../control/IconButton.svelte';
+	import { EyeOffRegularIcon, EyeShowRegularIcon } from '../icons/index.js';
 	import { cn } from '../utils/class-names.js';
-	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	type Props = {
 		value?: string;
 		defaultValue?: string;
 		placeholder?: string;
-		type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
-		class?: string;
-		inputClass?: string;
+		rootClass?: string;
+		controlClass?: string;
 		onchange?: (value: string | number | undefined) => void;
 		oninput?: (value: string | number | undefined) => void;
-		variant?: 'solid' | 'outlined' | 'soft' | 'line';
-		color?: 'primary' | 'secondary' | 'muted';
-		inputSize?: 'small' | 'medium' | 'large';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft' | 'outlined' | 'line';
+		size?: 'sm' | 'md' | 'lg';
 		name?: string;
 		label?: string;
-		labelOutside?: boolean;
-		labelActive?: boolean;
+		islabelActive?: boolean;
 		helpText?: string;
 		errorText?: string;
 		labels?: {
@@ -27,24 +24,25 @@
 			medium?: string;
 			strong?: string;
 		};
-	} & HTMLInputAttributes;
+		isFloatLabel?: boolean;
+		hideStrength?: boolean;
+	};
 
 	let {
 		value = $bindable(),
 		defaultValue,
 		placeholder,
-		type = 'text',
-		class: className,
-		inputClass,
+		rootClass,
+		controlClass,
 		onchange,
 		oninput,
-		variant = 'soft',
-		color = 'primary',
-		inputSize = 'medium',
+		variant = 'outlined',
+		color = 'muted',
+		size = 'md',
 		name,
 		label,
-		labelOutside,
-		labelActive,
+		isFloatLabel,
+		islabelActive,
 		helpText,
 		errorText,
 		labels = {
@@ -52,32 +50,52 @@
 			medium: 'Medium',
 			strong: 'Strong'
 		},
-		...rest
+		hideStrength
 	}: Props = $props();
 
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
 	const variants = {
-		solid: 'field-solid',
-		outlined: 'field-outlined',
-		soft: 'field-soft',
-		line: 'field-line'
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined',
+		line: 'is-line'
 	};
-	const colors = {
-		primary: 'field-primary',
-		secondary: 'field-secondary',
-		muted: 'field-muted'
+
+	const btnVariants = {
+		solid: 'solid',
+		soft: 'ghost',
+		outlined: 'ghost',
+		line: 'ghost'
 	};
 
-	const sizes = {
-		small: 'field-small',
-		medium: 'field-medium',
-		large: 'field-large'
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	const btnSizes = {
+		sm: 'xs',
+		md: 'sm',
+		lg: 'md'
 	};
 
 	const uid = $props.id();
 
+	let isActive = $state(false);
+
 	let show = $state(false);
 	let isFocused = $state(false);
-	let strength = $derived(calculateStrength(value));
+	let strength = $derived(calculateStrength(value as string));
 
 	function isBarActive(barIndex: number, score: number): boolean {
 		const threshold = (barIndex + 1) * 1.5;
@@ -89,7 +107,8 @@
 		label: string;
 		color: string;
 	} {
-		if (!password) return { score: 0, label: '', color: 'bg-gray-300' };
+		if (hideStrength) return { score: 0, label: '', color: 'bg-muted' };
+		if (!password) return { score: 0, label: '', color: 'bg-muted' };
 
 		let score = 0;
 
@@ -99,72 +118,98 @@
 		if (/[A-Z]/.test(password)) score += 1;
 		if (/\d/.test(password)) score += 1;
 		if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) score += 1;
-		if (score <= 2) return { score, label: labels.weak || 'Weak', color: 'bg-red-500' };
+		if (score <= 2) return { score, label: labels.weak || 'Weak', color: 'bg-danger' };
 		if (score <= 4)
 			return {
 				score,
 				label: labels.medium || 'Medium',
-				color: 'bg-yellow-500'
+				color: 'bg-warning'
 			};
 		return {
 			score,
 			label: labels.strong || 'Strong',
-			color: 'bg-green-500'
+			color: 'bg-success'
 		};
 	}
 </script>
 
-<div class={cn('field', className)}>
-	{#if labelOutside && label}
-		<label for={`${uid}-{name}`} class="label">{label}</label>
+<div class={cn('field', rootClass)}>
+	{#if !isFloatLabel && label}
+		<span class="field-label">{label}</span>
 	{/if}
-	<div
-		class={cn('field-control', variants[variant], colors[color], sizes[inputSize])}
+	<label
+		class={cn(
+			'control',
+			colors[color],
+			variants[variant],
+			sizeClasses[size],
+			isFloatLabel && 'is-float',
+			(isActive || isFocused) && 'is-active',
+			controlClass
+		)}
+		for={`${uid}-{name}`}
 		class:is-error={errorText}
+		onmouseenter={() => (isActive = true)}
+		onmouseleave={() => (isActive = false)}
 	>
-		{#if !labelOutside && label}
-			<label class:is-active={isFocused || value} for={`${uid}-{name}`} class="label-inside"
-				>{label}</label
+		{#if isFloatLabel && label}
+			<span
+				class={cn(
+					'control-label',
+					(isActive || isFocused || islabelActive || value !== '') && 'is-active'
+				)}
 			>
+				{label}
+			</span>
 		{/if}
 		<input
 			type={show ? 'text' : 'password'}
 			bind:value
 			id={`${uid}-{name}`}
-			class={cn('field-input', inputClass)}
-			placeholder={isFocused ? placeholder : ''}
+			class={cn(
+				'control-input',
+				isFloatLabel && !isActive && !isFocused && value == '' && 'invisible',
+				controlClass
+			)}
+			{placeholder}
 			{name}
-			{defaultValue}
 			onchange={(e) => onchange?.((e.target as HTMLInputElement).value)}
 			oninput={(e) => oninput?.((e.target as HTMLInputElement).value)}
-			onfocusin={() => {
-				if (!labelActive) isFocused = true;
-			}}
-			onfocusout={() => {
-				if (!labelActive) isFocused = false;
-			}}
-			{...rest}
+			onfocusin={() => (isFocused = true)}
+			onfocusout={() => (isFocused = false)}
 		/>
-		<Button class={cn('field-eye')} onclick={() => (show = !show)}>eye icon</Button>
-	</div>
-	<div class={cn('field-strength', className)}>
-		<div class="field-strength-bars">
-			{#each Array(4) as _, i}
-				<div
-					class="field-strength-bar-item"
-					class:active={isBarActive(i, strength.score)}
-					class:weak={strength.score <= 2 && isBarActive(i, strength.score)}
-					class:medium={strength.score > 2 && strength.score <= 4 && isBarActive(i, strength.score)}
-					class:strong={strength.score > 4 && isBarActive(i, strength.score)}
-				></div>
-			{/each}
+		<IconButton
+			size={btnSizes[size] as any}
+			icon={show ? EyeShowRegularIcon : EyeOffRegularIcon}
+			{color}
+			variant={btnVariants[variant] as any}
+			onclick={() => (show = !show)}
+		/>
+	</label>
+	{#if !hideStrength}
+		<div class={cn('field-strength')}>
+			<div class="field-strength-bars">
+				{#each Array(4) as _, i}
+					<div
+						class="field-strength-bar-item"
+						class:active={isBarActive(i, strength.score)}
+						class:weak={strength.score <= 2 && isBarActive(i, strength.score)}
+						class:medium={strength.score > 2 &&
+							strength.score <= 4 &&
+							isBarActive(i, strength.score)}
+						class:strong={strength.score > 4 && isBarActive(i, strength.score)}
+					></div>
+				{/each}
+			</div>
+			{#if strength.label}
+				<span class="field-strength-label">{strength.label}</span>
+			{/if}
 		</div>
-	</div>
-	{#if errorText || helpText || strength.label}
-		<div
-			class={cn('field-help', strength.label && 'field-strength-label', errorText && 'is-error')}
-		>
-			{strength.label ? strength.label : errorText ? errorText : helpText}
+	{/if}
+
+	{#if errorText || helpText}
+		<div class={cn('field-help', errorText && 'is-danger')}>
+			{errorText || helpText}
 		</div>
 	{/if}
 </div>

package/dist/form/PasswordField.svelte.d.ts

@@ -1,20 +1,17 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
 type Props = {
     value?: string;
     defaultValue?: string;
     placeholder?: string;
-    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
-    class?: string;
-    inputClass?: string;
+    rootClass?: string;
+    controlClass?: string;
     onchange?: (value: string | number | undefined) => void;
     oninput?: (value: string | number | undefined) => void;
-    variant?: 'solid' | 'outlined' | 'soft' | 'line';
-    color?: 'primary' | 'secondary' | 'muted';
-    inputSize?: 'small' | 'medium' | 'large';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft' | 'outlined' | 'line';
+    size?: 'sm' | 'md' | 'lg';
     name?: string;
     label?: string;
-    labelOutside?: boolean;
-    labelActive?: boolean;
+    islabelActive?: boolean;
     helpText?: string;
     errorText?: string;
     labels?: {
@@ -22,7 +19,9 @@ type Props = {
         medium?: string;
         strong?: string;
     };
-} & HTMLInputAttributes;
+    isFloatLabel?: boolean;
+    hideStrength?: boolean;
+};
 declare const PasswordField: import("svelte").Component<Props, {}, "value">;
 type PasswordField = ReturnType<typeof PasswordField>;
 export default PasswordField;

package/dist/form/PhoneField.svelte

@@ -12,17 +12,18 @@
 		dialCode?: string;
 		placeholder?: string;
 		onchange?: (value: string) => void;
-		variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft' | 'outlined' | 'line';
 		size?: 'sm' | 'md' | 'lg';
 		name?: string;
 		dialCodeName?: string;
-		class?: string;
+		rootClass?: string;
+		controlClass?: string;
 		label?: string;
 		isLabelActive?: boolean;
 		helpText?: string;
 		errorText?: string;
 		isFloatLabel?: boolean;
-		isSolid?: boolean;
 		priorityCountries?: string[];
 		searchPlaceholder?: string;
 		emptyText?: string;
@@ -30,13 +31,15 @@
 	};
 
 	let {
-		class: className,
+		rootClass,
+		controlClass,
 		value = $bindable(''),
 		countryCode = $bindable(''),
 		dialCode = $bindable(''),
 		placeholder = 'Enter phone number',
 		onchange,
 		variant = 'outlined',
+		color = 'muted',
 		size = 'md',
 		name,
 		dialCodeName = 'dialCode',
@@ -45,17 +48,25 @@
 		helpText,
 		errorText,
 		isFloatLabel,
-		isSolid,
 		priorityCountries = [],
 		searchPlaceholder = 'Search country...',
 		emptyText = 'No countries found',
 		loadingText = 'Loading...'
 	}: Props = $props();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
 		outlined: 'is-outlined',
 		line: 'is-line'
 	};
@@ -66,11 +77,11 @@
 		lg: 'is-lg'
 	};
 
-	const avatarSizes = {
+	const avatarSizes: any = {
 		sm: 'xs',
 		md: 'sm',
 		lg: 'md'
-	} as const;
+	};
 
 	let displayedCountries = $state<Country[]>([]);
 	let allSortedCountries = $state<Country[]>([]);
@@ -84,6 +95,7 @@
 	let contentEl = $state<HTMLElement>();
 	let optionsEl = $state<HTMLElement>();
 	let phoneInputEl = $state<HTMLInputElement>();
+	let searchInputEl = $state<HTMLInputElement>();
 	let focusedIndex = $state(-1);
 	let searchTerm = $state('');
 	let searchTimeout: ReturnType<typeof setTimeout> | null = $state(null);
@@ -284,6 +296,10 @@
 			await tick();
 			await updatePosition();
 			isOpen = true;
+			await tick();
+			setTimeout(() => {
+				searchInputEl?.focus();
+			}, 100);
 		} else {
 			stopEventListeners();
 			focusedIndex = -1;
@@ -354,7 +370,7 @@
 	});
 </script>
 
-<div class={cn('field', className)}>
+<div class={cn('field', rootClass)}>
 	<input type="hidden" name={dialCodeName} bind:value={dialCode} />
 
 	{#if !isFloatLabel && label}
@@ -366,11 +382,12 @@
 		bind:this={controlElement}
 		class={cn(
 			'control',
-			variantClasses[variant],
+			colors[color],
+			variants[variant],
 			sizeClasses[size],
 			isFloatLabel && 'is-float',
-			isSolid && 'is-solid',
-			(isActive || isFocused || isOpen) && 'is-active'
+			(isActive || isFocused || isOpen) && 'is-active',
+			controlClass
 		)}
 		class:is-error={errorText}
 		onmouseenter={() => (isActive = true)}
@@ -401,7 +418,7 @@
 				/>
 				<span class="phone-dial-code">+{dialCode}</span>
 			{:else}
-				<Avatar name="Select country" {size} variant="transparent" />
+				<Icon icon={countryFlagsIcons[`country-flags:xx`] as IconData} class="h-5 w-5" />
 				<span class="phone-dial-code">+--</span>
 			{/if}
 			<Icon icon={ChevronDown24RegularIcon} class={cn('control-arrow', isOpen && 'is-active')} />
@@ -409,7 +426,7 @@
 
 		<input
 			bind:this={phoneInputEl}
-			type="tel"
+			type="number"
 			{name}
 			bind:value
 			class={cn(
@@ -428,9 +445,10 @@
 	{/if}
 
 	<div class:is-active={isOpen} class="combo-box-popover" bind:this={contentEl} {style}>
-		<div class={cn('combo-box-search', variantClasses[variant])}>
+		<div class={cn('combo-box-search', variants[variant])}>
 			<Icon icon={Search24RegularIcon} class="combo-box-search-icon" />
 			<input
+				bind:this={searchInputEl}
 				type="text"
 				class="combo-box-search-input"
 				placeholder={searchPlaceholder}
@@ -453,7 +471,7 @@
 							onclick={() => handleSelect(item)}
 							isActive={countryCode === item.id}
 							isFocused={focusedIndex === index}
-							variant="primary"
+							{color}
 							size="sm"
 							isCompact
 						/>

package/dist/form/PhoneField.svelte.d.ts

@@ -4,17 +4,18 @@ type Props = {
     dialCode?: string;
     placeholder?: string;
     onchange?: (value: string) => void;
-    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft' | 'outlined' | 'line';
     size?: 'sm' | 'md' | 'lg';
     name?: string;
     dialCodeName?: string;
-    class?: string;
+    rootClass?: string;
+    controlClass?: string;
     label?: string;
     isLabelActive?: boolean;
     helpText?: string;
     errorText?: string;
     isFloatLabel?: boolean;
-    isSolid?: boolean;
     priorityCountries?: string[];
     searchPlaceholder?: string;
     emptyText?: string;

package/dist/form/PinField.svelte

@@ -5,9 +5,9 @@
 		length?: number;
 		values?: string[];
 		class?: string;
-		variant?: 'solid' | 'outlined' | 'soft' | 'line';
-		color?: 'primary' | 'secondary' | 'muted';
-		inputSize?: 'small' | 'medium' | 'large';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft' | 'outlined' | 'line';
+		size?: 'sm' | 'md' | 'lg';
 		type?: 'text' | 'password' | 'number';
 		name?: string;
 		label?: string;
@@ -18,35 +18,41 @@
 
 	let {
 		class: className,
-		variant = 'soft',
-		color = 'primary',
-		inputSize = 'medium',
+		variant = 'outlined',
+		color = 'muted',
+		size = 'md',
 		label,
 		name,
 		type = 'text',
 		helpText,
 		errorText,
 		length = 6,
+		// svelte-ignore state_referenced_locally
 		values = Array.from({ length }).map(() => ''),
 		oncomplete
 	}: Props = $props();
 
-	const variants = {
-		solid: 'field-solid',
-		outlined: 'field-outlined',
-		soft: 'field-soft',
-		line: 'field-line'
-	};
 	const colors = {
-		primary: 'field-primary',
-		secondary: 'field-secondary',
-		muted: 'field-muted'
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined',
+		line: 'is-line'
 	};
 
-	const sizes = {
-		small: 'field-small',
-		medium: 'field-medium',
-		large: 'field-large'
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
 	};
 
 	const uid = $props.id();
@@ -63,7 +69,7 @@
 		values = [...values];
 
 		if (index < length - 1 && target.value) {
-			const nextInput = document.getElementById(`input-${index + 1}`) as HTMLInputElement;
+			const nextInput = document.getElementById(`${uid}-${name}-${index + 1}`) as HTMLInputElement;
 			if (nextInput) {
 				nextInput.focus();
 			}
@@ -72,7 +78,7 @@
 
 	const handleKeydown = (event: KeyboardEvent, index: number) => {
 		if (event.key === 'Backspace' && index > 0 && !values[index]) {
-			const prevInput = document.getElementById(`input-${index - 1}`) as HTMLInputElement;
+			const prevInput = document.getElementById(`${uid}-${name}-${index - 1}`) as HTMLInputElement;
 			if (prevInput) {
 				prevInput.focus();
 			}
@@ -87,7 +93,7 @@
 		let lastUpdatedIndex = 0;
 		pasteValues.forEach((char, i) => {
 			values[i] = char;
-			const input = document.getElementById(`input-${i}`) as HTMLInputElement;
+			const input = document.getElementById(`${uid}-${name}-${i}`) as HTMLInputElement;
 			if (input) {
 				input.value = char;
 			}
@@ -95,7 +101,9 @@
 		});
 		values = [...values];
 
-		const lastInput = document.getElementById(`input-${lastUpdatedIndex}`) as HTMLInputElement;
+		const lastInput = document.getElementById(
+			`${uid}-${name}-${lastUpdatedIndex}`
+		) as HTMLInputElement;
 		if (lastInput) {
 			lastInput.focus();
 		}
@@ -112,25 +120,25 @@
 <div class={cn('field', className)}>
 	<input type="hidden" {name} value={values.join('')} />
 	{#if label}
-		<label for={`${uid}-{name}`} class="label">{label}</label>
+		<span class="field-label">{label}</span>
 	{/if}
-	<div class="pin-wrapper">
+	<div class="field-pin-wrapper">
 		{#each Array.from({ length }) as _, i}
-			<div
-				class={cn('field-control', variants[variant], colors[color], sizes[inputSize])}
-				class:is-error={errorText}
+			<label
+				class={cn('control', colors[color], variants[variant], sizeClasses[size])}
+				for={`${uid}-${name}-${i}`}
 			>
 				<input
 					{type}
-					id={`input-${i}`}
-					class="field-pin"
+					id={`${uid}-${name}-${i}`}
+					class="control-pin"
 					maxlength="1"
 					oninput={(e) => handleInput(e, i)}
 					onkeydown={(e) => handleKeydown(e, i)}
 					onpaste={handlePaste}
 					bind:value={values[i]}
 				/>
-			</div>
+			</label>
 		{/each}
 	</div>
 	{#if errorText || helpText}

package/dist/form/PinField.svelte.d.ts

@@ -2,9 +2,9 @@ type Props = {
     length?: number;
     values?: string[];
     class?: string;
-    variant?: 'solid' | 'outlined' | 'soft' | 'line';
-    color?: 'primary' | 'secondary' | 'muted';
-    inputSize?: 'small' | 'medium' | 'large';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft' | 'outlined' | 'line';
+    size?: 'sm' | 'md' | 'lg';
     type?: 'text' | 'password' | 'number';
     name?: string;
     label?: string;