@tendaui/react 1.2.3 → 1.3.0

package/es/color-picker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport classNames from \"classnames\";\nimport { Popup, PopupProps } from \"../popup\";\nimport { ColorPickerProps, TdColorContext } from \"./type\";\nimport useClassName from \"./hooks/useClassNames\";\nimport useControlled from \"../hooks/useControlled\";\nimport ColorTrigger from \"./components/trigger\";\nimport ColorPanel from \"./components/panel/index\";\nimport { colorPickerDefaultProps } from \"./defaultProps\";\nimport useDefaultProps from \"../hooks/useDefaultProps\";\n\nconst ColorPicker: React.FC<ColorPickerProps> = (props) => {\n  const baseClassName = useClassName();\n  const { popupProps, clearable, disabled, borderless, inputProps, onChange, onClear, ...panelProps } =\n    useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);\n  const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};\n\n  const [innerValue, setInnerValue] = useControlled(props, \"value\", onChange);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const colorPanelRef = useRef<HTMLDivElement>(null);\n\n  const popProps: PopupProps = {\n    placement: \"bottom-left\",\n    expandAnimation: true,\n    trigger: \"click\",\n    ...restPopupProps,\n    overlayClassName: classNames(baseClassName, overlayClassName),\n    overlayInnerStyle: {\n      padding: 0,\n      ...overlayInnerStyle\n    }\n  };\n\n  return (\n    <Popup\n      {...popProps}\n      content={\n        !disabled && (\n          <ColorPanel\n            {...panelProps}\n            clearable={clearable}\n            disabled={disabled}\n            value={innerValue}\n            onChange={(value: string, context: TdColorContext) => setInnerValue(value, context)}\n            ref={colorPanelRef}\n          />\n        )\n      }\n    >\n      <div className={`${baseClassName}__trigger`} ref={triggerRef}>\n        <ColorTrigger\n          clearable={clearable}\n          disabled={disabled}\n          borderless={borderless}\n          inputProps={inputProps}\n          value={innerValue}\n          onChange={setInnerValue}\n          onClear={onClear}\n        />\n      </div>\n    </Popup>\n  );\n};\n\nColorPicker.displayName = \"ColorPicker\";\n\nexport default React.memo(ColorPicker);\n"],"names":["ColorPicker","props","baseClassName","useClassName","_useDefaultProps","useDefaultProps","colorPickerDefaultProps","popupProps","clearable","disabled","borderless","inputProps","onChange","onClear","panelProps","_objectWithoutProperties","_excluded","_ref","overlayClassName","overlayInnerStyle","_ref$overlayInnerStyl","restPopupProps","_excluded2","_useControlled","useControlled","_useControlled2","_slicedToArray","innerValue","setInnerValue","triggerRef","useRef","colorPanelRef","popProps","_objectSpread","placement","expandAnimation","trigger","classNames","padding","React","createElement","Popup","content","ColorPanel","value","context","ref","className","concat","ColorTrigger","displayName","memo"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport classNames from \"classnames\";\nimport { Popup, PopupProps } from \"../popup\";\nimport { ColorPickerProps, TdColorContext } from \"./type\";\nimport useClassName from \"./hooks/useClassNames\";\nimport useControlled from \"../hooks/useControlled\";\nimport ColorTrigger from \"./components/trigger\";\nimport ColorPanel from \"./components/panel/index\";\nimport { colorPickerDefaultProps } from \"./defaultProps\";\nimport useDefaultProps from \"../hooks/useDefaultProps\";\n\nconst ColorPicker: React.FC<ColorPickerProps> = (props) => {\n  const baseClassName = useClassName();\n  const {\n    popupProps,\n    clearable,\n    disabled,\n    borderless,\n    inputProps,\n    format,\n    enableAlpha,\n    onChange,\n    onClear,\n    ...panelProps\n  } = useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);\n  const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};\n\n  const [innerValue, setInnerValue] = useControlled(props, \"value\", onChange);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const colorPanelRef = useRef<HTMLDivElement>(null);\n\n  const popProps: PopupProps = {\n    placement: \"bottom-left\",\n    expandAnimation: true,\n    trigger: \"click\",\n    ...restPopupProps,\n    overlayClassName: classNames(baseClassName, overlayClassName),\n    overlayInnerStyle: {\n      padding: 0,\n      ...overlayInnerStyle\n    }\n  };\n\n  return (\n    <Popup\n      {...popProps}\n      content={\n        !disabled && (\n          <ColorPanel\n            {...panelProps}\n            clearable={clearable}\n            disabled={disabled}\n            format={format}\n            enableAlpha={enableAlpha}\n            value={innerValue}\n            onChange={(value: string, context: TdColorContext) => setInnerValue(value, context)}\n            ref={colorPanelRef}\n          />\n        )\n      }\n    >\n      <div className={`${baseClassName}__trigger`} ref={triggerRef}>\n        <ColorTrigger\n          clearable={clearable}\n          disabled={disabled}\n          borderless={borderless}\n          inputProps={inputProps}\n          format={format}\n          enableAlpha={enableAlpha}\n          value={innerValue}\n          onChange={setInnerValue}\n          onClear={onClear}\n        />\n      </div>\n    </Popup>\n  );\n};\n\nColorPicker.displayName = \"ColorPicker\";\n\nexport default React.memo(ColorPicker);\n"],"names":["ColorPicker","props","baseClassName","useClassName","_useDefaultProps","useDefaultProps","colorPickerDefaultProps","popupProps","clearable","disabled","borderless","inputProps","format","enableAlpha","onChange","onClear","panelProps","_objectWithoutProperties","_excluded","_ref","overlayClassName","overlayInnerStyle","_ref$overlayInnerStyl","restPopupProps","_excluded2","_useControlled","useControlled","_useControlled2","_slicedToArray","innerValue","setInnerValue","triggerRef","useRef","colorPanelRef","popProps","_objectSpread","placement","expandAnimation","trigger","classNames","padding","React","createElement","Popup","content","ColorPanel","value","context","ref","className","concat","ColorTrigger","displayName","memo"],"mappings":"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"}

package/es/color-picker/_example/base.js

@@ -0,0 +1,26 @@
+import { _ as _slicedToArray } from '../../_chunks/dep-CzLhKWCf.js';
+import React__default, { useState } from 'react';
+import { ColorPicker } from '@tendaui/react';
+
+function Base() {
+  var _useState = useState("#0052d9"),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
+  return /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    }
+  }, /* @__PURE__ */React__default.createElement(ColorPicker, {
+    format: "HEX",
+    value: color,
+    onChange: function onChange(v) {
+      return setColor(v);
+    }
+  }), /* @__PURE__ */React__default.createElement("div", null, "\u5F53\u524D\u989C\u8272\u503C\uFF1A", color));
+}
+
+export { Base as default };
+//# sourceMappingURL=base.js.map

