From 582d5609741294d8dd64c9e3d9d9955be78a1263 Mon Sep 17 00:00:00 2001
From: OfficialDakari <officialdakari1@proton.me>
Date: Fri, 28 Mar 2025 17:59:30 +0500
Subject: [PATCH] add dialog

---
 src/components/Dialog.tsx | 84 +++++++++++++++++++++++++++++++++++++++
 src/index.tsx             |  8 ++++
 2 files changed, 92 insertions(+)
 create mode 100644 src/components/Dialog.tsx

diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
new file mode 100644
index 0000000..8c16e4f
--- /dev/null
+++ b/src/components/Dialog.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { MdDialog as MdDialogWebComponent } from '@material/web/dialog/dialog';
+
+const MdDialog = createComponent({
+	react: React,
+	tagName: 'md-dialog',
+	elementClass: MdDialogWebComponent,
+	events: {
+		onClose: 'close',
+		onShow: 'show',
+		onOpen: 'open',
+		onOpened: 'opened',
+		onClosed: 'closed',
+		onCancel: 'cancel',
+	},
+});
+
+type DialogProps = {
+	children: React.ReactNode;
+	quick?: boolean;
+	returnValue?: string;
+	noFocusTrap?: boolean;
+	open?: boolean;
+	style?: React.CSSProperties;
+	className?: string;
+	id?: string;
+	onClose?: () => void;
+	onShow?: () => void;
+	onOpen?: () => void;
+	onOpened?: () => void;
+	onClosed?: () => void;
+	onCancel?: () => void;
+};
+
+export const Dialog = (props: DialogProps) => {
+	const { children, quick, returnValue, noFocusTrap, open, style, className, id, onClose, onShow, onOpen, onOpened, onClosed, onCancel } = props;
+	return <MdDialog quick={quick} returnValue={returnValue} noFocusTrap={noFocusTrap} open={open} style={style} className={className} id={id} onClose={onClose} onShow={onShow} onOpen={onOpen} onOpened={onOpened} onClosed={onClosed} onCancel={onCancel}>{children}</MdDialog>;
+};
+
+type DialogTitleProps = {
+	children: React.ReactNode;
+	style?: React.CSSProperties;
+	className?: string;
+	id?: string;
+};
+
+export const DialogTitle = (props: DialogTitleProps) => {
+	return (
+		<div slot='headline' {...props}>
+			{props.children}
+		</div>
+	);
+};
+
+type DialogContentProps = {
+	children: React.ReactNode;
+	style?: React.CSSProperties;
+	className?: string;
+	id?: string;
+};
+
+export const DialogContent = (props: DialogContentProps) => {
+	return (
+		<div slot='content' {...props}>
+			{props.children}
+		</div>
+	);
+};
+
+type DialogActionsProps = {
+	children: React.ReactNode;
+	style?: React.CSSProperties;
+	className?: string;
+	id?: string;
+};
+
+export const DialogActions = (props: DialogActionsProps) => {
+	return (
+		<div slot='actions' {...props}>
+			{props.children}
+		</div>
+	);
+};
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index f51955d..f83b189 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,6 +10,7 @@ import { Typography } from "./components/Typography";
 import { FormLabel } from "./components/Forms";
 import { Paper } from "./components/Paper";
 import { AssistChip, InputChip } from "./components/Chip";
+import { Dialog, DialogActions, DialogContent, DialogTitle } from "./components/Dialog";
 const mountApp = async () => {
 	const rootContainer = document.getElementById('root');
 
@@ -38,6 +39,13 @@ const mountApp = async () => {
 			</Paper>
 			<AssistChip label="Hello" />
 			<InputChip label="Hello" />
+			<Dialog open={true}>
+				<DialogTitle>Hello</DialogTitle>
+				<DialogContent>Hello</DialogContent>
+				<DialogActions>
+					<Button variant='filled'>Hello</Button>
+				</DialogActions>
+			</Dialog>
 		</ThemeProvider>
 	);
 };