tdesign-react 0.31.2-alpha.1 → 0.32.0

package/lib/color-picker/components/panel/format/inputs.js

@@ -0,0 +1,220 @@
+/**
+ * tdesign v0.32.0
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var defineProperty = require('../../../../_chunks/dep-59765535.js');
+var toConsumableArray = require('../../../../_chunks/dep-495e820f.js');
+var React = require('react');
+var lodash = require('lodash');
+var _common_js_colorPicker_color = require('../../../../_common/js/color-picker/color.js');
+var input_index = require('../../../../input/index.js');
+var inputNumber_index = require('../../../../input-number/index.js');
+var colorPicker_components_panel_format_config = require('./config.js');
+require('../../../../_chunks/dep-2476807a.js');
+require('../../../../_chunks/dep-28f89e64.js');
+require('../../../../_chunks/dep-4809c698.js');
+require('tinycolor2');
+require('../../../../_common/js/color-picker/cmyk.js');
+require('../../../../_common/js/color-picker/gradient.js');
+require('../../../../input/Input.js');
+require('../../../../_chunks/dep-e42b1d6f.js');
+require('../../../../_chunks/dep-fbb7cdca.js');
+require('classnames');
+require('tdesign-icons-react');
+require('../../../../_chunks/dep-fb1b11ca.js');
+require('../../../../_chunks/dep-9b448c2e.js');
+require('../../../../_chunks/dep-dbadac1a.js');
+require('../../../../_util/forwardRefWithStatics.js');
+require('hoist-non-react-statics');
+require('../../../../_util/useConfig.js');
+require('../../../../_chunks/dep-160028a3.js');
+require('../../../../_chunks/dep-f250efe9.js');
+require('../../../../_chunks/dep-6b044992.js');
+require('../../../../_chunks/dep-d78d4a02.js');
+require('../../../../_chunks/dep-d04a9df9.js');
+require('../../../../_chunks/dep-952e403b.js');
+require('../../../../_chunks/dep-9920b2ff.js');
+require('../../../../_chunks/dep-1d2db52a.js');
+require('../../../../_chunks/dep-022a84e7.js');
+require('../../../../_chunks/dep-b8481954.js');
+require('../../../../_chunks/dep-83011b3b.js');
+require('../../../../_chunks/dep-245fb652.js');
+require('../../../../_chunks/dep-8fb6f912.js');
+require('../../../../_chunks/dep-3d6fee40.js');
+require('../../../../_chunks/dep-68031a17.js');
+require('../../../../_chunks/dep-0c72eab7.js');
+require('../../../../_common/js/global-config/locale/zh_CN.js');
+require('../../../../config-provider/zh_CN_config.js');
+require('../../../../_util/helper.js');
+require('../../../../_chunks/dep-e74f7a51.js');
+require('../../../../_chunks/dep-92e7e8c4.js');
+require('../../../../_chunks/dep-e08f0a55.js');
+require('../../../../_chunks/dep-1de9cd59.js');
+require('../../../../_chunks/dep-d3242103.js');
+require('../../../../input/InputGroup.js');
+require('../../../../_util/useDefaultValue.js');
+require('../../../../_util/useDefault.js');
+require('../../../../_util/noop.js');
+require('../../../../locale/LocalReceiver.js');
+require('../../../../input-number/InputNumber.js');
+require('../../../../_util/useCommonClassName.js');
+require('../../../../_util/useUpdateEffect.js');
+require('../../../../_util/useLayoutEffect.js');
+require('../../../../_util/dom.js');
+require('raf');
+require('../../../../_chunks/dep-f762ab0a.js');
+require('../../../../_util/easing.js');
+require('../../../../input-number/StepHandler.js');
+require('../../../../button/index.js');
+require('../../../../button/Button.js');
+require('../../../../_util/useRipple.js');
+require('../../../../_util/useAnimation.js');
+require('../../../../_util/setStyle.js');
+require('../../../../loading/index.js');
+require('../../../../loading/Loading.js');
+require('../../../../common/Portal.js');
+require('react-dom');
+require('../../../../loading/gradient.js');
+require('../../../../_common/js/loading/circle-adapter.js');
+require('../../../../_common/js/utils/set-style.js');
+require('../../../../_common/js/utils/helper.js');
+require('../../../../loading/plugin.js');
+require('../../../../input-number/utils/numberUtils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { defineProperty._defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var FormatInputs = function FormatInputs(props) {
+  var format = props.format,
+      enableAlpha = props.enableAlpha,
+      inputProps = props.inputProps,
+      disabled = props.disabled,
+      onInputChange = props.onInputChange,
+      color = props.color;
+  var formatValue = React.useRef({});
+  var lastModelValue = React.useRef({});
+
+  var object2color = function object2color(f) {
+    return _common_js_colorPicker_color.Color.object2color(formatValue.current, f);
+  };
+
+  var getFormatColorMap = function getFormatColorMap(type) {
+    if (type === "encode") {
+      return {
+        HSV: color.getHsva(),
+        HSL: color.getHsla(),
+        RGB: color.getRgba(),
+        CMYK: color.getCmyk(),
+        CSS: {
+          css: color.css
+        },
+        HEX: {
+          hex: color.hex
+        }
+      };
+    }
+
+    return {
+      HSV: object2color("HSV"),
+      HSL: object2color("HSL"),
+      RGB: object2color("RGB"),
+      CMYK: object2color("CMYK"),
+      CSS: formatValue.current.css,
+      HEX: formatValue.current.hex
+    };
+  };
+
+  var updateModelValue = function updateModelValue() {
+    var values = getFormatColorMap("encode")[format];
+    values.a = Math.round(color.alpha * 100);
+    Object.keys(values).forEach(function (key) {
+      formatValue.current[key] = values[key];
+      lastModelValue.current[key] = values[key];
+    });
+  };
+
+  updateModelValue();
+  var throttleUpdate = lodash.throttle(updateModelValue, 100);
+
+  var inputConfigs = function inputConfigs() {
+    var configs = toConsumableArray._toConsumableArray(colorPicker_components_panel_format_config.FORMAT_INPUT_CONFIG[format]);
+
+    if (enableAlpha) {
+      configs.push({
+        type: "inputNumber",
+        key: "a",
+        min: 0,
+        max: 100,
+        format: function format(value) {
+          return "".concat(value, "%");
+        },
+        flex: 1.15
+      });
+    }
+
+    return configs;
+  };
+
+  var handleInputChange = function handleInputChange(key, v) {
+    if (v === lastModelValue[key]) {
+      return;
+    }
+
+    formatValue.current[key] = v;
+    lastModelValue.current[key] = v;
+    var value = getFormatColorMap("decode")[format];
+    onInputChange(value, formatValue.current.a / 100, key, v);
+  };
+
+  React.useEffect(function () {
+    throttleUpdate();
+  }, [color.saturation, color.hue, color.value, color.alpha, format, throttleUpdate]);
+  return /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "input-group"
+  }, inputConfigs().map(function (config) {
+    var commonProps = _objectSpread(_objectSpread({}, inputProps), {}, {
+      title: formatValue.current[config.key],
+      value: formatValue.current[config.key],
+      align: "center",
+      disabled: disabled,
+      onBlur: function onBlur(v) {
+        return handleInputChange(config.key, v);
+      },
+      onEnter: function onEnter(v) {
+        return handleInputChange(config.key, v);
+      }
+    });
+
+    return /* @__PURE__ */React__default["default"].createElement("div", {
+      className: "input-group__item",
+      key: config.key,
+      style: {
+        flex: config.flex || 1
+      }
+    }, config.type === "input" ? /* @__PURE__ */React__default["default"].createElement(input_index.Input, _objectSpread(_objectSpread({}, commonProps), {}, {
+      maxlength: format === "HEX" ? 9 : void 0
+    })) : /* @__PURE__ */React__default["default"].createElement(inputNumber_index.InputNumber, _objectSpread(_objectSpread({}, commonProps), {}, {
+      min: config.min,
+      max: config.max,
+      step: 1,
+      format: config.format,
+      theme: "normal"
+    })));
+  }));
+};
+
+var FormatInput = /*#__PURE__*/React__default["default"].memo(FormatInputs);
+
+exports["default"] = FormatInput;
+//# sourceMappingURL=inputs.js.map

