v3.0.0-beta.1

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Alert, Button, CloseButton, Spinner } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function Basic() {8  return (9    <div {...stylex.props(s.alertStack)}>10      <Alert>11        <Alert.Indicator />12        <Alert.Content>13          <Alert.Title>New features available</Alert.Title>14          <Alert.Description>15            Check out our latest updates including dark mode support and improved accessibility16            features.17          </Alert.Description>18        </Alert.Content>19      </Alert>20      <Alert status="accent">21        <Alert.Indicator />22        <Alert.Content>23          <Alert.Title>Update available</Alert.Title>24          <Alert.Description>25            A new version of the application is available. Please refresh to get the latest features26            and bug fixes.27          </Alert.Description>28          <Button xstyle={s.mobile2} size="sm" variant="primary">29            Refresh30          </Button>31        </Alert.Content>32        <Button xstyle={s.desktopBlock} size="sm" variant="primary">33          Refresh34        </Button>35      </Alert>36      <Alert status="danger">37        <Alert.Indicator />38        <Alert.Content>39          <Alert.Title>Unable to connect to server</Alert.Title>40          <Alert.Description>41            We're experiencing connection issues. Please try the following:42            <ul {...stylex.props(s.list)}>43              <li>Check your internet connection</li>44              <li {...stylex.props(s.space1)}>Refresh the page</li>45              <li {...stylex.props(s.space1)}>Clear your browser cache</li>46            </ul>47          </Alert.Description>48          <Button xstyle={s.mobile2} size="sm" variant="danger">49            Retry50          </Button>51        </Alert.Content>52        <Button xstyle={s.desktopBlock} size="sm" variant="danger">53          Retry54        </Button>55      </Alert>56      <Alert status="success">57        <Alert.Indicator />58        <Alert.Content>59          <Alert.Title>Profile updated successfully</Alert.Title>60        </Alert.Content>61        <CloseButton />62      </Alert>63      <Alert status="accent">64        <Alert.Indicator>65          <Spinner size="sm" />66        </Alert.Indicator>67        <Alert.Content>68          <Alert.Title>Processing your request</Alert.Title>69          <Alert.Description>70            Please wait while we sync your data. This may take a few moments.71          </Alert.Description>72        </Alert.Content>73      </Alert>74      <Alert status="warning">75        <Alert.Indicator />76        <Alert.Content>77          <Alert.Title>Scheduled maintenance</Alert.Title>78          <Alert.Description>79            Our services will be unavailable on Sunday, March 15th from 2:00 AM to 6:00 AM UTC for80            scheduled maintenance.81          </Alert.Description>82        </Alert.Content>83      </Alert>84    </div>85  );86}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox } from "@lenso/ui";4
5export function Basic() {6  return (7    <Checkbox name="basic-terms">8      <Checkbox.Content>9        <Checkbox.Control>10          <Checkbox.Indicator />11        </Checkbox.Control>12        Accept terms and conditions13      </Checkbox.Content>14    </Checkbox>15  );16}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Checkbox, CheckboxGroup, TextField } from "@lenso/ui";4import { labelStyles } from "@lenso/tokens/label";5import { descriptionStyles } from "@lenso/tokens/description";6import { checkboxSupportingStyles } from "@lenso/tokens/checkbox";7import { useId } from "react";8import * as stylex from "@stylexjs/stylex";9
10const interests = [11  { value: "coding", label: "Coding", description: "Love building software" },12  { value: "design", label: "Design", description: "Enjoy creating beautiful interfaces" },13  { value: "writing", label: "Writing", description: "Passionate about content creation" },14];15export function Basic() {16  const id = useId();17  return (18    <TextField name="interests">19      <CheckboxGroup aria-labelledby={`${id}-label`} aria-describedby={`${id}-help`}>20        <span id={`${id}-label`} {...stylex.props(labelStyles.label)}>21          Select your interests22        </span>23        <span id={`${id}-help`} {...stylex.props(descriptionStyles.description)}>24          Choose all that apply25        </span>26        {interests.map((interest) => (27          <Checkbox28            key={interest.value}29            value={interest.value}30            aria-label={interest.label}31            aria-describedby={`${id}-${interest.value}`}32          >33            <Checkbox.Content>34              <Checkbox.Control>35                <Checkbox.Indicator />36              </Checkbox.Control>37              {interest.label}38            </Checkbox.Content>39            <span40              id={`${id}-${interest.value}`}41              {...stylex.props(descriptionStyles.description, checkboxSupportingStyles.direct)}42            >43              {interest.description}44            </span>45          </Checkbox>46        ))}47      </CheckboxGroup>48    </TextField>49  );50}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, Link, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { Slots, styles } from "./parts";6export function Basic() {7  return (8    <TextField name="code" xstyle={styles.field}>9      <div {...stylex.props(styles.heading)}>10        <Label>Verify account</Label>11        <p {...stylex.props(styles.muted)}>We&apos;ve sent a code to a****@gmail.com</p>12      </div>13      <InputOTP length={6} name="code">14        <Slots />15      </InputOTP>16      <div {...stylex.props(styles.resend)}>17        <p {...stylex.props(styles.muted)}>Didn&apos;t receive a code?</p>18        <Link xstyle={styles.link} href="#">19          Resend20        </Link>21      </div>22    </TextField>23  );24}

1"use client";2
3// Adapted from HeroUI v3.2.6 list-box-default (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { descriptionStyles } from "@lenso/tokens/description";6import { labelStyles } from "@lenso/tokens/label";7import { Avatar, ListBox, ListBoxItem } from "@lenso/ui";8
9const users = [10  { key: "1", textValue: "Bob", color: "blue" },11  { key: "2", textValue: "Fred", color: "green" },12  { key: "3", textValue: "Martha", color: "purple" },13] as const;14const styles = stylex.create({15  root: { width: 220 },16  details: { display: "flex", flexDirection: "column" },17});18
19export function Default() {20  return (21    <ListBox aria-label="Users" xstyle={styles.root} selectionMode="single">22      {users.map((user) => (23        <ListBoxItem key={user.key} itemKey={user.key} textValue={user.textValue}>24          <Avatar size="sm">25            <Avatar.Image26              alt={user.textValue}27              src={`https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/${user.color}.jpg`}28            />29            <Avatar.Fallback>{user.textValue[0]}</Avatar.Fallback>30          </Avatar>31          <div {...stylex.props(styles.details)}>32            <span {...stylex.props(labelStyles.label)}>{user.textValue}</span>33            <span {...stylex.props(descriptionStyles.description)}>34              {user.textValue.toLowerCase()}@heroui.com35            </span>36          </div>37          <ListBoxItem.Indicator />38        </ListBoxItem>39      ))}40    </ListBox>41  );42}

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { SelectExample, states } from "./select-example";4export function Default() {5  return <SelectExample label="State" choices={states} />;6}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ slider: { width: "100%", maxWidth: 320 } });7export function Default() {8  return (9    <Slider xstyle={styles.slider} defaultValue={30}>10      <Slider.Label>Volume</Slider.Label>11      <Slider.Output />12      <Slider.Control>13        <Slider.Track>14          <Slider.Fill />15        </Slider.Track>16        <Slider.Thumb aria-label="Volume" />17      </Slider.Control>18    </Slider>19  );20}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Surface } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7const variants = [8  {9    variant: "default",10    label: "Default",11    description: "This is a default surface variant. It uses bg-surface styling.",12  },13  {14    variant: "secondary",15    label: "Secondary",16    description: "This is a secondary surface variant. It uses bg-surface-secondary styling.",17  },18  {19    variant: "tertiary",20    label: "Tertiary",21    description: "This is a tertiary surface variant. It uses bg-surface-tertiary styling.",22  },23  {24    variant: "transparent",25    label: "Transparent",26    description:27      "This is a transparent surface variant. It has no background, suitable for overlays and cards with custom backgrounds.",28  },29] as const;30export function Variants() {31  return (32    <div {...stylex.props(s.column4)}>33      {variants.map(({ variant, label, description }) => (34        <div key={variant} {...stylex.props(s.column2)}>35          <p {...stylex.props(s.textSm, s.medium, s.muted)}>{label}</p>36          <Surface xstyle={[s.surface, variant === "transparent" && s.border]} variant={variant}>37            <h3 {...stylex.props(s.textBase, s.semibold, s.foreground)}>Surface Content</h3>38            <p {...stylex.props(s.textSm, s.muted)}>{description}</p>39          </Surface>40        </div>41      ))}42    </div>43  );44}

