@tendaui/react 1.2.4 → 1.3.0

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

@@ -1 +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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"}
+{"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.js

@@ -1,12 +1,13 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React__default, { 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 { m as SLIDER_DEFAULT_WIDTH } from '../../../_chunks/dep-CHpQ3xhh.js';
 import '../../../_chunks/dep-Chz4ZJCb.js';
 import '../../../_chunks/dep-Cwish4GD.js';
 import '../../../_chunks/dep-D-UKOauR.js';
+import '../../../_chunks/dep-BK4_iOSv.js';
 import '../../../_chunks/dep-CgyDw_YI.js';
 import '../../../_chunks/dep-zOZQ0R9g.js';
 import 'lodash-es';
@@ -97,25 +98,25 @@ var ColorSlider = function ColorSlider(props) {
   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", {
+  return /* @__PURE__ */React__default.createElement("div", {
     className: classNames("".concat(baseClassName, "__slider-wrapper"), "".concat(baseClassName, "__slider-wrapper--").concat(type, "-type"))
-  }, type === "alpha" && /* @__PURE__ */React.createElement("div", {
+  }, type === "alpha" && /* @__PURE__ */React__default.createElement("div", {
     className: "".concat(baseClassName, "__slider-padding"),
     style: paddingStyle
-  }), /* @__PURE__ */React.createElement("div", {
+  }), /* @__PURE__ */React__default.createElement("div", {
     className: classNames("".concat(baseClassName, "__slider"), className),
     ref: panelRef
-  }, /* @__PURE__ */React.createElement("div", {
+  }, /* @__PURE__ */React__default.createElement("div", {
     className: "".concat(baseClassName, "__rail"),
     style: railStyle
-  }), /* @__PURE__ */React.createElement("span", {
+  }), /* @__PURE__ */React__default.createElement("span", {
     className: "".concat(baseClassName, "__thumb"),
     role: "slider",
     tabIndex: 0,
     style: styles
   })));
 };
-var ColorSlider$1 = /*#__PURE__*/React.memo(ColorSlider);
+var ColorSlider$1 = /*#__PURE__*/React__default.memo(ColorSlider);
 
 export { ColorSlider$1 as default };
 //# sourceMappingURL=slider.js.map

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

@@ -1 +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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"}
+{"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":";;;;;;;;;;;;;;AAUA,IAAMA,SAAA,GAAY,SAAZA,SAAAA,CAAaC,MAAA,EAAkCC,YAAA,EAAsD;AACzG,EAAA,IAAQC,KAAA,GAAiCF,MAAA,CAAjCE,KAAA;IAAOC,KAAA,GAA0BH,MAAA,CAA1BG,KAAA;IAAOC,QAAA,GAAmBJ,MAAA,CAAnBI,QAAA;IAAUC,OAASL,MAAA,CAATK;EAChC,IAAAC,SAAA,GAA4BC,QAAA,CAAwB;AAAEC,MAAAA,IAAA,EAAM,EAAA;AAAIN,MAAAA,KAAA,EAAO;AAAG,KAAC,CAAA;IAAAO,UAAA,GAAAC,cAAA,CAAAJ,SAAA,EAAA,CAAA,CAAA;AAApEK,IAAAA,MAAA,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAQG,IAAAA,SAAS,GAAAH,UAAA,CAAA,CAAA,CAAA;AAExBI,EAAAA,SAAA,CAAU,YAAM;AACd,IAAA,IAAQC,KAAA,GAAUb,YAAA,CAAac,OAAA,CAAvBD,KAAA;IACR,IAAI,CAACA,KAAA,EAAO;AAEZ,IAAA,IAAMN,IAAA,GAAOQ,KAAKC,KAAA,CAAOC,MAAA,CAAOf,KAAK,CAAA,GAAIe,MAAA,CAAOd,QAAQ,CAAA,GAAK,GAAG,CAAA;IAEhE,IAAIe,UAAA,GAAa,EAAA;IACjB,IAAId,SAAS,KAAA,EAAO;AAClBc,MAAAA,UAAA,UAAAC,MAAA,CAAoBlB,MAAMmB,GAAG,EAAA,cAAA,CAAA;AAC/B,IAAA,CAAA,MAAA,IAAWhB,SAAS,OAAA,EAAS;MAC3Bc,UAAA,GAAajB,KAAA,CAAMoB,IAAA;AACrB,IAAA;AAEAV,IAAAA,SAAA,CAAU;AACRJ,MAAAA,IAAA,EAAA,EAAA,CAAAY,MAAA,CAASZ,IAAI,EAAA,GAAA,CAAA;AACbN,MAAAA,KAAA,EAAOiB;AACT,KAAC,CAAA;AACH,EAAA,CAAA,EAAG,CAACjB,KAAA,CAAMmB,GAAA,EAAKnB,MAAMoB,IAAA,EAAMlB,QAAA,EAAUC,IAAA,EAAMF,KAAK,CAAC,CAAA;EAEjD,OAAO;AACLQ,IAAAA,MAAA,EAAAA;GACF;AACF,CAAA;;ACrBA,IAAMY,WAAA,GAAc,SAAdA,WAAAA,CAAeC,KAAA,EAA8B;AACjD,EAAA,IACEtB,KAAA,GASEsB,KAAA,CATFtB,KAAA;IAAAuB,gBAAA,GASED,KAAA,CARFE,SAAA;AAAAA,IAAAA,SAAA,GAAAD,gBAAA,KAAA,KAAA,CAAA,GAAY,EAAA,GAAAA,gBAAA;IAAAE,YAAA,GAQVH,KAAA,CAPFrB,KAAA;AAAAA,IAAAA,KAAA,GAAAwB,YAAA,KAAA,KAAA,CAAA,GAAQ,CAAA,GAAAA,YAAA;IAAAC,gBAAA,GAONJ,KAAA,CANFK;AAAAA,IAAAA,0CAAY,EAAC,GAAAD,gBAAA;IAAAE,eAAA,GAMXN,KAAA,CALFpB,QAAA;AAAAA,IAAAA,QAAA,GAAA0B,eAAA,KAAA,KAAA,CAAA,GAAW,GAAA,GAAAA,eAAA;IACXC,aAAA,GAIEP,KAAA,CAJFO,aAAA;IACAC,QAAA,GAGER,KAAA,CAHFQ,QAAA;IACAC,QAAA,GAEET,KAAA,CAFFS,QAAA;IACA5B,IAAA,GACEmB,KAAA,CADFnB,IAAA;AAEF,EAAA,IAAM6B,QAAA,GAAWC,OAAuB,IAAI,CAAA;EAC5C,IAAMlC,eAAekC,MAAA,CAAO;AAC1BrB,IAAAA,KAAA,EAAOsB;AACT,GAAC,CAAA;EACD,IAAAC,UAAA,GAAmBtC,SAAA,CAAU;AAAEG,MAAAA,OAAAA;AAAOC,MAAAA,KAAA,EAAAA,KAAA;AAAOC,MAAAA,QAAA,EAAAA,QAAA;AAAUC,MAAAA,IAAA,EAAAA;KAAK,EAAGJ,YAAY,CAAA;IAAnEU,MAAA,GAAA0B,UAAA,CAAA1B,MAAA;AAER,EAAA,IAAM2B,UAAA,GAAa,SAAbA,UAAAA,CAAcC,UAAA,EAAgC;AAClD,IAAA,IAAIP,QAAA,EAAU;AACd,IAAA,IAAQlB,KAAA,GAAUb,YAAA,CAAac,OAAA,CAAvBD,KAAA;AACR,IAAA,IAAQ0B,IAAMD,UAAA,CAANC;AACR,IAAA,IAAMC,SAAA,GAAYzB,KAAKC,KAAA,CAAOuB,CAAA,GAAI1B,QAASI,MAAA,CAAOd,QAAQ,CAAA,GAAI,GAAG,CAAA,GAAI,GAAA;AACrEsC,IAAAA,OAAA,CAAQC,IAAIF,SAAS,CAAA;AACrBR,IAAAA,QAAA,aAAAA,QAAA,KAAA,KAAA,CAAA,IAAAA,QAAA,CAAWQ,SAAS,CAAA;EACtB,CAAA;EAEAG,aAAA,CAAcV,QAAA,EAAU;AACtBW,IAAAA,MAAA,EAAQ,SAARA,MAAAA,CAASC,CAAA,EAAGC,GAAA,EAAQ;AAAA,MAAA,IAAAC,iBAAA;AAClB,MAAA,IAAIhB,QAAA,EAAU;MACd/B,YAAA,CAAac,QAAQD,KAAA,GAAQ,CAAA,CAAAkC,iBAAA,GAAAd,QAAA,CAASnB,OAAA,cAAAiC,iBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAATA,iBAAA,CAAkBC,WAAA,KAAehD,aAAac,OAAA,CAAQD,KAAA;AACnFwB,MAAAA,UAAA,CAAWS,IAAIR,UAAU,CAAA;IAC3B,CAAA;AACAW,IAAAA,MAAA,EAAQ,SAARA,MAAAA,CAASJ,CAAA,EAAGC,GAAA,EAAQ;AAClBT,MAAAA,UAAA,CAAWS,IAAIR,UAAU,CAAA;IAC3B,CAAA;AACAY,IAAAA,IAAA,EAAM,SAANA,IAAAA,CAAOL,CAAA,EAAGC,GAAA,EAAQ;AAChBT,MAAAA,UAAA,CAAWS,IAAIR,UAAU,CAAA;AAC3B,IAAA;AACF,GAAC,CAAA;AAED1B,EAAAA,SAAA,CAAU,YAAM;AAAA,IAAA,IAAAuC,kBAAA;AACdnD,IAAAA,YAAA,CAAac,OAAA,CAAQD,KAAA,GAAQ,CAAA,CAAAsC,kBAAA,GAAAlB,QAAA,CAASnB,OAAA,cAAAqC,kBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAATA,kBAAA,CAAkBH,WAAA,KAAeb,oBAAA;EAChE,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,IAAMiB,YAAA,GAAe;AACnBC,IAAAA,UAAA,EAAA,gEAAA,CAAAlC,MAAA,CAA6EI,KAAA,CAAMtB,KAAA,CAAMqD,GAAG,EAAA,QAAA,CAAA,CAAAnC,MAAA,CAASI,KAAA,CAAMtB,MAAMqD,GAAG,EAAA,QAAA;GACtH;AAEA,EAAA,sBACEC,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAI/B,IAAAA,SAAA,EAAWgC,UAAA,CAAA,EAAA,CAAAtC,MAAA,CAAcW,aAAa,EAAA,kBAAA,CAAA,EAAA,EAAA,CAAAX,MAAA,CAAuBW,aAAa,EAAA,oBAAA,CAAA,CAAAX,MAAA,CAAqBf,IAAI,EAAA,OAAA,CAAO;GAAA,EAC5GA,SAAS,OAAA,mBAAWmD,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAI/B,IAAAA,SAAA,EAAA,EAAA,CAAAN,MAAA,CAAcW,aAAa,EAAA,kBAAA,CAAA;AAAoB4B,IAAAA,KAAA,EAAON;GAAc,CAAA,iBAC9FG,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;IAAI/B,SAAA,EAAWgC,UAAA,CAAA,EAAA,CAAAtC,MAAA,CAAcW,aAAa,EAAA,UAAA,CAAA,EAAYL,SAAS,CAAA;AAAGkC,IAAAA,GAAA,EAAK1B;AAAA,GAAA,iBACtEsB,cAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;AAAI/B,IAAAA,SAAA,EAAA,EAAA,CAAAN,MAAA,CAAcW,aAAa,EAAA,QAAA,CAAA;AAAU4B,IAAAA,KAAA,EAAO9B;GAAW,CAAA,iBAC5D2B,cAAA,CAAAC,aAAA,CAAC,MAAA,EAAA;AAAK/B,IAAAA,SAAA,EAAA,EAAA,CAAAN,MAAA,CAAcW,aAAa,EAAA,SAAA,CAAA;AAAW8B,IAAAA,IAAA,EAAK,QAAA;AAASC,IAAAA,QAAA,EAAU,CAAA;AAAGH,IAAAA,KAAA,EAAOhD;GAAQ,CACxF,CACF,CAAA;AAEJ,CAAA;AAEA,oBAAA,aAAe6C,cAAA,CAAMO,KAAKxC,WAAW,CAAA;;;;"}

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

@@ -1,17 +1,18 @@
-import React from 'react';
+import React__default from 'react';
 import classNames from 'classnames';
 import { IconPlus, IconDelete } from '@tendaui/icons';
-import { C as Color } from '../../../_chunks/dep-DJmE940f.js';
-import { u as useGlobalIcon } from '../../../_chunks/dep-ByzdZjUR.js';
-import { u as useCommonClassName } from '../../../_chunks/dep-DTlQ2dCA.js';
+import { C as Color } from '../../../_chunks/dep-CHpQ3xhh.js';
+import { u as useGlobalIcon } from '../../../_chunks/dep-bWaVq_y3.js';
+import { u as useCommonClassName } from '../../../_chunks/dep--qagmRQa.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-gy8uvBaS.js';
-import '../../../_chunks/dep-5U9UjDaf.js';
+import '../../../_chunks/dep-u1x3x6MJ.js';
+import '../../../config-provider/ConfigContext.js';
+import '../../../_chunks/dep--nQ-cjme.js';
 import 'dayjs';
 
 var Swatches = function Swatches(props) {
@@ -54,28 +55,28 @@ var Swatches = function Swatches(props) {
   var handleClick = function handleClick(color) {
     return onSetColor === null || onSetColor === void 0 ? void 0 : onSetColor(color);
   };
-  return /* @__PURE__ */React.createElement("div", {
+  return /* @__PURE__ */React__default.createElement("div", {
     className: swatchesClass
-  }, title ? /* @__PURE__ */React.createElement("h3", {
+  }, title ? /* @__PURE__ */React__default.createElement("h3", {
     className: "".concat(swatchesClass, "--title")
-  }, /* @__PURE__ */React.createElement("span", null, title), editable && /* @__PURE__ */React.createElement("div", {
+  }, /* @__PURE__ */React__default.createElement("span", null, title), editable && /* @__PURE__ */React__default.createElement("div", {
     className: "".concat(swatchesClass, "--actions")
-  }, /* @__PURE__ */React.createElement("span", {
+  }, /* @__PURE__ */React__default.createElement("span", {
     role: "button",
     className: "".concat(baseClassName, "__icon"),
     onClick: function onClick() {
       return handleAddColor === null || handleAddColor === void 0 ? void 0 : handleAddColor();
     }
-  }, /* @__PURE__ */React.createElement(AddIcon, null)), colors.length > 0 ? /* @__PURE__ */React.createElement("span", {
+  }, /* @__PURE__ */React__default.createElement(AddIcon, null)), colors.length > 0 ? /* @__PURE__ */React__default.createElement("span", {
     role: "button",
     className: "".concat(baseClassName, "__icon"),
     onClick: function onClick() {
       return handleRemoveColor();
     }
-  }, /* @__PURE__ */React.createElement(DeleteIcon, null)) : null)) : null, /* @__PURE__ */React.createElement("ul", {
+  }, /* @__PURE__ */React__default.createElement(DeleteIcon, null)) : null)) : null, /* @__PURE__ */React__default.createElement("ul", {
     className: classNames("".concat(swatchesClass, "--items"), "narrow-scrollbar")
   }, colors.map(function (color) {
-    return /* @__PURE__ */React.createElement("li", {
+    return /* @__PURE__ */React__default.createElement("li", {
       className: classNames("".concat(swatchesClass, "--item"), isEqualCurrentColor(color) && editable ? statusClassNames.active : ""),
       key: color,
       onClick: function onClick() {
@@ -84,9 +85,9 @@ var Swatches = function Swatches(props) {
         }
         handleClick(color);
       }
-    }, /* @__PURE__ */React.createElement("div", {
+    }, /* @__PURE__ */React__default.createElement("div", {
       className: classNames("".concat(swatchesClass, "--item__color"), "".concat(baseClassName, "--bg-alpha"))
-    }, /* @__PURE__ */React.createElement("span", {
+    }, /* @__PURE__ */React__default.createElement("span", {
       className: "".concat(swatchesClass, "--item__inner"),
       style: {
         background: color
@@ -94,7 +95,7 @@ var Swatches = function Swatches(props) {
     })));
   })));
 };
-var SwatchesPanel = /*#__PURE__*/React.memo(Swatches);
+var SwatchesPanel = /*#__PURE__*/React__default.memo(Swatches);
 
 export { SwatchesPanel as default };
 //# sourceMappingURL=swatches.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"swatches.js","sources":["../../../../../components/color-picker/components/panel/swatches.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { IconDelete as TdDeleteIcon, IconPlus as TdAddIcon } from \"@tendaui/icons\";\nimport Color from \"../../utils/color-picker/color\";\nimport useGlobalIcon from \"../../../hooks/useGlobalIcon\";\nimport { TdColorBaseProps } from \"../../type\";\nimport useCommonClassName from \"../../../hooks/useCommonClassName\";\n\nexport interface TdColorSwatchesProps extends TdColorBaseProps {\n  colors?: string[];\n  title?: string;\n  editable?: boolean;\n  onSetColor?: (color: string) => void;\n  handleAddColor?: () => void;\n}\n\nconst Swatches = (props: TdColorSwatchesProps) => {\n  const { baseClassName, colors = [], editable = false, title, onChange, disabled, onSetColor, handleAddColor } = props;\n  const { DeleteIcon, AddIcon } = useGlobalIcon({ DeleteIcon: TdDeleteIcon, AddIcon: TdAddIcon });\n  const swatchesClass = `${baseClassName}__swatches`;\n  const { STATUS: statusClassNames } = useCommonClassName();\n  const isEqualCurrentColor = (color: string) => Color.compare(color, props.color.css);\n\n  const selectedColorIndex = () => colors.findIndex((color) => isEqualCurrentColor(color));\n  const handleRemoveColor = () => {\n    const selectedIndex = selectedColorIndex();\n    if (selectedIndex > -1) {\n      const newColors = colors.filter((_, index) => index !== selectedIndex);\n      onChange?.(newColors);\n    }\n  };\n\n  const handleClick = (color: string) => onSetColor?.(color);\n\n  return (\n    <div className={swatchesClass}>\n      {title ? (\n        <h3 className={`${swatchesClass}--title`}>\n          <span>{title}</span>\n          {editable && (\n            <div className={`${swatchesClass}--actions`}>\n              <span role=\"button\" className={`${baseClassName}__icon`} onClick={() => handleAddColor?.()}>\n                <AddIcon />\n              </span>\n              {colors.length > 0 ? (\n                <span role=\"button\" className={`${baseClassName}__icon`} onClick={() => handleRemoveColor()}>\n                  <DeleteIcon />\n                </span>\n              ) : null}\n            </div>\n          )}\n        </h3>\n      ) : null}\n      <ul className={classNames(`${swatchesClass}--items`, \"narrow-scrollbar\")}>\n        {colors.map((color) => (\n          <li\n            className={classNames(\n              `${swatchesClass}--item`,\n              isEqualCurrentColor(color) && editable ? statusClassNames.active : \"\"\n            )}\n            key={color}\n            onClick={() => {\n              if (disabled) {\n                return;\n              }\n              handleClick(color);\n            }}\n          >\n            <div className={classNames(`${swatchesClass}--item__color`, `${baseClassName}--bg-alpha`)}>\n              <span\n                className={`${swatchesClass}--item__inner`}\n                style={{\n                  background: color\n                }}\n              />\n            </div>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nexport default React.memo(Swatches);\n"],"names":["Swatches","props","baseClassName","_props$colors","colors","_props$editable","editable","title","onChange","disabled","onSetColor","handleAddColor","_useGlobalIcon","useGlobalIcon","DeleteIcon","TdDeleteIcon","AddIcon","TdAddIcon","swatchesClass","concat","_useCommonClassName","useCommonClassName","statusClassNames","STATUS","isEqualCurrentColor","color","Color","compare","css","selectedColorIndex","findIndex","handleRemoveColor","selectedIndex","newColors","filter","_","index","handleClick","React","createElement","className","role","onClick","length","classNames","map","active","key","style","background","memo"],"mappings":"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"}
+{"version":3,"file":"swatches.js","sources":["../../../../../components/color-picker/components/panel/swatches.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { IconDelete as TdDeleteIcon, IconPlus as TdAddIcon } from \"@tendaui/icons\";\nimport Color from \"../../utils/color-picker/color\";\nimport useGlobalIcon from \"../../../hooks/useGlobalIcon\";\nimport { TdColorBaseProps } from \"../../type\";\nimport useCommonClassName from \"../../../hooks/useCommonClassName\";\n\nexport interface TdColorSwatchesProps extends TdColorBaseProps {\n  colors?: string[];\n  title?: string;\n  editable?: boolean;\n  onSetColor?: (color: string) => void;\n  handleAddColor?: () => void;\n}\n\nconst Swatches = (props: TdColorSwatchesProps) => {\n  const { baseClassName, colors = [], editable = false, title, onChange, disabled, onSetColor, handleAddColor } = props;\n  const { DeleteIcon, AddIcon } = useGlobalIcon({ DeleteIcon: TdDeleteIcon, AddIcon: TdAddIcon });\n  const swatchesClass = `${baseClassName}__swatches`;\n  const { STATUS: statusClassNames } = useCommonClassName();\n  const isEqualCurrentColor = (color: string) => Color.compare(color, props.color.css);\n\n  const selectedColorIndex = () => colors.findIndex((color) => isEqualCurrentColor(color));\n  const handleRemoveColor = () => {\n    const selectedIndex = selectedColorIndex();\n    if (selectedIndex > -1) {\n      const newColors = colors.filter((_, index) => index !== selectedIndex);\n      onChange?.(newColors);\n    }\n  };\n\n  const handleClick = (color: string) => onSetColor?.(color);\n\n  return (\n    <div className={swatchesClass}>\n      {title ? (\n        <h3 className={`${swatchesClass}--title`}>\n          <span>{title}</span>\n          {editable && (\n            <div className={`${swatchesClass}--actions`}>\n              <span role=\"button\" className={`${baseClassName}__icon`} onClick={() => handleAddColor?.()}>\n                <AddIcon />\n              </span>\n              {colors.length > 0 ? (\n                <span role=\"button\" className={`${baseClassName}__icon`} onClick={() => handleRemoveColor()}>\n                  <DeleteIcon />\n                </span>\n              ) : null}\n            </div>\n          )}\n        </h3>\n      ) : null}\n      <ul className={classNames(`${swatchesClass}--items`, \"narrow-scrollbar\")}>\n        {colors.map((color) => (\n          <li\n            className={classNames(\n              `${swatchesClass}--item`,\n              isEqualCurrentColor(color) && editable ? statusClassNames.active : \"\"\n            )}\n            key={color}\n            onClick={() => {\n              if (disabled) {\n                return;\n              }\n              handleClick(color);\n            }}\n          >\n            <div className={classNames(`${swatchesClass}--item__color`, `${baseClassName}--bg-alpha`)}>\n              <span\n                className={`${swatchesClass}--item__inner`}\n                style={{\n                  background: color\n                }}\n              />\n            </div>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nexport default React.memo(Swatches);\n"],"names":["Swatches","props","baseClassName","_props$colors","colors","_props$editable","editable","title","onChange","disabled","onSetColor","handleAddColor","_useGlobalIcon","useGlobalIcon","DeleteIcon","TdDeleteIcon","AddIcon","TdAddIcon","swatchesClass","concat","_useCommonClassName","useCommonClassName","statusClassNames","STATUS","isEqualCurrentColor","color","Color","compare","css","selectedColorIndex","findIndex","handleRemoveColor","selectedIndex","newColors","filter","_","index","handleClick","React","createElement","className","role","onClick","length","classNames","map","active","key","style","background","memo"],"mappings":"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"}

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

@@ -1,27 +1,30 @@
 import { _ as _defineProperty } from '../../_chunks/dep-Cwish4GD.js';
-import React from 'react';
+import { _ as _slicedToArray } from '../../_chunks/dep-CzLhKWCf.js';
+import React__default, { useState, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
-import { g as getColorObject, C as Color } from '../../_chunks/dep-DJmE940f.js';
+import { C as Color, g as getColorObject } from '../../_chunks/dep-CHpQ3xhh.js';
+import { i as initColorFormat } from '../../_chunks/dep-BK4_iOSv.js';
 import { Input } from '../../input/index.js';
-import { u as useClassNames } from '../../_chunks/dep-oUgTcXgm.js';
+import { u as useClassNames } from '../../_chunks/dep-Blkje0_M.js';
 import { n as noop } from '../../_chunks/dep-U1T8CQY9.js';
 import '../../_chunks/dep-D-UKOauR.js';
-import '../../_chunks/dep-CzLhKWCf.js';
 import '../../_chunks/dep-Chz4ZJCb.js';
 import '../../_chunks/dep-zOZQ0R9g.js';
 import 'lodash-es';
+import '../../_chunks/dep-CgyDw_YI.js';
 import '../../input/Input.js';
 import '../../_chunks/dep-DN7d1SzH.js';
 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-grkSd2UB.js';
+import '../../_chunks/dep-spxR0DG0.js';
 import '../../_chunks/dep-DGvfel3I.js';
-import '../../_chunks/dep-gy8uvBaS.js';
-import '../../_chunks/dep-5U9UjDaf.js';
+import '../../_chunks/dep-u1x3x6MJ.js';
+import '../../config-provider/ConfigContext.js';
+import '../../_chunks/dep--nQ-cjme.js';
 import 'dayjs';
-import '../../_chunks/dep-CD_4-1Xb.js';
+import '../../_chunks/dep-UHQn9biR.js';
 import '../../config-provider/index.js';
 import '../../config-provider/ConfigProvider.js';
 import '../../input/InputGroup.js';
@@ -40,37 +43,67 @@ var ColorPickerTrigger = function ColorPickerTrigger(props) {
       autoWidth: true
     } : _props$inputProps,
     clearable = props.clearable,
-    onClear = props.onClear;
-  var handleChange = function handleChange(input) {
-    if (input !== props.value) {
-      var _props$onChange;
-      (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, input, {
-        color: getColorObject(new Color(input)),
-        trigger: "input"
-      });
+    onClear = props.onClear,
+    _props$format = props.format,
+    format = _props$format === void 0 ? "RGB" : _props$format,
+    _props$enableAlpha = props.enableAlpha,
+    enableAlpha = _props$enableAlpha === void 0 ? false : _props$enableAlpha;
+  var _useState = useState(props.value || ""),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  useEffect(function () {
+    setInputValue(props.value || "");
+  }, [props.value]);
+  var handleInputChange = useCallback(function (input) {
+    setInputValue(input);
+  }, []);
+  var handleBlur = useCallback(function () {
+    if (!inputValue) {
+      return;
     }
-  };
-  return /* @__PURE__ */React.createElement("div", {
+    if (Color.isValid(inputValue)) {
+      var colorInstance = new Color(inputValue);
+      var finalFormat = initColorFormat(format, enableAlpha);
+      var formattedValue = colorInstance.getFormattedColor(finalFormat, enableAlpha);
+      if (formattedValue !== props.value) {
+        var _props$onChange;
+        (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, formattedValue, {
+          color: getColorObject(colorInstance),
+          trigger: "input"
+        });
+      }
+      setInputValue(formattedValue);
+    } else {
+      setInputValue(props.value || "");
+    }
+  }, [inputValue, props.value, props.onChange, format, enableAlpha]);
+  var handleEnter = useCallback(function () {
+    handleBlur();
+  }, [handleBlur]);
+  return /* @__PURE__ */React__default.createElement("div", {
     className: "".concat(baseClassName, "__trigger--default")
-  }, /* @__PURE__ */React.createElement(Input, _objectSpread(_objectSpread({
+  }, /* @__PURE__ */React__default.createElement(Input, _objectSpread(_objectSpread({
     borderless: borderless,
     clearable: clearable
   }, inputProps), {}, {
-    value: props.value,
+    value: inputValue,
     disabled: disabled,
-    label: /* @__PURE__ */React.createElement("div", {
+    label: /* @__PURE__ */React__default.createElement("div", {
       className: classNames("".concat(baseClassName, "__trigger--default__color"), "".concat(baseClassName, "--bg-alpha"))
-    }, /* @__PURE__ */React.createElement("span", {
+    }, /* @__PURE__ */React__default.createElement("span", {
       className: "color-inner",
       style: {
         background: props.value
       }
     })),
-    onChange: handleChange,
+    onChange: handleInputChange,
+    onBlur: handleBlur,
+    onEnter: handleEnter,
     onClear: onClear || noop
   })));
 };
-var ColorTrigger = /*#__PURE__*/React.memo(ColorPickerTrigger);
+var ColorTrigger = /*#__PURE__*/React__default.memo(ColorPickerTrigger);
 
 export { ColorTrigger as default };
 //# sourceMappingURL=trigger.js.map

package/es/color-picker/components/trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"trigger.js","sources":["../../../../components/color-picker/components/trigger.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { Color, getColorObject } from \"../utils/color-picker/color\";\nimport { Input } from \"../../input\";\nimport { TdColorPickerProps } from \"../type\";\nimport useClassName from \"../hooks/useClassNames\";\nimport { TdColorContext } from \"../type\";\nimport noop from \"../../utils/noop\";\n\nexport interface ColorTriggerProps\n  extends Pick<TdColorPickerProps, \"disabled\" | \"inputProps\" | \"borderless\" | \"clearable\" | \"onClear\"> {\n  value?: string;\n  onChange?: (v?: string, context?: TdColorContext) => void;\n}\n\nconst ColorPickerTrigger = (props: ColorTriggerProps) => {\n  const baseClassName = useClassName();\n  const { disabled = false, borderless = false, inputProps = { autoWidth: true }, clearable, onClear } = props;\n\n  const handleChange = (input: string) => {\n    if (input !== props.value) {\n      props.onChange?.(input, {\n        color: getColorObject(new Color(input)),\n        trigger: \"input\"\n      });\n    }\n  };\n\n  return (\n    <div className={`${baseClassName}__trigger--default`}>\n      <Input\n        borderless={borderless}\n        clearable={clearable}\n        {...inputProps}\n        value={props.value}\n        disabled={disabled}\n        label={\n          <div className={classNames(`${baseClassName}__trigger--default__color`, `${baseClassName}--bg-alpha`)}>\n            <span className={\"color-inner\"} style={{ background: props.value }}></span>\n          </div>\n        }\n        onChange={handleChange}\n        onClear={onClear || noop}\n      />\n    </div>\n  );\n};\n\nexport default React.memo(ColorPickerTrigger);\n"],"names":["ColorPickerTrigger","props","baseClassName","useClassName","_props$disabled","disabled","_props$borderless","borderless","_props$inputProps","inputProps","autoWidth","clearable","onClear","handleChange","input","value","_props$onChange","onChange","call","color","getColorObject","Color","trigger","React","createElement","className","concat","Input","_objectSpread","label","classNames","style","background","noop","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAMA,kBAAA,GAAqB,SAArBA,kBAAAA,CAAsBC,KAAA,EAA6B;AACvD,EAAA,IAAMC,gBAAgBC,aAAA,EAAa;AACnC,EAAA,IAAAC,eAAA,GAAuGH,KAAA,CAA/FI,QAAA;AAAAA,IAAAA,QAAA,GAAAD,eAAA,KAAA,KAAA,CAAA,GAAW,KAAA,GAAAA,eAAA;IAAAE,iBAAA,GAAoFL,KAAA,CAA7EM,UAAA;AAAAA,IAAAA,UAAA,GAAAD,iBAAA,KAAA,KAAA,CAAA,GAAa,KAAA,GAAAA,iBAAA;IAAAE,iBAAA,GAAgEP,KAAA,CAAzDQ,UAAA;IAAAA,UAAA,GAAAD,iBAAA,KAAA,KAAA,CAAA,GAAa;AAAEE,MAAAA,SAAA,EAAW;AAAK,KAAA,GAAAF,iBAAA;IAAGG,SAAA,GAAuBV,KAAA,CAAvBU,SAAA;IAAWC,OAAA,GAAYX,KAAA,CAAZW,OAAA;AAE3F,EAAA,IAAMC,YAAA,GAAe,SAAfA,YAAAA,CAAgBC,KAAA,EAAkB;AACtC,IAAA,IAAIA,KAAA,KAAUb,MAAMc,KAAA,EAAO;AAAA,MAAA,IAAAC,eAAA;AACzB,MAAA,CAAAA,eAAA,GAAAf,KAAA,CAAMgB,oDAAND,eAAA,CAAAE,IAAA,CAAAjB,KAAA,EAAiBa,KAAA,EAAO;QACtBK,KAAA,EAAOC,cAAA,CAAe,IAAIC,KAAA,CAAMP,KAAK,CAAC,CAAA;AACtCQ,QAAAA,OAAA,EAAS;AACX,OAAC,CAAA;AACH,IAAA;EACF,CAAA;AAEA,EAAA,sBACEC,KAAA,CAAAC,aAAA,CAAC,KAAA,EAAA;IAAIC,SAAA,EAAA,EAAA,CAAAC,MAAA,CAAcxB,aAAa,EAAA,oBAAA;GAAA,iBAC9BqB,KAAA,CAAAC,aAAA,CAACG,KAAA,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACCrB,IAAAA,UAAA,EAAAA,UAAA;AACAI,IAAAA,SAAA,EAAAA;AAAA,GAAA,EACIF,UAAA,CAAA,EAAA,EAAA,EAAA;IACJM,OAAOd,KAAA,CAAMc,KAAA;AACbV,IAAAA,QAAA,EAAAA,QAAA;AACAwB,IAAAA,KAAA,qCACG,KAAA,EAAA;MAAIJ,SAAA,EAAWK,qBAAc5B,aAAa,EAAA,2BAAA,CAAA,EAAA,EAAA,CAAAwB,MAAA,CAAgCxB,aAAa,EAAA,YAAA,CAAY;sBAClGqB,KAAA,CAAAC,aAAA,CAAC,MAAA,EAAA;AAAKC,MAAAA,WAAW,aAAA;AAAeM,MAAAA,KAAA,EAAO;QAAEC,UAAA,EAAY/B,KAAA,CAAMc;AAAM;AAAA,KAAG,CACtE,CAAA;AAEFE,IAAAA,QAAA,EAAUJ,YAAA;IACVD,SAASA,OAAA,IAAWqB;AAAA,GAAA,CACtB,CACF,CAAA;AAEJ,CAAA;AAEA,mBAAA,aAAeV,KAAA,CAAMW,KAAKlC,kBAAkB,CAAA;;;;"}
+{"version":3,"file":"trigger.js","sources":["../../../../components/color-picker/components/trigger.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport classNames from \"classnames\";\nimport { Color, getColorObject } from \"../utils/color-picker/color\";\nimport { initColorFormat } from \"../utils/color-picker/format\";\nimport { Input } from \"../../input\";\nimport { TdColorPickerProps } from \"../type\";\nimport useClassName from \"../hooks/useClassNames\";\nimport { TdColorContext } from \"../type\";\nimport noop from \"../../utils/noop\";\nimport type { ColorFormat } from \"../utils/color-picker/types\";\n\nexport interface ColorTriggerProps\n  extends Pick<\n    TdColorPickerProps,\n    \"disabled\" | \"inputProps\" | \"borderless\" | \"clearable\" | \"onClear\" | \"format\" | \"enableAlpha\"\n  > {\n  value?: string;\n  onChange?: (v?: string, context?: TdColorContext) => void;\n}\n\nconst ColorPickerTrigger = (props: ColorTriggerProps) => {\n  const baseClassName = useClassName();\n  const {\n    disabled = false,\n    borderless = false,\n    inputProps = { autoWidth: true },\n    clearable,\n    onClear,\n    format = \"RGB\",\n    enableAlpha = false\n  } = props;\n\n  // 内部输入状态，用于处理用户输入\n  const [inputValue, setInputValue] = useState<string>(props.value || \"\");\n\n  // 同步外部 value 变化\n  useEffect(() => {\n    setInputValue(props.value || \"\");\n  }, [props.value]);\n\n  // 处理输入变化（实时更新内部状态）\n  const handleInputChange = useCallback((input: string) => {\n    setInputValue(input);\n  }, []);\n\n  // 处理失焦事件 - 验证并格式化颜色值\n  const handleBlur = useCallback(() => {\n    if (!inputValue) {\n      return;\n    }\n\n    // 验证颜色是否有效\n    if (Color.isValid(inputValue)) {\n      const colorInstance = new Color(inputValue);\n      const finalFormat = initColorFormat(format as ColorFormat, enableAlpha);\n      const formattedValue = colorInstance.getFormattedColor(finalFormat, enableAlpha);\n\n      // 如果格式化后的值与当前值不同，触发 onChange\n      if (formattedValue !== props.value) {\n        props.onChange?.(formattedValue, {\n          color: getColorObject(colorInstance),\n          trigger: \"input\"\n        });\n      }\n      // 更新显示值为格式化后的值\n      setInputValue(formattedValue);\n    } else {\n      // 如果颜色无效，恢复为之前的有效值\n      setInputValue(props.value || \"\");\n    }\n  }, [inputValue, props.value, props.onChange, format, enableAlpha]);\n\n  // 处理回车确认\n  const handleEnter = useCallback(() => {\n    handleBlur();\n  }, [handleBlur]);\n\n  return (\n    <div className={`${baseClassName}__trigger--default`}>\n      <Input\n        borderless={borderless}\n        clearable={clearable}\n        {...inputProps}\n        value={inputValue}\n        disabled={disabled}\n        label={\n          <div className={classNames(`${baseClassName}__trigger--default__color`, `${baseClassName}--bg-alpha`)}>\n            <span className={\"color-inner\"} style={{ background: props.value }}></span>\n          </div>\n        }\n        onChange={handleInputChange}\n        onBlur={handleBlur}\n        onEnter={handleEnter}\n        onClear={onClear || noop}\n      />\n    </div>\n  );\n};\n\nexport default React.memo(ColorPickerTrigger);\n"],"names":["ColorPickerTrigger","props","baseClassName","useClassName","_props$disabled","disabled","_props$borderless","borderless","_props$inputProps","inputProps","autoWidth","clearable","onClear","_props$format","format","_props$enableAlpha","enableAlpha","_useState","useState","value","_useState2","_slicedToArray","inputValue","setInputValue","useEffect","handleInputChange","useCallback","input","handleBlur","Color","isValid","colorInstance","finalFormat","initColorFormat","formattedValue","getFormattedColor","_props$onChange","onChange","call","color","getColorObject","trigger","handleEnter","React","createElement","className","concat","Input","_objectSpread","label","classNames","style","background","onBlur","onEnter","noop","memo"],"mappings":"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"}

package/es/color-picker/index.js

@@ -4,25 +4,27 @@ import './style/css.js';
 import '../_chunks/dep-Cwish4GD.js';
 import '../_chunks/dep-D-UKOauR.js';
 import 'react';
-import '../_chunks/dep-DURB9x8g.js';
+import '../_chunks/dep-Dnwq3YvL.js';
 import '../_chunks/dep-CgyDw_YI.js';
 import '../_chunks/dep-CzLhKWCf.js';
 import 'classnames';
 import './utils/color-picker/index.js';
-import '../_chunks/dep-DJmE940f.js';
+import '../_chunks/dep-CHpQ3xhh.js';
 import '../_chunks/dep-Chz4ZJCb.js';
 import '../_chunks/dep-zOZQ0R9g.js';
 import 'lodash-es';
-import '../_chunks/dep-DTlQ2dCA.js';
-import '../_chunks/dep-gy8uvBaS.js';
-import '../_chunks/dep-5U9UjDaf.js';
+import '../_chunks/dep-BK4_iOSv.js';
+import '../_chunks/dep--qagmRQa.js';
+import '../_chunks/dep-u1x3x6MJ.js';
+import '../config-provider/ConfigContext.js';
+import '../_chunks/dep--nQ-cjme.js';
 import 'dayjs';
-import '../_chunks/dep-DwWrhxkd.js';
+import '../_chunks/dep-grkSd2UB.js';
 import '../_chunks/dep-DGvfel3I.js';
-import '../_chunks/dep-CD_4-1Xb.js';
+import '../_chunks/dep-UHQn9biR.js';
 import '../config-provider/index.js';
 import '../config-provider/ConfigProvider.js';
-import '../_chunks/dep-oUgTcXgm.js';
+import '../_chunks/dep-Blkje0_M.js';
 import './components/panel/alpha.js';
 import '../_chunks/dep-DN7d1SzH.js';
 import './components/panel/slider.js';
@@ -31,29 +33,70 @@ import './components/panel/hue.js';
 import './components/panel/saturation.js';
 import './components/panel/swatches.js';
 import '@tendaui/icons';
-import '../_chunks/dep-ByzdZjUR.js';
+import '../_chunks/dep-bWaVq_y3.js';
+import './components/panel/format/index.js';
+import '../select/index.js';
+import '../select/Select.js';
+import '../_chunks/dep-DHWwZ2Nj.js';
+import '../_chunks/dep-BP0-apUT.js';
+import 'hoist-non-react-statics';
+import '../_chunks/dep-Cd1UOXnJ.js';
+import '../_chunks/dep-2HsCYcmp.js';
+import '../select/Option.js';
+import '../_chunks/dep-PPA-yoAy.js';
+import '../_chunks/dep-Dlppf0JU.js';
+import '../_chunks/dep-U1T8CQY9.js';
+import '../common/FakeArrow.js';
+import '../loading/index.js';
+import '../loading/Loading.js';
+import '../_chunks/dep-DRwijJcv.js';
+import '../common/Portal.js';
+import 'react-dom';
+import '../_chunks/dep-BRbJGDI9.js';
+import '../loading/Gradient.js';
+import '../_chunks/dep-DbVHGoUC.js';
+import '../loading/style/css.js';
+import '../select-input/index.js';
+import '../select-input/SelectInput.js';
+import '../select-input/hook/useSingle.js';
+import '../input/index.js';
+import '../input/Input.js';
+import '../_chunks/dep-spxR0DG0.js';
+import '../input/InputGroup.js';
+import '../input/style/css.js';
+import '../select-input/hook/useMultiple.js';
+import '../tag-input/index.js';
+import '../tag-input/TagInput.js';
+import '../tag-input/hooks/useTagList.js';
+import '../tag/index.js';
+import '../tag/Tag.js';
+import '../tag/style/css.js';
+import '../hooks/useDragSorter.js';
+import '../tag-input/style/css.js';
 import '../popup/index.js';
 import '../popup/Popup.js';
 import '../portal/Portal.js';
-import 'react-dom';
-import '../_chunks/dep-DRwijJcv.js';
-import '../_chunks/dep-BRbJGDI9.js';
-import '../_chunks/dep-CkmtEv0Y.js';
+import '../_chunks/dep-B2D1svZy.js';
 import 'react-is';
 import '../_chunks/dep-C1XcmShP.js';
 import '../_chunks/dep-Ccktr_jk.js';
 import '@popperjs/core';
 import 'react-fast-compare';
 import 'react-transition-group';
-import '../_chunks/dep-DbVHGoUC.js';
 import '../popup/style/css.js';
+import '../select-input/style/css.js';
+import '../_chunks/dep-BbOvNxhg.js';
+import '../select/style/css.js';
+import './components/panel/format/inputs.js';
+import '../input-number/index.js';
+import '../input-number/InputNumber.js';
+import '../button/index.js';
+import '../button/Button.js';
+import '../button/style/css.js';
+import '../input-number/useInputNumber.js';
+import '../utils/log/index.js';
+import '../input-number/style/css.js';
 import './components/trigger.js';
-import '../input/index.js';
-import '../input/Input.js';
-import '../_chunks/dep-D6YxJv-F.js';
-import '../input/InputGroup.js';
-import '../input/style/css.js';
-import '../_chunks/dep-U1T8CQY9.js';
 
 var ColorPickerPanel = _ColorPickPanel;
 var ColorPicker = _ColorPicker;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../components/color-picker/index.ts"],"sourcesContent":["import _ColorPickPanel from \"./ColorPickPanel\";\nimport _ColorPicker from \"./ColorPicker\";\n\nimport \"./style\";\n\nexport type { ColorPickerProps } from \"./type\";\nexport * from \"./type\";\n\nexport const ColorPickerPanel = _ColorPickPanel;\nexport const ColorPicker = _ColorPicker;\n\nexport default ColorPicker;\n"],"names":["ColorPickerPanel","_ColorPickPanel","ColorPicker","_ColorPicker"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,IAAMA,gBAAA,GAAmBC;AACzB,IAAMC,WAAA,GAAcC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../components/color-picker/index.ts"],"sourcesContent":["import _ColorPickPanel from \"./ColorPickPanel\";\nimport _ColorPicker from \"./ColorPicker\";\n\nimport \"./style\";\n\nexport type { ColorPickerProps } from \"./type\";\nexport * from \"./type\";\n\nexport const ColorPickerPanel = _ColorPickPanel;\nexport const ColorPicker = _ColorPicker;\n\nexport default ColorPicker;\n"],"names":["ColorPickerPanel","_ColorPickPanel","ColorPicker","_ColorPicker"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,IAAMA,gBAAA,GAAmBC;AACzB,IAAMC,WAAA,GAAcC;;;;"}