package/lib/color-picker/components/panel/format/inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputs.js","sources":["../../../../../src/color-picker/components/panel/format/inputs.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { throttle } from 'lodash';\nimport Color from '../../../../_common/js/color-picker/color';\nimport Input from '../../../../input';\nimport InputNumber from '../../../../input-number';\nimport { FORMAT_INPUT_CONFIG } from './config';\n\nconst FormatInputs = (props) => {\n  const { format, enableAlpha, inputProps, disabled, onInputChange, color } = props;\n  const formatValue = useRef<any>({});\n  const lastModelValue = useRef({});\n\n  const object2color = (f: string) => Color.object2color(formatValue.current, f);\n\n  // 获取不同格式的输入输出值\n  const getFormatColorMap = (type: 'encode' | 'decode') => {\n    if (type === 'encode') {\n      return {\n        HSV: color.getHsva(),\n        HSL: color.getHsla(),\n        RGB: color.getRgba(),\n        CMYK: color.getCmyk(),\n        CSS: {\n          css: color.css,\n        },\n        HEX: {\n          hex: color.hex,\n        },\n      };\n    }\n    // decode\n    return {\n      HSV: object2color('HSV'),\n      HSL: object2color('HSL'),\n      RGB: object2color('RGB'),\n      CMYK: object2color('CMYK'),\n      CSS: formatValue.current.css,\n      HEX: formatValue.current.hex,\n    };\n  };\n\n  // 更新modelValue\n  const updateModelValue = () => {\n    const values: any = getFormatColorMap('encode')[format];\n    values.a = Math.round(color.alpha * 100);\n    Object.keys(values).forEach((key) => {\n      formatValue.current[key] = values[key];\n      lastModelValue.current[key] = values[key];\n    });\n  };\n\n  updateModelValue();\n\n  const throttleUpdate = throttle(updateModelValue, 100);\n\n  const inputConfigs = () => {\n    const configs = [...FORMAT_INPUT_CONFIG[format]];\n    if (enableAlpha) {\n      configs.push({\n        type: 'inputNumber',\n        key: 'a',\n        min: 0,\n        max: 100,\n        format: (value: number) => `${value}%`,\n        flex: 1.15,\n      });\n    }\n    return configs;\n  };\n\n  const handleInputChange = (key: string, v: number | string) => {\n    if (v === lastModelValue[key]) {\n      return;\n    }\n    formatValue.current[key] = v;\n    lastModelValue.current[key] = v;\n    const value = getFormatColorMap('decode')[format];\n    onInputChange(value, formatValue.current.a / 100, key, v);\n  };\n\n  useEffect(() => {\n    throttleUpdate();\n  }, [color.saturation, color.hue, color.value, color.alpha, format, throttleUpdate]);\n\n  return (\n    <div className=\"input-group\">\n      {inputConfigs().map((config) => {\n        const commonProps = {\n          ...inputProps,\n          title: formatValue.current[config.key],\n          value: formatValue.current[config.key],\n          align: 'center',\n          disabled,\n          onBlur: (v: string) => handleInputChange(config.key, v),\n          onEnter: (v: string) => handleInputChange(config.key, v),\n        };\n        return (\n          <div\n            className=\"input-group__item\"\n            key={config.key}\n            style={{\n              flex: config.flex || 1,\n            }}\n          >\n            {config.type === 'input' ? (\n              <Input {...commonProps} maxlength={format === 'HEX' ? 9 : undefined} />\n            ) : (\n              <InputNumber\n                {...commonProps}\n                min={config.min}\n                max={config.max}\n                step={1}\n                format={config.format}\n                theme=\"normal\"\n              />\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default React.memo(FormatInputs);\n"],"names":["FormatInputs","props","format","enableAlpha","inputProps","disabled","onInputChange","color","formatValue","useRef","lastModelValue","object2color","f","Color","current","getFormatColorMap","type","HSV","getHsva","HSL","getHsla","RGB","getRgba","CMYK","getCmyk","CSS","css","HEX","hex","updateModelValue","values","a","Math","round","alpha","Object","keys","forEach","key","throttleUpdate","throttle","inputConfigs","configs","FORMAT_INPUT_CONFIG","push","min","max","value","flex","handleInputChange","v","useEffect","saturation","hue","React","createElement","className","map","config","commonProps","title","align","onBlur","onEnter","style","Input","maxlength","InputNumber","step","theme","memo"],"mappings":"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"}

package/lib/color-picker/components/panel/format/style/css.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/color-picker/components/panel/format/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/color-picker/components/panel/header.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RadioValue } from '../../../radio';
+import { TdColorModes } from '../../interface';
+import { TdColorPickerProps } from '../../type';
+export interface ColorPanelHeaderProps extends TdColorPickerProps {
+    mode?: TdColorModes;
+    togglePopup?: Function;
+    onModeChange?: (value: RadioValue, context: {
+        e: React.ChangeEvent<HTMLInputElement>;
+    }) => void;
+    baseClassName?: string;
+}
+declare const _default: React.MemoExoticComponent<(props: ColorPanelHeaderProps) => JSX.Element>;
+export default _default;

