@qsxy/element-plus-react 1.0.0-next.1

package/dist/ColorPicker/AlphaSlider.js

@@ -0,0 +1,133 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ColorPicker/AlphaSlider.tsx
+var AlphaSlider_exports = {};
+__export(AlphaSlider_exports, {
+  default: () => AlphaSlider_default
+});
+module.exports = __toCommonJS(AlphaSlider_exports);
+var import_ahooks = require("ahooks");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_hooks = require("../hooks");
+var import_draggable = __toESM(require("./draggable"));
+var import_util = require("./util");
+var AlphaSlider = (0, import_react.forwardRef)((props, ref) => {
+  const { color, vertical, onChange } = props;
+  const { b, e, is } = (0, import_hooks.useClassNames)("color-alpha-slider");
+  const el = (0, import_react.useRef)();
+  const thumb = (0, import_react.useRef)(null);
+  const bar = (0, import_react.useRef)(null);
+  const [thumbLeft, setThumbLeft] = (0, import_react.useState)(0);
+  const [thumbTop, setThumbTop] = (0, import_react.useState)(0);
+  const getBackground = (0, import_react.useCallback)(() => {
+    if (color) {
+      const { r, g, b: b2 } = color.toRgb();
+      return `linear-gradient(to right, rgba(${r}, ${g}, ${b2}, 0) 0%, rgba(${r}, ${g}, ${b2}, 1) 100%)`;
+    }
+    return null;
+  }, [color]);
+  const [background, setBackground] = (0, import_react.useState)(getBackground());
+  const getThumbLeft = (0, import_react.useCallback)(() => {
+    if (vertical) {
+      return 0;
+    }
+    const hue = color.get("alpha");
+    if (!el.current) {
+      return 0;
+    }
+    return Math.round(hue * (el.current.offsetWidth - thumb.current.offsetWidth / 2) / 100);
+  }, [color, vertical]);
+  const getThumbTop = (0, import_react.useCallback)(() => {
+    if (!vertical) {
+      return 0;
+    }
+    const hue = color.get("alpha");
+    if (!el) {
+      return 0;
+    }
+    return Math.round(hue * (el.current.offsetHeight - thumb.current.offsetHeight / 2) / 100);
+  }, [color, vertical]);
+  const update = (0, import_react.useCallback)(() => {
+    if (color) {
+      setThumbLeft(getThumbLeft());
+      setThumbTop(getThumbTop());
+      setBackground(getBackground());
+    }
+  }, [color, getBackground, getThumbLeft, getThumbTop]);
+  const handleDrag = (0, import_react.useCallback)(
+    (event) => {
+      const rect = el.current.getBoundingClientRect();
+      const { clientX, clientY } = (0, import_util.getClientXY)(event);
+      let hue;
+      if (!vertical) {
+        let left = clientX - rect.left;
+        left = Math.max(thumb.current.offsetWidth / 2, left);
+        left = Math.min(left, rect.width - thumb.current.offsetWidth / 2);
+        color.set("alpha", Math.round((left - thumb.current.offsetWidth / 2) / (rect.width - thumb.current.offsetWidth) * 100));
+      } else {
+        let top = clientY - rect.top;
+        top = Math.max(thumb.current.offsetHeight / 2, top);
+        top = Math.min(top, rect.height - thumb.current.offsetHeight / 2);
+        color.set("alpha", Math.round((top - thumb.current.offsetHeight / 2) / (rect.height - thumb.current.offsetHeight) * 100));
+      }
+      update();
+      onChange(color);
+    },
+    [color, onChange, update, vertical]
+  );
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    update
+  }));
+  (0, import_ahooks.useMount)(() => {
+    const dragConfig = {
+      drag: (event) => {
+        handleDrag(event);
+      },
+      end: (event) => {
+        handleDrag(event);
+      }
+    };
+    (0, import_draggable.default)(bar.current, dragConfig);
+    (0, import_draggable.default)(thumb.current, dragConfig);
+  });
+  const handleClick = (0, import_react.useCallback)(
+    (event) => {
+      const target = event.target;
+      if (target !== thumb.current) {
+        handleDrag(event);
+      }
+    },
+    [handleDrag]
+  );
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), is({ vertical })), ref: el }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`bar`, ref: bar, onClick: handleClick, style: { backgroundImage: background } }), /* @__PURE__ */ import_react.default.createElement("div", { className: e`thumb`, ref: thumb, style: { left: thumbLeft, top: thumbTop } }));
+});
+AlphaSlider.defaultProps = {};
+AlphaSlider.displayName = "AlphaSlider";
+var AlphaSlider_default = AlphaSlider;

