ui-svelte 0.2.11 → 0.2.13

package/dist/form/Slider.svelte

@@ -9,9 +9,10 @@
 		onchange?: (value: number) => void;
 		size?: 'sm' | 'md' | 'lg';
 		label?: string;
-		color?: 'primary' | 'secondary' | 'muted';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 		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);
@@ -31,7 +33,11 @@
 	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		muted: 'is-muted'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger'
 	};
 
 	const sizes = {
@@ -41,7 +47,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

@@ -6,9 +6,10 @@ type Props = {
     onchange?: (value: number) => void;
     size?: 'sm' | 'md' | 'lg';
     label?: string;
-    color?: 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
     name?: string;
     hideLabel?: boolean;
+    class?: string;
 };
 declare const Slider: import("svelte").Component<Props, {}, "value">;
 type Slider = ReturnType<typeof Slider>;

package/dist/form/TextField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Icon, type IconData } from '../index.js';
 	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	type Props = {
@@ -13,11 +14,12 @@
 		controlClass?: string;
 		startIcon?: IconData;
 		endIcon?: IconData;
-		startText?: string;
-		endText?: string;
+		startText?: string | Snippet;
+		endText?: string | Snippet;
 		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 +31,6 @@
 		max?: HTMLInputAttributes['max'];
 		maxlength?: HTMLInputAttributes['maxlength'];
 		isFloatLabel?: boolean;
-		isSolid?: boolean;
 	};
 
 	let {
@@ -48,6 +49,7 @@
 		onchange,
 		oninput,
 		variant = 'outlined',
+		color = 'muted',
 		size = 'md',
 		name,
 		label,
@@ -56,8 +58,7 @@
 		helpText,
 		errorText,
 		min,
-		max,
-		isSolid
+		max
 	}: Props = $props();
 
 	const uid = $props.id();
@@ -65,10 +66,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 +110,9 @@
 	<label
 		class={cn(
 			'control',
-			variantClasses[variant],
+			colors[color],
+			variants[variant],
 			sizeClasses[size],
-			isSolid && 'is-solid',
 			isFloatLabel && 'is-float',
 			(isActive || isFocused) && 'is-active',
 			controlClass
@@ -128,7 +138,11 @@
 		{/if}
 
 		{#if startText}
-			<span class={textClasses}>{startText}</span>
+			{#if typeof startText === 'string'}
+				<span class={textClasses}>{startText}</span>
+			{:else}
+				{@render startText()}
+			{/if}
 		{/if}
 
 		<input
@@ -154,7 +168,11 @@
 		/>
 
 		{#if endText}
-			<span class={textClasses}>{endText}</span>
+			{#if typeof endText === 'string'}
+				<span class={textClasses}>{endText}</span>
+			{:else}
+				{@render endText()}
+			{/if}
 		{/if}
 
 		{#if endIcon}

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

@@ -1,4 +1,5 @@
 import { type IconData } from '../index.js';
+import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 type Props = {
     el?: HTMLInputElement;
@@ -10,11 +11,12 @@ type Props = {
     controlClass?: string;
     startIcon?: IconData;
     endIcon?: IconData;
-    startText?: string;
-    endText?: string;
+    startText?: string | Snippet;
+    endText?: string | Snippet;
     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 +28,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

@@ -11,7 +11,7 @@
 		labelLeft?: string;
 		labelRight?: string;
 		name?: string;
-		color?: 'primary' | 'secondary' | 'muted';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
 	};
 	let {
 		checked = $bindable(),
@@ -29,7 +29,11 @@
 	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'
 	};
 </script>
 
@@ -50,6 +54,6 @@
 		<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

@@ -8,7 +8,7 @@ type Props = {
     labelLeft?: string;
     labelRight?: string;
     name?: string;
-    color?: 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
 };
 declare const Toggle: import("svelte").Component<Props, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;

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;
+	}
+}