@tendaui/react 1.1.1 → 1.1.2

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

@@ -0,0 +1,147 @@
+import { _ as _defineProperty } from '../../../../_chunks/dep-Cwish4GD.js';
+import React, { useRef, useEffect } from 'react';
+import { throttle } from 'lodash-es';
+import { getColorFormatMap, getColorFormatInputs } from '../../../utils/color-picker/index.js';
+import { Input } from '../../../../input/index.js';
+import { InputNumber } from '../../../../input-number/index.js';
+import { C as Color } from '../../../../_chunks/dep-DJmE940f.js';
+import '../../../../_chunks/dep-D-UKOauR.js';
+import '../../../../_chunks/dep-Chz4ZJCb.js';
+import '../../../../_chunks/dep-CgyDw_YI.js';
+import '../../../../_chunks/dep-CzLhKWCf.js';
+import '../../../../_chunks/dep-zOZQ0R9g.js';
+import '../../../../input/Input.js';
+import '../../../../_chunks/dep-DN7d1SzH.js';
+import 'classnames';
+import '@tendaui/icons';
+import '../../../../_chunks/dep-BRbJGDI9.js';
+import '../../../../_chunks/dep-DRwijJcv.js';
+import '../../../../_chunks/dep-DwWrhxkd.js';
+import '../../../../_chunks/dep-D6YxJv-F.js';
+import '../../../../_chunks/dep-DGvfel3I.js';
+import '../../../../_chunks/dep-gy8uvBaS.js';
+import '../../../../_chunks/dep-5U9UjDaf.js';
+import 'dayjs';
+import '../../../../input/InputGroup.js';
+import '../../../../input/style/css.js';
+import '../../../../input-number/InputNumber.js';
+import '../../../../button/index.js';
+import '../../../../button/Button.js';
+import '../../../../loading/index.js';
+import '../../../../loading/Loading.js';
+import '../../../../common/Portal.js';
+import 'react-dom';
+import '../../../../loading/Gradient.js';
+import '../../../../_chunks/dep-DQ6kXoi8.js';
+import '../../../../_chunks/dep-PPA-yoAy.js';
+import '../../../../_chunks/dep-DbVHGoUC.js';
+import '../../../../loading/style/css.js';
+import '../../../../button/style/css.js';
+import '../../../../input-number/useInputNumber.js';
+import '../../../../utils/log/index.js';
+import '../../../../_chunks/dep-DTlQ2dCA.js';
+import '../../../../_chunks/dep-ByzdZjUR.js';
+import '../../../../input-number/style/css.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 modelValueRef = useRef({});
+  var lastModelValue = useRef({});
+  var inputKey = useRef(0);
+  var updateModelValue = function updateModelValue() {
+    var value = getColorFormatMap(color, "encode")[format];
+    if (!value || typeof value === "string") return;
+    var valueObj = value;
+    if (enableAlpha && "a" in valueObj) {
+      valueObj.a = Math.round(color.alpha * 100);
+    }
+    var changedFormatValue = {};
+    Object.keys(valueObj).forEach(function (key) {
+      if (valueObj[key] !== modelValueRef.current[key]) {
+        changedFormatValue[key] = valueObj[key];
+      }
+      lastModelValue.current[key] = valueObj[key];
+    });
+    if (Object.keys(changedFormatValue).length > 0) {
+      modelValueRef.current = valueObj;
+    }
+  };
+  var handleInputChange = function handleInputChange(key, v, max) {
+    inputKey.current = performance.now();
+    if (v.toString().trim() === "") {
+      var lastValue = lastModelValue.current[key];
+      color.update(lastValue);
+      onInputChange();
+      return;
+    }
+    if (!v || v === lastModelValue.current[key] || Number(v) < 0 || Number(v) > max) return;
+    lastModelValue.current[key] = v;
+    var newFormatValue = _objectSpread(_objectSpread({}, modelValueRef.current), {}, _defineProperty({}, key, v));
+    modelValueRef.current = newFormatValue;
+    if (key === "a") {
+      color.alpha = v / 100;
+    } else if (key === "hex" || key === "css") {
+      color.update(v);
+    } else {
+      color.update(Color.object2color(newFormatValue, format));
+    }
+    onInputChange();
+  };
+  updateModelValue();
+  useEffect(function () {
+    var throttleUpdate = throttle(updateModelValue, 100);
+    throttleUpdate();
+    return function () {
+      return throttleUpdate.cancel();
+    };
+  }, [color.saturation, color.hue, color.value, color.alpha, format]);
+  return /* @__PURE__ */React.createElement("div", {
+    className: "input-group"
+  }, getColorFormatInputs(format, enableAlpha).map(function (config) {
+    var currentValue = modelValueRef.current[config.key];
+    var commonProps = _objectSpread(_objectSpread({}, inputProps), {}, {
+      disabled: disabled,
+      title: currentValue,
+      align: "center",
+      size: "small",
+      onBlur: function onBlur(v) {
+        return handleInputChange(config.key, v, config.max);
+      },
+      onEnter: function onEnter(v) {
+        return handleInputChange(config.key, v, config.max);
+      }
+    });
+    return /* @__PURE__ */React.createElement("div", {
+      className: "input-group__item",
+      key: config.key,
+      style: {
+        flex: config.flex || 1
+      }
+    }, config.type === "input" ? /* @__PURE__ */React.createElement(Input, _objectSpread(_objectSpread({}, commonProps), {}, {
+      defaultValue: currentValue,
+      key: "".concat(inputKey.current, "-").concat(currentValue),
+      maxlength: format === "HEX" ? 9 : void 0
+    })) : /* @__PURE__ */React.createElement(InputNumber, _objectSpread(_objectSpread({}, commonProps), {}, {
+      min: config.min,
+      max: config.max,
+      format: config.format,
+      step: 1,
+      value: currentValue,
+      onChange: function onChange(v) {
+        return handleInputChange(config.key, v !== null && v !== void 0 ? v : config.min, config.max);
+      },
+      theme: "normal"
+    })));
+  }));
+};
+var FormatInputs$1 = /*#__PURE__*/React.memo(FormatInputs);
+
+export { FormatInputs$1 as default };
+//# sourceMappingURL=inputs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inputs.js","sources":["../../../../../../components/color-picker/components/panel/format/inputs.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport { throttle } from \"lodash-es\";\nimport { Color, getColorFormatInputs, getColorFormatMap } from \"../../../utils/color-picker\";\nimport type { TdColorFormatProps } from \".\";\nimport Input from \"../../../../input\";\nimport InputNumber from \"../../../../input-number\";\n\nconst FormatInputs = (props: TdColorFormatProps) => {\n  const { format, enableAlpha, inputProps, disabled, onInputChange, color } = props;\n  const modelValueRef = useRef<Record<string, number | string>>({});\n  const lastModelValue = useRef<Record<string, number | string>>({});\n  const inputKey = useRef<number>(0);\n\n  const updateModelValue = () => {\n    const value = getColorFormatMap(color, \"encode\")[format];\n    if (!value || typeof value === \"string\") return;\n\n    const valueObj = value as Record<string, number | string>;\n    if (enableAlpha && \"a\" in valueObj) {\n      valueObj.a = Math.round(color.alpha * 100);\n    }\n\n    const changedFormatValue: Record<string, number | string> = {};\n    Object.keys(valueObj).forEach((key) => {\n      if (valueObj[key] !== modelValueRef.current[key]) {\n        changedFormatValue[key] = valueObj[key];\n      }\n      lastModelValue.current[key] = valueObj[key];\n    });\n\n    if (Object.keys(changedFormatValue).length > 0) {\n      modelValueRef.current = valueObj;\n    }\n  };\n\n  const handleInputChange = (key: string, v: number | string, max: number) => {\n    inputKey.current = performance.now();\n\n    if (v.toString().trim() === \"\") {\n      const lastValue = lastModelValue.current[key];\n      color.update(lastValue as string);\n      onInputChange();\n      return;\n    }\n\n    if (!v || v === lastModelValue.current[key] || Number(v) < 0 || Number(v) > max) return;\n    lastModelValue.current[key] = v;\n\n    const newFormatValue = {\n      ...modelValueRef.current,\n      [key]: v\n    };\n    modelValueRef.current = newFormatValue;\n    if (key === \"a\") {\n      color.alpha = (v as number) / 100;\n    } else if (key === \"hex\" || key === \"css\") {\n      color.update(v as string);\n    } else {\n      color.update(Color.object2color(newFormatValue, format));\n    }\n    onInputChange();\n  };\n\n  updateModelValue();\n  useEffect(() => {\n    const throttleUpdate = throttle(updateModelValue, 100);\n    throttleUpdate();\n    return () => throttleUpdate.cancel();\n  }, [color.saturation, color.hue, color.value, color.alpha, format]);\n\n  return (\n    <div className=\"input-group\">\n      {getColorFormatInputs(format, enableAlpha).map((config) => {\n        const currentValue = modelValueRef.current[config.key];\n        const commonProps = {\n          ...inputProps,\n          disabled,\n          title: currentValue,\n          align: \"center\" as const,\n          size: \"small\" as const,\n          onBlur: (v: string) => handleInputChange(config.key, v, config.max),\n          onEnter: (v: string) => handleInputChange(config.key, v, config.max)\n        };\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\n                {...commonProps}\n                defaultValue={currentValue as string}\n                key={`${inputKey.current}-${currentValue}`}\n                maxlength={format === \"HEX\" ? 9 : undefined}\n              />\n            ) : (\n              <InputNumber\n                {...commonProps}\n                min={config.min}\n                max={config.max}\n                format={config.format as (value: number) => string}\n                step={1}\n                value={currentValue as number}\n                onChange={(v) => handleInputChange(config.key, v ?? (config.min as number), config.max)}\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","modelValueRef","useRef","lastModelValue","inputKey","updateModelValue","value","getColorFormatMap","valueObj","a","Math","round","alpha","changedFormatValue","Object","keys","forEach","key","current","length","handleInputChange","v","max","performance","now","toString","trim","lastValue","update","Number","newFormatValue","_objectSpread","_defineProperty","Color","object2color","useEffect","throttleUpdate","throttle","cancel","saturation","hue","React","createElement","className","getColorFormatInputs","map","config","currentValue","commonProps","title","align","size","onBlur","onEnter","style","flex","type","Input","defaultValue","concat","maxlength","InputNumber","min","step","onChange","theme","memo"],"mappings":"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"}

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

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

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import '../../utils/color-picker/index.js';
+import { Radio } from '../../../radio/index.js';
+import { j as COLOR_MODES } from '../../../_chunks/dep-DJmE940f.js';
+import '../../../_chunks/dep-Chz4ZJCb.js';
+import '../../../_chunks/dep-Cwish4GD.js';
+import '../../../_chunks/dep-D-UKOauR.js';
+import '../../../_chunks/dep-CgyDw_YI.js';
+import '../../../_chunks/dep-CzLhKWCf.js';
+import '../../../_chunks/dep-zOZQ0R9g.js';
+import 'lodash-es';
+import '../../../_chunks/dep-Dr5wkz0z.js';
+import '../../../_chunks/dep-BP0-apUT.js';
+import 'hoist-non-react-statics';
+import '../../../common/Check.js';
+import '../../../_chunks/dep-DN7d1SzH.js';
+import 'classnames';
+import '../../../_chunks/dep-DQ6kXoi8.js';
+import '../../../_chunks/dep-gy8uvBaS.js';
+import '../../../_chunks/dep-5U9UjDaf.js';
+import 'dayjs';
+import '../../../_chunks/dep-DwWrhxkd.js';
+import '../../../_chunks/dep-DTlQ2dCA.js';
+import '../../../_chunks/dep-DGvfel3I.js';
+import '../../../_chunks/dep-CkmtEv0Y.js';
+import '../../../_chunks/dep-Ccktr_jk.js';
+import '../../../_chunks/dep-DRwijJcv.js';
+import '../../../radio/style/css.js';
+
+var Header = function Header(props) {
+  var _props$baseClassName = props.baseClassName,
+    baseClassName = _props$baseClassName === void 0 ? "" : _props$baseClassName,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? "monochrome" : _props$mode,
+    colorModes = props.colorModes,
+    onModeChange = props.onModeChange;
+  var isSingleMode = (colorModes === null || colorModes === void 0 ? void 0 : colorModes.length) === 1;
+  if (isSingleMode) {
+    return null;
+  }
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__head")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__mode")
+  }, /* @__PURE__ */React.createElement(Radio.Group, {
+    variant: "default-filled",
+    size: "small",
+    value: mode,
+    onChange: onModeChange
+  }, Object.keys(COLOR_MODES).map(function (key) {
+    return /* @__PURE__ */React.createElement(Radio.Button, {
+      key: key,
+      value: key
+    }, COLOR_MODES[key]);
+  }))));
+};
+var header = /*#__PURE__*/React.memo(Header);
+
+export { header as default };
+//# sourceMappingURL=header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../../../components/color-picker/components/panel/header.tsx"],"sourcesContent":["import React from \"react\";\nimport { COLOR_MODES } from \"../../utils/color-picker\";\nimport Radio, { RadioValue } from \"../../../radio\";\nimport { TdColorModes, TdColorPickerProps } from \"../../type\";\n\nexport interface ColorPanelHeaderProps extends TdColorPickerProps {\n  mode?: TdColorModes;\n  colorModes?: Array<TdColorModes>;\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, onModeChange } = props;\n\n  const isSingleMode = colorModes?.length === 1;\n\n  if (isSingleMode) {\n    return null;\n  }\n\n  return (\n    <div className={`${baseClassName}__head`}>\n      <div className={`${baseClassName}__mode`}>\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 as keyof typeof COLOR_MODES]}\n            </Radio.Button>\n          ))}\n        </Radio.Group>\n      </div>\n    </div>\n  );\n};\n\nexport default React.memo(Header);\n"],"names":["Header","props","_props$baseClassName","baseClassName","_props$mode","mode","colorModes","onModeChange","isSingleMode","length","React","createElement","className","concat","Radio","Group","variant","size","value","onChange","Object","keys","COLOR_MODES","map","key","Button","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAMA,MAAA,GAAS,SAATA,MAAAA,CAAUC,KAAA,EAAiC;AAC/C,EAAA,IAAAC,oBAAA,GAA8ED,KAAA,CAAtEE,aAAA;AAAAA,IAAAA,aAAA,GAAAD,oBAAA,KAAA,KAAA,CAAA,GAAgB,EAAA,GAAAA,oBAAA;IAAAE,WAAA,GAAsDH,KAAA,CAAlDI;AAAAA,IAAAA,gCAAO,YAAA,GAAAD,WAAA;IAAcE,UAAA,GAA6BL,KAAA,CAA7BK,UAAA;IAAYC,eAAiBN,KAAA,CAAjBM;EAE7D,IAAMC,YAAA,GAAe,CAAAF,uBAAAA,iCAAAA,WAAYG,MAAA,MAAW,CAAA;AAE5C,EAAA,IAAID,YAAA,EAAc;AAChB,IAAA,OAAO,IAAA;AACT,EAAA;AAEA,EAAA,sBACEE,KAAA,CAAAC,aAAA,CAAC;IAAIC,SAAA,EAAA,EAAA,CAAAC,MAAA,CAAcV,aAAa,EAAA,QAAA;AAAA,GAAA,iBAC9BO,KAAA,CAAAC,aAAA,CAAC;IAAIC,SAAA,EAAA,EAAA,CAAAC,MAAA,CAAcV,aAAa,EAAA,QAAA;GAAA,iBAC9BO,KAAA,CAAAC,aAAA,CAACG,MAAMC,KAAA,EAAN;AAAYC,IAAAA,SAAQ,gBAAA;AAAiBC,IAAAA,IAAA,EAAK;AAAQC,IAAAA,KAAA,EAAOb,IAAA;AAAMc,IAAAA,UAAUZ;GAAA,EACvEa,MAAA,CAAOC,KAAKC,WAAW,CAAA,CAAEC,IAAI,UAACC,GAAA,EAAA;IAAA,0CAC5BV,KAAA,CAAMW,MAAA,EAAN;AAAaD,MAAAA,GAAA,EAAAA,GAAA;AAAUN,MAAAA,KAAA,EAAOM;OAC5BF,WAAA,CAAYE,GAA+B,CAC9C,CACD;EAAA,CAAA,CACH,CACF,CACF,CAAA;AAEJ,CAAA;AAEA,aAAA,aAAed,KAAA,CAAMgB,KAAK1B,MAAM,CAAA;;;;"}

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

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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import ColorSlider from './slider.js';
+import 'classnames';
+import '../../utils/color-picker/index.js';
+import '../../../_chunks/dep-DJmE940f.js';
+import '../../../_chunks/dep-CzLhKWCf.js';
+import '../../../_chunks/dep-Chz4ZJCb.js';
+import '../../../_chunks/dep-Cwish4GD.js';
+import '../../../_chunks/dep-D-UKOauR.js';
+import '../../../_chunks/dep-zOZQ0R9g.js';
+import 'lodash-es';
+import '../../../_chunks/dep-CgyDw_YI.js';
+import '../../../_chunks/dep-BbeHB7S3.js';
+
+var HueSlider = function HueSlider(props) {
+  var color = props.color,
+    baseClassName = props.baseClassName,
+    disabled = props.disabled,
+    onChange = props.onChange;
+  return /* @__PURE__ */React.createElement(ColorSlider, {
+    disabled: disabled,
+    baseClassName: baseClassName,
+    className: "".concat(baseClassName, "__hue"),
+    color: color,
+    value: color.hue,
+    type: "hue",
+    onChange: onChange
+  });
+};
+var HueSlider$1 = /*#__PURE__*/React.memo(HueSlider);
+
+export { HueSlider$1 as default };
+//# sourceMappingURL=hue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hue.js","sources":["../../../../../components/color-picker/components/panel/hue.tsx"],"sourcesContent":["import React from \"react\";\nimport type { TdColorBaseProps } from \"../../type\";\nimport ColorSlider from \"./slider\";\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      type=\"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","concat","value","hue","type","memo"],"mappings":";;;;;;;;;;;;;;AAIA,IAAMA,SAAA,GAAY,SAAZA,SAAAA,CAAaC,KAAA,EAA4B;AAC7C,EAAA,IAAQC,KAAA,GAA6CD,KAAA,CAA7CC,KAAA;IAAOC,aAAA,GAAsCF,KAAA,CAAtCE,aAAA;IAAeC,QAAA,GAAuBH,KAAA,CAAvBG,QAAA;IAAUC,WAAaJ,KAAA,CAAbI;AACxC,EAAA,sBACEC,KAAA,CAAAC,aAAA,CAACC,WAAA,EAAA;AACCJ,IAAAA,QAAA,EAAAA,QAAA;AACAD,IAAAA,aAAA,EAAAA,aAAA;AACAM,IAAAA,SAAA,EAAA,EAAA,CAAAC,MAAA,CAAcP,aAAa,EAAA,OAAA,CAAA;AAC3BD,IAAAA,KAAA,EAAAA,KAAA;IACAS,OAAOT,KAAA,CAAMU,GAAA;AACbC,IAAAA,IAAA,EAAK,KAAA;AACLR,IAAAA,QAAA,EAAAA;AAAA,GACF,CAAA;AAEJ,CAAA;AAEA,kBAAA,aAAeC,KAAA,CAAMQ,KAAKd,SAAS,CAAA;;;;"}

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ColorPickerProps } from "../../type";
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

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

