Add UI input & textarea

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Molecules/Dialog/Dialog.tsx

@@ -6,27 +6,39 @@ import {
     Content,
     Title,
     Close,
+    Description,
 } from "@radix-ui/react-dialog";
 import { IconCrossLargeX } from "../../Atoms/Icons";
-import type { ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 import { Button } from "../../Atoms/Button/Button";
 import { useTranslate } from "@probo/i18n";
+import clsx from "clsx";
 
 type Props = {
     onClose: () => void;
     trigger: ReactNode;
     title: ReactNode;
     children?: ReactNode;
+    open?: boolean;
 };
 
-export function Dialog({ onClose, trigger, title, children }: Props) {
+export function Dialog({ onClose, trigger, title, children, open }: Props) {
+    const onOpenChange = (open: boolean) => {
+        if (!open) {
+            onClose();
+        }
+    };
+
     return (
-        <Root>
+        <Root open={open} onOpenChange={onOpenChange}>
             <Trigger asChild>{trigger}</Trigger>
             <Portal>
                 <Overlay className="fixed inset-0 z-50 bg-dialog/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
                 <div className="fixed grid place-items-center inset-0 z-50">
-                    <Content className="bg-level-2 rounded-2xl max-w-5xl w-[95%]">
+                    <Content
+                        aria-describedby={undefined}
+                        className="bg-level-2 rounded-2xl max-w-5xl w-[95%]"
+                    >
                         <div className="flex justify-between items-center p-3 border-b border-b-border-low">
                             <Title className="text-sm font-medium">
                                 {title}
@@ -58,15 +70,14 @@ export function DialogFooter({ children }: { children?: ReactNode }) {
     );
 }
 
-export function DialogContent({ children }: { children: ReactNode }) {
+export function DialogContent(props: HTMLAttributes<HTMLDivElement>) {
     return (
         <div
-            className="overflow-y-auto"
+            {...props}
+            className={clsx("overflow-y-auto", props.className)}
             style={{
                 maxHeight: "min(640px, calc(100vh - 140px))",
             }}
-        >
-            {children}
-        </div>
+        />
     );
 }