ui-svelte 0.1.0

package/dist/control/Audio.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+	import { Pause24RegularIcon, Play24RegularIcon } from '../icons/index.js';
+	import { Button, Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+
+	type Props = {
+		class?: string;
+		src: string;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'soft'
+			| 'outlined'
+			| 'ghost'
+			| 'success'
+			| 'info'
+			| 'danger'
+			| 'warning';
+	};
+
+	let { class: className, src, variant = 'success' }: Props = $props();
+
+	let audio: HTMLAudioElement;
+	let currentTime = $state(0);
+	let duration = $state(0);
+	let isPlaying = $state(false);
+	let waveformData = $state<number[]>([]);
+	let isAnalyzing = $state(true);
+	let isDragging = $state(false);
+
+	const BAR_COUNT = 50;
+
+	let baseClasses = $derived(cn('media', variant, className));
+
+	async function analyzeAudio() {
+		try {
+			const audioContext = new AudioContext();
+			const response = await fetch(src);
+			const arrayBuffer = await response.arrayBuffer();
+			const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+			const rawData = audioBuffer.getChannelData(0);
+			const samples = BAR_COUNT;
+			const blockSize = Math.floor(rawData.length / samples);
+			const filteredData: number[] = [];
+
+			for (let i = 0; i < samples; i++) {
+				let sum = 0;
+				for (let j = 0; j < blockSize; j++) {
+					sum += Math.abs(rawData[i * blockSize + j]);
+				}
+				filteredData.push(sum / blockSize);
+			}
+
+			const max = Math.max(...filteredData);
+			waveformData = filteredData.map((value) => (value / max) * 0.8 + 0.2);
+			isAnalyzing = false;
+
+			await audioContext.close();
+		} catch (error) {
+			console.error('Error analyzing audio:', error);
+			waveformData = Array.from({ length: BAR_COUNT }, () => Math.random() * 0.6 + 0.4);
+			isAnalyzing = false;
+		}
+	}
+
+	function togglePlay() {
+		if (isPlaying) {
+			audio.pause();
+		} else {
+			audio.play();
+		}
+		isPlaying = !isPlaying;
+	}
+
+	function handleLoadedMetadata() {
+		duration = audio.duration;
+	}
+
+	function handleCanPlay() {
+		if (duration === 0 && audio.duration) {
+			duration = audio.duration;
+		}
+	}
+
+	function handleDurationChange() {
+		if (audio.duration) {
+			duration = audio.duration;
+		}
+	}
+
+	function handleTimeUpdate() {
+		if (!isDragging) {
+			currentTime = audio.currentTime;
+		}
+	}
+
+	function handleEnded() {
+		isPlaying = false;
+	}
+
+	function seek(clientX: number, element: HTMLElement) {
+		if (duration === 0) return;
+		const rect = element.getBoundingClientRect();
+		const x = clientX - rect.left;
+		const percentage = Math.max(0, Math.min(1, x / rect.width));
+		const newTime = percentage * duration;
+		audio.currentTime = newTime;
+		currentTime = newTime;
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		isDragging = true;
+		seek(event.clientX, event.currentTarget as HTMLElement);
+	}
+
+	function handleMouseMove(event: MouseEvent) {
+		if (isDragging) {
+			const waveformEl = document.querySelector('.media-waveform') as HTMLElement;
+			if (waveformEl) {
+				seek(event.clientX, waveformEl);
+			}
+		}
+	}
+
+	function handleMouseUp() {
+		isDragging = false;
+	}
+
+	function formatTime(seconds: number): string {
+		if (!isFinite(seconds)) return '0:00';
+		const mins = Math.floor(seconds / 60);
+		const secs = Math.floor(seconds % 60);
+		return `${mins}:${secs.toString().padStart(2, '0')}`;
+	}
+
+	$effect(() => {
+		analyzeAudio();
+	});
+
+	$effect(() => {
+		if (audio) {
+			audio.addEventListener('loadedmetadata', handleLoadedMetadata);
+			audio.addEventListener('canplay', handleCanPlay);
+			audio.addEventListener('durationchange', handleDurationChange);
+			audio.addEventListener('timeupdate', handleTimeUpdate);
+			audio.addEventListener('ended', handleEnded);
+
+			if (audio.duration && audio.duration > 0) {
+				duration = audio.duration;
+			}
+
+			return () => {
+				audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
+				audio.removeEventListener('canplay', handleCanPlay);
+				audio.removeEventListener('durationchange', handleDurationChange);
+				audio.removeEventListener('timeupdate', handleTimeUpdate);
+				audio.removeEventListener('ended', handleEnded);
+			};
+		}
+	});
+
+	$effect(() => {
+		if (isDragging) {
+			window.addEventListener('mousemove', handleMouseMove);
+			window.addEventListener('mouseup', handleMouseUp);
+
+			return () => {
+				window.removeEventListener('mousemove', handleMouseMove);
+				window.removeEventListener('mouseup', handleMouseUp);
+			};
+		}
+	});
+</script>
+
+<div class={baseClasses}>
+	<audio bind:this={audio} {src}></audio>
+
+	<Button onclick={togglePlay} size="md" variant="ghost">
+		{#if isPlaying}
+			<Icon icon={Pause24RegularIcon} />
+		{:else}
+			<Icon icon={Play24RegularIcon} />
+		{/if}
+	</Button>
+
+	<div
+		class="media-waveform clickable"
+		onmousedown={handleMouseDown}
+		role="slider"
+		tabindex="0"
+		aria-label="Posición del audio"
+		aria-valuenow={Math.round((currentTime / duration) * 100) || 0}
+		aria-valuemin="0"
+		aria-valuemax="100"
+	>
+		{#if isAnalyzing}
+			<div class="media-loading">Analizando...</div>
+		{:else}
+			<div class="media-bars">
+				{#each waveformData as height, i}
+					{@const progress = duration > 0 ? currentTime / duration : 0}
+					{@const barPosition = (i + 0.5) / waveformData.length}
+					{@const isPlayed = barPosition <= progress}
+					<div class="media-bar" class:active={isPlayed} style="height: {height * 100}%"></div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	<span class="media-time">{duration > 0 ? formatTime(duration - currentTime) : '0:00'}</span>
+</div>

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

@@ -0,0 +1,8 @@
+type Props = {
+    class?: string;
+    src: string;
+    variant?: 'primary' | 'secondary' | 'soft' | 'outlined' | 'ghost' | 'success' | 'info' | 'danger' | 'warning';
+};
+declare const Audio: import("svelte").Component<Props, {}, "">;
+type Audio = ReturnType<typeof Audio>;
+export default Audio;

package/dist/control/Button.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { IconData } from '../display/Icon.svelte';
+	import { DotsMoveIcon } from '../icons/index.js';
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+		onclick?: () => void;
+		href?: string;
+		type?: 'button' | 'submit' | 'reset';
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'danger'
+			| 'warning'
+			| 'outlined'
+			| 'ghost';
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		class?: string;
+		isLoading?: boolean;
+		startIcon?: IconData;
+		endIcon?: IconData;
+		isWide?: boolean;
+		isDisabled?: boolean;
+		hasShadow?: boolean;
+		isSolid?: boolean;
+		isIcon?: boolean;
+	};
+
+	const {
+		children,
+		onclick,
+		href,
+		type = 'button',
+		variant = 'primary',
+		size = 'md',
+		class: className,
+		startIcon,
+		endIcon,
+		isLoading,
+		isWide,
+		isDisabled,
+		hasShadow,
+		isSolid,
+		isIcon
+	}: Props = $props();
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning',
+		outlined: 'is-outlined',
+		ghost: 'is-ghost'
+	};
+
+	const sizeClasses = {
+		xs: 'is-xs',
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg',
+		xl: 'is-xl'
+	};
+
+	let baseClasses = $derived(
+		cn(
+			'btn',
+			variantClasses[variant],
+			sizeClasses[size],
+			isIcon && 'is-icon',
+			isSolid && 'is-solid',
+			isWide && 'has-wide',
+			hasShadow && 'has-shadow',
+			className
+		)
+	);
+</script>
+
+{#snippet content()}
+	{#if startIcon}
+		<Icon icon={startIcon} class={cn(isLoading && 'invisible')} />
+	{/if}
+	<span class:invisible={isLoading}>{@render children()}</span>
+	{#if endIcon}
+		<Icon icon={endIcon} class={cn(isLoading && 'invisible')} />
+	{/if}
+{/snippet}
+
+{#if href}
+	<a class={baseClasses} {href}>
+		{@render content()}
+	</a>
+{:else}
+	<button
+		{type}
+		{onclick}
+		disabled={isDisabled || isLoading}
+		class={baseClasses}
+		aria-busy={isLoading}
+	>
+		{#if isLoading}
+			<span class="btn-loading">
+				<Icon icon={DotsMoveIcon} class="loading-icon" />
+			</span>
+		{/if}
+		{@render content()}
+	</button>
+{/if}

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

@@ -0,0 +1,22 @@
+import type { IconData } from '../display/Icon.svelte';
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+    onclick?: () => void;
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning' | 'outlined' | 'ghost';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    class?: string;
+    isLoading?: boolean;
+    startIcon?: IconData;
+    endIcon?: IconData;
+    isWide?: boolean;
+    isDisabled?: boolean;
+    hasShadow?: boolean;
+    isSolid?: boolean;
+    isIcon?: boolean;
+};
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/control/IconButton.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { IconData } from '../display/Icon.svelte';
+	import { DotsMoveIcon } from '../icons/index.js';
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+
+	type Props = {
+		onclick?: () => void;
+		href?: string;
+		type?: 'button' | 'submit' | 'reset';
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'danger'
+			| 'warning'
+			| 'outlined'
+			| 'ghost';
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		class?: string;
+		isLoading?: boolean;
+		icon: IconData;
+		isDisabled?: boolean;
+		hasShadow?: boolean;
+		isSolid?: boolean;
+	};
+
+	const {
+		onclick,
+		href,
+		type = 'button',
+		variant = 'primary',
+		size = 'md',
+		class: className,
+		icon,
+		isLoading,
+		isDisabled,
+		hasShadow,
+		isSolid
+	}: Props = $props();
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning',
+		outlined: 'is-outlined',
+		ghost: 'is-ghost'
+	};
+
+	const sizeClasses = {
+		xs: 'is-xs',
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg',
+		xl: 'is-xl'
+	};
+
+	let baseClasses = $derived(
+		cn(
+			'btn',
+			'is-icon',
+			variantClasses[variant],
+			sizeClasses[size],
+			isSolid && 'is-solid',
+			hasShadow && 'has-shadow',
+			className
+		)
+	);
+</script>
+
+{#snippet content()}
+	<Icon {icon} />
+{/snippet}
+
+{#if href}
+	<a class={baseClasses} {href}>
+		{@render content()}
+	</a>
+{:else}
+	<button
+		{type}
+		{onclick}
+		disabled={isDisabled || isLoading}
+		class={baseClasses}
+		aria-busy={isLoading}
+	>
+		{#if isLoading}
+			<span class="btn-loading">
+				<Icon icon={DotsMoveIcon} class="loading-icon" />
+			</span>
+			<span style="visibility: hidden; pointer-events: none;">
+				{@render content()}
+			</span>
+		{:else}
+			{@render content()}
+		{/if}
+	</button>
+{/if}

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

@@ -0,0 +1,17 @@
+import type { IconData } from '../display/Icon.svelte';
+type Props = {
+    onclick?: () => void;
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning' | 'outlined' | 'ghost';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    class?: string;
+    isLoading?: boolean;
+    icon: IconData;
+    isDisabled?: boolean;
+    hasShadow?: boolean;
+    isSolid?: boolean;
+};
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;