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

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

diff --git a/src/ui/objects/Dialog.tsx b/src/ui/objects/Dialog.tsx
new file mode 100644
index 0000000..8ab6c4f
--- /dev/null
+++ b/src/ui/objects/Dialog.tsx
@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { Container } from "../layouts/Container.tsx";
+import { ActionButton } from "./ActionButton.tsx";
+import { Divider } from "./Divider.tsx";
+import { Heading } from "./Heading.tsx";
+
+export type Props = HTMLAttributes<"dialog"> & {
+	title: string;
+	divider?: boolean;
+	children?: JSX.Element;
+};
+
+export const Dialog = ({ children, title, divider, class: cls, ...props }: Props) => (
+	<dialog popover="auto" class:list={["o-dialog is-modal", cls]} closedby="any" {...props}>
+		<Container fixed class="o-dialog__content">
+			<header class="o-dialog__header">
+				<Heading as="h1" class="u-mbs-0" level="xxl">
+					{title}
+				</Heading>
+
+				<ActionButton
+					command="close"
+					commandfor={props.id}
+					as="button"
+					pill
+					size="lg"
+					level="quiet"
+					icon={<Icon icon="x" variant="bold" />}
+					class="u-mis-auto"
+				/>
+			</header>
+
+			{divider && <Divider level="faint" class="o-dialog__divider" />}
+
+			<div class="o-dialog__body">{children}</div>
+		</Container>
+	</dialog>
+);
-- 
cgit v1.3.1