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

(limited to 'src/ui/objects/Heading.tsx')

diff --git a/src/ui/objects/Heading.tsx b/src/ui/objects/Heading.tsx
new file mode 100644
index 0000000..089de3a
--- /dev/null
+++ b/src/ui/objects/Heading.tsx
@@ -0,0 +1,49 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	as: Tag;
+	level?: "xxl" | "xl" | "lg" | "md" | "sm" | "xs";
+	variant?: "static-black" | "static-white";
+	display?: boolean;
+	highlight?: boolean;
+	children?: JSX.Element;
+}>;
+
+const levelTagMap = {
+	lg: "h3",
+	md: "h4",
+	sm: "h5",
+	xl: "h2",
+	xs: "h6",
+	xxl: "h1",
+} as const;
+
+export const Heading = <T extends HTMLTag = "div">({
+	as,
+	children,
+	display,
+	level,
+	variant,
+	highlight,
+	class: cls,
+	...props
+}: Props<T>) => {
+	const Tag = as ?? (level ? levelTagMap[level] : "strong");
+	return (
+		<Tag
+			class:list={[
+				"o-heading",
+				{
+					[`o-heading--${level}`]: level,
+					[`o-heading--${variant}`]: variant,
+					"o-heading--display": display,
+					"u-c-heading": Tag === "strong",
+				},
+				cls,
+			]}
+			{...props}
+		>
+			{highlight ? <span class="o-heading__highlight">{children}</span> : children}
+		</Tag>
+	);
+};
-- 
cgit v1.3.1