package/lib/color-picker/components/panel/header.js

@@ -0,0 +1,103 @@
+/**
+ * tdesign v0.32.0
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames');
+var tdesignIconsReact = require('tdesign-icons-react');
+var colorPicker_const = require('../../const.js');
+var radio_index = require('../../../radio/index.js');
+require('../../../_chunks/dep-b96ba0bb.js');
+require('../../../_chunks/dep-59765535.js');
+require('../../../_util/forwardRefWithStatics.js');
+require('hoist-non-react-statics');
+require('../../../common/Check.js');
+require('../../../_chunks/dep-28f89e64.js');
+require('../../../_chunks/dep-2476807a.js');
+require('../../../_chunks/dep-fbb7cdca.js');
+require('../../../_util/helper.js');
+require('../../../_chunks/dep-e74f7a51.js');
+require('../../../_chunks/dep-92e7e8c4.js');
+require('../../../_chunks/dep-9b448c2e.js');
+require('../../../_chunks/dep-e42b1d6f.js');
+require('../../../_chunks/dep-3d6fee40.js');
+require('../../../_chunks/dep-e08f0a55.js');
+require('../../../_chunks/dep-022a84e7.js');
+require('../../../_chunks/dep-1de9cd59.js');
+require('../../../_chunks/dep-d3242103.js');
+require('../../../_util/useConfig.js');
+require('../../../_chunks/dep-160028a3.js');
+require('../../../_chunks/dep-f250efe9.js');
+require('../../../_chunks/dep-6b044992.js');
+require('../../../_chunks/dep-d78d4a02.js');
+require('../../../_chunks/dep-fb1b11ca.js');
+require('../../../_chunks/dep-dbadac1a.js');
+require('../../../_chunks/dep-d04a9df9.js');
+require('../../../_chunks/dep-952e403b.js');
+require('../../../_chunks/dep-9920b2ff.js');
+require('../../../_chunks/dep-1d2db52a.js');
+require('../../../_chunks/dep-b8481954.js');
+require('../../../_chunks/dep-83011b3b.js');
+require('../../../_chunks/dep-245fb652.js');
+require('../../../_chunks/dep-8fb6f912.js');
+require('../../../_chunks/dep-68031a17.js');
+require('../../../_chunks/dep-0c72eab7.js');
+require('../../../_common/js/global-config/locale/zh_CN.js');
+require('../../../config-provider/zh_CN_config.js');
+require('../../../_util/useDefault.js');
+require('../../../_util/noop.js');
+require('../../../_util/useCommonClassName.js');
+require('../../../_util/useMutationObserver.js');
+require('../../../_chunks/dep-fea332a5.js');
+require('../../../_chunks/dep-726fb5a2.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+var Header = function Header(props) {
+  var baseClassName = props.baseClassName,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? "monochrome" : _props$mode,
+      colorModes = props.colorModes,
+      togglePopup = props.togglePopup,
+      _props$closeBtn = props.closeBtn,
+      closeBtn = _props$closeBtn === void 0 ? true : _props$closeBtn,
+      onModeChange = props.onModeChange;
+
+  var handleClosePopup = function handleClosePopup() {
+    togglePopup === null || togglePopup === void 0 ? void 0 : togglePopup(false);
+  };
+
+  return /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(baseClassName, "__head")
+  }, /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(baseClassName, "__mode")
+  }, (colorModes === null || colorModes === void 0 ? void 0 : colorModes.length) === 1 ? colorPicker_const.COLOR_MODES[colorModes[0]] : /* @__PURE__ */React__default["default"].createElement(radio_index.Radio.Group, {
+    variant: "default-filled",
+    size: "small",
+    value: mode,
+    onChange: onModeChange
+  }, Object.keys(colorPicker_const.COLOR_MODES).map(function (key) {
+    return /* @__PURE__ */React__default["default"].createElement(radio_index.Radio.Button, {
+      key: key,
+      value: key
+    }, colorPicker_const.COLOR_MODES[key]);
+  }))), closeBtn ? /* @__PURE__ */React__default["default"].createElement("span", {
+    role: "button",
+    className: classNames__default["default"]("".concat(baseClassName, "__icon"), "".concat(baseClassName, "__close")),
+    onClick: handleClosePopup
+  }, /* @__PURE__ */React__default["default"].createElement(tdesignIconsReact.CloseIcon, null)) : null);
+};
+
+var PanelHeader = /*#__PURE__*/React__default["default"].memo(Header);
+
+exports["default"] = PanelHeader;
+//# sourceMappingURL=header.js.map

