ui-svelte 0.2.3 → 0.2.5

package/dist/charts/Candlestick.svelte.d.ts

@@ -1,4 +1,10 @@
+import { type Snippet } from 'svelte';
 type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'muted';
+type Size = 'sm' | 'md' | 'lg' | 'xl';
+type Theme = 'default' | 'tradingview' | 'dark' | 'light';
+type CandleStyle = 'filled' | 'hollow' | 'heikinashi' | 'line' | 'area';
+type ScaleType = 'linear' | 'log';
+type GridStyle = 'solid' | 'dashed' | 'dotted' | 'none';
 type CandleData = {
     date: string | Date;
     open: number;
@@ -7,6 +13,20 @@ type CandleData = {
     close: number;
     volume?: number;
 };
+type Indicator = {
+    type: 'sma';
+    period: number;
+    color?: Color;
+} | {
+    type: 'ema';
+    period: number;
+    color?: Color;
+} | {
+    type: 'bollinger';
+    period: number;
+    stdDev?: number;
+    color?: Color;
+};
 type Margin = {
     top: number;
     right: number;
@@ -32,6 +52,26 @@ type Props = {
     maxVisibleCandles?: number;
     rootClass?: string;
     chartClass?: string;
+    size?: Size;
+    theme?: Theme;
+    candleStyle?: CandleStyle;
+    scaleType?: ScaleType;
+    showCrosshair?: boolean;
+    showYAxisLabels?: boolean;
+    showXAxisLabels?: boolean;
+    gridStyle?: GridStyle;
+    showLastPrice?: boolean;
+    indicators?: Indicator[];
+    onClick?: (candle: CandleData, index: number) => void;
+    onRangeChange?: (start: number, end: number) => void;
+    priceFormatter?: (value: number) => string;
+    dateFormatter?: (date: Date | string) => string;
+    animated?: boolean;
+    tooltipContent?: Snippet<[{
+        candle: CandleData;
+        change: number;
+        changePercent: number;
+    }]>;
 };
 declare const Candlestick: import("svelte").Component<Props, {}, "">;
 type Candlestick = ReturnType<typeof Candlestick>;

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

@@ -1,10 +1,42 @@
 @layer components {
 	.arc-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;
+	}
+
+	.arc-chart-container.flex-row {
+		@apply flex-col md:flex-row;
+	}
+
+	.arc-chart-container.flex-row-reverse {
+		@apply flex-col-reverse md:flex-row-reverse;
+	}
+
+	.arc-chart-container.flex-col {
+		@apply flex-col;
+	}
+
+	.arc-chart-container.flex-col-reverse {
+		@apply flex-col-reverse;
 	}
 
 	.arc-chart {
-		@apply relative flex items-center justify-center w-auto h-56;
+		@apply relative flex items-center justify-center w-auto;
+	}
+
+	.arc-chart.is-sm {
+		@apply h-[150px];
+	}
+
+	.arc-chart.is-md {
+		@apply h-56;
+	}
+
+	.arc-chart.is-lg {
+		@apply h-[300px];
+	}
+
+	.arc-chart.is-xl {
+		@apply h-[400px];
 	}
 
 	.arc-chart-svg {
@@ -14,20 +46,37 @@
 	.arc-chart-background {
 		@apply fill-none stroke-muted;
 		stroke-opacity: 0.2;
-		stroke-linecap: round;
 	}
 
 	.arc-chart-arc {
 		@apply fill-none transition-all duration-200 ease-in-out cursor-pointer;
-		stroke-linecap: round;
 	}
 
-	.arc-chart-arc:hover {
+	.arc-chart-arc:hover,
+	.arc-chart-arc.is-hovered {
 		opacity: 0.8;
 		transform: scale(1.02);
 		transform-origin: center;
 	}
 
+	.arc-chart-arc.is-selected {
+		stroke-width: calc(100% + 4px);
+		filter: brightness(1.1);
+	}
+
+	.arc-chart-arc.is-disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.arc-chart-arc.has-glow {
+		filter: drop-shadow(0 0 8px currentColor);
+	}
+
+	.arc-chart-arc.has-glow.is-selected {
+		filter: drop-shadow(0 0 12px currentColor) brightness(1.1);
+	}
+
 	.arc-chart-arc.is-primary {
 		@apply stroke-primary;
 	}
@@ -97,10 +146,19 @@
 		@apply fill-on-background opacity-70;
 	}
 
+	.arc-chart-inline-label {
+		@apply fill-on-background font-medium;
+		pointer-events: none;
+	}
+
 	.arc-chart-min-max {
 		@apply fill-on-background;
 	}
 
+	.arc-chart-center-custom {
+		@apply flex items-center justify-center w-full h-full text-center;
+	}
+
 	.arc-chart-tooltip {
 		position: fixed;
 		pointer-events: none;
@@ -188,7 +246,15 @@
 	}
 
 	.arc-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;
+	}
+
+	.arc-chart-legend.flex-col {
+		@apply flex-wrap md:flex-col;
+	}
+
+	.arc-chart-legend.flex-row {
+		@apply flex-row flex-wrap;
 	}
 
 	.arc-chart-legend-item {
@@ -199,6 +265,10 @@
 		@apply opacity-80;
 	}
 
+	.arc-chart-legend-item.is-selected {
+		@apply font-semibold;
+	}
+
 	.arc-chart-legend-color {
 		@apply w-3 h-3 rounded-sm;
 	}

package/dist/charts/css/candlestick.css

@@ -3,12 +3,68 @@
 		@apply relative w-full h-full;
 	}
 
+	.candlestick-chart-container.is-sm {
+		height: 200px;
+	}
+
+	.candlestick-chart-container.is-md {
+		height: 350px;
+	}
+
+	.candlestick-chart-container.is-lg {
+		height: 500px;
+	}
+
+	.candlestick-chart-container.is-xl {
+		height: 700px;
+	}
+
+	.candlestick-chart-container.theme-tradingview {
+		--chart-text: #d1d4dc;
+		--chart-grid: #363c4e;
+	}
+
+	.candlestick-chart-container.theme-dark {
+		--chart-text: #e0e0e0;
+		--chart-grid: #2d2d44;
+	}
+
+	.candlestick-chart-container.theme-light {
+		--chart-text: #333333;
+		--chart-grid: #e0e0e0;
+	}
+
 	.candlestick-chart {
-		@apply relative w-full h-56 text-on-muted;
+		@apply relative w-full h-full text-on-muted;
+	}
+
+	.candlestick-chart.is-sm {
+		height: 200px;
+	}
+
+	.candlestick-chart.is-md {
+		height: 350px;
+	}
+
+	.candlestick-chart.is-lg {
+		height: 500px;
+	}
+
+	.candlestick-chart.is-xl {
+		height: 700px;
 	}
 
 	.candlestick-chart-svg {
 		@apply w-full h-full overflow-visible;
+		cursor: crosshair;
+	}
+
+	.candlestick-chart-svg:active {
+		cursor: grabbing;
+	}
+
+	.candlestick-chart-dragging {
+		cursor: grabbing !important;
 	}
 
 	.candlestick-chart-axis-line {
@@ -16,6 +72,11 @@
 		stroke-width: 1;
 	}
 
+	.theme-tradingview .candlestick-chart-axis-line,
+	.theme-dark .candlestick-chart-axis-line {
+		stroke: var(--chart-grid);
+	}
+
 	.candlestick-chart-axis-label {
 		@apply fill-on-muted text-xs;
 		user-select: none;
@@ -24,21 +85,37 @@
 		-ms-user-select: none;
 	}
 
+	.theme-tradingview .candlestick-chart-axis-label,
+	.theme-dark .candlestick-chart-axis-label,
+	.theme-light .candlestick-chart-axis-label {
+		fill: var(--chart-text);
+	}
+
 	.candlestick-chart-grid-line {
 		@apply stroke-muted;
 		stroke-opacity: 0.3;
 		stroke-width: 1;
-		stroke-dasharray: 2, 2;
+	}
+
+	.theme-tradingview .candlestick-chart-grid-line,
+	.theme-dark .candlestick-chart-grid-line {
+		stroke: var(--chart-grid);
+		stroke-opacity: 0.5;
 	}
 
 	.candlestick-chart-candle {
-		@apply cursor-pointer;
+		@apply cursor-pointer transition-opacity duration-150;
 	}
 
 	.candlestick-chart-candle:hover {
 		@apply opacity-80;
 	}
 
+	.candlestick-chart-candle.is-hollow {
+		fill: transparent !important;
+		stroke-width: 1.5;
+	}
+
 	.candlestick-chart-candle.is-primary {
 		@apply fill-primary stroke-primary;
 	}
@@ -127,6 +204,126 @@
 		@apply fill-muted;
 	}
 