package/dist/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorPickerProps } from './typings';
+declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<any>>;
+export default ColorPicker;

package/dist/ColorPicker/ColorPicker.js

@@ -0,0 +1,215 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ColorPicker/ColorPicker.tsx
+var ColorPicker_exports = {};
+__export(ColorPicker_exports, {
+  default: () => ColorPicker_default
+});
+module.exports = __toCommonJS(ColorPicker_exports);
+var import_ahooks = require("ahooks");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_Button = require("../Button");
+var import_Input = require("../Input");
+var import_Popper = require("../Popper");
+var import_Util = require("../Util");
+var import_hooks = require("../hooks");
+var import_AlphaSlider = __toESM(require("./AlphaSlider"));
+var import_HueSlider = __toESM(require("./HueSlider"));
+var import_Predefine = __toESM(require("./Predefine"));
+var import_SvPanel = __toESM(require("./SvPanel"));
+var import_color = __toESM(require("./color"));
+var import_util = require("./util");
+var ColorPicker = (0, import_react.forwardRef)((props, ref) => {
+  const { classPrefix = "color", className, style, showAlpha, predefine, onChange, onEnter, afterLeave, ...rest } = props;
+  const [transitionProps] = (0, import_hooks.partitionAnimationProps)(rest);
+  const [popperProps] = (0, import_hooks.partitionPopperPropsUtils)(rest);
+  const { b, bm, be, is } = (0, import_hooks.useClassNames)(classPrefix);
+  const disabled = (0, import_hooks.useDisabled)(props.disabled);
+  const size = (0, import_hooks.useSize)(props.size);
+  const [value, setValue] = (0, import_hooks.useControlled)(props.value, props.defaultValue);
+  const initialColor = (0, import_react.useRef)();
+  const isConfirm = (0, import_react.useRef)(false);
+  (0, import_ahooks.useMount)(() => {
+    initialColor.current = value;
+  });
+  (0, import_react.useEffect)(() => {
+    initialColor.current = value;
+  }, [value]);
+  const colorFormat = (0, import_react.useMemo)(() => {
+    if (showAlpha) {
+      return "rgb";
+    } else if ((0, import_Util.isNotEmpty)(props.colorFormat)) {
+      return props.colorFormat;
+    }
+    return "hex";
+  }, [props.colorFormat, showAlpha]);
+  const color = (0, import_react.useRef)(
+    new import_color.default({
+      enableAlpha: showAlpha,
+      format: colorFormat,
+      value
+    })
+  );
+  const [displayedColor, setdisplayedColor] = (0, import_react.useState)(() => {
+    if (!value) {
+      return "transparent";
+    }
+    return (0, import_util.displayedRgb)(color.current, showAlpha);
+  });
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)();
+  const containerRef = (0, import_react.useRef)();
+  const svPanelRef = (0, import_react.useRef)();
+  const hueSliderRef = (0, import_react.useRef)();
+  const alphaSliderRef = (0, import_react.useRef)();
+  const predefineRef = (0, import_react.useRef)();
+  const popperInstRef = (0, import_react.useRef)();
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    get ref() {
+      return containerRef;
+    },
+    get color() {
+      return color.current;
+    }
+  }));
+  const handleChange = (0, import_react.useCallback)(
+    (_color) => {
+      var _a, _b, _c;
+      setdisplayedColor((0, import_util.displayedRgb)(_color, showAlpha));
+      (_a = svPanelRef.current) == null ? void 0 : _a.update();
+      (_b = alphaSliderRef.current) == null ? void 0 : _b.update();
+      (_c = predefineRef.current) == null ? void 0 : _c.update();
+    },
+    [showAlpha]
+  );
+  const confirmValue = (0, import_react.useCallback)(() => {
+    var _a, _b;
+    isConfirm.current = true;
+    onChange == null ? void 0 : onChange((_a = color.current) == null ? void 0 : _a.value);
+    setValue((_b = color.current) == null ? void 0 : _b.value);
+    setVisible(false);
+  }, [onChange, setValue]);
+  const onClear = (0, import_react.useCallback)(() => {
+    var _a;
+    isConfirm.current = true;
+    setVisible(false);
+    setdisplayedColor("");
+    onChange == null ? void 0 : onChange(null);
+    setValue(null);
+    (_a = color.current) == null ? void 0 : _a.fromString("");
+  }, [color, onChange, setValue]);
+  const handleConfirm = (0, import_react.useCallback)(() => {
+    var _a;
+    (_a = color.current) == null ? void 0 : _a.fromString(inputRef.current.getValue());
+    setValue(inputRef.current.getValue());
+    handleChange(color.current);
+  }, [handleChange, setValue]);
+  const handleOnEnter = (0, import_react.useCallback)(
+    (node) => {
+      var _a, _b, _c, _d;
+      (_a = popperInstRef.current) == null ? void 0 : _a.update();
+      (_b = svPanelRef.current) == null ? void 0 : _b.update();
+      (_c = hueSliderRef.current) == null ? void 0 : _c.update();
+      (_d = alphaSliderRef.current) == null ? void 0 : _d.update();
+      onEnter == null ? void 0 : onEnter(node);
+    },
+    [onEnter]
+  );
+  const handleAfterLeave = (0, import_react.useCallback)(
+    (node) => {
+      var _a;
+      if (!isConfirm.current) {
+        if (initialColor.current) {
+          (_a = color.current) == null ? void 0 : _a.fromString(initialColor.current);
+          setValue(initialColor.current);
+          handleChange(color.current);
+        } else {
+          onClear();
+        }
+      } else {
+        isConfirm.current = false;
+      }
+      afterLeave == null ? void 0 : afterLeave(node);
+    },
+    [afterLeave, handleChange, onClear, setValue]
+  );
+  (0, import_react.useEffect)(() => {
+    var _a;
+    return (_a = inputRef.current) == null ? void 0 : _a.setValue(displayedColor === "transparent" ? "" : color.current.value);
+  }, [displayedColor]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(b`picker`, bm("picker", size), be("tooltip", "trigger", false), is({ disabled }), className),
+      style,
+      ref: containerRef,
+      onClick: () => {
+        if (!disabled) {
+          setVisible(true);
+        }
+      },
+      ...popperProps
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: be("picker", "trigger") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(be("picker", "color"), is({ alpha: (0, import_Util.isEmpty)(value) })) }, /* @__PURE__ */ import_react.default.createElement("div", { className: be("picker", "color-inner"), style: { backgroundColor: displayedColor } })))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Popper.Popper,
+    {
+      visible,
+      referenceElement: containerRef,
+      onDestroy: () => setVisible(false),
+      popperClass: (0, import_classnames.default)(be("picker", "panel"), b`dropdown`),
+      popperInstRef,
+      onEnter: handleOnEnter,
+      afterLeave: (node) => handleAfterLeave(node),
+      showArrow: false,
+      offset: 0,
+      unmountOnExit: true,
+      ...transitionProps
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: be("dropdown", "main-wrapper") }, /* @__PURE__ */ import_react.default.createElement(import_HueSlider.default, { color: color.current, onChange: handleChange, ref: hueSliderRef, vertical: true }), /* @__PURE__ */ import_react.default.createElement(import_SvPanel.default, { color: color.current, onChange: handleChange, ref: svPanelRef })), showAlpha && /* @__PURE__ */ import_react.default.createElement(import_AlphaSlider.default, { color: color.current, onChange: handleChange, ref: alphaSliderRef }), predefine && /* @__PURE__ */ import_react.default.createElement(import_Predefine.default, { color: color.current, onChange: handleChange, colors: predefine, ref: predefineRef }), /* @__PURE__ */ import_react.default.createElement("div", { className: be("dropdown", "btns") }, /* @__PURE__ */ import_react.default.createElement("span", { className: be("dropdown", "value") }, /* @__PURE__ */ import_react.default.createElement(
+      import_Input.Input,
+      {
+        ref: inputRef,
+        defaultValue: displayedColor === "transparent" ? "" : color.current.value,
+        size: "small",
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            handleConfirm();
+          }
+        },
+        onBlur: handleConfirm,
+        clearable: false
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { size: "small", type: "primary", link: true, className: be("dropdown", "link-btn"), onClick: onClear }, "重置"), /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { plain: true, size: "small", className: be("dropdown", "btn"), onClick: confirmValue }, "确定")))
+  ));
+});
+ColorPicker.defaultProps = {};
+ColorPicker.displayName = "ColorPicker";
+var ColorPicker_default = ColorPicker;

