6 files changed, 229 insertions, 0 deletions

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}
+        />
+);
diff --git a/src/ui/layouts/Container.tsx b/src/ui/layouts/Container.tsx
new file mode 100644
index 0000000..7ce7ed5
--- /dev/null
+++ b/src/ui/layouts/Container.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as": Tag;
+        "pad-inline"?: boolean;
+        "pad-block"?: boolean;
+        "size"?: "sm";
+        "fixed"?: boolean | "150" | "200";
+}>;
+
+export const Container = <T extends HTMLTag = "div">({
+        as: Tag = "div" as T,
+        class: cls,
+        "pad-inline": padInline,
+        "pad-block": padBlock,
+        fixed,
+        size,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "l-container",
+                        {
+                                "l-container--pad-i": padInline,
+                                "l-container--pad-b": padBlock,
+                                [`l-container--${size}`]: size,
+                                [`l-container--fixed${typeof fixed === "boolean" ? "" : `-${fixed}`}`]: fixed,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);
diff --git a/src/ui/layouts/EmojiGrid.tsx b/src/ui/layouts/EmojiGrid.tsx
new file mode 100644
index 0000000..5dc9266
--- /dev/null
+++ b/src/ui/layouts/EmojiGrid.tsx
@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"ul"> & {
+        id: string;
+        sprite: {
+                variants: { size: number; space: number }[];
+                wrap: number;
+        };
+        count: number;
+};
+
+export const EmojiGrid = ({ id, sprite, count, class: cls, ...props }: Props) => {
+        const size = sprite.variants[0]?.size ?? 48;
+        const space = sprite.variants[0]?.space ?? 2;
+        const { wrap } = sprite;
+
+        const src = `/emojis/${id}/sprite48.avif`;
+        const srcset = `/emojis/${id}/sprite48.avif 1x, /emojis/${id}/sprite96.avif 2x`;
+
+        const offsetX = (i: number) => -1 * (size + space) * (i % wrap);
+        const offsetY = (i: number) => -1 * (size + space) * Math.floor(i / wrap);
+
+        return (
+                <ul class:list={["l-emoji-grid", cls]} style={{ "--emoji-size": `${size}px` }} {...props}>
+                        {[...Array(count).keys()].map((i) => (
+                                <li>
+                                        <img
+                                                alt=""
+                                                class="l-emoji-grid__emoji"
+                                                src={src}
+                                                srcset={srcset}
+                                                width={size}
+                                                height={size}
+                                                style={{ "object-position": `${offsetX(i)}px ${offsetY(i)}px` }}
+                                        />
+                                </li>
+                        ))}
+                </ul>
+        );
+};
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}
+        />
+);
diff --git a/src/ui/layouts/SplitView.tsx b/src/ui/layouts/SplitView.tsx
new file mode 100644
index 0000000..81a55d1
--- /dev/null
+++ b/src/ui/layouts/SplitView.tsx
@@ -0,0 +1,27 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as": Tag;
+        "gapless"?: boolean;
+        "wrap-reverse"?: boolean;
+}>;
+
+export const SplitView = <T extends HTMLTag = "div">({
+        as: Tag = "div" as T,
+        gapless,
+        "wrap-reverse": wrapReverse,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "l-split-view",
+                        {
+                                "l-split-view--gapless": gapless,
+                                "l-split-view--wrap-reverse": wrapReverse,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);
diff --git a/src/ui/layouts/SplitViewPanel.tsx b/src/ui/layouts/SplitViewPanel.tsx
new file mode 100644
index 0000000..7f04b44
--- /dev/null
+++ b/src/ui/layouts/SplitViewPanel.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as: Tag;
+        sticky?: boolean;
+        side?: "25";
+        min?: "50" | "100" | "200";
+        fill?: boolean;
+}>;
+
+export const SplitViewPanel = <T extends HTMLTag = "div">({
+        as: Tag = "div" as T,
+        sticky,
+        side,
+        min,
+        fill,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "l-split-view__panel",
+                        {
+                                "l-split-view__panel--sticky": sticky,
+                                [`l-split-view__panel--side-${side}`]: side,
+                                [`l-split-view__panel--min-${min}`]: min,
+                                "l-split-view__panel--fill": fill,
+                        },
+                        cls,
+                ]}
+                {...props}
+        />
+);