AlertDialog

import {  AlertDialog,  AlertDialogTrigger,  Button,  AlertDialogContent,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogCloseIcon,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogCancel,  AlertDialogAction,} from "moduix";export function AlertDialogDemo() {  return (    <AlertDialog>      <AlertDialogTrigger render={<Button />}>Discard draft</AlertDialogTrigger>      <AlertDialogContent>        <AlertDialogHeader>          <AlertDialogTitle>Discard draft?</AlertDialogTitle>          <AlertDialogCloseIcon />          <AlertDialogDescription>You cannot undo this action.</AlertDialogDescription>        </AlertDialogHeader>        <AlertDialogFooter>          <AlertDialogCancel render={<Button variant="outline" />}>Cancel</AlertDialogCancel>          <AlertDialogAction render={<Button />}>Discard</AlertDialogAction>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  );}

import {  AlertDialog,  AlertDialogTrigger,  Button,  AlertDialogContent,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogCancel,  AlertDialogAction,} from "moduix";import { useState } from "react";export function ControlledAlertDialogDemo() {  const [open, setOpen] = useState(false);  return (    <AlertDialog open={open} onOpenChange={setOpen}>      <AlertDialogTrigger render={<Button />}>Open controlled dialog</AlertDialogTrigger>      <AlertDialogContent>        <AlertDialogHeader>          <AlertDialogTitle>Publish changes?</AlertDialogTitle>          <AlertDialogDescription>            This will make the latest version visible to all users.          </AlertDialogDescription>        </AlertDialogHeader>        <AlertDialogFooter>          <AlertDialogCancel render={<Button variant="outline" />}>            Back to editing          </AlertDialogCancel>          <AlertDialogAction render={<Button />}>Publish</AlertDialogAction>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  );}

import {  createAlertDialogHandle,  AlertDialogTrigger,  Button,  AlertDialog,  AlertDialogContent,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogCancel,  AlertDialogAction,} from "moduix";import { useMemo, Fragment } from "react";export function AlertDialogHandleDemo() {  const alertDialogHandle = useMemo(() => createAlertDialogHandle(), []);  return (    <Fragment>      <AlertDialogTrigger handle={alertDialogHandle} render={<Button variant="outline" />}>        Open from detached trigger      </AlertDialogTrigger>      <Button type="button" onClick={() => alertDialogHandle.open(null)}>        Open programmatically      </Button>      <AlertDialog handle={alertDialogHandle}>        <AlertDialogContent>          <AlertDialogHeader>            <AlertDialogTitle>Delete workspace?</AlertDialogTitle>            <AlertDialogDescription>              This alert dialog is connected via createAlertDialogHandle().            </AlertDialogDescription>          </AlertDialogHeader>          <AlertDialogFooter>            <AlertDialogCancel render={<Button variant="outline" />}>Cancel</AlertDialogCancel>            <AlertDialogAction render={<Button />}>Delete</AlertDialogAction>          </AlertDialogFooter>        </AlertDialogContent>      </AlertDialog>    </Fragment>  );}

import {  AlertDialog,  AlertDialogTrigger,  Button,  AlertDialogContent,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogCloseIcon,  AlertDialogDescription,  AlertDialogBody,  AlertDialogFooter,  AlertDialogCancel,  AlertDialogAction,  ScrollArea,} from "moduix";export function ScrollableAlertDialogDemo() {  return (    <AlertDialog>      <AlertDialogTrigger render={<Button />}>Delete project</AlertDialogTrigger>      <AlertDialogContent>        <AlertDialogHeader>          <AlertDialogTitle>Delete project?</AlertDialogTitle>          <AlertDialogCloseIcon />          <AlertDialogDescription>            This removes all deployment environments and API keys.          </AlertDialogDescription>        </AlertDialogHeader>        <AlertDialogBody 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>        </AlertDialogBody>        <AlertDialogFooter>          <AlertDialogCancel render={<Button variant="outline" />}>Cancel</AlertDialogCancel>          <AlertDialogAction render={<Button />}>Delete permanently</AlertDialogAction>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  );}