package/dist/ColorPicker/HueSlider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import Color from './color';
+interface Props {
+    color: Color;
+    vertical?: boolean;
+    onChange: (color: Color) => void;
+}
+export interface HueSliderRef {
+    update: () => void;
+}
+declare const HueSlider: React.ForwardRefExoticComponent<Props & React.RefAttributes<HueSliderRef>>;
+export default HueSlider;

package/dist/ColorPicker/HueSlider.js

@@ -0,0 +1,125 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ColorPicker/HueSlider.tsx
+var HueSlider_exports = {};
+__export(HueSlider_exports, {
+  default: () => HueSlider_default
+});
+module.exports = __toCommonJS(HueSlider_exports);
+var import_ahooks = require("ahooks");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_hooks = require("../hooks");
+var import_draggable = __toESM(require("./draggable"));
+var import_util = require("./util");
+var HueSlider = (0, import_react.forwardRef)((props, ref) => {
+  const { color, vertical, onChange } = props;
+  const { b, e, is } = (0, import_hooks.useClassNames)("color-hue-slider");
+  const el = (0, import_react.useRef)();
+  const thumb = (0, import_react.useRef)(null);
+  const bar = (0, import_react.useRef)(null);
+  const [thumbLeft, setThumbLeft] = (0, import_react.useState)(0);
+  const [thumbTop, setThumbTop] = (0, import_react.useState)(0);
+  const getThumbLeft = (0, import_react.useCallback)(() => {
+    if (vertical) {
+      return 0;
+    }
+    const hue = color.get("hue");
+    if (!el.current) {
+      return 0;
+    }
+    return Math.round(hue * (el.current.offsetWidth - thumb.current.offsetWidth / 2) / 360);
+  }, [color, vertical]);
+  const getThumbTop = (0, import_react.useCallback)(() => {
+    if (!vertical) {
+      return 0;
+    }
+    const hue = color.get("hue");
+    if (!el) {
+      return 0;
+    }
+    return Math.round(hue * (el.current.offsetHeight - thumb.current.offsetHeight / 2) / 360);
+  }, [color, vertical]);
+  const update = (0, import_react.useCallback)(() => {
+    if (color) {
+      setThumbLeft(getThumbLeft());
+      setThumbTop(getThumbTop());
+    }
+  }, [color, getThumbLeft, getThumbTop]);
+  const handleDrag = (0, import_react.useCallback)(
+    (event) => {
+      const rect = el.current.getBoundingClientRect();
+      const { clientX, clientY } = (0, import_util.getClientXY)(event);
+      let hue;
+      if (!vertical) {
+        let left = clientX - rect.left;
+        left = Math.min(left, rect.width - thumb.current.offsetWidth / 2);
+        left = Math.max(thumb.current.offsetWidth / 2, left);
+        hue = Math.round((left - thumb.current.offsetWidth / 2) / (rect.width - thumb.current.offsetWidth) * 360);
+      } else {
+        let top = clientY - rect.top;
+        top = Math.min(top, rect.height - thumb.current.offsetHeight / 2);
+        top = Math.max(thumb.current.offsetHeight / 2, top);
+        hue = Math.round((top - thumb.current.offsetHeight / 2) / (rect.height - thumb.current.offsetHeight) * 360);
+      }
+      color.set("hue", hue);
+      update();
+      onChange(color);
+    },
+    [color, onChange, update, vertical]
+  );
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    update
+  }));
+  (0, import_ahooks.useMount)(() => {
+    const dragConfig = {
+      drag: (event) => {
+        handleDrag(event);
+      },
+      end: (event) => {
+        handleDrag(event);
+      }
+    };
+    (0, import_draggable.default)(bar.current, dragConfig);
+    (0, import_draggable.default)(thumb.current, dragConfig);
+  });
+  const handleClick = (0, import_react.useCallback)(
+    (event) => {
+      const target = event.target;
+      if (target !== thumb.current) {
+        handleDrag(event);
+      }
+    },
+    [handleDrag]
+  );
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), is({ vertical })), ref: el }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`bar`, ref: bar, onClick: handleClick }), /* @__PURE__ */ import_react.default.createElement("div", { className: e`thumb`, ref: thumb, style: { left: thumbLeft, top: thumbTop } }));
+});
+HueSlider.defaultProps = {};
+HueSlider.displayName = "HueSlider";
+var HueSlider_default = HueSlider;

