@markoradak/color-picker

import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerHueSlider,
  ColorPickerAlphaSlider,
  ColorPickerInput,
  ColorPickerEyeDropper,
  ColorPickerModeSelector,
  ColorPickerTrigger,
  ColorPickerContent,
} from "@markoradak/color-picker";

function MyColorPicker() {
  const [color, setColor] = useState("#3b82f6");

  return (
    <ColorPicker value={color} onValueChange={setColor}>
      <ColorPickerTrigger />
      <ColorPickerContent>
        <ColorPickerModeSelector />
        <ColorPickerArea />
        <ColorPickerHueSlider />
        <ColorPickerAlphaSlider />
        <ColorPickerInput />
        <ColorPickerEyeDropper />
      </ColorPickerContent>
    </ColorPicker>
  );
}

import {
  ColorPicker,
  ColorPickerGradientEditor,
  ColorPickerGradientSwatches,
  ColorPickerModeSelector,
  toCSS,
} from "@markoradak/color-picker";
import type { ColorPickerValue } from "@markoradak/color-picker";

function MyGradientPicker() {
  const [value, setValue] = useState<ColorPickerValue>({
    type: "linear",
    angle: 90,
    stops: [
      { id: "1", color: "#3b82f6", position: 0 },
      { id: "2", color: "#ec4899", position: 100 },
    ],
  });

  return (
    <ColorPicker value={value} onValueChange={setValue}>
      <ColorPickerModeSelector />
      <ColorPickerGradientEditor />
      <ColorPickerGradientSwatches values={[...]} />
      <div style={{ background: toCSS(value) }} />
    </ColorPicker>
  );
}

import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerHueSlider,
  ColorPickerInput,
} from "@markoradak/color-picker";

// Pass named tokens — the input shows a badge when the color matches
const tokens = {
  primary: "#3b82f6",
  danger: "#ef4444",
  success: "#22c55e",
  warning: "#f59e0b",
};

function MyColorPicker() {
  const [color, setColor] = useState("#3b82f6");

  return (
    // autoTokens auto-detects CSS custom properties (enabled by default).
    // Set autoTokens={false} to disable auto-detection and use only manual tokens.
    <ColorPicker value={color} onValueChange={setColor} tokens={tokens}>
      <ColorPickerArea />
      <ColorPickerHueSlider />
      <ColorPickerInput enableTokenSearch />
    </ColorPicker>
  );
}

import { useState } from "react";
import { ColorPickerPopover } from "@markoradak/color-picker/presets";

function AccessibleColorPicker() {
  const [color, setColor] = useState("#16db89");
  const [bg, setBg] = useState("#ffffff");

  // Pass contrastColor to enable the WCAG readout + threshold curve.
  // onContrastColorChange lets users swap the reference color via the popover.
  return (
    <ColorPickerPopover
      value={color}
      onValueChange={setColor}
      contrastColor={bg}
      onContrastColorChange={setBg}
    />
  );
}

import { ColorPickerInline } from "@markoradak/color-picker/presets";

function QuickPicker() {
  const [color, setColor] = useState("#16db89");

  return (
    <ColorPickerInline
      value={color}
      onValueChange={setColor}
    />
  );
}