v3.0.0-rc.1

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-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
3import { Heart } from "@gravity-ui/icons";4import { ToggleButton } from "@lenso/ui";5
6export function Basic() {7  return (8    <ToggleButton>9      <ToggleButton.Icon>10        <Heart />11      </ToggleButton.Icon>12      Like13    </ToggleButton>14  );15}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.3import { Heart } from "@gravity-ui/icons";4import { ToggleButton } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { styles } from "./source.stylex";7export function Variants() {8  return (9    <div {...stylex.props(styles.row)}>10      <ToggleButton>11        <ToggleButton.Icon>12          <Heart />13        </ToggleButton.Icon>14        Default15      </ToggleButton>16      <ToggleButton variant="ghost">17        <ToggleButton.Icon>18          <Heart />19        </ToggleButton.Icon>20        Ghost21      </ToggleButton>22    </div>23  );24}

1"use client";2
3import { Bold, Italic, Strikethrough, Underline } from "@gravity-ui/icons";4import { ToggleButton, ToggleButtonGroup } from "@lenso/ui";5
6export function Basic() {7  return (8    <ToggleButtonGroup multiple aria-label="Text formatting">9      <ToggleButton isIconOnly aria-label="Bold" value="bold">10        <ToggleButton.Icon>11          <Bold />12        </ToggleButton.Icon>13      </ToggleButton>14      <ToggleButton isIconOnly aria-label="Italic" value="italic">15        <ToggleButtonGroup.Separator />16        <ToggleButton.Icon>17          <Italic />18        </ToggleButton.Icon>19      </ToggleButton>20      <ToggleButton isIconOnly aria-label="Underline" value="underline">21        <ToggleButtonGroup.Separator />22        <ToggleButton.Icon>23          <Underline />24        </ToggleButton.Icon>25      </ToggleButton>26      <ToggleButton isIconOnly aria-label="Strikethrough" value="strikethrough">27        <ToggleButtonGroup.Separator />28        <ToggleButton.Icon>29          <Strikethrough />30        </ToggleButton.Icon>31      </ToggleButton>32    </ToggleButtonGroup>33  );34}

1"use client";2export { SelectionMode } from "./source";

1"use client";2export { Attached } from "./source";

1"use client";2
3import { Meter } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ meter: { width: 256 } });6
7export function Basic() {8  return (9    <Meter aria-label="Storage" xstyle={styles.meter} value={60}>10      <Meter.Label>Storage</Meter.Label>11      <Meter.Output />12      <Meter.Track>13        <Meter.Fill />14      </Meter.Track>15    </Meter>16  );17}

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Meter } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  column: { display: "flex", width: 256, flexDirection: "column", gap: 24 },7});8export function Colors() {9  return (10    <div {...stylex.props(styles.column)}>11      {(["default", "accent", "success", "warning", "danger"] as const).map((color) => (12        <Meter key={color} color={color} value={50}>13          <Meter.Label>14            {color[0]?.toUpperCase()}15            {color.slice(1)}16          </Meter.Label>17          <Meter.Output />18          <Meter.Track>19            <Meter.Fill />20          </Meter.Track>21        </Meter>22      ))}23    </div>24  );25}26export default Colors;

1"use client";2
3import { ProgressBar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ progress: { width: 256 } });6
7export function Basic() {8  return (9    <ProgressBar aria-label="Loading" xstyle={styles.progress} value={60}>10      <ProgressBar.Label>Loading</ProgressBar.Label>11      <ProgressBar.Output />12      <ProgressBar.Track>13        <ProgressBar.Fill />14      </ProgressBar.Track>15    </ProgressBar>16  );17}

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0); null is Base UI's indeterminate value.3import { ProgressBar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ progress: { width: 256 } });6export function Indeterminate() {7  return (8    <ProgressBar aria-label="Loading" xstyle={styles.progress} value={null}>9      <ProgressBar.Label>Loading...</ProgressBar.Label>10      <ProgressBar.Track>11        <ProgressBar.Fill />12      </ProgressBar.Track>13    </ProgressBar>14  );15}16export default Indeterminate;

1"use client";2
3import { ProgressCircle } from "@lenso/ui";4
5export function Basic() {6  return (7    <ProgressCircle aria-label="Loading" value={60}>8      <ProgressCircle.Track>9        <ProgressCircle.TrackCircle />10        <ProgressCircle.FillCircle />11      </ProgressCircle.Track>12    </ProgressCircle>13  );14}

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { ProgressCircle } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ row: { display: "flex", alignItems: "flex-end", gap: 24 } });6export function CustomSvg() {7  return (8    <div {...stylex.props(styles.row)}>9      <ProgressCircle aria-label="Thin circle" value={60}>10        <ProgressCircle.Track strokeWidth={2} viewBox="0 0 36 36">11          <ProgressCircle.TrackCircle cx={18} cy={18} r={17} strokeWidth={2} />12          <ProgressCircle.FillCircle cx={18} cy={18} r={17} strokeWidth={2} />13        </ProgressCircle.Track>14      </ProgressCircle>15      <ProgressCircle aria-label="Default circle" value={60}>16        <ProgressCircle.Track>17          <ProgressCircle.TrackCircle />18          <ProgressCircle.FillCircle />19        </ProgressCircle.Track>20      </ProgressCircle>21      <ProgressCircle aria-label="Thick circle" value={60}>22        <ProgressCircle.Track strokeWidth={6} viewBox="0 0 36 36">23          <ProgressCircle.TrackCircle cx={18} cy={18} r={15} strokeWidth={6} />24          <ProgressCircle.FillCircle cx={18} cy={18} r={15} strokeWidth={6} />25        </ProgressCircle.Track>26      </ProgressCircle>27    </div>28  );29}30export default CustomSvg;