package/dist/ColorPicker/Predefine.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import Color from './color';
+interface Props {
+    color: Color;
+    colors: string[];
+    onChange: (color: Color) => void;
+}
+export interface PredefineRef {
+    update: () => void;
+}
+declare const Predefine: React.ForwardRefExoticComponent<Props & React.RefAttributes<PredefineRef>>;
+export default Predefine;

package/dist/ColorPicker/Predefine.js

@@ -0,0 +1,72 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ColorPicker/Predefine.tsx
+var Predefine_exports = {};
+__export(Predefine_exports, {
+  default: () => Predefine_default
+});
+module.exports = __toCommonJS(Predefine_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_hooks = require("../hooks");
+var import_util = require("./util");
+var Predefine = (0, import_react.forwardRef)((props, ref) => {
+  const { color, colors, onChange } = props;
+  const { b, e } = (0, import_hooks.useClassNames)("color-predefine");
+  const [rgbaColors, setRgbColors] = (0, import_react.useState)(() => (0, import_util.parseColors)(colors, color));
+  const handleSelect = (0, import_react.useCallback)(
+    (index) => {
+      color.fromString(colors[index]);
+      onChange(color);
+    },
+    [color, colors, onChange]
+  );
+  const update = (0, import_react.useCallback)(() => {
+    if (color) {
+      setRgbColors((0, import_util.parseColors)(colors, color));
+    }
+  }, [color, colors]);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    update
+  }));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: b() }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`colors` }, rgbaColors.map((item, index) => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: item.value,
+        className: (0, import_classnames.default)(e`color-selector`, { selected: item.selected, "is-alpha": item._alpha < 100 }),
+        onClick: () => handleSelect(index)
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { style: { backgroundColor: item.value } })
+    );
+  })));
+});
+Predefine.defaultProps = {};
+Predefine.displayName = "Predefine";
+var Predefine_default = Predefine;

package/dist/ColorPicker/SvPanel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import Color from './color';
+interface Props {
+    color: Color;
+    onChange: (color: Color) => void;
+}
+export interface SvPanelRef {
+    update: () => void;
+}
+declare const SvPanel: React.ForwardRefExoticComponent<Props & React.RefAttributes<SvPanelRef>>;
+export default SvPanel;