feat: add new style for call components

Author: allandiegoasilva

preview/components/dialog-style-with-footer.tsx

@@ -1,38 +1,30 @@
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTrigger,
-  Text,
-} from "@/packages/ui";
-import { DialogFooter } from "@/packages/ui/Dialog/DialogFooter";
+import { Button, Dialog, Text } from "@/packages/ui";
 
 export default function DialogStyleWithFooter() {
   return (
     <Dialog>
-      <DialogTrigger asChild>
+      <Dialog.Trigger asChild>
         <Button>Open Dialog</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader position={"fixed"} asChild>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Header position={"fixed"} asChild>
           <Text as="h5">Confirm your action?</Text>
-        </DialogHeader>
+        </Dialog.Header>
         <section className="flex flex-col gap-4 p-4">
           <section className="text-xl">
             <p>Are you sure you want to delete this item?</p>
             <p>This action cannout be undone.</p>
           </section>
         </section>
-        <DialogFooter>
-          <DialogTrigger asChild>
+        <Dialog.Footer>
+          <Dialog.Trigger asChild>
             <Button>Confirm</Button>
-          </DialogTrigger>
-          <DialogTrigger asChild>
+          </Dialog.Trigger>
+          <Dialog.Trigger asChild>
             <Button variant={"outline"}>Close</Button>
-          </DialogTrigger>
-        </DialogFooter>
-      </DialogContent>
+          </Dialog.Trigger>
+        </Dialog.Footer>
+      </Dialog.Content>
     </Dialog>
   );
 }