HeroUI v3 正式发布

1"use client";2
3import {4  ArrowsRotateLeft,5  Box,6  ChevronDown,7  CreditCard,8  PlanetEarth,9  Receipt,10  ShoppingBag,11} from "@gravity-ui/icons";12import { Accordion } from "@lenso/ui";13import * as stylex from "@stylexjs/stylex";14
15const styles = stylex.create({16  root: { width: "100%", maxWidth: 448 },17  icon: { width: 16, height: 16, flexShrink: 0, marginInlineEnd: 12, color: "var(--muted)" },18});19const items = [20  {21    title: "How do I place an order?",22    Icon: ShoppingBag,23    content:24      "Browse our products, add items to your cart, and proceed to checkout. You'll need to provide shipping and payment information to complete your purchase.",25  },26  {27    title: "Can I modify or cancel my order?",28    Icon: Receipt,29    content:30      "Yes, you can modify or cancel your order before it's shipped. Once your order is processed, you can't make changes.",31  },32  {33    title: "What payment methods do you accept?",34    Icon: CreditCard,35    content: "We accept all major credit cards, including Visa, Mastercard, and American Express.",36  },37  {38    title: "How much does shipping cost?",39    Icon: Box,40    content:41      "Shipping costs vary based on your location and the size of your order. We offer free shipping for orders over $50.",42  },43  {44    title: "Do you ship internationally?",45    Icon: PlanetEarth,46    content:47      "Yes, we ship to most countries. Please check our shipping rates and policies for more information.",48  },49  {50    title: "How do I request a refund?",51    Icon: ArrowsRotateLeft,52    content:53      "If you're not satisfied with your purchase, you can request a refund within 30 days of purchase. Please contact our customer support team for assistance.",54  },55];56export function Basic() {57  return (58    <Accordion xstyle={styles.root}>59      {items.map(({ title, content, Icon }) => (60        <Accordion.Item key={title} value={title}>61          <Accordion.Heading>62            <Accordion.Trigger>63              <Icon aria-hidden="true" {...stylex.props(styles.icon)} />64              {title}65              <Accordion.Indicator>66                <ChevronDown />67              </Accordion.Indicator>68            </Accordion.Trigger>69          </Accordion.Heading>70          <Accordion.Panel>71            <Accordion.Body>{content}</Accordion.Body>72          </Accordion.Panel>73        </Accordion.Item>74      ))}75    </Accordion>76  );77}

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
3import { Button } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ row: { display: "flex", flexWrap: "wrap", gap: 12 } });7export function Variants() {8  return (9    <div {...stylex.props(styles.row)}>10      <Button variant="primary">Primary</Button>11      <Button variant="secondary">Secondary</Button>12      <Button variant="tertiary">Tertiary</Button>13      <Button variant="outline">Outline</Button>14      <Button variant="ghost">Ghost</Button>15      <Button variant="danger">Danger</Button>16      <Button variant="danger-soft">Danger Soft</Button>17    </div>18  );19}

1"use client";2
3/** Adapted from the pinned HeroUI v3.2.6 basic.json. Copyright NextUI Inc. Apache-2.0. Local RAC label and StyleX replace source Label and utility classes. */4import { Calendar, DateField, DatePicker } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6
7const styles = stylex.create({ field: { width: 288 } });8export function Basic() {9  return (10    <DatePicker xstyle={styles.field} name="date">11      <DatePicker.Label>Date</DatePicker.Label>12      <DateField.Group fullWidth>13        <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>14        <DateField.Suffix>15          <DatePicker.Trigger>16            <DatePicker.TriggerIndicator />17          </DatePicker.Trigger>18        </DateField.Suffix>19      </DateField.Group>20      <DatePicker.Popover>21        <Calendar aria-label="Event date">22          <Calendar.Header>23            <Calendar.YearPickerTrigger>24              <Calendar.YearPickerTriggerHeading />25              <Calendar.YearPickerTriggerIndicator />26            </Calendar.YearPickerTrigger>27            <Calendar.NavButton slot="previous" />28            <Calendar.NavButton slot="next" />29          </Calendar.Header>30          <Calendar.Grid>31            <Calendar.GridHeader>32              {(day) => <Calendar.HeaderCell>{day}</Calendar.HeaderCell>}33            </Calendar.GridHeader>34            <Calendar.GridBody>{(date) => <Calendar.Cell date={date} />}</Calendar.GridBody>35          </Calendar.Grid>36          <Calendar.YearPickerGrid>37            <Calendar.YearPickerGridBody>38              {({ year }) => <Calendar.YearPickerCell year={year} />}39            </Calendar.YearPickerGridBody>40          </Calendar.YearPickerGrid>41        </Calendar>42      </DatePicker.Popover>43    </DatePicker>44  );45}