package/lib/color-picker/components/panel/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../../src/color-picker/components/panel/header.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from 'tdesign-icons-react';\nimport { COLOR_MODES } from '../../const';\nimport Radio, { RadioValue } from '../../../radio';\nimport { TdColorModes } from '../../interface';\nimport { TdColorPickerProps } from '../../type';\n\nexport interface ColorPanelHeaderProps extends TdColorPickerProps {\n  mode?: TdColorModes;\n  togglePopup?: Function;\n  onModeChange?: (value: RadioValue, context: { e: React.ChangeEvent<HTMLInputElement> }) => void;\n  baseClassName?: string;\n}\n\nconst Header = (props: ColorPanelHeaderProps) => {\n  const { baseClassName, mode = 'monochrome', colorModes, togglePopup, closeBtn = true, onModeChange } = props;\n\n  const handleClosePopup = () => {\n    togglePopup?.(false);\n  };\n\n  return (\n    <div className={`${baseClassName}__head`}>\n      <div className={`${baseClassName}__mode`}>\n        {colorModes?.length === 1 ? (\n          COLOR_MODES[colorModes[0]]\n        ) : (\n          <Radio.Group variant=\"default-filled\" size=\"small\" value={mode} onChange={onModeChange}>\n            {Object.keys(COLOR_MODES).map((key) => (\n              <Radio.Button key={key} value={key}>\n                {COLOR_MODES[key]}\n              </Radio.Button>\n            ))}\n          </Radio.Group>\n        )}\n      </div>\n      {closeBtn ? (\n        <span\n          role=\"button\"\n          className={classNames(`${baseClassName}__icon`, `${baseClassName}__close`)}\n          onClick={handleClosePopup}\n        >\n          <CloseIcon />\n        </span>\n      ) : null}\n    </div>\n  );\n};\n\nexport default React.memo(Header);\n"],"names":["Header","props","baseClassName","mode","colorModes","togglePopup","closeBtn","onModeChange","handleClosePopup","React","createElement","className","length","COLOR_MODES","Radio","Group","variant","size","value","onChange","Object","keys","map","key","Button","role","classNames","onClick","CloseIcon","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAW;AACxB,EAAA,IAAQC,aAAR,GAAuGD,KAAvG,CAAQC,aAAR;AAAA,MAAuGD,WAAAA,GAAAA,KAAvG,CAAuBE,IAAvB;AAAA,MAAuBA,IAAvB,4BAA8B,YAA9B,GAAA,WAAA;AAAA,MAA4CC,UAA5C,GAAuGH,KAAvG,CAA4CG,UAA5C;AAAA,MAAwDC,WAAxD,GAAuGJ,KAAvG,CAAwDI,WAAxD;AAAA,MAAuGJ,eAAAA,GAAAA,KAAvG,CAAqEK,QAArE;AAAA,MAAqEA,QAArE,gCAAgF,IAAhF,GAAA,eAAA;AAAA,MAAsFC,YAAtF,GAAuGN,KAAvG,CAAsFM,YAAtF,CAAA;;AACA,EAAA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7BH,IAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,GAAAA,KAAAA,CAAAA,GAAAA,WAAW,CAAG,KAAH,CAAX,CAAA;AACD,GAFD,CAAA;;AAGA,EAAA,sBAAuBI,yBAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAChDC,IAAAA,SAAS,YAAKT,aAAL,EAAA,QAAA,CAAA;AADuC,GAA3B,iBAEJO,yBAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAC5CC,IAAAA,SAAS,YAAKT,aAAL,EAAA,QAAA,CAAA;AADmC,GAA3B,EAEhB,CAAAE,UAAU,KAAA,IAAV,IAAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,UAAU,CAAEQ,MAAZ,MAAuB,CAAvB,GAA2BC,6BAAW,CAACT,UAAU,CAAC,CAAD,CAAX,CAAtC,kBAAwEK,yBAAK,CAACC,aAAN,CAAoBI,iBAAK,CAACC,KAA1B,EAAiC;AAC1GC,IAAAA,OAAO,EAAE,gBADiG;AAE1GC,IAAAA,IAAI,EAAE,OAFoG;AAG1GC,IAAAA,KAAK,EAAEf,IAHmG;AAI1GgB,IAAAA,QAAQ,EAAEZ,YAAAA;AAJgG,GAAjC,EAKxEa,MAAM,CAACC,IAAP,CAAYR,6BAAZ,CAAyBS,CAAAA,GAAzB,CAA6B,UAACC,GAAD,EAAA;AAAA,IAAS,sBAAgBd,yBAAK,CAACC,aAAN,CAAoBI,iBAAK,CAACU,MAA1B,EAAkC;AACzFD,MAAAA,GAAG,EAAHA,GADyF;AAEzFL,MAAAA,KAAK,EAAEK,GAAAA;AAFkF,KAAlC,EAGtDV,6BAAW,CAACU,GAAD,CAH2C,CAAzB,CAAA;AAAA,GAA7B,CALwE,CAFxD,CAFI,EAYEjB,QAAQ,kBAAmBG,yBAAK,CAACC,aAAN,CAAoB,MAApB,EAA4B;AAC9Ee,IAAAA,IAAI,EAAE,QADwE;AAE9Ed,IAAAA,SAAS,EAAEe,8BAAU,WAAIxB,aAAJ,EAAA,QAAA,CAAA,EAAA,EAAA,CAAA,MAAA,CAA8BA,aAA9B,EAFyD,SAAA,CAAA,CAAA;AAG9EyB,IAAAA,OAAO,EAAEnB,gBAAAA;AAHqE,GAA5B,iBAIjCC,yBAAK,CAACC,aAAN,CAAoBkB,2BAApB,EAA+B,IAA/B,CAJiC,CAAnB,GAI0B,IAhBpC,CAAvB,CAAA;AAiBD,CAtBD,CAAA;;AAuBA,kBAAA,aAAenB,yBAAK,CAACoB,IAAN,CAAW7B,MAAX,CAAf;;;;"}

package/lib/color-picker/components/panel/hue.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TdColorBaseProps } from '../../interface';
+declare const _default: React.MemoExoticComponent<(props: TdColorBaseProps) => JSX.Element>;
+export default _default;

package/lib/color-picker/components/panel/hue.js

@@ -0,0 +1,40 @@
+/**
+ * tdesign v0.32.0
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var colorPicker_components_panel_slider = require('./slider.js');
+require('../../../_chunks/dep-59765535.js');
+require('classnames');
+require('../../const.js');
+require('../../../_util/useDrag.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var HUESlider = function HUESlider(props) {
+  var color = props.color,
+      baseClassName = props.baseClassName,
+      disabled = props.disabled,
+      onChange = props.onChange;
+  return /* @__PURE__ */React__default["default"].createElement(colorPicker_components_panel_slider["default"], {
+    disabled: disabled,
+    baseClassName: baseClassName,
+    className: "".concat(baseClassName, "__hue"),
+    color: color,
+    value: color.hue,
+    onChange: onChange
+  });
+};
+
+var HUESlider$1 = /*#__PURE__*/React__default["default"].memo(HUESlider);
+
+exports["default"] = HUESlider$1;
+//# sourceMappingURL=hue.js.map

package/lib/color-picker/components/panel/hue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hue.js","sources":["../../../../src/color-picker/components/panel/hue.tsx"],"sourcesContent":["import React from 'react';\nimport ColorSlider from './slider';\nimport { TdColorBaseProps } from '../../interface';\n\nconst HUESlider = (props: TdColorBaseProps) => {\n  const { color, baseClassName, disabled, onChange } = props;\n  return (\n    <ColorSlider\n      disabled={disabled}\n      baseClassName={baseClassName}\n      className={`${baseClassName}__hue`}\n      color={color}\n      value={color.hue}\n      onChange={onChange}\n    />\n  );\n};\n\nexport default React.memo(HUESlider);\n"],"names":["HUESlider","props","color","baseClassName","disabled","onChange","React","createElement","ColorSlider","className","value","hue","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAAW;AAC3B,EAAA,IAAQC,KAAR,GAAqDD,KAArD,CAAQC,KAAR;AAAA,MAAeC,aAAf,GAAqDF,KAArD,CAAeE,aAAf;AAAA,MAA8BC,QAA9B,GAAqDH,KAArD,CAA8BG,QAA9B;AAAA,MAAwCC,QAAxC,GAAqDJ,KAArD,CAAwCI,QAAxC,CAAA;AACA,EAAA,sBAAuBC,yBAAK,CAACC,aAAN,CAAoBC,8CAApB,EAAiC;AACtDJ,IAAAA,QAAQ,EAARA,QADsD;AAEtDD,IAAAA,aAAa,EAAbA,aAFsD;AAGtDM,IAAAA,SAAS,EAAKN,EAAAA,CAAAA,MAAAA,CAAAA,aAAL,EAH6C,OAAA,CAAA;AAItDD,IAAAA,KAAK,EAALA,KAJsD;AAKtDQ,IAAAA,KAAK,EAAER,KAAK,CAACS,GALyC;AAMtDN,IAAAA,QAAQ,EAARA,QAAAA;AANsD,GAAjC,CAAvB,CAAA;AAQD,CAVD,CAAA;;AAWA,kBAAA,aAAeC,yBAAK,CAACM,IAAN,CAAWZ,SAAX,CAAf;;;;"}

package/lib/color-picker/components/panel/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorPickerProps } from '../../interface';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ColorPickerProps, "value" | "style" | "className" | "disabled" | "multiple" | "defaultValue" | "format" | "onChange" | "popupProps" | "inputProps" | "selectInputProps" | "closeBtn" | "togglePopup" | "colorModes" | "enableAlpha" | "recentColors" | "defaultRecentColors" | "swatchColors" | "onPaletteBarChange" | "onRecentColorsChange"> & React.RefAttributes<HTMLDivElement>>>;
+export default _default;