ui-svelte 0.2.12 → 0.2.14

package/dist/display/Accordion.svelte

@@ -26,7 +26,7 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'default';
+			| 'background';
 		multiple?: boolean;
 		rootClass?: string;
 		itemClass?: string;
@@ -37,7 +37,7 @@
 	const {
 		items = [],
 		variant = 'ghost',
-		color = 'default',
+		color = 'background',
 		multiple = false,
 		rootClass,
 		itemClass,
@@ -74,7 +74,7 @@
 		warning: 'is-warning',
 		danger: 'is-danger',
 		surface: 'is-surface',
-		default: 'is-default'
+		background: 'is-background'
 	};
 
 	function toggleItem(itemId: string, disabled?: boolean) {

package/dist/display/Accordion.svelte.d.ts

@@ -9,7 +9,7 @@ type AccordionItem = {
 type Props = {
     items: AccordionItem[];
     variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
-    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
     multiple?: boolean;
     rootClass?: string;
     itemClass?: string;

package/dist/display/Card.svelte

@@ -16,7 +16,7 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'default';
+			| 'background';
 		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
 		rootClass?: string;
 		headerClass?: string;
@@ -32,7 +32,7 @@
 		footer,
 		rootClass,
 		cover,
-		color = 'default',
+		color = 'surface',
 		variant = 'outlined',
 		headerClass,
 		bodyClass,
@@ -50,7 +50,7 @@
 		danger: 'is-danger',
 		warning: 'is-warning',
 		surface: 'is-surface',
-		default: 'is-default'
+		background: 'is-background'
 	};
 
 	const variants = {

package/dist/display/Card.svelte.d.ts

@@ -4,7 +4,7 @@ type Props = {
     header?: Snippet;
     footer?: Snippet;
     cover?: string;
-    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
     variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
     rootClass?: string;
     headerClass?: string;

package/dist/display/Code.svelte

@@ -20,7 +20,7 @@
 	let {
 		code,
 		lang,
-		lightTheme = 'catppuccin-latte',
+		lightTheme = 'github-light',
 		darkTheme = 'catppuccin-frappe',
 		disableCopy,
 		hideLang,

package/dist/display/Collapsible.svelte

@@ -21,7 +21,7 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'default';
+			| 'background';
 		rootClass?: string;
 		headerClass?: string;
 		contentClass?: string;
@@ -34,7 +34,7 @@
 		disabled = false,
 		defaultOpen = false,
 		variant = 'ghost',
-		color = 'default',
+		color = 'background',
 		rootClass,
 		headerClass,
 		contentClass
@@ -59,7 +59,7 @@
 		warning: 'is-warning',
 		danger: 'is-danger',
 		surface: 'is-surface',
-		default: 'is-default'
+		background: 'is-background'
 	};
 
 	function toggle() {

package/dist/display/Collapsible.svelte.d.ts

@@ -6,7 +6,7 @@ type Props = {
     disabled?: boolean;
     defaultOpen?: boolean;
     variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
-    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
     rootClass?: string;
     headerClass?: string;
     contentClass?: string;

package/dist/display/Countdown.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import { onMount } from 'svelte';
+
+	type Props = {
+		targetDate: Date;
+		showDays?: boolean;
+		showHours?: boolean;
+		showMinutes?: boolean;
+		showSeconds?: boolean;
+		size?: 'sm' | 'md' | 'lg' | 'xl';
+		color?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface';
+		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+		labels?: {
+			days?: string;
+			hours?: string;
+			minutes?: string;
+			seconds?: string;
+		};
+		onComplete?: () => void;
+		class?: string;
+	};
+
+	const {
+		targetDate,
+		showDays = true,
+		showHours = true,
+		showMinutes = true,
+		showSeconds = true,
+		size = 'md',
+		color = 'primary',
+		variant = 'solid',
+		labels = {
+			days: 'Days',
+			hours: 'Hours',
+			minutes: 'Minutes',
+			seconds: 'Seconds'
+		},
+		onComplete,
+		class: className
+	}: Props = $props();
+
+	let days = $state(0);
+	let hours = $state(0);
+	let minutes = $state(0);
+	let seconds = $state(0);
+	let isComplete = $state(false);
+
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning',
+		surface: 'is-surface'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined',
+		ghost: 'is-ghost'
+	};
+
+	const sizes = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg',
+		xl: 'is-xl'
+	};
+
+	function padNumber(num: number): string {
+		return num.toString().padStart(2, '0');
+	}
+
+	function calculateTimeRemaining() {
+		const now = new Date().getTime();
+		const target = targetDate.getTime();
+		const difference = target - now;
+
+		if (difference <= 0) {
+			days = 0;
+			hours = 0;
+			minutes = 0;
+			seconds = 0;
+			if (!isComplete) {
+				isComplete = true;
+				onComplete?.();
+			}
+			return;
+		}
+
+		days = Math.floor(difference / (1000 * 60 * 60 * 24));
+		hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+		minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+		seconds = Math.floor((difference % (1000 * 60)) / 1000);
+	}
+
+	onMount(() => {
+		calculateTimeRemaining();
+		const interval = setInterval(calculateTimeRemaining, 1000);
+		return () => clearInterval(interval);
+	});
+</script>
+
+<div class={cn('countdown', colors[color], variants[variant], sizes[size], className)}>
+	{#if showDays}
+		<div class="countdown-unit">
+			<div class="countdown-box">
+				<span class="countdown-digit">{padNumber(days)}</span>
+			</div>
+			{#if labels?.days}
+				<span class="countdown-label">{labels.days}</span>
+			{/if}
+		</div>
+	{/if}
+
+	{#if showHours}
+		{#if showDays}
+			<span class="countdown-separator">:</span>
+		{/if}
+		<div class="countdown-unit">
+			<div class="countdown-box">
+				<span class="countdown-digit">{padNumber(hours)}</span>
+			</div>
+			{#if labels?.hours}
+				<span class="countdown-label">{labels.hours}</span>
+			{/if}
+		</div>
+	{/if}
+
+	{#if showMinutes}
+		{#if showHours}
+			<span class="countdown-separator">:</span>
+		{/if}
+		<div class="countdown-unit">
+			<div class="countdown-box">
+				<span class="countdown-digit">{padNumber(minutes)}</span>
+			</div>
+			{#if labels?.minutes}
+				<span class="countdown-label">{labels.minutes}</span>
+			{/if}
+		</div>
+	{/if}
+
+	{#if showSeconds}
+		{#if showMinutes}
+			<span class="countdown-separator">:</span>
+		{/if}
+		<div class="countdown-unit">
+			<div class="countdown-box">
+				<span class="countdown-digit">{padNumber(seconds)}</span>
+			</div>
+			{#if labels?.seconds}
+				<span class="countdown-label">{labels.seconds}</span>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/display/Countdown.svelte.d.ts

@@ -0,0 +1,21 @@
+type Props = {
+    targetDate: Date;
+    showDays?: boolean;
+    showHours?: boolean;
+    showMinutes?: boolean;
+    showSeconds?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+    labels?: {
+        days?: string;
+        hours?: string;
+        minutes?: string;
+        seconds?: string;
+    };
+    onComplete?: () => void;
+    class?: string;
+};
+declare const Countdown: import("svelte").Component<Props, {}, "">;
+type Countdown = ReturnType<typeof Countdown>;
+export default Countdown;

package/dist/display/Item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Avatar, Icon } from '../index.js';
+	import { ChevronRight24RegularIcon } from '../icons/index.js';
 	import { cn } from '../utils/class-names.js';
 	import type { Snippet } from 'svelte';
 	import type { IconData } from './Icon.svelte';
@@ -30,6 +31,8 @@
 		isCompact?: boolean;
 		hasDivider?: boolean;
 		hasShadow?: boolean;
+		hasBullet?: boolean;
+		hasIndicator?: boolean;
 		onclick?: (id: string | number) => void;
 		actions?: Snippet;
 		class?: string;
@@ -52,6 +55,8 @@
 		isCompact,
 		hasDivider,
 		hasShadow,
+		hasBullet,
+		hasIndicator,
 		onclick,
 		actions,
 		class: className
@@ -106,6 +111,8 @@
 {#snippet itemContent()}
 	{#if icon}
 		<Icon {icon} class="h-6 w-auto" />
+	{:else if hasBullet}
+		<span class="item-bullet"></span>
 	{/if}
 	{#if src}
 		<Avatar {src} {status} {size} variant="soft" />
@@ -121,6 +128,11 @@
 			{@render actions()}
 		</div>
 	{/if}
+	{#if hasIndicator}
+		<span class="item-indicator">
+			<Icon icon={ChevronRight24RegularIcon} />
+		</span>
+	{/if}
 {/snippet}
 
 {#if href && !isDisabled}

package/dist/display/Item.svelte.d.ts

@@ -17,6 +17,8 @@ type Props = {
     isCompact?: boolean;
     hasDivider?: boolean;
     hasShadow?: boolean;
+    hasBullet?: boolean;
+    hasIndicator?: boolean;
     onclick?: (id: string | number) => void;
     actions?: Snippet;
     class?: string;

package/dist/display/Marquee.svelte

@@ -77,7 +77,6 @@
 			checkOverflow();
 		});
 
-		// Observer para detectar cambios en el tamaño
 		const resizeObserver = new ResizeObserver(() => {
 			checkOverflow();
 		});
@@ -142,7 +141,6 @@
 			</div>
 
 			{#if shouldAnimate}
-				<!-- Duplicado para el efecto infinito -->
 				<div
 					class={cn('marquee-content', isVertical && 'is-vertical')}
 					aria-hidden="true"

package/dist/display/Section.svelte

@@ -18,7 +18,7 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'default';
+			| 'background';
 		variant?: 'solid' | 'soft' | 'ghost';
 		isBoxed?: boolean;
 	};
@@ -29,7 +29,7 @@
 		coverClass,
 		overlayClass,
 		cover,
-		color = 'default',
+		color = 'background',
 		variant = 'ghost',
 		children,
 		isBoxed
@@ -44,7 +44,7 @@
 		danger: 'is-danger',
 		warning: 'is-warning',
 		surface: 'is-surface',
-		default: 'is-default'
+		background: 'is-background'
 	};
 
 	const variants = {

package/dist/display/Section.svelte.d.ts

@@ -6,7 +6,7 @@ type Props = {
     overlayClass?: string;
     children: Snippet;
     cover?: string;
-    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
     variant?: 'solid' | 'soft' | 'ghost';
     isBoxed?: boolean;
 };

package/dist/display/css/accordion.css

@@ -131,12 +131,12 @@
 					@apply text-on-surface;
 				}
 			}
-			&.is-default .accordion-item {
+			&.is-background .accordion-item {
 				.accordion-header:hover {
-					@apply text-on-muted;
+					@apply text-on-background;
 				}
 				.accordion-header.is-open {
-					@apply text-on-muted;
+					@apply text-on-background;
 				}
 			}
 		}
@@ -218,13 +218,13 @@
 					@apply bg-surface text-on-surface;
 				}
 			}
-			&.is-default .accordion-item {
-				@apply bg-muted/20;
+			&.is-background .accordion-item {
+				@apply bg-background/20;
 				.accordion-header:hover {
-					@apply bg-muted/30;
+					@apply bg-background/30;
 				}
 				.accordion-header.is-open {
-					@apply bg-muted/50;
+					@apply bg-background;
 				}
 			}
 		}
@@ -298,12 +298,12 @@
 					@apply bg-surface text-on-surface;
 				}
 			}
-			&.is-default .accordion-item {
+			&.is-background .accordion-item {
 				.accordion-header:hover {
-					@apply bg-muted/50;
+					@apply bg-background/50;
 				}
 				.accordion-header.is-open {
-					@apply bg-on-background text-background;
+					@apply bg-background text-on-background;
 				}
 			}
 		}
@@ -381,13 +381,13 @@
 					@apply bg-surface text-on-surface;
 				}
 			}
-			&.is-default .accordion-item {
-				@apply border border-muted;
+			&.is-background .accordion-item {
+				@apply border border-background;
 				.accordion-header:hover {
-					@apply bg-muted/30;
+					@apply bg-background/30;
 				}
 				.accordion-header.is-open {
-					@apply bg-muted/20;
+					@apply bg-background/20;
 				}
 			}
 		}

package/dist/display/css/alert.css

@@ -3,26 +3,53 @@
 		@apply flex rounded-box text-sm w-full px-4 py-2 md:px-6 md:py-4 gap-4;
 
 		&.is-soft {
-			&.is-primary { @apply bg-on-primary text-primary; }
-			&.is-secondary { @apply bg-on-secondary text-secondary; }
-			&.is-muted { @apply bg-muted text-on-muted; }
-			&.is-success { @apply bg-on-success text-success; }
-			&.is-info { @apply bg-on-info text-info; }
-			&.is-warning { @apply bg-on-warning text-warning; }
-			&.is-danger { @apply bg-on-danger text-danger; }
+			&.is-primary {
+				@apply bg-soft-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-success {
+				@apply bg-soft-success text-success;
+			}
+			&.is-info {
+				@apply bg-soft-info text-info;
+			}
+			&.is-warning {
+				@apply bg-soft-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-soft-danger text-danger;
+			}
 		}
 
 		&.is-solid {
-			&.is-primary { @apply bg-primary text-on-primary; }
-			&.is-secondary { @apply bg-secondary text-on-secondary; }
-			&.is-muted { @apply bg-on-muted text-muted; }
-			&.is-success { @apply bg-success text-on-success; }
-			&.is-info { @apply bg-info text-on-info; }
-			&.is-warning { @apply bg-warning text-on-warning; }
-			&.is-danger { @apply bg-danger text-on-danger; }
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-success {
+				@apply bg-success text-on-success;
+			}
+			&.is-info {
+				@apply bg-info text-on-info;
+			}
+			&.is-warning {
+				@apply bg-warning text-on-warning;
+			}
+			&.is-danger {
+				@apply bg-danger text-on-danger;
+			}
 		}
 
-
 		.alert-start {
 			@apply flex items-center justify-start;