ui-svelte 0.2.11 → 0.2.13

package/dist/form/{PasswordStrength.svelte → PasswordField.svelte}

@@ -11,7 +11,8 @@
 		controlClass?: string;
 		onchange?: (value: string | number | undefined) => void;
 		oninput?: (value: string | number | undefined) => 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;
 		label?: string;
@@ -24,7 +25,7 @@
 			strong?: string;
 		};
 		isFloatLabel?: boolean;
-		isSolid?: boolean;
+		hideStrength?: boolean;
 	};
 
 	let {
@@ -36,6 +37,7 @@
 		onchange,
 		oninput,
 		variant = 'outlined',
+		color = 'muted',
 		size = 'md',
 		name,
 		label,
@@ -48,23 +50,45 @@
 			medium: 'Medium',
 			strong: 'Strong'
 		},
-		isSolid
+		hideStrength
 	}: 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'
 	};
 
+	const btnVariants = {
+		solid: 'solid',
+		soft: 'ghost',
+		outlined: 'ghost',
+		line: 'ghost'
+	};
+
 	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);
@@ -83,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;
 
@@ -93,17 +118,17 @@
 		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>
@@ -115,9 +140,9 @@
 	<label
 		class={cn(
 			'control',
-			variantClasses[variant],
+			colors[color],
+			variants[variant],
 			sizeClasses[size],
-			isSolid && 'is-solid',
 			isFloatLabel && 'is-float',
 			(isActive || isFocused) && 'is-active',
 			controlClass
@@ -154,25 +179,34 @@
 			onfocusout={() => (isFocused = false)}
 		/>
 		<IconButton
-			variant="ghost"
-			size="sm"
+			size={btnSizes[size] as any}
 			icon={show ? EyeShowRegularIcon : EyeOffRegularIcon}
+			{color}
+			variant={btnVariants[variant] as any}
 			onclick={() => (show = !show)}
 		/>
 	</label>
-	<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}
+	{#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}
+
 	{#if errorText || helpText}
 		<div class={cn('field-help', errorText && 'is-danger')}>
 			{errorText || helpText}

package/dist/form/{PasswordStrength.svelte.d.ts → PasswordField.svelte.d.ts}

@@ -6,7 +6,8 @@ type Props = {
     controlClass?: string;
     onchange?: (value: string | number | undefined) => void;
     oninput?: (value: string | number | undefined) => 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;
     label?: string;
@@ -19,8 +20,8 @@ type Props = {
         strong?: string;
     };
     isFloatLabel?: boolean;
-    isSolid?: boolean;
+    hideStrength?: boolean;
 };
-declare const PasswordStrength: import("svelte").Component<Props, {}, "value">;
-type PasswordStrength = ReturnType<typeof PasswordStrength>;
-export default PasswordStrength;
+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[]>([]);
@@ -359,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}
@@ -371,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)}
@@ -433,7 +445,7 @@
 	{/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}
@@ -459,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;

package/dist/form/RadioGroup.svelte

@@ -15,7 +15,7 @@
 		name?: string;
 		info?: string;
 		error?: string;
-		variant?: 'primary' | 'secondary' | 'muted';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
 		size?: 'sm' | 'md' | 'lg';
 	};
 	let {
@@ -26,15 +26,19 @@
 		name,
 		info,
 		error,
-		variant = 'primary',
+		color = 'primary',
 		size = 'md',
 		value = $bindable()
 	}: Props = $props();
 
-	const variantClases = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		muted: 'is-muted'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
 	};
 
 	const sizes = {
@@ -57,7 +61,7 @@
 					type="radio"
 					value={item.id}
 					bind:group={value}
-					class={cn('radio', variantClases[variant], sizes[size])}
+					class={cn('radio', colors[color], sizes[size])}
 				/>
 				<span class="label">{item.label}</span>
 			</label>

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

@@ -11,7 +11,7 @@ type Props = {
     name?: string;
     info?: string;
     error?: string;
-    variant?: 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
     size?: 'sm' | 'md' | 'lg';
 };
 declare const RadioGroup: import("svelte").Component<Props, {}, "value">;

package/dist/form/Select.svelte

@@ -17,7 +17,8 @@
 		selected?: Option;
 		placeholder?: string;
 		onchange?: (value: unknown) => 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;
 		rootClass?: string;
@@ -26,7 +27,6 @@
 		helpText?: string;
 		errorText?: string;
 		isFloatLabel?: boolean;
-		isSolid?: boolean;
 	};
 
 	let {
@@ -37,14 +37,14 @@
 		placeholder = 'Select an option',
 		onchange,
 		variant = 'outlined',
+		color = 'muted',
 		size = 'md',
 		name,
 		label,
 		isLabelActive,
 		helpText,
 		errorText,
-		isFloatLabel,
-		isSolid
+		isFloatLabel
 	}: Props = $props();
 
 	let isOpen = $state(false);
@@ -68,22 +68,23 @@
 		`top: ${position.top}px; left: ${position.left}px; width: ${position.width}px; transform-origin: ${position.isBottomHalf ? 'bottom' : 'top'} center;`
 	);
 
-	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'
 	};
 
-	const itemVariants = {
-		primary: 'primary',
-		secondary: 'secondary',
-		muted: 'muted',
-		outlined: 'primary',
-		line: 'primary'
-	} as const;
-
 	const sizeClasses = {
 		sm: 'is-sm',
 		md: 'is-md',
@@ -252,7 +253,7 @@
 	};
 
 	onMount(() => {
-		if (value && !selected) {
+		if (value !== undefined && !selected) {
 			selected = options.find((opt) => opt.id === value);
 		} else if (selected) {
 			value = selected.id;
@@ -262,7 +263,7 @@
 	});
 
 	$effect(() => {
-		if (!value) {
+		if (value === undefined) {
 			selected = undefined;
 		}
 	});
@@ -280,10 +281,10 @@
 		bind:this={controlElement}
 		class={cn(
 			'control',
-			variantClasses[variant],
+			colors[color],
+			variants[variant],
 			sizeClasses[size],
 			isFloatLabel && 'is-float',
-			isSolid && 'is-solid',
 			(isActive || isFocused) && 'is-active'
 		)}
 		class:is-error={errorText}
@@ -295,7 +296,7 @@
 			<span
 				class={cn(
 					'control-label',
-					(isActive || isFocused || isLabelActive || isOpen || value !== '') && 'is-active'
+					(isActive || isFocused || isLabelActive || isOpen || value !== undefined) && 'is-active'
 				)}
 			>
 				{label}
@@ -334,12 +335,12 @@
 					<Item
 						label={item.label}
 						src={item.src}
+						{color}
 						description={item.description}
 						id={item.id}
 						onclick={() => handleSelect(item)}
 						isActive={value === item.id}
 						isFocused={focusedIndex === index}
-						variant={itemVariants[variant]}
 						size="sm"
 						isCompact
 					/>

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

@@ -10,7 +10,8 @@ type Props = {
     selected?: Option;
     placeholder?: string;
     onchange?: (value: unknown) => 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;
     rootClass?: string;
@@ -19,7 +20,6 @@ type Props = {
     helpText?: string;
     errorText?: string;
     isFloatLabel?: boolean;
-    isSolid?: boolean;
 };
 declare const Select: import("svelte").Component<Props, {}, "selected" | "value">;
 type Select = ReturnType<typeof Select>;