+	.candlestick-chart-line.is-primary {
+		@apply stroke-primary;
+	}
+
+	.candlestick-chart-line.is-secondary {
+		@apply stroke-secondary;
+	}
+
+	.candlestick-chart-line.is-success {
+		@apply stroke-success;
+	}
+
+	.candlestick-chart-line.is-info {
+		@apply stroke-info;
+	}
+
+	.candlestick-chart-line.is-warning {
+		@apply stroke-warning;
+	}
+
+	.candlestick-chart-line.is-danger {
+		@apply stroke-danger;
+	}
+
+	.candlestick-chart-line.is-muted {
+		@apply stroke-muted;
+	}
+
+	.candlestick-chart-area {
+		@apply opacity-20;
+	}
+
+	.candlestick-chart-area.is-primary {
+		@apply fill-primary;
+	}
+
+	.candlestick-chart-area.is-secondary {
+		@apply fill-secondary;
+	}
+
+	.candlestick-chart-area.is-success {
+		@apply fill-success;
+	}
+
+	.candlestick-chart-area.is-info {
+		@apply fill-info;
+	}
+
+	.candlestick-chart-area.is-warning {
+		@apply fill-warning;
+	}
+
+	.candlestick-chart-area.is-danger {
+		@apply fill-danger;
+	}
+
+	.candlestick-chart-area.is-muted {
+		@apply fill-muted;
+	}
+
+	.candlestick-chart-indicator {
+		pointer-events: none;
+	}
+
+	.candlestick-chart-bollinger-band {
+		stroke-dasharray: 2, 2;
+	}
+
+	.candlestick-chart-last-price {
+		stroke-width: 1;
+	}
+
+	.candlestick-chart-last-price.is-success {
+		@apply stroke-success;
+	}
+
+	.candlestick-chart-last-price.is-danger {
+		@apply stroke-danger;
+	}
+
+	.candlestick-chart-last-price.is-primary {
+		@apply stroke-primary;
+	}
+
+	.candlestick-chart-last-price-label-bg {
+		@apply opacity-90;
+	}
+
+	.candlestick-chart-last-price-label-bg.is-success {
+		@apply fill-success;
+	}
+
+	.candlestick-chart-last-price-label-bg.is-danger {
+		@apply fill-danger;
+	}
+
+	.candlestick-chart-last-price-label-bg.is-primary {
+		@apply fill-primary;
+	}
+
+	.candlestick-chart-last-price-label {
+		@apply fill-on-primary font-semibold;
+	}
+
+	.candlestick-chart-crosshair {
+		@apply stroke-on-muted;
+		stroke-width: 1;
+		stroke-dasharray: 4, 4;
+		opacity: 0.7;
+		pointer-events: none;
+	}
+
+	.candlestick-chart-crosshair-label-bg {
+		@apply fill-on-muted opacity-90;
+	}
+
+	.candlestick-chart-crosshair-label {
+		@apply fill-muted font-medium;
+	}
+
 	.candlestick-chart-tooltip {
 		position: fixed;
 		pointer-events: none;
@@ -162,6 +359,19 @@
 		@apply font-semibold;
 	}
 
