v3.0.0-beta.8

1"use client";2// oxlint-disable jsx-a11y/prefer-tag-over-role -- The CSS-painted status dot has no image resource for an HTML img.3// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.4import { Avatar, Badge } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { s } from "../card/display.stylex";7
8export function BadgeBasic() {9  return (10    <div {...stylex.props(s.row6)}>11      <Badge.Anchor>12        <Avatar>13          <Avatar.Image14            alt="John Doe"15            src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"16          />17          <Avatar.Fallback>JD</Avatar.Fallback>18        </Avatar>19        <Badge color="danger" size="sm">20          521        </Badge>22      </Badge.Anchor>23      <Badge.Anchor>24        <Avatar>25          <Avatar.Image26            alt="Alex Brown"27            src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg"28          />29          <Avatar.Fallback>AB</Avatar.Fallback>30        </Avatar>31        <Badge color="accent" size="sm">32          New33        </Badge>34      </Badge.Anchor>35      <Badge.Anchor>36        <Avatar>37          <Avatar.Image38            alt="Chris Davis"39            src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg"40          />41          <Avatar.Fallback>CD</Avatar.Fallback>42        </Avatar>43        <Badge role="img" aria-label="Online" color="success" placement="bottom-right" size="sm" />44      </Badge.Anchor>45    </div>46  );47}

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

1"use client";2
3// Adapted from HeroUI v3.2.6 table-basic (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Table } from "@lenso/ui";6
7const rows = [8  { key: "kate", name: "Kate Moore", role: "CEO", status: "Active", email: "[email protected]" },9  { key: "john", name: "John Smith", role: "CTO", status: "Active", email: "[email protected]" },10  { key: "sara", name: "Sara Johnson", role: "CMO", status: "On Leave", email: "[email protected]" },11  {12    key: "michael",13    name: "Michael Brown",14    role: "CFO",15    status: "Active",16    email: "[email protected]",17  },18] as const;19const styles = stylex.create({ content: { minWidth: 600 } });20
21export function Basic() {22  return (23    <Table>24      <Table.ScrollContainer>25        <Table.Content aria-label="Team members" xstyle={styles.content}>26          <Table.Header>27            <Table.Column columnKey="name">Name</Table.Column>28            <Table.Column columnKey="role">Role</Table.Column>29            <Table.Column columnKey="status">Status</Table.Column>30            <Table.Column columnKey="email">Email</Table.Column>31          </Table.Header>32          <Table.Body>33            <Table.Collection items={rows}>34              {(row) => (35                <Table.Row itemKey={row.key}>36                  <Table.Cell>{row.name}</Table.Cell>37                  <Table.Cell>{row.role}</Table.Cell>38                  <Table.Cell>{row.status}</Table.Cell>39                  <Table.Cell>{row.email}</Table.Cell>40                </Table.Row>41              )}42            </Table.Collection>43          </Table.Body>44        </Table.Content>45      </Table.ScrollContainer>46    </Table>47  );48}

1"use client";2// HeroUI v3.2.6 custom-cells adaptation (Apache-2.0).3import { useState, type Key } from "react";4import * as stylex from "@stylexjs/stylex";5import { Icon } from "@iconify/react";6import { Avatar, Button, Table, type SortDescriptor } from "@lenso/ui";7import { Status, styles, users, type User } from "./data";8const workers = users.slice(0, 5).map((user, index) => ({9  ...user,10  key: [4586932, 5273849, 7492836, 8293746, 1234567][index]!,11  role: [12    "Chief Executive Officer",13    "Chief Technology Officer",14    "Chief Marketing Officer",15    "Chief Financial Officer",16    "Product Manager",17  ][index]!,18  color: ["red", "green", "blue", "purple", "orange"][index],19}));20export function CustomCells() {21  const [selected, setSelected] = useState<Set<Key>>(new Set());22  const [sort, setSort] = useState<SortDescriptor>({ column: "name", direction: "ascending" });23  const sorted = [...workers].sort(24    (a, b) =>25      String(a[sort.column as keyof User]).localeCompare(String(b[sort.column as keyof User])) *26      (sort.direction === "ascending" ? 1 : -1),27  );28  return (29    <Table>30      <Table.ScrollContainer>31        <Table.Content32          aria-label="Table with custom cells"33          xstyle={styles.customCells}34          selectionMode="multiple"35          selectedKeys={selected}36          onSelectionChange={setSelected}37          sortDescriptor={sort}38          onSortChange={setSort}39        >40          <Table.Header>41            <Table.Column columnKey="selection" width={48}>42              <Table.SelectionCheckbox />43            </Table.Column>44            {[45              ["key", "Worker ID"],46              ["name", "Member"],47              ["role", "Role"],48              ["status", "Status"],49            ].map(([key, title]) => (50              <Table.Column key={key} columnKey={key!} allowsSorting>51                {({ sortDirection }) => (52                  <Table.SortableColumnHeader sortDirection={sortDirection}>53                    {title}54                  </Table.SortableColumnHeader>55                )}56              </Table.Column>57            ))}58            <Table.Column columnKey="actions">Actions</Table.Column>59          </Table.Header>60          <Table.Body>61            {sorted.map((user) => (62              <Table.Row key={user.key} itemKey={user.key}>63                <Table.Cell>64                  <Table.SelectionCheckbox aria-label={`Select ${user.name}`} />65                </Table.Cell>66                <Table.Cell>67                  <div {...stylex.props(styles.row)}>68                    #{user.key}69                    <Button70                      isIconOnly71                      aria-label={`Copy ID #${user.key}`}72                      size="sm"73                      variant="ghost"74                    >75                      <Icon icon="gravity-ui:copy" width={16} aria-hidden="true" />76                    </Button>77                  </div>78                </Table.Cell>79                <Table.Cell>80                  <div {...stylex.props(styles.row)}>81                    <Avatar size="sm">82                      <Avatar.Image83                        alt={user.name}84                        src={`https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/${user.color}.jpg`}85                      />86                      <Avatar.Fallback>87                        {user.name88                          .split(" ")89                          .map((name) => name[0])90                          .join("")}91                      </Avatar.Fallback>92                    </Avatar>93                    <div {...stylex.props(styles.detail)}>94                      <span>{user.name}</span>95                      <span {...stylex.props(styles.muted)}>{user.email}</span>96                    </div>97                  </div>98                </Table.Cell>99                <Table.Cell>{user.role}</Table.Cell>100                <Table.Cell>101                  <Status status={user.status} />102                </Table.Cell>103                <Table.Cell>104                  <div {...stylex.props(styles.row)}>105                    {(["View", "Edit", "Delete"] as const).map((action, index) => (106                      <Button107                        key={action}108                        isIconOnly109                        aria-label={`${action} ${user.name}`}110                        size="sm"111                        variant={action === "Delete" ? "danger-soft" : "tertiary"}112                      >113                        <Icon114                          icon={`gravity-ui:${["eye", "pencil", "trash-bin"][index]}`}115                          width={16}116                          aria-hidden="true"117                        />118                      </Button>119                    ))}120                  </div>121                </Table.Cell>122              </Table.Row>123            ))}124          </Table.Body>125        </Table.Content>126      </Table.ScrollContainer>127    </Table>128  );129}

1"use client";2// HeroUI v3.2.6 pagination adaptation (Apache-2.0).3import { useState } from "react";4import { Table } from "@lenso/ui";5import { Headers, Pages, Rows, styles, users } from "./data";6export function PaginationDemo() {7  const [page, setPage] = useState(1);8  return (9    <Table>10      <Table.ScrollContainer>11        <Table.Content aria-label="Table with pagination" xstyle={styles.content}>12          <Headers />13          <Table.Body>14            <Rows items={users.slice((page - 1) * 4, page * 4)} />15          </Table.Body>16        </Table.Content>17      </Table.ScrollContainer>18      <Table.Footer>19        <Pages page={page} count={2} total={8} setPage={setPage} />20      </Table.Footer>21    </Table>22  );23}

1"use client";2// HeroUI v3.2.6 empty-state adaptation (Apache-2.0).3import * as stylex from "@stylexjs/stylex";4import { Icon } from "@iconify/react";5import { EmptyState, Table } from "@lenso/ui";6import { Headers, styles } from "./data";7const empty = stylex.create({8  root: { minHeight: 200 },9  content: {10    minHeight: 140,11    display: "flex",12    flexDirection: "column",13    alignItems: "center",14    justifyContent: "center",15    gap: 16,16    textAlign: "center",17    color: "var(--muted)",18  },19});20export function EmptyStateDemo() {21  return (22    <Table xstyle={empty.root}>23      <Table.ScrollContainer>24        <Table.Content aria-label="Empty table" xstyle={styles.content}>25          <Headers />26          <Table.Body>27            <tr>28              <td colSpan={4}>29                <EmptyState xstyle={empty.content}>30                  <Icon icon="gravity-ui:tray" width={24} aria-hidden="true" />31                  <span>No results found</span>32                </EmptyState>33              </td>34            </tr>35          </Table.Body>36        </Table.Content>37      </Table.ScrollContainer>38    </Table>39  );40}

1"use client";2/** Adapted from HeroUI v3.2.6 release-input-container.json. Copyright NextUI Inc. Apache-2.0. */3import { DateRangePicker, TimeField } from "@lenso/ui";4import { getLocalTimeZone, parseZonedDateTime } from "@internationalized/date";5import * as stylex from "@stylexjs/stylex";6import { formatStyles } from "../date-picker/format-controls";7import { PickerCalendar, RangeInput } from "./parts";8
9export function InputContainer() {10  const localTimeZone = getLocalTimeZone();11  const defaultValue = {12    start: parseZonedDateTime(`2026-02-03T08:45:00[${localTimeZone}]`),13    end: parseZonedDateTime(`2026-02-10T18:45:00[${localTimeZone}]`),14  };15  return (16    <DateRangePicker17      shouldForceLeadingZeros18      xstyle={formatStyles.releaseField}19      defaultValue={defaultValue}20      granularity="second"21      hourCycle={12}22    >23      {({ state }) => (24        <>25          <DateRangePicker.Label>Date range</DateRangePicker.Label>26          <RangeInput container />27          <DateRangePicker.Popover xstyle={formatStyles.releasePopover}>28            <PickerCalendar />29            <div {...stylex.props(formatStyles.times)}>30              <div {...stylex.props(formatStyles.timeRow)}>31                <span {...stylex.props(formatStyles.label)}>Start Time</span>32                <TimeField33                  shouldForceLeadingZeros34                  aria-label="Start Time"35                  granularity="second"36                  hourCycle={12}37                  value={state.timeRange?.start ?? null}38                  onChange={(value) => state.setTime("start", value)}39                >40                  <TimeField.Group variant="secondary">41                    <TimeField.Input>42                      {(segment) => <TimeField.Segment segment={segment} />}43                    </TimeField.Input>44                  </TimeField.Group>45                </TimeField>46              </div>47              <div {...stylex.props(formatStyles.timeRow)}>48                <span {...stylex.props(formatStyles.label)}>End Time</span>49                <TimeField50                  shouldForceLeadingZeros51                  aria-label="End Time"52                  granularity="second"53                  hourCycle={12}54                  value={state.timeRange?.end ?? null}55                  onChange={(value) => state.setTime("end", value)}56                >57                  <TimeField.Group variant="secondary">58                    <TimeField.Input>59                      {(segment) => <TimeField.Segment segment={segment} />}60                    </TimeField.Input>61                  </TimeField.Group>62                </TimeField>63              </div>64            </div>65          </DateRangePicker.Popover>66        </>67      )}68    </DateRangePicker>69  );70}