ezr-antd 1.0.0

package/es/color-picker/components/ColorSlider.js

@@ -0,0 +1,133 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import classNames from 'classnames';
+import { UnstableContext } from 'rc-slider';
+import useEvent from "rc-util/es/hooks/useEvent";
+import Slider from '../../slider';
+import SliderInternalContext from '../../slider/Context';
+import { getGradientPercentColor } from '../util';
+export const GradientColorSlider = props => {
+  const {
+      prefixCls,
+      colors,
+      type,
+      color,
+      range = false,
+      className,
+      activeIndex,
+      onActive,
+      onDragStart,
+      onDragChange,
+      onKeyDelete
+    } = props,
+    restProps = __rest(props, ["prefixCls", "colors", "type", "color", "range", "className", "activeIndex", "onActive", "onDragStart", "onDragChange", "onKeyDelete"]);
+  const sliderProps = Object.assign(Object.assign({}, restProps), {
+    track: false
+  });
+  // ========================== Background ==========================
+  const linearCss = React.useMemo(() => {
+    const colorsStr = colors.map(c => `${c.color} ${c.percent}%`).join(', ');
+    return `linear-gradient(90deg, ${colorsStr})`;
+  }, [colors]);
+  const pointColor = React.useMemo(() => {
+    if (!color || !type) {
+      return null;
+    }
+    if (type === 'alpha') {
+      return color.toRgbString();
+    }
+    return `hsl(${color.toHsb().h}, 100%, 50%)`;
+  }, [color, type]);
+  // ======================= Context: Slider ========================
+  const onInternalDragStart = useEvent(onDragStart);
+  const onInternalDragChange = useEvent(onDragChange);
+  const unstableContext = React.useMemo(() => ({
+    onDragStart: onInternalDragStart,
+    onDragChange: onInternalDragChange
+  }), []);
+  // ======================= Context: Render ========================
+  const handleRender = useEvent((ori, info) => {
+    const {
+      onFocus,
+      style,
+      className: handleCls,
+      onKeyDown
+    } = ori.props;
+    // Point Color
+    const mergedStyle = Object.assign({}, style);
+    if (type === 'gradient') {
+      mergedStyle.background = getGradientPercentColor(colors, info.value);
+    }
+    return /*#__PURE__*/React.cloneElement(ori, {
+      onFocus: e => {
+        onActive === null || onActive === void 0 ? void 0 : onActive(info.index);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+      },
+      style: mergedStyle,
+      className: classNames(handleCls, {
+        [`${prefixCls}-slider-handle-active`]: activeIndex === info.index
+      }),
+      onKeyDown: e => {
+        if ((e.key === 'Delete' || e.key === 'Backspace') && onKeyDelete) {
+          onKeyDelete(info.index);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+      }
+    });
+  });
+  const sliderContext = React.useMemo(() => ({
+    direction: 'ltr',
+    handleRender
+  }), []);
+  // ============================ Render ============================
+  return /*#__PURE__*/React.createElement(SliderInternalContext.Provider, {
+    value: sliderContext
+  }, /*#__PURE__*/React.createElement(UnstableContext.Provider, {
+    value: unstableContext
+  }, /*#__PURE__*/React.createElement(Slider, Object.assign({}, sliderProps, {
+    className: classNames(className, `${prefixCls}-slider`),
+    tooltip: {
+      open: false
+    },
+    range: {
+      editable: range,
+      minCount: 2
+    },
+    styles: {
+      rail: {
+        background: linearCss
+      },
+      handle: pointColor ? {
+        background: pointColor
+      } : {}
+    },
+    classNames: {
+      rail: `${prefixCls}-slider-rail`,
+      handle: `${prefixCls}-slider-handle`
+    }
+  }))));
+};
+const SingleColorSlider = props => {
+  const {
+    value,
+    onChange,
+    onChangeComplete
+  } = props;
+  const singleOnChange = v => onChange(v[0]);
+  const singleOnChangeComplete = v => onChangeComplete(v[0]);
+  return /*#__PURE__*/React.createElement(GradientColorSlider, Object.assign({}, props, {
+    value: [value],
+    onChange: singleOnChange,
+    onChangeComplete: singleOnChangeComplete
+  }));
+};
+export default SingleColorSlider;

package/es/color-picker/components/ColorSteppers.d.ts

@@ -0,0 +1,15 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { InputNumberProps } from '../../input-number';
+interface ColorSteppersProps {
+    prefixCls: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    onChange?: (value: number | null) => void;
+    className?: string;
+    prefix?: (prefixCls: string) => React.ReactNode;
+    formatter?: InputNumberProps<number>['formatter'];
+}
+declare const ColorSteppers: FC<ColorSteppersProps>;
+export default ColorSteppers;

package/es/color-picker/components/ColorSteppers.js

@@ -0,0 +1,38 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import InputNumber from '../../input-number';
+const ColorSteppers = ({
+  prefixCls,
+  min = 0,
+  max = 100,
+  value,
+  onChange,
+  className,
+  formatter
+}) => {
+  const colorSteppersPrefixCls = `${prefixCls}-steppers`;
+  const [stepValue, setStepValue] = useState(value);
+  // Update step value
+  useEffect(() => {
+    if (!Number.isNaN(value)) {
+      setStepValue(value);
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement(InputNumber, {
+    className: classNames(colorSteppersPrefixCls, className),
+    min: min,
+    max: max,
+    value: stepValue,
+    formatter: formatter,
+    size: "small",
+    onChange: step => {
+      if (!value) {
+        setStepValue(step || 0);
+      }
+      onChange === null || onChange === void 0 ? void 0 : onChange(step);
+    }
+  });
+};
+export default ColorSteppers;

package/es/color-picker/components/ColorTrigger.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, MouseEventHandler } from 'react';
+import React from 'react';
+import type { AggregationColor } from '../color';
+import type { ColorFormatType, ColorPickerProps } from '../interface';
+export interface ColorTriggerProps {
+    prefixCls: string;
+    disabled?: boolean;
+    format?: ColorFormatType;
+    color: AggregationColor;
+    open?: boolean;
+    showText?: ColorPickerProps['showText'];
+    className?: string;
+    style?: CSSProperties;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    activeIndex: number;
+}
+declare const ColorTrigger: React.ForwardRefExoticComponent<ColorTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export default ColorTrigger;

package/es/color-picker/components/ColorTrigger.js

@@ -0,0 +1,83 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import React, { forwardRef, useMemo } from 'react';
+import { ColorBlock } from '@rc-component/color-picker';
+import classNames from 'classnames';
+import pickAttrs from "rc-util/es/pickAttrs";
+import { useLocale } from '../../locale';
+import { getColorAlpha } from '../util';
+import ColorClear from './ColorClear';
+const ColorTrigger = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      color,
+      prefixCls,
+      open,
+      disabled,
+      format,
+      className,
+      showText,
+      activeIndex
+    } = props,
+    rest = __rest(props, ["color", "prefixCls", "open", "disabled", "format", "className", "showText", "activeIndex"]);
+  const colorTriggerPrefixCls = `${prefixCls}-trigger`;
+  const colorTextPrefixCls = `${colorTriggerPrefixCls}-text`;
+  const colorTextCellPrefixCls = `${colorTextPrefixCls}-cell`;
+  const [locale] = useLocale('ColorPicker');
+  // ============================== Text ==============================
+  const desc = React.useMemo(() => {
+    if (!showText) {
+      return '';
+    }
+    if (typeof showText === 'function') {
+      return showText(color);
+    }
+    if (color.cleared) {
+      return locale.transparent;
+    }
+    if (color.isGradient()) {
+      return color.getColors().map((c, index) => {
+        const inactive = activeIndex !== -1 && activeIndex !== index;
+        return /*#__PURE__*/React.createElement("span", {
+          key: index,
+          className: classNames(colorTextCellPrefixCls, inactive && `${colorTextCellPrefixCls}-inactive`)
+        }, c.color.toRgbString(), " ", c.percent, "%");
+      });
+    }
+    const hexString = color.toHexString().toUpperCase();
+    const alpha = getColorAlpha(color);
+    switch (format) {
+      case 'rgb':
+        return color.toRgbString();
+      case 'hsb':
+        return color.toHsbString();
+      // case 'hex':
+      default:
+        return alpha < 100 ? `${hexString.slice(0, 7)},${alpha}%` : hexString;
+    }
+  }, [color, format, showText, activeIndex]);
+  // ============================= Render =============================
+  const containerNode = useMemo(() => color.cleared ? (/*#__PURE__*/React.createElement(ColorClear, {
+    prefixCls: prefixCls
+  })) : (/*#__PURE__*/React.createElement(ColorBlock, {
+    prefixCls: prefixCls,
+    color: color.toCssString()
+  })), [color, prefixCls]);
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: ref,
+    className: classNames(colorTriggerPrefixCls, className, {
+      [`${colorTriggerPrefixCls}-active`]: open,
+      [`${colorTriggerPrefixCls}-disabled`]: disabled
+    })
+  }, pickAttrs(rest)), containerNode, showText && /*#__PURE__*/React.createElement("div", {
+    className: colorTextPrefixCls
+  }, desc));
+});
+export default ColorTrigger;

