ui-svelte 0.2.10 → 0.2.12

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">;

package/dist/form/Toggle.svelte

@@ -8,6 +8,8 @@
 		disabled?: boolean;
 		class?: string;
 		label?: string;
+		labelLeft?: string;
+		labelRight?: string;
 		name?: string;
 		color?: 'primary' | 'secondary' | 'muted';
 	};
@@ -18,6 +20,8 @@
 		disabled = false,
 		class: className,
 		label,
+		labelLeft,
+		labelRight,
 		name,
 		color = 'primary'
 	}: Props = $props();
@@ -30,6 +34,9 @@
 </script>
 
 <label class={cn('toggle', className)}>
+	{#if labelLeft}
+		<span class={cn('toggle-label-left', !checked && 'is-active')}>{labelLeft}</span>
+	{/if}
 	<input
 		type="checkbox"
 		class={cn('toggle-input', colors[color])}
@@ -39,7 +46,10 @@
 		{disabled}
 		onchange={() => onchange && onchange(checked!)}
 	/>
+	{#if labelRight}
+		<span class={cn('toggle-label-right', checked && 'is-active')}>{labelRight}</span>
+	{/if}
 	{#if label}
-		<span class="label">{label}</span>
+		<span class="label-md">{label}</span>
 	{/if}
 </label>

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

@@ -5,6 +5,8 @@ type Props = {
     disabled?: boolean;
     class?: string;
     label?: string;
+    labelLeft?: string;
+    labelRight?: string;
     name?: string;
     color?: 'primary' | 'secondary' | 'muted';
 };

package/dist/form/css/checkbox.css

@@ -1,11 +1,15 @@
 @layer components {
 	.checkbox {
-		@apply flex justify-start items-center w-fit gap-2 cursor-pointer;
+		@apply relative flex justify-start items-center w-fit gap-2 cursor-pointer flex-nowrap;
 
 		.checkbox-input {
 			@apply relative appearance-none min-w-5 w-5 h-5 border-2 border-muted rounded-lg;
 			@apply focus:outline-none;
-			@apply transition-all duration-200 ease-in-out;
+			@apply transition-all duration-300 ease-in-out;
+
+			&.is-muted {
+				@apply border-on-muted;
+			}
 
 			&::after {
 				content: '';
@@ -36,6 +40,18 @@
 			&.is-muted {
 				@apply bg-on-muted border-on-muted;
 			}
+			&.is-success {
+				@apply bg-success border-success;
+			}
+			&.is-info {
+				@apply bg-info border-info;
+			}
+			&.is-warning {
+				@apply bg-warning border-warning;
+			}
+			&.is-danger {
+				@apply bg-danger border-danger;
+			}
 
 			&::after {
 				transform: translate(-50%, -50%) scale(1);

package/dist/form/css/color-field.css

@@ -0,0 +1,141 @@
+@layer components {
+	.color-field-swatch {
+		@apply size-6 rounded shrink-0;
+		@apply inset-ring inset-ring-muted/30;
+	}
+
+	.color-field-swatch.is-sm {
+		@apply size-5;
+	}
+
+	.color-field-swatch.is-lg {
+		@apply size-8;
+	}
+
+	.color-field-value {
+		@apply flex-1 text-left font-mono text-sm uppercase truncate;
+	}
+
+	.color-picker-popover {
+		@apply flex flex-col gap-4 p-4 w-80 my-1;
+		@apply bg-background text-on-background rounded-box;
+		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
+		@apply shadow shadow-muted;
+		position: fixed;
+		z-index: 9999;
+
+		&.is-active {
+			@apply visible opacity-100;
+		}
+	}
+
+	.color-picker-canvas-wrapper {
+		@apply relative w-full h-36 rounded-ui overflow-hidden cursor-crosshair;
+	}
+
+	.color-picker-canvas {
+		@apply absolute inset-0 w-full h-full;
+	}
+
+	.color-picker-cursor {
+		@apply absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full;
+		@apply border-2 border-white shadow-md pointer-events-none;
+	}
+
+	.color-picker-slider-wrapper {
+		@apply flex flex-col gap-3;
+	}
+
+	.color-picker-slider {
+		@apply relative w-full h-4 rounded-full cursor-pointer;
+	}
+
+	.color-picker-hue {
+		background: linear-gradient(
+			to right,
+			hsl(0, 100%, 50%),
+			hsl(60, 100%, 50%),
+			hsl(120, 100%, 50%),
+			hsl(180, 100%, 50%),
+			hsl(240, 100%, 50%),
+			hsl(300, 100%, 50%),
+			hsl(360, 100%, 50%)
+		);
+	}
+
+	.color-picker-alpha {
+		background-image:
+			linear-gradient(45deg, #ccc 25%, transparent 25%),
+			linear-gradient(-45deg, #ccc 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, #ccc 75%),
+			linear-gradient(-45deg, transparent 75%, #ccc 75%);
+		background-size: 8px 8px;
+		background-position:
+			0 0,
+			0 4px,
+			4px -4px,
+			-4px 0px;
+	}
+
+	.color-picker-alpha-overlay {
+		@apply absolute inset-0 rounded-full;
+	}
+
+	.color-picker-slider-thumb {
+		@apply absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-5;
+		@apply bg-white rounded-full shadow-md border border-muted/30;
+		@apply pointer-events-none;
+	}
+
+	.color-picker-values {
+		@apply flex flex-col gap-2;
+	}
+
+	.color-picker-value-row {
+		@apply flex items-center gap-2;
+	}
+
+	.color-picker-value-label {
+		@apply text-xs font-semibold uppercase w-12 text-on-muted;
+	}
+
+	.color-picker-value-code {
+		@apply flex-1 font-mono text-xs px-2 py-1 rounded-ui bg-muted truncate;
+	}
+
+	.color-picker-preview {
+		@apply flex items-center gap-3;
+	}
+
+	.color-picker-preview-swatch {
+		@apply size-12 rounded-ui shrink-0;
+		@apply inset-ring inset-ring-muted/30;
+		background-image:
+			linear-gradient(45deg, #ccc 25%, transparent 25%),
+			linear-gradient(-45deg, #ccc 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, #ccc 75%),
+			linear-gradient(-45deg, transparent 75%, #ccc 75%);
+		background-size: 8px 8px;
+		background-position:
+			0 0,
+			0 4px,
+			4px -4px,
+			-4px 0px;
+	}
+
+	.color-picker-preview-color {
+		@apply absolute inset-0 rounded-ui;
+	}
+
+	.color-picker-preview-info {
+		@apply flex flex-col gap-1 flex-1 min-w-0;
+	}
+
+	.color-picker-preview-hex {
+		@apply font-mono text-base font-semibold uppercase;
+	}
+
+	.color-picker-preview-foreground {
+		@apply text-xs text-on-muted truncate;
+	}
+}