v3.0.0-beta.6

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
3import { ColorArea } from "@lenso/ui";4
5export function ColorAreaBasic() {6  return (7    <ColorArea aria-label="Color area" defaultValue="rgb(116, 52, 255)">8      <ColorArea.Thumb />9    </ColorArea>10  );11}

1"use client";2
3import { ColorSlider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ slider: { width: "100%", maxWidth: 320 } });7export function Basic() {8  return (9    <ColorSlider10      aria-label="Hue"11      channel="hue"12      xstyle={styles.slider}13      defaultValue="hsl(0, 100%, 50%)"14    >15      <span>Hue</span>16      <ColorSlider.Output />17      <ColorSlider.Track>18        <ColorSlider.Thumb />19      </ColorSlider.Track>20    </ColorSlider>21  );22}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSlider, ColorSwatch, parseColor } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "../color-picker/source.stylex";7export function Channels() {8  const [color, setColor] = useState(parseColor("hsl(0, 100%, 50%)"));9  return (10    <div {...stylex.props(styles.column, styles.xs)}>11      {(["hue", "saturation", "lightness"] as const).map((channel) => (12        <ColorSlider key={channel} channel={channel} value={color} onChange={setColor}>13          <ColorSlider.Label xstyle={styles.capitalize}>{channel}</ColorSlider.Label>14          <ColorSlider.Output />15          <ColorSlider.Track>16            <ColorSlider.Thumb />17          </ColorSlider.Track>18        </ColorSlider>19      ))}20      <div {...stylex.props(styles.row2)}>21        <ColorSwatch color={color} size="sm" />22        <p {...stylex.props(styles.muted)}>23          Current color: <code {...stylex.props(styles.mono)}>{color.toString("hsl")}</code>24        </p>25      </div>26    </div>27  );28}

1"use client";2
3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6
7const styles = stylex.create({ field: { width: 280, maxWidth: "100%" } });8export function Basic() {9  const [color, setColor] = useState<ReturnType<typeof parseColor> | null>(() =>10    parseColor("#0485F7"),11  );12  return (13    <ColorField xstyle={styles.field} name="color" value={color} onChange={setColor}>14      <ColorField.Label>Color</ColorField.Label>15      <ColorField.Group>16        <ColorField.Prefix>17          <ColorSwatch {...(color ? { color } : {})} size="xs" />18        </ColorField.Prefix>19        <ColorField.Input />20      </ColorField.Group>21    </ColorField>22  );23}

1"use client";2
3import { ColorSwatch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 12 } });7export function ColorSwatchBasic() {8  return (9    <div {...stylex.props(styles.row)}>10      <ColorSwatch aria-label="Blue" color="#0485F7" />11      <ColorSwatch aria-label="Red" color="#EF4444" />12      <ColorSwatch aria-label="Amber" color="#F59E0B" />13      <ColorSwatch aria-label="Green" color="#10B981" />14      <ColorSwatch aria-label="Fuchsia" color="#D946EF" />15    </div>16  );17}

1"use client";2
3import { ColorSwatchPicker } from "@lenso/ui";4
5const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];6export function Basic() {7  return (8    <ColorSwatchPicker aria-label="Choose a color">9      {colors.map((color) => (10        <ColorSwatchPicker.Item key={color} color={color}>11          <ColorSwatchPicker.Swatch />12          <ColorSwatchPicker.Indicator />13        </ColorSwatchPicker.Item>14      ))}15    </ColorSwatchPicker>16  );17}

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}