ColorPicker

Компонент выбора цвета с палитрой, переключаемыми цветовыми моделями (HEX / RGB / HSV), альфа-каналом и опциональным режимом ручного подтверждения изменений. Уведомляет об изменении полным RawColor-объектом (hex, rgb, rgba, hsl, hsla, hsv, hsva) — пользователь сам решает, в каком формате потреблять.

Когда использовать

• Когда пользователю нужно выбрать произвольный цвет (брендинг, темы, разметка карт, рисование).
• Когда требуется поддержка нескольких цветовых моделей.
• Когда нужен альфа-канал.

Когда не нужен ColorPicker:

• Выбор из фиксированной палитры — используйте набор Tag/Chip.
• Только подтверждение одной заранее заданной коррекции — используйте Toggle/Switch.

Анатомия

Size (default m)

Размерный ряд: s / m / l. Меняются размер палитры, handle-указателя, превью и зазоры.

Alpha (default true)

withAlpha — управляет наличием альфа-канала в палитре и поля Alpha (0–100%).

Available modes (default — все)

availableModes — массив ColorMode[]. Перечисляет модели, доступные переключателю. По умолчанию доступны все (hex, rgb, hsv).

Apply mode (default false)

• autoApply: true — onChange вызывается на каждое изменение, без footer’а.
• autoApply: false — изменения накапливаются локально; onChange вызывается только по Apply. Cancel восстанавливает значение из value (или из начального, если используется uncontrolled).

Установка

pnpm add @cloud-ru/ds-color-picker

Примеры использования

Базовое использование

import { ColorPicker } from '@cloud-ru/ds-color-picker';
import { useState } from 'react';

export function Basic() {
  const [color, setColor] = useState<string>('#389f74');

  return <ColorPicker value={color} onChange={raw => setColor(raw.hex)} />;
}

Размеры

import { ColorPicker } from '@cloud-ru/ds-color-picker';
import { useState } from 'react';

export function Sizes() {
  const [color, setColor] = useState<string>('#389f74');
  const handleChange = (raw: { hex: string }) => setColor(raw.hex);

  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <ColorPicker size='s' value={color} onChange={handleChange} autoApply />
      <ColorPicker size='m' value={color} onChange={handleChange} autoApply />
      <ColorPicker size='l' value={color} onChange={handleChange} autoApply />
    </div>
  );
}

Авто-применение

import { ColorPicker } from '@cloud-ru/ds-color-picker';
import { useState } from 'react';

export function AutoApply() {
  const [color, setColor] = useState<string>('#4387e2');

  return <ColorPicker value={color} autoApply onChange={raw => setColor(raw.hex)} />;
}

Без альфа-канала

import { ColorPicker } from '@cloud-ru/ds-color-picker';
import { useState } from 'react';

export function WithoutAlpha() {
  const [color, setColor] = useState<string>('#d52e33');

  return <ColorPicker value={color} withAlpha={false} autoApply onChange={raw => setColor(raw.hex)} />;
}

Props

Types

ColorPickerProps

Alpha

Color

HslColor

HsvColor

RgbColor

Unions

ColorMode

Size

Адаптивность

ColorPicker — презентационная палитра, управляемая пропсами: сам он раскладку из контекста не читает. Переключение поверхности (surface-swap) живёт на уровне поля-обёртки (FieldColor-сценарий): это поле берёт раскладку из AdaptiveProvider (@cloud-ru/ds-adaptive) и на mobile открывает палитру в BottomSheet снизу, на desktop — в popover. Пропа layoutType у ColorPicker нет.

Desktop-first. Поставьте один <AdaptiveProvider> в корне приложения — адаптивное поле включит mobile-поверхность автоматически.

Под узкую mobile-поверхность ColorPicker отдаёт два пропса раскладки:

Компактный режим (mobile)

import { ColorPicker } from '@cloud-ru/ds-color-picker';
import { useState } from 'react';

export function Compact() {
  const [color, setColor] = useState<string>('#389f74');

  return <ColorPicker value={color} withColorArea={false} autoApply={false} onChange={raw => setColor(raw.hex)} />;
}

Подробнее о модели адаптивности — Адаптивность — паттерн.

Storybook

Figma