v3.0.0-beta.4

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { NativeAutocomplete } from "./_native";4
5export const states = [6  { id: "florida", name: "Florida" },7  { id: "delaware", name: "Delaware" },8  { id: "california", name: "California" },9  { id: "texas", name: "Texas" },10  { id: "new-york", name: "New York" },11  { id: "washington", name: "Washington" },12];13export default function Default() {14  return (15    <NativeAutocomplete16      items={states}17      label="States to Visit"18      placeholder="Select states"19      multiple20      chips21      hideClear22    />23  );24}

1"use client";2
3import { Breadcrumbs } from "@lenso/ui";4
5export function BreadcrumbsBasic() {6  return (7    <Breadcrumbs>8      <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>9      <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>10      <Breadcrumbs.Item href="#">Electronics</Breadcrumbs.Item>11      <Breadcrumbs.Item>Laptop</Breadcrumbs.Item>12    </Breadcrumbs>13  );14}15export default BreadcrumbsBasic;

1"use client";2
3// Adapted from HeroUI v3.2.6 variants, Apache-2.0.4import { HardDrive, 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 Messages() {10  const manager = Toast.useToastManager<ToastData>();11  return (12    <>13      <div {...stylex.props(styles.frame)}>14        <div {...stylex.props(styles.buttons)}>15          <Button16            size="sm"17            variant="tertiary"18            onClick={() => {19              const id = manager.add({20                title: "You have been invited to join a team",21                description: "Bob sent you an invitation to join HeroUI team",22                type: "default",23                data: { indicator: <Persons />, actionStyle: "tertiary" },24                actionProps: { children: "Dismiss", onClick: () => manager.close(id) },25              });26            }}27          >28            Default toast29          </Button>30          <Button31            size="sm"32            variant="secondary"33            onClick={() => {34              const id = manager.add({35                title: "You have 2 credits left",36                description: "Get a paid plan for more credits",37                type: "accent",38                actionProps: { children: "Upgrade", onClick: () => manager.close(id) },39              });40            }}41          >42            Accent toast43          </Button>44          <Button45            xstyle={styles.successText}46            size="sm"47            variant="tertiary"48            onClick={() => {49              const id = manager.add({50                title: "You have upgraded your plan",51                description: "You can continue using HeroUI Chat",52                type: "success",53                data: { actionStyle: "success" },54                actionProps: { children: "Billing", onClick: () => manager.close(id) },55              });56            }}57          >58            Success toast59          </Button>60          <Button61            xstyle={styles.warningText}62            size="sm"63            variant="tertiary"64            onClick={() => {65              const id = manager.add({66                title: "You have no credits left",67                description: "Upgrade to a paid plan to continue",68                type: "warning",69                data: { actionStyle: "warning" },70                actionProps: { children: "Upgrade", onClick: () => manager.close(id) },71              });72            }}73          >74            Warning toast75          </Button>76          <Button77            size="sm"78            variant="danger-soft"79            onClick={() => {80              const id = manager.add({81                title: "Storage is full",82                description:83                  "Remove files to release space. Adding more text to demonstrate longer content display",84                type: "danger",85                data: { indicator: <HardDrive />, actionStyle: "danger" },86                actionProps: { children: "Remove", onClick: () => manager.close(id) },87              });88            }}89          >90            Danger toast91          </Button>92        </div>93      </div>94      <Notifications />95    </>96  );97}98
99export function Variants() {100  return (101    <Toast.Provider>102      <Messages />103    </Toast.Provider>104  );105}

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

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Input } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  root: { display: "flex", width: 240, flexDirection: "column", gap: 8 },7});8export function Variants() {9  return (10    <div {...stylex.props(styles.root)}>11      <Input fullWidth placeholder="Primary input" variant="primary" />12      <Input fullWidth placeholder="Secondary input" variant="secondary" />13    </div>14  );15}