package/es/color-picker/components/PanelPicker/GradientColorBar.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { GradientColor } from '../../color';
+import type { PanelPickerContextProps } from '../../context';
+export interface GradientColorBarProps extends PanelPickerContextProps {
+    colors: GradientColor;
+}
+declare const _default: React.MemoExoticComponent<(props: GradientColorBarProps) => React.JSX.Element | null>;
+export default _default;

package/es/color-picker/components/PanelPicker/GradientColorBar.js

@@ -0,0 +1,114 @@
+"use client";
+
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import * as React from 'react';
+import { AggregationColor } from '../../color';
+import { getGradientPercentColor } from '../../util';
+import { GradientColorSlider } from '../ColorSlider';
+function sortColors(colors) {
+  return _toConsumableArray(colors).sort((a, b) => a.percent - b.percent);
+}
+/**
+ * GradientColorBar will auto show when the mode is `gradient`.
+ */
+const GradientColorBar = props => {
+  const {
+    prefixCls,
+    mode,
+    onChange,
+    onChangeComplete,
+    onActive,
+    activeIndex,
+    onGradientDragging,
+    colors
+  } = props;
+  const isGradient = mode === 'gradient';
+  // ============================= Colors =============================
+  const colorList = React.useMemo(() => colors.map(info => ({
+    percent: info.percent,
+    color: info.color.toRgbString()
+  })), [colors]);
+  const values = React.useMemo(() => colorList.map(info => info.percent), [colorList]);
+  // ============================== Drag ==============================
+  const colorsRef = React.useRef(colorList);
+  // Record current colors
+  const onDragStart = ({
+    rawValues,
+    draggingIndex,
+    draggingValue
+  }) => {
+    if (rawValues.length > colorList.length) {
+      // Add new node
+      const newPointColor = getGradientPercentColor(colorList, draggingValue);
+      const nextColors = _toConsumableArray(colorList);
+      nextColors.splice(draggingIndex, 0, {
+        percent: draggingValue,
+        color: newPointColor
+      });
+      colorsRef.current = nextColors;
+    } else {
+      colorsRef.current = colorList;
+    }
+    onGradientDragging(true);
+    onChange(new AggregationColor(sortColors(colorsRef.current)), true);
+  };
+  // Adjust color when dragging
+  const onDragChange = ({
+    deleteIndex,
+    draggingIndex,
+    draggingValue
+  }) => {
+    let nextColors = _toConsumableArray(colorsRef.current);
+    if (deleteIndex !== -1) {
+      nextColors.splice(deleteIndex, 1);
+    } else {
+      nextColors[draggingIndex] = Object.assign(Object.assign({}, nextColors[draggingIndex]), {
+        percent: draggingValue
+      });
+      nextColors = sortColors(nextColors);
+    }
+    onChange(new AggregationColor(nextColors), true);
+  };
+  // ============================== Key ===============================
+  const onKeyDelete = index => {
+    const nextColors = _toConsumableArray(colorList);
+    nextColors.splice(index, 1);
+    const nextColor = new AggregationColor(nextColors);
+    onChange(nextColor);
+    onChangeComplete(nextColor);
+  };
+  // ============================= Change =============================
+  const onInternalChangeComplete = nextValues => {
+    onChangeComplete(new AggregationColor(colorList));
+    // Reset `activeIndex` if out of range
+    if (activeIndex >= nextValues.length) {
+      onActive(nextValues.length - 1);
+    }
+    onGradientDragging(false);
+  };
+  // ============================= Render =============================
+  if (!isGradient) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(GradientColorSlider, {
+    min: 0,
+    max: 100,
+    prefixCls: prefixCls,
+    className: `${prefixCls}-gradient-slider`,
+    colors: colorList,
+    color: null,
+    value: values,
+    range: true,
+    onChangeComplete: onInternalChangeComplete,
+    disabled: false,
+    type: "gradient",
+    // Active
+    activeIndex: activeIndex,
+    onActive: onActive,
+    // Drag
+    onDragStart: onDragStart,
+    onDragChange: onDragChange,
+    onKeyDelete: onKeyDelete
+  });
+};
+export default /*#__PURE__*/React.memo(GradientColorBar);

