Modal

1"use client";2
3// Adapted from HeroUI v3.2.6 modal-default (Apache-2.0).4import { Rocket } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Modal } from "@lenso/ui";7
8const styles = stylex.create({9  popup: { maxWidth: 360 },10  icon: { backgroundColor: "var(--default)", color: "var(--foreground)" },11  rocket: { width: 20, height: 20 },12  continue: { width: "100%" },13});14
15export function Default() {16  return (17    <Modal>18      <Modal.Trigger render={<Button variant="secondary" />}>Open Modal</Modal.Trigger>19      <Modal.Portal>20        <Modal.Backdrop />21        <Modal.Viewport>22          <Modal.Popup xstyle={styles.popup}>23            <Modal.Close aria-label="Close dialog" />24            <Modal.Header>25              <Modal.Icon xstyle={styles.icon}>26                <Rocket {...stylex.props(styles.rocket)} />27              </Modal.Icon>28              <Modal.Title>Welcome to HeroUI</Modal.Title>29            </Modal.Header>30            <Modal.Body>31              <Modal.Description>32                A beautiful, fast, and modern React UI library for building accessible and33                customizable web applications with ease.34              </Modal.Description>35            </Modal.Body>36            <Modal.Footer>37              <Modal.Close render={<Button xstyle={styles.continue} />}>Continue</Modal.Close>38            </Modal.Footer>39          </Modal.Popup>40        </Modal.Viewport>41      </Modal.Portal>42    </Modal>43  );44}

1"use client";2// Adapted from HeroUI v3.2.6 modal-sizes (Apache-2.0).3import { Rocket } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { Button, Modal } 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  action: { width: "100%" },12});13
14export function Sizes() {15  const sizes = ["xs", "sm", "md", "lg", "cover", "full"] as const;16  return (17    <div {...stylex.props(styles.row)}>18      {sizes.map((size) => (19        <Modal key={size}>20          <Modal.Trigger render={<Button variant="secondary" />}>21            {size.charAt(0).toUpperCase() + size.slice(1)}22          </Modal.Trigger>23          <Modal.Portal>24            <Modal.Backdrop />25            <Modal.Viewport>26              <Modal.Popup size={size}>27                <Modal.Close aria-label="Close dialog" />28                <Modal.Header>29                  <Modal.Icon xstyle={styles.icon}>30                    <Rocket {...stylex.props(styles.rocket)} />31                  </Modal.Icon>32                  <Modal.Title>Size: {size.charAt(0).toUpperCase() + size.slice(1)}</Modal.Title>33                </Modal.Header>34                <Modal.Body>35                  <Modal.Description>36                    {size === "cover" ? (37                      <>38                        This modal uses the <code>cover</code> size variant. It spans the full39                        screen with margins: 16px on mobile and 40px on desktop. Maintains rounded40                        corners and standard padding. Perfect for cover-style content that needs41                        maximum width while preserving modal aesthetics.42                      </>43                    ) : size === "full" ? (44                      <>45                        This modal uses the <code>full</code> size variant. It occupies the entire46                        viewport without any margins, rounded corners, or shadows, creating a true47                        fullscreen experience. Ideal for immersive content or full-page48                        interactions.49                      </>50                    ) : (51                      <>52                        This modal uses the <code>{size}</code> size variant. On mobile devices, all53                        sizes adapt to near full-width for optimal viewing. On desktop, each size54                        provides a different maximum width to suit various content needs.55                      </>56                    )}57                  </Modal.Description>58                </Modal.Body>59                <Modal.Footer>60                  <Modal.Close render={<Button variant="secondary" />}>Cancel</Modal.Close>61                  <Modal.Close render={<Button />}>Confirm</Modal.Close>62                </Modal.Footer>63              </Modal.Popup>64            </Modal.Viewport>65          </Modal.Portal>66        </Modal>67      ))}68    </div>69  );70}