+	.candlestick-chart-tooltip-value.is-bullish {
+		color: var(--color-success, #22c55e);
+	}
+
+	.candlestick-chart-tooltip-value.is-bearish {
+		color: var(--color-danger, #ef4444);
+	}
+
+	.candlestick-chart-tooltip-change {
+		@apply pt-1 mt-1;
+		border-top: 1px solid rgba(255, 255, 255, 0.2);
+	}
+
 	.candlestick-chart-tooltip-volume {
 		@apply pt-1 mt-1;
 		border-top: 1px solid rgba(255, 255, 255, 0.2);
@@ -171,6 +381,27 @@
 		@apply flex flex-col items-center justify-center h-full;
 	}
 
+	.candlestick-chart-loading-skeleton {
+		@apply w-full h-full bg-muted opacity-20 rounded-md;
+		background: linear-gradient(
+			90deg,
+			var(--color-muted) 25%,
+			var(--color-on-muted) 50%,
+			var(--color-muted) 75%
+		);
+		background-size: 200% 100%;
+		animation: candlestick-skeleton 1.5s ease-in-out infinite;
+	}
+
+	@keyframes candlestick-skeleton {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
 	.candlestick-chart-loading-icon {
 		@apply h-12 w-auto text-primary;
 	}
@@ -183,14 +414,6 @@
 		@apply w-12 h-12 mb-2;
 	}
 
-	.candlestick-chart-dragging {
-		cursor: grabbing !important;
-	}
-
-	.candlestick-chart-svg {
-		cursor: grab;
-	}
-
 	.candlestick-chart-scrollbar {
 		@apply relative w-full h-2 bg-muted rounded-full mt-2;
 	}

package/dist/control/Audio.svelte

@@ -194,18 +194,14 @@
 		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 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>
 	</div>
 
 	<span class="media-time">{duration > 0 ? formatTime(duration - currentTime) : '0:00'}</span>

package/dist/control/Button.svelte

@@ -9,6 +9,7 @@
 		children: Snippet;
 		onclick?: () => void;
 		href?: string;
+		target?: '_self' | '_blank' | '_parent' | '_top';
 		type?: 'button' | 'submit' | 'reset';
 		variant?:
 			| 'primary'
@@ -34,6 +35,7 @@
 		children,
 		onclick,
 		href,
+		target,
 		type = 'button',
 		variant = 'primary',
 		size = 'md',
@@ -89,7 +91,7 @@
 {/snippet}
 
 {#if href}
-	<a class={baseClasses} {href}>
+	<a class={baseClasses} {href} {target}>
 		{@render content()}
 	</a>
 {:else}

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

@@ -4,6 +4,7 @@ type Props = {
     children: Snippet;
     onclick?: () => void;
     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';

package/dist/control/IconButton.svelte

@@ -7,6 +7,7 @@
 	type Props = {
 		onclick?: () => void;
 		href?: string;
+		target?: '_self' | '_blank' | '_parent' | '_top';
 		type?: 'button' | 'submit' | 'reset';
 		variant?:
 			| 'primary'
@@ -29,6 +30,7 @@
 	const {
 		onclick,
 		href,
+		target,
 		type = 'button',
 		variant = 'primary',
 		size = 'md',
@@ -76,7 +78,7 @@
 {/snippet}
 
 {#if href}
-	<a class={baseClasses} {href}>
+	<a class={baseClasses} {href} {target}>
 		{@render content()}
 	</a>
 {:else}

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

@@ -2,6 +2,7 @@ import type { IconData } from '../display/Icon.svelte';
 type Props = {
     onclick?: () => void;
     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';

package/dist/control/ToggleGroup.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { IconData } from '../display/Icon.svelte';
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+
+	type ToggleGroupItem = {
+		id: string;
+		label: string;
+		icon?: IconData;
+	};
+
+	type Props = {
+		items: ToggleGroupItem[];
+		value?: string;
+		onchange?: (value: string) => void;
+		variant?: 'default' | 'primary' | 'secondary' | 'outlined';
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		class?: string;
+		isWide?: boolean;
+		isVertical?: boolean;
+		isDisabled?: boolean;
+	};
+
+	let {
+		items,
+		value = $bindable(items[0]?.id ?? ''),
+		onchange,
+		variant = 'default',
+		size = 'md',
+		class: className,
+		isWide,
+		isVertical,
+		isDisabled
+	}: Props = $props();
+
+	const variantClasses: Record<string, string> = {
+		default: '',
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		outlined: 'is-outlined'
+	};
+
+	const sizeClasses: Record<string, string> = {
+		xs: 'is-xs',
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	let groupClasses = $derived(
+		cn(
+			'toggle-group',
+			variantClasses[variant],
+			isWide && 'is-wide',
+			isVertical && 'is-vertical',
+			className
+		)
+	);
+
+	function handleClick(id: string) {
+		if (isDisabled) return;
+		value = id;
+		onchange?.(id);
+	}
+</script>
+
+<div class={groupClasses} role="group">
+	{#each items as item}
+		<button
+			type="button"
+			class={cn('toggle-group-item', sizeClasses[size], value === item.id && 'is-active')}
+			onclick={() => handleClick(item.id)}
+			disabled={isDisabled}
+			aria-pressed={value === item.id}
+		>
+			{#if item.icon}
+				<Icon icon={item.icon} />
+			{/if}
+			{item.label}
+		</button>
+	{/each}
+</div>

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

@@ -0,0 +1,20 @@
+import type { IconData } from '../display/Icon.svelte';
+type ToggleGroupItem = {
+    id: string;
+    label: string;
+    icon?: IconData;
+};
+type Props = {
+    items: ToggleGroupItem[];
+    value?: string;
+    onchange?: (value: string) => void;
+    variant?: 'default' | 'primary' | 'secondary' | 'outlined';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    class?: string;
+    isWide?: boolean;
+    isVertical?: boolean;
+    isDisabled?: boolean;
+};
+declare const ToggleGroup: import("svelte").Component<Props, {}, "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/control/css/btn.css

@@ -194,7 +194,7 @@
 	}
 
 	.btn-close {
-		@apply absolute right-1 top-1;
+		@apply absolute right-2 top-2;
 	}
 	.btn-close-icon {
 		@apply h-4 w-4 cursor-pointer;