package/es/color-picker/components/PanelPicker/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const PanelPicker: FC;
+export default PanelPicker;

package/es/color-picker/components/PanelPicker/index.js

@@ -0,0 +1,174 @@
+"use client";
+
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import React, { useContext } from 'react';
+import RcColorPicker from '@rc-component/color-picker';
+import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
+import Segmented from '../../../segmented';
+import { AggregationColor } from '../../color';
+import { PanelPickerContext } from '../../context';
+import { genAlphaColor, generateColor } from '../../util';
+import ColorClear from '../ColorClear';
+import ColorInput from '../ColorInput';
+import ColorSlider from '../ColorSlider';
+import GradientColorBar from './GradientColorBar';
+const components = {
+  slider: ColorSlider
+};
+const PanelPicker = () => {
+  const panelPickerContext = useContext(PanelPickerContext);
+  const {
+      mode,
+      onModeChange,
+      modeOptions,
+      prefixCls,
+      allowClear,
+      value,
+      disabledAlpha,
+      onChange,
+      onClear,
+      onChangeComplete,
+      activeIndex,
+      gradientDragging
+    } = panelPickerContext,
+    injectProps = __rest(panelPickerContext, ["mode", "onModeChange", "modeOptions", "prefixCls", "allowClear", "value", "disabledAlpha", "onChange", "onClear", "onChangeComplete", "activeIndex", "gradientDragging"]);
+  // ============================ Colors ============================
+  const colors = React.useMemo(() => {
+    if (!value.cleared) {
+      return value.getColors();
+    }
+    return [{
+      percent: 0,
+      color: new AggregationColor('')
+    }, {
+      percent: 100,
+      color: new AggregationColor('')
+    }];
+  }, [value]);
+  // ========================= Single Color =========================
+  const isSingle = !value.isGradient();
+  // We cache the point color in case user drag the gradient point across another one
+  const [lockedColor, setLockedColor] = React.useState(value);
+  // Use layout effect here since `useEffect` will cause a blink when mouseDown
+  useLayoutEffect(() => {
+    var _a;
+    if (!isSingle) {
+      setLockedColor((_a = colors[activeIndex]) === null || _a === void 0 ? void 0 : _a.color);
+    }
+  }, [gradientDragging, activeIndex]);
+  const activeColor = React.useMemo(() => {
+    var _a;
+    if (isSingle) {
+      return value;
+    }
+    // Use cache when dragging. User can not operation panel when dragging.
+    if (gradientDragging) {
+      return lockedColor;
+    }
+    return (_a = colors[activeIndex]) === null || _a === void 0 ? void 0 : _a.color;
+  }, [value, activeIndex, isSingle, lockedColor, gradientDragging]);
+  // ========================= Picker Color =========================
+  const [pickerColor, setPickerColor] = React.useState(activeColor);
+  const [forceSync, setForceSync] = React.useState(0);
+  const mergedPickerColor = (pickerColor === null || pickerColor === void 0 ? void 0 : pickerColor.equals(activeColor)) ? activeColor : pickerColor;
+  useLayoutEffect(() => {
+    setPickerColor(activeColor);
+  }, [forceSync, activeColor === null || activeColor === void 0 ? void 0 : activeColor.toHexString()]);
+  // ============================ Change ============================
+  const fillColor = (nextColor, info) => {
+    let submitColor = generateColor(nextColor);
+    // Fill alpha color to 100% if origin is cleared color
+    if (value.cleared) {
+      const rgb = submitColor.toRgb();
+      // Auto fill color if origin is `0/0/0` to enhance user experience
+      if (!rgb.r && !rgb.g && !rgb.b && info) {
+        const {
+          type: infoType,
+          value: infoValue = 0
+        } = info;
+        submitColor = new AggregationColor({
+          h: infoType === 'hue' ? infoValue : 0,
+          s: 1,
+          b: 1,
+          a: infoType === 'alpha' ? infoValue / 100 : 1
+        });
+      } else {
+        submitColor = genAlphaColor(submitColor);
+      }
+    }
+    if (mode === 'single') {
+      return submitColor;
+    }
+    const nextColors = _toConsumableArray(colors);
+    nextColors[activeIndex] = Object.assign(Object.assign({}, nextColors[activeIndex]), {
+      color: submitColor
+    });
+    return new AggregationColor(nextColors);
+  };
+  const onPickerChange = (colorValue, fromPicker, info) => {
+    const nextColor = fillColor(colorValue, info);
+    setPickerColor(nextColor.isGradient() ? nextColor.getColors()[activeIndex].color : nextColor);
+    onChange(nextColor, fromPicker);
+  };
+  const onInternalChangeComplete = (nextColor, info) => {
+    // Trigger complete event
+    onChangeComplete(fillColor(nextColor, info));
+    // Back of origin color in case in controlled
+    // This will set after `onChangeComplete` to avoid `setState` trigger rerender
+    // which will make `fillColor` get wrong `color.cleared` state
+    setForceSync(ori => ori + 1);
+  };
+  const onInputChange = colorValue => {
+    onChange(fillColor(colorValue));
+  };
+  // ============================ Render ============================
+  // Operation bar
+  let operationNode = null;
+  const showMode = modeOptions.length > 1;
+  if (allowClear || showMode) {
+    operationNode = /*#__PURE__*/React.createElement("div", {
+      className: `${prefixCls}-operation`
+    }, showMode && (/*#__PURE__*/React.createElement(Segmented, {
+      size: "small",
+      options: modeOptions,
+      value: mode,
+      onChange: onModeChange
+    })), /*#__PURE__*/React.createElement(ColorClear, Object.assign({
+      prefixCls: prefixCls,
+      value: value,
+      onChange: clearColor => {
+        onChange(clearColor);
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+      }
+    }, injectProps)));
+  }
+  // Return
+  return /*#__PURE__*/React.createElement(React.Fragment, null, operationNode, /*#__PURE__*/React.createElement(GradientColorBar, Object.assign({}, panelPickerContext, {
+    colors: colors
+  })), /*#__PURE__*/React.createElement(RcColorPicker, {
+    prefixCls: prefixCls,
+    value: mergedPickerColor === null || mergedPickerColor === void 0 ? void 0 : mergedPickerColor.toHsb(),
+    disabledAlpha: disabledAlpha,
+    onChange: (colorValue, info) => {
+      onPickerChange(colorValue, true, info);
+    },
+    onChangeComplete: (colorValue, info) => {
+      onInternalChangeComplete(colorValue, info);
+    },
+    components: components
+  }), /*#__PURE__*/React.createElement(ColorInput, Object.assign({
+    value: activeColor,
+    onChange: onInputChange,
+    prefixCls: prefixCls,
+    disabledAlpha: disabledAlpha
+  }, injectProps)));
+};
+export default PanelPicker;

