1 files changed, 44 insertions, 0 deletions

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}
+        />
+);