1"use client";2// Adapted from HeroUI v3.2.6, Apache-2.0.3import { ArrowUp, At, Microphone, PlugConnection, Plus } from "@gravity-ui/icons";4import { Button, InputGroup, Kbd, Spinner, TextField, Tooltip } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { useState } from "react";7const styles = stylex.create({8  field: {9    display: "flex",10    flexDirection: "column",11    width: { default: 384, "@media (min-width: 640px)": 512 },12  },13  group: { display: "flex", flexDirection: "column", gap: 8, borderRadius: 24, paddingBlock: 8 },14  prefix: { paddingInline: 12, paddingBlock: 0 },15  input: { width: "100%", resize: "none", paddingInline: 14, paddingBlock: 0 },16  suffix: {17    display: "flex",18    width: "100%",19    alignItems: "center",20    gap: 6,21    paddingInline: 12,22    paddingBlock: 0,23  },24  actions: { marginInlineStart: "auto", display: "flex", alignItems: "center", gap: 6 },25  tooltip: { display: "flex", alignItems: "center", gap: 4 },26  hint: { fontSize: 12, lineHeight: "16px" },27  key: { height: 16, borderRadius: "var(--radius-sm)", paddingInline: 4 },28});29export function WithTextArea() {30  const [value, setValue] = useState("");31  const [isSubmitting, setIsSubmitting] = useState(false);32  const handleSubmit = () => {33    if (!value.trim()) return;34    setIsSubmitting(true);35    setTimeout(() => {36      setIsSubmitting(false);37      setValue("");38    }, 1000);39  };40  return (41    <TextField fullWidth xstyle={styles.field} name="prompt">42      <InputGroup fullWidth xstyle={styles.group}>43        <InputGroup.Prefix xstyle={styles.prefix}>44          <Button aria-label="Add context" size="sm" variant="outline">45            <At aria-hidden="true" />46            Add Context47          </Button>48        </InputGroup.Prefix>49        <InputGroup.TextArea50          aria-label="Prompt input"51          xstyle={styles.input}52          placeholder="Assign tasks or ask anything..."53          rows={5}54          value={value}55          onChange={(event) => setValue(event.target.value)}56        />57        <InputGroup.Suffix xstyle={styles.suffix}>58          <Tooltip>59            <Tooltip.Trigger60              delay={0}61              render={<Button isIconOnly aria-label="Attach file" size="sm" variant="tertiary" />}62            >63              <Plus aria-hidden="true" />64            </Tooltip.Trigger>65            <Tooltip.Portal>66              <Tooltip.Positioner>67                <Tooltip.Popup>68                  <p {...stylex.props(styles.hint)}>Add a files and more</p>69                </Tooltip.Popup>70              </Tooltip.Positioner>71            </Tooltip.Portal>72          </Tooltip>73          <Tooltip>74            <Tooltip.Trigger75              delay={0}76              render={<Button isIconOnly aria-label="Connect Apps" size="sm" variant="tertiary" />}77            >78              <PlugConnection aria-hidden="true" />79            </Tooltip.Trigger>80            <Tooltip.Portal>81              <Tooltip.Positioner>82                <Tooltip.Popup>83                  <p {...stylex.props(styles.hint)}>Connect apps</p>84                </Tooltip.Popup>85              </Tooltip.Positioner>86            </Tooltip.Portal>87          </Tooltip>88          <div {...stylex.props(styles.actions)}>89            <Tooltip>90              <Tooltip.Trigger91                delay={0}92                render={<Button isIconOnly aria-label="Voice input" size="sm" variant="ghost" />}93              >94                <Microphone aria-hidden="true" />95              </Tooltip.Trigger>96              <Tooltip.Portal>97                <Tooltip.Positioner>98                  <Tooltip.Popup>99                    <p {...stylex.props(styles.hint)}>Voice input</p>100                  </Tooltip.Popup>101                </Tooltip.Positioner>102              </Tooltip.Portal>103            </Tooltip>104            <Tooltip>105              <Tooltip.Trigger106                delay={0}107                render={108                  <Button109                    isIconOnly110                    aria-label="Send prompt"111                    disabled={!value.trim()}112                    isLoading={isSubmitting}113                    onClick={handleSubmit}114                  />115                }116              >117                {isSubmitting ? (118                  <Spinner color="current" size="sm" />119                ) : (120                  <ArrowUp aria-hidden="true" />121                )}122              </Tooltip.Trigger>123              <Tooltip.Portal>124                <Tooltip.Positioner>125                  <Tooltip.Popup xstyle={styles.tooltip}>126                    <p {...stylex.props(styles.hint)}>Send</p>127                    <Kbd xstyle={styles.key}>128                      <Kbd.Abbr keyValue="enter" />129                    </Kbd>130                  </Tooltip.Popup>131                </Tooltip.Positioner>132              </Tooltip.Portal>133            </Tooltip>134          </div>135        </InputGroup.Suffix>136      </InputGroup>137    </TextField>138  );139}

1"use client";2// Adapted from HeroUI v3.2.6, Apache-2.0.3import { Envelope } from "@gravity-ui/icons";4import { InputGroup, Label, TextField } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  stack: { display: "flex", flexDirection: "column", gap: 16 },8  field: { width: 280 },9  icon: { width: 16, height: 16, color: "var(--muted)" },10});11export function Variants() {12  return (13    <div {...stylex.props(styles.stack)}>14      <TextField xstyle={styles.field} name="primary">15        <Label>Primary variant</Label>16        <InputGroup variant="primary">17          <InputGroup.Prefix>18            <Envelope aria-hidden="true" {...stylex.props(styles.icon)} />19          </InputGroup.Prefix>20          <InputGroup.Input placeholder="[email protected]" />21        </InputGroup>22      </TextField>23      <TextField xstyle={styles.field} name="secondary">24        <Label>Secondary variant</Label>25        <InputGroup variant="secondary">26          <InputGroup.Prefix>27            <Envelope aria-hidden="true" {...stylex.props(styles.icon)} />28          </InputGroup.Prefix>29          <InputGroup.Input placeholder="[email protected]" />30        </InputGroup>31      </TextField>32    </div>33  );34}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.3import { Button, ButtonGroup } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "./source.stylex";6export function OutlineVariant() {7  return (8    <div {...stylex.props(styles.column)}>9      <div {...stylex.props(styles.section)}>10        <p {...stylex.props(styles.muted)}>Button</p>11        <div {...stylex.props(styles.row)}>12          <Button variant="outline">Outline</Button>13        </div>14      </div>15      <div {...stylex.props(styles.section)}>16        <p {...stylex.props(styles.muted)}>ButtonGroup</p>17        <ButtonGroup variant="outline">18          <Button>First</Button>19          <Button>Second</Button>20          <Button>Third</Button>21        </ButtonGroup>22      </div>23    </div>24  );25}