1"use client";2// Adapted from HeroUI v3.2.6 modal-placements (Apache-2.0).3import { Rocket } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { Button, Modal } from "@lenso/ui";6
7const styles = stylex.create({8  row: { display: "flex", flexWrap: "wrap", gap: 16 },9  popup: { maxWidth: 360 },10  icon: { backgroundColor: "var(--default)", color: "var(--foreground)" },11  rocket: { width: 20, height: 20 },12  action: { width: "100%" },13});14
15export function Placements() {16  const placements = ["auto", "top", "center", "bottom"] as const;17  return (18    <div {...stylex.props(styles.row)}>19      {placements.map((placement) => (20        <Modal key={placement}>21          <Modal.Trigger render={<Button variant="secondary" />}>22            {placement.charAt(0).toUpperCase() + placement.slice(1)}23          </Modal.Trigger>24          <Modal.Portal>25            <Modal.Backdrop />26            <Modal.Viewport>27              <Modal.Popup placement={placement} xstyle={styles.popup}>28                <Modal.Close aria-label="Close dialog" />29                <Modal.Header>30                  <Modal.Icon xstyle={styles.icon}>31                    <Rocket {...stylex.props(styles.rocket)} />32                  </Modal.Icon>33                  <Modal.Title>34                    Placement: {placement.charAt(0).toUpperCase() + placement.slice(1)}35                  </Modal.Title>36                </Modal.Header>37                <Modal.Body>38                  <Modal.Description>39                    This modal uses the <code>{placement}</code> placement option. Try different40                    placements to see how the modal positions itself on the screen.41                  </Modal.Description>42                </Modal.Body>43                <Modal.Footer>44                  <Modal.Close render={<Button xstyle={styles.action} />}>Continue</Modal.Close>45                </Modal.Footer>46              </Modal.Popup>47            </Modal.Viewport>48          </Modal.Portal>49        </Modal>50      ))}51    </div>52  );53}