1"use client";2export { Basic } from "./source";

1"use client";2export { WithButtonGroup } from "./source";

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.3import {4  ChevronDown,5  ChevronLeft,6  ChevronRight,7  CodeFork,8  Ellipsis,9  Picture,10  Pin,11  QrCode,12  Star,13  TextAlignCenter,14  TextAlignJustify,15  TextAlignLeft,16  TextAlignRight,17  ThumbsDown,18  ThumbsUp,19  Video,20} from "@gravity-ui/icons";21import { Button, ButtonGroup, Chip, Dropdown } from "@lenso/ui";22import * as stylex from "@stylexjs/stylex";23import { basicStyles as styles } from "./basic.stylex";24import { styles as sourceStyles } from "./source.stylex";25export function Basic() {26  return (27    <div {...stylex.props(styles.root)}>28      <div {...stylex.props(styles.section)}>29        <ButtonGroup>30          <Button>Merge pull request</Button>31          <Dropdown>32            <Dropdown.Trigger33              render={<Button isIconOnly aria-label="More options" xstyle={styles.splitTrigger} />}34            >35              <ButtonGroup.Separator />36              <Button.Icon>37                <ChevronDown />38              </Button.Icon>39            </Dropdown.Trigger>40            <Dropdown.Portal>41              <Dropdown.Positioner side="bottom" align="end">42                <Dropdown.Popup xstyle={styles.popup}>43                  {[44                    {45                      id: "merge",46                      label: "Create a merge commit",47                      description: "All commits from this branch will be added to the base branch",48                    },49                    {50                      id: "squash",51                      label: "Squash and merge",52                      description:53                        "The 14 commits from this branch will be combined into one commit in the base branch",54                    },55                    {56                      id: "rebase",57                      label: "Rebase and merge",58                      description:59                        "The 14 commits from this branch will be rebased and added to the base branch",60                    },61                  ].map((item) => (62                    <Dropdown.Item key={item.id} xstyle={styles.item}>63                      <span {...stylex.props(sourceStyles.menuLabel)}>{item.label}</span>64                      <span {...stylex.props(sourceStyles.menuDescription)}>65                        {item.description}66                      </span>67                    </Dropdown.Item>68                  ))}69                </Dropdown.Popup>70              </Dropdown.Positioner>71            </Dropdown.Portal>72          </Dropdown>73        </ButtonGroup>74      </div>75      <div {...stylex.props(styles.section)}>76        <div {...stylex.props(styles.row)}>77          <ButtonGroup variant="tertiary">78            <Button>79              <CodeFork {...stylex.props(styles.smallIcon)} />80              Fork81              <Chip color="accent" size="sm" variant="soft">82                2483              </Chip>84            </Button>85            <Button isIconOnly aria-label="More fork options">86              <ButtonGroup.Separator />87              <Button.Icon>88                <ChevronDown />89              </Button.Icon>90            </Button>91          </ButtonGroup>92          <ButtonGroup variant="tertiary">93            <Button isIconOnly aria-label="Show QR code">94              <Button.Icon>95                <QrCode />96              </Button.Icon>97            </Button>98            <Button>99              <ButtonGroup.Separator />100              Scan to pay101            </Button>102          </ButtonGroup>103          <ButtonGroup variant="tertiary">104            <Button>105              <Button.Icon>106                <ThumbsUp />107              </Button.Icon>108              <span {...stylex.props(styles.count)}>2.4K</span>109            </Button>110            <Button isIconOnly aria-label="Dislike">111              <ButtonGroup.Separator />112              <Button.Icon>113                <ThumbsDown />114              </Button.Icon>115            </Button>116          </ButtonGroup>117          <ButtonGroup variant="tertiary">118            <Button>119              <Star {...stylex.props(styles.smallIcon)} />120              Star121            </Button>122            <Button xstyle={styles.countButton}>123              <ButtonGroup.Separator />124              <Chip color="accent" size="sm" variant="soft">125                104126              </Chip>127            </Button>128          </ButtonGroup>129          <ButtonGroup variant="tertiary">130            <Button>131              <Button.Icon>132                <Pin />133              </Button.Icon>134              Pinned135            </Button>136            <Button isIconOnly aria-label="More pin options">137              <ButtonGroup.Separator />138              <Button.Icon>139                <ChevronDown />140              </Button.Icon>141            </Button>142          </ButtonGroup>143        </div>144      </div>145      <div {...stylex.props(styles.section)}>146        <ButtonGroup variant="tertiary">147          <Button>148            <Button.Icon>149              <ChevronLeft />150            </Button.Icon>151            Previous152          </Button>153          <Button>154            <ButtonGroup.Separator />155            Next156            <Button.Icon>157              <ChevronRight />158            </Button.Icon>159          </Button>160        </ButtonGroup>161      </div>162      <div {...stylex.props(styles.section)}>163        <ButtonGroup variant="tertiary">164          <Button>165            <Button.Icon>166              <Picture />167            </Button.Icon>168            Photos169          </Button>170          <Button>171            <ButtonGroup.Separator />172            <Button.Icon>173              <Video />174            </Button.Icon>175            Videos176          </Button>177          <Button isIconOnly aria-label="More options">178            <ButtonGroup.Separator />179            <Button.Icon>180              <Ellipsis />181            </Button.Icon>182          </Button>183        </ButtonGroup>184      </div>185      <div {...stylex.props(styles.section)}>186        <ButtonGroup variant="tertiary">187          <Button>Left</Button>188          <Button>189            <ButtonGroup.Separator />190            Center191          </Button>192          <Button>193            <ButtonGroup.Separator />194            Right195          </Button>196        </ButtonGroup>197      </div>198      <div {...stylex.props(styles.section)}>199        <ButtonGroup variant="tertiary">200          {[201            { label: "Align left", icon: <TextAlignLeft /> },202            { label: "Align center", icon: <TextAlignCenter /> },203            { label: "Align right", icon: <TextAlignRight /> },204            { label: "Justify", icon: <TextAlignJustify /> },205          ].map((item, index) => (206            <Button key={item.label} isIconOnly aria-label={item.label}>207              {index > 0 && <ButtonGroup.Separator />}208              <Button.Icon>{item.icon}</Button.Icon>209            </Button>210          ))}211        </ButtonGroup>212      </div>213    </div>214  );215}

