ui-svelte 0.2.12 → 0.2.14

package/dist/form/ImageCropper.svelte

@@ -95,6 +95,8 @@
 	let imageHeight = $state(0);
 	let scale = $state(1);
 
+	let isTouchDevice = $state(false);
+
 	const sizeClasses = {
 		xs: 'is-xs',
 		sm: 'is-sm',
@@ -250,6 +252,114 @@
 		document.removeEventListener('mouseup', handleMouseUp);
 	}
 
+	function handleTouchStart(e: TouchEvent, handle?: string) {
+		e.preventDefault();
+		e.stopPropagation();
+
+		const touch = e.touches[0];
+
+		if (handle) {
+			isResizing = true;
+			resizeHandle = handle;
+		} else {
+			isCropDragging = true;
+		}
+
+		startX = touch.clientX;
+		startY = touch.clientY;
+		startCropX = cropX;
+		startCropY = cropY;
+		startCropWidth = cropWidth;
+		startCropHeight = cropHeight;
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!isCropDragging && !isResizing) return;
+
+		e.preventDefault();
+		const touch = e.touches[0];
+		const deltaX = touch.clientX - startX;
+		const deltaY = touch.clientY - startY;
+
+		if (isCropDragging) {
+			cropX = Math.max(0, Math.min(imageWidth - cropWidth, startCropX + deltaX));
+			cropY = Math.max(0, Math.min(imageHeight - cropHeight, startCropY + deltaY));
+		} else if (isResizing) {
+			let newWidth = startCropWidth;
+			let newHeight = startCropHeight;
+			let newX = startCropX;
+			let newY = startCropY;
+
+			if (resizeHandle.includes('e')) {
+				newWidth = Math.max(minWidth, Math.min(imageWidth - startCropX, startCropWidth + deltaX));
+			}
+			if (resizeHandle.includes('w')) {
+				newWidth = Math.max(minWidth, startCropWidth - deltaX);
+				newX = startCropX + (startCropWidth - newWidth);
+			}
+			if (resizeHandle.includes('s')) {
+				newHeight = Math.max(
+					minHeight,
+					Math.min(imageHeight - startCropY, startCropHeight + deltaY)
+				);
+			}
+			if (resizeHandle.includes('n')) {
+				newHeight = Math.max(minHeight, startCropHeight - deltaY);
+				newY = startCropY + (startCropHeight - newHeight);
+			}
+
+			if (aspectRatio) {
+				if (resizeHandle.includes('e') || resizeHandle.includes('w')) {
+					newHeight = newWidth / aspectRatio;
+				} else {
+					newWidth = newHeight * aspectRatio;
+				}
+			}
+
+			if (maxWidth) newWidth = Math.min(newWidth, maxWidth);
+			if (maxHeight) newHeight = Math.min(newHeight, maxHeight);
+
+			cropWidth = newWidth;
+			cropHeight = newHeight;
+			cropX = Math.max(0, Math.min(imageWidth - cropWidth, newX));
+			cropY = Math.max(0, Math.min(imageHeight - cropHeight, newY));
+		}
+	}
+
+	function handleTouchEnd() {
+		isCropDragging = false;
+		isResizing = false;
+		resizeHandle = '';
+	}
+
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+		const onGlobalTouchMove = (e: TouchEvent) => {
+			if (isCropDragging || isResizing) {
+				handleTouchMove(e);
+			}
+		};
+
+		const onGlobalTouchEnd = () => {
+			if (isCropDragging || isResizing) {
+				handleTouchEnd();
+			}
+		};
+
+		document.addEventListener('touchmove', onGlobalTouchMove, { passive: false });
+		document.addEventListener('touchend', onGlobalTouchEnd);
+		document.addEventListener('touchcancel', onGlobalTouchEnd);
+
+		return () => {
+			document.removeEventListener('touchmove', onGlobalTouchMove);
+			document.removeEventListener('touchend', onGlobalTouchEnd);
+			document.removeEventListener('touchcancel', onGlobalTouchEnd);
+		};
+	});
+
 	function handleCrop() {
 		if (!canvas || !image) return;
 
@@ -422,6 +532,7 @@
 						class:is-circle={shape === 'circle'}
 						style="left: {cropX}px; top: {cropY}px; width: {cropWidth}px; height: {cropHeight}px;"
 						onmousedown={(e) => handleMouseDown(e)}
+						ontouchstart={(e) => handleTouchStart(e)}
 					>
 						<div class="crop-grid">
 							<div class="grid-line grid-line-v" style="left: 33.33%;"></div>
@@ -433,23 +544,43 @@
 						<div
 							class="resize-handle handle-nw"
 							onmousedown={(e) => handleMouseDown(e, 'nw')}
+							ontouchstart={(e) => handleTouchStart(e, 'nw')}
+						></div>
+						<div
+							class="resize-handle handle-n"
+							onmousedown={(e) => handleMouseDown(e, 'n')}
+							ontouchstart={(e) => handleTouchStart(e, 'n')}
 						></div>
-						<div class="resize-handle handle-n" onmousedown={(e) => handleMouseDown(e, 'n')}></div>
 						<div
 							class="resize-handle handle-ne"
 							onmousedown={(e) => handleMouseDown(e, 'ne')}
+							ontouchstart={(e) => handleTouchStart(e, 'ne')}
+						></div>
+						<div
+							class="resize-handle handle-e"
+							onmousedown={(e) => handleMouseDown(e, 'e')}
+							ontouchstart={(e) => handleTouchStart(e, 'e')}
 						></div>
-						<div class="resize-handle handle-e" onmousedown={(e) => handleMouseDown(e, 'e')}></div>
 						<div
 							class="resize-handle handle-se"
 							onmousedown={(e) => handleMouseDown(e, 'se')}
+							ontouchstart={(e) => handleTouchStart(e, 'se')}
+						></div>
+						<div
+							class="resize-handle handle-s"
+							onmousedown={(e) => handleMouseDown(e, 's')}
+							ontouchstart={(e) => handleTouchStart(e, 's')}
 						></div>
-						<div class="resize-handle handle-s" onmousedown={(e) => handleMouseDown(e, 's')}></div>
 						<div
 							class="resize-handle handle-sw"
 							onmousedown={(e) => handleMouseDown(e, 'sw')}
+							ontouchstart={(e) => handleTouchStart(e, 'sw')}
+						></div>
+						<div
+							class="resize-handle handle-w"
+							onmousedown={(e) => handleMouseDown(e, 'w')}
+							ontouchstart={(e) => handleTouchStart(e, 'w')}
 						></div>
-						<div class="resize-handle handle-w" onmousedown={(e) => handleMouseDown(e, 'w')}></div>
 					</div>
 				</div>
 			{/if}

package/dist/form/RadioGroup.svelte

@@ -15,7 +15,7 @@
 		name?: string;
 		info?: string;
 		error?: string;
-		color?: 'primary' | 'secondary' | 'muted';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
 		size?: 'sm' | 'md' | 'lg';
 	};
 	let {
@@ -34,7 +34,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'
 	};
 
 	const sizes = {

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

@@ -11,7 +11,7 @@ type Props = {
     name?: string;
     info?: string;
     error?: string;
-    color?: '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/Slider.svelte

@@ -9,7 +9,7 @@
 		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;
@@ -33,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 = {

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

@@ -6,7 +6,7 @@ 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;

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,8 +14,8 @@
 		controlClass?: string;
 		startIcon?: IconData;
 		endIcon?: IconData;
-		startText?: string;
-		endText?: string;
+		startText?: string | Snippet;
+		endText?: string | Snippet;
 		onchange?: (value: unknown) => void;
 		oninput?: (value: unknown) => void;
 		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
@@ -137,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
@@ -163,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,8 +11,8 @@ 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;
     color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';

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>
 

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/control.css

@@ -59,51 +59,51 @@
 		@apply rounded-ui;
 
 		&.is-primary {
-			@apply bg-on-primary text-primary;
+			@apply bg-soft-primary text-primary;
 			&.is-active {
-				@apply bg-on-primary/90;
+				@apply bg-soft-primary/90;
 			}
 		}
 
 		&.is-secondary {
-			@apply bg-on-secondary text-secondary;
+			@apply bg-soft-secondary text-secondary;
 			&.is-active {
-				@apply bg-on-secondary/90;
+				@apply bg-soft-secondary/90;
 			}
 		}
 
 		&.is-muted {
-			@apply bg-muted text-on-muted;
+			@apply bg-soft-muted text-on-muted;
 			&.is-active {
-				@apply bg-muted/90;
+				@apply bg-soft-muted/90;
 			}
 		}
 
 		&.is-success {
-			@apply bg-on-success text-success;
+			@apply bg-soft-success text-success;
 			&.is-active {
-				@apply bg-on-success/90;
+				@apply bg-soft-success/90;
 			}
 		}
 
 		&.is-info {
-			@apply bg-on-info text-info;
+			@apply bg-soft-info text-info;
 			&.is-active {
-				@apply bg-on-info/90;
+				@apply bg-soft-info/90;
 			}
 		}
 
 		&.is-danger {
-			@apply bg-on-danger text-danger;
+			@apply bg-soft-danger text-danger;
 			&.is-active {
-				@apply bg-on-danger/90;
+				@apply bg-soft-danger/90;
 			}
 		}
 
 		&.is-warning {
-			@apply bg-on-warning text-warning;
+			@apply bg-soft-warning text-warning;
 			&.is-active {
-				@apply bg-on-warning/90;
+				@apply bg-soft-warning/90;
 			}
 		}
 	}

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

@@ -7,14 +7,13 @@
 		@apply hidden;
 	}
 
-	/* Error Message */
 	.csv-field-error {
 		@apply mt-2.5 p-2.5 rounded-ui text-sm;
 	}
 
 	.csv-field.is-soft .csv-field-error,
 	.csv-field.is-ghost .csv-field-error {
-		@apply bg-on-danger/20 text-danger;
+		@apply bg-soft-danger/20 text-danger;
 	}
 
 	.csv-field.is-solid .csv-field-error {
@@ -25,7 +24,6 @@
 		@apply border border-danger text-danger;
 	}
 
-	/* Modal Styles */
 	.csv-modal-title {
 		@apply m-0 text-xl font-semibold text-on-surface;
 	}
@@ -50,7 +48,6 @@
 		@apply flex justify-end gap-3;
 	}
 