package/es/color-picker/_example/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sources":["../../../../components/color-picker/_example/base.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ColorPicker } from \"@tendaui/react\";\n\nexport default function Base() {\n  const [color, setColor] = useState(\"#0052d9\");\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <ColorPicker format=\"HEX\" value={color} onChange={(v) => setColor(v)} />\n      <div>当前颜色值：{color}</div>\n    </div>\n  );\n}"],"names":["Base","_useState","useState","_useState2","_slicedToArray","color","setColor","React","createElement","style","display","flexDirection","gap","ColorPicker","format","value","onChange","v"],"mappings":";;;;AAGA,SAAwBA,IAAAA,GAAO;AAC7B,EAAA,IAAAC,SAAA,GAA0BC,SAAS,SAAS,CAAA;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAArCI,IAAAA,KAAA,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAOG,IAAAA,QAAQ,GAAAH,UAAA,CAAA,CAAA,CAAA;AACtB,EAAA,sBACEI,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEC,MAAAA,OAAA,EAAS,MAAA;AAAQC,MAAAA,aAAA,EAAe,QAAA;AAAUC,MAAAA,GAAA,EAAK;AAAO;AAAA,GAAA,iBAClEL,cAAA,CAAAC,aAAA,CAACK,WAAA,EAAA;AAAYC,IAAAA,MAAA,EAAO,KAAA;AAAMC,IAAAA,KAAA,EAAOV,KAAA;AAAOW,IAAAA,QAAA,EAAU,SAAVA,QAAAA,CAAWC,CAAA,EAAA;MAAA,OAAMX,QAAA,CAASW,CAAC,CAAA;AAAA,IAAA;AAAA,GAAG,CAAA,iBACtEV,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,EAAI,sCAAA,EAAOH,KAAM,CACpB,CAAA;AAEJ;;;;"}

package/es/color-picker/_example/borderless.js

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import { ColorPicker } from '@tendaui/react';
+
+function Borderless() {
+  return /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "24px"
+    }
+  }, /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      color: "#666"
+    }
+  }, "\u6709\u8FB9\u6846"), /* @__PURE__ */React__default.createElement(ColorPicker, {
+    defaultValue: "#0052d9"
+  })), /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      color: "#666"
+    }
+  }, "\u65E0\u8FB9\u6846"), /* @__PURE__ */React__default.createElement(ColorPicker, {
+    borderless: true,
+    defaultValue: "#0052d9"
+  })));
+}
+
+export { Borderless as default };
+//# sourceMappingURL=borderless.js.map

package/es/color-picker/_example/borderless.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"borderless.js","sources":["../../../../components/color-picker/_example/borderless.tsx"],"sourcesContent":["import React from \"react\";\nimport { ColorPicker } from \"@tendaui/react\";\n\nexport default function Borderless() {\n  return (\n    <div style={{ display: \"flex\", gap: \"24px\" }}>\n      <div>\n        <div style={{ marginBottom: \"8px\", color: \"#666\" }}>有边框</div>\n        <ColorPicker defaultValue=\"#0052d9\" />\n      </div>\n      <div>\n        <div style={{ marginBottom: \"8px\", color: \"#666\" }}>无边框</div>\n        <ColorPicker borderless defaultValue=\"#0052d9\" />\n      </div>\n    </div>\n  );\n}"],"names":["Borderless","React","createElement","style","display","gap","marginBottom","color","ColorPicker","defaultValue","borderless"],"mappings":";;;AAGA,SAAwBA,UAAAA,GAAa;AACnC,EAAA,sBACEC,cAAA,CAAAC,aAAA,CAAC;AAAIC,IAAAA,KAAA,EAAO;AAAEC,MAAAA,SAAS,MAAA;AAAQC,MAAAA,GAAA,EAAK;AAAO;AAAA,GAAA,iBACzCJ,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,8CACE,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEG,MAAAA,YAAA,EAAc,KAAA;AAAOC,MAAAA,OAAO;AAAO;GAAA,EAAG,oBAAG,CAAA,iBACvDN,cAAA,CAAAC,aAAA,CAACM,WAAA,EAAA;AAAYC,IAAAA,cAAa;AAAA,GAAU,CACtC,kBACAR,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,8CACE,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEG,MAAAA,YAAA,EAAc,KAAA;AAAOC,MAAAA,KAAA,EAAO;AAAO;GAAA,EAAG,oBAAG,kBACvDN,cAAA,CAAAC,aAAA,CAACM,WAAA,EAAA;AAAYE,IAAAA,YAAU,IAAA;AAACD,IAAAA,YAAA,EAAa;GAAU,CACjD,CACF,CAAA;AAEJ;;;;"}

package/es/color-picker/_example/clearable.js

@@ -0,0 +1,29 @@
+import { _ as _slicedToArray } from '../../_chunks/dep-CzLhKWCf.js';
+import React__default, { useState } from 'react';
+import { ColorPicker } from '@tendaui/react';
+
+function Clearable() {
+  var _useState = useState("#0052d9"),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
+  return /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    }
+  }, /* @__PURE__ */React__default.createElement(ColorPicker, {
+    clearable: true,
+    value: color,
+    onChange: function onChange(v) {
+      return setColor(v);
+    },
+    onClear: function onClear() {
+      return setColor("");
+    }
+  }), /* @__PURE__ */React__default.createElement("div", null, "\u5F53\u524D\u989C\u8272\u503C\uFF1A", color || "(\u7A7A)"));
+}
+
+export { Clearable as default };
+//# sourceMappingURL=clearable.js.map

package/es/color-picker/_example/clearable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clearable.js","sources":["../../../../components/color-picker/_example/clearable.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ColorPicker } from \"@tendaui/react\";\n\nexport default function Clearable() {\n  const [color, setColor] = useState(\"#0052d9\");\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <ColorPicker clearable value={color} onChange={(v) => setColor(v)} onClear={() => setColor(\"\")} />\n      <div>当前颜色值：{color || \"(空)\"}</div>\n    </div>\n  );\n}"],"names":["Clearable","_useState","useState","_useState2","_slicedToArray","color","setColor","React","createElement","style","display","flexDirection","gap","ColorPicker","clearable","value","onChange","v","onClear"],"mappings":";;;;AAGA,SAAwBA,SAAAA,GAAY;AAClC,EAAA,IAAAC,SAAA,GAA0BC,SAAS,SAAS,CAAA;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAArCI,IAAAA,KAAA,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAOG,IAAAA,QAAQ,GAAAH,UAAA,CAAA,CAAA,CAAA;AACtB,EAAA,sBACEI,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEC,MAAAA,SAAS,MAAA;AAAQC,MAAAA,aAAA,EAAe,QAAA;AAAUC,MAAAA,GAAA,EAAK;AAAO;AAAA,GAAA,iBAClEL,cAAA,CAAAC,aAAA,CAACK,WAAA,EAAA;AAAYC,IAAAA,SAAA,EAAS;AAACC,IAAAA,KAAA,EAAOV,KAAA;AAAOW,IAAAA,QAAA,EAAU,SAAVA,QAAAA,CAAWC,CAAA,EAAA;MAAA,OAAMX,QAAA,CAASW,CAAC,CAAA;AAAA,IAAA,CAAA;IAAGC,SAAS,SAATA;aAAeZ,QAAA,CAAS,EAAE,CAAA;AAAA,IAAA;AAAA,GAAG,kBAChGC,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,EAAI,sCAAA,EAAOH,KAAA,IAAS,UAAM,CAC7B,CAAA;AAEJ;;;;"}

