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

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

diff --git a/src/ui/objects/Avatar.tsx b/src/ui/objects/Avatar.tsx
new file mode 100644
index 0000000..459af12
--- /dev/null
+++ b/src/ui/objects/Avatar.tsx
@@ -0,0 +1,69 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import { StatusIndicator } from "$/ui/objects/StatusIndicator.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	"as"?: Tag;
+	"src"?: string;
+	"icon"?: JSX.Element;
+	"children"?: JSX.Element;
+	"class"?: string;
+	"circle"?: boolean;
+	"placeholder"?: boolean;
+	"color"?: `hsl(${number}, ${number}%, ${number}%)`;
+	"color2"?: `hsl(${number}, ${number}%, ${number}%)`;
+	"color-angle"?: number | `${number}`;
+	"size"?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl";
+	"status"?: "accent" | "positive" | "negative" | "warning";
+}>;
+
+const hslRegex = /^hsl\(([\d.]+), ([\d.]+%), ([\d.]+%)\)$/;
+
+export const Avatar = <T extends HTMLTag = "div">({
+	children,
+	as: Tag = "div" as T,
+	src,
+	icon,
+	circle,
+	placeholder,
+	color,
+	color2,
+	"color-angle": colorAngle,
+	size,
+	status,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		class:list={[
+			"o-avatar",
+			{
+				"o-avatar--circle": circle,
+				"o-avatar--placeholder": placeholder,
+				"o-avatar--colored": color && !color2,
+				"o-avatar--colored-gradient": color && !!color2,
+				[`o-avatar--${size}`]: !!size,
+			},
+			cls,
+		]}
+		style={{
+			"--o-avatar--bg-angle": colorAngle,
+			"--o-avatar--bg-color--h": color?.match(hslRegex)?.[1],
+			"--o-avatar--bg-color--l": color?.match(hslRegex)?.[3],
+			"--o-avatar--bg-color--s": color?.match(hslRegex)?.[2],
+			"--o-avatar--bg-color-2--h": color2?.match(hslRegex)?.[1],
+			"--o-avatar--bg-color-2--l": color2?.match(hslRegex)?.[3],
+			"--o-avatar--bg-color-2--s": color2?.match(hslRegex)?.[2],
+		}}
+		{...props}
+	>
+		{status && <StatusIndicator class="o-avatar__status" status={status} />}
+		{icon && <div class="o-avatar__icon u-ai-end u-jc-end">{icon}</div>}
+
+		{src ? (
+			<img alt="" class="o-avatar__content" src={src} />
+		) : (
+			<span class="o-avatar__content">{children}</span>
+		)}
+	</Tag>
+);
-- 
cgit v1.3.1