From c1e28224aa2e1450031669d9a7e359b63e04687d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 19:40:59 +0200
Subject: Init

---
 src/ui/layouts/CardList.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/ui/layouts/CardList.tsx

(limited to 'src/ui/layouts/CardList.tsx')

diff --git a/src/ui/layouts/CardList.tsx b/src/ui/layouts/CardList.tsx
new file mode 100644
index 0000000..96ae642
--- /dev/null
+++ b/src/ui/layouts/CardList.tsx
@@ -0,0 +1,52 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"ul"> & {
+	"layout"?:
+		| "merge"
+		| "grid"
+		| "grid-sm"
+		| "grid-xs"
+		| "flex"
+		| "flex-sm"
+		| "flex-xs"
+		| "masonry"
+		| "masonry-h"
+		| "masonry-h-sm";
+	"quiet"?: boolean;
+	"border"?: boolean;
+	"interactive"?: boolean;
+	"no-shadow"?: boolean;
+	"no-flush"?: boolean;
+	"keyboard-nav"?: boolean;
+};
+
+export const CardList = ({
+	layout,
+	quiet,
+	border,
+	interactive,
+	"no-shadow": noShadow,
+	"no-flush": noFlush,
+	"keyboard-nav": keyboardNav,
+	class: cls,
+	...props
+}: Props) => (
+	<div
+		class:list={[
+			"l-card-list",
+			{
+				[`l-card-list--${layout}`]: layout,
+				"l-card-list--interactive": interactive,
+				"l-card-list--no-flush": noFlush,
+				"l-card-list--quiet": quiet,
+				"l-card-list--borderless": !border,
+				"l-card-list--shadow": layout === "merge" && !noShadow,
+				"js-keyboard-nav": keyboardNav,
+			},
+			cls,
+		]}
+		data-keyboard-nav-item=".l-card-list__card"
+		data-keyboard-nav-mode="grid"
+		{...props}
+	/>
+);
-- 
cgit v1.3.1