package/es/color-picker/_example/disabled.js

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import { ColorPicker } from '@tendaui/react';
+
+function Disabled() {
+  return /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "24px"
+    }
+  }, /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      color: "#666"
+    }
+  }, "\u6B63\u5E38\u72B6\u6001"), /* @__PURE__ */React__default.createElement(ColorPicker, {
+    defaultValue: "#0052d9"
+  })), /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      color: "#666"
+    }
+  }, "\u7981\u7528\u72B6\u6001"), /* @__PURE__ */React__default.createElement(ColorPicker, {
+    disabled: true,
+    defaultValue: "#0052d9"
+  })));
+}
+
+export { Disabled as default };
+//# sourceMappingURL=disabled.js.map

package/es/color-picker/_example/disabled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disabled.js","sources":["../../../../components/color-picker/_example/disabled.tsx"],"sourcesContent":["import React from \"react\";\nimport { ColorPicker } from \"@tendaui/react\";\n\nexport default function Disabled() {\n  return (\n    <div style={{ display: \"flex\", gap: \"24px\" }}>\n      <div>\n        <div style={{ marginBottom: \"8px\", color: \"#666\" }}>正常状态</div>\n        <ColorPicker defaultValue=\"#0052d9\" />\n      </div>\n      <div>\n        <div style={{ marginBottom: \"8px\", color: \"#666\" }}>禁用状态</div>\n        <ColorPicker disabled defaultValue=\"#0052d9\" />\n      </div>\n    </div>\n  );\n}"],"names":["Disabled","React","createElement","style","display","gap","marginBottom","color","ColorPicker","defaultValue","disabled"],"mappings":";;;AAGA,SAAwBA,QAAAA,GAAW;AACjC,EAAA,sBACEC,cAAA,CAAAC,aAAA,CAAC;AAAIC,IAAAA,KAAA,EAAO;AAAEC,MAAAA,SAAS,MAAA;AAAQC,MAAAA,GAAA,EAAK;AAAO;AAAA,GAAA,iBACzCJ,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,8CACE,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEG,MAAAA,YAAA,EAAc,KAAA;AAAOC,MAAAA,OAAO;AAAO;GAAA,EAAG,0BAAI,CAAA,iBACxDN,cAAA,CAAAC,aAAA,CAACM,WAAA,EAAA;AAAYC,IAAAA,cAAa;AAAA,GAAU,CACtC,kBACAR,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,8CACE,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEG,MAAAA,YAAA,EAAc,KAAA;AAAOC,MAAAA,KAAA,EAAO;AAAO;GAAA,EAAG,0BAAI,kBACxDN,cAAA,CAAAC,aAAA,CAACM,WAAA,EAAA;AAAYE,IAAAA,UAAQ,IAAA;AAACD,IAAAA,YAAA,EAAa;GAAU,CAC/C,CACF,CAAA;AAEJ;;;;"}

package/es/color-picker/_example/formats.js

@@ -0,0 +1,79 @@
+import { _ as _slicedToArray } from '../../_chunks/dep-CzLhKWCf.js';
+import React__default, { useState } from 'react';
+import { ColorPicker } from '@tendaui/react';
+
+function Formats() {
+  var _useState = useState("#0052d9"),
+    _useState2 = _slicedToArray(_useState, 2),
+    hexColor = _useState2[0],
+    setHexColor = _useState2[1];
+  var _useState3 = useState("rgb(0, 82, 217)"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rgbColor = _useState4[0],
+    setRgbColor = _useState4[1];
+  var _useState5 = useState("hsl(217, 100%, 43%)"),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hslColor = _useState6[0],
+    setHslColor = _useState6[1];
+  return /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "24px"
+    }
+  }, /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      color: "#666"
+    }
+  }, "HEX \u683C\u5F0F"), /* @__PURE__ */React__default.createElement(ColorPicker, {
+    format: "HEX",
+    value: hexColor,
+    onChange: function onChange(v) {
+      return setHexColor(v);
+    }
+  }), /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginTop: "8px",
+      fontSize: "12px",
+      color: "#999"
+    }
+  }, "\u503C\uFF1A", hexColor)), /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      color: "#666"
+    }
+  }, "RGB \u683C\u5F0F"), /* @__PURE__ */React__default.createElement(ColorPicker, {
+    format: "RGB",
+    value: rgbColor,
+    onChange: function onChange(v) {
+      return setRgbColor(v);
+    }
+  }), /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginTop: "8px",
+      fontSize: "12px",
+      color: "#999"
+    }
+  }, "\u503C\uFF1A", rgbColor)), /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      color: "#666"
+    }
+  }, "HSL \u683C\u5F0F"), /* @__PURE__ */React__default.createElement(ColorPicker, {
+    format: "HSL",
+    value: hslColor,
+    onChange: function onChange(v) {
+      return setHslColor(v);
+    }
+  }), /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginTop: "8px",
+      fontSize: "12px",
+      color: "#999"
+    }
+  }, "\u503C\uFF1A", hslColor)));
+}
+
+export { Formats as default };
+//# sourceMappingURL=formats.js.map