package/es/color-picker/components/PanelPresets.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const PanelPresets: FC;
+export default PanelPresets;

package/es/color-picker/components/PanelPresets.js

@@ -0,0 +1,20 @@
+"use client";
+
+import React, { useContext } from 'react';
+import { PanelPresetsContext } from '../context';
+import ColorPresets from './ColorPresets';
+const PanelPresets = () => {
+  const {
+    prefixCls,
+    value,
+    presets,
+    onChange
+  } = useContext(PanelPresetsContext);
+  return Array.isArray(presets) ? (/*#__PURE__*/React.createElement(ColorPresets, {
+    value: value,
+    presets: presets,
+    prefixCls: prefixCls,
+    onChange: onChange
+  })) : null;
+};
+export default PanelPresets;

package/es/color-picker/context.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { GetProp } from '../_util/type';
+import type { AggregationColor } from './color';
+import type { ModeOptions } from './hooks/useModeColor';
+import type { ColorFormatType, ColorPickerProps, ModeType, PresetsItem } from './interface';
+export interface PanelPickerContextProps {
+    prefixCls: string;
+    allowClear?: boolean;
+    disabled?: boolean;
+    disabledAlpha?: boolean;
+    mode: ModeType;
+    onModeChange: (mode: ModeType) => void;
+    modeOptions: ModeOptions;
+    value: AggregationColor;
+    onChange: (value?: AggregationColor, pickColor?: boolean) => void;
+    onChangeComplete: GetProp<ColorPickerProps, 'onChangeComplete'>;
+    format?: ColorFormatType;
+    onFormatChange?: ColorPickerProps['onFormatChange'];
+    /** The gradient Slider active handle */
+    activeIndex: number;
+    /** The gradient Slider handle active changed */
+    onActive: (index: number) => void;
+    /** Is gradient Slider dragging */
+    gradientDragging: boolean;
+    /** The gradient Slider dragging changed */
+    onGradientDragging: (dragging: boolean) => void;
+    onClear?: () => void;
+    disabledFormat?: boolean;
+}
+export interface PanelPresetsContextProps {
+    prefixCls: string;
+    presets?: PresetsItem[];
+    disabled?: boolean;
+    value: AggregationColor;
+    onChange?: (value: AggregationColor) => void;
+}
+export declare const PanelPickerContext: React.Context<PanelPickerContextProps>;
+export declare const PanelPresetsContext: React.Context<PanelPresetsContextProps>;

package/es/color-picker/context.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const PanelPickerContext = /*#__PURE__*/React.createContext({});
+export const PanelPresetsContext = /*#__PURE__*/React.createContext({});

package/es/color-picker/hooks/useModeColor.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { AggregationColor } from '../color';
+import type { ColorPickerProps, ColorValueType, ModeType } from '../interface';
+export type ModeOptions = {
+    label: React.ReactNode;
+    value: ModeType;
+}[];
+/**
+ * Combine the `color` and `mode` to make sure sync of state.
+ */
+export default function useModeColor(defaultValue?: ColorValueType, value?: ColorValueType, mode?: ColorPickerProps['mode']): [
+    color: AggregationColor,
+    setColor: (color: AggregationColor) => void,
+    mode: ModeType,
+    setMode: (mode: ModeType) => void,
+    modeOptionList: ModeOptions
+];