From 1b98c8e5dc36ea92b78eda5e8f13612d0f9f38df Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 17 Jul 2026 12:56:04 +0100
Subject: [PATCH] web: add error component

slightly inspired by vercel/geist

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../lib/components/ui/Error.stories.svelte    | 24 ++++++
 web/src/lib/components/ui/Error.svelte        | 80 +++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 web/src/lib/components/ui/Error.stories.svelte
 create mode 100644 web/src/lib/components/ui/Error.svelte

diff --git a/web/src/lib/components/ui/Error.stories.svelte b/web/src/lib/components/ui/Error.stories.svelte
new file mode 100644
index 00000000..91fbf04c
--- /dev/null
+++ b/web/src/lib/components/ui/Error.stories.svelte
@@ -0,0 +1,24 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Error from "./Error.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Error",
+		component: Error,
+		tags: ["autodocs"],
+		argTypes: {
+			size: {
+				control: { type: "inline-radio" },
+				options: ["small", "large"]
+			},
+			label: { control: "text" }
+		},
+		args: {
+			size: "small",
+			label: "This email address is already in use."
+		}
+	});
+</script>
+
+<Story name="Small" />
+<Story name="Large" args={{ size: "large" }} />
diff --git a/web/src/lib/components/ui/Error.svelte b/web/src/lib/components/ui/Error.svelte
new file mode 100644
index 00000000..d29af2d9
--- /dev/null
+++ b/web/src/lib/components/ui/Error.svelte
@@ -0,0 +1,80 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const error = tv({
+		slots: {
+			root: "overflow-hidden rounded border border-border-danger bg-background-danger-subtle text-foreground-danger dark:border-border-danger/60 dark:bg-background-danger-subtle/20",
+			header: "flex items-center gap-2",
+			icon: "shrink-0",
+			label: "min-w-0",
+			toggle:
+				"flex w-full items-center gap-2 border-t border-border-danger text-foreground-danger transition-colors hover:text-foreground-danger-strong dark:border-border-danger/60",
+			chevron: "shrink-0 transition-transform",
+			body: "border-t border-border-danger font-mono text-foreground-danger-strong dark:border-border-danger/60"
+		},
+		variants: {
+			size: {
+				small: {
+					header: "px-3 py-2 text-sm",
+					icon: "size-4",
+					toggle: "px-3 py-2 text-sm",
+					chevron: "size-4",
+					body: "px-3 py-2 text-xs"
+				},
+				large: {
+					header: "px-4 py-3 text-base",
+					icon: "size-5",
+					toggle: "px-4 py-3 text-sm",
+					chevron: "size-4",
+					body: "px-4 py-3 text-sm"
+				}
+			}
+		},
+		defaultVariants: {
+			size: "small"
+		}
+	});
+
+	export type ErrorVariants = VariantProps<typeof error>;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import OctagonAlert from "$icon/octagon-alert";
+	import ChevronRight from "$icon/chevron-right";
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
+		/** The error message shown next to the icon. */
+		label: string;
+		size?: ErrorVariants["size"];
+		class?: string;
+		/** Optional collapsible content revealed by a "Show code" toggle. */
+		children?: Snippet;
+	}
+
+	let { label, size = "small", class: className, children, ...rest }: Props = $props();
+
+	let open = $state(false);
+
+	const classes = $derived(error({ size }));
+</script>
+
+<div class={classes.root({ class: className })} role="alert" {...rest}>
+	<div class={classes.header()}>
+		<OctagonAlert class={classes.icon()} aria-hidden="true" />
+		<span class={classes.label()}>{label}</span>
+	</div>
+
+	{#if children}
+		<button type="button" class={classes.toggle()} onclick={() => (open = !open)}>
+			<ChevronRight class="{classes.chevron()} {open ? 'rotate-90' : ''}" aria-hidden="true" />
+			<span>Show code</span>
+		</button>
+		{#if open}
+			<div class={classes.body()}>
+				{@render children()}
+			</div>
+		{/if}
+	{/if}
+</div>
-- 
2.51.2