Dialog

import {  Dialog,  DialogTrigger,  Button,  DialogContent,  DialogHeader,  DialogTitle,  DialogCloseIcon,  DialogDescription,  DialogFooter,  DialogClose,} from "moduix";export function DialogDemo() {  return (    <Dialog>      <DialogTrigger render={<Button />}>View notifications</DialogTrigger>      <DialogContent>        <DialogHeader>          <DialogTitle>Notifications</DialogTitle>          <DialogCloseIcon />          <DialogDescription>You are all caught up. Good job!</DialogDescription>        </DialogHeader>        <DialogFooter>          <DialogClose render={<Button variant="outline" />}>Close</DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  );}

import {  Button,  Dialog,  DialogContent,  DialogHeader,  DialogTitle,  DialogDescription,  DialogFooter,  DialogClose,} from "moduix";import { useState, Fragment } from "react";export function ControlledDialogDemo() {  const [open, setOpen] = useState(false);  return (    <Fragment>      <Button type="button" onClick={() => setOpen(true)}>        Open controlled dialog      </Button>      <Dialog open={open} onOpenChange={setOpen}>        <DialogContent>          <DialogHeader>            <DialogTitle>Publish changes?</DialogTitle>            <DialogDescription>              This will make the latest version visible to all users.            </DialogDescription>          </DialogHeader>          <DialogFooter>            <DialogClose render={<Button variant="outline" />}>Back to editing</DialogClose>            <DialogClose render={<Button />}>Publish</DialogClose>          </DialogFooter>        </DialogContent>      </Dialog>    </Fragment>  );}

import {  createDialogHandle,  DialogTrigger,  Button,  Dialog,  DialogContent,  DialogHeader,  DialogTitle,  DialogDescription,  DialogFooter,  DialogClose,} from "moduix";import { useMemo, Fragment } from "react";export function DialogHandleDemo() {  const dialogHandle = useMemo(() => createDialogHandle(), []);  return (    <Fragment>      <DialogTrigger handle={dialogHandle} render={<Button variant="outline" />}>        Open from detached trigger      </DialogTrigger>      <Button type="button" onClick={() => dialogHandle.open(null)}>        Open programmatically      </Button>      <Dialog handle={dialogHandle}>        <DialogContent>          <DialogHeader>            <DialogTitle>Detached trigger</DialogTitle>            <DialogDescription>              This dialog is connected via createDialogHandle().            </DialogDescription>          </DialogHeader>          <DialogFooter>            <DialogClose render={<Button variant="outline" />}>Close</DialogClose>          </DialogFooter>        </DialogContent>      </Dialog>    </Fragment>  );}

import {  Dialog,  DialogTrigger,  Button,  DialogContent,  DialogHeader,  DialogTitle,  DialogCloseIcon,  DialogDescription,  DialogBody,  DialogFooter,  DialogClose,  ScrollArea,} from "moduix";export function ScrollableDialogDemo() {  return (    <Dialog>      <DialogTrigger render={<Button />}>Open long content</DialogTrigger>      <DialogContent className={styles.scrollPopup}>        <DialogHeader>          <DialogTitle>Release checklist</DialogTitle>          <DialogCloseIcon />          <DialogDescription>            Review all items before publishing to production.          </DialogDescription>        </DialogHeader>        <DialogBody className={styles.scrollBody}>          <ScrollArea            className={styles.scrollArea}            classNames={{ content: styles.scrollContent }}          >            {sections.map((item) => (              <section key={item.title}>                <h3>{item.title}</h3>                <p>{item.body}</p>              </section>            ))}          </ScrollArea>        </DialogBody>        <DialogFooter>          <DialogClose render={<Button variant="outline" />}>Close</DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  );}

.scrollPopup {  display: flex;  flex-direction: column;  height: min(42rem, calc(100dvh - var(--spacing-10)));  overflow: hidden;}.scrollBody {  min-height: 0;  flex: 1;  overflow: hidden;}.scrollArea {  height: 100%;  min-height: 0;}.scrollContent {  display: flex;  flex-direction: column;  gap: var(--spacing-5);}