.scrollBody {  height: min(26rem, calc(100dvh - var(--spacing-10)));  overflow: hidden;}.scrollArea {  height: 100%;  min-height: 0;}.scrollContent {  display: grid;  gap: var(--spacing-4);  padding-right: var(--spacing-5);}

const sections = [  {    title: 'What this surface is for',    body: 'Use temporary surfaces for focused tasks that should keep users in the current page context.',  },  {    title: 'Keyboard and focus',    body: 'Tab and Shift+Tab should stay predictable while Escape or explicit controls request close.',  },  {    title: 'Viewport overflow',    body: 'Keep the container visible and place long content in a dedicated scrollable inner region.',  },  {    title: 'Close affordances',    body: 'Always provide an explicit close action when the surface can be dismissed by the user.',  },  {    title: 'Mobile ergonomics',    body: 'Keep touch targets reachable and avoid cramped headers on narrow viewports.',  },  {    title: 'Persistent panels',    body: 'For persistent workflows, keep the important controls fixed and scroll only the supporting content.',  },  {    title: 'Status updates',    body: 'After completion, close the surface and show an inline confirmation or toast.',  },  {    title: 'Error handling',    body: 'When an action fails, keep the user in context and show the recovery step near the failed control.',  },  {    title: 'Long descriptions',    body: 'Dense explanatory copy should remain readable without pushing primary actions out of reach.',  },  {    title: 'Scrolling feedback',    body: 'Visible scrollbars, fades, or edge states help users understand that additional content is available.',  },  {    title: 'Footer behavior',    body: 'Footer actions should stay stable when the user reviews long terms, warnings, or settings.',  },  {    title: 'Review checklist',    body: 'Use repeated sections to test keyboard scrolling, wheel scrolling, touch scrolling, and drag gestures.',  },  {    title: 'Final confirmation',    body: 'The final section should be reachable without layout jumps or hidden content at the bottom edge.',  },];

import {  AlertDialog,  AlertDialogTrigger,  Button,  AlertDialogContent,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogCloseIcon,  CloseLineIcon,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogCancel,  AlertDialogAction,} from "moduix";export function CustomCloseIconAlertDialogDemo() {  return (    <AlertDialog>      <AlertDialogTrigger render={<Button />}>Archive workspace</AlertDialogTrigger>      <AlertDialogContent>        <AlertDialogHeader>          <AlertDialogTitle>Archive workspace?</AlertDialogTitle>          <AlertDialogCloseIcon            aria-label="Close archive dialog"            className={styles.customCloseIcon}          >            <CloseLineIcon />          </AlertDialogCloseIcon>          <AlertDialogDescription>            Team members will lose access until the workspace is restored.          </AlertDialogDescription>        </AlertDialogHeader>        <AlertDialogFooter>          <AlertDialogCancel render={<Button variant="outline" />}>Cancel</AlertDialogCancel>          <AlertDialogAction render={<Button />}>Archive</AlertDialogAction>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  );}

.customCloseIcon {  --alert-dialog-close-icon-color: var(--color-muted-foreground);}

import {  AlertDialog,  AlertDialogTrigger,  Button,  AlertDialogContent,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogCancel,  AlertDialogAction,} from "moduix";export function CustomStylesAlertDialogDemo() {  return (    <AlertDialog>      <AlertDialogTrigger render={<Button />}>Reset environment</AlertDialogTrigger>      <AlertDialogContent        className={styles.customPopup}        classNames={{          portal: styles.customPortal,          backdrop: styles.customBackdrop,          viewport: styles.customViewport,        }}      >        <AlertDialogHeader>          <AlertDialogTitle>Reset environment?</AlertDialogTitle>          <AlertDialogDescription>            All runtime variables will return to their default values.          </AlertDialogDescription>        </AlertDialogHeader>        <AlertDialogFooter>          <AlertDialogCancel render={<Button variant="outline" />}>Cancel</AlertDialogCancel>          <AlertDialogAction render={<Button />}>Reset</AlertDialogAction>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  );}

.customPortal {  pointer-events: auto;}.customBackdrop {  background-color: rgb(15 23 42 / 0.56);}.customViewport {  align-items: start;  padding-top: var(--spacing-10);}.customPopup {  --alert-dialog-width: 28rem;  --alert-dialog-radius: var(--radius-md);}