1"use client";2// Adapted from HeroUI v3.2.6 modal-scroll-comparison (Apache-2.0).3import { useState } from "react";4import * as stylex from "@stylexjs/stylex";5import { Button, Modal } from "@lenso/ui";6
7const styles = stylex.create({8  column: { display: "flex", flexDirection: "column", gap: 16 },9  options: { display: "flex", gap: 16, borderWidth: 0, padding: 0 },10  popup: { maxWidth: 360 },11  caption: { fontSize: 14, lineHeight: "20px", color: "var(--muted)" },12  paragraph: { marginBottom: 12 },13});14
15export function ScrollComparison() {16  const [scroll, setScroll] = useState<"inside" | "outside">("inside");17  return (18    <div {...stylex.props(styles.column)}>19      <fieldset {...stylex.props(styles.options)} aria-label="Scroll behavior">20        {(["inside", "outside"] as const).map((value) => (21          <label key={value}>22            <input23              type="radio"24              name="modal-scroll"25              value={value}26              checked={scroll === value}27              onChange={() => setScroll(value)}28            />29            {value === "inside" ? "Inside" : "Outside"}30          </label>31        ))}32      </fieldset>33      <Modal scroll={scroll}>34        <Modal.Trigger render={<Button variant="secondary" />}>35          Open Modal ({scroll.charAt(0).toUpperCase() + scroll.slice(1)})36        </Modal.Trigger>37        <Modal.Portal>38          <Modal.Backdrop />39          <Modal.Viewport>40            <Modal.Popup xstyle={styles.popup}>41              <Modal.Header>42                <Modal.Title>43                  Scroll: {scroll.charAt(0).toUpperCase() + scroll.slice(1)}44                </Modal.Title>45                <Modal.Description xstyle={styles.caption}>46                  Compare scroll behaviors - inside keeps content scrollable within the modal,47                  outside allows page scrolling48                </Modal.Description>49              </Modal.Header>50              <Modal.Body>51                {Array.from({ length: 30 }).map((_, i) => (52                  <p key={i} {...stylex.props(styles.paragraph)}>53                    Paragraph {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.54                    Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet55                    hendrerit risus, sed porttitor quam.56                  </p>57                ))}58              </Modal.Body>59              <Modal.Footer>60                <Modal.Close render={<Button variant="secondary" />}>Cancel</Modal.Close>61                <Modal.Close render={<Button />}>Confirm</Modal.Close>62              </Modal.Footer>63              <Modal.Close aria-label="Close dialog" />64            </Modal.Popup>65          </Modal.Viewport>66        </Modal.Portal>67      </Modal>68    </div>69  );70}

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

1"use client";2// Adapted from HeroUI v3.2.6 modal-with-form (Apache-2.0).3import { Envelope } from "@gravity-ui/icons";4import { useId, useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { Button, Input, Label, Modal, Surface, TextField } from "@lenso/ui";7
8const styles = stylex.create({9  popup: { maxWidth: 448 },10  icon: { backgroundColor: "var(--accent-soft)", color: "var(--accent-soft-foreground)" },11  envelope: { width: 20, height: 20 },12  caption: { marginTop: 6, fontSize: 14, lineHeight: "20px", color: "var(--muted)" },13  body: { padding: 24 },14  form: { display: "flex", flexDirection: "column", gap: 16 },15  field: { width: "100%" },16});17
18export function WithForm() {19  const formId = useId();20  const [open, setOpen] = useState(false);21  return (22    <Modal open={open} onOpenChange={setOpen}>23      <Modal.Trigger render={<Button variant="secondary" />}>Open Contact Form</Modal.Trigger>24      <Modal.Portal>25        <Modal.Backdrop />26        <Modal.Viewport>27          <Modal.Popup placement="auto" xstyle={styles.popup}>28            <Modal.Close aria-label="Close dialog" />29            <Modal.Header>30              <Modal.Icon xstyle={styles.icon}>31                <Envelope {...stylex.props(styles.envelope)} />32              </Modal.Icon>33              <Modal.Title>Contact Us</Modal.Title>34              <Modal.Description xstyle={styles.caption}>35                Fill out the form below and we&apos;ll get back to you. The modal adapts36                automatically when the keyboard appears on mobile.37              </Modal.Description>38            </Modal.Header>39            <Modal.Body xstyle={styles.body}>40              <Surface variant="default">41                <form42                  id={formId}43                  {...stylex.props(styles.form)}44                  onSubmit={(event) => {45                    event.preventDefault();46                    setOpen(false);47                  }}48                >49                  <TextField name="name" xstyle={styles.field}>50                    <Label>Name</Label>51                    <Input type="text" variant="secondary" placeholder="Enter your name" />52                  </TextField>53                  <TextField name="email" xstyle={styles.field}>54                    <Label>Email</Label>55                    <Input type="email" variant="secondary" placeholder="Enter your email" />56                  </TextField>57                  <TextField name="phone" xstyle={styles.field}>58                    <Label>Phone</Label>59                    <Input type="tel" variant="secondary" placeholder="Enter your phone number" />60                  </TextField>61                  <TextField name="company" xstyle={styles.field}>62                    <Label>Company</Label>63                    <Input variant="secondary" placeholder="Enter your company name" />64                  </TextField>65                  <TextField name="message" xstyle={styles.field}>66                    <Label>Message</Label>67                    <Input variant="secondary" placeholder="Enter your message" />68                  </TextField>69                </form>70              </Surface>71            </Modal.Body>72            <Modal.Footer>73              <Modal.Close render={<Button variant="secondary" />}>Cancel</Modal.Close>74              <Button type="submit" form={formId}>75                Send Message76              </Button>77            </Modal.Footer>78          </Modal.Popup>79        </Modal.Viewport>80      </Modal.Portal>81    </Modal>82  );83}

1"use client";2// Adapted from HeroUI v3.2.6 modal-custom-trigger (Apache-2.0).3import { Gear } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { Button, Modal } 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  gearBox: {19    display: "flex",20    width: 48,21    height: 48,22    flexShrink: 0,23    alignItems: "center",24    justifyContent: "center",25    borderRadius: 12,26    backgroundColor: "var(--accent-soft)",27    color: "var(--accent-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: 360 },33  icon: { backgroundColor: "var(--accent-soft)", color: "var(--accent-soft-foreground)" },34  largeGear: { width: 24, height: 24 },35  gear: { width: 20, height: 20 },36});37
38export function CustomTrigger() {39  return (40    <Modal>41      <Modal.Trigger xstyle={styles.trigger}>42        <div {...stylex.props(styles.gearBox)}>43          <Gear {...stylex.props(styles.largeGear)} />44        </div>45        <div {...stylex.props(styles.copy)}>46          <p {...stylex.props(styles.heading)}>Settings</p>47          <p {...stylex.props(styles.caption)}>Manage your preferences</p>48        </div>49      </Modal.Trigger>50      <Modal.Portal>51        <Modal.Backdrop />52        <Modal.Viewport>53          <Modal.Popup xstyle={styles.popup}>54            <Modal.Close aria-label="Close dialog" />55            <Modal.Header>56              <Modal.Icon xstyle={styles.icon}>57                <Gear {...stylex.props(styles.gear)} />58              </Modal.Icon>59              <Modal.Title>Settings</Modal.Title>60            </Modal.Header>61            <Modal.Body>62              <Modal.Description>63                Use <code>Modal.Trigger</code> to create custom trigger elements beyond standard64                buttons. This example shows a card-style trigger with icons and descriptive text.65              </Modal.Description>66            </Modal.Body>67            <Modal.Footer>68              <Modal.Close render={<Button variant="secondary" />}>Cancel</Modal.Close>69              <Modal.Close render={<Button />}>Save</Modal.Close>70            </Modal.Footer>71          </Modal.Popup>72        </Modal.Viewport>73      </Modal.Portal>74    </Modal>75  );76}

1"use client";2// Adapted from HeroUI v3.2.6 modal-backdrop-variants (Apache-2.0).3import { Rocket } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { Button, Modal } from "@lenso/ui";6
7const styles = stylex.create({8  row: { display: "flex", flexWrap: "wrap", gap: 16 },9  popup: { maxWidth: 360 },10  icon: { backgroundColor: "var(--default)", color: "var(--foreground)" },11  rocket: { width: 20, height: 20 },12  action: { width: "100%" },13});14
15export function BackdropVariants() {16  const variants = ["opaque", "blur", "transparent"] as const;17  return (18    <div {...stylex.props(styles.row)}>19      {variants.map((variant) => (20        <Modal key={variant}>21          <Modal.Trigger render={<Button variant="secondary" />}>22            {variant.charAt(0).toUpperCase() + variant.slice(1)}23          </Modal.Trigger>24          <Modal.Portal>25            <Modal.Backdrop variant={variant} />26            <Modal.Viewport>27              <Modal.Popup xstyle={styles.popup}>28                <Modal.Close aria-label="Close dialog" />29                <Modal.Header>30                  <Modal.Icon xstyle={styles.icon}>31                    <Rocket {...stylex.props(styles.rocket)} />32                  </Modal.Icon>33                  <Modal.Title>34                    Backdrop: {variant.charAt(0).toUpperCase() + variant.slice(1)}35                  </Modal.Title>36                </Modal.Header>37                <Modal.Body>38                  <Modal.Description>39                    This modal uses the <code>{variant}</code> backdrop variant. Compare the40                    different visual effects: opaque provides full opacity, blur adds a backdrop41                    filter, and transparent removes the background.42                  </Modal.Description>43                </Modal.Body>44                <Modal.Footer>45                  <Modal.Close render={<Button xstyle={styles.action} />}>Continue</Modal.Close>46                </Modal.Footer>47              </Modal.Popup>48            </Modal.Viewport>49          </Modal.Portal>50        </Modal>51      ))}52    </div>53  );54}

1"use client";2// Adapted from HeroUI v3.2.6 modal-custom-backdrop (Apache-2.0).3import { Sparkles } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { Button, Modal } from "@lenso/ui";6
7const styles = stylex.create({8  backdrop: {9    backgroundColor: "transparent",10    backgroundImage: {11      default: "linear-gradient(to top, rgb(0 0 0 / 80%), rgb(0 0 0 / 40%), transparent)",12      ':where([data-theme="dark"]) &':13        "linear-gradient(to top, rgb(39 39 42 / 80%), rgb(39 39 42 / 40%), transparent)",14    },15  },16  popup: { maxWidth: 360 },17  header: { alignItems: "center", textAlign: "center" },18  icon: { backgroundColor: "var(--accent-soft)", color: "var(--accent-soft-foreground)" },19  sparkles: { width: 20, height: 20 },20  footer: { flexDirection: "column-reverse" },21  action: { width: "100%" },22});23
24export function CustomBackdrop() {25  return (26    <Modal>27      <Modal.Trigger render={<Button variant="secondary" />}>Custom Backdrop</Modal.Trigger>28      <Modal.Portal>29        <Modal.Backdrop variant="blur" xstyle={styles.backdrop} />30        <Modal.Viewport>31          <Modal.Popup xstyle={styles.popup}>32            <Modal.Header xstyle={styles.header}>33              <Modal.Icon xstyle={styles.icon}>34                <Sparkles {...stylex.props(styles.sparkles)} />35              </Modal.Icon>36              <Modal.Title>Premium Backdrop</Modal.Title>37            </Modal.Header>38            <Modal.Body>39              <Modal.Description>40                This backdrop features a sophisticated gradient that transitions from a dark color41                at the bottom to complete transparency at the top, combined with a smooth blur42                effect. The gradient automatically adapts its intensity for optimal contrast in both43                light and dark modes.44              </Modal.Description>45            </Modal.Body>46            <Modal.Footer xstyle={styles.footer}>47              <Modal.Close render={<Button xstyle={styles.action} />}>Amazing!</Modal.Close>48              <Modal.Close render={<Button variant="secondary" xstyle={styles.action} />}>49                Close50              </Modal.Close>51            </Modal.Footer>52            <Modal.Close aria-label="Close dialog" />53          </Modal.Popup>54        </Modal.Viewport>55      </Modal.Portal>56    </Modal>57  );58}

1"use client";2// Adapted from HeroUI v3.2.6 modal-dismiss-behavior (Apache-2.0).3import { CircleInfo } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { Button, Modal } 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: 360 },13  icon: { backgroundColor: "var(--default)", color: "var(--foreground)" },14  circle: { width: 20, height: 20 },15  action: { width: "100%" },16});17
18export function DismissBehavior() {19  return (20    <div {...stylex.props(styles.column)}>21      {(["outside-press", "escape-key"] as const).map((blockedReason) => (22        <div key={blockedReason} {...stylex.props(styles.section)}>23          <h3 {...stylex.props(styles.heading)}>24            {blockedReason === "outside-press" ? "Backdrop dismissal" : "Keyboard dismissal"}25          </h3>26          <p {...stylex.props(styles.caption)}>27            {blockedReason === "outside-press"28              ? "This modal requires an explicit close action or ESC instead of a backdrop click."29              : "ESC is disabled. Use an explicit close action or click the backdrop."}30          </p>31          <Modal32            onOpenChange={(open, details) => {33              if (!open && details.reason === blockedReason) details.cancel();34            }}35          >36            <Modal.Trigger render={<Button variant="secondary" />}>Open Modal</Modal.Trigger>37            <Modal.Portal>38              <Modal.Backdrop />39              <Modal.Viewport>40                <Modal.Popup xstyle={styles.popup}>41                  <Modal.Close aria-label="Close dialog" />42                  <Modal.Header>43                    <Modal.Icon xstyle={styles.icon}>44                      <CircleInfo {...stylex.props(styles.circle)} />45                    </Modal.Icon>46                    <Modal.Title>47                      {blockedReason === "outside-press"48                        ? "Backdrop dismissal disabled"49                        : "Keyboard dismissal disabled"}50                    </Modal.Title>51                    <Modal.Description xstyle={styles.caption}>52                      {blockedReason === "outside-press"53                        ? "Clicking the backdrop won't close this modal"54                        : "ESC key is disabled"}55                    </Modal.Description>56                  </Modal.Header>57                  <Modal.Body>58                    <p>59                      {blockedReason === "outside-press"60                        ? "Try clicking outside this modal on the overlay - it won't close. You must use the close button or press ESC to dismiss it."61                        : "Press ESC - nothing happens. You must use the close button or click the overlay backdrop to dismiss this modal."}62                    </p>63                  </Modal.Body>64                  <Modal.Footer>65                    <Modal.Close render={<Button xstyle={styles.action} />}>Close</Modal.Close>66                  </Modal.Footer>67                </Modal.Popup>68              </Modal.Viewport>69            </Modal.Portal>70          </Modal>71        </div>72      ))}73    </div>74  );75}

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

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

1"use client";2// Adapted from HeroUI v3.2.6 modal-custom-portal (Apache-2.0).3import { useCallback, useState } from "react";4import * as stylex from "@stylexjs/stylex";5import { Button, Modal } 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 modals 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          <Modal>45            <Modal.Trigger render={<Button />}>Open Modal</Modal.Trigger>46            <Modal.Portal container={portalContainer}>47              <Modal.Backdrop xstyle={styles.backdrop} />48              <Modal.Viewport xstyle={styles.viewport}>49                <Modal.Popup xstyle={styles.popup}>50                  <Modal.Close aria-label="Close dialog" />51                  <Modal.Header>52                    <Modal.Title>Custom Portal</Modal.Title>53                  </Modal.Header>54                  <Modal.Body>55                    {Array.from({ length: 3 }, (_, index) => (56                      <p key={index} {...stylex.props(styles.caption)}>57                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod58                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,59                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo60                        consequat.61                      </p>62                    ))}63                  </Modal.Body>64                  <Modal.Footer>65                    <Modal.Close render={<Button variant="secondary" />}>Close</Modal.Close>66                  </Modal.Footer>67                </Modal.Popup>68              </Modal.Viewport>69            </Modal.Portal>70          </Modal>71        )}72      </div>73    </div>74  );75}

1"use client";2// Adapted from HeroUI v3.2.6 modal-custom-styles (Apache-2.0).3import { CircleCheck } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { Button, Modal } from "@lenso/ui";6
7const styles = stylex.create({8  backdrop: {9    backgroundColor: {10      default: "color-mix(in oklab, var(--overlay) 50%, transparent)",11      ':where([data-theme="dark"]) &': "color-mix(in oklab, var(--overlay) 65%, transparent)",12    },13  },14  popup: {15    position: "relative",16    overflow: "hidden",17    maxWidth: 340,18    borderWidth: 1,19    borderStyle: "solid",20    borderColor: {21      default: "color-mix(in oklab, var(--border) 80%, transparent)",22      ':where([data-theme="dark"]) &': "color-mix(in oklab, var(--border) 90%, transparent)",23    },24    backgroundColor: {25      default: "color-mix(in oklab, var(--surface) 90%, transparent)",26      ':where([data-theme="dark"]) &': "color-mix(in oklab, var(--surface) 85%, transparent)",27    },28    boxShadow: {29      default: "0 25px 50px -12px rgb(0 0 0 / 25%), 0 0 0 1px rgb(0 0 0 / 5%)",30      ':where([data-theme="dark"]) &':31        "0 25px 50px -12px rgb(0 0 0 / 25%), 0 0 0 1px rgb(255 255 255 / 10%)",32    },33    backdropFilter: "blur(24px)",34  },35  glow: {36    pointerEvents: "none",37    position: "absolute",38    insetInline: 0,39    top: 0,40    height: 80,41    backgroundImage: {42      default: "linear-gradient(to bottom, rgb(115 115 115 / 8%), transparent)",43      ':where([data-theme="dark"]) &':44        "linear-gradient(to bottom, rgb(163 163 163 / 10%), transparent)",45    },46  },47  line: {48    pointerEvents: "none",49    position: "absolute",50    insetInline: 40,51    top: 0,52    height: 1,53    backgroundImage: {54      default: "linear-gradient(to right, transparent, rgb(163 163 163 / 40%), transparent)",55      ':where([data-theme="dark"]) &':56        "linear-gradient(to right, transparent, rgb(115 115 115 / 35%), transparent)",57    },58  },59  relative: { position: "relative" },60  icon: {61    backgroundColor: {62      default: "rgb(245 245 245)",63      ':where([data-theme="dark"]) &': "rgb(38 38 38)",64    },65    color: { default: "rgb(64 64 64)", ':where([data-theme="dark"]) &': "rgb(229 229 229)" },66  },67  circle: { width: 20, height: 20 },68  caption: { fontSize: 14, color: "var(--muted)" },69  action: { width: "100%" },70});71
72export function CustomStyles() {73  return (74    <Modal>75      <Modal.Trigger render={<Button variant="secondary" />}>Open</Modal.Trigger>76      <Modal.Portal>77        <Modal.Backdrop variant="blur" xstyle={styles.backdrop} />78        <Modal.Viewport>79          <Modal.Popup xstyle={styles.popup}>80            <div aria-hidden="true" {...stylex.props(styles.glow)} />81            <div aria-hidden="true" {...stylex.props(styles.line)} />82            <Modal.Close aria-label="Close dialog" />83            <Modal.Header xstyle={styles.relative}>84              <Modal.Icon xstyle={styles.icon}>85                <CircleCheck {...stylex.props(styles.circle)} />86              </Modal.Icon>87              <Modal.Title>Changes saved</Modal.Title>88            </Modal.Header>89            <Modal.Body xstyle={styles.relative}>90              <Modal.Description xstyle={styles.caption}>91                Your draft is synced across devices.92              </Modal.Description>93            </Modal.Body>94            <Modal.Footer>95              <Modal.Close render={<Button xstyle={styles.action} />}>Done</Modal.Close>96            </Modal.Footer>97          </Modal.Popup>98        </Modal.Viewport>99      </Modal.Portal>100    </Modal>101  );102}