ui-svelte 0.2.11 → 0.2.13

package/dist/control/IconButton.svelte.d.ts

@@ -4,13 +4,13 @@ type Props = {
     href?: string;
     target?: '_self' | '_blank' | '_parent' | '_top';
     type?: 'button' | 'submit' | 'reset';
-    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning' | 'outlined' | 'ghost';
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost' | 'overlay';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     class?: string;
     isLoading?: boolean;
     icon: IconData;
     isDisabled?: boolean;
-    isSolid?: boolean;
 };
 declare const IconButton: import("svelte").Component<Props, {}, "">;
 type IconButton = ReturnType<typeof IconButton>;

package/dist/control/Image.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import {
+		MaximizeSquareMinimalisticLinearIcon,
+		ArrowDownloadRegularIcon
+	} from '../icons/index.js';
+	import { IconButton } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+
+	type Props = {
+		src: string;
+		alt?: string;
+		aspect?: 'horizontal' | 'vertical' | 'square' | 'auto';
+		class?: string;
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		hideControls?: boolean;
+		loading?: 'lazy' | 'eager';
+		objectFit?: 'cover' | 'contain' | 'fill' | 'none';
+	};
+
+	let {
+		src,
+		alt = '',
+		aspect = 'auto',
+		class: className,
+		color = 'primary',
+		hideControls = false,
+		loading = 'lazy',
+		objectFit = 'cover'
+	}: Props = $props();
+
+	let showControls = $state(false);
+	let isLoading = $state(true);
+	let hasError = $state(false);
+
+	const handleMouseEnter = () => {
+		showControls = true;
+	};
+
+	const handleMouseLeave = () => {
+		showControls = false;
+	};
+
+	const handleLoad = () => {
+		isLoading = false;
+	};
+
+	const handleError = () => {
+		isLoading = false;
+		hasError = true;
+	};
+
+	const handleToggleMaximize = () => {
+		const containerElement = document.querySelector('.image');
+
+		if (!document.fullscreenElement) {
+			if (containerElement?.requestFullscreen) {
+				containerElement.requestFullscreen();
+			}
+		} else {
+			if (document.exitFullscreen) {
+				document.exitFullscreen();
+			}
+		}
+	};
+
+	const handleDownload = async () => {
+		try {
+			const response = await fetch(src);
+			const blob = await response.blob();
+			const url = window.URL.createObjectURL(blob);
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = alt || 'image';
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+			window.URL.revokeObjectURL(url);
+		} catch (error) {
+			console.error('Download error:', error);
+		}
+	};
+</script>
+
+<div
+	class={cn('image', aspect, `fit-${objectFit}`, className)}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	role="img"
+	aria-label={alt}
+>
+	{#if isLoading}
+		<div class="image-skeleton"></div>
+	{/if}
+
+	{#if hasError}
+		<div class="image-error">
+			<span>Failed to load image</span>
+		</div>
+	{:else}
+		<img {src} {alt} {loading} onload={handleLoad} onerror={handleError} class="image-element" />
+	{/if}
+
+	{#if !hideControls && !hasError}
+		<div class={cn('image-controls', showControls ? 'visible' : 'invisible')}>
+			<div class="image-actions">
+				<IconButton
+					onclick={handleDownload}
+					icon={ArrowDownloadRegularIcon}
+					{color}
+					variant="overlay"
+					size="sm"
+				/>
+				<IconButton
+					onclick={handleToggleMaximize}
+					icon={MaximizeSquareMinimalisticLinearIcon}
+					{color}
+					variant="overlay"
+					size="sm"
+				/>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/control/Image.svelte.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    src: string;
+    alt?: string;
+    aspect?: 'horizontal' | 'vertical' | 'square' | 'auto';
+    class?: string;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    hideControls?: boolean;
+    loading?: 'lazy' | 'eager';
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none';
+};
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/control/Record.svelte

@@ -1,37 +1,46 @@
 <script lang="ts">
 	import {
-		Checkmark24RegularIcon,
+		CheckmarkCircle24RegularIcon,
 		Delete24RegularIcon,
-		Pause24RegularIcon,
-		Play24RegularIcon,
-		Record24RegularIcon,
+		DismissCircle24RegularIcon,
+		Microphone2LinearIcon,
+		PauseFilledIcon,
+		PlayFilledIcon,
 		RecordStop24RegularIcon
 	} from '../icons/index.js';
-	import { Button, Icon } from '../index.js';
+	import { IconButton } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 
 	type Props = {
 		class?: string;
 		name: string;
-		variant?:
-			| 'primary'
-			| 'secondary'
-			| 'muted'
-			| 'outlined'
-			| 'ghost'
-			| 'success'
-			| 'info'
-			| 'danger'
-			| 'warning';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'soft' | 'solid';
 		url?: string;
 		headers?: Record<string, string>;
 		onRecordingComplete?: (blob: Blob, url: string) => void;
 	};
 
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger'
+	};
+
+	const variants = {
+		soft: 'is-soft',
+		solid: 'is-solid'
+	};
+
 	let {
 		class: className,
 		name,
-		variant = 'primary',
+		color = 'primary',
+		variant = 'soft',
 		url,
 		headers,
 		onRecordingComplete
@@ -61,7 +70,7 @@
 
 	const BAR_COUNT = 50;
 
-	let baseClasses = $derived(cn('media', variant, className));
+	let baseClasses = $derived(cn('media', colors[color], variants[variant], className));
 
 	async function startRecording() {
 		try {
@@ -213,16 +222,6 @@
 		return `${mins}:${secs.toString().padStart(2, '0')}`;
 	}
 
-	function handleToggleRecording() {
-		if (!isRecording) {
-			startRecording();
-		} else if (isPaused) {
-			resumeRecording();
-		} else {
-			pauseRecording();
-		}
-	}
-
 	async function confirmRecording() {
 		if (!reviewAudioUrl) return;
 
@@ -256,12 +255,6 @@
 		cleanup();
 	}
 
-	function continueRecording() {
-		isReviewing = false;
-		isRecording = false;
-		isPaused = false;
-	}
-
 	async function analyzeRecordedAudio(blob: Blob) {
 		try {
 			const context = new AudioContext();
@@ -273,16 +266,24 @@
 			const blockSize = Math.floor(rawData.length / samples);
 			const filteredData: number[] = [];
 
+			const samplesPerBlock = Math.min(blockSize, 500);
+			const stride = Math.max(1, Math.floor(blockSize / samplesPerBlock));
+
 			for (let i = 0; i < samples; i++) {
 				let sum = 0;
-				for (let j = 0; j < blockSize; j++) {
-					sum += Math.abs(rawData[i * blockSize + j]);
+				let count = 0;
+				const blockStart = i * blockSize;
+				const blockEnd = Math.min(blockStart + blockSize, rawData.length);
+
+				for (let j = blockStart; j < blockEnd; j += stride) {
+					sum += Math.abs(rawData[j]);
+					count++;
 				}
-				filteredData.push(sum / blockSize);
+				filteredData.push(count > 0 ? sum / count : 0);
 			}
 
 			const max = Math.max(...filteredData);
-			playbackWaveform = filteredData.map((value) => (value / max) * 0.8 + 0.2);
+			playbackWaveform = filteredData.map((value) => (max > 0 ? (value / max) * 0.8 + 0.2 : 0.5));
 
 			await context.close();
 		} catch (error) {
@@ -350,77 +351,119 @@
 
 <div class={baseClasses}>
 	{#if isReviewing}
-		<Button onclick={togglePlayback} size="md" {variant}>
-			{#if isPlaying}
-				<Icon icon={Pause24RegularIcon} />
-			{:else}
-				<Icon icon={Play24RegularIcon} />
-			{/if}
-		</Button>
-
-		<div class="media-waveform">
-			<div class="media-bars">
-				{#each playbackWaveform as height, i}
-					{@const progress = playbackDuration > 0 ? playbackTime / playbackDuration : 0}
-					{@const barPosition = (i + 0.5) / playbackWaveform.length}
-					{@const isPlayed = barPosition <= progress}
-					<div class="media-bar" class:active={isPlayed} style="height: {height * 100}%"></div>
-				{/each}
+		<IconButton
+			onclick={togglePlayback}
+			icon={isPlaying ? PauseFilledIcon : PlayFilledIcon}
+			{color}
+			variant={variant === 'solid' ? 'soft' : 'solid'}
+			size="md"
+		/>
+
+		<div class="media-content">
+			<div class="media-waveform">
+				<div class="media-bars">
+					{#each playbackWaveform as height, i}
+						{@const progress = playbackDuration > 0 ? playbackTime / playbackDuration : 0}
+						{@const barPosition = (i + 0.5) / playbackWaveform.length}
+						{@const isPlayed = barPosition <= progress}
+						<div class="media-bar" class:active={isPlayed} style="height: {height * 100}%"></div>
+					{/each}
+				</div>
+			</div>
+			<div class="media-footer">
+				<span class="media-time">{formatTime(recordingTime)}</span>
 			</div>
 		</div>
 
-		<span class="media-time">{formatTime(recordingTime)}</span>
-
-		<div class="flex gap-2">
-			<Button onclick={discardRecording} size="md" {variant}>
-				<Icon icon={Delete24RegularIcon} />
-			</Button>
-			<Button onclick={continueRecording} size="md" {variant}>
-				<Icon icon={Record24RegularIcon} />
-			</Button>
-			<Button onclick={confirmRecording} size="md" {variant}>
-				<Icon icon={Checkmark24RegularIcon} />
-			</Button>
+		<div class="flex gap-1">
+			<IconButton
+				onclick={discardRecording}
+				icon={DismissCircle24RegularIcon}
+				color="danger"
+				variant="ghost"
+				size="sm"
+			/>
+			<IconButton
+				onclick={confirmRecording}
+				icon={CheckmarkCircle24RegularIcon}
+				color="success"
+				variant="ghost"
+				size="sm"
+				isLoading={isUploading}
+			/>
 		</div>
 	{:else if !isRecording}
-		<Button onclick={startRecording} size="md" {variant}>
-			<Icon icon={Record24RegularIcon} />
-		</Button>
-
-		<div class="media-waveform">
-			<div class="media-bars">
-				{#each waveformBars as height}
-					<div class="media-bar" style="height: {height * 100}%"></div>
-				{/each}
+		<IconButton
+			onclick={startRecording}
+			icon={Microphone2LinearIcon}
+			{color}
+			variant={variant === 'solid' ? 'soft' : 'solid'}
+			size="md"
+		/>
+
+		<div class="media-content">
+			<div class="media-waveform">
+				<div class="media-bars">
+					{#each waveformBars as height}
+						<div class="media-bar" style="height: {height * 100}%"></div>
+					{/each}
+				</div>
+			</div>
+			<div class="media-footer">
+				<span class="media-time">{formatTime(recordingTime)}</span>
 			</div>
 		</div>
-
-		<span class="media-time">{formatTime(recordingTime)}</span>
 	{:else}
-		<Button onclick={handleToggleRecording} size="md" {variant}>
-			{#if isPaused}
-				<Icon icon={Play24RegularIcon} />
-			{:else}
-				<Icon icon={Pause24RegularIcon} />
-			{/if}
-		</Button>
-
-		<div class="media-waveform">
-			<div class="media-bars">
-				{#each waveformBars as height}
-					<div
-						class="media-bar"
-						class:recording={isRecording && !isPaused}
-						style="height: {height * 100}%"
-					></div>
-				{/each}
+		{#if isPaused}
+			<IconButton
+				onclick={resumeRecording}
+				icon={PlayFilledIcon}
+				{color}
+				variant={variant === 'solid' ? 'soft' : 'solid'}
+				size="md"
+			/>
+		{:else}
+			<IconButton
+				onclick={pauseRecording}
+				icon={PauseFilledIcon}
+				{color}
+				variant={variant === 'solid' ? 'soft' : 'solid'}
+				size="md"
+			/>
+		{/if}
+
+		<div class="media-content">
+			<div class="media-waveform">
+				<div class="media-bars">
+					{#each waveformBars as height}
+						<div
+							class="media-bar"
+							class:recording={isRecording && !isPaused}
+							style="height: {height * 100}%"
+						></div>
+					{/each}
+				</div>
+			</div>
+			<div class="media-footer">
+				<span class="media-time">{formatTime(recordingTime)}</span>
 			</div>
 		</div>
 
-		<span class="media-time">{formatTime(recordingTime)}</span>
-
-		<Button onclick={stopRecording} size="md" {variant} isLoading={isUploading}>
-			<Icon icon={RecordStop24RegularIcon} />
-		</Button>
+		<div class="flex gap-1">
+			<IconButton
+				onclick={discardRecording}
+				icon={Delete24RegularIcon}
+				color="danger"
+				variant="ghost"
+				size="sm"
+			/>
+			<IconButton
+				onclick={stopRecording}
+				icon={RecordStop24RegularIcon}
+				{color}
+				variant="ghost"
+				size="sm"
+			/>
+		</div>
 	{/if}
 </div>

package/dist/control/Record.svelte.d.ts

@@ -1,7 +1,8 @@
 type Props = {
     class?: string;
     name: string;
-    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'ghost' | 'success' | 'info' | 'danger' | 'warning';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'soft' | 'solid';
     url?: string;
     headers?: Record<string, string>;
     onRecordingComplete?: (blob: Blob, url: string) => void;

package/dist/control/ToggleGroup.svelte

@@ -13,7 +13,8 @@
 		items: ToggleGroupItem[];
 		value?: string;
 		onchange?: (value: string) => void;
-		variant?: 'default' | 'primary' | 'secondary' | 'outlined';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
 		size?: 'xs' | 'sm' | 'md' | 'lg';
 		class?: string;
 		isWide?: boolean;
@@ -23,9 +24,11 @@
 
 	let {
 		items,
+		// svelte-ignore state_referenced_locally
 		value = $bindable(items[0]?.id ?? ''),
 		onchange,
-		variant = 'default',
+		color = 'muted',
+		variant = 'soft',
 		size = 'md',
 		class: className,
 		isWide,
@@ -33,14 +36,24 @@
 		isDisabled
 	}: Props = $props();
 
-	const variantClasses: Record<string, string> = {
-		default: '',
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		outlined: 'is-outlined'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
 	};
 
-	const sizeClasses: Record<string, string> = {
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined',
+		ghost: 'is-ghost'
+	};
+
+	const sizes = {
 		xs: 'is-xs',
 		sm: 'is-sm',
 		md: 'is-md',
@@ -50,7 +63,8 @@
 	let groupClasses = $derived(
 		cn(
 			'toggle-group',
-			variantClasses[variant],
+			variants[variant],
+			colors[color],
 			isWide && 'is-wide',
 			isVertical && 'is-vertical',
 			className
@@ -68,7 +82,7 @@
 	{#each items as item}
 		<button
 			type="button"
-			class={cn('toggle-group-item', sizeClasses[size], value === item.id && 'is-active')}
+			class={cn('toggle-group-item', sizes[size], value === item.id && 'is-active')}
 			onclick={() => handleClick(item.id)}
 			disabled={isDisabled}
 			aria-pressed={value === item.id}

package/dist/control/ToggleGroup.svelte.d.ts

@@ -8,7 +8,8 @@ type Props = {
     items: ToggleGroupItem[];
     value?: string;
     onchange?: (value: string) => void;
-    variant?: 'default' | 'primary' | 'secondary' | 'outlined';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
     size?: 'xs' | 'sm' | 'md' | 'lg';
     class?: string;
     isWide?: boolean;

package/dist/control/ToggleTheme.svelte

@@ -1,21 +1,23 @@
 <script lang="ts">
 	import { MoonStarsLinearIcon, Sun2LinearIcon } from '../icons/index.js';
-	import { Button, Icon } from '../index.js';
+	import { IconButton } from '../index.js';
 	import { theme } from '../stores/theme.svelte.js';
 
 	type Props = {
-		variant?: 'primary' | 'secondary' | 'muted' | 'ghost';
-		size?: 'sm' | 'md' | 'lg';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		class?: string;
 	};
 
-	let { variant = 'ghost', size = 'md', class: className }: Props = $props();
+	let { color = 'primary', variant = 'ghost', size = 'md', class: className }: Props = $props();
 </script>
 
-<Button onclick={theme.toggleTheme} {size} {variant} class={className} isIcon>
-	{#if theme.isDark}
-		<Icon icon={Sun2LinearIcon} />
-	{:else}
-		<Icon icon={MoonStarsLinearIcon} />
-	{/if}
-</Button>
+<IconButton
+	icon={theme.isDark ? Sun2LinearIcon : MoonStarsLinearIcon}
+	{size}
+	{color}
+	{variant}
+	class={className}
+	onclick={theme.toggleTheme}
+/>

package/dist/control/ToggleTheme.svelte.d.ts

@@ -1,6 +1,7 @@
 type Props = {
-    variant?: 'primary' | 'secondary' | 'muted' | 'ghost';
-    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     class?: string;
 };
 declare const ToggleTheme: import("svelte").Component<Props, {}, "">;