@@ -0,0 +1,32 @@
+import '../../../_chunks/dep-Cwish4GD.js';
+import '../../../_chunks/dep-CgyDw_YI.js';
+import '../../../_chunks/dep-CzLhKWCf.js';
+import 'react';
+import 'classnames';
+import '../../utils/color-picker/index.js';
+import '../../../_chunks/dep-DTlQ2dCA.js';
+import '../../../_chunks/dep-DwWrhxkd.js';
+import '../../../_chunks/dep-DGvfel3I.js';
+import '../../../_chunks/dep-CD_4-1Xb.js';
+export { C as default } from '../../../_chunks/dep-DURB9x8g.js';
+import '../../../_chunks/dep-oUgTcXgm.js';
+import './alpha.js';
+import './hue.js';
+import './saturation.js';
+import './swatches.js';
+import '../../../_chunks/dep-DJmE940f.js';
+import '../../../_chunks/dep-D-UKOauR.js';
+import '../../../_chunks/dep-Chz4ZJCb.js';
+import '../../../_chunks/dep-zOZQ0R9g.js';
+import 'lodash-es';
+import '../../../_chunks/dep-gy8uvBaS.js';
+import '../../../_chunks/dep-5U9UjDaf.js';
+import 'dayjs';
+import '../../../config-provider/index.js';
+import '../../../config-provider/ConfigProvider.js';
+import '../../../_chunks/dep-DN7d1SzH.js';
+import './slider.js';
+import '../../../_chunks/dep-BbeHB7S3.js';
+import '@tendaui/icons';
+import '../../../_chunks/dep-ByzdZjUR.js';
+//# sourceMappingURL=index.js.map

