@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.11

package/dist/components/ConfirmDialog.svelte

@@ -38,20 +38,12 @@
 		<AlertDialog.Header>
 			<AlertDialog.Title>{title}</AlertDialog.Title>
 			{#if description}
-				<AlertDialog.Description class={variant === 'destructive' ? 'text-destructive' : undefined}>
-					{description}
-				</AlertDialog.Description>
+				<AlertDialog.Description>{description}</AlertDialog.Description>
 			{/if}
 		</AlertDialog.Header>
 		<AlertDialog.Footer>
 			<AlertDialog.Cancel disabled={pending}>{cancelLabel}</AlertDialog.Cancel>
-			<AlertDialog.Action
-				onclick={handleConfirm}
-				disabled={pending}
-				class={variant === 'destructive'
-					? 'text-destructive-foreground bg-destructive hover:bg-destructive/90'
-					: undefined}
-			>
+			<AlertDialog.Action onclick={handleConfirm} disabled={pending} {variant}>
 				{pending ? (pendingLabel ?? confirmLabel) : confirmLabel}
 			</AlertDialog.Action>
 		</AlertDialog.Footer>

package/dist/components/ErrorScreen.svelte

@@ -2,6 +2,8 @@
 	import { AlertCircle } from '@lucide/svelte';
 	import * as Card from './primitives/card/index.js';
 	import { Button } from './primitives/button/index.js';
+	import Callout from './primitives/Callout.svelte';
+	import { getLocaleContext } from '../i18n/localeContext.svelte';
 
 	interface Props {
 		status?: number;
@@ -11,43 +13,35 @@
 	}
 
 	let { status = 500, message, details, homeLink = '/' }: Props = $props();
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 </script>
 
-<div class="p-4 flex min-h-screen items-center justify-center bg-background">
+<div class="p-4 flex min-h-dvh items-center justify-center bg-background">
 	<Card.Root class="max-w-md w-full">
-		<Card.Header class="text-center">
-			<div class="mb-4 flex justify-center">
+		<Card.Header>
+			<div class="gap-4 flex flex-col items-center text-center">
 				<div class="p-3 rounded-full bg-destructive/10">
-					<AlertCircle class="h-8 w-8 text-destructive" />
+					<AlertCircle class="size-8 text-destructive" />
 				</div>
+				<h1 class="text-3xl font-semibold">{status}</h1>
 			</div>
-			<Card.Title class="text-3xl">{status}</Card.Title>
 		</Card.Header>
-		<Card.Content class="space-y-4">
-			<div class="p-4 rounded-lg border border-destructive/50 bg-destructive/10">
-				<div class="gap-3 flex">
-					<AlertCircle class="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
-					<div class="flex-1">
-						<p class="text-sm font-semibold text-destructive">Error</p>
-						{#if message}
-							<p class="text-sm text-destructive/80">{message}</p>
-						{/if}
-					</div>
-				</div>
-			</div>
-
-			{#if details}
-				<div class="p-4 rounded-lg bg-muted">
-					<p class="font-mono text-sm break-all text-muted-foreground">
+		<Card.Content>
+			<div class="gap-4 flex flex-col">
+				<Callout tone="danger" title={t.errorTitle}>
+					{#if message}{message}{/if}
+				</Callout>
+				{#if details}
+					<p class="p-4 font-mono text-sm rounded-lg bg-muted break-all text-muted-foreground">
 						{details}
 					</p>
-				</div>
-			{/if}
+				{/if}
+			</div>
 		</Card.Content>
-		<Card.Footer class="gap-2 flex">
-			<Button variant="outline" class="flex-1">
-				<a href={homeLink} class="w-full" rel="external">Go Home</a>
-			</Button>
+		<Card.Footer>
+			<Button variant="outline" href={homeLink} rel="external" class="w-full">{t.goHome}</Button>
 		</Card.Footer>
 	</Card.Root>
 </div>