ColorPicker

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/** Adapted from HeroUI v3.2.6. Apache-2.0. Gravity Shuffle replaces the source Iconify reference to the same icon. */3import {4  Button,5  ColorArea,6  ColorField,7  ColorPicker,8  ColorSlider,9  ColorSwatch,10  ColorSwatchPicker,11  parseColor,12} from "@lenso/ui";13import { Shuffle } from "@gravity-ui/icons";14import { useState } from "react";15import * as stylex from "@stylexjs/stylex";16import { styles } from "./source.stylex";17const presets = [18  "#ef4444",19  "#f97316",20  "#eab308",21  "#22c55e",22  "#06b6d4",23  "#3b82f6",24  "#8b5cf6",25  "#ec4899",26  "#f43f5e",27];28export function Controlled() {29  const [color, setColor] = useState(parseColor("#325578"));30  function shuffleColor() {31    const hue = Math.floor(Math.random() * 360);32    const saturation = 50 + Math.floor(Math.random() * 50);33    const lightness = 40 + Math.floor(Math.random() * 30);34    setColor(parseColor(`hsl(${hue}, ${saturation}%, ${lightness}%)`));35  }36  return (37    <div {...stylex.props(styles.column)}>38      <ColorPicker value={color} onChange={setColor}>39        <ColorPicker.Trigger>40          <ColorSwatch size="lg" />41          <span>Pick a color</span>42        </ColorPicker.Trigger>43        <ColorPicker.Popover xstyle={styles.popover}>44          <ColorSwatchPicker aria-label="Color presets" xstyle={styles.presets} size="xs">45            {presets.map((preset) => (46              <ColorSwatchPicker.Item key={preset} color={preset}>47                <ColorSwatchPicker.Swatch />48              </ColorSwatchPicker.Item>49            ))}50          </ColorSwatchPicker>51          <ColorArea52            aria-label="Color area"53            xstyle={styles.area}54            colorSpace="hsb"55            xChannel="saturation"56            yChannel="brightness"57          >58            <ColorArea.Thumb />59          </ColorArea>60          <div {...stylex.props(styles.hueRow)}>61            <ColorSlider62              aria-label="Hue slider"63              channel="hue"64              xstyle={styles.flex1}65              colorSpace="hsb"66            >67              <ColorSlider.Track>68                <ColorSlider.Thumb />69              </ColorSlider.Track>70            </ColorSlider>71            <Button72              isIconOnly73              aria-label="Shuffle color"74              size="sm"75              variant="tertiary"76              onClick={shuffleColor}77            >78              <Shuffle {...stylex.props(styles.icon)} />79            </Button>80          </div>81          <ColorField aria-label="Color field">82            <ColorField.Group variant="secondary">83              <ColorField.Prefix>84                <ColorSwatch size="xs" />85              </ColorField.Prefix>86              <ColorField.Input />87            </ColorField.Group>88          </ColorField>89        </ColorPicker.Popover>90      </ColorPicker>91      <p {...stylex.props(styles.selected)}>92        Selected: <span {...stylex.props(styles.medium)}>{color.toString("hex")}</span>93      </p>94    </div>95  );96}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorArea, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker } from "@lenso/ui";4import { styles } from "./source.stylex";5const presets = [6  "#ef4444",7  "#f97316",8  "#eab308",9  "#22c55e",10  "#06b6d4",11  "#3b82f6",12  "#8b5cf6",13  "#ec4899",14  "#f43f5e",15];16export function WithSwatches() {17  return (18    <ColorPicker defaultValue="#F43F5E">19      <ColorPicker.Trigger>20        <ColorSwatch size="lg" />21        <span>Brand Color</span>22      </ColorPicker.Trigger>23      <ColorPicker.Popover>24        <ColorArea25          aria-label="Color area"26          xstyle={styles.area}27          colorSpace="hsb"28          xChannel="saturation"29          yChannel="brightness"30        >31          <ColorArea.Thumb />32        </ColorArea>33        <ColorSlider aria-label="Hue slider" channel="hue" xstyle={styles.slider} colorSpace="hsb">34          <ColorSlider.Label>Hue</ColorSlider.Label>35          <ColorSlider.Output xstyle={styles.output} />36          <ColorSlider.Track>37            <ColorSlider.Thumb />38          </ColorSlider.Track>39        </ColorSlider>40        <ColorSwatchPicker aria-label="Color presets" xstyle={styles.swatches} size="xs">41          {presets.map((preset) => (42            <ColorSwatchPicker.Item key={preset} color={preset}>43              <ColorSwatchPicker.Swatch />44            </ColorSwatchPicker.Item>45          ))}46        </ColorSwatchPicker>47      </ColorPicker.Popover>48    </ColorPicker>49  );50}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "./source.stylex";7import { ColorDemoSelect } from "./source";8type Space = "hsb" | "hsl" | "rgb";9const channels = {10  hsb: ["hue", "saturation", "brightness"],11  hsl: ["hue", "saturation", "lightness"],12  rgb: ["red", "green", "blue"],13} as const;14export function WithFields() {15  const [colorSpace, setColorSpace] = useState<Space>("hsl");16  return (17    <ColorPicker defaultValue="hsla(220, 90%, 50%, 0.8)">18      <ColorPicker.Trigger>19        <ColorSwatch size="lg" />20        <span>Pick a color</span>21      </ColorPicker.Trigger>22      <ColorPicker.Popover xstyle={styles.narrowPopover}>23        <ColorArea24          aria-label="Color area"25          xstyle={styles.area}26          colorSpace="hsb"27          xChannel="saturation"28          yChannel="brightness"29        >30          <ColorArea.Thumb />31        </ColorArea>32        <ColorSlider channel="hue" xstyle={styles.slider} colorSpace="hsb">33          <ColorSlider.Label>Hue</ColorSlider.Label>34          <ColorSlider.Output xstyle={styles.output} />35          <ColorSlider.Track>36            <ColorSlider.Thumb />37          </ColorSlider.Track>38        </ColorSlider>39        <ColorDemoSelect40          label="Color space"41          value={colorSpace}42          options={["hsb", "hsl", "rgb"]}43          onChange={setColorSpace}44          uppercase45        />46        <div {...stylex.props(styles.channelGrid)}>47          {channels[colorSpace].map((channel) => (48            <ColorField49              key={channel}50              aria-label={channel}51              channel={channel}52              colorSpace={colorSpace}53            >54              <ColorField.Group variant="secondary">55                <ColorField.Input />56              </ColorField.Group>57            </ColorField>58          ))}59        </div>60      </ColorPicker.Popover>61    </ColorPicker>62  );63}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorPicker, ColorSlider, ColorSwatch } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "./source.stylex";7import { ColorDemoSelect } from "./source";8type Space = "hsb" | "hsl" | "rgb";9const channelProps = {10  hsb: [11    { colorSpace: "hsb", channel: "hue" },12    { colorSpace: "hsb", channel: "saturation" },13    { colorSpace: "hsb", channel: "brightness" },14    { colorSpace: "hsb", channel: "alpha" },15  ],16  hsl: [17    { colorSpace: "hsl", channel: "hue" },18    { colorSpace: "hsl", channel: "saturation" },19    { colorSpace: "hsl", channel: "lightness" },20    { colorSpace: "hsl", channel: "alpha" },21  ],22  rgb: [23    { colorSpace: "rgb", channel: "red" },24    { colorSpace: "rgb", channel: "green" },25    { colorSpace: "rgb", channel: "blue" },26    { colorSpace: "rgb", channel: "alpha" },27  ],28} as const;29export function WithSliders() {30  const [colorSpace, setColorSpace] = useState<Space>("hsl");31  return (32    <ColorPicker defaultValue="hsl(219, 58%, 93%)">33      <ColorPicker.Trigger>34        <ColorSwatch size="lg" />35        <span>Pick a color</span>36      </ColorPicker.Trigger>37      <ColorPicker.Popover xstyle={styles.slidersPopover}>38        <ColorDemoSelect39          label="Color space"40          value={colorSpace}41          options={["hsb", "hsl", "rgb"]}42          onChange={setColorSpace}43          uppercase44        />45        <div {...stylex.props(styles.column2)}>46          {channelProps[colorSpace].map((props) => (47            <ColorSlider48              key={props.channel}49              {...props}50              aria-label={props.channel}51              xstyle={styles.slider}52            >53              <ColorSlider.Label xstyle={styles.capitalize}>{props.channel}</ColorSlider.Label>54              <ColorSlider.Output xstyle={styles.output} />55              <ColorSlider.Track>56                <ColorSlider.Thumb />57              </ColorSlider.Track>58            </ColorSlider>59          ))}60        </div>61      </ColorPicker.Popover>62    </ColorPicker>63  );64}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorArea, ColorPicker, ColorSlider, ColorSwatch } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "./source.stylex";6export function CustomStyles() {7  return (8    <ColorPicker defaultValue="#0485F7">9      <ColorPicker.Trigger xstyle={styles.trigger}>10        <ColorSwatch size="lg" />11        <span {...stylex.props(styles.label)}>Theme color</span>12      </ColorPicker.Trigger>13      <ColorPicker.Popover xstyle={styles.surface}>14        <ColorArea15          aria-label="Color area"16          xstyle={styles.area}17          colorSpace="hsb"18          xChannel="saturation"19          yChannel="brightness"20        >21          <ColorArea.Thumb />22        </ColorArea>23        <ColorSlider channel="hue" xstyle={styles.slider} colorSpace="hsb">24          <ColorSlider.Label>Hue</ColorSlider.Label>25          <ColorSlider.Output xstyle={styles.output} />26          <ColorSlider.Track>27            <ColorSlider.Thumb />28          </ColorSlider.Track>29        </ColorSlider>30      </ColorPicker.Popover>31    </ColorPicker>32  );33}