package/es/color-picker/components/panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/color-picker/components/panel/saturation.d.ts

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

package/es/color-picker/components/panel/saturation.js

@@ -0,0 +1,101 @@
+import React, { useRef, useCallback, useEffect } from 'react';
+import '../../utils/color-picker/index.js';
+import { u as useMouseEvent } from '../../../_chunks/dep-BbeHB7S3.js';
+import { l as SATURATION_PANEL_DEFAULT_HEIGHT, S as SATURATION_PANEL_DEFAULT_WIDTH } from '../../../_chunks/dep-DJmE940f.js';
+import '../../../_chunks/dep-Chz4ZJCb.js';
+import '../../../_chunks/dep-Cwish4GD.js';
+import '../../../_chunks/dep-D-UKOauR.js';
+import '../../../_chunks/dep-CgyDw_YI.js';
+import '../../../_chunks/dep-CzLhKWCf.js';
+import '../../../_chunks/dep-zOZQ0R9g.js';
+import 'lodash-es';
+
+var Saturation = function Saturation(props) {
+  var color = props.color,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    baseClassName = props.baseClassName;
+  var panelRef = useRef(null);
+  var panelRectRef = useRef({
+    width: SATURATION_PANEL_DEFAULT_WIDTH,
+    height: SATURATION_PANEL_DEFAULT_HEIGHT
+  });
+  var styles = function styles() {
+    var saturation = color.saturation,
+      value = color.value,
+      rgb = color.rgb;
+    var _panelRectRef$current = panelRectRef.current,
+      width = _panelRectRef$current.width,
+      height = _panelRectRef$current.height;
+    var top = Math.round((1 - value) * height);
+    var left = Math.round(saturation * width);
+    return {
+      color: rgb,
+      left: "".concat(left, "px"),
+      top: "".concat(top, "px")
+    };
+  };
+  var getSaturationAndValue = function getSaturationAndValue(coordinate) {
+    var _panelRectRef$current2 = panelRectRef.current,
+      width = _panelRectRef$current2.width,
+      height = _panelRectRef$current2.height;
+    var x = coordinate.x,
+      y = coordinate.y;
+    var saturation = Math.round(x / width * 100);
+    var value = Math.round((1 - y / height) * 100);
+    return {
+      saturation: saturation,
+      value: value
+    };
+  };
+  var handleDrag = useCallback(function (_ref) {
+    var x = _ref.x,
+      y = _ref.y;
+    if (disabled) return;
+    var _getSaturationAndValu = getSaturationAndValue({
+        x: x,
+        y: y
+      }),
+      saturation = _getSaturationAndValu.saturation,
+      value = _getSaturationAndValu.value;
+    onChange === null || onChange === void 0 || onChange({
+      saturation: saturation / 100,
+      value: value / 100
+    });
+  }, [disabled, onChange]);
+  useMouseEvent(panelRef, {
+    onDown: function onDown() {
+      var _panelRef$current, _panelRef$current2;
+      if (disabled) return;
+      panelRectRef.current.width = ((_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.offsetWidth) || panelRectRef.current.width;
+      panelRectRef.current.height = ((_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.offsetHeight) || panelRectRef.current.height;
+    },
+    onMove: function onMove(_, ctx) {
+      handleDrag(ctx.coordinate);
+    },
+    onUp: function onUp(_, ctx) {
+      handleDrag(ctx.coordinate);
+    }
+  });
+  useEffect(function () {
+    var _panelRef$current3, _panelRef$current4;
+    panelRectRef.current.width = ((_panelRef$current3 = panelRef.current) === null || _panelRef$current3 === void 0 ? void 0 : _panelRef$current3.offsetWidth) || SATURATION_PANEL_DEFAULT_WIDTH;
+    panelRectRef.current.height = ((_panelRef$current4 = panelRef.current) === null || _panelRef$current4 === void 0 ? void 0 : _panelRef$current4.offsetHeight) || SATURATION_PANEL_DEFAULT_HEIGHT;
+  }, [handleDrag]);
+  return /* @__PURE__ */React.createElement("div", {
+    ref: panelRef,
+    className: "".concat(baseClassName, "__saturation"),
+    style: {
+      background: "hsl(".concat(color.hue, ", 100%, 50%)")
+    }
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "".concat(baseClassName, "__thumb"),
+    role: "slider",
+    tabIndex: 0,
+    style: styles()
+  }));
+};
+var SaturationPanel = /*#__PURE__*/React.memo(Saturation);
+
+export { SaturationPanel as default };
+//# sourceMappingURL=saturation.js.map

package/es/color-picker/components/panel/saturation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saturation.js","sources":["../../../../../components/color-picker/components/panel/saturation.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport { SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH } from \"../../utils/color-picker\";\nimport useMouseEvent, { type MouseCoordinate } from \"../../../hooks/useMouseEvent\";\nimport type { TdColorBaseProps } from \"../../type\";\n\nconst Saturation = (props: TdColorBaseProps) => {\n  const { color, disabled, onChange, baseClassName } = props;\n  const panelRef = useRef<HTMLDivElement>(null);\n  const panelRectRef = useRef({\n    width: SATURATION_PANEL_DEFAULT_WIDTH,\n    height: SATURATION_PANEL_DEFAULT_HEIGHT\n  });\n\n  const styles = () => {\n    const { saturation, value, rgb } = color;\n    const { width, height } = panelRectRef.current;\n    const top = Math.round((1 - value) * height);\n    const left = Math.round(saturation * width);\n    return {\n      color: rgb,\n      left: `${left}px`,\n      top: `${top}px`\n    };\n  };\n\n  const getSaturationAndValue = (coordinate: MouseCoordinate) => {\n    const { width, height } = panelRectRef.current;\n    const { x, y } = coordinate;\n    const saturation = Math.round((x / width) * 100);\n    const value = Math.round((1 - y / height) * 100);\n    return {\n      saturation,\n      value\n    };\n  };\n\n  const handleDrag = useCallback(\n    ({ x, y }: MouseCoordinate) => {\n      if (disabled) return;\n      const { saturation, value } = getSaturationAndValue({ x, y });\n      onChange?.({\n        saturation: saturation / 100,\n        value: value / 100\n      });\n    },\n    [disabled, onChange]\n  );\n\n  useMouseEvent(panelRef, {\n    onDown: () => {\n      if (disabled) return;\n      panelRectRef.current.width = panelRef.current?.offsetWidth || panelRectRef.current.width;\n      panelRectRef.current.height = panelRef.current?.offsetHeight || panelRectRef.current.height;\n    },\n    onMove: (_, ctx) => {\n      handleDrag(ctx.coordinate);\n    },\n    onUp: (_, ctx) => {\n      handleDrag(ctx.coordinate);\n    }\n  });\n\n  useEffect(() => {\n    panelRectRef.current.width = panelRef.current?.offsetWidth || SATURATION_PANEL_DEFAULT_WIDTH;\n    panelRectRef.current.height = panelRef.current?.offsetHeight || SATURATION_PANEL_DEFAULT_HEIGHT;\n  }, [handleDrag]);\n\n  return (\n    <div\n      ref={panelRef}\n      className={`${baseClassName}__saturation`}\n      style={{\n        background: `hsl(${color.hue}, 100%, 50%)`\n      }}\n    >\n      <span className={`${baseClassName}__thumb`} role=\"slider\" tabIndex={0} style={styles()} />\n    </div>\n  );\n};\n\nexport default React.memo(Saturation);\n"],"names":["Saturation","props","color","disabled","onChange","baseClassName","panelRef","useRef","panelRectRef","width","SATURATION_PANEL_DEFAULT_WIDTH","height","SATURATION_PANEL_DEFAULT_HEIGHT","styles","saturation","value","rgb","_panelRectRef$current","current","top","Math","round","left","concat","getSaturationAndValue","coordinate","_panelRectRef$current2","x","y","handleDrag","useCallback","_ref","_getSaturationAndValu","useMouseEvent","onDown","_panelRef$current","_panelRef$current2","offsetWidth","offsetHeight","onMove","_","ctx","onUp","useEffect","_panelRef$current3","_panelRef$current4","React","createElement","ref","className","style","background","hue","role","tabIndex","memo"],"mappings":"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"}

