@varialkit/colorpicker 0.1.0

package/src/ColorPicker.tsx

@@ -0,0 +1,905 @@
+import React from "react";
+import { Menu, MenuDropdown } from "@solara/menu";
+import { TextField } from "@solara/textfield";
+import type {
+  ColorPickerContentProps,
+  ColorPickerPaletteEntry,
+  ColorPickerPaletteOption,
+  ColorPickerPaletteProps,
+  ColorPickerProps,
+  ColorPickerSwatchProps,
+  ColorPickerValueFormat,
+} from "./ColorPicker.types";
+import { ColorPreview } from "./ColorPreview";
+import "./ColorPicker.scss";
+
+type RgbaColor = { r: number; g: number; b: number; a: number };
+type HsvaColor = { h: number; s: number; v: number; a: number };
+type SpectrumPoint = { s: number; v: number };
+type EyeDropperResult = { sRGBHex: string };
+type EyeDropperConstructor = new () => { open: () => Promise<EyeDropperResult> };
+
+const DEFAULT_COLORS: ColorPickerPaletteEntry[] = [
+  "#ef4444",
+  "#f97316",
+  "#f59e0b",
+  "#eab308",
+  "#22c55e",
+  "#16a34a",
+  "#14b8a6",
+  "#06b6d4",
+  "#3b82f6",
+  "#2563eb",
+  "#6366f1",
+  "#8b5cf6",
+  "#a855f7",
+  "#ec4899",
+  "#f43f5e",
+  "#6b7280",
+  "#111827",
+  "#000000",
+  "#ffffff",
+];
+
+const DEFAULT_TRIGGER_LABEL = "Color";
+const DEFAULT_COLOR = "#3b82f6";
+const TEXTFIELD_SIZE_MAP = {
+  sm: "small",
+  md: "medium",
+  lg: "large",
+} as const;
+const VALUE_FORMAT_OPTIONS: { label: string; value: ColorPickerValueFormat }[] = [
+  { label: "Hex", value: "hex" },
+  { label: "RGBA", value: "rgba" },
+  { label: "HSLA", value: "hsla" },
+];
+
+function cx(...values: Array<string | false | null | undefined>) {
+  return values.filter(Boolean).join(" ");
+}
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+const clamp01 = (value: number) => clamp(value, 0, 1);
+
+const round = (value: number, precision = 2) => {
+  const factor = 10 ** precision;
+  return Math.round(value * factor) / factor;
+};
+
+const wrapHue = (value: number) => {
+  const wrapped = value % 360;
+  return wrapped < 0 ? wrapped + 360 : wrapped;
+};
+
+const channelToHex = (value: number) => clamp(Math.round(value), 0, 255).toString(16).padStart(2, "0");
+
+const alphaToHex = (alpha: number) => channelToHex(Math.round(clamp01(alpha) * 255));
+
+const stripHexPrefix = (value: string) => value.replace(/^#/, "");
+
+const formatAlpha = (alpha: number) => {
+  const normalized = round(clamp01(alpha), 3);
+  if (normalized === 1 || normalized === 0) return normalized.toString();
+  return normalized.toString().replace(/0+$/, "").replace(/\.$/, "");
+};
+
+const formatPercent = (value: number) => Math.round(clamp01(value) * 100).toString();
+
+const parseChannel = (value: string, max = 255) => {
+  if (value.trim().endsWith("%")) {
+    const percentage = Number.parseFloat(value);
+    if (!Number.isFinite(percentage)) return null;
+    return clamp((percentage / 100) * max, 0, max);
+  }
+  const numeric = Number.parseFloat(value);
+  return Number.isFinite(numeric) ? clamp(numeric, 0, max) : null;
+};
+
+const parseAlphaValue = (value: string) => {
+  if (value.trim().endsWith("%")) {
+    const percentage = Number.parseFloat(value);
+    if (!Number.isFinite(percentage)) return null;
+    return clamp01(percentage / 100);
+  }
+  const numeric = Number.parseFloat(value);
+  return Number.isFinite(numeric) ? clamp01(numeric) : null;
+};
+
+const parseHueValue = (value: string) => {
+  const numeric = Number.parseFloat(value);
+  return Number.isFinite(numeric) ? wrapHue(numeric) : null;
+};
+
+const parsePercentUnit = (value: string) => {
+  const numeric = Number.parseFloat(value);
+  return Number.isFinite(numeric) ? clamp01(numeric / 100) : null;
+};
+
+const isValidHexColor = (hex: string): boolean => /^#?([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(hex);
+
+const normalizeHexColor = (hex: string): string => {
+  const raw = stripHexPrefix(hex.trim());
+  if (!isValidHexColor(raw)) return `#${raw.toUpperCase()}`;
+
+  if (raw.length === 3 || raw.length === 4) {
+    const expanded = raw
+      .split("")
+      .map((char) => `${char}${char}`)
+      .join("");
+    return `#${expanded.toUpperCase()}`;
+  }
+
+  return `#${raw.toUpperCase()}`;
+};
+
+const parseHexColor = (value: string): RgbaColor | null => {
+  if (!isValidHexColor(value)) return null;
+  const normalized = normalizeHexColor(value);
+  const raw = stripHexPrefix(normalized);
+  const hasAlpha = raw.length === 8;
+
+  const r = Number.parseInt(raw.slice(0, 2), 16);
+  const g = Number.parseInt(raw.slice(2, 4), 16);
+  const b = Number.parseInt(raw.slice(4, 6), 16);
+  const a = hasAlpha ? Number.parseInt(raw.slice(6, 8), 16) / 255 : 1;
+
+  return { r, g, b, a };
+};
+
+const parseRgbColor = (value: string): RgbaColor | null => {
+  const match = value
+    .trim()
+    .match(/^rgba?\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*([^,/\s]+)(?:\s*(?:,|\/)\s*([^)]+))?\s*\)$/i);
+  if (!match) return null;
+
+  const r = parseChannel(match[1]);
+  const g = parseChannel(match[2]);
+  const b = parseChannel(match[3]);
+  const a = match[4] ? parseAlphaValue(match[4]) : 1;
+
+  if (r === null || g === null || b === null || a === null) return null;
+  return { r, g, b, a };
+};
+
+const parseHslColor = (value: string): RgbaColor | null => {
+  const match = value
+    .trim()
+    .match(/^hsla?\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*([^,/\s]+)(?:\s*(?:,|\/)\s*([^)]+))?\s*\)$/i);
+  if (!match) return null;
+
+  const h = parseHueValue(match[1]);
+  const s = parsePercentUnit(match[2]);
+  const l = parsePercentUnit(match[3]);
+  const a = match[4] ? parseAlphaValue(match[4]) : 1;
+
+  if (h === null || s === null || l === null || a === null) return null;
+
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+
+  let rPrime = 0;
+  let gPrime = 0;
+  let bPrime = 0;
+
+  if (h < 60) {
+    rPrime = c;
+    gPrime = x;
+  } else if (h < 120) {
+    rPrime = x;
+    gPrime = c;
+  } else if (h < 180) {
+    gPrime = c;
+    bPrime = x;
+  } else if (h < 240) {
+    gPrime = x;
+    bPrime = c;
+  } else if (h < 300) {
+    rPrime = x;
+    bPrime = c;
+  } else {
+    rPrime = c;
+    bPrime = x;
+  }
+
+  return {
+    r: Math.round((rPrime + m) * 255),
+    g: Math.round((gPrime + m) * 255),
+    b: Math.round((bPrime + m) * 255),
+    a,
+  };
+};
+
+const parseColorString = (value?: string): RgbaColor | null => {
+  if (!value) return null;
+  return parseHexColor(value) ?? parseRgbColor(value) ?? parseHslColor(value);
+};
+
+const rgbaToHsva = ({ r, g, b, a }: RgbaColor): HsvaColor => {
+  const red = r / 255;
+  const green = g / 255;
+  const blue = b / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const delta = max - min;
+
+  let h = 0;
+  if (delta !== 0) {
+    if (max === red) {
+      h = 60 * (((green - blue) / delta) % 6);
+    } else if (max === green) {
+      h = 60 * ((blue - red) / delta + 2);
+    } else {
+      h = 60 * ((red - green) / delta + 4);
+    }
+  }
+
+  return {
+    h: wrapHue(h),
+    s: max === 0 ? 0 : delta / max,
+    v: max,
+    a: clamp01(a),
+  };
+};
+
+const hsvaToRgba = ({ h, s, v, a }: HsvaColor): RgbaColor => {
+  const hue = wrapHue(h);
+  const saturation = clamp01(s);
+  const value = clamp01(v);
+  const chroma = value * saturation;
+  const x = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = value - chroma;
+
+  let rPrime = 0;
+  let gPrime = 0;
+  let bPrime = 0;
+
+  if (hue < 60) {
+    rPrime = chroma;
+    gPrime = x;
+  } else if (hue < 120) {
+    rPrime = x;
+    gPrime = chroma;
+  } else if (hue < 180) {
+    gPrime = chroma;
+    bPrime = x;
+  } else if (hue < 240) {
+    gPrime = x;
+    bPrime = chroma;
+  } else if (hue < 300) {
+    rPrime = x;
+    bPrime = chroma;
+  } else {
+    rPrime = chroma;
+    bPrime = x;
+  }
+
+  return {
+    r: Math.round((rPrime + m) * 255),
+    g: Math.round((gPrime + m) * 255),
+    b: Math.round((bPrime + m) * 255),
+    a: clamp01(a),
+  };
+};
+
+const rgbaToHsla = ({ r, g, b, a }: RgbaColor) => {
+  const red = r / 255;
+  const green = g / 255;
+  const blue = b / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const delta = max - min;
+  const lightness = (max + min) / 2;
+
+  let hue = 0;
+  let saturation = 0;
+
+  if (delta !== 0) {
+    saturation = delta / (1 - Math.abs(2 * lightness - 1));
+
+    if (max === red) {
+      hue = 60 * (((green - blue) / delta) % 6);
+    } else if (max === green) {
+      hue = 60 * ((blue - red) / delta + 2);
+    } else {
+      hue = 60 * ((red - green) / delta + 4);
+    }
+  }
+
+  return {
+    h: wrapHue(hue),
+    s: clamp01(Number.isFinite(saturation) ? saturation : 0),
+    l: clamp01(lightness),
+    a: clamp01(a),
+  };
+};
+
+const rgbaToComparableHex = (color: RgbaColor) =>
+  `#${channelToHex(color.r)}${channelToHex(color.g)}${channelToHex(color.b)}`.toUpperCase();
+
+const formatColorValue = (rgba: RgbaColor, format: ColorPickerValueFormat) => {
+  if (format === "rgba") {
+    return `rgba(${Math.round(rgba.r)}, ${Math.round(rgba.g)}, ${Math.round(rgba.b)}, ${formatAlpha(rgba.a)})`;
+  }
+
+  if (format === "hsla") {
+    const hsla = rgbaToHsla(rgba);
+    return `hsla(${Math.round(hsla.h)}, ${Math.round(hsla.s * 100)}%, ${Math.round(hsla.l * 100)}%, ${formatAlpha(
+      hsla.a
+    )})`;
+  }
+
+  const alphaSuffix = rgba.a < 1 ? alphaToHex(rgba.a) : "";
+  return `#${channelToHex(rgba.r)}${channelToHex(rgba.g)}${channelToHex(rgba.b)}${alphaSuffix}`.toUpperCase();
+};
+
+const getValueInputString = (hsva: HsvaColor, format: ColorPickerValueFormat) =>
+  formatColorValue(hsvaToRgba(hsva), format);
+
+const toComparableColor = (value?: string) => {
+  const parsed = parseColorString(value);
+  return parsed ? rgbaToComparableHex(parsed) : value?.trim().toUpperCase();
+};
+
+const getResolvedHsva = (value?: string) => rgbaToHsva(parseColorString(value) ?? parseHexColor(DEFAULT_COLOR)!);
+
+const getSpectrumPoint = (event: React.PointerEvent<HTMLDivElement> | PointerEvent, element: HTMLDivElement) => {
+  const rect = element.getBoundingClientRect();
+  const s = clamp01((event.clientX - rect.left) / rect.width);
+  const v = clamp01(1 - (event.clientY - rect.top) / rect.height);
+  return { s, v };
+};
+
+// Normalize palette entries so the palette can accept both strings and objects.
+const normalizePaletteEntry = (entry: ColorPickerPaletteEntry): ColorPickerPaletteOption => {
+  if (typeof entry === "string") {
+    return { value: entry, label: entry };
+  }
+  return entry;
+};
+
+function useControllableOpenState({
+  isOpen,
+  defaultOpen,
+  onOpenChange,
+}: Pick<ColorPickerProps, "isOpen" | "defaultOpen" | "onOpenChange">) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(Boolean(defaultOpen));
+  const open = isOpen ?? uncontrolledOpen;
+
+  const setOpen = React.useCallback(
+    (next: boolean) => {
+      if (isOpen === undefined) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isOpen, onOpenChange]
+  );
+
+  return [open, setOpen] as const;
+}
+
+function EyeDropperIcon() {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" className="solara-colorpicker__eyedropper-icon">
+      <path
+        d="M10.84 1.47a1.5 1.5 0 0 1 2.12 0l1.57 1.57a1.5 1.5 0 0 1 0 2.12l-1.3 1.3-.93-.93-1.06 1.06 1.33 1.33-5.9 5.9H4.54v-2.12l5.9-5.9 1.33 1.33 1.06-1.06-.93-.93 1.3-1.3a1.5 1.5 0 0 1-2.36-2.2ZM3.5 12.85v.65h.65l1.77-1.77-1.3-1.3-1.12 1.12c-.32.32-.5.75-.5 1.3Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function ColorPickerSwatch({
+  color,
+  size = "md",
+  radius,
+  selected = false,
+  disabled = false,
+  className,
+  children,
+  style,
+  onClick,
+  ...props
+}: ColorPickerSwatchProps) {
+  return (
+    <button
+      type="button"
+      className={cx("solara-colorpicker__swatch", className, selected && "is-selected")}
+      style={{
+        backgroundColor: color,
+        ...(radius ? { ["--colorpicker-swatch-radius" as const]: radius } : null),
+        ...style,
+      }}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={props["aria-label"] ?? `Select color ${color}`}
+      data-selected={selected ? "true" : undefined}
+      data-size={size}
+      {...props}>
+      {children ? <span className="solara-colorpicker__swatch-content">{children}</span> : null}
+    </button>
+  );
+}
+
+export function ColorPickerPalette({
+  value,
+  colors = DEFAULT_COLORS,
+  onSelectColor,
+  size = "md",
+  disabled = false,
+  className,
+  swatchRadius,
+  swatchContent,
+}: ColorPickerPaletteProps) {
+  const normalizedValue = toComparableColor(value) ?? toComparableColor(DEFAULT_COLOR);
+  const entries = colors.map(normalizePaletteEntry);
+
+  return (
+    <div className={cx("solara-colorpicker__grid", className)}>
+      {entries.map((entry) => {
+        const isSelected = normalizedValue === toComparableColor(entry.value);
+        const isDisabled = disabled || Boolean(entry.disabled);
+        const overlayContent = entry.content ?? (swatchContent ? swatchContent(entry.value) : null);
+
+        return (
+          <ColorPickerSwatch
+            key={entry.value}
+            color={entry.value}
+            size={size}
+            radius={swatchRadius}
+            selected={isSelected}
+            disabled={isDisabled}
+            aria-label={entry.label ? `Select color ${entry.label}` : `Select color ${entry.value}`}
+            onClick={() => onSelectColor?.(entry.value)}>
+            {overlayContent}
+          </ColorPickerSwatch>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ColorPickerContent({
+  value,
+  onChange,
+  onSelectColor,
+  presets,
+  colors,
+  showValueInput,
+  showHexInput,
+  valueInputPlaceholder,
+  hexInputPlaceholder,
+  valueFormat = "hex",
+  defaultInputFormat,
+  inputFormats = VALUE_FORMAT_OPTIONS.map((option) => option.value),
+  showSpectrum = false,
+  showHueSlider = false,
+  showOpacitySlider = false,
+  showEyedropper = false,
+  showFormatSelector = false,
+  showOpacityInput = false,
+  size = "md",
+  swatchRadius,
+  swatchContent,
+  className,
+  disabled = false,
+}: ColorPickerContentProps) {
+  const spectrumRef = React.useRef<HTMLDivElement>(null);
+  const [hsva, setHsva] = React.useState<HsvaColor>(() => getResolvedHsva(value));
+  const [inputFormat, setInputFormat] = React.useState<ColorPickerValueFormat>(
+    defaultInputFormat ?? valueFormat
+  );
+  const [valueInput, setValueInput] = React.useState(() => getValueInputString(getResolvedHsva(value), inputFormat));
+  const [opacityInput, setOpacityInput] = React.useState(() => formatPercent(getResolvedHsva(value).a));
+
+  const resolvedPresets = presets ?? colors ?? DEFAULT_COLORS;
+  const shouldShowValueInput = showValueInput ?? showHexInput ?? true;
+  const resolvedValueInputPlaceholder = valueInputPlaceholder ?? hexInputPlaceholder ?? "Enter color value";
+  const availableInputFormats = React.useMemo(
+    () => VALUE_FORMAT_OPTIONS.filter((option) => inputFormats.includes(option.value)),
+    [inputFormats]
+  );
+  const supportsEyeDropper =
+    typeof window !== "undefined" &&
+    "EyeDropper" in window &&
+    typeof (window as Window & { EyeDropper?: EyeDropperConstructor }).EyeDropper === "function";
+  const controlsVisible = showSpectrum || showHueSlider || showOpacitySlider || showEyedropper;
+
+  const rgba = React.useMemo(() => hsvaToRgba(hsva), [hsva]);
+  const currentValue = React.useMemo(() => formatColorValue(rgba, valueFormat), [rgba, valueFormat]);
+
+  React.useEffect(() => {
+    const nextHsva = getResolvedHsva(value);
+    setHsva(nextHsva);
+  }, [value]);
+
+  React.useEffect(() => {
+    setValueInput(getValueInputString(hsva, inputFormat));
+    setOpacityInput(formatPercent(hsva.a));
+  }, [hsva, inputFormat]);
+
+  React.useEffect(() => {
+    if (!availableInputFormats.some((option) => option.value === inputFormat)) {
+      setInputFormat(availableInputFormats[0]?.value ?? "hex");
+    }
+  }, [availableInputFormats, inputFormat]);
+
+  const emitColorChange = React.useCallback(
+    (nextHsva: HsvaColor) => {
+      const nextValue = formatColorValue(hsvaToRgba(nextHsva), valueFormat);
+      onChange?.(nextValue);
+      return nextValue;
+    },
+    [onChange, valueFormat]
+  );
+
+  const commitHsva = React.useCallback(
+    (updater: HsvaColor | ((previous: HsvaColor) => HsvaColor), options?: { fromPreset?: boolean }) => {
+      const previous = hsva;
+      const nextValue =
+        typeof updater === "function" ? clampHsva((updater as (previous: HsvaColor) => HsvaColor)(previous)) : clampHsva(updater);
+      setHsva(nextValue);
+      const emittedValue = emitColorChange(nextValue);
+      if (options?.fromPreset) {
+        onSelectColor?.(emittedValue);
+      }
+      return nextValue;
+    },
+    [emitColorChange, hsva, onSelectColor]
+  );
+
+  const handleColorSelect = React.useCallback(
+    (color: string) => {
+      const parsed = parseColorString(color);
+      if (!parsed) return;
+      commitHsva(rgbaToHsva(parsed), { fromPreset: true });
+    },
+    [commitHsva]
+  );
+
+  const handleValueInputChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const nextValue = event.target.value;
+      setValueInput(nextValue);
+      const parsed =
+        inputFormat === "hex"
+          ? parseHexColor(nextValue)
+          : inputFormat === "rgba"
+            ? parseRgbColor(nextValue)
+            : parseHslColor(nextValue);
+      if (!parsed) return;
+      commitHsva(rgbaToHsva(parsed));
+    },
+    [commitHsva, inputFormat]
+  );
+
+  const handleValueInputBlur = React.useCallback(() => {
+    setValueInput(getValueInputString(hsva, inputFormat));
+  }, [hsva, inputFormat]);
+
+  const handleOpacityInputChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const nextValue = event.target.value.replace(/[^\d.]/g, "");
+      setOpacityInput(nextValue);
+      if (nextValue === "") return;
+      const parsed = Number.parseFloat(nextValue);
+      if (!Number.isFinite(parsed)) return;
+      commitHsva((previous) => ({ ...previous, a: clamp01(parsed / 100) }));
+    },
+    [commitHsva]
+  );
+
+  const handleOpacityInputBlur = React.useCallback(() => {
+    setOpacityInput(formatPercent(hsva.a));
+  }, [hsva.a]);
+
+  const handleSpectrumPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (disabled || !spectrumRef.current) return;
+      const point = getSpectrumPoint(event, spectrumRef.current);
+      commitHsva((previous) => ({ ...previous, ...point }));
+
+      const target = event.currentTarget;
+      target.setPointerCapture?.(event.pointerId);
+
+      const moveListener = (moveEvent: PointerEvent) => {
+        if (!spectrumRef.current) return;
+        const nextPoint = getSpectrumPoint(moveEvent, spectrumRef.current);
+        commitHsva((previous) => ({ ...previous, ...nextPoint }));
+      };
+
+      const cleanup = () => {
+        window.removeEventListener("pointermove", moveListener);
+        window.removeEventListener("pointerup", cleanup);
+      };
+
+      window.addEventListener("pointermove", moveListener);
+      window.addEventListener("pointerup", cleanup, { once: true });
+    },
+    [commitHsva, disabled]
+  );
+
+  const handleSpectrumKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) return;
+      const step = event.shiftKey ? 0.1 : 0.02;
+      if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
+      event.preventDefault();
+
+      commitHsva((previous) => {
+        if (event.key === "Home") return { ...previous, s: 0, v: 1 };
+        if (event.key === "End") return { ...previous, s: 1, v: 0 };
+        if (event.key === "ArrowLeft") return { ...previous, s: clamp01(previous.s - step) };
+        if (event.key === "ArrowRight") return { ...previous, s: clamp01(previous.s + step) };
+        if (event.key === "ArrowUp") return { ...previous, v: clamp01(previous.v + step) };
+        return { ...previous, v: clamp01(previous.v - step) };
+      });
+    },
+    [commitHsva, disabled]
+  );
+
+  const handleEyeDropperClick = React.useCallback(async () => {
+    if (!supportsEyeDropper || disabled) return;
+    const EyeDropperApi = (window as Window & { EyeDropper?: EyeDropperConstructor }).EyeDropper;
+    if (!EyeDropperApi) return;
+
+    try {
+      const picker = new EyeDropperApi();
+      const result = await picker.open();
+      const parsed = parseHexColor(result.sRGBHex);
+      if (!parsed) return;
+      commitHsva(rgbaToHsva(parsed));
+    } catch {
+      // Ignore cancellation or platform errors.
+    }
+  }, [commitHsva, disabled, supportsEyeDropper]);
+
+  const spectrumHue = `hsl(${Math.round(hsva.h)} 100% 50%)`;
+  const alphaGradient = `linear-gradient(90deg, rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, 0) 0%, rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, 1) 100%)`;
+  const hueGradient =
+    "linear-gradient(90deg, rgb(255 0 0) 0%, rgb(255 255 0) 16.66%, rgb(0 255 0) 33.33%, rgb(0 255 255) 50%, rgb(0 0 255) 66.66%, rgb(255 0 255) 83.33%, rgb(255 0 0) 100%)";
+
+  return (
+    <div
+      className={cx("solara-colorpicker", className)}
+      data-size={size}
+      data-disabled={disabled ? "true" : undefined}>
+      {controlsVisible ? (
+        <div className="solara-colorpicker__section solara-colorpicker__section--controls">
+          <div className="solara-colorpicker__controls">
+            {showSpectrum ? (
+              <div
+                ref={spectrumRef}
+                className="solara-colorpicker__spectrum"
+                style={{ ["--colorpicker-spectrum-hue" as const]: spectrumHue } as React.CSSProperties}
+                role="slider"
+                aria-label="Saturation and brightness"
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={Math.round(hsva.s * 100)}
+                aria-valuetext={`Saturation ${Math.round(hsva.s * 100)} percent, brightness ${Math.round(
+                  hsva.v * 100
+                )} percent`}
+                tabIndex={disabled ? -1 : 0}
+                onPointerDown={handleSpectrumPointerDown}
+                onKeyDown={handleSpectrumKeyDown}>
+                <span
+                  className="solara-colorpicker__spectrum-thumb"
+                  style={{
+                    left: `${hsva.s * 100}%`,
+                    top: `${(1 - hsva.v) * 100}%`,
+                  }}
+                />
+              </div>
+            ) : null}
+
+            <div
+              className={cx(
+                "solara-colorpicker__control-row",
+                showEyedropper && "solara-colorpicker__control-row--with-eyedropper"
+              )}>
+              {showEyedropper ? (
+                <div className="solara-colorpicker__eyedropper">
+                  <button
+                    type="button"
+                    className="solara-colorpicker__eyedropper-button"
+                    aria-label="Pick color from screen"
+                    disabled={disabled || !supportsEyeDropper}
+                    onClick={handleEyeDropperClick}>
+                    <EyeDropperIcon />
+                  </button>
+                </div>
+              ) : null}
+
+              <div className="solara-colorpicker__control-stack">
+                {showHueSlider ? (
+                  <div className="solara-colorpicker__slider-row">
+                    <input
+                      type="range"
+                      min={0}
+                      max={360}
+                      step={1}
+                      value={Math.round(hsva.h)}
+                      disabled={disabled}
+                      className="solara-colorpicker__slider solara-colorpicker__slider--hue"
+                      onChange={(event) =>
+                        commitHsva((previous) => ({
+                          ...previous,
+                          h: Number.parseFloat(event.target.value),
+                        }))
+                      }
+                      style={{ ["--colorpicker-slider-gradient" as const]: hueGradient } as React.CSSProperties}
+                      aria-label="Hue"
+                    />
+                  </div>
+                ) : null}
+
+                {showOpacitySlider ? (
+                  <div className="solara-colorpicker__slider-row">
+                    <input
+                      type="range"
+                      min={0}
+                      max={100}
+                      step={1}
+                      value={Math.round(hsva.a * 100)}
+                      disabled={disabled}
+                      className="solara-colorpicker__slider solara-colorpicker__slider--alpha"
+                      onChange={(event) =>
+                        commitHsva((previous) => ({
+                          ...previous,
+                          a: clamp01(Number.parseFloat(event.target.value) / 100),
+                        }))
+                      }
+                      style={{ ["--colorpicker-slider-gradient" as const]: alphaGradient } as React.CSSProperties}
+                      aria-label="Opacity"
+                    />
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {shouldShowValueInput ? (
+        <div className="solara-colorpicker__section solara-colorpicker__section--value">
+          <div className="solara-colorpicker__value-row">
+            {showFormatSelector ? (
+              <div className="solara-colorpicker__value-format">
+                <select
+                  className="solara-colorpicker__format-select"
+                  value={inputFormat}
+                  onChange={(event) => setInputFormat(event.target.value as ColorPickerValueFormat)}
+                  disabled={disabled}
+                  aria-label="Color value type"
+                >
+                  {availableInputFormats.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            ) : null}
+
+            <div className="solara-colorpicker__value-input">
+              <TextField
+                value={valueInput}
+                onChange={handleValueInputChange}
+                onBlur={handleValueInputBlur}
+                placeholder={resolvedValueInputPlaceholder}
+                isDisabled={disabled}
+                size={TEXTFIELD_SIZE_MAP[size]}
+                aria-label={`${inputFormat.toUpperCase()} color value`}
+                fullWidth
+              />
+            </div>
+
+            {showOpacityInput ? (
+              <div className="solara-colorpicker__opacity-input">
+                <TextField
+                  value={opacityInput}
+                  onChange={handleOpacityInputChange}
+                  onBlur={handleOpacityInputBlur}
+                  isDisabled={disabled}
+                  size={TEXTFIELD_SIZE_MAP[size]}
+                  aria-label="Opacity percent"
+                  fullWidth
+                />
+                <span className="solara-colorpicker__percent">%</span>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      <div className="solara-colorpicker__section solara-colorpicker__section--presets">
+        <div className="solara-colorpicker__subhead">Presets</div>
+        <ColorPickerPalette
+          value={currentValue}
+          colors={resolvedPresets}
+          onSelectColor={handleColorSelect}
+          size={size}
+          disabled={disabled}
+          swatchRadius={swatchRadius}
+          swatchContent={swatchContent}
+        />
+      </div>
+    </div>
+  );
+}
+
+function clampHsva(value: HsvaColor): HsvaColor {
+  return {
+    h: wrapHue(value.h),
+    s: clamp01(value.s),
+    v: clamp01(value.v),
+    a: clamp01(value.a),
+  };
+}
+
+export function ColorPicker({
+  trigger,
+  triggerLabel = DEFAULT_TRIGGER_LABEL,
+  isOpen,
+  defaultOpen,
+  onOpenChange,
+  align = "start",
+  side = "bottom",
+  closeOnSelect = true,
+  menuWidth,
+  menuHeight,
+  menuProps,
+  contentAriaLabel = "Color picker",
+  wrapperClassName,
+  ...contentProps
+}: ColorPickerProps) {
+  const [open, setOpen] = useControllableOpenState({
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+  });
+
+  const triggerColor = contentProps.value ?? DEFAULT_COLOR;
+
+  const defaultTrigger = (
+    <ColorPreview
+      color={triggerColor}
+      size={contentProps.size}
+      disabled={contentProps.disabled}
+      label={triggerLabel}
+      className="solara-colorpicker__trigger"
+    />
+  );
+
+  return (
+    <div className={cx("solara-colorpicker__wrapper", wrapperClassName)}>
+      <MenuDropdown
+        trigger={trigger ?? defaultTrigger}
+        align={align}
+        side={side}
+        isOpen={open}
+        onOpenChange={setOpen}
+        closeOnSelect={false}
+        contentAriaLabel={contentAriaLabel}>
+        <Menu
+          {...menuProps}
+          style={{
+            ...(menuWidth ? { ["--colorpicker-menu-width" as const]: menuWidth } : null),
+            ...(menuHeight ? { ["--colorpicker-menu-height" as const]: menuHeight } : null),
+            ...(menuHeight ? { ["--colorpicker-presets-max-height" as const]: "none" } : null),
+            ...menuProps?.style,
+          } as React.CSSProperties}
+          className={cx("solara-colorpicker__menu", menuProps?.className)}>
+          <ColorPickerContent
+            {...contentProps}
+            onSelectColor={(color) => {
+              contentProps.onSelectColor?.(color);
+              if (closeOnSelect) setOpen(false);
+            }}
+          />
+        </Menu>
+      </MenuDropdown>
+    </div>
+  );
+}