Popover

1"use client";2
3// Adapted from HeroUI v3.2.6 popover-basic (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, Popover } from "@lenso/ui";6import { styles } from "./styles";7
8export function PopoverBasic() {9  return (10    <div {...stylex.props(styles.row)}>11      <Popover>12        <Popover.Trigger render={<Button />}>Click me</Popover.Trigger>13        <Popover.Portal>14          <Popover.Positioner sideOffset={8}>15            <Popover.Popup xstyle={styles.popup}>16              <Popover.Title>Popover Title</Popover.Title>17              <Popover.Description xstyle={styles.description}>18                This is the popover content. You can put any content here.19              </Popover.Description>20            </Popover.Popup>21          </Popover.Positioner>22        </Popover.Portal>23      </Popover>24    </div>25  );26}

1"use client";2
3// Adapted from HeroUI v3.2.6 popover-with-arrow (Apache-2.0).4import { Ellipsis } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Popover } from "@lenso/ui";7import { styles } from "./styles";8
9export function PopoverWithArrow() {10  return (11    <div {...stylex.props(styles.row)}>12      <Popover>13        <Popover.Trigger render={<Button variant="secondary" />}>With Arrow</Popover.Trigger>14        <Popover.Portal>15          <Popover.Positioner sideOffset={8}>16            <Popover.Popup xstyle={styles.popup}>17              <Popover.Arrow />18              <Popover.Title>Popover with Arrow</Popover.Title>19              <Popover.Description xstyle={styles.description}>20                The arrow shows which element triggered the popover.21              </Popover.Description>22            </Popover.Popup>23          </Popover.Positioner>24        </Popover.Portal>25      </Popover>26      <Popover>27        <Popover.Trigger28          render={<Button isIconOnly aria-label="More options" variant="tertiary" />}29        >30          <Button.Icon>31            <Ellipsis />32          </Button.Icon>33        </Popover.Trigger>34        <Popover.Portal>35          <Popover.Positioner sideOffset={10}>36            <Popover.Popup xstyle={styles.popup}>37              <Popover.Arrow />38              <Popover.Title>Popover with Arrow</Popover.Title>39              <Popover.Description xstyle={styles.description}>40                The arrow shows which element triggered the popover.41              </Popover.Description>42            </Popover.Popup>43          </Popover.Positioner>44        </Popover.Portal>45      </Popover>46    </div>47  );48}

1"use client";2
3// Adapted from HeroUI v3.2.6 popover-interactive (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Avatar, Button, Popover } from "@lenso/ui";6import { useState } from "react";7import { styles } from "./styles";8
9export function PopoverInteractive() {10  const [isFollowing, setIsFollowing] = useState(false);11  return (12    <div {...stylex.props(styles.profileRow)}>13      <Popover>14        <Popover.Trigger aria-label="User profile">15          <div {...stylex.props(styles.identity)}>16            <Avatar size="sm">17              <Avatar.Image18                alt="Sarah Johnson"19                src="https://img.heroui.chat/image/avatar?w=400&h=400&u=1"20              />21              <Avatar.Fallback>SJ</Avatar.Fallback>22            </Avatar>23            <div {...stylex.props(styles.identityText)}>24              <p {...stylex.props(styles.name)}>Sarah Johnson</p>25              <p {...stylex.props(styles.handle)}>@sarahj</p>26            </div>27          </div>28        </Popover.Trigger>29        <Popover.Portal>30          <Popover.Positioner sideOffset={8}>31            <Popover.Popup xstyle={styles.profilePopup}>32              <Popover.Title render={<div />}>33                <div {...stylex.props(styles.profileHeading)}>34                  <div {...stylex.props(styles.identityLarge)}>35                    <Avatar size="md">36                      <Avatar.Image37                        alt="Sarah Johnson"38                        src="https://img.heroui.chat/image/avatar?w=400&h=400&u=1"39                      />40                      <Avatar.Fallback>SJ</Avatar.Fallback>41                    </Avatar>42                    <div>43                      <p {...stylex.props(styles.strong)}>Sarah Johnson</p>44                      <p {...stylex.props(styles.muted)}>@sarahj</p>45                    </div>46                  </div>47                  <Button48                    xstyle={styles.follow}49                    size="sm"50                    variant={isFollowing ? "tertiary" : "primary"}51                    onClick={() => setIsFollowing(!isFollowing)}52                  >53                    {isFollowing ? "Following" : "Follow"}54                  </Button>55                </div>56              </Popover.Title>57              <Popover.Description xstyle={styles.bio}>58                Product designer and creative director. Building beautiful experiences that matter.59              </Popover.Description>60              <div {...stylex.props(styles.statistics)}>61                <div>62                  <span {...stylex.props(styles.strong)}>892</span>63                  <span {...stylex.props(styles.statisticLabel)}>Following</span>64                </div>65                <div>66                  <span {...stylex.props(styles.strong)}>12.5K</span>67                  <span {...stylex.props(styles.statisticLabel)}>Followers</span>68                </div>69              </div>70            </Popover.Popup>71          </Popover.Positioner>72        </Popover.Portal>73      </Popover>74    </div>75  );76}

