v3.0.0-beta.3

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
3// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.4import { DateField } from "@lenso/ui";5import { styles } from "./demo-styles";6
7export function Basic() {8  return (9    <DateField xstyle={styles.field} name="date">10      <DateField.Label>Date</DateField.Label>11      <DateField.Group>12        <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>13      </DateField.Group>14    </DateField>15  );16}

1"use client";2// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.3import { Description, ErrorMessage, Label, Tag, TagGroup } from "@lenso/ui";4import type { TagGroupRootProps } from "@lenso/ui";5import { useId, useState } from "react";6
7const categories = ["News", "Travel", "Gaming", "Shopping"];8export function ErrorMessageBasic() {9  const [selected, setSelected] = useState<TagGroupRootProps["selectedKeys"]>(new Set());10  const labelId = useId();11  const descriptionId = useId();12  const errorId = useId();13  const invalid = !selected || selected.size === 0;14  return (15    <TagGroup16      selectedKeys={selected}17      selectionMode="multiple"18      onSelectionChange={setSelected}19      aria-labelledby={labelId}20      aria-describedby={`${descriptionId}${invalid ? ` ${errorId}` : ""}`}21      aria-invalid={invalid}22    >23      <Label id={labelId} nativeLabel={false}>24        Required Categories25      </Label>26      <TagGroup.List>27        {categories.map((category) => (28          <Tag key={category} itemKey={category.toLowerCase()} textValue={category}>29            {category}30          </Tag>31        ))}32      </TagGroup.List>33      <Description id={descriptionId}>Select at least one category</Description>34      <ErrorMessage id={errorId}>35        {invalid && <>Please select at least one category</>}36      </ErrorMessage>37    </TagGroup>38  );39}

1"use client";2
3// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.4import { Label, SearchField } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({ input: { width: 280 } });7
8export function Basic() {9  return (10    <SearchField name="search">11      <Label>Search</Label>12      <SearchField.Group>13        <SearchField.SearchIcon />14        <SearchField.Input xstyle={styles.input} placeholder="Search..." />15        <SearchField.ClearButton />16      </SearchField.Group>17    </SearchField>18  );19}

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Card, ScrollShadow } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const images = [6  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/robot1.jpeg",7  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/avocado.jpeg",8  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/oranges.jpeg",9];10const styles = stylex.create({11  root: { width: "100%", maxWidth: { default: null, "@media (min-width: 640px)": 384 } },12  vertical: { marginBottom: 32, width: "100%" },13  heading: { marginBottom: 8, fontSize: 14, lineHeight: "20px", fontWeight: 600 },14  card: { width: "100%", padding: 0 },15  verticalScroll: { maxHeight: 240, padding: 16 },16  horizontalScroll: { padding: 16 },17  paragraphs: { display: "flex", flexDirection: "column", gap: 16 },18  cards: { display: "flex", flexDirection: "row", gap: 16 },19  item: { display: "flex", minWidth: 200, flexDirection: "row", gap: 12, padding: 4 },20  image: {21    aspectRatio: "1",22    width: { default: 64, "@media (min-width: 640px)": 80 },23    height: { default: 64, "@media (min-width: 640px)": 80 },24    flexShrink: 0,25    borderRadius: "var(--radius-xl)",26    objectFit: "cover",27    userSelect: "none",28  },29  text: { display: "flex", flex: 1, flexDirection: "column", justifyContent: "center", gap: 4 },30  title: { fontSize: 14 },31  description: { fontSize: 12 },32});33export default function Orientation() {34  return (35    <div {...stylex.props(styles.root)}>36      <div {...stylex.props(styles.vertical)}>37        <h4 {...stylex.props(styles.heading)}>Vertical</h4>38        <Card xstyle={styles.card}>39          <ScrollShadow40            tabIndex={0}41            aria-label="Vertical sample"42            xstyle={styles.verticalScroll}43            orientation="vertical"44          >45            <div {...stylex.props(styles.paragraphs)}>46              {Array.from({ length: 10 }, (_, index) => (47                <p key={index}>48                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non49                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor50                  quam. Morbi accumsan cursus enim, sed ultricies sapien.51                </p>52              ))}53            </div>54          </ScrollShadow>55        </Card>56      </div>57      <div>58        <h4 {...stylex.props(styles.heading)}>Horizontal</h4>59        <Card xstyle={styles.card}>60          <ScrollShadow61            tabIndex={0}62            aria-label="Horizontal cards"63            xstyle={styles.horizontalScroll}64            orientation="horizontal"65          >66            <div {...stylex.props(styles.cards)}>67              {Array.from({ length: 10 }, (_, index) => (68                <Card key={index} xstyle={styles.item} variant="transparent">69                  <img70                    alt="Lorem Card"71                    {...stylex.props(styles.image)}72                    loading="lazy"73                    src={images[index % images.length]}74                  />75                  <div {...stylex.props(styles.text)}>76                    <Card.Title xstyle={styles.title}>Bridging the Future</Card.Title>77                    <Card.Description xstyle={styles.description}>Today, 6:30 PM</Card.Description>78                  </div>79                </Card>80              ))}81            </div>82          </ScrollShadow>83        </Card>84      </div>85    </div>86  );87}

1"use client";2
3// Adapted from HeroUI v3.2.6 tag-group-basic (Apache-2.0).4import { PlanetEarth, Rocket, ShoppingBag, SquareArticle } from "@gravity-ui/icons";5import { Tag, TagGroup } from "@lenso/ui";6
7export function TagGroupBasic() {8  return (9    <TagGroup aria-label="Tags" selectionMode="single">10      <TagGroup.List>11        <Tag itemKey="default-news" textValue="News">12          <SquareArticle width={12} height={12} />13          News14        </Tag>15        <Tag itemKey="default-travel" textValue="Travel">16          <PlanetEarth width={12} height={12} />17          Travel18        </Tag>19        <Tag itemKey="default-gaming" textValue="Gaming">20          <Rocket width={12} height={12} />21          Gaming22        </Tag>23        <Tag itemKey="default-shopping" textValue="Shopping">24          <ShoppingBag width={12} height={12} />25          Shopping26        </Tag>27      </TagGroup.List>28    </TagGroup>29  );30}

1"use client";2
3// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.4import { TimeField } from "@lenso/ui";5import { styles } from "../date-field/demo-styles";6
7export function Basic() {8  return (9    <TimeField xstyle={styles.field} name="time">10      <TimeField.Label>Time</TimeField.Label>11      <TimeField.Group>12        <TimeField.Input>{(segment) => <TimeField.Segment segment={segment} />}</TimeField.Input>13      </TimeField.Group>14    </TimeField>15  );16}