1"use client";2// Adapted from HeroUI v3.2.6 alert-dialog-sizes (Apache-2.0).3import { Rocket } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { AlertDialog, Button } from "@lenso/ui";6
7const styles = stylex.create({8  row: { display: "flex", flexWrap: "wrap", gap: 16 },9  icon: { backgroundColor: "var(--default)", color: "var(--foreground)" },10  rocket: { width: 20, height: 20 },11});12
13export function Sizes() {14  const sizes = ["xs", "sm", "md", "lg", "cover"] as const;15  return (16    <div {...stylex.props(styles.row)}>17      {sizes.map((size) => (18        <AlertDialog key={size}>19          <AlertDialog.Trigger render={<Button variant="secondary" />}>20            {size.charAt(0).toUpperCase() + size.slice(1)}21          </AlertDialog.Trigger>22          <AlertDialog.Portal>23            <AlertDialog.Backdrop />24            <AlertDialog.Viewport>25              <AlertDialog.Popup size={size}>26                <AlertDialog.Close aria-label="Close dialog" />27                <AlertDialog.Header>28                  <AlertDialog.Icon variant="default" xstyle={styles.icon}>29                    <Rocket {...stylex.props(styles.rocket)} />30                  </AlertDialog.Icon>31                  <AlertDialog.Title>32                    Size: {size.charAt(0).toUpperCase() + size.slice(1)}33                  </AlertDialog.Title>34                </AlertDialog.Header>35                <AlertDialog.Body>36                  <AlertDialog.Description>37                    {size === "cover" ? (38                      <>39                        This alert dialog uses the <code>cover</code> size variant. It spans the40                        full screen with margins: 16px on mobile and 40px on desktop. Maintains41                        rounded corners and standard padding. Perfect for critical confirmations42                        that need maximum width while preserving alert dialog aesthetics.43                      </>44                    ) : (45                      <>46                        This alert dialog uses the <code>{size}</code> size variant. On mobile47                        devices, all sizes adapt to near full-width for optimal viewing. On desktop,48                        each size provides a different maximum width to suit various content needs.49                      </>50                    )}51                  </AlertDialog.Description>52                </AlertDialog.Body>53                <AlertDialog.Footer>54                  <AlertDialog.Close render={<Button variant="tertiary" />}>55                    Cancel56                  </AlertDialog.Close>57                  <AlertDialog.Close render={<Button />}>Confirm</AlertDialog.Close>58                </AlertDialog.Footer>59              </AlertDialog.Popup>60            </AlertDialog.Viewport>61          </AlertDialog.Portal>62        </AlertDialog>63      ))}64    </div>65  );66}

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 (e385ac2), Apache-2.0.3import { Link } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "./source.stylex";6export function LinkUnderlineAndOffset() {7  return (8    <div {...stylex.props(styles.sections)}>9      <div {...stylex.props(styles.section)}>10        <p {...stylex.props(styles.caption)}>Default hover underline</p>11        <Link href="#">12          Hover to see the underline13          <Link.Icon />14        </Link>15      </div>16      <div {...stylex.props(styles.section)}>17        <p {...stylex.props(styles.caption)}>Always visible underline</p>18        <Link href="#" xstyle={styles.underline}>19          Underline always visible20          <Link.Icon />21        </Link>22      </div>23      <div {...stylex.props(styles.section)}>24        <p {...stylex.props(styles.caption)}>No underline</p>25        <Link href="#" xstyle={styles.noUnderline}>26          Link without any underline27          <Link.Icon />28        </Link>29      </div>30      <div {...stylex.props(styles.section)}>31        <p {...stylex.props(styles.caption)}>Changing the underline offset</p>32        <div {...stylex.props(styles.column)}>33          {[styles.offset1, styles.offset2, styles.offset3, styles.offset4].map((offset, index) => (34            <Link key={index} href="#" xstyle={offset}>35              Offset {index + 1} ({index + 1}px space)36              <Link.Icon />37            </Link>38          ))}39        </div>40      </div>41    </div>42  );43}