ui-svelte 0.2.11 → 0.2.12

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';
 		size?: 'sm' | 'md' | 'lg';
 	};
 	let {
@@ -26,12 +26,12 @@
 		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'
@@ -57,7 +57,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';
     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>;

package/dist/form/Slider.svelte

@@ -12,6 +12,7 @@
 		color?: 'primary' | 'secondary' | 'muted';
 		name?: string;
 		hideLabel?: boolean;
+		class?: string;
 	};
 	let {
 		value = $bindable(),
@@ -23,7 +24,8 @@
 		size = 'md',
 		color = 'primary',
 		name,
-		hideLabel
+		hideLabel,
+		class: className
 	}: Props = $props();
 
 	let progressPercentage = $derived(((value! - min) / (max - min)) * 100);
@@ -41,7 +43,7 @@
 	};
 </script>
 
-<div class="slider-wrapper">
+<div class={cn('slider-wrapper', className)}>
 	<div class="slider-info" hidden={hideLabel}>
 		<span>{label}</span>
 		<span>{value}</span>

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

@@ -9,6 +9,7 @@ type Props = {
     color?: 'primary' | 'secondary' | 'muted';
     name?: string;
     hideLabel?: boolean;
+    class?: string;
 };
 declare const Slider: import("svelte").Component<Props, {}, "value">;
 type Slider = ReturnType<typeof Slider>;

package/dist/form/TextField.svelte

@@ -17,7 +17,8 @@
 		endText?: string;
 		onchange?: (value: unknown) => void;
 		oninput?: (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;
 		label?: string;
@@ -29,7 +30,6 @@
 		max?: HTMLInputAttributes['max'];
 		maxlength?: HTMLInputAttributes['maxlength'];
 		isFloatLabel?: boolean;
-		isSolid?: boolean;
 	};
 
 	let {
@@ -48,6 +48,7 @@
 		onchange,
 		oninput,
 		variant = 'outlined',
+		color = 'muted',
 		size = 'md',
 		name,
 		label,
@@ -56,8 +57,7 @@
 		helpText,
 		errorText,
 		min,
-		max,
-		isSolid
+		max
 	}: Props = $props();
 
 	const uid = $props.id();
@@ -65,10 +65,19 @@
 	let isActive = $state(false);
 	let isFocused = $state(false);
 
-	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'
 	};
@@ -100,9 +109,9 @@
 	<label
 		class={cn(
 			'control',
-			variantClasses[variant],
+			colors[color],
+			variants[variant],
 			sizeClasses[size],
-			isSolid && 'is-solid',
 			isFloatLabel && 'is-float',
 			(isActive || isFocused) && 'is-active',
 			controlClass

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

@@ -14,7 +14,8 @@ type Props = {
     endText?: string;
     onchange?: (value: unknown) => void;
     oninput?: (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;
     label?: string;
@@ -26,7 +27,6 @@ type Props = {
     max?: HTMLInputAttributes['max'];
     maxlength?: HTMLInputAttributes['maxlength'];
     isFloatLabel?: boolean;
-    isSolid?: boolean;
 };
 declare const TextField: import("svelte").Component<Props, {}, "value" | "el">;
 type TextField = ReturnType<typeof TextField>;

package/dist/form/Textarea.svelte

@@ -11,7 +11,8 @@
 		controlClass?: string;
 		onchange?: (value: string) => void;
 		oninput?: (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;
 		label?: string;
@@ -22,7 +23,6 @@
 		rows?: number;
 		cols?: number;
 		isFloatLabel?: boolean;
-		isSolid?: boolean;
 		isResize?: boolean;
 	};
 
@@ -36,6 +36,7 @@
 		onchange,
 		oninput,
 		variant = 'outlined',
+		color = 'muted',
 		size = 'md',
 		name,
 		label,
@@ -46,7 +47,6 @@
 		maxlength,
 		rows = 4,
 		cols,
-		isSolid,
 		isResize = false
 	}: Props = $props();
 
@@ -55,10 +55,19 @@
 	let isActive = $state(false);
 	let isFocused = $state(false);
 
-	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'
 	};
@@ -83,9 +92,9 @@
 	<label
 		class={cn(
 			'textarea-control',
-			variantClasses[variant],
+			colors[color],
+			variants[variant],
 			sizeClasses[size],
-			isSolid && 'is-solid',
 			isFloatLabel && 'is-float',
 			(isActive || isFocused) && 'is-active',
 			controlClass

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

@@ -8,7 +8,8 @@ type Props = {
     controlClass?: string;
     onchange?: (value: string) => void;
     oninput?: (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;
     label?: string;
@@ -19,7 +20,6 @@ type Props = {
     rows?: number;
     cols?: number;
     isFloatLabel?: boolean;
-    isSolid?: boolean;
     isResize?: boolean;
 };
 declare const Textarea: import("svelte").Component<Props, {}, "value" | "el">;