ui-svelte 0.1.0

package/dist/form/Dropzone.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import type { IconData } from '../display/Icon.svelte';
+	import { Attach24RegularIcon, Dismiss24RegularIcon } from '../icons/index.js';
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+
+	type FileWithUrl = {
+		file: File;
+		name: string;
+		size: number;
+		url: Promise<string>;
+		uploadedAt: number;
+	};
+
+	type Props = {
+		files?: FileWithUrl[];
+		accept?: string;
+		multiple?: boolean;
+		maxSize?: number;
+		class?: string;
+		controlClass?: string;
+		icon?: IconData;
+		variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+		size?: 'sm' | 'md' | 'lg';
+		name?: string;
+		label?: string;
+		helpText?: string;
+		errorText?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		onchange?: (files: FileWithUrl[]) => void;
+		isSolid?: boolean;
+	};
+
+	let {
+		files = $bindable([]),
+		accept,
+		multiple = true,
+		maxSize,
+		class: className,
+		controlClass,
+		icon,
+		variant = 'outlined',
+		size = 'md',
+		name,
+		label,
+		helpText,
+		errorText,
+		placeholder = 'Drag & drop files here or click to select',
+		disabled = false,
+		onchange,
+		isSolid
+	}: Props = $props();
+
+	const uid = $props.id();
+
+	let isActive = $state(false);
+	let isDragging = $state(false);
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		outlined: 'is-outlined',
+		line: 'is-line'
+	};
+
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	const handleFiles = (fileList: FileList | null) => {
+		if (!fileList || disabled) return;
+
+		const newFiles: FileWithUrl[] = Array.from(fileList).map((file) => ({
+			file,
+			name: file.name,
+			size: file.size,
+			url: Promise.resolve(URL.createObjectURL(file)),
+			uploadedAt: Date.now()
+		}));
+
+		files = multiple ? [...files, ...newFiles] : newFiles;
+		onchange?.(files);
+	};
+
+	const drop = (e: DragEvent) => {
+		e.preventDefault();
+		isDragging = false;
+		handleFiles(e.dataTransfer?.files || null);
+	};
+
+	const removeFile = async (index: number) => {
+		const fileToRemove = files[index];
+		const url = await fileToRemove.url;
+		URL.revokeObjectURL(url);
+		files = [...files.slice(0, index), ...files.slice(index + 1)];
+		onchange?.(files);
+	};
+
+	const displaySize = (bytes: number): string => {
+		if (bytes === 0) return '0 Bytes';
+		const k = 1024;
+		const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+	};
+</script>
+
+<div class={cn('field', className)}>
+	{#if label}
+		<span class="field-label">{label}</span>
+	{/if}
+
+	<label
+		for={`${uid}-${name}`}
+		class={cn(
+			'dropzone-input',
+			variantClasses[variant],
+			sizeClasses[size],
+			isSolid && 'is-solid',
+			(isActive || isDragging) && 'is-active',
+			disabled && 'is-disabled',
+			controlClass
+		)}
+		class:is-error={errorText}
+		ondragover={(e) => {
+			e.preventDefault();
+			if (!disabled) isDragging = true;
+		}}
+		ondragleave={() => (isDragging = false)}
+		ondrop={drop}
+		onmouseenter={() => !disabled && (isActive = true)}
+		onmouseleave={() => (isActive = false)}
+	>
+		<input
+			id={`${uid}-${name}`}
+			type="file"
+			hidden
+			{accept}
+			{multiple}
+			{disabled}
+			{name}
+			onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+		/>
+
+		<div class="dropzone-content">
+			{#if icon}
+				<Icon {icon} class="dropzone-icon" />
+			{/if}
+			<span class="dropzone-placeholder">{placeholder}</span>
+		</div>
+	</label>
+
+	{#if files.length > 0}
+		<div class="dropzone-files">
+			{#each files as fileItem, i (fileItem.name + fileItem.uploadedAt)}
+				<div class="dropzone-file">
+					<div class="dropzone-file-preview">
+						{#await fileItem.url then src}
+							{#if fileItem.file.type.startsWith('image/')}
+								<img {src} alt={fileItem.name} class="dropzone-file-image" />
+							{:else}
+								<div class="dropzone-file-icon">
+									<Icon icon={Attach24RegularIcon} />
+								</div>
+							{/if}
+						{/await}
+					</div>
+
+					<div class="dropzone-file-info">
+						<span class="dropzone-file-name">{fileItem.name}</span>
+						<span class="dropzone-file-size">{displaySize(fileItem.size)}</span>
+					</div>
+
+					<button
+						type="button"
+						class="dropzone-file-remove"
+						onclick={() => removeFile(i)}
+						aria-label="Eliminar archivo"
+					>
+						<Icon icon={Dismiss24RegularIcon} />
+					</button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	{#if errorText || helpText}
+		<div class={cn('field-help', errorText && 'is-danger')}>
+			{errorText || helpText}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,30 @@
+import type { IconData } from '../display/Icon.svelte';
+type FileWithUrl = {
+    file: File;
+    name: string;
+    size: number;
+    url: Promise<string>;
+    uploadedAt: number;
+};
+type Props = {
+    files?: FileWithUrl[];
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    class?: string;
+    controlClass?: string;
+    icon?: IconData;
+    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+    size?: 'sm' | 'md' | 'lg';
+    name?: string;
+    label?: string;
+    helpText?: string;
+    errorText?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onchange?: (files: FileWithUrl[]) => void;
+    isSolid?: boolean;
+};
+declare const Dropzone: import("svelte").Component<Props, {}, "files">;
+type Dropzone = ReturnType<typeof Dropzone>;
+export default Dropzone;

package/dist/form/ImageCropper.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+
+	type Props = {
+		src: string;
+		alt?: string;
+		aspectRatio?: number;
+		minWidth?: number;
+		minHeight?: number;
+		maxWidth?: number;
+		maxHeight?: number;
+		onCrop?: (croppedImage: string) => void;
+		class?: string;
+	};
+
+	const {
+		src,
+		alt = 'Image to crop',
+		aspectRatio,
+		minWidth = 50,
+		minHeight = 50,
+		maxWidth,
+		maxHeight,
+		onCrop,
+		class: className
+	}: Props = $props();
+
+	let canvas: HTMLCanvasElement;
+	let image: HTMLImageElement;
+	let containerDiv: HTMLDivElement;
+
+	let isDragging = $state(false);
+	let isResizing = $state(false);
+	let resizeHandle = $state<string>('');
+
+	let cropX = $state(0);
+	let cropY = $state(0);
+	let cropWidth = $state(200);
+	let cropHeight = $state(200);
+
+	let startX = $state(0);
+	let startY = $state(0);
+	let startCropX = $state(0);
+	let startCropY = $state(0);
+	let startCropWidth = $state(0);
+	let startCropHeight = $state(0);
+
+	let imageLoaded = $state(false);
+	let imageWidth = $state(0);
+	let imageHeight = $state(0);
+	let scale = $state(1);
+
+	function handleImageLoad() {
+		if (!image || !containerDiv) return;
+
+		const containerWidth = containerDiv.clientWidth;
+		const containerHeight = containerDiv.clientHeight;
+
+		const naturalWidth = image.naturalWidth;
+		const naturalHeight = image.naturalHeight;
+
+		const scaleX = containerWidth / naturalWidth;
+		const scaleY = containerHeight / naturalHeight;
+		scale = Math.min(scaleX, scaleY, 1);
+
+		imageWidth = naturalWidth * scale;
+		imageHeight = naturalHeight * scale;
+
+		const initialSize = Math.min(imageWidth, imageHeight) * 0.6;
+		cropWidth = aspectRatio ? initialSize : initialSize;
+		cropHeight = aspectRatio ? initialSize / aspectRatio : initialSize;
+		cropX = (imageWidth - cropWidth) / 2;
+		cropY = (imageHeight - cropHeight) / 2;
+
+		imageLoaded = true;
+	}
+
+	function handleMouseDown(e: MouseEvent, handle?: string) {
+		e.preventDefault();
+		e.stopPropagation();
+
+		if (handle) {
+			isResizing = true;
+			resizeHandle = handle;
+		} else {
+			isDragging = true;
+		}
+
+		startX = e.clientX;
+		startY = e.clientY;
+		startCropX = cropX;
+		startCropY = cropY;
+		startCropWidth = cropWidth;
+		startCropHeight = cropHeight;
+
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		const deltaX = e.clientX - startX;
+		const deltaY = e.clientY - startY;
+
+		if (isDragging) {
+			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 handleMouseUp() {
+		isDragging = false;
+		isResizing = false;
+		resizeHandle = '';
+		document.removeEventListener('mousemove', handleMouseMove);
+		document.removeEventListener('mouseup', handleMouseUp);
+	}
+
+	function handleCrop() {
+		if (!canvas || !image) return;
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+
+		const scaleX = image.naturalWidth / imageWidth;
+		const scaleY = image.naturalHeight / imageHeight;
+
+		canvas.width = cropWidth * scaleX;
+		canvas.height = cropHeight * scaleY;
+
+		ctx.drawImage(
+			image,
+			cropX * scaleX,
+			cropY * scaleY,
+			cropWidth * scaleX,
+			cropHeight * scaleY,
+			0,
+			0,
+			canvas.width,
+			canvas.height
+		);
+
+		const croppedImageUrl = canvas.toDataURL('image/png');
+		onCrop?.(croppedImageUrl);
+	}
+
+	function handleReset() {
+		if (!imageLoaded) return;
+		const initialSize = Math.min(imageWidth, imageHeight) * 0.6;
+		cropWidth = aspectRatio ? initialSize : initialSize;
+		cropHeight = aspectRatio ? initialSize / aspectRatio : initialSize;
+		cropX = (imageWidth - cropWidth) / 2;
+		cropY = (imageHeight - cropHeight) / 2;
+	}
+</script>
+
+<div class={cn('image-cropper', className)}>
+	<div class="image-cropper-container" bind:this={containerDiv}>
+		<img
+			bind:this={image}
+			{src}
+			{alt}
+			class="image-cropper-image"
+			onload={handleImageLoad}
+			style="width: {imageWidth}px; height: {imageHeight}px;"
+		/>
+
+		{#if imageLoaded}
+			<div class="image-cropper-overlay">
+				<div class="overlay-top" style="height: {cropY}px;"></div>
+				<div class="overlay-middle" style="top: {cropY}px; height: {cropHeight}px;">
+					<div class="overlay-left" style="width: {cropX}px;"></div>
+					<div
+						class="overlay-right"
+						style="left: {cropX + cropWidth}px; width: {imageWidth - cropX - cropWidth}px;"
+					></div>
+				</div>
+				<div
+					class="overlay-bottom"
+					style="top: {cropY + cropHeight}px; height: {imageHeight - cropY - cropHeight}px;"
+				></div>
+
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="crop-area"
+					style="left: {cropX}px; top: {cropY}px; width: {cropWidth}px; height: {cropHeight}px;"
+					onmousedown={(e) => handleMouseDown(e)}
+				>
+					<div class="crop-grid">
+						<div class="grid-line grid-line-v" style="left: 33.33%;"></div>
+						<div class="grid-line grid-line-v" style="left: 66.66%;"></div>
+						<div class="grid-line grid-line-h" style="top: 33.33%;"></div>
+						<div class="grid-line grid-line-h" style="top: 66.66%;"></div>
+					</div>
+
+					<div class="resize-handle handle-nw" onmousedown={(e) => handleMouseDown(e, 'nw')}></div>
+					<div class="resize-handle handle-n" onmousedown={(e) => handleMouseDown(e, 'n')}></div>
+					<div class="resize-handle handle-ne" onmousedown={(e) => handleMouseDown(e, 'ne')}></div>
+					<div class="resize-handle handle-e" onmousedown={(e) => handleMouseDown(e, 'e')}></div>
+					<div class="resize-handle handle-se" onmousedown={(e) => handleMouseDown(e, 'se')}></div>
+					<div class="resize-handle handle-s" onmousedown={(e) => handleMouseDown(e, 's')}></div>
+					<div class="resize-handle handle-sw" onmousedown={(e) => handleMouseDown(e, 'sw')}></div>
+					<div class="resize-handle handle-w" onmousedown={(e) => handleMouseDown(e, 'w')}></div>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class="image-cropper-controls">
+		<button class="btn is-md is-outlined" onclick={handleReset}> refresh icon </button>
+		<button class="btn is-md is-primary is-solid" onclick={handleCrop}> crop icon </button>
+	</div>
+
+	<canvas bind:this={canvas} class="image-cropper-canvas"></canvas>
+</div>

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

@@ -0,0 +1,14 @@
+type Props = {
+    src: string;
+    alt?: string;
+    aspectRatio?: number;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    onCrop?: (croppedImage: string) => void;
+    class?: string;
+};
+declare const ImageCropper: import("svelte").Component<Props, {}, "">;
+type ImageCropper = ReturnType<typeof ImageCropper>;
+export default ImageCropper;

package/dist/form/PasswordField.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import Button from '../control/Button.svelte';
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type Props = {
+		value?: string;
+		defaultValue?: string;
+		placeholder?: string;
+		type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+		class?: string;
+		inputClass?: string;
+		onchange?: (value: string | number | undefined) => void;
+		oninput?: (value: string | number | undefined) => void;
+		variant?: 'solid' | 'outlined' | 'soft' | 'line';
+		color?: 'primary' | 'secondary' | 'muted';
+		inputSize?: 'small' | 'medium' | 'large';
+		name?: string;
+		label?: string;
+		labelOutside?: boolean;
+		labelActive?: boolean;
+		helpText?: string;
+		errorText?: string;
+		labels?: {
+			weak?: string;
+			medium?: string;
+			strong?: string;
+		};
+	} & HTMLInputAttributes;
+
+	let {
+		value = $bindable(),
+		defaultValue,
+		placeholder,
+		type = 'text',
+		class: className,
+		inputClass,
+		onchange,
+		oninput,
+		variant = 'soft',
+		color = 'primary',
+		inputSize = 'medium',
+		name,
+		label,
+		labelOutside,
+		labelActive,
+		helpText,
+		errorText,
+		labels = {
+			weak: 'Weak',
+			medium: 'Medium',
+			strong: 'Strong'
+		},
+		...rest
+	}: 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'
+	};
+
+	const sizes = {
+		small: 'field-small',
+		medium: 'field-medium',
+		large: 'field-large'
+	};
+
+	const uid = $props.id();
+
+	let show = $state(false);
+	let isFocused = $state(false);
+	let strength = $derived(calculateStrength(value));
+
+	function isBarActive(barIndex: number, score: number): boolean {
+		const threshold = (barIndex + 1) * 1.5;
+		return score >= threshold;
+	}
+
+	function calculateStrength(password: string): {
+		score: number;
+		label: string;
+		color: string;
+	} {
+		if (!password) return { score: 0, label: '', color: 'bg-gray-300' };
+
+		let score = 0;
+
+		if (password.length >= 8) score += 1;
+		if (password.length >= 12) score += 1;
+		if (/[a-z]/.test(password)) score += 1;
+		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 <= 4)
+			return {
+				score,
+				label: labels.medium || 'Medium',
+				color: 'bg-yellow-500'
+			};
+		return {
+			score,
+			label: labels.strong || 'Strong',
+			color: 'bg-green-500'
+		};
+	}
+</script>
+
+<div class={cn('field', className)}>
+	{#if labelOutside && label}
+		<label for={`${uid}-{name}`} class="label">{label}</label>
+	{/if}
+	<div
+		class={cn('field-control', variants[variant], colors[color], sizes[inputSize])}
+		class:is-error={errorText}
+	>
+		{#if !labelOutside && label}
+			<label class:is-active={isFocused || value} for={`${uid}-{name}`} class="label-inside"
+				>{label}</label
+			>
+		{/if}
+		<input
+			type={show ? 'text' : 'password'}
+			bind:value
+			id={`${uid}-{name}`}
+			class={cn('field-input', inputClass)}
+			placeholder={isFocused ? placeholder : ''}
+			{name}
+			{defaultValue}
+			onchange={(e) => onchange?.((e.target as HTMLInputElement).value)}
+			oninput={(e) => oninput?.((e.target as HTMLInputElement).value)}
+			onfocusin={() => {
+				if (!labelActive) isFocused = true;
+			}}
+			onfocusout={() => {
+				if (!labelActive) isFocused = false;
+			}}
+			{...rest}
+		/>
+		<Button class={cn('field-eye')} onclick={() => (show = !show)}>eye icon</Button>
+	</div>
+	<div class={cn('field-strength', className)}>
+		<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>
+	</div>
+	{#if errorText || helpText || strength.label}
+		<div
+			class={cn('field-help', strength.label && 'field-strength-label', errorText && 'is-error')}
+		>
+			{strength.label ? strength.label : errorText ? errorText : helpText}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,28 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+    class?: string;
+    inputClass?: string;
+    onchange?: (value: string | number | undefined) => void;
+    oninput?: (value: string | number | undefined) => void;
+    variant?: 'solid' | 'outlined' | 'soft' | 'line';
+    color?: 'primary' | 'secondary' | 'muted';
+    inputSize?: 'small' | 'medium' | 'large';
+    name?: string;
+    label?: string;
+    labelOutside?: boolean;
+    labelActive?: boolean;
+    helpText?: string;
+    errorText?: string;
+    labels?: {
+        weak?: string;
+        medium?: string;
+        strong?: string;
+    };
+} & HTMLInputAttributes;
+declare const PasswordField: import("svelte").Component<Props, {}, "value">;
+type PasswordField = ReturnType<typeof PasswordField>;
+export default PasswordField;