Dialog

npx shadcn@latest add https://docs.nasaqui.com/r/dialog.json

import {
  Dialog, DialogTrigger, DialogClose, DialogContent,
  DialogHeader, DialogTitle, DialogDescription, DialogFooter,
} from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

import {
  Button, Dialog, DialogClose, DialogContent, DialogDescription,
  DialogFooter, DialogHeader, DialogTitle, DialogTrigger,
} from "@fadymondy/nasaq/web";

export function DeleteProject() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="danger" />}>Delete project</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Delete this project?</DialogTitle>
          <DialogDescription>Issues, time entries and files are removed. This cannot be undone.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="ghost" />}>Keep project</DialogClose>
          <DialogClose render={<Button variant="danger" />}>Delete</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Dialog                          Base UI Dialog.Root (no DOM)
├─ DialogTrigger                Base UI Dialog.Trigger (a button; use render={<Button />})
└─ DialogContent                Portal + backdrop + popup   data-slot="dialog-content"
   ├─ DialogBackdrop            data-slot="dialog-backdrop" (rendered for you)
   ├─ DialogHeader              data-slot="dialog-header"
   │  ├─ DialogTitle            data-slot="dialog-title"
   │  └─ DialogDescription      data-slot="dialog-description"
   ├─ your content
   ├─ DialogFooter              data-slot="dialog-footer"
   │  └─ DialogClose            Base UI Dialog.Close
   └─ close (×) button          data-slot="dialog-close" (when showClose)

import {
  Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter,
  DialogHeader, DialogTitle, DialogTrigger, Field, FieldLabel, Input,
} from "@fadymondy/nasaq/web";

export function RenameProject() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="primary" />}>Rename project</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Rename project</DialogTitle>
          <DialogDescription>The new name shows everywhere the project appears.</DialogDescription>
        </DialogHeader>
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Input defaultValue="Nasaq" />
        </Field>
        <DialogFooter>
          <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
          <DialogClose render={<Button variant="primary" />}>Save</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

import {
  Button, Dialog, DialogClose, DialogContent, DialogDescription,
  DialogFooter, DialogHeader, DialogTitle,
} from "@fadymondy/nasaq/web";
import { useState } from "react";

export function ConfirmAr() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="danger" onClick={() => setOpen(true)}>حذف المشروع</Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent closeLabel="إغلاق">
          <DialogHeader>
            <DialogTitle>حذف هذا المشروع؟</DialogTitle>
            <DialogDescription>ستُحذف المهام والملفات. لا يمكن التراجع.</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose render={<Button variant="ghost" />}>إبقاء المشروع</DialogClose>
            <DialogClose render={<Button variant="danger" />}>حذف</DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}