1"use client";2
3import { Link } from "@lenso/ui";4
5export function LinkBasic() {6  return (7    <Link href="#">8      Call to action <Link.Icon aria-hidden="true" />9    </Link>10  );11}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3// oxlint-disable jsx-a11y/prefer-tag-over-role -- A named SVG needs img semantics; an HTML img cannot render this icon.4import { CircleDollar } from "@gravity-ui/icons";5import { Avatar, Button, Card, CloseButton, Link } from "@lenso/ui";6import * as stylex from "@stylexjs/stylex";7import { s } from "./display.stylex";8
9const DOCS = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/";10const AVATARS = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/";11
12export function WithImages() {13  return (14    <div {...stylex.props(s.gridOuter)}>15      <div {...stylex.props(s.grid)}>16        <Card xstyle={s.firstCard}>17          <div {...stylex.props(s.imageFrame)}>18            <img19              alt="Cherries"20              {...stylex.props(s.imageZoom)}21              loading="lazy"22              src={`${DOCS}cherries.jpeg`}23            />24          </div>25          <div {...stylex.props(s.flexContent)}>26            <Card.Header xstyle={s.gap1}>27              <Card.Title xstyle={s.titleInset}>Become an ACME Creator!</Card.Title>28              <Card.Description>29                Lorem ipsum dolor sit amet consectetur. Sed arcu donec id aliquam dolor sed amet30                faucibus etiam.31              </Card.Description>32              <CloseButton aria-label="Close banner" xstyle={s.close} />33            </Card.Header>34            <Card.Footer xstyle={s.footer}>35              <div {...stylex.props(s.column)}>36                <span {...stylex.props(s.textSm, s.medium, s.foreground)}>Only 10 spots</span>37                <span {...stylex.props(s.textXs, s.muted)}>Submission ends Oct 10.</span>38              </div>39              <Button xstyle={s.fullAuto}>Apply Now</Button>40            </Card.Footer>41          </div>42        </Card>43        <div {...stylex.props(s.gridRow)}>44          <div {...stylex.props(s.gridHalf)}>45            <Card xstyle={s.span12}>46              <div {...stylex.props(s.close, s.z10)}>47                <CloseButton aria-label="Close notification" />48              </div>49              <Card.Header xstyle={s.gap3}>50                <CircleDollar51                  aria-label="Dollar sign icon"52                  {...stylex.props(s.primary, s.icon8, s.shrink0)}53                  role="img"54                />55                <div {...stylex.props(s.column1)}>56                  <span {...stylex.props(s.textXs, s.medium, s.muted, s.uppercase)}>PAYMENT</span>57                  <Card.Title xstyle={s.responsiveTitle}>You can now withdraw on crypto</Card.Title>58                  <Card.Description xstyle={s.responsiveXs}>59                    Add your wallet in settings to withdraw60                  </Card.Description>61                </div>62              </Card.Header>63              <Card.Footer>64                <Link aria-label="Go to settings" href="#" rel="noopener noreferrer">65                  Go to settings66                  <Link.Icon aria-hidden="true" />67                </Link>68              </Card.Footer>69            </Card>70            <div {...stylex.props(s.gridRow)}>71              <Card xstyle={s.smallCard}>72                <Card.Header>73                  <Avatar xstyle={s.roundedAvatar}>74                    <Avatar.Image alt="Demo 1" src={`${DOCS}demo1.jpg`} />75                    <Avatar.Fallback>JK</Avatar.Fallback>76                  </Avatar>77                </Card.Header>78                <Card.Content xstyle={s.mt1}>79                  <p {...stylex.props(s.textSm, s.leading4, s.medium)}>Indie Hackers</p>80                  <p {...stylex.props(s.textXs, s.muted)}>148 members</p>81                </Card.Content>82                <Card.Footer xstyle={s.row2}>83                  <Avatar xstyle={s.avatarMini}>84                    <Avatar.Image alt="John" src={`${AVATARS}red.jpg`} />85                    <Avatar.Fallback>JK</Avatar.Fallback>86                  </Avatar>87                  <p {...stylex.props(s.textXs, s.muted)}>By John</p>88                </Card.Footer>89              </Card>90              <Card xstyle={s.smallCard}>91                <Card.Header>92                  <Avatar xstyle={s.roundedAvatar}>93                    <Avatar.Image alt="Demo 2" src={`${DOCS}demo2.jpg`} />94                    <Avatar.Fallback>AB</Avatar.Fallback>95                  </Avatar>96                </Card.Header>97                <Card.Content xstyle={s.mt1}>98                  <p {...stylex.props(s.textSm, s.leading4, s.medium)}>AI Builders</p>99                  <p {...stylex.props(s.textXs, s.muted)}>362 members</p>100                </Card.Content>101                <Card.Footer xstyle={s.row2}>102                  <Avatar xstyle={s.avatarMini}>103                    <Avatar.Image alt="John" src={`${AVATARS}blue.jpg`} />104                    <Avatar.Fallback>M</Avatar.Fallback>105                  </Avatar>106                  <p {...stylex.props(s.textXs, s.muted)}>By Martha</p>107                </Card.Footer>108              </Card>109            </div>110          </div>111          <Card xstyle={s.robotCard}>112            <img113              alt="NEO Home Robot"114              aria-hidden="true"115              {...stylex.props(s.imageCover)}116              src={`${DOCS}neo2.jpeg`}117            />118            <Card.Header xstyle={[s.z10, s.white]}>119              <Card.Title xstyle={[s.textXs, s.semibold, s.tracking, s.black70]}>NEO</Card.Title>120              <Card.Description xstyle={[s.textSm, s.medium, s.black50]}>121                Home Robot122              </Card.Description>123            </Card.Header>124            <Card.Footer xstyle={s.robotFooter}>125              <div>126                <div {...stylex.props(s.textSm, s.medium, s.black)}>Available soon</div>127                <div {...stylex.props(s.textXs, s.black60)}>Get notified</div>128              </div>129              <Button xstyle={s.whiteButton} size="sm" variant="tertiary">130                Notify me131              </Button>132            </Card.Footer>133          </Card>134        </div>135        <div {...stylex.props(s.gridRow)}>136          <Card xstyle={s.robotLarge}>137            <img138              alt="NEO Home Robot"139              aria-hidden="true"140              {...stylex.props(s.imageCover)}141              src={`${DOCS}neo1.jpeg`}142            />143            <Card.Footer xstyle={s.robotLargeFooter}>144              <div>145                <div {...stylex.props(s.responsiveBase, s.medium, s.black)}>NEO</div>146                <div {...stylex.props(s.responsiveXs, s.medium, s.black50)}>$499/m</div>147              </div>148              <Button xstyle={s.whiteButton} size="sm" variant="tertiary">149                Get now150              </Button>151            </Card.Footer>152          </Card>153          <div {...stylex.props(s.robotStack)}>154            <Card xstyle={s.eventCard} variant="transparent">155              <img156                alt="Futuristic Robot"157                {...stylex.props(s.eventImage)}158                loading="lazy"159                src={`${DOCS}robot1.jpeg`}160              />161              <div {...stylex.props(s.eventContent)}>162                <Card.Title xstyle={s.textSm}>Bridging the Future</Card.Title>163                <Card.Description xstyle={s.textXs}>Today, 6:30 PM</Card.Description>164              </div>165            </Card>166            <Card xstyle={s.eventCard} variant="transparent">167              <img168                alt="Avocado"169                {...stylex.props(s.eventImage)}170                loading="lazy"171                src={`${DOCS}avocado.jpeg`}172              />173              <div {...stylex.props(s.eventContent)}>174                <Card.Title xstyle={s.textSm}>Avocado Hackathon</Card.Title>175                <Card.Description xstyle={s.textXs}>Wed, 4:30 PM</Card.Description>176              </div>177            </Card>178            <Card xstyle={s.eventCard} variant="transparent">179              <img180                alt="Sound Electro event"181                {...stylex.props(s.eventImage)}182                loading="lazy"183                src={`${DOCS}oranges.jpeg`}184              />185              <div {...stylex.props(s.eventContent)}>186                <Card.Title xstyle={s.textSm}>Sound Electro | Beyond art</Card.Title>187                <Card.Description xstyle={s.textXs}>Fri, 8:00 PM</Card.Description>188              </div>189            </Card>190          </div>191        </div>192      </div>193    </div>194  );195}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Chip } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function ChipBasic() {8  return (9    <div {...stylex.props(s.wrap3)}>10      <Chip>Default</Chip>11      <Chip color="accent">Accent</Chip>12      <Chip color="success">Success</Chip>13      <Chip color="warning">Warning</Chip>14      <Chip color="danger">Danger</Chip>15    </div>16  );17}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Switch } from "@lenso/ui";4
5export function Basic() {6  return (7    <Switch>8      <Switch.Content>9        <Switch.Control>10          <Switch.Thumb />11        </Switch.Control>12        Enable notifications13      </Switch.Content>14    </Switch>15  );16}

1export { Basic } from "./examples";