package/es/color-picker/_example/formats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formats.js","sources":["../../../../components/color-picker/_example/formats.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ColorPicker } from \"@tendaui/react\";\n\nexport default function Formats() {\n  const [hexColor, setHexColor] = useState(\"#0052d9\");\n  const [rgbColor, setRgbColor] = useState(\"rgb(0, 82, 217)\");\n  const [hslColor, setHslColor] = useState(\"hsl(217, 100%, 43%)\");\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"24px\" }}>\n      <div>\n        <div style={{ marginBottom: \"8px\", color: \"#666\" }}>HEX 格式</div>\n        <ColorPicker format=\"HEX\" value={hexColor} onChange={(v) => setHexColor(v)} />\n        <div style={{ marginTop: \"8px\", fontSize: \"12px\", color: \"#999\" }}>值：{hexColor}</div>\n      </div>\n\n      <div>\n        <div style={{ marginBottom: \"8px\", color: \"#666\" }}>RGB 格式</div>\n        <ColorPicker format=\"RGB\" value={rgbColor} onChange={(v) => setRgbColor(v)} />\n        <div style={{ marginTop: \"8px\", fontSize: \"12px\", color: \"#999\" }}>值：{rgbColor}</div>\n      </div>\n\n      <div>\n        <div style={{ marginBottom: \"8px\", color: \"#666\" }}>HSL 格式</div>\n        <ColorPicker format=\"HSL\" value={hslColor} onChange={(v) => setHslColor(v)} />\n        <div style={{ marginTop: \"8px\", fontSize: \"12px\", color: \"#999\" }}>值：{hslColor}</div>\n      </div>\n    </div>\n  );\n}"],"names":["Formats","_useState","useState","_useState2","_slicedToArray","hexColor","setHexColor","_useState3","_useState4","rgbColor","setRgbColor","_useState5","_useState6","hslColor","setHslColor","React","createElement","style","display","flexDirection","gap","marginBottom","color","ColorPicker","format","value","onChange","v","marginTop","fontSize"],"mappings":";;;;AAGA,SAAwBA,OAAAA,GAAU;AAChC,EAAA,IAAAC,SAAA,GAAgCC,SAAS,SAAS,CAAA;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA3CI,IAAAA,QAAA,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAUG,IAAAA,WAAW,GAAAH,UAAA,CAAA,CAAA,CAAA;AAC5B,EAAA,IAAAI,UAAA,GAAgCL,SAAS,iBAAiB,CAAA;IAAAM,UAAA,GAAAJ,cAAA,CAAAG,UAAA,EAAA,CAAA,CAAA;AAAnDE,IAAAA,QAAA,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAUE,IAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAC5B,EAAA,IAAAG,UAAA,GAAgCT,SAAS,qBAAqB,CAAA;IAAAU,UAAA,GAAAR,cAAA,CAAAO,UAAA,EAAA,CAAA,CAAA;AAAvDE,IAAAA,QAAA,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAUE,IAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAE5B,EAAA,sBACEG,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEC,MAAAA,OAAA,EAAS,MAAA;AAAQC,MAAAA,aAAA,EAAe,QAAA;AAAUC,MAAAA,GAAA,EAAK;AAAO;AAAA,GAAA,iBAClEL,cAAA,CAAAC,aAAA,CAAC,4BACCD,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEI,MAAAA,YAAA,EAAc,KAAA;AAAOC,MAAAA,KAAA,EAAO;AAAO;GAAA,EAAG,kBAAM,CAAA,iBAC1DP,cAAA,CAAAC,aAAA,CAACO,WAAA,EAAA;AAAYC,IAAAA,MAAA,EAAO,KAAA;AAAMC,IAAAA,KAAA,EAAOpB;AAAUqB,IAAAA,QAAA,EAAU,SAAVA,QAAAA,CAAWC,CAAA,EAAA;MAAA,OAAMrB,WAAA,CAAYqB,CAAC,CAAA;AAAA,IAAA;GAAG,CAAA,iBAC5EZ,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEW,MAAAA,SAAA,EAAW,KAAA;AAAOC,MAAAA,QAAA,EAAU,MAAA;AAAQP,MAAAA,KAAA,EAAO;AAAO;GAAA,EAAG,cAAA,EAAGjB,QAAS,CACjF,CAAA,iBAEAU,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,iBACCD,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEI,MAAAA,YAAA,EAAc,KAAA;AAAOC,MAAAA,KAAA,EAAO;AAAO;GAAA,EAAG,kBAAM,CAAA,iBAC1DP,cAAA,CAAAC,aAAA,CAACO,WAAA,EAAA;AAAYC,IAAAA,MAAA,EAAO,KAAA;AAAMC,IAAAA,KAAA,EAAOhB,QAAA;AAAUiB,IAAAA,QAAA,EAAU,SAAVA,QAAAA,CAAWC,CAAA,EAAA;MAAA,OAAMjB,WAAA,CAAYiB,CAAC,CAAA;AAAA,IAAA;GAAG,CAAA,iBAC5EZ,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,OAAO;AAAEW,MAAAA,SAAA,EAAW,KAAA;AAAOC,MAAAA,QAAA,EAAU,MAAA;AAAQP,MAAAA,KAAA,EAAO;AAAO;GAAA,EAAG,cAAA,EAAGb,QAAS,CACjF,CAAA,iBAEAM,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,iBACCD,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,OAAO;AAAEI,MAAAA,YAAA,EAAc,KAAA;AAAOC,MAAAA,KAAA,EAAO;AAAO;GAAA,EAAG,kBAAM,CAAA,iBAC1DP,cAAA,CAAAC,aAAA,CAACO,WAAA,EAAA;AAAYC,IAAAA,MAAA,EAAO,KAAA;AAAMC,IAAAA,KAAA,EAAOZ,QAAA;AAAUa,IAAAA,QAAA,EAAU,SAAVA,QAAAA,CAAWC;aAAMb,WAAA,CAAYa,CAAC,CAAA;AAAA,IAAA;GAAG,CAAA,iBAC5EZ,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEW,MAAAA,WAAW,KAAA;AAAOC,MAAAA,QAAA,EAAU,MAAA;AAAQP,MAAAA,KAAA,EAAO;AAAO;AAAA,GAAA,EAAG,cAAA,EAAGT,QAAS,CACjF,CACF,CAAA;AAEJ;;;;"}

package/es/color-picker/_example/manual-input.js

@@ -0,0 +1,91 @@
+import { _ as _slicedToArray } from '../../_chunks/dep-CzLhKWCf.js';
+import React__default, { useState } from 'react';
+import { ColorPicker } from '@tendaui/react';
+
+function ManualInput() {
+  var _useState = useState("#0052d9"),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
+  return /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    }
+  }, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      color: "#666",
+      fontSize: "14px"
+    }
+  }, /* @__PURE__ */React__default.createElement("p", {
+    style: {
+      margin: "0 0 8px 0"
+    }
+  }, /* @__PURE__ */React__default.createElement("strong", null, "\u89E6\u53D1\u5668\u8F93\u5165\u6846\uFF1A"), "\u5728\u89E6\u53D1\u5668\u4E2D\u76F4\u63A5\u8F93\u5165\u4EFB\u610F\u683C\u5F0F\u7684\u989C\u8272\u503C\uFF0C\u6309\u56DE\u8F66\u6216\u5931\u7126\u540E\u4F1A\u81EA\u52A8\u8F6C\u6362\u4E3A\u6307\u5B9A\u683C\u5F0F\u3002"), /* @__PURE__ */React__default.createElement("p", {
+    style: {
+      margin: "0"
+    }
+  }, /* @__PURE__ */React__default.createElement("strong", null, "\u9762\u677F\u683C\u5F0F\u8F93\u5165\uFF1A"), "\u6253\u5F00\u989C\u8272\u9009\u62E9\u9762\u677F\uFF0C\u53EF\u4EE5\u901A\u8FC7\u683C\u5F0F\u9009\u62E9\u5668\u5207\u6362\u4E0D\u540C\u7684\u8F93\u5165\u683C\u5F0F\uFF08HEX/RGB/HSL/HSV/CMYK\uFF09\uFF0C\u5E76\u901A\u8FC7\u6570\u503C\u8F93\u5165\u6846\u7CBE\u786E\u8C03\u6574\u989C\u8272\u5404\u5206\u91CF\u7684\u503C\u3002")), /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "24px",
+      flexWrap: "wrap"
+    }
+  }, /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      color: "#666"
+    }
+  }, "HEX \u683C\u5F0F"), /* @__PURE__ */React__default.createElement(ColorPicker, {
+    format: "HEX",
+    value: color,
+    onChange: function onChange(v) {
+      return setColor(v);
+    }
+  }), /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginTop: "8px",
+      fontSize: "12px",
+      color: "#999"
+    }
+  }, "\u89E6\u53D1\u5668\u652F\u6301\u8F93\u5165: rgb(255, 0, 0) \u6216 red")), /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      color: "#666"
+    }
+  }, "RGB \u683C\u5F0F\uFF08\u9762\u677F\u5185\u53EF\u5207\u6362\u683C\u5F0F\uFF09"), /* @__PURE__ */React__default.createElement(ColorPicker, {
+    format: "RGB",
+    value: color,
+    onChange: function onChange(v) {
+      return setColor(v);
+    }
+  }), /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginTop: "8px",
+      fontSize: "12px",
+      color: "#999"
+    }
+  }, "\u9762\u677F\u5185\u652F\u6301 R/G/B \u5206\u91CF\u7CBE\u786E\u8F93\u5165")), /* @__PURE__ */React__default.createElement("div", null, /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      color: "#666"
+    }
+  }, "\u5E26\u900F\u660E\u5EA6\uFF08RGBA\uFF09"), /* @__PURE__ */React__default.createElement(ColorPicker, {
+    format: "RGBA",
+    enableAlpha: true,
+    value: color,
+    onChange: function onChange(v) {
+      return setColor(v);
+    }
+  }), /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      marginTop: "8px",
+      fontSize: "12px",
+      color: "#999"
+    }
+  }, "\u9762\u677F\u5185\u53EF\u8C03\u6574\u900F\u660E\u5EA6\u767E\u5206\u6BD4"))), /* @__PURE__ */React__default.createElement("div", null, "\u5F53\u524D\u989C\u8272\u503C\uFF1A", color));
+}
+
+export { ManualInput as default };
+//# sourceMappingURL=manual-input.js.map

