Color Picker

<!-- Color Picker: Swatch + Hex Input -->
<div class="color-picker" id="color-picker">
  <label class="color-picker__label" id="cp-label">Brand Color</label>

  <div class="color-picker__trigger-row">
    <button
      type="button"
      class="color-picker__swatch-btn"
      id="cp-trigger"
      aria-label="Select brand color. Current: #6366F1"
      aria-haspopup="true"
      aria-expanded="false"
      style="background-color: #6366F1;"
    ></button>
    <input
      type="text"
      id="cp-hex-input"
      class="color-picker__hex-input"
      value="#6366F1"
      maxlength="7"
      aria-labelledby="cp-label"
      spellcheck="false"
    />
  </div>

  <!-- Swatches (shown inline or in popover) -->
  <div class="color-picker__swatches" role="listbox" aria-label="Preset colors" id="cp-swatches">
    <button role="option" aria-label="Red, #EF4444" aria-selected="false" class="color-picker__sw" style="background:#EF4444;" data-color="#EF4444"></button>
    <button role="option" aria-label="Orange, #F97316" aria-selected="false" class="color-picker__sw" style="background:#F97316;" data-color="#F97316"></button>
    <button role="option" aria-label="Yellow, #EAB308" aria-selected="false" class="color-picker__sw" style="background:#EAB308;" data-color="#EAB308"></button>
    <button role="option" aria-label="Green, #22C55E" aria-selected="false" class="color-picker__sw" style="background:#22C55E;" data-color="#22C55E"></button>
    <button role="option" aria-label="Blue, #3B82F6" aria-selected="false" class="color-picker__sw" style="background:#3B82F6;" data-color="#3B82F6"></button>
    <button role="option" aria-label="Indigo, #6366F1" aria-selected="true" class="color-picker__sw color-picker__sw--selected" style="background:#6366F1;" data-color="#6366F1"></button>
    <button role="option" aria-label="Purple, #A855F7" aria-selected="false" class="color-picker__sw" style="background:#A855F7;" data-color="#A855F7"></button>
    <button role="option" aria-label="Pink, #EC4899" aria-selected="false" class="color-picker__sw" style="background:#EC4899;" data-color="#EC4899"></button>
  </div>

  <div id="cp-status" aria-live="polite" class="sr-only"></div>
</div>

<style>
.color-picker__label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
  color: var(--color-neutral-900);
}

.color-picker__trigger-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.color-picker__swatch-btn {
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-neutral-300);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 100ms ease;
}

.color-picker__swatch-btn:hover {
  transform: scale(1.05);
}

.color-picker__swatch-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.color-picker__hex-input {
  width: 90px;
  height: 36px;
  padding: 0 0.5rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm, 4px);
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--color-neutral-900);
  text-transform: uppercase;
}

.color-picker__hex-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.color-picker__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.color-picker__sw {
  width: 28px;
  height: 28px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  position: relative;
  transition: transform 100ms ease;
}

.color-picker__sw:hover {
  transform: scale(1.15);
}

.color-picker__sw:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.color-picker__sw--selected {
  border-color: var(--color-neutral-900);
}

.color-picker__sw--selected::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

<script>
const swatches = document.querySelectorAll(".color-picker__sw");
const hexInput = document.getElementById("cp-hex-input");
const trigger = document.getElementById("cp-trigger");
const status = document.getElementById("cp-status");

function selectColor(hex) {
  trigger.style.backgroundColor = hex;
  trigger.setAttribute("aria-label", "Select brand color. Current: " + hex);
  hexInput.value = hex;
  swatches.forEach((sw) => {
    const match = sw.dataset.color === hex;
    sw.classList.toggle("color-picker__sw--selected", match);
    sw.setAttribute("aria-selected", String(match));
  });
  status.textContent = "Selected: " + hex;
}

swatches.forEach((sw) => {
  sw.addEventListener("click", () => selectColor(sw.dataset.color));
});

hexInput.addEventListener("change", () => {
  const val = hexInput.value.trim();
  if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
    selectColor(val.toUpperCase());
  }
});
</script>

import React, { useState, useCallback, useId } from "react";

interface ColorPickerProps {
  value?: string;
  defaultValue?: string;
  onChange?: (color: string) => void;
  swatches?: string[];
  label: string;
  disabled?: boolean;
  showInput?: boolean;
}

