ColorArea

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/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorArea } from "@lenso/ui";4export function ColorAreaWithDots() {5  return (6    <ColorArea aria-label="Color area" showDots defaultValue="hsl(200, 100%, 50%)">7      <ColorArea.Thumb />8    </ColorArea>9  );10}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. Base UI owns the ordinary selects. */3import { ColorArea, parseColor } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "../color-picker/source.stylex";7import { ColorDemoSelect } from "../color-picker/source";8type Space = "rgb" | "hsl" | "hsb";9type Channel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue";10const channelsBySpace: Record<Space, Channel[]> = {11  rgb: ["red", "green", "blue"],12  hsl: ["hue", "saturation", "lightness"],13  hsb: ["hue", "saturation", "brightness"],14};15export function ColorAreaSpaceAndChannels() {16  const [colorSpace, setColorSpace] = useState<Space>("hsb");17  const [color, setColor] = useState(() => parseColor("hsb(219, 58%, 93%)"));18  const [xChannel, setXChannel] = useState<Channel>("saturation");19  const [yChannel, setYChannel] = useState<Channel>("brightness");20  function changeSpace(space: Space) {21    setColorSpace(space);22    setXChannel(space === "rgb" ? "blue" : "saturation");23    setYChannel(space === "rgb" ? "green" : space === "hsl" ? "lightness" : "brightness");24  }25  const channels = channelsBySpace[colorSpace];26  return (27    <div {...stylex.props(styles.centeredColumn)}>28      <div {...stylex.props(styles.controls)}>29        <ColorDemoSelect30          label="Color Space"31          value={colorSpace}32          options={["rgb", "hsl", "hsb"]}33          onChange={changeSpace}34          width={128}35          uppercase36        />37        <ColorDemoSelect38          label="X Axis"39          value={xChannel}40          options={channels.filter((c) => c !== yChannel)}41          onChange={setXChannel}42          width={144}43        />44        <ColorDemoSelect45          label="Y Axis"46          value={yChannel}47          options={channels.filter((c) => c !== xChannel)}48          onChange={setYChannel}49          width={144}50        />51      </div>52      <ColorArea53        aria-label="Color area"54        colorSpace={colorSpace}55        value={color}56        xChannel={xChannel}57        yChannel={yChannel}58        onChange={setColor}59      >60        <ColorArea.Thumb />61      </ColorArea>62      <div {...stylex.props(styles.row)}>63        <div {...stylex.props(styles.preview)} style={{ backgroundColor: color.toString("css") }} />64        <code {...stylex.props(styles.code)}>{color.toString(colorSpace)}</code>65      </div>66    </div>67  );68}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorArea } from "@lenso/ui";4export function ColorAreaDisabled() {5  return (6    <ColorArea aria-label="Color area" isDisabled defaultValue="hsl(200, 100%, 50%)">7      <ColorArea.Thumb />8    </ColorArea>9  );10}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorArea, ColorSwatch, parseColor } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "../color-picker/source.stylex";7export function ColorAreaControlled() {8  const [color, setColor] = useState(parseColor("#9B80FF"));9  return (10    <div {...stylex.props(styles.column)}>11      <ColorArea12        aria-label="Color area"13        colorSpace="rgb"14        value={color}15        xChannel="red"16        yChannel="green"17        onChange={setColor}18      >19        <ColorArea.Thumb />20      </ColorArea>21      <div {...stylex.props(styles.row, styles.width300)}>22        <ColorSwatch color={color} size="md" />23        <p {...stylex.props(styles.muted)}>24          Current color: <span {...stylex.props(styles.medium)}>{color.toString("hex")}</span>25        </p>26      </div>27    </div>28  );29}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. Native RAC render state replaces DOM render interception. */3import { ColorArea } from "@lenso/ui";4export function RenderFunction() {5  return (6    <ColorArea aria-label="Color area" defaultValue="rgb(116, 52, 255)" data-custom="slider">7      {({ isDisabled }) => (8        <ColorArea.Thumb data-custom="thumb" data-disabled={isDisabled || undefined} />9      )}10    </ColorArea>11  );12}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorArea } from "@lenso/ui";4import { styles } from "../color-picker/source.stylex";5export function CustomStyles() {6  return (7    <ColorArea aria-label="Color area" xstyle={styles.areaCustom} defaultValue="rgb(116, 52, 255)">8      <ColorArea.Thumb xstyle={styles.areaThumb} />9    </ColorArea>10  );11}