ui-svelte 0.2.11 → 0.2.12

package/dist/charts/css/pie-chart.css

@@ -1,10 +1,42 @@
 @layer components {
 	.pie-chart-container {
-		@apply relative w-full flex flex-col md:flex-row justify-center items-center gap-4;
+		@apply relative w-full flex justify-center items-center gap-4;
+	}
+
+	.pie-chart-container.flex-row {
+		@apply flex-col md:flex-row;
+	}
+
+	.pie-chart-container.flex-row-reverse {
+		@apply flex-col-reverse md:flex-row-reverse;
+	}
+
+	.pie-chart-container.flex-col {
+		@apply flex-col;
+	}
+
+	.pie-chart-container.flex-col-reverse {
+		@apply flex-col-reverse;
 	}
 
 	.pie-chart {
-		@apply relative flex items-center justify-center w-auto h-56 text-on-muted;
+		@apply relative flex items-center justify-center w-auto text-on-muted;
+	}
+
+	.pie-chart.is-sm {
+		@apply h-[150px];
+	}
+
+	.pie-chart.is-md {
+		@apply h-56;
+	}
+
+	.pie-chart.is-lg {
+		@apply h-[300px];
+	}
+
+	.pie-chart.is-xl {
+		@apply h-[400px];
 	}
 
 	.pie-chart-svg {
@@ -13,15 +45,34 @@
 
 	.pie-chart-slice {
 		stroke-width: 2;
-		@apply cursor-pointer transition-all duration-200 ease-in-out;
+		@apply cursor-pointer transition-all duration-300 ease-in-out;
 		transform-origin: center;
 	}
 
-	.pie-chart-slice:hover {
+	.pie-chart-slice:hover,
+	.pie-chart-slice.is-hovered {
 		opacity: 0.8;
 		transform: scale(1.02);
 	}
 
+	.pie-chart-slice.is-selected {
+		filter: brightness(1.1);
+		transform: scale(1.04);
+	}
+
+	.pie-chart-slice.is-disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.pie-chart-slice.has-glow {
+		filter: drop-shadow(0 0 8px currentColor);
+	}
+
+	.pie-chart-slice.has-glow.is-selected {
+		filter: drop-shadow(0 0 12px currentColor) brightness(1.1);
+	}
+
 	.pie-chart-slice.is-primary {
 		@apply fill-primary stroke-on-primary;
 	}
@@ -53,15 +104,19 @@
 	.pie-chart-slice-label {
 		fill: white;
 		pointer-events: none;
-		@apply text-xs font-medium;
+		@apply font-medium;
 	}
 
 	.pie-chart-center-value {
-		@apply fill-on-muted text-2xl font-bold;
+		@apply fill-on-muted font-bold;
 	}
 
 	.pie-chart-center-label {
-		@apply fill-on-muted text-xs opacity-70;
+		@apply fill-on-muted opacity-70;
+	}
+
+	.pie-chart-center-custom {
+		@apply flex items-center justify-center w-full h-full text-center;
 	}
 
 	.pie-chart-tooltip {
@@ -80,61 +135,78 @@
 	}
 
 	.pie-chart-tooltip-title {
-		@apply font-semibold mb-1;
+		font-weight: 600;
+		margin-bottom: 0.25rem;
 	}
 
 	.pie-chart-tooltip-row {
-		@apply flex items-center gap-2;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
 	}
 
 	.pie-chart-tooltip-color {
-		@apply w-2 h-2 rounded-full;
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 50%;
 	}
 
 	.pie-chart-tooltip-color.is-primary {
-		@apply bg-primary;
+		background: var(--color-primary, #3b82f6);
 	}
 
 	.pie-chart-tooltip-color.is-secondary {
-		@apply bg-secondary;
+		background: var(--color-secondary, #6366f1);
 	}
 
 	.pie-chart-tooltip-color.is-success {
-		@apply bg-success;
+		background: var(--color-success, #22c55e);
 	}
 
 	.pie-chart-tooltip-color.is-info {
-		@apply bg-info;
+		background: var(--color-info, #06b6d4);
 	}
 
 	.pie-chart-tooltip-color.is-warning {
-		@apply bg-warning;
+		background: var(--color-warning, #f59e0b);
 	}
 
 	.pie-chart-tooltip-color.is-danger {
-		@apply bg-danger;
+		background: var(--color-danger, #ef4444);
 	}
 
 	.pie-chart-tooltip-color.is-muted {
-		@apply bg-muted;
+		background: var(--color-muted, #9ca3af);
 	}
 
 	.pie-chart-tooltip-value {
-		@apply font-semibold;
+		font-weight: 600;
 	}
 
 	.pie-chart-legend {
-		@apply flex flex-wrap md:flex-col gap-2 items-center justify-center text-sm text-on-muted text-nowrap;
+		@apply flex gap-2 items-center justify-center text-sm text-on-muted text-nowrap;
+	}
+
+	.pie-chart-legend.flex-col {
+		@apply flex-wrap md:flex-col;
+	}
+
+	.pie-chart-legend.flex-row {
+		@apply flex-row flex-wrap;
 	}
 
 	.pie-chart-legend-item {
-		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-200;
+		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-300;
 	}
 
 	.pie-chart-legend-item:hover {
 		@apply opacity-80;
 	}
 
+	.pie-chart-legend-item.is-selected {
+		@apply font-semibold;
+	}
+
 	.pie-chart-legend-color {
 		@apply w-3 h-3 rounded-sm;
 	}

package/dist/control/Audio.svelte

@@ -1,24 +1,26 @@
 <script lang="ts">
-	import { Pause24RegularIcon, Play24RegularIcon } from '../icons/index.js';
-	import { Button, Icon } from '../index.js';
+	import { PauseFilledIcon, PlayFilledIcon } from '../icons/index.js';
 	import { cn } from '../utils/class-names.js';
+	import IconButton from './IconButton.svelte';
+	import Avatar from '../display/Avatar.svelte';
 
 	type Props = {
 		class?: string;
 		src: string;
-		variant?:
-			| 'primary'
-			| 'secondary'
-			| 'muted'
-			| 'outlined'
-			| 'ghost'
-			| 'success'
-			| 'info'
-			| 'danger'
-			| 'warning';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft';
+		avatarSrc?: string;
+		subtitle?: string;
 	};
 
-	let { class: className, src, variant = 'success' }: Props = $props();
+	let {
+		class: className,
+		src,
+		color = 'primary',
+		variant = 'soft',
+		avatarSrc,
+		subtitle
+	}: Props = $props();
 
 	let audio: HTMLAudioElement;
 	let currentTime = $state(0);
@@ -30,7 +32,22 @@
 
 	const BAR_COUNT = 50;
 
-	let baseClasses = $derived(cn('media', variant, className));
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		info: 'is-info',
+		success: 'is-success',
+		warning: 'is-warning',
+		danger: 'is-danger'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
+	};
+
+	let baseClasses = $derived(cn('media', variants[variant], colors[color], className));
 
 	async function analyzeAudio() {
 		try {
@@ -44,16 +61,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);
-			waveformData = filteredData.map((value) => (value / max) * 0.8 + 0.2);
+			waveformData = filteredData.map((value) => (max > 0 ? (value / max) * 0.8 + 0.2 : 0.5));
 			isAnalyzing = false;
 
 			await audioContext.close();
@@ -176,33 +201,50 @@
 <div class={baseClasses}>
 	<audio bind:this={audio} {src}></audio>
 
-	<Button onclick={togglePlay} size="md" {variant}>
-		{#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"
-	>
-		<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}
+	<IconButton
+		icon={isPlaying ? PauseFilledIcon : PlayFilledIcon}
+		size="md"
+		variant={variant === 'solid' ? 'soft' : 'solid'}
+		{color}
+		onclick={togglePlay}
+	/>
+
+	<div class="media-content">
+		<div
+			class="media-waveform"
+			onmousedown={handleMouseDown}
+			role="slider"
+			tabindex="0"
+			aria-valuenow={Math.round((currentTime / duration) * 100) || 0}
+			aria-valuemin="0"
+			aria-valuemax="100"
+		>
+			<div class="media-bars" class:loading={isAnalyzing} class:loaded={!isAnalyzing}>
+				{#if isAnalyzing}
+					{#each Array(BAR_COUNT) as _, i}
+						{@const placeholderHeight = 0.3 + Math.sin(i * 0.3) * 0.2 + Math.random() * 0.1}
+						<div class="media-bar loading" style="height: {placeholderHeight * 100}%"></div>
+					{/each}
+				{:else}
+					{#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}
+				{/if}
+			</div>
+		</div>
+
+		<div class="media-footer">
+			<span class="media-time">{duration > 0 ? formatTime(duration - currentTime) : '0:00'}</span>
+			{#if subtitle}
+				<span class="media-subtitle">{subtitle}</span>
+			{/if}
 		</div>
 	</div>
 
-	<span class="media-time">{duration > 0 ? formatTime(duration - currentTime) : '0:00'}</span>
+	{#if avatarSrc}
+		<Avatar src={avatarSrc} size="lg" />
+	{/if}
 </div>

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

@@ -1,7 +1,10 @@
 type Props = {
     class?: string;
     src: string;
-    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'ghost' | 'success' | 'info' | 'danger' | 'warning';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft';
+    avatarSrc?: string;
+    subtitle?: string;
 };
 declare const Audio: import("svelte").Component<Props, {}, "">;
 type Audio = ReturnType<typeof Audio>;

package/dist/control/Button.svelte

@@ -11,17 +11,9 @@
 		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;
 		startIcon?: IconData;
@@ -37,30 +29,36 @@
 		href,
 		target,
 		type = 'button',
-		variant = 'primary',
+		color = 'primary',
+		variant = 'solid',
 		size = 'md',
 		class: className,
 		startIcon,
 		endIcon,
 		isLoading,
 		isWide,
-		isDisabled,
-		isSolid
+		isDisabled
 	}: Props = $props();
 
-	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',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
 		outlined: 'is-outlined',
-		ghost: 'is-ghost'
+		ghost: 'is-ghost',
+		overlay: 'is-overlay'
 	};
 
-	const sizeClasses = {
+	const sizes = {
 		xs: 'is-xs',
 		sm: 'is-sm',
 		md: 'is-md',
@@ -69,14 +67,7 @@
 	};
 
 	let baseClasses = $derived(
-		cn(
-			'btn',
-			variantClasses[variant],
-			sizeClasses[size],
-			isSolid && 'is-solid',
-			isWide && 'is-wide',
-			className
-		)
+		cn('btn', variants[variant], sizes[size], colors[color], isWide && 'is-wide', className)
 	);
 </script>
 
@@ -84,7 +75,7 @@
 	{#if startIcon}
 		<Icon icon={startIcon} class={cn(isLoading && 'invisible')} />
 	{/if}
-	<span class:invisible={isLoading}>{@render children()}</span>
+	<span class:invisible={isLoading} class="btn-label">{@render children()}</span>
 	{#if endIcon}
 		<Icon icon={endIcon} class={cn(isLoading && 'invisible')} />
 	{/if}

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

@@ -6,8 +6,9 @@ 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;
     startIcon?: IconData;

package/dist/control/IconButton.svelte

@@ -9,22 +9,13 @@
 		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;
 	};
 
 	const {
@@ -32,28 +23,34 @@
 		href,
 		target,
 		type = 'button',
-		variant = 'primary',
+		color = 'primary',
+		variant = 'solid',
 		size = 'md',
 		class: className,
 		icon,
 		isLoading,
-		isDisabled,
-		isSolid
+		isDisabled
 	}: Props = $props();
 
-	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',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
 		outlined: 'is-outlined',
-		ghost: 'is-ghost'
+		ghost: 'is-ghost',
+		overlay: 'is-overlay'
 	};
 
-	const sizeClasses = {
+	const sizes = {
 		xs: 'is-xs',
 		sm: 'is-sm',
 		md: 'is-md',
@@ -62,14 +59,7 @@
 	};
 
 	let baseClasses = $derived(
-		cn(
-			'btn',
-			'is-icon',
-			variantClasses[variant],
-			sizeClasses[size],
-			isSolid && 'is-solid',
-			className
-		)
+		cn('btn', 'is-icon', colors[color], variants[variant], sizes[size], className)
 	);
 </script>
 

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