AlertDialog

1"use client";2
3// Adapted from HeroUI v3.2.6 alert-dialog-default (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { AlertDialog, Button } from "@lenso/ui";6
7const styles = stylex.create({ popup: { maxWidth: 400 } });8
9export function Default() {10  return (11    <AlertDialog>12      <AlertDialog.Trigger render={<Button variant="danger" />}>Delete Project</AlertDialog.Trigger>13      <AlertDialog.Portal>14        <AlertDialog.Backdrop />15        <AlertDialog.Viewport>16          <AlertDialog.Popup xstyle={styles.popup}>17            <AlertDialog.Close aria-label="Close dialog" />18            <AlertDialog.Header>19              <AlertDialog.Icon variant="danger" />20              <AlertDialog.Title>Delete project permanently?</AlertDialog.Title>21            </AlertDialog.Header>22            <AlertDialog.Body>23              <AlertDialog.Description>24                This will permanently delete <strong>My Awesome Project</strong> and all of its25                data. This action cannot be undone.26              </AlertDialog.Description>27            </AlertDialog.Body>28            <AlertDialog.Footer>29              <AlertDialog.Close render={<Button variant="tertiary" />}>Cancel</AlertDialog.Close>30              <AlertDialog.Close render={<Button variant="danger" />}>31                Delete Project32              </AlertDialog.Close>33            </AlertDialog.Footer>34          </AlertDialog.Popup>35        </AlertDialog.Viewport>36      </AlertDialog.Portal>37    </AlertDialog>38  );39}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-statuses (Apache-2.0).3import * as stylex from "@stylexjs/stylex";4import { AlertDialog, Button } from "@lenso/ui";5
6const styles = stylex.create({7  row: { display: "flex", flexWrap: "wrap", gap: 16 },8  popup: { maxWidth: 400 },9  accent: { backgroundColor: "var(--accent-soft)", color: "var(--accent-soft-foreground)" },10  success: { backgroundColor: "var(--success-soft)", color: "var(--success-soft-foreground)" },11  warning: { backgroundColor: "var(--warning-soft)", color: "var(--warning-soft-foreground)" },12  danger: { backgroundColor: "var(--danger-soft)", color: "var(--danger-soft-foreground)" },13});14
15export function Statuses() {16  const examples = [17    {18      status: "accent",19      trigger: "Sign Out",20      header: "Sign out of your account?",21      body: "You'll need to sign in again to access your account. Any unsaved changes will be lost.",22      cancel: "Stay Signed In",23      confirm: "Sign Out",24    },25    {26      status: "success",27      trigger: "Complete Task",28      header: "Complete this task?",29      body: "This will mark the task as complete and notify all team members. The task will be moved to your completed list.",30      cancel: "Not Yet",31      confirm: "Mark Complete",32    },33    {34      status: "warning",35      trigger: "Discard Changes",36      header: "Discard unsaved changes?",37      body: "You have unsaved changes that will be permanently lost. Are you sure you want to discard them?",38      cancel: "Keep Editing",39      confirm: "Discard",40    },41    {42      status: "danger",43      trigger: "Delete Account",44      header: "Delete your account?",45      body: "This will permanently delete your account and remove all your data from our servers. This action is irreversible.",46      cancel: "Cancel",47      confirm: "Delete Account",48    },49  ] as const;50  return (51    <div {...stylex.props(styles.row)}>52      {examples.map(({ status, trigger, header, body, cancel, confirm }) => (53        <AlertDialog key={status}>54          <AlertDialog.Trigger render={<Button xstyle={styles[status]} />}>55            {trigger}56          </AlertDialog.Trigger>57          <AlertDialog.Portal>58            <AlertDialog.Backdrop />59            <AlertDialog.Viewport>60              <AlertDialog.Popup xstyle={styles.popup}>61                <AlertDialog.Close aria-label="Close dialog" />62                <AlertDialog.Header>63                  <AlertDialog.Icon variant={status} />64                  <AlertDialog.Title>{header}</AlertDialog.Title>65                </AlertDialog.Header>66                <AlertDialog.Body>67                  <AlertDialog.Description>{body}</AlertDialog.Description>68                </AlertDialog.Body>69                <AlertDialog.Footer>70                  <AlertDialog.Close render={<Button variant="tertiary" />}>71                    {cancel}72                  </AlertDialog.Close>73                  <AlertDialog.Close74                    render={<Button variant={status === "danger" ? "danger" : "primary"} />}75                  >76                    {confirm}77                  </AlertDialog.Close>78                </AlertDialog.Footer>79              </AlertDialog.Popup>80            </AlertDialog.Viewport>81          </AlertDialog.Portal>82        </AlertDialog>83      ))}84    </div>85  );86}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-placements (Apache-2.0).3import * as stylex from "@stylexjs/stylex";4import { AlertDialog, Button } from "@lenso/ui";5
6const styles = stylex.create({7  row: { display: "flex", flexWrap: "wrap", gap: 16 },8  popup: { maxWidth: 400 },9});10
11export function Placements() {12  const placements = ["auto", "top", "center", "bottom"] as const;13  return (14    <div {...stylex.props(styles.row)}>15      {placements.map((placement) => (16        <AlertDialog key={placement}>17          <AlertDialog.Trigger render={<Button variant="secondary" />}>18            {placement.charAt(0).toUpperCase() + placement.slice(1)}19          </AlertDialog.Trigger>20          <AlertDialog.Portal>21            <AlertDialog.Backdrop />22            <AlertDialog.Viewport>23              <AlertDialog.Popup placement={placement} xstyle={styles.popup}>24                <AlertDialog.Close aria-label="Close dialog" />25                <AlertDialog.Header>26                  <AlertDialog.Icon variant="accent" />27                  <AlertDialog.Title>28                    {placement === "auto"29                      ? "Auto Placement"30                      : `${placement.charAt(0).toUpperCase() + placement.slice(1)} Position`}31                  </AlertDialog.Title>32                </AlertDialog.Header>33                <AlertDialog.Body>34                  <AlertDialog.Description>35                    {placement === "auto"36                      ? "Automatically positions at the bottom on mobile and center on desktop for optimal user experience."37                      : `This dialog is positioned at the ${placement} of the viewport. Critical confirmations are typically centered for maximum attention.`}38                  </AlertDialog.Description>39                </AlertDialog.Body>40                <AlertDialog.Footer>41                  <AlertDialog.Close render={<Button variant="tertiary" />}>42                    Cancel43                  </AlertDialog.Close>44                  <AlertDialog.Close render={<Button />}>Confirm</AlertDialog.Close>45                </AlertDialog.Footer>46              </AlertDialog.Popup>47            </AlertDialog.Viewport>48          </AlertDialog.Portal>49        </AlertDialog>50      ))}51    </div>52  );53}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-sizes (Apache-2.0).3import { Rocket } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { AlertDialog, Button } from "@lenso/ui";6
7const styles = stylex.create({8  row: { display: "flex", flexWrap: "wrap", gap: 16 },9  icon: { backgroundColor: "var(--default)", color: "var(--foreground)" },10  rocket: { width: 20, height: 20 },11});12
13export function Sizes() {14  const sizes = ["xs", "sm", "md", "lg", "cover"] as const;15  return (16    <div {...stylex.props(styles.row)}>17      {sizes.map((size) => (18        <AlertDialog key={size}>19          <AlertDialog.Trigger render={<Button variant="secondary" />}>20            {size.charAt(0).toUpperCase() + size.slice(1)}21          </AlertDialog.Trigger>22          <AlertDialog.Portal>23            <AlertDialog.Backdrop />24            <AlertDialog.Viewport>25              <AlertDialog.Popup size={size}>26                <AlertDialog.Close aria-label="Close dialog" />27                <AlertDialog.Header>28                  <AlertDialog.Icon variant="default" xstyle={styles.icon}>29                    <Rocket {...stylex.props(styles.rocket)} />30                  </AlertDialog.Icon>31                  <AlertDialog.Title>32                    Size: {size.charAt(0).toUpperCase() + size.slice(1)}33                  </AlertDialog.Title>34                </AlertDialog.Header>35                <AlertDialog.Body>36                  <AlertDialog.Description>37                    {size === "cover" ? (38                      <>39                        This alert dialog uses the <code>cover</code> size variant. It spans the40                        full screen with margins: 16px on mobile and 40px on desktop. Maintains41                        rounded corners and standard padding. Perfect for critical confirmations42                        that need maximum width while preserving alert dialog aesthetics.43                      </>44                    ) : (45                      <>46                        This alert dialog uses the <code>{size}</code> size variant. On mobile47                        devices, all sizes adapt to near full-width for optimal viewing. On desktop,48                        each size provides a different maximum width to suit various content needs.49                      </>50                    )}51                  </AlertDialog.Description>52                </AlertDialog.Body>53                <AlertDialog.Footer>54                  <AlertDialog.Close render={<Button variant="tertiary" />}>55                    Cancel56                  </AlertDialog.Close>57                  <AlertDialog.Close render={<Button />}>Confirm</AlertDialog.Close>58                </AlertDialog.Footer>59              </AlertDialog.Popup>60            </AlertDialog.Viewport>61          </AlertDialog.Portal>62        </AlertDialog>63      ))}64    </div>65  );66}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-controlled (Apache-2.0).3// The second controller uses a reducer instead of the React Aria overlay-state hook.4import { useReducer, useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { AlertDialog, Button } from "@lenso/ui";7
8const styles = stylex.create({9  column: { display: "flex", maxWidth: 448, flexDirection: "column", gap: 32 },10  section: { display: "flex", flexDirection: "column", gap: 12 },11  heading: { fontSize: 18, fontWeight: 600, color: "var(--foreground)" },12  caption: { fontSize: 14, lineHeight: 1.625, textWrap: "pretty", color: "var(--muted)" },13  panel: {14    display: "flex",15    flexDirection: "column",16    alignItems: "flex-start",17    gap: 12,18    borderRadius: 16,19    backgroundColor: "var(--surface)",20    padding: 16,21    boxShadow: "var(--shadow-sm)",22  },23  status: { fontSize: 12, color: "var(--muted)" },24  value: { fontFamily: "monospace", fontWeight: 500, color: "var(--foreground)" },25  actions: { display: "flex", gap: 8 },26  popup: { maxWidth: 400 },27});28
29export function Controlled() {30  const [isOpen, setIsOpen] = useState(false);31  const [reducerOpen, dispatch] = useReducer(32    (open: boolean, action: "open" | "close" | "toggle") =>33      action === "toggle" ? !open : action === "open",34    false,35  );36  return (37    <div {...stylex.props(styles.column)}>38      {([false, true] as const).map((reducer) => {39        const open = reducer ? reducerOpen : isOpen;40        const setOpen = (value: boolean) =>41          reducer ? dispatch(value ? "open" : "close") : setIsOpen(value);42        return (43          <div key={String(reducer)} {...stylex.props(styles.section)}>44            <h3 {...stylex.props(styles.heading)}>45              {reducer ? "With useReducer()" : "With React.useState()"}46            </h3>47            <p {...stylex.props(styles.caption)}>48              {reducer ? (49                "Use a reducer to manage open, close, and toggle actions."50              ) : (51                <>52                  Control the alert dialog using React&apos;s <code>useState</code> hook for simple53                  state management. Perfect for basic use cases.54                </>55              )}56            </p>57            <div {...stylex.props(styles.panel)}>58              <p {...stylex.props(styles.status)}>59                Status: <span {...stylex.props(styles.value)}>{open ? "open" : "closed"}</span>60              </p>61              <div {...stylex.props(styles.actions)}>62                <Button size="sm" variant="secondary" onClick={() => setOpen(true)}>63                  Open Dialog64                </Button>65                <Button66                  size="sm"67                  variant="tertiary"68                  onClick={() => (reducer ? dispatch("toggle") : setIsOpen((value) => !value))}69                >70                  Toggle71                </Button>72              </div>73            </div>74            <AlertDialog open={open} onOpenChange={setOpen}>75              <AlertDialog.Portal>76                <AlertDialog.Backdrop />77                <AlertDialog.Viewport>78                  <AlertDialog.Popup xstyle={styles.popup}>79                    <AlertDialog.Close aria-label="Close dialog" />80                    <AlertDialog.Header>81                      <AlertDialog.Icon variant={reducer ? "success" : "accent"} />82                      <AlertDialog.Title>83                        Controlled with {reducer ? "useReducer()" : "useState()"}84                      </AlertDialog.Title>85                    </AlertDialog.Header>86                    <AlertDialog.Body>87                      <AlertDialog.Description>88                        {reducer ? (89                          "The reducer handles open, close, and toggle actions while the native Root owns focus and dismissal."90                        ) : (91                          <>92                            This alert dialog is controlled by React&apos;s <code>useState</code>{" "}93                            hook. Pass <code>open</code> and <code>onOpenChange</code> props to94                            manage the dialog state externally.95                          </>96                        )}97                      </AlertDialog.Description>98                    </AlertDialog.Body>99                    <AlertDialog.Footer>100                      <AlertDialog.Close render={<Button variant="tertiary" />}>101                        Cancel102                      </AlertDialog.Close>103                      <AlertDialog.Close render={<Button />}>Confirm</AlertDialog.Close>104                    </AlertDialog.Footer>105                  </AlertDialog.Popup>106                </AlertDialog.Viewport>107              </AlertDialog.Portal>108            </AlertDialog>109          </div>110        );111      })}112    </div>113  );114}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-custom-icon (Apache-2.0).3import { LockOpen } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { AlertDialog, Button } from "@lenso/ui";6
7const styles = stylex.create({8  popup: { maxWidth: 400 },9  lock: { width: 20, height: 20 },10});11
12export function CustomIcon() {13  return (14    <AlertDialog>15      <AlertDialog.Trigger render={<Button variant="secondary" />}>16        Reset Password17      </AlertDialog.Trigger>18      <AlertDialog.Portal>19        <AlertDialog.Backdrop />20        <AlertDialog.Viewport>21          <AlertDialog.Popup xstyle={styles.popup}>22            <AlertDialog.Close aria-label="Close dialog" />23            <AlertDialog.Header>24              <AlertDialog.Icon variant="warning">25                <LockOpen {...stylex.props(styles.lock)} />26              </AlertDialog.Icon>27              <AlertDialog.Title>Reset your password?</AlertDialog.Title>28            </AlertDialog.Header>29            <AlertDialog.Body>30              <AlertDialog.Description>31                We&apos;ll send a password reset link to your email address. You&apos;ll need to32                create a new password to regain access to your account.33              </AlertDialog.Description>34            </AlertDialog.Body>35            <AlertDialog.Footer>36              <AlertDialog.Close render={<Button variant="tertiary" />}>Cancel</AlertDialog.Close>37              <AlertDialog.Close render={<Button />}>Send Reset Link</AlertDialog.Close>38            </AlertDialog.Footer>39          </AlertDialog.Popup>40        </AlertDialog.Viewport>41      </AlertDialog.Portal>42    </AlertDialog>43  );44}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-custom-trigger (Apache-2.0).3import { TrashBin } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { AlertDialog, Button } from "@lenso/ui";6
7const styles = stylex.create({8  trigger: {9    display: "flex",10    alignItems: "center",11    gap: 12,12    borderRadius: 16,13    backgroundColor: { default: "var(--surface)", ":hover": "var(--surface-secondary)" },14    padding: 16,15    boxShadow: "var(--shadow-xs)",16    userSelect: "none",17  },18  iconBox: {19    display: "flex",20    width: 48,21    height: 48,22    flexShrink: 0,23    alignItems: "center",24    justifyContent: "center",25    borderRadius: 12,26    backgroundColor: "var(--danger-soft)",27    color: "var(--danger-soft-foreground)",28  },29  copy: { display: "flex", flex: 1, flexDirection: "column", gap: 2, textAlign: "start" },30  heading: { fontSize: 14, fontWeight: 600 },31  caption: { fontSize: 12, color: "var(--muted)" },32  popup: { maxWidth: 400 },33  largeGlyph: { width: 24, height: 24 },34  glyph: { width: 20, height: 20 },35});36
37export function CustomTrigger() {38  return (39    <AlertDialog>40      <AlertDialog.Trigger xstyle={styles.trigger}>41        <div {...stylex.props(styles.iconBox)}>42          <TrashBin {...stylex.props(styles.largeGlyph)} />43        </div>44        <div {...stylex.props(styles.copy)}>45          <p {...stylex.props(styles.heading)}>Delete Item</p>46          <p {...stylex.props(styles.caption)}>Permanently remove this item</p>47        </div>48      </AlertDialog.Trigger>49      <AlertDialog.Portal>50        <AlertDialog.Backdrop />51        <AlertDialog.Viewport>52          <AlertDialog.Popup xstyle={styles.popup}>53            <AlertDialog.Close aria-label="Close dialog" />54            <AlertDialog.Header>55              <AlertDialog.Icon variant="danger">56                <TrashBin {...stylex.props(styles.glyph)} />57              </AlertDialog.Icon>58              <AlertDialog.Title>Delete this item?</AlertDialog.Title>59            </AlertDialog.Header>60            <AlertDialog.Body>61              <AlertDialog.Description>62                Use <code>AlertDialog.Trigger</code> to create custom trigger elements beyond63                standard buttons. This example shows a card-style trigger with icons and descriptive64                text.65              </AlertDialog.Description>66            </AlertDialog.Body>67            <AlertDialog.Footer>68              <AlertDialog.Close render={<Button variant="tertiary" />}>Cancel</AlertDialog.Close>69              <AlertDialog.Close render={<Button variant="danger" />}>70                Delete Item71              </AlertDialog.Close>72            </AlertDialog.Footer>73          </AlertDialog.Popup>74        </AlertDialog.Viewport>75      </AlertDialog.Portal>76    </AlertDialog>77  );78}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-backdrop-variants (Apache-2.0).3import * as stylex from "@stylexjs/stylex";4import { AlertDialog, Button } from "@lenso/ui";5
6const styles = stylex.create({7  row: { display: "flex", flexWrap: "wrap", gap: 16 },8  popup: { maxWidth: 400 },9});10
11export function BackdropVariants() {12  const variants = ["opaque", "blur", "transparent"] as const;13  return (14    <div {...stylex.props(styles.row)}>15      {variants.map((variant) => (16        <AlertDialog key={variant}>17          <AlertDialog.Trigger render={<Button variant="secondary" />}>18            {variant.charAt(0).toUpperCase() + variant.slice(1)}19          </AlertDialog.Trigger>20          <AlertDialog.Portal>21            <AlertDialog.Backdrop variant={variant} />22            <AlertDialog.Viewport>23              <AlertDialog.Popup xstyle={styles.popup}>24                <AlertDialog.Close aria-label="Close dialog" />25                <AlertDialog.Header>26                  <AlertDialog.Icon variant="accent" />27                  <AlertDialog.Title>28                    Backdrop: {variant.charAt(0).toUpperCase() + variant.slice(1)}29                  </AlertDialog.Title>30                </AlertDialog.Header>31                <AlertDialog.Body>32                  <AlertDialog.Description>33                    {variant === "opaque"34                      ? "An opaque dark backdrop that completely obscures the background, providing maximum focus on the dialog."35                      : variant === "blur"36                        ? "A blurred backdrop that softly obscures the background while maintaining visual context."37                        : "A transparent backdrop that keeps the background fully visible, useful for less critical confirmations."}38                  </AlertDialog.Description>39                </AlertDialog.Body>40                <AlertDialog.Footer>41                  <AlertDialog.Close render={<Button variant="tertiary" />}>42                    Cancel43                  </AlertDialog.Close>44                  <AlertDialog.Close render={<Button />}>Confirm</AlertDialog.Close>45                </AlertDialog.Footer>46              </AlertDialog.Popup>47            </AlertDialog.Viewport>48          </AlertDialog.Portal>49        </AlertDialog>50      ))}51    </div>52  );53}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-custom-backdrop (Apache-2.0).3import { TriangleExclamation } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { AlertDialog, Button } from "@lenso/ui";6
7const styles = stylex.create({8  backdrop: {9    backgroundColor: "transparent",10    backgroundImage: {11      default: "linear-gradient(to top, rgb(69 10 10 / 90%), rgb(69 10 10 / 50%), transparent)",12      ':where([data-theme="dark"]) &':13        "linear-gradient(to top, rgb(69 10 10 / 95%), rgb(69 10 10 / 60%), transparent)",14    },15  },16  popup: { maxWidth: 420 },17  header: { alignItems: "center", textAlign: "center" },18  glyph: { width: 20, height: 20 },19  footer: { flexDirection: "column-reverse" },20  action: { width: "100%" },21});22
23export function CustomBackdrop() {24  return (25    <AlertDialog>26      <AlertDialog.Trigger render={<Button variant="danger" />}>Delete Account</AlertDialog.Trigger>27      <AlertDialog.Portal>28        <AlertDialog.Backdrop variant="blur" xstyle={styles.backdrop} />29        <AlertDialog.Viewport>30          <AlertDialog.Popup xstyle={styles.popup}>31            <AlertDialog.Close aria-label="Close dialog" />32            <AlertDialog.Header xstyle={styles.header}>33              <AlertDialog.Icon variant="danger">34                <TriangleExclamation {...stylex.props(styles.glyph)} />35              </AlertDialog.Icon>36              <AlertDialog.Title>Permanently delete your account?</AlertDialog.Title>37            </AlertDialog.Header>38            <AlertDialog.Body>39              <AlertDialog.Description>40                This action cannot be undone. All your data, settings, and content will be41                permanently removed from our servers. The dramatic red backdrop emphasizes the42                severity and irreversibility of this decision.43              </AlertDialog.Description>44            </AlertDialog.Body>45            <AlertDialog.Footer xstyle={styles.footer}>46              <AlertDialog.Close render={<Button xstyle={styles.action} />}>47                Keep Account48              </AlertDialog.Close>49              <AlertDialog.Close render={<Button variant="danger" xstyle={styles.action} />}>50                Delete Forever51              </AlertDialog.Close>52            </AlertDialog.Footer>53          </AlertDialog.Popup>54        </AlertDialog.Viewport>55      </AlertDialog.Portal>56    </AlertDialog>57  );58}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-dismiss-behavior (Apache-2.0).3import { CircleInfo } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { AlertDialog, Button } from "@lenso/ui";6
7const styles = stylex.create({8  column: { display: "flex", maxWidth: 384, flexDirection: "column", gap: 24 },9  section: { display: "flex", flexDirection: "column", gap: 8 },10  heading: { fontSize: 18, fontWeight: 600 },11  caption: { fontSize: 14, lineHeight: "20px", color: "var(--muted)" },12  popup: { maxWidth: 400 },13  circle: { width: 20, height: 20 },14});15
16export function DismissBehavior() {17  return (18    <div {...stylex.props(styles.column)}>19      {([false, true] as const).map((blockEscape) => (20        <div key={String(blockEscape)} {...stylex.props(styles.section)}>21          <h3 {...stylex.props(styles.heading)}>22            {blockEscape ? "Keyboard dismissal" : "Backdrop dismissal"}23          </h3>24          <p {...stylex.props(styles.caption)}>25            {blockEscape26              ? "ESC is disabled for this critical confirmation. Use the action buttons to dismiss it."27              : "Alert dialogs require explicit action. Backdrop clicks do not dismiss the dialog."}28          </p>29          <AlertDialog30            onOpenChange={(open, details) => {31              if (!open && blockEscape && details.reason === "escape-key") details.cancel();32            }}33          >34            <AlertDialog.Trigger render={<Button variant="secondary" />}>35              Open Alert Dialog36            </AlertDialog.Trigger>37            <AlertDialog.Portal>38              <AlertDialog.Backdrop />39              <AlertDialog.Viewport>40                <AlertDialog.Popup xstyle={styles.popup}>41                  <AlertDialog.Close aria-label="Close dialog" />42                  <AlertDialog.Header>43                    <AlertDialog.Icon variant={blockEscape ? "accent" : "danger"}>44                      <CircleInfo {...stylex.props(styles.circle)} />45                    </AlertDialog.Icon>46                    <AlertDialog.Title>47                      {blockEscape ? "Keyboard dismissal disabled" : "Backdrop dismissal disabled"}48                    </AlertDialog.Title>49                    <AlertDialog.Description xstyle={styles.caption}>50                      {blockEscape51                        ? "ESC key is disabled"52                        : "Clicking the backdrop won't close this alert dialog"}53                    </AlertDialog.Description>54                  </AlertDialog.Header>55                  <AlertDialog.Body>56                    <p>57                      {blockEscape58                        ? "Press ESC - nothing happens. You must use the action buttons to dismiss this alert dialog."59                        : "Try clicking outside this alert dialog on the overlay - it won't close. You must use the action buttons to dismiss it."}60                    </p>61                  </AlertDialog.Body>62                  <AlertDialog.Footer>63                    <AlertDialog.Close render={<Button variant="tertiary" />}>64                      Cancel65                    </AlertDialog.Close>66                    <AlertDialog.Close render={<Button />}>Confirm</AlertDialog.Close>67                  </AlertDialog.Footer>68                </AlertDialog.Popup>69              </AlertDialog.Viewport>70            </AlertDialog.Portal>71          </AlertDialog>72        </div>73      ))}74    </div>75  );76}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-close-methods (Apache-2.0).3import { useRef } from "react";4import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";5import * as stylex from "@stylexjs/stylex";6import { AlertDialog, Button } from "@lenso/ui";7
8const styles = stylex.create({9  column: { display: "flex", maxWidth: 672, flexDirection: "column", gap: 32 },10  section: { display: "flex", flexDirection: "column", gap: 8 },11  heading: { fontSize: 18, fontWeight: 600 },12  caption: { fontSize: 14, color: "var(--muted)" },13  popup: { maxWidth: 400 },14});15
16export function CloseMethods() {17  const actionsRef = useRef<BaseAlertDialog.Root.Actions | null>(null);18  return (19    <div {...stylex.props(styles.column)}>20      <div {...stylex.props(styles.section)}>21        <h3 {...stylex.props(styles.heading)}>Using AlertDialog.Close</h3>22        <p {...stylex.props(styles.caption)}>23          Compose a Button with <code>AlertDialog.Close</code> to close the dialog automatically.24        </p>25        <AlertDialog>26          <AlertDialog.Trigger render={<Button variant="secondary" />}>27            Open Dialog28          </AlertDialog.Trigger>29          <AlertDialog.Portal>30            <AlertDialog.Backdrop />31            <AlertDialog.Viewport>32              <AlertDialog.Popup xstyle={styles.popup}>33                <AlertDialog.Header>34                  <AlertDialog.Icon variant="accent" />35                  <AlertDialog.Title>Using AlertDialog.Close</AlertDialog.Title>36                </AlertDialog.Header>37                <AlertDialog.Body>38                  <AlertDialog.Description>39                    Click either button below - both use <code>AlertDialog.Close</code> and will40                    close the dialog automatically.41                  </AlertDialog.Description>42                </AlertDialog.Body>43                <AlertDialog.Footer>44                  <AlertDialog.Close render={<Button variant="tertiary" />}>45                    Cancel46                  </AlertDialog.Close>47                  <AlertDialog.Close render={<Button />}>Confirm</AlertDialog.Close>48                </AlertDialog.Footer>49              </AlertDialog.Popup>50            </AlertDialog.Viewport>51          </AlertDialog.Portal>52        </AlertDialog>53      </div>54      <div {...stylex.props(styles.section)}>55        <h3 {...stylex.props(styles.heading)}>Using Root actions</h3>56        <p {...stylex.props(styles.caption)}>57          Access the native <code>close</code> method through the Root&apos;s{" "}58          <code>actionsRef</code>. This gives you full control over when and how to close the59          dialog, allowing you to add custom logic before closing.60        </p>61        <AlertDialog actionsRef={actionsRef}>62          <AlertDialog.Trigger render={<Button variant="secondary" />}>63            Open Dialog64          </AlertDialog.Trigger>65          <AlertDialog.Portal>66            <AlertDialog.Backdrop />67            <AlertDialog.Viewport>68              <AlertDialog.Popup xstyle={styles.popup}>69                <AlertDialog.Header>70                  <AlertDialog.Icon variant="success" />71                  <AlertDialog.Title>Using Root actions</AlertDialog.Title>72                </AlertDialog.Header>73                <AlertDialog.Body>74                  <AlertDialog.Description>75                    The buttons below use the <code>close</code> method from Root actions. You can76                    add validation or other logic before calling{" "}77                    <code>actionsRef.current.close()</code>.78                  </AlertDialog.Description>79                </AlertDialog.Body>80                <AlertDialog.Footer>81                  <Button variant="tertiary" onClick={() => actionsRef.current?.close()}>82                    Cancel83                  </Button>84                  <Button onClick={() => actionsRef.current?.close()}>Confirm</Button>85                </AlertDialog.Footer>86              </AlertDialog.Popup>87            </AlertDialog.Viewport>88          </AlertDialog.Portal>89        </AlertDialog>90      </div>91    </div>92  );93}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-custom-animations (Apache-2.0).3import { ArrowUpFromLine, Sparkles } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { AlertDialog, Button } from "@lenso/ui";6
7const scaleIn = stylex.keyframes({8  from: { opacity: 0, transform: "scale(.95)" },9  to: { opacity: 1, transform: "scale(1)" },10});11const scaleOut = stylex.keyframes({12  from: { opacity: 1, transform: "scale(1)" },13  to: { opacity: 0, transform: "scale(.95)" },14});15const slideIn = stylex.keyframes({16  from: { opacity: 0, transform: "translateY(16px)" },17  to: { opacity: 1, transform: "translateY(0)" },18});19const slideOut = stylex.keyframes({20  from: { opacity: 1, transform: "translateY(0)" },21  to: { opacity: 0, transform: "translateY(8px)" },22});23const styles = stylex.create({24  row: { display: "flex", flexWrap: "wrap", gap: 16 },25  popup: { maxWidth: 400 },26  glyph: { width: 20, height: 20 },27  description: { marginTop: 4 },28  scaleBackdrop: {29    transitionDuration: {30      default: "400ms",31      ":is([data-ending-style])": "200ms",32      "@media (prefers-reduced-motion: reduce)": "0ms",33    },34    transitionTimingFunction: {35      default: "cubic-bezier(.16,1,.3,1)",36      ":is([data-ending-style])": "cubic-bezier(.7,0,.84,0)",37    },38  },39  slideBackdrop: {40    transitionDuration: {41      default: "500ms",42      ":is([data-ending-style])": "200ms",43      "@media (prefers-reduced-motion: reduce)": "0ms",44    },45    transitionTimingFunction: {46      default: "cubic-bezier(.25,1,.5,1)",47      ":is([data-ending-style])": "cubic-bezier(.5,0,.75,0)",48    },49  },50  scale: {51    animationName: {52      default: scaleIn,53      ":is([data-ending-style])": scaleOut,54      "@media (prefers-reduced-motion: reduce)": "none",55    },56    animationDuration: { default: "400ms", ":is([data-ending-style])": "200ms" },57    animationTimingFunction: {58      default: "cubic-bezier(.16,1,.3,1)",59      ":is([data-ending-style])": "cubic-bezier(.7,0,.84,0)",60    },61    transitionProperty: "none",62  },63  slide: {64    animationName: {65      default: slideIn,66      ":is([data-ending-style])": slideOut,67      "@media (prefers-reduced-motion: reduce)": "none",68    },69    animationDuration: { default: "500ms", ":is([data-ending-style])": "200ms" },70    animationTimingFunction: {71      default: "cubic-bezier(.25,1,.5,1)",72      ":is([data-ending-style])": "cubic-bezier(.5,0,.75,0)",73    },74    transitionProperty: "none",75  },76});77
78export function CustomAnimations() {79  const animations = [80    {81      name: "Kinematic Scale",82      Icon: Sparkles,83      popup: styles.scale,84      backdrop: styles.scaleBackdrop,85      description:86        "Physics-based elastic scaling. Simulates a high-damping spring system with fast transient response and prolonged settling time. Ideal for Alert Dialogs and Modals.",87    },88    {89      name: "Fluid Slide",90      Icon: ArrowUpFromLine,91      popup: styles.slide,92      backdrop: styles.slideBackdrop,93      description:94        "Simulates movement through a medium with fluid resistance. Eliminates mechanical linearity for a natural, grounded feel. Perfect for Bottom Sheets or Toasts.",95    },96  ];97  return (98    <div {...stylex.props(styles.row)}>99      {animations.map(({ name, Icon, popup, backdrop, description }) => (100        <AlertDialog key={name}>101          <AlertDialog.Trigger render={<Button variant="secondary" />}>{name}</AlertDialog.Trigger>102          <AlertDialog.Portal>103            <AlertDialog.Backdrop xstyle={backdrop} />104            <AlertDialog.Viewport>105              <AlertDialog.Popup xstyle={[styles.popup, popup]}>106                <AlertDialog.Close aria-label="Close dialog" />107                <AlertDialog.Header>108                  <AlertDialog.Icon variant="accent">109                    <Icon {...stylex.props(styles.glyph)} />110                  </AlertDialog.Icon>111                  <AlertDialog.Title>{name} Animation</AlertDialog.Title>112                </AlertDialog.Header>113                <AlertDialog.Body>114                  <AlertDialog.Description xstyle={styles.description}>115                    {description}116                  </AlertDialog.Description>117                </AlertDialog.Body>118                <AlertDialog.Footer>119                  <AlertDialog.Close render={<Button variant="tertiary" />}>120                    Close121                  </AlertDialog.Close>122                  <AlertDialog.Close render={<Button />}>Try Again</AlertDialog.Close>123                </AlertDialog.Footer>124              </AlertDialog.Popup>125            </AlertDialog.Viewport>126          </AlertDialog.Portal>127        </AlertDialog>128      ))}129    </div>130  );131}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-custom-portal (Apache-2.0).3import { useCallback, useState } from "react";4import * as stylex from "@stylexjs/stylex";5import { AlertDialog, Button } from "@lenso/ui";6
7const styles = stylex.create({8  column: { display: "flex", flexDirection: "column", gap: 16 },9  text: { fontSize: 14 },10  caption: { fontSize: 14, color: "var(--muted)" },11  code: { borderRadius: 4, paddingInline: 4, paddingBlock: 2, fontSize: 12 },12  container: {13    position: "relative",14    display: "flex",15    height: 380,16    alignItems: "center",17    justifyContent: "center",18    overflow: "hidden",19    borderRadius: "var(--radius)",20    backgroundColor: "color-mix(in oklab, var(--muted) 20%, transparent)",21    transform: "translateZ(0)",22  },23  backdrop: { height: "100%" },24  viewport: { height: "100%", maxHeight: "100%" },25  popup: { height: "100%", maxHeight: "100%", maxWidth: 448 },26});27
28export function CustomPortal() {29  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);30  const setPortalRef = useCallback((node: HTMLDivElement | null) => setPortalContainer(node), []);31  return (32    <div {...stylex.props(styles.column)}>33      <div>34        <p {...stylex.props(styles.text)}>35          Render alert dialogs inside a custom container instead of <code>document.body</code>36        </p>37        <p {...stylex.props(styles.caption)}>38          Apply <code {...stylex.props(styles.code)}>transform: translateZ(0)</code> to the39          container to create a new stacking context.40        </p>41      </div>42      <div ref={setPortalRef} {...stylex.props(styles.container)}>43        {!!portalContainer && (44          <AlertDialog>45            <AlertDialog.Trigger render={<Button />}>Open Alert Dialog</AlertDialog.Trigger>46            <AlertDialog.Portal container={portalContainer}>47              <AlertDialog.Backdrop xstyle={styles.backdrop} />48              <AlertDialog.Viewport xstyle={styles.viewport}>49                <AlertDialog.Popup xstyle={styles.popup}>50                  <AlertDialog.Close aria-label="Close dialog" />51                  <AlertDialog.Header>52                    <AlertDialog.Icon variant="accent" />53                    <AlertDialog.Title>Custom Portal</AlertDialog.Title>54                  </AlertDialog.Header>55                  <AlertDialog.Body>56                    {Array.from({ length: 3 }, (_, index) => (57                      <p key={index} {...stylex.props(styles.caption)}>58                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod59                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,60                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo61                        consequat.62                      </p>63                    ))}64                  </AlertDialog.Body>65                  <AlertDialog.Footer>66                    <AlertDialog.Close render={<Button variant="tertiary" />}>67                      Cancel68                    </AlertDialog.Close>69                    <AlertDialog.Close render={<Button />}>Confirm</AlertDialog.Close>70                  </AlertDialog.Footer>71                </AlertDialog.Popup>72              </AlertDialog.Viewport>73            </AlertDialog.Portal>74          </AlertDialog>75        )}76      </div>77    </div>78  );79}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-custom-styles (Apache-2.0).3import * as stylex from "@stylexjs/stylex";4import { AlertDialog, Button } from "@lenso/ui";5
6const styles = stylex.create({7  backdrop: {8    backgroundColor: {9      default: "color-mix(in oklab, var(--overlay) 50%, transparent)",10      ':where([data-theme="dark"]) &': "color-mix(in oklab, var(--overlay) 60%, transparent)",11    },12  },13  popup: {14    position: "relative",15    overflow: "hidden",16    maxWidth: 400,17    borderWidth: 1,18    borderStyle: "solid",19    borderColor: {20      default: "color-mix(in oklab, var(--border) 80%, transparent)",21      ':where([data-theme="dark"]) &': "color-mix(in oklab, var(--border) 90%, transparent)",22    },23    backgroundColor: "var(--surface)",24    boxShadow: {25      default:26        "0 25px 50px -12px rgb(0 0 0 / 25%), 0 0 0 1px color-mix(in oklab, var(--accent) 10%, transparent)",27      ':where([data-theme="dark"]) &':28        "0 25px 50px -12px rgb(0 0 0 / 25%), 0 0 0 1px color-mix(in oklab, var(--accent) 15%, transparent)",29    },30  },31  glow: {32    pointerEvents: "none",33    position: "absolute",34    insetInline: 0,35    top: 0,36    height: 96,37    backgroundImage: {38      default:39        "linear-gradient(to bottom, color-mix(in oklab, var(--accent) 6%, transparent), transparent)",40      ':where([data-theme="dark"]) &':41        "linear-gradient(to bottom, color-mix(in oklab, var(--accent) 10%, transparent), transparent)",42    },43  },44  line: {45    pointerEvents: "none",46    position: "absolute",47    insetInline: 32,48    top: 0,49    height: 1,50    backgroundImage: {51      default:52        "linear-gradient(to right, transparent, color-mix(in oklab, var(--accent) 35%, transparent), transparent)",53      ':where([data-theme="dark"]) &':54        "linear-gradient(to right, transparent, color-mix(in oklab, var(--accent) 45%, transparent), transparent)",55    },56  },57  relative: { position: "relative" },58  caption: { color: "var(--muted)" },59  foreground: { color: "var(--foreground)" },60});61
62export function CustomStyles() {63  return (64    <AlertDialog>65      <AlertDialog.Trigger render={<Button variant="secondary" />}>Sign out</AlertDialog.Trigger>66      <AlertDialog.Portal>67        <AlertDialog.Backdrop variant="blur" xstyle={styles.backdrop} />68        <AlertDialog.Viewport>69          <AlertDialog.Popup xstyle={styles.popup}>70            <div aria-hidden="true" {...stylex.props(styles.glow)} />71            <div aria-hidden="true" {...stylex.props(styles.line)} />72            <AlertDialog.Header xstyle={styles.relative}>73              <AlertDialog.Icon variant="accent" />74              <AlertDialog.Title>Sign out of your account?</AlertDialog.Title>75            </AlertDialog.Header>76            <AlertDialog.Body xstyle={styles.relative}>77              <AlertDialog.Description xstyle={styles.caption}>78                You will be signed out on this device. Unsaved work in{" "}79                <strong {...stylex.props(styles.foreground)}>Acme Workspace</strong> may be lost80                unless it was saved to the cloud.81              </AlertDialog.Description>82            </AlertDialog.Body>83            <AlertDialog.Footer>84              <AlertDialog.Close render={<Button variant="tertiary" />}>85                Stay signed in86              </AlertDialog.Close>87              <AlertDialog.Close render={<Button />}>Sign out</AlertDialog.Close>88            </AlertDialog.Footer>89          </AlertDialog.Popup>90        </AlertDialog.Viewport>91      </AlertDialog.Portal>92    </AlertDialog>93  );94}