@viax.io/uxm 4.36.0

package/dist/ui/color-input/color-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/color-input/color-input.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n} from 'react';\n\nimport { cn } from '@/helpers';\nimport { hslToRgb, rgbToHsl } from '@/lib/contrast';\n\nimport { FieldError } from '../field-error';\nimport { Icon } from '../icon';\nimport { Select } from '../input';\nimport { Popover, type PopoverPlacement } from '../popover';\n\nimport {\n  formatColor,\n  hsvaToRgba,\n  parseColorString,\n  rgbaToHsva,\n  type ColorFormat,\n  type HSVA,\n  type RGBA,\n} from './color-model';\n\nexport type { ColorFormat } from './color-model';\n\nconst DEFAULT_FORMATS: ColorFormat[] = ['hex', 'rgb', 'rgba', 'hsl'];\nconst FORMAT_LABELS: Record<ColorFormat, string> = {\n  hex: 'HEX',\n  rgb: 'RGB',\n  rgba: 'RGBA',\n  hsl: 'HSL',\n};\n\nconst clamp = (n: number, min: number, max: number): number => Math.min(max, Math.max(min, n));\n\n/**\n * Minimal typing for the (Chromium-only) EyeDropper API — not yet in the\n * standard lib.dom lib, so we declare just the surface we call.\n */\ninterface EyeDropperResult {\n  sRGBHex: string;\n}\ninterface EyeDropperInstance {\n  open: (options?: { signal?: AbortSignal }) => Promise<EyeDropperResult>;\n}\ntype EyeDropperConstructor = new () => EyeDropperInstance;\n\nfunction getEyeDropper(): EyeDropperConstructor | null {\n  if (typeof window === 'undefined') return null;\n  return (window as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper ?? null;\n}\n\n/** One numeric channel field (R/G/B/A or H/S/L). Keeps an internal draft while\n *  focused so partial edits don't fight the live value, commits valid numbers\n *  immediately (clamped), and reverts the draft on blur or Escape. */\nfunction ChannelInput({\n  label,\n  short,\n  value,\n  min,\n  max,\n  disabled,\n  onCommit,\n  onEnter,\n  onEsc,\n}: {\n  label: string;\n  short: string;\n  value: number;\n  min: number;\n  max: number;\n  disabled?: boolean;\n  onCommit: (n: number) => void;\n  onEnter: () => void;\n  onEsc: () => void;\n}) {\n  const [draft, setDraft] = useState<string | null>(null);\n  const shown = draft ?? String(value);\n  return (\n    <label className=\"uxm-color-input__channel\">\n      <input\n        type=\"text\"\n        inputMode=\"numeric\"\n        className=\"uxm-color-input__channel-field\"\n        aria-label={label}\n        value={shown}\n        disabled={disabled}\n        spellCheck={false}\n        autoComplete=\"off\"\n        onChange={(e) => {\n          const raw = e.target.value;\n          setDraft(raw);\n          const n = Number(raw);\n          if (raw.trim() !== '' && !Number.isNaN(n)) onCommit(clamp(n, min, max));\n        }}\n        onFocus={() => setDraft(String(value))}\n        onBlur={() => setDraft(null)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            const n = Number(draft ?? value);\n            if (!Number.isNaN(n)) onCommit(clamp(n, min, max));\n            onEnter();\n          } else if (e.key === 'Escape') {\n            setDraft(null);\n            onEsc();\n          }\n        }}\n      />\n      <span className=\"uxm-color-input__channel-label\" aria-hidden=\"true\">{short}</span>\n    </label>\n  );\n}\n\n/**\n * Accessible names for the picker's unlabelled controls. Grouped into one\n * object rather than seven flat props: none of them is individually\n * interesting, a consumer localising the picker sets ALL of them at once from\n * its own dictionary, and one object keeps that a single spread instead of\n * seven prop lines. Every field is optional and falls back to the English\n * default.\n */\nexport interface ColorInputLabels {\n  /** Saturation / brightness area. Default `\"Color\"`. */\n  area?: string;\n  /**\n   * Spoken value of the 2-D area. A single `aria-valuenow` can only carry\n   * one axis, so this is what a screen-reader user actually hears.\n   * Default `` `Saturation ${s}%, Brightness ${v}%` ``.\n   */\n  areaValueText?: (saturation: number, brightness: number) => string;\n  /** Hue slider. Default `\"Hue\"`. */\n  hue?: string;\n  /** Opacity slider. Default `\"Opacity\"`. */\n  alpha?: string;\n  /** Screen eyedropper button. Default `\"Pick color from screen\"`. */\n  eyedropper?: string;\n  /** Representation select. Default `\"Color format\"`. */\n  format?: string;\n  /** Hex text field. Default `\"Hex color value\"`. */\n  hex?: string;\n}\n\nconst DEFAULT_LABELS = {\n  area: 'Color',\n  areaValueText: (s: number, v: number) => `Saturation ${s}%, Brightness ${v}%`,\n  hue: 'Hue',\n  alpha: 'Opacity',\n  eyedropper: 'Pick color from screen',\n  format: 'Color format',\n  hex: 'Hex color value',\n} satisfies Required<ColorInputLabels>;\n\nexport interface ColorInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Accessible names for the unlabelled controls. Merged over the English defaults. */\n  labels?: ColorInputLabels;\n  /** Current value (controlled) — any supported color string. */\n  value?: string;\n  /** Initial value for uncontrolled usage. Defaults to `#000000`. */\n  defaultValue?: string;\n  /** Called with the color formatted per `outputFormat` on every commit. */\n  onChange?: (color: string) => void;\n  /** Formats offered in the representation select. Defaults to all four. */\n  formats?: ColorFormat[];\n  /** Format of the value passed to `onChange` / `onEnter`. Defaults to `hex`. */\n  outputFormat?: ColorFormat;\n  /** Enter in a value field commits it and fires this with the current color. */\n  onEnter?: (color: string) => void;\n  /** Escape reverts the field draft to the last committed value and fires this. */\n  onEsc?: () => void;\n  /** Show the opacity slider. Defaults to true. */\n  alpha?: boolean;\n  /** Show the screen eyedropper button (Chromium only; auto-hidden elsewhere). Defaults to true. */\n  eyedropper?: boolean;\n  /** Disable all interaction. */\n  disabled?: boolean;\n  /** Non-empty string renders the error state and message below the panel. */\n  error?: string;\n}\n\n/**\n * Full inline color picker: a saturation/brightness area, hue and opacity\n * sliders, a swatch, an optional screen eyedropper, a format select and a\n * per-format value editor (one hex text field, or R/G/B(/A) or H/S/L numeric\n * fields). The working model is HSVA (hue and alpha are kept even when\n * saturation/value hit 0, where RGB→HSV can't recover them). Switching format\n * re-derives the fields from the current color — that's the conversion.\n */\nexport function ColorInput({\n  value,\n  defaultValue,\n  onChange,\n  formats,\n  outputFormat = 'hex',\n  onEnter,\n  onEsc,\n  alpha = true,\n  eyedropper = true,\n  disabled = false,\n  error,\n  labels,\n  className,\n  style,\n  ...rest\n}: ColorInputProps) {\n  const isControlled = value !== undefined;\n  const l = { ...DEFAULT_LABELS, ...labels };\n\n  const [hsva, setHsva] = useState<HSVA>(() => {\n    const parsed = parseColorString((isControlled ? value : defaultValue) ?? '#000000');\n    return parsed ? rgbaToHsva(parsed) : { h: 0, s: 0, v: 0, a: 1 };\n  });\n\n  const availableFormats = formats && formats.length > 0 ? formats : DEFAULT_FORMATS;\n  // Visible representation, switched by the in-component select. Independent of\n  // `outputFormat`, which fixes only what `onChange` returns — the field can\n  // display HSL while `onChange` still emits hex. Defaults to hex when offered.\n  const [displayFormat, setDisplayFormat] = useState<ColorFormat>(() =>\n    availableFormats.includes('hex') ? 'hex' : availableFormats[0],\n  );\n\n  const [hexDraft, setHexDraft] = useState<string | null>(null);\n  const [hexInvalid, setHexInvalid] = useState(false);\n\n  const currentRgba: RGBA = hsvaToRgba(hsva);\n  const resolvedOutput = outputFormat;\n\n  // The exact string we last emitted via `onChange`. Lets the controlled sync\n  // below tell our own echo apart from a genuine external change without\n  // comparing colors — which matters when `outputFormat` is lossy (e.g. `rgb`\n  // drops alpha): the emitted string round-trips to a different color, but\n  // it's still our echo and must not clobber the hue/alpha we hold.\n  const lastEmittedRef = useRef<string | null>(isControlled ? (value ?? null) : null);\n\n  // Controlled sync: adopt an external `value` only when it isn't the string we\n  // just emitted. `hsva` is deliberately not a dependency — the ref, not the\n  // working model, is the comparison baseline.\n  useEffect(() => {\n    if (!isControlled) return;\n    if (value === lastEmittedRef.current) return;\n    const incoming = parseColorString(value ?? '');\n    if (!incoming) return;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- controlled/uncontrolled sync: adopt a genuine external value change into the working HSVA model; the echo guard above skips our own onChange round-trips\n    setHsva(rgbaToHsva(incoming));\n  }, [value, isControlled]);\n\n  const emit = (next: HSVA, opts?: { enter?: boolean }) => {\n    setHsva(next);\n    const out = formatColor(hsvaToRgba(next), resolvedOutput);\n    lastEmittedRef.current = out;\n    onChange?.(out);\n    if (opts?.enter) onEnter?.(out);\n  };\n\n  // ── Saturation / brightness area ──\n  const satRef = useRef<HTMLDivElement>(null);\n  const updateSaturation = (clientX: number, clientY: number) => {\n    const el = satRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    const s = clamp((clientX - rect.left) / rect.width, 0, 1) * 100;\n    const v = (1 - clamp((clientY - rect.top) / rect.height, 0, 1)) * 100;\n    emit({ ...hsva, s, v });\n  };\n  const handleSatPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    e.currentTarget.setPointerCapture(e.pointerId);\n    updateSaturation(e.clientX, e.clientY);\n  };\n  const handleSatPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (disabled || e.buttons !== 1) return;\n    updateSaturation(e.clientX, e.clientY);\n  };\n  const handleSatKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const step = e.shiftKey ? 10 : 1;\n    let { s, v } = hsva;\n    switch (e.key) {\n      case 'ArrowRight': s = clamp(s + step, 0, 100); break;\n      case 'ArrowLeft': s = clamp(s - step, 0, 100); break;\n      case 'ArrowUp': v = clamp(v + step, 0, 100); break;\n      case 'ArrowDown': v = clamp(v - step, 0, 100); break;\n      default: return;\n    }\n    e.preventDefault();\n    emit({ ...hsva, s, v });\n  };\n\n  // ── Hue track ──\n  const hueRef = useRef<HTMLDivElement>(null);\n  const updateHue = (clientX: number) => {\n    const el = hueRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    emit({ ...hsva, h: clamp((clientX - rect.left) / rect.width, 0, 1) * 360 });\n  };\n  const handleHuePointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    e.currentTarget.setPointerCapture(e.pointerId);\n    updateHue(e.clientX);\n  };\n  const handleHuePointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (disabled || e.buttons !== 1) return;\n    updateHue(e.clientX);\n  };\n  const handleHueKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const step = e.shiftKey ? 10 : 1;\n    let h = hsva.h;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') h = clamp(h + step, 0, 360);\n    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') h = clamp(h - step, 0, 360);\n    else if (e.key === 'Home') h = 0;\n    else if (e.key === 'End') h = 360;\n    else return;\n    e.preventDefault();\n    emit({ ...hsva, h });\n  };\n\n  // ── Alpha track ──\n  const alphaRef = useRef<HTMLDivElement>(null);\n  const updateAlpha = (clientX: number) => {\n    const el = alphaRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    emit({ ...hsva, a: clamp((clientX - rect.left) / rect.width, 0, 1) });\n  };\n  const handleAlphaPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    e.currentTarget.setPointerCapture(e.pointerId);\n    updateAlpha(e.clientX);\n  };\n  const handleAlphaPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (disabled || e.buttons !== 1) return;\n    updateAlpha(e.clientX);\n  };\n  const handleAlphaKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const step = e.shiftKey ? 0.1 : 0.01;\n    let a = hsva.a;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') a = clamp(a + step, 0, 1);\n    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') a = clamp(a - step, 0, 1);\n    else if (e.key === 'Home') a = 0;\n    else if (e.key === 'End') a = 1;\n    else return;\n    e.preventDefault();\n    emit({ ...hsva, a });\n  };\n\n  // ── Value editor: shared Enter / Escape for every field type ──\n  const emitEnter = () => onEnter?.(formatColor(currentRgba, resolvedOutput));\n  const emitEsc = () => onEsc?.();\n\n  // Hex field (single text input) — draft commits on Enter / blur.\n  const hexShown = hexDraft ?? formatColor(currentRgba, 'hex');\n  const commitHex = (): boolean => {\n    if (hexDraft === null) return true;\n    const parsed = parseColorString(hexDraft);\n    if (!parsed) {\n      setHexInvalid(true);\n      return false;\n    }\n    setHexInvalid(false);\n    emit(rgbaToHsva(parsed));\n    return true;\n  };\n\n  // RGB(A) channel commits — reconstruct RGBA, keep alpha unless it's the edit.\n  const setRgbChannel = (patch: Partial<RGBA>) => emit(rgbaToHsva({ ...currentRgba, ...patch }));\n\n  // HSL channel commits — reconstruct via HSL→RGB, then re-derive HSVA but keep\n  // the edited hue so H stays stable even at S=0 / L=0 (where hue is ambiguous).\n  const hslNow = rgbToHsl(currentRgba);\n  const commitHsl = (patch: { h?: number; s?: number; l?: number }) => {\n    const next = { h: hsva.h, s: hslNow.s, l: hslNow.l, ...patch };\n    const rgb = hslToRgb(next);\n    const hsvaNext = rgbaToHsva({ ...rgb, a: currentRgba.a });\n    emit({ ...hsvaNext, h: next.h });\n  };\n\n  // ── Eyedropper ──\n  const EyeDropperCtor = getEyeDropper();\n  const showEyedropper = eyedropper && EyeDropperCtor !== null;\n  const handleEyeDropper = async () => {\n    if (!EyeDropperCtor || disabled) return;\n    try {\n      const result = await new EyeDropperCtor().open();\n      const parsed = parseColorString(result.sRGBHex);\n      if (parsed) emit(rgbaToHsva({ ...parsed, a: hsva.a }));\n    } catch {\n      // User dismissed the eyedropper — nothing to commit.\n    }\n  };\n\n  const showFormat = availableFormats.length > 1;\n\n  // Dynamic, non-theming CSS variables: the current hue drives the saturation\n  // gradient, the solid (opaque) color drives the alpha-track gradient, and the\n  // full value (with alpha) fills the swatch. All geometry of the color space,\n  // not themable design values.\n  const cssVars = {\n    '--uxm-color-input-hue': hsva.h,\n    '--uxm-color-input-solid': `rgb(${Math.round(currentRgba.r)}, ${Math.round(currentRgba.g)}, ${Math.round(currentRgba.b)})`,\n    '--uxm-color-input-value': formatColor(currentRgba, 'rgba'),\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <div\n      className={cn(\n        'uxm-color-input',\n        disabled && 'uxm-color-input--disabled',\n        error && 'uxm-color-input--error',\n        !alpha && 'uxm-color-input--no-alpha',\n        className,\n      )}\n      style={cssVars}\n      {...rest}\n    >\n      <div\n        ref={satRef}\n        className=\"uxm-color-input__saturation\"\n        role=\"slider\"\n        aria-label={l.area}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={Math.round(hsva.s)}\n        aria-valuetext={l.areaValueText(Math.round(hsva.s), Math.round(hsva.v))}\n        aria-disabled={disabled || undefined}\n        tabIndex={disabled ? -1 : 0}\n        onPointerDown={handleSatPointerDown}\n        onPointerMove={handleSatPointerMove}\n        onKeyDown={handleSatKeyDown}\n      >\n        <span\n          className=\"uxm-color-input__saturation-thumb\"\n          style={{ left: `${hsva.s}%`, top: `${100 - hsva.v}%` }}\n        />\n      </div>\n\n      <div className=\"uxm-color-input__body\">\n        <div className=\"uxm-color-input__sliders\">\n          <div\n            ref={hueRef}\n            className=\"uxm-color-input__hue\"\n            role=\"slider\"\n            aria-label={l.hue}\n            aria-valuemin={0}\n            aria-valuemax={360}\n            aria-valuenow={Math.round(hsva.h)}\n            aria-disabled={disabled || undefined}\n            tabIndex={disabled ? -1 : 0}\n            onPointerDown={handleHuePointerDown}\n            onPointerMove={handleHuePointerMove}\n            onKeyDown={handleHueKeyDown}\n          >\n            <span className=\"uxm-color-input__track-thumb\" style={{ left: `${(hsva.h / 360) * 100}%` }} />\n          </div>\n          {alpha && (\n            <div\n              ref={alphaRef}\n              className=\"uxm-color-input__alpha\"\n              role=\"slider\"\n              aria-label={l.alpha}\n              aria-valuemin={0}\n              aria-valuemax={100}\n              aria-valuenow={Math.round(hsva.a * 100)}\n              aria-disabled={disabled || undefined}\n              tabIndex={disabled ? -1 : 0}\n              onPointerDown={handleAlphaPointerDown}\n              onPointerMove={handleAlphaPointerMove}\n              onKeyDown={handleAlphaKeyDown}\n            >\n              <span className=\"uxm-color-input__track-thumb\" style={{ left: `${hsva.a * 100}%` }} />\n            </div>\n          )}\n        </div>\n\n        <span className=\"uxm-color-input__swatch\" aria-hidden=\"true\" />\n\n        {showEyedropper && (\n          <button\n            type=\"button\"\n            className=\"uxm-color-input__eyedropper\"\n            aria-label={l.eyedropper}\n            disabled={disabled}\n            onClick={handleEyeDropper}\n          >\n            <Icon glyph=\"eyedropper\" size={16} />\n          </button>\n        )}\n      </div>\n\n      <div className=\"uxm-color-input__controls\">\n        {showFormat && (\n          <Select\n            className=\"uxm-color-input__format\"\n            aria-label={l.format}\n            value={displayFormat}\n            disabled={disabled}\n            onChange={(e) => {\n              setDisplayFormat(e.target.value as ColorFormat);\n              setHexDraft(null);\n              setHexInvalid(false);\n            }}\n          >\n            {availableFormats.map((f) => (\n              <option key={f} value={f}>\n                {FORMAT_LABELS[f]}\n              </option>\n            ))}\n          </Select>\n        )}\n\n        {displayFormat === 'hex' ? (\n          <input\n            type=\"text\"\n            className={cn('uxm-color-input__field', hexInvalid && 'uxm-color-input__field--invalid')}\n            value={hexShown}\n            disabled={disabled}\n            aria-label={l.hex}\n            aria-invalid={hexInvalid || undefined}\n            spellCheck={false}\n            autoComplete=\"off\"\n            onChange={(e) => setHexDraft(e.target.value)}\n            onFocus={() => {\n              setHexDraft(formatColor(currentRgba, 'hex'));\n              setHexInvalid(false);\n            }}\n            onBlur={() => {\n              commitHex();\n              setHexDraft(null);\n            }}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                if (commitHex()) emitEnter();\n              } else if (e.key === 'Escape') {\n                setHexDraft(null);\n                setHexInvalid(false);\n                emitEsc();\n              }\n            }}\n          />\n        ) : (\n          <div className=\"uxm-color-input__channels\">\n            {(displayFormat === 'rgb' || displayFormat === 'rgba') && (\n              <>\n                <ChannelInput label=\"Red\" short=\"R\" value={Math.round(currentRgba.r)} min={0} max={255} disabled={disabled} onCommit={(n) => setRgbChannel({ r: n })} onEnter={emitEnter} onEsc={emitEsc} />\n                <ChannelInput label=\"Green\" short=\"G\" value={Math.round(currentRgba.g)} min={0} max={255} disabled={disabled} onCommit={(n) => setRgbChannel({ g: n })} onEnter={emitEnter} onEsc={emitEsc} />\n                <ChannelInput label=\"Blue\" short=\"B\" value={Math.round(currentRgba.b)} min={0} max={255} disabled={disabled} onCommit={(n) => setRgbChannel({ b: n })} onEnter={emitEnter} onEsc={emitEsc} />\n                {displayFormat === 'rgba' && (\n                  <ChannelInput label=\"Alpha\" short=\"A\" value={Math.round(currentRgba.a * 100)} min={0} max={100} disabled={disabled} onCommit={(n) => emit({ ...hsva, a: n / 100 })} onEnter={emitEnter} onEsc={emitEsc} />\n                )}\n              </>\n            )}\n            {displayFormat === 'hsl' && (\n              <>\n                <ChannelInput label=\"Hue\" short=\"H\" value={Math.round(hsva.h)} min={0} max={360} disabled={disabled} onCommit={(n) => commitHsl({ h: n })} onEnter={emitEnter} onEsc={emitEsc} />\n                <ChannelInput label=\"Saturation\" short=\"S\" value={Math.round(hslNow.s)} min={0} max={100} disabled={disabled} onCommit={(n) => commitHsl({ s: n })} onEnter={emitEnter} onEsc={emitEsc} />\n                <ChannelInput label=\"Lightness\" short=\"L\" value={Math.round(hslNow.l)} min={0} max={100} disabled={disabled} onCommit={(n) => commitHsl({ l: n })} onEnter={emitEnter} onEsc={emitEsc} />\n              </>\n            )}\n          </div>\n        )}\n      </div>\n\n      {error && <FieldError className=\"uxm-color-input__error-message\">{error}</FieldError>}\n    </div>\n  );\n}\n// Static marker so FormField only forwards its `error` prop into children\n// that accept one (avoids React unknown-prop warnings on non-input children).\nColorInput.hasError = true;\n\nexport interface ColorInputPopoverProps extends ColorInputProps {\n  /** Popover open state (controlled). Pair with `onOpenChange`. */\n  open?: boolean;\n  /** Initial open state for uncontrolled usage. Defaults to false. */\n  defaultOpen?: boolean;\n  /** Called when the popover requests open/close. */\n  onOpenChange?: (open: boolean) => void;\n  /** Preferred popover placement. Defaults to `bottom-start`. */\n  placement?: PopoverPlacement;\n  /** Accessible name for the trigger swatch. Defaults to `Choose color`. */\n  triggerLabel?: string;\n}\n\n/**\n * Compact swatch trigger that opens {@link ColorInput} in a popover. Enter and\n * Escape inside the panel additionally close the popover (Enter after a commit,\n * Escape after reverting the draft); `Popover`'s own Escape/outside-click\n * dismissal covers the rest.\n */\nexport function ColorInputPopover({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  placement = 'bottom-start',\n  triggerLabel = 'Choose color',\n  value,\n  defaultValue,\n  onChange,\n  onEnter,\n  onEsc,\n  formats,\n  outputFormat = 'hex',\n  alpha,\n  eyedropper,\n  disabled,\n  error,\n  className,\n  style,\n  ...rest\n}: ColorInputPopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const isOpenControlled = open !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isOpen = isOpenControlled ? open : uncontrolledOpen;\n  const setOpen = (next: boolean) => {\n    if (!isOpenControlled) setUncontrolledOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const isColorControlled = value !== undefined;\n  const [internalColor, setInternalColor] = useState(defaultValue ?? '#000000');\n  const currentColor = isColorControlled ? value : internalColor;\n  const handleChange = (color: string) => {\n    if (!isColorControlled) setInternalColor(color);\n    onChange?.(color);\n  };\n\n  return (\n    <>\n      <button\n        // rest carries the shared HTMLAttributes<HTMLDivElement> passthrough\n        // (id, data-*, aria-*, title, …); its event-handler generics are\n        // div-typed but structurally identical on a button at runtime.\n        {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}\n        ref={triggerRef}\n        type=\"button\"\n        className={cn('uxm-color-input-popover__trigger', className)}\n        aria-haspopup=\"dialog\"\n        aria-expanded={isOpen}\n        aria-label={`${triggerLabel}: ${currentColor}`}\n        disabled={disabled}\n        style={{ '--uxm-color-input-value': currentColor, ...style } as CSSProperties}\n        onClick={() => setOpen(!isOpen)}\n      />\n      <Popover\n        open={isOpen}\n        onOpenChange={setOpen}\n        anchor={triggerRef}\n        placement={placement}\n        role=\"dialog\"\n        aria-label={triggerLabel}\n        className=\"uxm-color-input-popover__panel\"\n      >\n        <ColorInput\n          value={currentColor}\n          onChange={handleChange}\n          onEnter={(color) => {\n            onEnter?.(color);\n            setOpen(false);\n          }}\n          onEsc={() => {\n            onEsc?.();\n            setOpen(false);\n          }}\n          formats={formats}\n          outputFormat={outputFormat}\n          alpha={alpha}\n          eyedropper={eyedropper}\n          error={error}\n        />\n      </Popover>\n    </>\n  );\n}\nColorInputPopover.hasError = true;\n"],"mappings":"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","names":[]}

package/dist/ui/color-input/color-input.css

@@ -0,0 +1,326 @@
+@charset "UTF-8";
+/* ── Color Input ──
+   Inline color picker: saturation/brightness area, hue + opacity tracks, a
+   swatch, an eyedropper button, a format select and a per-format value editor
+   (one hex field, or R/G/B(/A) or H/S/L numeric fields). Themable chrome
+   (surface, border, radius, focus ring, fields) reads `--uxm-color-input-*`
+   vars with token fallbacks, matching the input family.
+
+   Exception to token-first (Constitution I): the picker gradients are the
+   geometry of the color space itself, not themable design values — pure white
+   → hue on one axis, transparent → black on the other, the hue rainbow, and
+   the alpha checkerboard. Those literals are intrinsic to how the control
+   encodes a color and have no dark-mode variant. The dynamic hue / solid /
+   value inputs arrive as `--uxm-color-input-hue|solid|value` from the TSX. */
+.uxm-color-input {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: var(--uxm-color-input-width, 260px);
+  font-family: inherit;
+  color: var(--uxm-color-input-color, var(--color-text));
+}
+
+/* Saturation × brightness plane for the current hue. */
+.uxm-color-input__saturation {
+  --_hue: hsl(var(--uxm-color-input-hue, 0), 100%, 50%);
+  position: relative;
+  height: var(--uxm-color-input-area-height, 160px);
+  border-radius: var(--uxm-color-input-border-radius, 8px);
+  cursor: crosshair;
+  touch-action: none;
+  outline: none;
+  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--_hue));
+}
+
+.uxm-color-input__saturation:focus-visible {
+  outline: 2px solid var(--uxm-color-input-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-color-input__saturation-thumb {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.uxm-color-input__body {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.uxm-color-input__sliders {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Hue + opacity tracks share thumb chrome and pointer geometry. */
+.uxm-color-input__hue,
+.uxm-color-input__alpha {
+  position: relative;
+  height: 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  touch-action: none;
+  outline: none;
+}
+
+.uxm-color-input__hue:focus-visible,
+.uxm-color-input__alpha:focus-visible {
+  outline: 2px solid var(--uxm-color-input-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-color-input__hue {
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+}
+
+.uxm-color-input__alpha {
+  background-color: #fff;
+  background-image: linear-gradient(to right, transparent, var(--uxm-color-input-solid, #000)), linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%), linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%);
+  background-size: 100% 100%, 8px 8px, 8px 8px;
+  background-position: 0 0, 0 0, 4px 4px;
+}
+
+.uxm-color-input__track-thumb {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+/* Current-color swatch over a checkerboard so translucency reads. */
+.uxm-color-input__swatch {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--uxm-color-input-border-color, var(--color-border));
+  border-radius: var(--uxm-color-input-border-radius, 8px);
+  background-color: #fff;
+  background-image: linear-gradient(var(--uxm-color-input-value, #000), var(--uxm-color-input-value, #000)), linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%), linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%);
+  background-size: 100% 100%, 8px 8px, 8px 8px;
+  background-position: 0 0, 0 0, 4px 4px;
+}
+
+.uxm-color-input__eyedropper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  color: var(--uxm-color-input-color, var(--color-text));
+  background-color: var(--uxm-color-input-bg, var(--color-card));
+  border: 1px solid var(--uxm-color-input-border-color, var(--color-border));
+  border-radius: var(--uxm-color-input-border-radius, 8px);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.uxm-color-input__eyedropper:hover:not(:disabled) {
+  border-color: var(--uxm-color-input-hover-border, var(--color-accent));
+}
+
+.uxm-color-input__eyedropper:focus-visible {
+  outline: 2px solid var(--uxm-color-input-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-color-input__controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Format picker — the library Select (combobox + Listbox popover). Its
+   `.uxm-listbox` wrapper is the ACTUAL flex item in the controls row (the
+   combobox sits inside it), and the shared listbox rule makes it width:100% —
+   pin the wrapper to a compact fixed width so the value editor keeps the rest
+   of the row. Chrome comes from `.uxm-select-dropdown`; the class on the
+   combobox only maps our compact sizing onto the Select's override vars. */
+.uxm-color-input__controls > .uxm-listbox {
+  width: var(--uxm-color-input-format-width, 88px);
+  flex-shrink: 0;
+}
+
+.uxm-color-input__format {
+  --uxm-select-dropdown-padding-y: var(--uxm-color-input-padding-y, 8px);
+  --uxm-select-dropdown-padding-x: var(--uxm-color-input-padding-x, 10px);
+  --uxm-select-dropdown-font-size: var(--uxm-color-input-font-size, 14px);
+  --uxm-select-dropdown-border-radius: var(--uxm-color-input-border-radius, 8px);
+  --uxm-select-dropdown-bg: var(--uxm-color-input-bg, var(--color-card));
+  --uxm-select-dropdown-border-color: var(--uxm-color-input-border-color, var(--color-border));
+}
+
+/* Hex field — a single text input; fills the row after the format select. */
+.uxm-color-input__field {
+  flex: 1;
+  min-width: 0;
+  font-family: inherit;
+  font-size: calc(var(--uxm-color-input-font-size, 14px) * var(--type-scale, 1));
+  color: var(--uxm-color-input-color, var(--color-text));
+  background-color: var(--uxm-color-input-bg, var(--color-card));
+  border: 1px solid var(--uxm-color-input-border-color, var(--color-border));
+  border-radius: var(--uxm-color-input-border-radius, 8px);
+  padding: var(--uxm-color-input-padding-y, 8px) var(--uxm-color-input-padding-x, 10px);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.uxm-color-input__field--state-hover,
+.uxm-color-input__field:hover:not(:disabled) {
+  border-color: var(--uxm-color-input-hover-border, var(--color-accent));
+}
+
+.uxm-color-input__field--state-focus,
+.uxm-color-input__field:focus {
+  border-color: var(--uxm-color-input-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-color-input-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-color-input__field--invalid,
+.uxm-color-input__field--invalid:focus {
+  border-color: var(--uxm-color-input-error-border, var(--color-danger-text));
+}
+
+/* Channel editor — R/G/B(/A) or H/S/L. Each channel is a column: the numeric
+   field on top with its letter centered underneath (keeps the fields wide
+   enough for three digits — an inline label would eat the row). */
+.uxm-color-input__channels {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  gap: 4px;
+}
+
+.uxm-color-input__channel {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.uxm-color-input__channel-label {
+  font-size: calc(10px * var(--type-scale, 1));
+  font-weight: 500;
+  text-align: center;
+  color: var(--color-text-muted);
+}
+
+.uxm-color-input__channel-field {
+  /* width: 100% + own padding/border → border-box, or the field overflows
+     its grid column in a reset-less host (ui.css ships no reset). */
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  font-family: inherit;
+  font-size: calc(var(--uxm-color-input-font-size, 14px) * var(--type-scale, 1));
+  text-align: center;
+  color: var(--uxm-color-input-color, var(--color-text));
+  background-color: var(--uxm-color-input-bg, var(--color-card));
+  border: 1px solid var(--uxm-color-input-border-color, var(--color-border));
+  border-radius: var(--uxm-color-input-border-radius, 8px);
+  padding: var(--uxm-color-input-padding-y, 8px) 2px;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.uxm-color-input__channel-field:hover:not(:disabled) {
+  border-color: var(--uxm-color-input-hover-border, var(--color-accent));
+}
+
+.uxm-color-input__channel-field:focus {
+  border-color: var(--uxm-color-input-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-color-input-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-color-input__error-message {
+  display: block;
+  margin-top: 2px;
+  font-size: calc(var(--uxm-color-input-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-color-input-error-color, var(--color-danger-text));
+}
+
+/* Error modifier tints the field borders to match the message. */
+.uxm-color-input--error .uxm-color-input__field,
+.uxm-color-input--error .uxm-color-input__channel-field {
+  border-color: var(--uxm-color-input-error-border, var(--color-danger-text));
+}
+
+/* Disabled: dim the whole panel and block pointer interaction. The tracks/area
+   already early-return in their handlers; this covers the visual + cursor. */
+.uxm-color-input--disabled {
+  opacity: var(--uxm-color-input-disabled-opacity, 0.6);
+  pointer-events: none;
+}
+
+/* Forced-state root modifiers — the studio preview toggles these to show the
+   field's hover / focus chrome without real pointer / keyboard interaction
+   (mirrors the input family's `--state-*` pattern). */
+.uxm-color-input--state-hover .uxm-color-input__field {
+  border-color: var(--uxm-color-input-hover-border, var(--color-accent));
+}
+
+.uxm-color-input--state-focus .uxm-color-input__field {
+  border-color: var(--uxm-color-input-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-color-input-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+/* ── Popover variant ──
+   Swatch trigger + floating panel. The trigger shows the current color over a
+   checkerboard so translucency reads; the panel carries the surface chrome. */
+.uxm-color-input-popover__trigger {
+  width: var(--uxm-color-input-trigger-size, 32px);
+  height: var(--uxm-color-input-trigger-size, 32px);
+  padding: 0;
+  border: 1px solid var(--uxm-color-input-border-color, var(--color-border));
+  border-radius: var(--uxm-color-input-border-radius, 8px);
+  cursor: pointer;
+  background-color: #fff;
+  background-image: linear-gradient(var(--uxm-color-input-value, #000), var(--uxm-color-input-value, #000)), linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%), linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%);
+  background-size: 100% 100%, 8px 8px, 8px 8px;
+  background-position: 0 0, 0 0, 4px 4px;
+  transition: border-color 0.15s ease;
+}
+
+.uxm-color-input-popover__trigger:hover:not(:disabled) {
+  border-color: var(--uxm-color-input-hover-border, var(--color-accent));
+}
+
+.uxm-color-input-popover__trigger:focus-visible {
+  outline: 2px solid var(--uxm-color-input-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-color-input-popover__trigger:disabled {
+  opacity: var(--uxm-color-input-disabled-opacity, 0.6);
+  cursor: not-allowed;
+}
+
+.uxm-color-input-popover__panel {
+  padding: var(--uxm-color-input-panel-padding, 12px);
+  background-color: var(--uxm-color-input-panel-bg, var(--color-card));
+  border: 1px solid var(--uxm-color-input-panel-border, var(--color-border));
+  border-radius: var(--uxm-color-input-panel-radius, 8px);
+  box-shadow: var(--shadow-modal);
+}

package/dist/ui/color-input/color-input.d.ts

@@ -0,0 +1,93 @@
+import { type HTMLAttributes } from 'react';
+import { type PopoverPlacement } from '../popover/index.js';
+import { type ColorFormat } from './color-model.js';
+export type { ColorFormat } from './color-model.js';
+/**
+ * Accessible names for the picker's unlabelled controls. Grouped into one
+ * object rather than seven flat props: none of them is individually
+ * interesting, a consumer localising the picker sets ALL of them at once from
+ * its own dictionary, and one object keeps that a single spread instead of
+ * seven prop lines. Every field is optional and falls back to the English
+ * default.
+ */
+export interface ColorInputLabels {
+    /** Saturation / brightness area. Default `"Color"`. */
+    area?: string;
+    /**
+     * Spoken value of the 2-D area. A single `aria-valuenow` can only carry
+     * one axis, so this is what a screen-reader user actually hears.
+     * Default `` `Saturation ${s}%, Brightness ${v}%` ``.
+     */
+    areaValueText?: (saturation: number, brightness: number) => string;
+    /** Hue slider. Default `"Hue"`. */
+    hue?: string;
+    /** Opacity slider. Default `"Opacity"`. */
+    alpha?: string;
+    /** Screen eyedropper button. Default `"Pick color from screen"`. */
+    eyedropper?: string;
+    /** Representation select. Default `"Color format"`. */
+    format?: string;
+    /** Hex text field. Default `"Hex color value"`. */
+    hex?: string;
+}
+export interface ColorInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Accessible names for the unlabelled controls. Merged over the English defaults. */
+    labels?: ColorInputLabels;
+    /** Current value (controlled) — any supported color string. */
+    value?: string;
+    /** Initial value for uncontrolled usage. Defaults to `#000000`. */
+    defaultValue?: string;
+    /** Called with the color formatted per `outputFormat` on every commit. */
+    onChange?: (color: string) => void;
+    /** Formats offered in the representation select. Defaults to all four. */
+    formats?: ColorFormat[];
+    /** Format of the value passed to `onChange` / `onEnter`. Defaults to `hex`. */
+    outputFormat?: ColorFormat;
+    /** Enter in a value field commits it and fires this with the current color. */
+    onEnter?: (color: string) => void;
+    /** Escape reverts the field draft to the last committed value and fires this. */
+    onEsc?: () => void;
+    /** Show the opacity slider. Defaults to true. */
+    alpha?: boolean;
+    /** Show the screen eyedropper button (Chromium only; auto-hidden elsewhere). Defaults to true. */
+    eyedropper?: boolean;
+    /** Disable all interaction. */
+    disabled?: boolean;
+    /** Non-empty string renders the error state and message below the panel. */
+    error?: string;
+}
+/**
+ * Full inline color picker: a saturation/brightness area, hue and opacity
+ * sliders, a swatch, an optional screen eyedropper, a format select and a
+ * per-format value editor (one hex text field, or R/G/B(/A) or H/S/L numeric
+ * fields). The working model is HSVA (hue and alpha are kept even when
+ * saturation/value hit 0, where RGB→HSV can't recover them). Switching format
+ * re-derives the fields from the current color — that's the conversion.
+ */
+export declare function ColorInput({ value, defaultValue, onChange, formats, outputFormat, onEnter, onEsc, alpha, eyedropper, disabled, error, labels, className, style, ...rest }: ColorInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ColorInput {
+    var hasError: boolean;
+}
+export interface ColorInputPopoverProps extends ColorInputProps {
+    /** Popover open state (controlled). Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. Defaults to false. */
+    defaultOpen?: boolean;
+    /** Called when the popover requests open/close. */
+    onOpenChange?: (open: boolean) => void;
+    /** Preferred popover placement. Defaults to `bottom-start`. */
+    placement?: PopoverPlacement;
+    /** Accessible name for the trigger swatch. Defaults to `Choose color`. */
+    triggerLabel?: string;
+}
+/**
+ * Compact swatch trigger that opens {@link ColorInput} in a popover. Enter and
+ * Escape inside the panel additionally close the popover (Enter after a commit,
+ * Escape after reverting the draft); `Popover`'s own Escape/outside-click
+ * dismissal covers the rest.
+ */
+export declare function ColorInputPopover({ open, defaultOpen, onOpenChange, placement, triggerLabel, value, defaultValue, onChange, onEnter, onEsc, formats, outputFormat, alpha, eyedropper, disabled, error, className, style, ...rest }: ColorInputPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ColorInputPopover {
+    var hasError: boolean;
+}
+//# sourceMappingURL=color-input.d.ts.map

package/dist/ui/color-input/color-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../../src/ui/color-input/color-input.tsx"],"names":[],"mappings":"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"}