package/es/color-picker/_example/manual-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"manual-input.js","sources":["../../../../components/color-picker/_example/manual-input.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ColorPicker } from \"@tendaui/react\";\n\nexport default function ManualInput() {\n  const [color, setColor] = useState(\"#0052d9\");\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <div style={{ color: \"#666\", fontSize: \"14px\" }}>\n        <p style={{ margin: \"0 0 8px 0\" }}>\n          <strong>触发器输入框：</strong>在触发器中直接输入任意格式的颜色值，按回车或失焦后会自动转换为指定格式。\n        </p>\n        <p style={{ margin: \"0\" }}>\n          <strong>面板格式输入：</strong>\n          打开颜色选择面板，可以通过格式选择器切换不同的输入格式（HEX/RGB/HSL/HSV/CMYK），并通过数值输入框精确调整颜色各分量的值。\n        </p>\n      </div>\n      <div style={{ display: \"flex\", gap: \"24px\", flexWrap: \"wrap\" }}>\n        <div>\n          <div style={{ marginBottom: \"8px\", color: \"#666\" }}>HEX 格式</div>\n          <ColorPicker format=\"HEX\" value={color} onChange={(v) => setColor(v)} />\n          <div style={{ marginTop: \"8px\", fontSize: \"12px\", color: \"#999\" }}>\n            触发器支持输入: rgb(255, 0, 0) 或 red\n          </div>\n        </div>\n        <div>\n          <div style={{ marginBottom: \"8px\", color: \"#666\" }}>RGB 格式（面板内可切换格式）</div>\n          <ColorPicker format=\"RGB\" value={color} onChange={(v) => setColor(v)} />\n          <div style={{ marginTop: \"8px\", fontSize: \"12px\", color: \"#999\" }}>面板内支持 R/G/B 分量精确输入</div>\n        </div>\n        <div>\n          <div style={{ marginBottom: \"8px\", color: \"#666\" }}>带透明度（RGBA）</div>\n          <ColorPicker format=\"RGBA\" enableAlpha value={color} onChange={(v) => setColor(v)} />\n          <div style={{ marginTop: \"8px\", fontSize: \"12px\", color: \"#999\" }}>面板内可调整透明度百分比</div>\n        </div>\n      </div>\n      <div>当前颜色值：{color}</div>\n    </div>\n  );\n}"],"names":["ManualInput","_useState","useState","_useState2","_slicedToArray","color","setColor","style","display","flexDirection","gap","React","createElement","fontSize","margin","flexWrap","marginBottom","ColorPicker","format","value","onChange","v","marginTop","enableAlpha"],"mappings":";;;;AAGA,SAAwBA,WAAAA,GAAc;AACpC,EAAA,IAAAC,SAAA,GAA0BC,SAAS,SAAS,CAAA;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAArCI,IAAAA,KAAA,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAOG,IAAAA,QAAQ,GAAAH,UAAA,CAAA,CAAA,CAAA;AACtB,EAAA,mDACG,KAAA,EAAA;AAAII,IAAAA,KAAA,EAAO;AAAEC,MAAAA,OAAA,EAAS,MAAA;AAAQC,MAAAA,eAAe,QAAA;AAAUC,MAAAA,GAAA,EAAK;AAAO;AAAA,GAAA,iBAClEC,cAAA,CAAAC,aAAA,CAAC;AAAIL,IAAAA,KAAA,EAAO;AAAEF,MAAAA,OAAO,MAAA;AAAQQ,MAAAA,QAAA,EAAU;AAAO;AAAA,GAAA,iBAC5CF,cAAA,CAAAC,aAAA,CAAC;AAAEL,IAAAA,KAAA,EAAO;AAAEO,MAAAA,QAAQ;AAAY;GAAA,8CAC7B,QAAA,EAAA,IAAA,EAAO,4CAAO,GAAS,0NAC1B,CAAA,8CACC,GAAA,EAAA;AAAEP,IAAAA,KAAA,EAAO;AAAEO,MAAAA,MAAA,EAAQ;AAAI;oBACtBH,cAAA,CAAAC,aAAA,CAAC,QAAA,EAAA,IAAA,EAAO,4CAAO,CAAA,EAAS,kUAE1B,CACF,CAAA,8CACC,KAAA,EAAA;AAAIL,IAAAA,KAAA,EAAO;AAAEC,MAAAA,OAAA,EAAS,MAAA;AAAQE,MAAAA,KAAK,MAAA;AAAQK,MAAAA,QAAA,EAAU;AAAO;AAAA,GAAA,iBAC3DJ,cAAA,CAAAC,aAAA,CAAC,4BACCD,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIL,IAAAA,OAAO;AAAES,MAAAA,YAAA,EAAc;AAAOX,MAAAA,KAAA,EAAO;AAAO;KAAG,kBAAM,CAAA,8CACzDY,WAAA,EAAA;AAAYC,IAAAA,MAAA,EAAO;AAAMC,IAAAA,KAAA,EAAOd,KAAA;AAAOe,IAAAA,UAAU,SAAVA,SAAWC,CAAA,EAAA;MAAA,OAAMf,SAASe,CAAC,CAAA;AAAA,IAAA;GAAG,kBACtEV,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIL,IAAAA,OAAO;AAAEe,MAAAA,SAAA,EAAW;AAAOT,MAAAA,QAAA,EAAU,MAAA;AAAQR,MAAAA,KAAA,EAAO;AAAO;KAAG,uEAEnE,CACF,kBACAM,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,8CACE,KAAA,EAAA;AAAIL,IAAAA,KAAA,EAAO;AAAES,MAAAA,YAAA,EAAc,KAAA;AAAOX,MAAAA,OAAO;AAAO;GAAA,EAAG,8EAAgB,CAAA,iBACpEM,cAAA,CAAAC,aAAA,CAACK;AAAYC,IAAAA,MAAA,EAAO,KAAA;AAAMC,IAAAA,OAAOd,KAAA;AAAOe,IAAAA,QAAA,EAAU,SAAVA,QAAAA,CAAWC,CAAA,EAAA;MAAA,OAAMf,QAAA,CAASe,CAAC,CAAA;AAAA,IAAA;GAAG,CAAA,8CACrE,KAAA,EAAA;AAAId,IAAAA,KAAA,EAAO;AAAEe,MAAAA,SAAA,EAAW,KAAA;AAAOT,MAAAA,UAAU,MAAA;AAAQR,MAAAA,KAAA,EAAO;AAAO;GAAA,EAAG,2EAAkB,CACvF,CAAA,iBACAM,cAAA,CAAAC,aAAA,CAAC,4BACCD,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIL,IAAAA,OAAO;AAAES,MAAAA,YAAA,EAAc;AAAOX,MAAAA,KAAA,EAAO;AAAO;KAAG,0CAAU,CAAA,8CAC7DY,WAAA,EAAA;AAAYC,IAAAA,MAAA,EAAO;AAAOK,IAAAA,WAAA,EAAW,IAAA;AAACJ,IAAAA,OAAOd,KAAA;AAAOe,IAAAA,QAAA,EAAU,SAAVA,QAAAA,CAAWC,CAAA,EAAA;MAAA,OAAMf,QAAA,CAASe,CAAC,CAAA;AAAA,IAAA;GAAG,CAAA,8CAClF,KAAA,EAAA;AAAId,IAAAA,KAAA,EAAO;AAAEe,MAAAA,SAAA,EAAW,KAAA;AAAOT,MAAAA,UAAU,MAAA;AAAQR,MAAAA,KAAA,EAAO;AAAO;AAAA,GAAA,EAAG,0EAAY,CACjF,CACF,CAAA,8CACC,KAAA,EAAA,IAAA,EAAI,sCAAA,EAAOA,KAAM,CACpB,CAAA;AAEJ;;;;"}

