Drawer

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-basic (Apache-2.0).4import { Button, Drawer } from "@lenso/ui";5
6export function Basic() {7  return (8    <Drawer.Provider>9      <Drawer swipeDirection="right">10        <Drawer.Trigger render={<Button variant="secondary" />}>Open Drawer</Drawer.Trigger>11        <Drawer.Portal>12          <Drawer.Backdrop />13          <Drawer.Viewport>14            <Drawer.Popup>15              <Drawer.Content>16                <Drawer.Header>17                  <Drawer.Title>Drawer Title</Drawer.Title>18                </Drawer.Header>19                <Drawer.Body>20                  <p>21                    This is a bottom drawer built with React Aria's Modal component. It slides up22                    from the bottom of the screen with a smooth CSS transition.23                  </p>24                </Drawer.Body>25                <Drawer.Footer>26                  <Drawer.Close render={<Button variant="secondary" />}>Cancel</Drawer.Close>27                  <Drawer.Close render={<Button />}>Confirm</Drawer.Close>28                </Drawer.Footer>29              </Drawer.Content>30            </Drawer.Popup>31          </Drawer.Viewport>32        </Drawer.Portal>33      </Drawer>34    </Drawer.Provider>35  );36}

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-placements (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Drawer } from "@lenso/ui";6import { styles } from "./styles";7
8export function Placements() {9  const placements = ["bottom", "top", "left", "right"] as const;10  return (11    <div {...stylex.props(styles.row)}>12      {placements.map((placement) => (13        <Drawer.Provider key={placement}>14          <Drawer15            swipeDirection={16              placement === "bottom" ? "down" : placement === "top" ? "up" : placement17            }18          >19            <Drawer.Trigger render={<Button variant="secondary" />}>20              {placement.charAt(0).toUpperCase() + placement.slice(1)}21            </Drawer.Trigger>22            <Drawer.Portal>23              <Drawer.Backdrop />24              <Drawer.Viewport>25                <Drawer.Popup>26                  <Drawer.Content>27                    <Drawer.Close28                      aria-label="Close drawer"29                      render={30                        <Button31                          isIconOnly32                          size="sm"33                          variant="tertiary"34                          xstyle={styles.cornerClose}35                        />36                      }37                    >38                      <CloseIcon />39                    </Drawer.Close>40                    {placement === "bottom" && <Drawer.Handle />}41                    <Drawer.Header>42                      <Drawer.Title>43                        {placement.charAt(0).toUpperCase() + placement.slice(1)} Drawer44                      </Drawer.Title>45                    </Drawer.Header>46                    <Drawer.Body>47                      <p>48                        This drawer slides in from the <strong>{placement}</strong> edge of the49                        screen.50                      </p>51                    </Drawer.Body>52                    <Drawer.Footer>53                      <Drawer.Close render={<Button variant="secondary" />}>Cancel</Drawer.Close>54                      <Drawer.Close render={<Button />}>Done</Drawer.Close>55                    </Drawer.Footer>56                    {placement === "top" && <Drawer.Handle />}57                  </Drawer.Content>58                </Drawer.Popup>59              </Drawer.Viewport>60            </Drawer.Portal>61          </Drawer>62        </Drawer.Provider>63      ))}64    </div>65  );66}

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-non-dismissable (Apache-2.0).4import { Button, Drawer } from "@lenso/ui";5
6export function NonDismissable() {7  return (8    <Drawer.Provider>9      <Drawer10        swipeDirection="down"11        onOpenChange={(_open, details) => {12          if (details.reason === "outside-press" || details.reason === "swipe") details.cancel();13        }}14      >15        <Drawer.Trigger render={<Button variant="secondary" />}>Important Action</Drawer.Trigger>16        <Drawer.Portal>17          <Drawer.Backdrop />18          <Drawer.Viewport>19            <Drawer.Popup>20              <Drawer.Content>21                <Drawer.Header>22                  <Drawer.Title>Confirm Action</Drawer.Title>23                </Drawer.Header>24                <Drawer.Body>25                  <p>26                    This drawer cannot be dismissed by clicking outside or dragging. You must use27                    one of the buttons below.28                  </p>29                </Drawer.Body>30                <Drawer.Footer>31                  <Drawer.Close render={<Button variant="secondary" />}>Cancel</Drawer.Close>32                  <Drawer.Close render={<Button />}>Confirm</Drawer.Close>33                </Drawer.Footer>34              </Drawer.Content>35            </Drawer.Popup>36          </Drawer.Viewport>37        </Drawer.Portal>38      </Drawer>39    </Drawer.Provider>40  );41}

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-scrollable-content (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Drawer } from "@lenso/ui";6import { styles } from "./styles";7
8export function ScrollableContent() {9  return (10    <Drawer.Provider>11      <Drawer swipeDirection="down">12        <Drawer.Trigger render={<Button variant="secondary" />}>Terms & Conditions</Drawer.Trigger>13        <Drawer.Portal>14          <Drawer.Backdrop />15          <Drawer.Viewport>16            <Drawer.Popup>17              <Drawer.Content>18                <Drawer.Handle />19                <Drawer.Close20                  aria-label="Close drawer"21                  render={22                    <Button isIconOnly size="sm" variant="tertiary" xstyle={styles.cornerClose} />23                  }24                >25                  <CloseIcon />26                </Drawer.Close>27                <Drawer.Header>28                  <Drawer.Title>Terms & Conditions</Drawer.Title>29                </Drawer.Header>30                <Drawer.Body>31                  {Array.from({ length: 20 }, (_, i) => (32                    <p key={i} {...stylex.props(styles.paragraph)}>33                      Paragraph {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.34                      Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet35                      hendrerit risus, sed porttitor quam.36                    </p>37                  ))}38                </Drawer.Body>39                <Drawer.Footer>40                  <Drawer.Close render={<Button variant="secondary" />}>Decline</Drawer.Close>41                  <Drawer.Close render={<Button />}>Accept</Drawer.Close>42                </Drawer.Footer>43              </Drawer.Content>44            </Drawer.Popup>45          </Drawer.Viewport>46        </Drawer.Portal>47      </Drawer>48    </Drawer.Provider>49  );50}

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-controlled (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Drawer, useOverlayState } from "@lenso/ui";6import React from "react";7import { styles } from "./styles";8
9export function Controlled() {10  const [isOpen, setIsOpen] = React.useState(false);11  const state = useOverlayState();12  return (13    <div {...stylex.props(styles.controlled)}>14      <div {...stylex.props(styles.section)}>15        <h3 {...stylex.props(styles.heading)}>With React.useState()</h3>16        <p {...stylex.props(styles.explanation)}>17          Control the drawer using React's <code>useState</code> hook for simple state management.18        </p>19        <Drawer.Provider>20          <Drawer open={isOpen} onOpenChange={setIsOpen} swipeDirection="right">21            <div {...stylex.props(styles.stateCard)}>22              <p {...stylex.props(styles.status)}>23                Status:{" "}24                <span {...stylex.props(styles.statusValue)}>{isOpen ? "open" : "closed"}</span>25              </p>26              <div {...stylex.props(styles.actions)}>27                <Drawer.Trigger render={<Button size="sm" variant="secondary" />}>28                  Open Drawer29                </Drawer.Trigger>30                <Button size="sm" variant="tertiary" onClick={() => setIsOpen(!isOpen)}>31                  Toggle32                </Button>33              </div>34            </div>35            <Drawer.Portal>36              <Drawer.Backdrop />37              <Drawer.Viewport>38                <Drawer.Popup>39                  <Drawer.Content>40                    <Drawer.Close41                      aria-label="Close drawer"42                      render={43                        <Button44                          isIconOnly45                          size="sm"46                          variant="tertiary"47                          xstyle={styles.cornerClose}48                        />49                      }50                    >51                      <CloseIcon />52                    </Drawer.Close>53                    <Drawer.Header>54                      <Drawer.Title>Controlled with useState()</Drawer.Title>55                    </Drawer.Header>56                    <Drawer.Body>57                      <p>58                        This drawer is controlled by React's <code>useState</code> hook. Pass{" "}59                        <code>isOpen</code> and <code>onOpenChange</code> props to manage the drawer60                        state externally.61                      </p>62                    </Drawer.Body>63                    <Drawer.Footer>64                      <Drawer.Close render={<Button variant="secondary" />}>Close</Drawer.Close>65                    </Drawer.Footer>66                  </Drawer.Content>67                </Drawer.Popup>68              </Drawer.Viewport>69            </Drawer.Portal>70          </Drawer>71        </Drawer.Provider>72      </div>73      <div {...stylex.props(styles.section)}>74        <h3 {...stylex.props(styles.heading)}>With useOverlayState()</h3>75        <p {...stylex.props(styles.explanation)}>76          Use the <code>useOverlayState</code> hook for a cleaner API with convenient methods like{" "}77          <code>open()</code>, <code>close()</code>, and <code>toggle()</code>.78        </p>79        <Drawer.Provider>80          <Drawer open={state.isOpen} onOpenChange={state.setOpen} swipeDirection="right">81            <div {...stylex.props(styles.stateCard)}>82              <p {...stylex.props(styles.status)}>83                Status:{" "}84                <span {...stylex.props(styles.statusValue)}>85                  {state.isOpen ? "open" : "closed"}86                </span>87              </p>88              <div {...stylex.props(styles.actions)}>89                <Drawer.Trigger90                  render={<Button size="sm" variant="secondary" />}91                  onClick={state.open}92                >93                  Open Drawer94                </Drawer.Trigger>95                <Button size="sm" variant="tertiary" onClick={state.toggle}>96                  Toggle97                </Button>98              </div>99            </div>100            <Drawer.Portal>101              <Drawer.Backdrop />102              <Drawer.Viewport>103                <Drawer.Popup>104                  <Drawer.Content>105                    <Drawer.Close106                      aria-label="Close drawer"107                      render={108                        <Button109                          isIconOnly110                          size="sm"111                          variant="tertiary"112                          xstyle={styles.cornerClose}113                        />114                      }115                    >116                      <CloseIcon />117                    </Drawer.Close>118                    <Drawer.Header>119                      <Drawer.Title>Controlled with useOverlayState()</Drawer.Title>120                    </Drawer.Header>121                    <Drawer.Body>122                      <p>123                        The <code>useOverlayState</code> hook provides dedicated methods for common124                        operations. No need to manually create callbacks—just use{" "}125                        <code>state.open()</code>, <code>state.close()</code>, or{" "}126                        <code>state.toggle()</code>.127                      </p>128                    </Drawer.Body>129                    <Drawer.Footer>130                      <Drawer.Close render={<Button variant="secondary" />}>Close</Drawer.Close>131                    </Drawer.Footer>132                  </Drawer.Content>133                </Drawer.Popup>134              </Drawer.Viewport>135            </Drawer.Portal>136          </Drawer>137        </Drawer.Provider>138      </div>139    </div>140  );141}

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-with-form (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Drawer, Input, Label, TextField } from "@lenso/ui";6import { styles } from "./styles";7
8export function WithForm() {9  return (10    <Drawer.Provider>11      <Drawer swipeDirection="right">12        <Drawer.Trigger render={<Button variant="secondary" />}>Edit Profile</Drawer.Trigger>13        <Drawer.Portal>14          <Drawer.Backdrop />15          <Drawer.Viewport>16            <Drawer.Popup>17              <Drawer.Content>18                <Drawer.Close19                  aria-label="Close drawer"20                  render={21                    <Button isIconOnly size="sm" variant="tertiary" xstyle={styles.cornerClose} />22                  }23                >24                  <CloseIcon />25                </Drawer.Close>26                <Drawer.Header>27                  <Drawer.Title>Edit Profile</Drawer.Title>28                </Drawer.Header>29                <Drawer.Body>30                  <form {...stylex.props(styles.form)}>31                    <TextField fullWidth name="name">32                      <Label>Name</Label>33                      <Input type="text" placeholder="Enter your name" variant="secondary" />34                    </TextField>35                    <TextField fullWidth name="email">36                      <Label>Email</Label>37                      <Input type="email" placeholder="Enter your email" variant="secondary" />38                    </TextField>39                    <TextField fullWidth name="bio">40                      <Label>Bio</Label>41                      <Input placeholder="Tell us about yourself" variant="secondary" />42                    </TextField>43                  </form>44                </Drawer.Body>45                <Drawer.Footer>46                  <Drawer.Close render={<Button variant="secondary" />}>Cancel</Drawer.Close>47                  <Drawer.Close render={<Button />}>Save Changes</Drawer.Close>48                </Drawer.Footer>49              </Drawer.Content>50            </Drawer.Popup>51          </Drawer.Viewport>52        </Drawer.Portal>53      </Drawer>54    </Drawer.Provider>55  );56}

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-navigation (Apache-2.0).4import type { ComponentType, SVGProps } from "react";5import { Bars, Bell, Envelope, Gear, House, Magnifier, Person } from "@gravity-ui/icons";6import * as stylex from "@stylexjs/stylex";7import { Button, CloseIcon, Drawer } from "@lenso/ui";8import { styles } from "./styles";9
10export function Navigation() {11  const navItems: { icon: ComponentType<SVGProps<SVGSVGElement>>; label: string }[] = [12    { icon: House, label: "Home" },13    { icon: Magnifier, label: "Search" },14    { icon: Bell, label: "Notifications" },15    { icon: Envelope, label: "Messages" },16    { icon: Person, label: "Profile" },17    { icon: Gear, label: "Settings" },18  ];19  return (20    <Drawer.Provider>21      <Drawer swipeDirection="left">22        <Drawer.Trigger render={<Button variant="secondary" />}>23          <Button.Icon>24            <Bars />25          </Button.Icon>26          Menu27        </Drawer.Trigger>28        <Drawer.Portal>29          <Drawer.Backdrop />30          <Drawer.Viewport>31            <Drawer.Popup>32              <Drawer.Content>33                <Drawer.Close34                  aria-label="Close drawer"35                  render={36                    <Button isIconOnly size="sm" variant="tertiary" xstyle={styles.cornerClose} />37                  }38                >39                  <CloseIcon />40                </Drawer.Close>41                <Drawer.Header>42                  <Drawer.Title>Navigation</Drawer.Title>43                </Drawer.Header>44                <Drawer.Body>45                  <nav {...stylex.props(styles.navigation)}>46                    {navItems.map((item) => (47                      <button key={item.label} {...stylex.props(styles.navButton)} type="button">48                        <item.icon {...stylex.props(styles.icon)} />49                        {item.label}50                      </button>51                    ))}52                  </nav>53                </Drawer.Body>54              </Drawer.Content>55            </Drawer.Popup>56          </Drawer.Viewport>57        </Drawer.Portal>58      </Drawer>59    </Drawer.Provider>60  );61}

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-backdrop-variants (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Drawer } from "@lenso/ui";6import { styles } from "./styles";7
8export function BackdropVariants() {9  const variants = ["opaque", "blur", "transparent"] as const;10  return (11    <div {...stylex.props(styles.row)}>12      {variants.map((variant) => (13        <Drawer.Provider key={variant}>14          <Drawer swipeDirection="down">15            <Drawer.Trigger render={<Button variant="secondary" />}>16              {variant.charAt(0).toUpperCase() + variant.slice(1)}17            </Drawer.Trigger>18            <Drawer.Portal>19              <Drawer.Backdrop variant={variant} />20              <Drawer.Viewport>21                <Drawer.Popup>22                  <Drawer.Content>23                    <Drawer.Handle />24                    <Drawer.Close25                      aria-label="Close drawer"26                      render={27                        <Button28                          isIconOnly29                          size="sm"30                          variant="tertiary"31                          xstyle={styles.cornerClose}32                        />33                      }34                    >35                      <CloseIcon />36                    </Drawer.Close>37                    <Drawer.Header>38                      <Drawer.Title>39                        Backdrop: {variant.charAt(0).toUpperCase() + variant.slice(1)}40                      </Drawer.Title>41                    </Drawer.Header>42                    <Drawer.Body>43                      <p>44                        This drawer uses the <code>{variant}</code> backdrop variant.45                      </p>46                    </Drawer.Body>47                    <Drawer.Footer>48                      <Drawer.Close render={<Button xstyle={styles.fullWidth} />}>49                        Close50                      </Drawer.Close>51                    </Drawer.Footer>52                  </Drawer.Content>53                </Drawer.Popup>54              </Drawer.Viewport>55            </Drawer.Portal>56          </Drawer>57        </Drawer.Provider>58      ))}59    </div>60  );61}

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-custom-styles (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, Drawer } from "@lenso/ui";6import { styles } from "./styles";7
8export function CustomStyles() {9  return (10    <Drawer.Provider>11      <Drawer swipeDirection="right">12        <Drawer.Trigger render={<Button variant="secondary" />}>Open filters</Drawer.Trigger>13        <Drawer.Portal>14          <Drawer.Backdrop variant="blur" />15          <Drawer.Viewport>16            <Drawer.Popup xstyle={styles.filters}>17              <Drawer.Content>18                <Drawer.Header>19                  <Drawer.Title>Filters</Drawer.Title>20                </Drawer.Header>21                <Drawer.Body>22                  <p {...stylex.props(styles.muted)}>Narrow results by status, owner, or date.</p>23                </Drawer.Body>24                <Drawer.Footer>25                  <Drawer.Close render={<Button variant="secondary" />}>Cancel</Drawer.Close>26                  <Drawer.Close render={<Button />}>Apply</Drawer.Close>27                </Drawer.Footer>28              </Drawer.Content>29            </Drawer.Popup>30          </Drawer.Viewport>31        </Drawer.Portal>32      </Drawer>33    </Drawer.Provider>34  );35}