-	/* Preview Container */
 	.csv-preview-container {
 		@apply mt-6 p-5 rounded-ui;
 	}
@@ -80,25 +77,25 @@
 	}
 
 	.csv-field.is-soft.is-primary .csv-preview-container {
-		@apply bg-on-primary/20;
+		@apply bg-soft-primary/20;
 	}
 	.csv-field.is-soft.is-secondary .csv-preview-container {
-		@apply bg-on-secondary/20;
+		@apply bg-soft-secondary/20;
 	}
 	.csv-field.is-soft.is-muted .csv-preview-container {
-		@apply bg-muted/50;
+		@apply bg-soft-muted/50;
 	}
 	.csv-field.is-soft.is-success .csv-preview-container {
-		@apply bg-on-success/20;
+		@apply bg-soft-success/20;
 	}
 	.csv-field.is-soft.is-info .csv-preview-container {
-		@apply bg-on-info/20;
+		@apply bg-soft-info/20;
 	}
 	.csv-field.is-soft.is-danger .csv-preview-container {
-		@apply bg-on-danger/20;
+		@apply bg-soft-danger/20;
 	}
 	.csv-field.is-soft.is-warning .csv-preview-container {
-		@apply bg-on-warning/20;
+		@apply bg-soft-warning/20;
 	}
 
 	.csv-field.is-solid.is-primary .csv-preview-container {
@@ -149,7 +146,6 @@
 		@apply bg-surface/50;
 	}
 
-	/* Preview Header */
 	.csv-preview-header {
 		@apply flex justify-between items-start mb-4 gap-4;
 	}
@@ -175,7 +171,6 @@
 		@apply text-lg leading-none;
 	}
 
-	/* Size Variants */
 	.csv-field.is-xs {
 		.csv-field-error {
 			@apply text-xs p-2;