Function ColorPickerControl

client/src/components/ColorPickerControl.jsx:16–125

(props)

import { normalizeColorForPicker, serializeColorForPicker } from "../modules/colorPicker";

function ColorPickerControl(props) {
  const {
    ariaLabel,
    className,
    fallbackColor = "#000000",
    onChange,
    onClear,
    popoverClassName,
    presetColors = [],
    renderTrigger,
    showClearButton = false,
    swatchClassName,
    value,
    valueFormat = "smart",
  } = props;

  const pickerColor = normalizeColorForPicker(value, fallbackColor);
  const cssColor = value || serializeColorForPicker(pickerColor, "smart", fallbackColor);

  const handleChange = (nextColor) => {
    onChange(serializeColorForPicker(nextColor, valueFormat, fallbackColor), nextColor);
  };

  const triggerContent = renderTrigger
    ? renderTrigger({ color: cssColor })
    : (
      <div className={cn(
        "flex min-w-[140px] items-center gap-3 rounded-xl border border-divider bg-content1 px-3 py-2 shadow-sm transition-colors hover:bg-content2",
        swatchClassName,
      )}
      >
        <ColorSwatch color={pickerColor} size="sm" />
        <span className="text-sm font-medium text-foreground">{ariaLabel}</span>
      </div>
    );

  return (
    <ColorPicker value={pickerColor} onChange={handleChange}>
      <ColorPicker.Trigger aria-label={ariaLabel} className={cn("inline-flex cursor-pointer", className)}>
        {triggerContent}
      </ColorPicker.Trigger>
      <ColorPicker.Popover className={cn("w-[280px] gap-3 rounded-2xl p-3", popoverClassName)}>
        {presetColors.length > 0 && (
          <ColorSwatchPicker aria-label={`${ariaLabel} presets`} className="flex flex-wrap justify-center gap-1 px-1" size="xs">
            {presetColors.map((preset) => (
              <ColorSwatchPicker.Item key={preset} color={preset}>
                <ColorSwatchPicker.Swatch />
              </ColorSwatchPicker.Item>
            ))}
          </ColorSwatchPicker>
        )}

        <ColorArea
          aria-label={`${ariaLabel} color area`}
          className="max-w-full"
          colorSpace="hsb"
          xChannel="saturation"
          yChannel="brightness"