1"use client";2
3/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. */4import { RangeCalendar } from "@lenso/ui";5
6export function Basic() {7  return (8    <RangeCalendar aria-label="Trip dates" firstDayOfWeek="mon">9      <RangeCalendar.Header>10        <RangeCalendar.Heading />11        <RangeCalendar.NavButton slot="previous" />12        <RangeCalendar.NavButton slot="next" />13      </RangeCalendar.Header>14      <RangeCalendar.Grid>15        <RangeCalendar.GridHeader>16          {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}17        </RangeCalendar.GridHeader>18        <RangeCalendar.GridBody>19          {(date) => <RangeCalendar.Cell date={date} />}20        </RangeCalendar.GridBody>21      </RangeCalendar.Grid>22    </RangeCalendar>23  );24}

1"use client";2
3import { ColorArea, ColorPicker, ColorSlider, ColorSwatch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({7  area: { maxWidth: "100%" },8  slider: { gap: 4, paddingInline: 4 },9  output: { color: "var(--muted)" },10});11export function Basic() {12  return (13    <ColorPicker defaultValue="#0485F7">14      <ColorPicker.Trigger>15        <ColorSwatch size="lg" />16        <span>Pick a color</span>17      </ColorPicker.Trigger>18      <ColorPicker.Popover>19        <ColorArea20          aria-label="Color area"21          xstyle={styles.area}22          colorSpace="hsb"23          xChannel="saturation"24          yChannel="brightness"25        >26          <ColorArea.Thumb />27        </ColorArea>28        <ColorSlider aria-label="Hue" channel="hue" xstyle={styles.slider} colorSpace="hsb">29          <span>Hue</span>30          <ColorSlider.Output xstyle={styles.output} />31          <ColorSlider.Track>32            <ColorSlider.Thumb />33          </ColorSlider.Track>34        </ColorSlider>35      </ColorPicker.Popover>36    </ColorPicker>37  );38}

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";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 (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 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 toast-default (Apache-2.0).4import { Persons } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Toast } from "@lenso/ui";7import { Notifications, styles, type ToastData } from "./_shared";8
9function InvitationQueue() {10  const manager = Toast.useToastManager<ToastData>();11  return (12    <>13      <div {...stylex.props(styles.frame)}>14        <Button15          size="sm"16          variant="secondary"17          onClick={() => {18            const id = manager.add({19              title: "You have been invited to join a team",20              description: "Bob sent you an invitation to join HeroUI team",21              type: "default",22              data: { indicator: <Persons />, actionStyle: "tertiary" },23              actionProps: { children: "Dismiss", onClick: () => manager.close(id) },24            });25          }}26        >27          Show toast28        </Button>29      </div>30      <Notifications />31    </>32  );33}34
35export function Default() {36  return (37    <Toast.Provider>38      <InvitationQueue />39    </Toast.Provider>40  );41}

1"use client";2
3import { Tabs } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ root: { width: "100%", maxWidth: 448 }, panel: { paddingTop: 16 } });7export function Basic() {8  return (9    <Tabs defaultValue="overview" xstyle={styles.root}>10      <Tabs.ListContainer>11        <Tabs.List activateOnFocus aria-label="Options">12          <Tabs.Tab value="overview">Overview</Tabs.Tab>13          <Tabs.Tab value="analytics">Analytics</Tabs.Tab>14          <Tabs.Tab value="reports">Reports</Tabs.Tab>15          <Tabs.Indicator />16        </Tabs.List>17      </Tabs.ListContainer>18      <Tabs.Panel xstyle={styles.panel} value="overview">19        <p>View your project overview and recent activity.</p>20      </Tabs.Panel>21      <Tabs.Panel xstyle={styles.panel} value="analytics">22        <p>Track your metrics and analyze performance data.</p>23      </Tabs.Panel>24      <Tabs.Panel xstyle={styles.panel} value="reports">25        <p>Generate and download detailed reports.</p>26      </Tabs.Panel>27    </Tabs>28  );29}

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// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  panel: {7    width: 250,8    display: "flex",9    flexDirection: "column",10    gap: 20,11    borderRadius: "var(--radius-lg)",12    backgroundColor: "transparent",13    padding: 16,14    boxShadow: "var(--shadow-panel)",15  },16  text: { display: "flex", flexDirection: "column", gap: 12 },17  picture: { height: 128, borderRadius: "var(--radius-lg)" },18  short: { height: 12, width: "60%", borderRadius: "var(--radius-lg)" },19  long: { height: 12, width: "80%", borderRadius: "var(--radius-lg)" },20  shortest: { height: 12, width: "40%", borderRadius: "var(--radius-lg)" },21});22export function Basic() {23  return (24    <div {...stylex.props(styles.panel)}>25      <Skeleton xstyle={styles.picture} />26      <div {...stylex.props(styles.text)}>27        <Skeleton xstyle={styles.short} />28        <Skeleton xstyle={styles.long} />29        <Skeleton xstyle={styles.shortest} />30      </div>31    </div>32  );33}34export default Basic;

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