ui-svelte 0.2.11 → 0.2.13

package/dist/display/Collapsible.svelte

@@ -11,7 +11,17 @@
 		content: Snippet | string;
 		disabled?: boolean;
 		defaultOpen?: boolean;
-		variant?: 'primary' | 'secondary' | 'muted' | 'outline';
+		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+		color?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'background';
 		rootClass?: string;
 		headerClass?: string;
 		contentClass?: string;
@@ -23,19 +33,33 @@
 		content,
 		disabled = false,
 		defaultOpen = false,
-		variant = 'muted',
+		variant = 'ghost',
+		color = 'background',
 		rootClass,
 		headerClass,
 		contentClass
 	}: Props = $props();
 
+	// svelte-ignore state_referenced_locally
 	let isOpen = $state(defaultOpen);
 
 	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined',
+		ghost: 'is-ghost'
+	};
+
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
-		outline: 'is-outline'
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		background: 'is-background'
 	};
 
 	function toggle() {
@@ -44,7 +68,9 @@
 	}
 </script>
 
-<div class={cn('collapsible', variants[variant], rootClass, disabled && 'is-disabled')}>
+<div
+	class={cn('collapsible', variants[variant], colors[color], rootClass, disabled && 'is-disabled')}
+>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn('collapsible-header', headerClass, isOpen && 'is-open')} onclick={toggle}>

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

@@ -5,7 +5,8 @@ type Props = {
     content: Snippet | string;
     disabled?: boolean;
     defaultOpen?: boolean;
-    variant?: 'primary' | 'secondary' | 'muted' | 'outline';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+    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/Empty.svelte

@@ -1,13 +1,28 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+
 	type Props = {
 		type?: 'playlist' | 'result' | 'data' | 'template';
 		class?: string;
 		title?: string;
 		description?: string;
 		href?: string;
+		target?: '_self' | '_blank' | '_parent' | '_top';
 		onclick?: () => void;
+		action?: Snippet;
 	};
-	let { type = 'template', class: className, title, description }: Props = $props();
+	let {
+		type = 'template',
+		class: className,
+		title,
+		description,
+		href,
+		target,
+		onclick,
+		action
+	}: Props = $props();
+
+	const isClickable = $derived(!!href || !!onclick);
 </script>
 
 <div class="empty">
@@ -458,11 +473,30 @@
 	{#if title || description}
 		<div class="column center">
 			{#if title}
-				<h6>{title}</h6>
+				<h6 class="feature-title">{title}</h6>
 			{/if}
 			{#if description}
-				<p>{description}</p>
+				<p class="feature-description">{description}</p>
 			{/if}
 		</div>
 	{/if}
+	{#if isClickable}
+		{#if href}
+			<a {href} {target} class="empty-action">
+				{#if action}
+					{@render action()}
+				{:else}
+					Ver más
+				{/if}
+			</a>
+		{:else}
+			<button type="button" class="empty-action" {onclick}>
+				{#if action}
+					{@render action()}
+				{:else}
+					Ver más
+				{/if}
+			</button>
+		{/if}
+	{/if}
 </div>

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

@@ -1,10 +1,13 @@
+import type { Snippet } from 'svelte';
 type Props = {
     type?: 'playlist' | 'result' | 'data' | 'template';
     class?: string;
     title?: string;
     description?: string;
     href?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
     onclick?: () => void;
+    action?: Snippet;
 };
 declare const Empty: import("svelte").Component<Props, {}, "">;
 type Empty = ReturnType<typeof Empty>;

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';
@@ -10,7 +11,17 @@
 		description?: string;
 		icon?: IconData;
 		src?: string;
-		variant?: 'ghost' | 'outlined' | 'surface' | 'primary' | 'secondary' | 'muted';
+		color?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'default';
+		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
 		size?: 'sm' | 'md' | 'lg';
 		status?: 'online' | 'offline' | 'busy' | 'away';
 		href?: string;
@@ -20,9 +31,10 @@
 		isCompact?: boolean;
 		hasDivider?: boolean;
 		hasShadow?: boolean;
+		hasBullet?: boolean;
+		hasIndicator?: boolean;
 		onclick?: (id: string | number) => void;
 		actions?: Snippet;
-		isSolid?: boolean;
 		class?: string;
 	};
 
@@ -32,6 +44,7 @@
 		description,
 		src,
 		icon,
+		color = 'default',
 		variant = 'ghost',
 		size = 'md',
 		status,
@@ -42,19 +55,30 @@
 		isCompact,
 		hasDivider,
 		hasShadow,
+		hasBullet,
+		hasIndicator,
 		onclick,
 		actions,
-		isSolid,
 		class: className
 	}: Props = $props();
 
-	const variantClasses = {
-		ghost: 'is-ghost',
-		outlined: 'is-outlined',
-		surface: 'is-surface',
+	const colorClasses = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		muted: 'is-muted'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		default: 'is-default'
+	};
+
+	const variantClasses = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined',
+		ghost: 'is-ghost'
 	};
 
 	const sizeClasses = {
@@ -68,6 +92,7 @@
 	let itemClasses = $derived(
 		cn(
 			'item',
+			colorClasses[color],
 			variantClasses[variant],
 			sizeClasses[size],
 			isInteractive && !isDisabled && 'is-interactive',
@@ -75,7 +100,6 @@
 			isFocused && 'is-focused',
 			isDisabled && 'is-disabled',
 			isCompact && 'is-compact',
-			isSolid && 'is-solid',
 			hasDivider && 'has-divider',
 			hasShadow && 'has-shadow',
 			!!src && !label && !description && 'has-icon-only',
@@ -87,9 +111,11 @@
 {#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="transparent" />
+		<Avatar {src} {status} {size} variant="soft" />
 	{/if}
 	<div class="item-body">
 		<div class="item-label">{label}</div>
@@ -102,13 +128,18 @@
 			{@render actions()}
 		</div>
 	{/if}
+	{#if hasIndicator}
+		<span class="item-indicator">
+			<Icon icon={ChevronRight24RegularIcon} />
+		</span>
+	{/if}
 {/snippet}
 
 {#if href && !isDisabled}
 	<a {href} class={itemClasses} aria-disabled={isDisabled}>
 		{@render itemContent()}
 	</a>
-{:else if onclick && id && !isDisabled}
+{:else if onclick && id !== undefined && !isDisabled}
 	<button type="button" class={itemClasses} onclick={() => onclick(id)} disabled={isDisabled}>
 		{@render itemContent()}
 	</button>

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

@@ -6,7 +6,8 @@ type Props = {
     description?: string;
     icon?: IconData;
     src?: string;
-    variant?: 'ghost' | 'outlined' | 'surface' | 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
     size?: 'sm' | 'md' | 'lg';
     status?: 'online' | 'offline' | 'busy' | 'away';
     href?: string;
@@ -16,9 +17,10 @@ type Props = {
     isCompact?: boolean;
     hasDivider?: boolean;
     hasShadow?: boolean;
+    hasBullet?: boolean;
+    hasIndicator?: boolean;
     onclick?: (id: string | number) => void;
     actions?: Snippet;
-    isSolid?: boolean;
     class?: string;
 };
 declare const Item: import("svelte").Component<Props, {}, "">;