支持无障碍访问的 React 渐变颜色选择器

GradientEditor 用来构建 CSS 线性渐变和径向渐变。它来自单独的入口，所以只用来选纯色的选择器不会带上渐变相关的代码。

用法

import { useState } from "react";
import {
  GradientEditor,
  gradientToCss,
  type GradientValue,
} from "chroma-panel/gradient";
 
const initial: GradientValue = {
  type: "linear",
  angle: 90,
  stops: [
    { id: "start", color: "oklch(65% 0.22 285)", position: 0 },
    { id: "end", color: "#06b6d4", position: 100 },
  ],
};
 
export function GradientExample() {
  const [gradient, setGradient] = useState(initial);
  return (
    <GradientEditor
      value={gradient}
      onChange={setGradient}
      onChangeComplete={(value) => console.log(gradientToCss(value))}
    />
  );
}

Props

Prop	Type	Default
`value`	`GradientValue`	—
`defaultValue`	`GradientValue`	从紫色到青色的线性渐变
`onChange`	`(value) => void`	—
`onChangeComplete`	`(value) => void`	—
`minStops`	`number`	`2`
`maxStops`	`number`	`12`
`disabled`	`boolean`	`false`

每个色标都有一个稳定的 id、一个 CSS color，以及 0 到 100 之间的位置。编辑器支持线性和径向渐变、可用键盘操作的 range 输入框、原生颜色控件，也可以直接输入 CSS 颜色。

模型工具函数

同一个入口还导出了 gradientToCss、sampleGradient、normalizeGradient、addGradientStop 和 isGradientColorSupported。sampleGradient 默认使用 OKLab 插值，避免 RGB 渐变中常见的中间色发灰、发浑的问题。