const DEFAULT_SWATCHES = [
  "#EF4444", "#F97316", "#EAB308", "#22C55E",
  "#3B82F6", "#6366F1", "#A855F7", "#EC4899",
  "#14B8A6", "#64748B", "#1E293B", "#FFFFFF",
];

export function ColorPicker({
  value: controlledValue,
  defaultValue = "#6366F1",
  onChange,
  swatches = DEFAULT_SWATCHES,
  label,
  disabled = false,
  showInput = true,
}: ColorPickerProps) {
  const id = useId();
  const [internal, setInternal] = useState(defaultValue);
  const color = controlledValue ?? internal;
  const [hexInput, setHexInput] = useState(color);
  const [announcement, setAnnouncement] = useState("");

  const selectColor = useCallback(
    (hex: string) => {
      const upper = hex.toUpperCase();
      setInternal(upper);
      setHexInput(upper);
      onChange?.(upper);
    },
    [onChange]
  );

  const handleInputBlur = () => {
    if (/^#[0-9A-Fa-f]{6}$/.test(hexInput)) {
      selectColor(hexInput);
      setAnnouncement(`Color set to ${hexInput.toUpperCase()}`);
    } else if (/^#[0-9A-Fa-f]{3}$/.test(hexInput)) {
      const expanded = "#" + hexInput[1] + hexInput[1] + hexInput[2] + hexInput[2] + hexInput[3] + hexInput[3];
      selectColor(expanded);
      setAnnouncement(`Color set to ${expanded}`);
    } else {
      setHexInput(color);
    }
  };

  const handleSwatchClick = (hex: string) => {
    selectColor(hex);
    setAnnouncement(`Selected ${hex}`);
  };

  const isLight = (hex: string): boolean => {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return (r * 299 + g * 587 + b * 114) / 1000 > 186;
  };

  return (
    <div style={{ opacity: disabled ? 0.5 : 1, pointerEvents: disabled ? "none" : undefined }}>
      <label id={`${id}-label`} style={{ display: "block", fontWeight: 600, fontSize: "0.875rem", marginBottom: 4 }}>
        {label}
      </label>

      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.75rem" }}>
        <div
          aria-label={`Current color: ${color}`}
          style={{
            width: 36,
            height: 36,
            borderRadius: "var(--radius-md, 8px)",
            border: "2px solid var(--color-neutral-300)",
            backgroundColor: color,
            flexShrink: 0,
          }}
        />
        {showInput && (
          <input
            type="text"
            value={hexInput}
            onChange={(e) => setHexInput(e.target.value)}
            onBlur={handleInputBlur}
            onKeyDown={(e) => e.key === "Enter" && handleInputBlur()}
            aria-labelledby={`${id}-label`}
            maxLength={7}
            spellCheck={false}
            style={{
              width: 90,
              height: 36,
              padding: "0 0.5rem",
              border: "1px solid var(--color-neutral-300)",
              borderRadius: "var(--radius-sm, 4px)",
              fontFamily: "monospace",
              fontSize: "0.875rem",
              textTransform: "uppercase",
            }}
          />
        )}
      </div>

      {swatches.length > 0 && (
        <div role="listbox" aria-label="Preset colors" style={{ display: "flex", flexWrap: "wrap", gap: "0.375rem" }}>
          {swatches.map((hex) => (
            <button
              key={hex}
              type="button"
              role="option"
              aria-label={`${hex}`}
              aria-selected={color === hex.toUpperCase()}
              onClick={() => handleSwatchClick(hex)}
              style={{
                width: 28,
                height: 28,
                backgroundColor: hex,
                border: color === hex.toUpperCase() ? "2px solid var(--color-neutral-900)" : "2px solid transparent",
                borderRadius: "var(--radius-sm, 4px)",
                cursor: "pointer",
                position: "relative",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              {color === hex.toUpperCase() && (
                <span style={{ color: isLight(hex) ? "#000" : "#fff", fontSize: 14, textShadow: "0 1px 2px rgba(0,0,0,0.3)" }}>✓</span>
              )}
            </button>
          ))}
        </div>
      )}

      <div aria-live="polite" aria-atomic="true" style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)" }}>
        {announcement}
      </div>
    </div>
  );
}