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/HList.tsx | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/ui/layouts/HList.tsx

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

diff --git a/src/ui/layouts/HList.tsx b/src/ui/layouts/HList.tsx
new file mode 100644
index 0000000..c1d870a
--- /dev/null
+++ b/src/ui/layouts/HList.tsx
@@ -0,0 +1,44 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import type { Props as ActionButtonProps } from "../objects/ActionButton.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	"as"?: Tag;
+	"pill"?: boolean;
+	"icon"?: boolean;
+	"separated"?: boolean;
+	"size"?: "gapless" | "sm" | "lg" | "xl";
+	"buttons-size"?: ActionButtonProps<Tag>["size"];
+	"buttons"?: boolean;
+}>;
+
+export const HList = <T extends HTMLTag = "ul">({
+	as: Tag = "ul" as T,
+	pill,
+	icon,
+	separated,
+	size,
+	"buttons-size": buttonsSize,
+	buttons,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		class:list={[
+			"l-hlist",
+			{
+				"l-hlist--pill": pill,
+				"l-hlist--icon": icon,
+				"l-hlist--separated": separated,
+				[`l-hlist--${size}`]: size,
+				[`l-hlist--buttons-${buttonsSize}`]: buttonsSize,
+				"l-hlist--buttons": buttons,
+			},
+			"js-keyboard-nav",
+			cls,
+		]}
+		data-keyboard-nav-item="li > :first-child"
+		data-keyboard-nav-mode="nav"
+		{...props}
+	/>
+);
-- 
cgit v1.3.1