1"use client";2
3// Adapted from HeroUI v3.2.6 popover-placement (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, Popover } from "@lenso/ui";6import { styles } from "./styles";7
8export function PopoverPlacement() {9  return (10    <div {...stylex.props(styles.grid)}>11      <div />12      <Popover>13        <Popover.Trigger render={<Button xstyle={styles.fullWidth} variant="tertiary" />}>14          Top15        </Popover.Trigger>16        <Popover.Portal>17          <Popover.Positioner side="top" sideOffset={8}>18            <Popover.Popup>19              <Popover.Arrow />20              <p {...stylex.props(styles.small)}>Top placement</p>21            </Popover.Popup>22          </Popover.Positioner>23        </Popover.Portal>24      </Popover>25      <div />26      <Popover>27        <Popover.Trigger render={<Button xstyle={styles.fullWidth} variant="tertiary" />}>28          Left29        </Popover.Trigger>30        <Popover.Portal>31          <Popover.Positioner side="left" sideOffset={8}>32            <Popover.Popup>33              <Popover.Arrow />34              <p {...stylex.props(styles.small)}>Left placement</p>35            </Popover.Popup>36          </Popover.Positioner>37        </Popover.Portal>38      </Popover>39      <div {...stylex.props(styles.center)}>40        <span {...stylex.props(styles.muted)}>Click buttons</span>41      </div>42      <Popover>43        <Popover.Trigger render={<Button xstyle={styles.fullWidth} variant="tertiary" />}>44          Right45        </Popover.Trigger>46        <Popover.Portal>47          <Popover.Positioner side="right" sideOffset={8}>48            <Popover.Popup>49              <Popover.Arrow />50              <p {...stylex.props(styles.small)}>Right placement</p>51            </Popover.Popup>52          </Popover.Positioner>53        </Popover.Portal>54      </Popover>55      <div />56      <Popover>57        <Popover.Trigger render={<Button xstyle={styles.fullWidth} variant="tertiary" />}>58          Bottom59        </Popover.Trigger>60        <Popover.Portal>61          <Popover.Positioner side="bottom" sideOffset={8}>62            <Popover.Popup>63              <Popover.Arrow />64              <p {...stylex.props(styles.small)}>Bottom placement</p>65            </Popover.Popup>66          </Popover.Positioner>67        </Popover.Portal>68      </Popover>69      <div />70    </div>71  );72}

1"use client";2
3// Adapted from HeroUI v3.2.6 popover-render-function (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, Popover } from "@lenso/ui";6import { styles } from "./styles";7
8export function RenderFunction() {9  return (10    <div {...stylex.props(styles.row)}>11      <Popover>12        <Popover.Trigger render={<Button />}>Click me</Popover.Trigger>13        <Popover.Portal>14          <Popover.Positioner sideOffset={8}>15            <Popover.Popup16              xstyle={styles.popup}17              render={(props) => <div {...props} data-custom="foo" />}18            >19              <Popover.Title>Popover Title</Popover.Title>20              <Popover.Description xstyle={styles.description}>21                This is the popover content. You can put any content here.22              </Popover.Description>23            </Popover.Popup>24          </Popover.Positioner>25        </Popover.Portal>26      </Popover>27    </div>28  );29}

1"use client";2
3// Adapted from HeroUI v3.2.6 popover-custom-styles (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, Popover } from "@lenso/ui";6import { styles } from "./styles";7
8export function CustomStyles() {9  return (10    <Popover>11      <Popover.Trigger render={<Button variant="secondary" />}>Details</Popover.Trigger>12      <Popover.Portal>13        <Popover.Positioner sideOffset={8}>14          <Popover.Popup xstyle={styles.customPopup}>15            <div {...stylex.props(styles.customDialog)}>16              <div aria-hidden="true" {...stylex.props(styles.highlight)} />17              <Popover.Title xstyle={styles.customHeading}>Keyboard shortcuts</Popover.Title>18              <dl {...stylex.props(styles.shortcuts)}>19                <div {...stylex.props(styles.shortcut)}>20                  <dt {...stylex.props(styles.muted)}>Save</dt>21                  <dd {...stylex.props(styles.key)}>⌘ S</dd>22                </div>23                <div {...stylex.props(styles.shortcut)}>24                  <dt {...stylex.props(styles.muted)}>Search</dt>25                  <dd {...stylex.props(styles.key)}>⌘ K</dd>26                </div>27              </dl>28            </div>29          </Popover.Popup>30        </Popover.Positioner>31      </Popover.Portal>32    </Popover>33  );34}