const sections = [  {    title: "Database migrations",    body: "Confirm migration scripts are idempotent and have rollback steps.",  },  {    title: "Monitoring",    body: "Check that the dashboard includes new API endpoints.",  },  {    title: "Analytics",    body: "Verify onboarding funnel events are firing.",  },  {    title: "Staging",    body: "Run smoke tests with a production-like dataset.",  },];

import {  Dialog,  DialogTrigger,  Button,  DialogContent,  DialogHeader,  DialogTitle,  DialogDescription,  DialogFooter,  DialogClose,} from "moduix";export function NestedDialogDemo() {  return (    <Dialog>      <DialogTrigger render={<Button />}>View notifications</DialogTrigger>      <DialogContent>        <DialogHeader>          <DialogTitle>Notifications</DialogTitle>          <DialogDescription>You are all caught up. Good job!</DialogDescription>        </DialogHeader>        <DialogFooter>          <Dialog>            <DialogTrigger render={<Button variant="outline" />}>Customize</DialogTrigger>            <DialogContent>              <DialogHeader>                <DialogTitle>Customize notifications</DialogTitle>                <DialogDescription>Review your settings here.</DialogDescription>              </DialogHeader>              <DialogFooter>                <DialogClose render={<Button variant="outline" />}>Close</DialogClose>              </DialogFooter>            </DialogContent>          </Dialog>          <DialogClose render={<Button variant="outline" />}>Close</DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  );}

import {  Dialog,  DialogTrigger,  Button,  DialogContent,  DialogHeader,  DialogTitle,  DialogDescription,  DialogFooter,  DialogClose,} from "moduix";export function NonModalDialogDemo() {  return (    <Dialog modal={false}>      <DialogTrigger render={<Button />}>Open non-modal dialog</DialogTrigger>      <DialogContent withBackdrop={false}>        <DialogHeader>          <DialogTitle>Non-modal dialog</DialogTitle>          <DialogDescription>            The page remains interactive because modal behavior and backdrop are disabled.          </DialogDescription>        </DialogHeader>        <DialogFooter>          <DialogClose render={<Button variant="outline" />}>Close</DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  );}

import {  Dialog,  DialogTrigger,  Button,  DialogContent,  DialogCloseIcon,  DialogHeader,  DialogTitle,  DialogDescription,  DialogBody,  DialogFooter,  DialogClose,  CloseLineIcon,} from "moduix";export function CustomStylesDialogDemo() {  return (    <Dialog>      <DialogTrigger render={<Button />}>Open outside close icon</DialogTrigger>      <DialogContent        className={styles.customPopup}        classNames={{          portal: styles.customPortal,          backdrop: styles.customBackdrop,          viewport: styles.customViewport,        }}        slotProps={{          portal: { keepMounted: true },          backdrop: { forceRender: true },        }}      >        <DialogCloseIcon          aria-label="Close profile dialog"          className={styles.customCloseIcon}        >          <CloseLineIcon />        </DialogCloseIcon>        <DialogHeader>          <DialogTitle>Edit profile</DialogTitle>          <DialogDescription>            This popup, backdrop, viewport, and close icon are styled with className and            classNames.          </DialogDescription>        </DialogHeader>        <DialogBody>          <p>Update the public profile fields and save changes.</p>        </DialogBody>        <DialogFooter>          <DialogClose render={<Button />}>Save</DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  );}

.customPortal {  pointer-events: auto;}.customBackdrop {  background-color: rgb(15 23 42 / 0.56);}.customViewport {  align-items: start;  padding-top: var(--spacing-10);}.customPopup {  position: relative;  overflow: visible;  --dialog-width: 26rem;  --dialog-padding: var(--spacing-5);}.customCloseIcon {  position: fixed;  top: var(--spacing-4);  right: var(--spacing-4);  border: var(--border-width-sm) solid var(--dialog-border-color, var(--color-border));  background-color: var(--dialog-bg, var(--color-popover));  --dialog-close-icon-color: var(--color-muted-foreground);}