package/es/color-picker/_example/recent-colors.js

@@ -0,0 +1,31 @@
+import { _ as _slicedToArray } from '../../_chunks/dep-CzLhKWCf.js';
+import React__default, { useState } from 'react';
+import { ColorPicker } from '@tendaui/react';
+
+function RecentColors() {
+  var _useState = useState("#0052d9"),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
+  var _useState3 = useState(["#ff0000", "#00ff00", "#0000ff"]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    recentColors = _useState4[0],
+    setRecentColors = _useState4[1];
+  return /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    }
+  }, /* @__PURE__ */React__default.createElement(ColorPicker, {
+    recentColors: recentColors,
+    onRecentColorsChange: setRecentColors,
+    value: color,
+    onChange: function onChange(v) {
+      return setColor(v);
+    }
+  }), /* @__PURE__ */React__default.createElement("div", null, "\u5F53\u524D\u989C\u8272\u503C\uFF1A", color), /* @__PURE__ */React__default.createElement("div", null, "\u6700\u8FD1\u4F7F\u7528\uFF1A", recentColors.join(", ")));
+}
+
+export { RecentColors as default };
+//# sourceMappingURL=recent-colors.js.map

package/es/color-picker/_example/recent-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recent-colors.js","sources":["../../../../components/color-picker/_example/recent-colors.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ColorPicker } from \"@tendaui/react\";\n\nexport default function RecentColors() {\n  const [color, setColor] = useState(\"#0052d9\");\n  const [recentColors, setRecentColors] = useState<string[]>([\"#ff0000\", \"#00ff00\", \"#0000ff\"]);\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <ColorPicker\n        recentColors={recentColors}\n        onRecentColorsChange={setRecentColors}\n        value={color}\n        onChange={(v) => setColor(v)}\n      />\n      <div>当前颜色值：{color}</div>\n      <div>最近使用：{recentColors.join(\", \")}</div>\n    </div>\n  );\n}"],"names":["RecentColors","_useState","useState","_useState2","_slicedToArray","color","setColor","_useState3","_useState4","recentColors","setRecentColors","React","createElement","style","display","flexDirection","gap","ColorPicker","onRecentColorsChange","value","onChange","v","join"],"mappings":";;;;AAGA,SAAwBA,YAAAA,GAAe;AACrC,EAAA,IAAAC,SAAA,GAA0BC,SAAS,SAAS,CAAA;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAArCI,IAAAA,KAAA,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAOG,IAAAA,QAAQ,GAAAH,UAAA,CAAA,CAAA,CAAA;EACtB,IAAAI,UAAA,GAAwCL,SAAmB,CAAC,SAAA,EAAW,SAAA,EAAW,SAAS,CAAC,CAAA;IAAAM,UAAA,GAAAJ,cAAA,CAAAG,UAAA,EAAA,CAAA,CAAA;AAArFE,IAAAA;AAAcC,IAAAA,eAAe,GAAAF,UAAA,CAAA,CAAA,CAAA;AACpC,EAAA,sBACEG,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEC,MAAAA,OAAA,EAAS;AAAQC,MAAAA,aAAA,EAAe,QAAA;AAAUC,MAAAA,GAAA,EAAK;AAAO;AAAA,GAAA,iBAClEL,cAAA,CAAAC,aAAA,CAACK,WAAA,EAAA;AACCR,IAAAA,YAAA,EAAAA,YAAA;AACAS,IAAAA,oBAAA,EAAsBR,eAAA;AACtBS,IAAAA,KAAA,EAAOd,KAAA;AACPe,IAAAA,QAAA,EAAU,SAAVA,QAAAA,CAAWC,CAAA,EAAA;MAAA,OAAMf,QAAA,CAASe,CAAC,CAAA;AAAA,IAAA;AAAA,GAC7B,CAAA,iBACAV,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,EAAI,sCAAA,EAAOP,KAAM,CAAA,iBAClBM,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,EAAI,gCAAA,EAAMH,YAAA,CAAaa,IAAA,CAAK,IAAI,CAAE,CACrC,CAAA;AAEJ;;;;"}

package/es/color-picker/_example/swatch-colors.js

@@ -0,0 +1,27 @@
+import { _ as _slicedToArray } from '../../_chunks/dep-CzLhKWCf.js';
+import React__default, { useState } from 'react';
+import { ColorPicker } from '@tendaui/react';
+
+function SwatchColors() {
+  var _useState = useState("#0052d9"),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
+  var customSwatchColors = ["#ff0000", "#ff7800", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#8b00ff", "#ff00ff", "#000000", "#333333", "#666666", "#999999", "#cccccc", "#ffffff"];
+  return /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    }
+  }, /* @__PURE__ */React__default.createElement(ColorPicker, {
+    swatchColors: customSwatchColors,
+    value: color,
+    onChange: function onChange(v) {
+      return setColor(v);
+    }
+  }), /* @__PURE__ */React__default.createElement("div", null, "\u5F53\u524D\u989C\u8272\u503C\uFF1A", color));
+}
+
+export { SwatchColors as default };
+//# sourceMappingURL=swatch-colors.js.map