package/es/color-picker/components/panel/slider.d.ts

@@ -0,0 +1,11 @@
+import React, { CSSProperties } from "react";
+import type { TdColorBaseProps } from "../../type";
+export interface TdColorSliderProps extends TdColorBaseProps {
+    className?: string;
+    value?: number;
+    maxValue?: number;
+    railStyle?: CSSProperties;
+    type: "hue" | "alpha";
+}
+declare const _default: React.MemoExoticComponent<(props: TdColorSliderProps) => React.JSX.Element>;
+export default _default;

package/es/color-picker/components/panel/slider.js

@@ -0,0 +1,121 @@
+import React, { useState, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import '../../utils/color-picker/index.js';
+import { u as useMouseEvent } from '../../../_chunks/dep-BbeHB7S3.js';
+import { _ as _slicedToArray } from '../../../_chunks/dep-CzLhKWCf.js';
+import { m as SLIDER_DEFAULT_WIDTH } from '../../../_chunks/dep-DJmE940f.js';
+import '../../../_chunks/dep-Chz4ZJCb.js';
+import '../../../_chunks/dep-Cwish4GD.js';
+import '../../../_chunks/dep-D-UKOauR.js';
+import '../../../_chunks/dep-CgyDw_YI.js';
+import '../../../_chunks/dep-zOZQ0R9g.js';
+import 'lodash-es';
+
+var useStyles = function useStyles(params, panelRectRef) {
+  var color = params.color,
+    value = params.value,
+    maxValue = params.maxValue,
+    type = params.type;
+  var _useState = useState({
+      left: "",
+      color: ""
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    styles = _useState2[0],
+    setStyles = _useState2[1];
+  useEffect(function () {
+    var width = panelRectRef.current.width;
+    if (!width) return;
+    var left = Math.round(Number(value) / Number(maxValue) * 100);
+    var thumbColor = "";
+    if (type === "hue") {
+      thumbColor = "hsl(".concat(color.hue, ", 100%, 50%)");
+    } else if (type === "alpha") {
+      thumbColor = color.rgba;
+    }
+    setStyles({
+      left: "".concat(left, "%"),
+      color: thumbColor
+    });
+  }, [color.hue, color.rgba, maxValue, type, value]);
+  return {
+    styles: styles
+  };
+};
+
+var ColorSlider = function ColorSlider(props) {
+  var color = props.color,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$value = props.value,
+    value = _props$value === void 0 ? 0 : _props$value,
+    _props$railStyle = props.railStyle,
+    railStyle = _props$railStyle === void 0 ? {} : _props$railStyle,
+    _props$maxValue = props.maxValue,
+    maxValue = _props$maxValue === void 0 ? 360 : _props$maxValue,
+    baseClassName = props.baseClassName,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    type = props.type;
+  var panelRef = useRef(null);
+  var panelRectRef = useRef({
+    width: SLIDER_DEFAULT_WIDTH
+  });
+  var _useStyles = useStyles({
+      color: color,
+      value: value,
+      maxValue: maxValue,
+      type: type
+    }, panelRectRef),
+    styles = _useStyles.styles;
+  var handleDrag = function handleDrag(coordinate) {
+    if (disabled) return;
+    var width = panelRectRef.current.width;
+    var x = coordinate.x;
+    var nextValue = Math.round(x / width * Number(maxValue) * 100) / 100;
+    console.log(nextValue);
+    onChange === null || onChange === void 0 || onChange(nextValue);
+  };
+  useMouseEvent(panelRef, {
+    onDown: function onDown(_, ctx) {
+      var _panelRef$current;
+      if (disabled) return;
+      panelRectRef.current.width = ((_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.offsetWidth) || panelRectRef.current.width;
+      handleDrag(ctx.coordinate);
+    },
+    onMove: function onMove(_, ctx) {
+      handleDrag(ctx.coordinate);
+    },
+    onUp: function onUp(_, ctx) {
+      handleDrag(ctx.coordinate);
+    }
+  });
+  useEffect(function () {
+    var _panelRef$current2;
+    panelRectRef.current.width = ((_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.offsetWidth) || SLIDER_DEFAULT_WIDTH;
+  }, []);
+  var paddingStyle = {
+    background: "linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ".concat(props.color.rgb, " 93%, ").concat(props.color.rgb, " 100%)")
+  };
+  return /* @__PURE__ */React.createElement("div", {
+    className: classNames("".concat(baseClassName, "__slider-wrapper"), "".concat(baseClassName, "__slider-wrapper--").concat(type, "-type"))
+  }, type === "alpha" && /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__slider-padding"),
+    style: paddingStyle
+  }), /* @__PURE__ */React.createElement("div", {
+    className: classNames("".concat(baseClassName, "__slider"), className),
+    ref: panelRef
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__rail"),
+    style: railStyle
+  }), /* @__PURE__ */React.createElement("span", {
+    className: "".concat(baseClassName, "__thumb"),
+    role: "slider",
+    tabIndex: 0,
+    style: styles
+  })));
+};
+var ColorSlider$1 = /*#__PURE__*/React.memo(ColorSlider);
+
+export { ColorSlider$1 as default };
+//# sourceMappingURL=slider.js.map

package/es/color-picker/components/panel/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sources":["../../../../../components/color-picker/hooks/useStyles.ts","../../../../../components/color-picker/components/panel/slider.tsx"],"sourcesContent":["import { CSSProperties, useEffect, useState, MutableRefObject } from \"react\";\nimport type { Color } from \"../utils/color-picker/color\";\n\nexport interface TdColorSliderStyleParams {\n  color: Color;\n  value: number;\n  maxValue: number;\n  type: \"hue\" | \"alpha\";\n}\n\nconst useStyles = (params: TdColorSliderStyleParams, panelRectRef: MutableRefObject<{ width: number }>) => {\n  const { color, value, maxValue, type } = params;\n  const [styles, setStyles] = useState<CSSProperties>({ left: \"\", color: \"\" });\n\n  useEffect(() => {\n    const { width } = panelRectRef.current;\n    if (!width) return;\n\n    const left = Math.round((Number(value) / Number(maxValue)) * 100);\n\n    let thumbColor = \"\";\n    if (type === \"hue\") {\n      thumbColor = `hsl(${color.hue}, 100%, 50%)`;\n    } else if (type === \"alpha\") {\n      thumbColor = color.rgba;\n    }\n\n    setStyles({\n      left: `${left}%`,\n      color: thumbColor\n    });\n  }, [color.hue, color.rgba, maxValue, type, value]);\n\n  return {\n    styles\n  };\n};\n\nexport default useStyles;\n","import React, { CSSProperties, useEffect, useRef } from \"react\";\nimport classNames from \"classnames\";\nimport { SLIDER_DEFAULT_WIDTH } from \"../../utils/color-picker\";\nimport useMouseEvent, { type MouseCoordinate } from \"../../../hooks/useMouseEvent\";\nimport useStyles from \"../../hooks/useStyles\";\nimport type { TdColorBaseProps } from \"../../type\";\n\nexport interface TdColorSliderProps extends TdColorBaseProps {\n  className?: string;\n  value?: number;\n  maxValue?: number;\n  railStyle?: CSSProperties;\n  type: \"hue\" | \"alpha\";\n}\n\nconst ColorSlider = (props: TdColorSliderProps) => {\n  const {\n    color,\n    className = \"\",\n    value = 0,\n    railStyle = {},\n    maxValue = 360,\n    baseClassName,\n    disabled,\n    onChange,\n    type\n  } = props;\n  const panelRef = useRef<HTMLDivElement>(null);\n  const panelRectRef = useRef({\n    width: SLIDER_DEFAULT_WIDTH\n  });\n  const { styles } = useStyles({ color, value, maxValue, type }, panelRectRef);\n\n  const handleDrag = (coordinate: MouseCoordinate) => {\n    if (disabled) return;\n    const { width } = panelRectRef.current;\n    const { x } = coordinate;\n    const nextValue = Math.round((x / width) * Number(maxValue) * 100) / 100;\n    console.log(nextValue);\n    onChange?.(nextValue);\n  };\n\n  useMouseEvent(panelRef, {\n    onDown: (_, ctx) => {\n      if (disabled) return;\n      panelRectRef.current.width = panelRef.current?.offsetWidth || panelRectRef.current.width;\n      handleDrag(ctx.coordinate);\n    },\n    onMove: (_, ctx) => {\n      handleDrag(ctx.coordinate);\n    },\n    onUp: (_, ctx) => {\n      handleDrag(ctx.coordinate);\n    }\n  });\n\n  useEffect(() => {\n    panelRectRef.current.width = panelRef.current?.offsetWidth || SLIDER_DEFAULT_WIDTH;\n  }, []);\n\n  const paddingStyle = {\n    background: `linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ${props.color.rgb} 93%, ${props.color.rgb} 100%)`\n  };\n\n  return (\n    <div className={classNames(`${baseClassName}__slider-wrapper`, `${baseClassName}__slider-wrapper--${type}-type`)}>\n      {type === \"alpha\" && <div className={`${baseClassName}__slider-padding`} style={paddingStyle} />}\n      <div className={classNames(`${baseClassName}__slider`, className)} ref={panelRef}>\n        <div className={`${baseClassName}__rail`} style={railStyle} />\n        <span className={`${baseClassName}__thumb`} role=\"slider\" tabIndex={0} style={styles} />\n      </div>\n    </div>\n  );\n};\n\nexport default React.memo(ColorSlider);\n"],"names":["useStyles","params","panelRectRef","color","value","maxValue","type","_useState","useState","left","_useState2","_slicedToArray","styles","setStyles","useEffect","width","current","Math","round","Number","thumbColor","concat","hue","rgba","ColorSlider","props","_props$className","className","_props$value","_props$railStyle","railStyle","_props$maxValue","baseClassName","disabled","onChange","panelRef","useRef","SLIDER_DEFAULT_WIDTH","_useStyles","handleDrag","coordinate","x","nextValue","console","log","useMouseEvent","onDown","_","ctx","_panelRef$current","offsetWidth","onMove","onUp","_panelRef$current2","paddingStyle","background","rgb","React","createElement","classNames","style","ref","role","tabIndex","memo"],"mappings":"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"}

package/es/color-picker/components/panel/swatches.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { TdColorBaseProps } from "../../type";
+export interface TdColorSwatchesProps extends TdColorBaseProps {
+    colors?: string[];
+    title?: string;
+    editable?: boolean;
+    onSetColor?: (color: string) => void;
+    handleAddColor?: () => void;
+}
+declare const _default: React.MemoExoticComponent<(props: TdColorSwatchesProps) => React.JSX.Element>;
+export default _default;