1"use client";2// HeroUI v3.2.6 virtualization adaptation (Apache-2.0); native row spacers.3import { Table } from "@lenso/ui";4import { styles } from "./data";5const first = [6  "Emma",7  "Liam",8  "Olivia",9  "Noah",10  "Ava",11  "James",12  "Sophia",13  "Oliver",14  "Isabella",15  "Lucas",16  "Mia",17  "Ethan",18  "Charlotte",19  "Mason",20  "Amelia",21  "Logan",22  "Harper",23  "Alexander",24  "Ella",25  "Benjamin",26];27const last = [28  "Smith",29  "Johnson",30  "Williams",31  "Brown",32  "Jones",33  "Garcia",34  "Miller",35  "Davis",36  "Rodriguez",37  "Martinez",38  "Anderson",39  "Taylor",40  "Thomas",41  "Jackson",42  "White",43  "Harris",44  "Clark",45  "Lewis",46  "Robinson",47  "Walker",48];49const roles = [50  "Software Engineer",51  "Senior Engineer",52  "Staff Engineer",53  "Product Manager",54  "Designer",55  "Data Analyst",56  "QA Engineer",57  "DevOps Engineer",58  "Marketing Manager",59  "Sales Representative",60];61const users = Array.from({ length: 1000 }, (_, index) => ({62  key: index + 1,63  name: `${first[index % 20]} ${last[Math.floor(index / 20) % 20]}`,64  role: roles[index % 10],65  email: `${first[index % 20]!.toLowerCase()}.${last[Math.floor(index / 20) % 20]!.toLowerCase()}@acme.com`,66}));67export function Virtualization() {68  return (69    <Table>70      <Table.ScrollContainer xstyle={styles.virtualViewport}>71        <Table.Content aria-label="Virtualized table with 1000 rows" xstyle={styles.resizing}>72          <Table.Header xstyle={styles.sticky}>73            <Table.Column columnKey="name" minWidth={160}>74              Name75            </Table.Column>76            <Table.Column columnKey="role" minWidth={220}>77              Role78            </Table.Column>79            <Table.Column columnKey="email" minWidth={240}>80              Email81            </Table.Column>82          </Table.Header>83          <Table.Body items={users} virtualized={{ height: 300, rowHeight: 42 }}>84            {(user) => (85              <Table.Row itemKey={user.key}>86                <Table.Cell>{user.name}</Table.Cell>87                <Table.Cell>{user.role}</Table.Cell>88                <Table.Cell>{user.email}</Table.Cell>89              </Table.Row>90            )}91          </Table.Body>92        </Table.Content>93      </Table.ScrollContainer>94    </Table>95  );96}

1"use client";2export { Orientation } from "./source";