package/es/color-picker/_example/swatch-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch-colors.js","sources":["../../../../components/color-picker/_example/swatch-colors.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ColorPicker } from \"@tendaui/react\";\n\nexport default function SwatchColors() {\n  const [color, setColor] = useState(\"#0052d9\");\n  const customSwatchColors = [\n    \"#ff0000\",\n    \"#ff7800\",\n    \"#ffff00\",\n    \"#00ff00\",\n    \"#00ffff\",\n    \"#0000ff\",\n    \"#8b00ff\",\n    \"#ff00ff\",\n    \"#000000\",\n    \"#333333\",\n    \"#666666\",\n    \"#999999\",\n    \"#cccccc\",\n    \"#ffffff\"\n  ];\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <ColorPicker swatchColors={customSwatchColors} value={color} onChange={(v) => setColor(v)} />\n      <div>当前颜色值：{color}</div>\n    </div>\n  );\n}"],"names":["SwatchColors","_useState","useState","_useState2","_slicedToArray","color","setColor","customSwatchColors","React","createElement","style","display","flexDirection","gap","ColorPicker","swatchColors","value","onChange","v"],"mappings":";;;;AAGA,SAAwBA,YAAAA,GAAe;AACrC,EAAA,IAAAC,SAAA,GAA0BC,SAAS,SAAS,CAAA;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAArCI,IAAAA,KAAA,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAOG,IAAAA,QAAQ,GAAAH,UAAA,CAAA,CAAA,CAAA;AACtB,EAAA,IAAMI,kBAAA,GAAqB,CACzB,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,CACF;AACA,EAAA,sBACEC,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEC,MAAAA,OAAA,EAAS,MAAA;AAAQC,MAAAA,aAAA,EAAe,QAAA;AAAUC,MAAAA,GAAA,EAAK;AAAO;AAAA,GAAA,iBAClEL,cAAA,CAAAC,aAAA,CAACK,WAAA,EAAA;AAAYC,IAAAA,YAAA,EAAcR,kBAAA;AAAoBS,IAAAA,KAAA,EAAOX,KAAA;AAAOY,IAAAA,QAAA,EAAU,SAAVA,QAAAA,CAAWC,CAAA,EAAA;MAAA,OAAMZ,QAAA,CAASY,CAAC,CAAA;AAAA,IAAA;AAAA,GAAG,CAAA,iBAC3FV,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,EAAI,sCAAA,EAAOJ,KAAM,CACpB,CAAA;AAEJ;;;;"}

package/es/color-picker/_example/with-alpha.js

@@ -0,0 +1,35 @@
+import { _ as _slicedToArray } from '../../_chunks/dep-CzLhKWCf.js';
+import React__default, { useState } from 'react';
+import { ColorPicker } from '@tendaui/react';
+
+function WithAlpha() {
+  var _useState = useState("rgba(0, 82, 217, 0.8)"),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
+  return /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    }
+  }, /* @__PURE__ */React__default.createElement(ColorPicker, {
+    format: "RGBA",
+    enableAlpha: true,
+    value: color,
+    onChange: function onChange(v) {
+      return setColor(v);
+    }
+  }), /* @__PURE__ */React__default.createElement("div", null, "\u5F53\u524D\u989C\u8272\u503C\uFF1A", color), /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      width: "100px",
+      height: "40px",
+      backgroundColor: color,
+      borderRadius: "4px",
+      border: "1px solid #ddd"
+    }
+  }));
+}
+
+export { WithAlpha as default };
+//# sourceMappingURL=with-alpha.js.map

package/es/color-picker/_example/with-alpha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-alpha.js","sources":["../../../../components/color-picker/_example/with-alpha.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ColorPicker } from \"@tendaui/react\";\n\nexport default function WithAlpha() {\n  const [color, setColor] = useState(\"rgba(0, 82, 217, 0.8)\");\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <ColorPicker format=\"RGBA\" enableAlpha value={color} onChange={(v) => setColor(v)} />\n      <div>当前颜色值：{color}</div>\n      <div\n        style={{\n          width: \"100px\",\n          height: \"40px\",\n          backgroundColor: color,\n          borderRadius: \"4px\",\n          border: \"1px solid #ddd\"\n        }}\n      />\n    </div>\n  );\n}"],"names":["WithAlpha","_useState","useState","_useState2","_slicedToArray","color","setColor","React","createElement","style","display","flexDirection","gap","ColorPicker","format","enableAlpha","value","onChange","v","width","height","backgroundColor","borderRadius","border"],"mappings":";;;;AAGA,SAAwBA,SAAAA,GAAY;AAClC,EAAA,IAAAC,SAAA,GAA0BC,SAAS,uBAAuB,CAAA;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAnDI,IAAAA,KAAA,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAOG,IAAAA,QAAQ,GAAAH,UAAA,CAAA,CAAA,CAAA;AACtB,EAAA,sBACEI,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAIC,IAAAA,KAAA,EAAO;AAAEC,MAAAA,OAAA,EAAS,MAAA;AAAQC,MAAAA,aAAA,EAAe,QAAA;AAAUC,MAAAA,GAAA,EAAK;AAAO;AAAA,GAAA,iBAClEL,cAAA,CAAAC,aAAA,CAACK;AAAYC,IAAAA,MAAA,EAAO,MAAA;AAAOC,IAAAA,WAAA,EAAW,IAAA;AAACC,IAAAA,KAAA,EAAOX,KAAA;AAAOY,IAAAA,QAAA,EAAU,SAAVA,QAAAA,CAAWC,CAAA,EAAA;MAAA,OAAMZ,QAAA,CAASY,CAAC,CAAA;AAAA,IAAA;GAAG,CAAA,iBACnFX,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA,IAAA,EAAI,sCAAA,EAAOH,KAAM,CAAA,iBAClBE,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AACCC,IAAAA,KAAA,EAAO;AACLU,MAAAA,KAAA,EAAO,OAAA;AACPC,MAAAA,MAAA,EAAQ,MAAA;AACRC,MAAAA,eAAA,EAAiBhB,KAAA;AACjBiB,MAAAA,YAAA,EAAc,KAAA;AACdC,MAAAA,MAAA,EAAQ;AACV;AAAA,GACF,CACF,CAAA;AAEJ;;;;"}

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

@@ -1,15 +1,16 @@
 import { _ as _defineProperty } from '../../../_chunks/dep-Cwish4GD.js';
 import { _ as _objectWithoutProperties } from '../../../_chunks/dep-DN7d1SzH.js';
-import React from 'react';
+import React__default from 'react';
 import classNames from 'classnames';
 import ColorSlider from './slider.js';
 import '../../../_chunks/dep-D-UKOauR.js';
 import '../../utils/color-picker/index.js';
-import '../../../_chunks/dep-DJmE940f.js';
+import '../../../_chunks/dep-CHpQ3xhh.js';
 import '../../../_chunks/dep-CzLhKWCf.js';
 import '../../../_chunks/dep-Chz4ZJCb.js';
 import '../../../_chunks/dep-zOZQ0R9g.js';
 import 'lodash-es';
+import '../../../_chunks/dep-BK4_iOSv.js';
 import '../../../_chunks/dep-CgyDw_YI.js';
 import '../../../_chunks/dep-BbeHB7S3.js';
 
