ColorField

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/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function Variants() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField xstyle={styles.width280} defaultValue="#0485F7" name="primary-color">10        <ColorField.Label>Primary variant</ColorField.Label>11        <ColorField.Group variant="primary">12          <ColorField.Input />13        </ColorField.Group>14      </ColorField>15      <ColorField xstyle={styles.width280} defaultValue="#F43F5E" name="secondary-color">16        <ColorField.Label>Secondary variant</ColorField.Label>17        <ColorField.Group variant="secondary">18          <ColorField.Input />19        </ColorField.Group>20      </ColorField>21    </div>22  );23}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField, Surface } from "@lenso/ui";4import { styles } from "../color-picker/source.stylex";5export function OnSurface() {6  return (7    <Surface xstyle={[styles.width320, styles.padded]}>8      <ColorField defaultValue="#3B82F6" name="color">9        <ColorField.Label>Theme Color</ColorField.Label>10        <ColorField.Group variant="secondary">11          <ColorField.Input />12        </ColorField.Group>13        <ColorField.Description>Select your theme color</ColorField.Description>14      </ColorField>15    </Surface>16  );17}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function WithDescription() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField xstyle={styles.width280} defaultValue="#3B82F6" name="color">10        <ColorField.Label>Primary Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input />13        </ColorField.Group>14        <ColorField.Description>Enter your brand's primary color</ColorField.Description>15      </ColorField>16      <ColorField xstyle={styles.width280} defaultValue="#F59E0B" name="accent-color">17        <ColorField.Label>Accent Color</ColorField.Label>18        <ColorField.Group>19          <ColorField.Input />20        </ColorField.Group>21        <ColorField.Description>Used for highlights and CTAs</ColorField.Description>22      </ColorField>23    </div>24  );25}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function Required() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField isRequired xstyle={styles.width280} name="color">10        <ColorField.Label>Brand Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input placeholder="#000000" />13        </ColorField.Group>14      </ColorField>15      <ColorField isRequired xstyle={styles.width280} name="theme-color">16        <ColorField.Label>Theme Color</ColorField.Label>17        <ColorField.Group>18          <ColorField.Input placeholder="#000000" />19        </ColorField.Group>20        <ColorField.Description>Required field</ColorField.Description>21      </ColorField>22    </div>23  );24}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function Disabled() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField isDisabled xstyle={styles.width280} defaultValue="#0485F7" name="color">10        <ColorField.Label>Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input />13        </ColorField.Group>14        <ColorField.Description>This color field is disabled</ColorField.Description>15      </ColorField>16      <ColorField isDisabled xstyle={styles.width280} name="color-empty">17        <ColorField.Label>Color</ColorField.Label>18        <ColorField.Group>19          <ColorField.Input placeholder="#000000" />20        </ColorField.Group>21        <ColorField.Description>This color field is disabled</ColorField.Description>22      </ColorField>23    </div>24  );25}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function FullWidth() {7  return (8    <div {...stylex.props(styles.width400, styles.column)}>9      <ColorField fullWidth defaultValue="#10B981" name="color">10        <ColorField.Label>Brand Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input />13        </ColorField.Group>14      </ColorField>15      <ColorField fullWidth defaultValue="#8B5CF6" name="color-with-suffix">16        <ColorField.Label>Theme Color</ColorField.Label>17        <ColorField.Group>18          <ColorField.Input />19        </ColorField.Group>20      </ColorField>21    </div>22  );23}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "../color-picker/source.stylex";7export function Invalid() {8  // A Color cannot represent malformed text; keep the source's invalid edit in the input.9  const [invalidText, setInvalidText] = useState("not-a-color");10  return (11    <div {...stylex.props(styles.column)}>12      <ColorField isInvalid isRequired xstyle={styles.width280} name="color">13        <ColorField.Label>Color</ColorField.Label>14        <ColorField.Group>15          <ColorField.Input placeholder="#000000" />16        </ColorField.Group>17        <ColorField.Error>Please enter a valid hex color</ColorField.Error>18      </ColorField>19      <ColorField isInvalid xstyle={styles.width280} name="invalid-color">20        <ColorField.Label>Background Color</ColorField.Label>21        <ColorField.Group>22          <ColorField.Input23            value={invalidText}24            onChange={(event) => setInvalidText(event.target.value)}25          />26        </ColorField.Group>27        <ColorField.Error>Invalid color format. Use hex (e.g., #FF5733)</ColorField.Error>28      </ColorField>29    </div>30  );31}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { styles } from "../color-picker/source.stylex";8export function ChannelEditing() {9  const [color, setColor] = useState<Color | null>(parseColor("#7F007F"));10  return (11    <div {...stylex.props(styles.column)}>12      <p {...stylex.props(styles.muted)}>Edit individual HSL channels:</p>13      <div {...stylex.props(styles.controls)}>14        {(["hue", "saturation", "lightness"] as const).map((channel) => (15          <ColorField16            key={channel}17            channel={channel}18            xstyle={styles.width100}19            colorSpace="hsl"20            name={channel}21            value={color}22            onChange={setColor}23          >24            <ColorField.Label xstyle={styles.capitalize}>{channel}</ColorField.Label>25            <ColorField.Group>26              <ColorField.Input />27              {channel !== "hue" && (28                <ColorField.Suffix>29                  <span {...stylex.props(styles.muted)}>%</span>30                </ColorField.Suffix>31              )}32            </ColorField.Group>33          </ColorField>34        ))}35      </div>36      <div {...stylex.props(styles.row2)}>37        <ColorSwatch color={color ?? undefined} size="md" />38        <span {...stylex.props(styles.small)}>39          Current: {color ? color.toString("hex") : "(empty)"}40        </span>41      </div>42    </div>43  );44}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { Button, ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { styles } from "../color-picker/source.stylex";8export function Controlled() {9  const [value, setValue] = useState<Color | null>(parseColor("#0485F7"));10  return (11    <div {...stylex.props(styles.column)}>12      <ColorField xstyle={styles.width280} name="color" value={value} onChange={setValue}>13        <ColorField.Label>Color</ColorField.Label>14        <ColorField.Group>15          <ColorField.Prefix>16            <ColorSwatch color={value ?? undefined} size="xs" />17          </ColorField.Prefix>18          <ColorField.Input />19        </ColorField.Group>20        <ColorField.Description>21          Current value: {value ? value.toString("hex") : "(empty)"}22        </ColorField.Description>23      </ColorField>24      <div {...stylex.props(styles.row2)}>25        <Button variant="tertiary" onClick={() => setValue(parseColor("#EF4444"))}>26          Set Red27        </Button>28        <Button variant="tertiary" onClick={() => setValue(parseColor("#10B981"))}>29          Set Green30        </Button>31        <Button variant="tertiary" onClick={() => setValue(null)}>32          Clear33        </Button>34      </div>35    </div>36  );37}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. Native form and Base UI button retain the source submit workflow. */3import { Button, ColorField, ColorSwatch } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState, type FormEvent } from "react";6import * as stylex from "@stylexjs/stylex";7import { styles } from "../color-picker/source.stylex";8export function FormExample() {9  const [value, setValue] = useState<Color | null>(null);10  const [isSubmitting, setIsSubmitting] = useState(false);11  function handleSubmit(event: FormEvent<HTMLFormElement>) {12    event.preventDefault();13    if (!value || isSubmitting) return;14    setIsSubmitting(true);15    setTimeout(() => {16      setValue(null);17      setIsSubmitting(false);18    }, 1500);19  }20  return (21    <form {...stylex.props(styles.column, styles.width280)} onSubmit={handleSubmit}>22      <ColorField23        fullWidth24        isRequired25        xstyle={styles.full}26        name="brand-color"27        value={value}28        onChange={setValue}29      >30        <ColorField.Label>Brand Color</ColorField.Label>31        <ColorField.Group>32          <ColorField.Prefix>33            <ColorSwatch color={value ?? undefined} size="xs" />34          </ColorField.Prefix>35          <ColorField.Input placeholder="#000000" />36        </ColorField.Group>37        <ColorField.Description>Choose your brand's primary color</ColorField.Description>38      </ColorField>39      <Button40        xstyle={styles.full}41        disabled={!value}42        isLoading={isSubmitting}43        type="submit"44        variant="primary"45      >46        {isSubmitting ? "Saving..." : "Save Color"}47      </Button>48    </form>49  );50}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. Native RAC render state replaces DOM render interception. */3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import { styles } from "../color-picker/source.stylex";7export function RenderFunction() {8  const [color, setColor] = useState<Color | null>(parseColor("#0485F7"));9  return (10    <ColorField11      xstyle={styles.width280}12      name="color"13      data-custom="foo"14      value={color}15      onChange={setColor}16    >17      {({ isInvalid }) => (18        <>19          <ColorField.Label>Color</ColorField.Label>20          <ColorField.Group data-custom="foo" data-invalid={isInvalid || undefined}>21            <ColorField.Prefix>22              <ColorSwatch color={color ?? undefined} size="xs" />23            </ColorField.Prefix>24            <ColorField.Input />25          </ColorField.Group>26        </>27      )}28    </ColorField>29  );30}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import { styles } from "../color-picker/source.stylex";7export function CustomStyles() {8  const [color, setColor] = useState<Color | null>(parseColor("#6366F1"));9  return (10    <ColorField xstyle={styles.customField} name="accent-color" value={color} onChange={setColor}>11      <ColorField.Label xstyle={styles.label}>Accent color</ColorField.Label>12      <ColorField.Description>Applied to buttons, links, and focus rings.</ColorField.Description>13      <ColorField.Group xstyle={styles.customGroup} variant="secondary">14        <ColorField.Prefix>15          <ColorSwatch xstyle={styles.square} color={color ?? undefined} size="xs" />16        </ColorField.Prefix>17        <ColorField.Input xstyle={styles.customInput} />18      </ColorField.Group>19    </ColorField>20  );21}