ui-svelte 0.2.10 → 0.2.12

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'
+			| 'default';
 		rootClass?: string;
 		headerClass?: string;
 		contentClass?: string;
@@ -23,19 +33,33 @@
 		content,
 		disabled = false,
 		defaultOpen = false,
-		variant = 'muted',
+		variant = 'ghost',
+		color = 'default',
 		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',
+		default: 'is-default'
 	};
 
 	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' | 'default';
     rootClass?: string;
     headerClass?: string;
     contentClass?: string;

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

@@ -10,7 +10,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;
@@ -22,7 +32,6 @@
 		hasShadow?: boolean;
 		onclick?: (id: string | number) => void;
 		actions?: Snippet;
-		isSolid?: boolean;
 		class?: string;
 	};
 
@@ -32,6 +41,7 @@
 		description,
 		src,
 		icon,
+		color = 'default',
 		variant = 'ghost',
 		size = 'md',
 		status,
@@ -44,17 +54,26 @@
 		hasShadow,
 		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 = {
@@ -63,17 +82,12 @@
 		lg: 'is-lg'
 	};
 
-	const avatarSizes: Record<string, 'sm' | 'md' | 'lg' | 'xl'> = {
-		sm: 'md',
-		md: 'lg',
-		lg: 'xl'
-	};
-
 	const isInteractive = $derived(!!href || !!onclick);
 
 	let itemClasses = $derived(
 		cn(
 			'item',
+			colorClasses[color],
 			variantClasses[variant],
 			sizeClasses[size],
 			isInteractive && !isDisabled && 'is-interactive',
@@ -81,7 +95,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',
@@ -92,10 +105,10 @@
 
 {#snippet itemContent()}
 	{#if icon}
-		<Icon {icon} />
+		<Icon {icon} class="h-6 w-auto" />
 	{/if}
 	{#if src}
-		<Avatar {src} {status} size={avatarSizes[size]} variant="transparent" />
+		<Avatar {src} {status} {size} variant="soft" />
 	{/if}
 	<div class="item-body">
 		<div class="item-label">{label}</div>
@@ -114,7 +127,7 @@
 	<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;
@@ -18,7 +19,6 @@ type Props = {
     hasShadow?: boolean;
     onclick?: (id: string | number) => void;
     actions?: Snippet;
-    isSolid?: boolean;
     class?: string;
 };
 declare const Item: import("svelte").Component<Props, {}, "">;