@@ -27,7 +28,7 @@ var Alpha = function Alpha(props) {
   var railStyle = {
     background: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(props.color.rgb, ")")
   };
-  return /* @__PURE__ */React.createElement(ColorSlider, _objectSpread({
+  return /* @__PURE__ */React__default.createElement(ColorSlider, _objectSpread({
     baseClassName: baseClassName,
     className: classNames(["".concat(baseClassName, "__alpha"), "".concat(baseClassName, "--bg-alpha")]),
     color: color,
@@ -38,7 +39,7 @@ var Alpha = function Alpha(props) {
     maxValue: 100
   }, rest));
 };
-var AlphaSlider = /*#__PURE__*/React.memo(Alpha);
+var AlphaSlider = /*#__PURE__*/React__default.memo(Alpha);
 
 export { AlphaSlider as default };
 //# sourceMappingURL=alpha.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alpha.js","sources":["../../../../../components/color-picker/components/panel/alpha.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport type { TdColorBaseProps } from \"../../type\";\nimport ColorSlider from \"./slider\";\n\nconst Alpha = (props: TdColorBaseProps) => {\n  const { color, baseClassName, onChange, ...rest } = props;\n\n  const handleChange = (v: number) => {\n    onChange?.(v / 100);\n  };\n\n  const railStyle = {\n    background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${props.color.rgb})`\n  };\n\n  return (\n    <ColorSlider\n      baseClassName={baseClassName}\n      className={classNames([`${baseClassName}__alpha`, `${baseClassName}--bg-alpha`])}\n      color={color}\n      value={color.alpha * 100}\n      onChange={handleChange}\n      railStyle={railStyle}\n      type=\"alpha\"\n      maxValue={100}\n      {...rest}\n    />\n  );\n};\n\nexport default React.memo(Alpha);\n"],"names":["Alpha","props","color","baseClassName","onChange","rest","_excluded","handleChange","v","railStyle","background","concat","rgb","React","createElement","ColorSlider","_objectSpread","className","classNames","value","alpha","type","maxValue","memo"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,IAAMA,KAAA,GAAQ,SAARA,KAAAA,CAASC,KAAA,EAA4B;AACzC,EAAA,IAAQC,KAAA,GAA4CD,KAAA,CAA5CC,KAAA;IAAOC,aAAA,GAAqCF,KAAA,CAArCE,aAAA;IAAeC,QAAA,GAAsBH,KAAA,CAAtBG,QAAA;AAAaC,IAAAA,gCAASJ,KAAA,EAAAK,SAAA,CAAA;AAEpD,EAAA,IAAMC,YAAA,GAAe,SAAfA,YAAAA,CAAgBC,CAAA,EAAc;IAClCJ,QAAA,KAAA,IAAA,IAAAA,QAAA,KAAA,KAAA,CAAA,IAAAA,QAAA,CAAWI,IAAI,GAAG,CAAA;EACpB,CAAA;AAEA,EAAA,IAAMC,SAAA,GAAY;AAChBC,IAAAA,UAAA,iDAAAC,MAAA,CAA2DV,KAAA,CAAMC,KAAA,CAAMU,GAAG,EAAA,GAAA;GAC5E;AAEA,EAAA,sBACEC,KAAA,CAAAC,aAAA,CAACC,WAAA,EAAAC,aAAA,CAAA;AACCb,IAAAA,aAAA,EAAAA,aAAA;AACAc,IAAAA,SAAA,EAAWC,WAAW,CAAA,EAAA,CAAAP,MAAA,CAAIR,aAAa,EAAA,SAAA,CAAA,EAAA,EAAA,CAAAQ,MAAA,CAAcR,aAAa,EAAA,YAAA,CAAA,CAAa,CAAA;AAC/ED,IAAAA,KAAA,EAAAA,KAAA;AACAiB,IAAAA,KAAA,EAAOjB,MAAMkB,KAAA,GAAQ,GAAA;AACrBhB,IAAAA,QAAA,EAAUG,YAAA;AACVE,IAAAA,SAAA,EAAAA,SAAA;AACAY,IAAAA,IAAA,EAAK,OAAA;AACLC,IAAAA,QAAA,EAAU;GAAA,EACNjB,IAAA,CACN,CAAA;AAEJ,CAAA;AAEA,kBAAA,aAAeQ,KAAA,CAAMU,KAAKvB,KAAK,CAAA;;;;"}
+{"version":3,"file":"alpha.js","sources":["../../../../../components/color-picker/components/panel/alpha.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport type { TdColorBaseProps } from \"../../type\";\nimport ColorSlider from \"./slider\";\n\nconst Alpha = (props: TdColorBaseProps) => {\n  const { color, baseClassName, onChange, ...rest } = props;\n\n  const handleChange = (v: number) => {\n    onChange?.(v / 100);\n  };\n\n  const railStyle = {\n    background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${props.color.rgb})`\n  };\n\n  return (\n    <ColorSlider\n      baseClassName={baseClassName}\n      className={classNames([`${baseClassName}__alpha`, `${baseClassName}--bg-alpha`])}\n      color={color}\n      value={color.alpha * 100}\n      onChange={handleChange}\n      railStyle={railStyle}\n      type=\"alpha\"\n      maxValue={100}\n      {...rest}\n    />\n  );\n};\n\nexport default React.memo(Alpha);\n"],"names":["Alpha","props","color","baseClassName","onChange","rest","_excluded","handleChange","v","railStyle","background","concat","rgb","React","createElement","ColorSlider","_objectSpread","className","classNames","value","alpha","type","maxValue","memo"],"mappings":";;;;;;;;;;;;;;;;;;;AAKA,IAAMA,KAAA,GAAQ,SAARA,KAAAA,CAASC,KAAA,EAA4B;AACzC,EAAA,IAAQC,KAAA,GAA4CD,KAAA,CAA5CC,KAAA;IAAOC,aAAA,GAAqCF,KAAA,CAArCE,aAAA;IAAeC,QAAA,GAAsBH,KAAA,CAAtBG,QAAA;AAAaC,IAAAA,gCAASJ,KAAA,EAAAK,SAAA,CAAA;AAEpD,EAAA,IAAMC,YAAA,GAAe,SAAfA,YAAAA,CAAgBC,CAAA,EAAc;IAClCJ,QAAA,KAAA,IAAA,IAAAA,QAAA,KAAA,KAAA,CAAA,IAAAA,QAAA,CAAWI,IAAI,GAAG,CAAA;EACpB,CAAA;AAEA,EAAA,IAAMC,SAAA,GAAY;AAChBC,IAAAA,UAAA,iDAAAC,MAAA,CAA2DV,KAAA,CAAMC,KAAA,CAAMU,GAAG,EAAA,GAAA;GAC5E;AAEA,EAAA,sBACEC,cAAA,CAAAC,aAAA,CAACC,WAAA,EAAAC,aAAA,CAAA;AACCb,IAAAA,aAAA,EAAAA,aAAA;AACAc,IAAAA,SAAA,EAAWC,WAAW,CAAA,EAAA,CAAAP,MAAA,CAAIR,aAAa,EAAA,SAAA,CAAA,EAAA,EAAA,CAAAQ,MAAA,CAAcR,aAAa,EAAA,YAAA,CAAA,CAAa,CAAA;AAC/ED,IAAAA,KAAA,EAAAA,KAAA;AACAiB,IAAAA,KAAA,EAAOjB,MAAMkB,KAAA,GAAQ,GAAA;AACrBhB,IAAAA,QAAA,EAAUG,YAAA;AACVE,IAAAA,SAAA,EAAAA,SAAA;AACAY,IAAAA,IAAA,EAAK,OAAA;AACLC,IAAAA,QAAA,EAAU;GAAA,EACNjB,IAAA,CACN,CAAA;AAEJ,CAAA;AAEA,kBAAA,aAAeQ,cAAA,CAAMU,KAAKvB,KAAK,CAAA;;;;"}