1 files changed, 54 insertions, 0 deletions
diff --git a/src/lib/components/Row.svelte b/src/lib/components/Row.svelte
new file mode 100644
index 0000000..e388392
--- /dev/null
+++ b/src/lib/components/Row.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+
+	let {
+		variant = 'card',
+		style,
+		children,
+		...rest
+	}: {
+		variant?: 'card' | 'ref' | 'plain';
+		style?: string;
+		children: Snippet;
+	} & HTMLLiAttributes = $props();
+</script>
+
+<li class={variant} {style} {...rest}>
+	{@render children()}
+</li>
+
+<style>
+	li {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.card {
+		padding: 0.5rem 0.75rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 1px 2px var(--shadow);
+		transition: all 0.2s ease;
+	}
+
+	.card:hover {
+		box-shadow: 0 2px 6px var(--shadow);
+		transform: translateY(-1px);
+	}
+
+	.ref {
+		padding: 0.875rem 1rem;
+		gap: 0.75rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 1px 2px var(--shadow);
+		transition: all 0.2s ease;
+	}
+
+	.ref:hover {
+		box-shadow: 0 2px 6px var(--shadow);
+		transform: translateY(-1px);
+	}
+</style>