one-design-next 0.0.4-alpha.57

package/dist/color-picker/index.js

@@ -0,0 +1,588 @@
+'use client';
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useRef, useState } from 'react';
+import { DEFAULT_COLOR, expandHexColor, extractHexFromDisplay, getColorDisplayValue, hexToHsb, hsbToHex, hsbToRgb, isValidHexColor, normalizeHexColor } from "../_util/color";
+import Button from "../button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapse";
+import Icon from "../icon";
+import Input from "../input";
+import Popover from "../popover";
+import Slider from "../slider";
+import "./style";
+var ColorPicker = function ColorPicker(props) {
+  var valueProp = props.value,
+    onChange = props.onChange,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? DEFAULT_COLOR : _props$defaultValue,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
+    palettes = props.palettes;
+
+  // 初始化颜色值的辅助函数
+  var initializeColorValue = function initializeColorValue(value) {
+    if (value === null) return '';
+    var initialValue = normalizeHexColor(value !== null && value !== void 0 ? value : defaultValue);
+    return expandHexColor(initialValue);
+  };
+
+  // 内部状态：当前有效的颜色值（始终是6位，或null）
+  var _useState = useState(function () {
+      if (valueProp === null) return null;
+      return initializeColorValue(valueProp);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+
+  // 输入框显示的值
+  var _useState3 = useState(function () {
+      return initializeColorValue(valueProp);
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+
+  // 用于保存最后一个有效值，在 blur 时回退使用
+  var lastValidValueRef = useRef(initializeColorValue(valueProp));
+
+  // 调色板面板的引用和拖拽状态
+  var paletteRef = useRef(null);
+  var indicatorRef = useRef(null);
+  var isDraggingRef = useRef(false);
+
+  // 获取初始 HSB 值
+  var getInitialHsb = function getInitialHsb() {
+    var h = 0;
+    var s = 100;
+    var b = 100;
+    var initialColor = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue;
+    if (initialColor && initialColor !== null) {
+      var normalizedColor = normalizeHexColor(initialColor);
+      var expandedColor = expandHexColor(normalizedColor);
+      var hsb = hexToHsb(expandedColor);
+      if (hsb) {
+        h = hsb.h;
+        s = hsb.s;
+        b = hsb.b;
+      }
+    }
+    return {
+      h: h,
+      s: s,
+      b: b
+    };
+  };
+
+  // HSB 状态 - 这是主状态
+  var initialHsb = getInitialHsb();
+  var _useState5 = useState(initialHsb.h),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hue = _useState6[0],
+    setHue = _useState6[1];
+  var _useState7 = useState(initialHsb.s),
+    _useState8 = _slicedToArray(_useState7, 2),
+    saturation = _useState8[0],
+    setSaturation = _useState8[1];
+  var _useState9 = useState(initialHsb.b),
+    _useState10 = _slicedToArray(_useState9, 2),
+    brightness = _useState10[0],
+    setBrightness = _useState10[1];
+
+  // 获取当前显示的颜色值
+  var getCurrentColor = function getCurrentColor() {
+    return internalValue;
+  };
+
+  // 同步外部 valueProp 变化 - 类似原文件的 getDerivedStateFromProps 逻辑
+  if (valueProp !== undefined && valueProp !== null) {
+    // 处理带井号的外部值
+    var cleanValue = valueProp.startsWith('#') ? valueProp.slice(1) : valueProp;
+    if (isValidHexColor(normalizeHexColor(cleanValue))) {
+      var normalizedValue = normalizeHexColor(cleanValue);
+      var expandedValue = expandHexColor(normalizedValue);
+      if (expandedValue.toUpperCase() !== (internalValue === null || internalValue === void 0 ? void 0 : internalValue.toUpperCase())) {
+        // 外部传入了新的有效颜色值，更新所有状态
+        var hsb = hexToHsb(expandedValue);
+        if (hsb) {
+          setHue(hsb.h);
+          setSaturation(hsb.s);
+          setBrightness(hsb.b);
+        }
+        setInternalValue(expandedValue);
+        setInputValue(expandedValue);
+        lastValidValueRef.current = expandedValue;
+      }
+    }
+  } else if (valueProp === null && internalValue !== null) {
+    // 外部传入 null，清空状态
+    setInternalValue(null);
+    setInputValue('');
+    lastValidValueRef.current = '';
+  }
+
+  // 处理输入变化
+  var handleInputChange = function handleInputChange(e) {
+    if (disabled) return;
+    var rawValue = e.target.value;
+
+    // 检查是否为空值清空
+    if (rawValue.trim() === '') {
+      setInputValue('');
+      if (allowClear) {
+        setInternalValue(null);
+        lastValidValueRef.current = ''; // 更新最后有效值为空字符串
+        // 如果是非受控组件或者值确实发生了变化，才调用 onChange
+        if (valueProp === undefined || null !== valueProp) {
+          onChange === null || onChange === void 0 || onChange(null);
+        }
+      }
+      return;
+    }
+
+    // 移除 # 前缀（如果用户输入了）
+    var cleanValue = extractHexFromDisplay(rawValue.startsWith('#') ? rawValue : "#".concat(rawValue));
+
+    // 转换为大写并更新输入框显示
+    var upperValue = normalizeHexColor(cleanValue);
+    setInputValue(upperValue);
+
+    // 检查是否为合法颜色（支持3位和6位）
+    if (isValidHexColor(upperValue) && (upperValue.length === 3 || upperValue.length === 6)) {
+      // 合法颜色，扩展为6位后传出
+      var _expandedValue = expandHexColor(upperValue);
+      setInternalValue(_expandedValue);
+      lastValidValueRef.current = _expandedValue; // 保存扩展后的6位值用于回退
+
+      // 更新 HSB 状态
+      var _hsb = hexToHsb(_expandedValue);
+      if (_hsb) {
+        if (_hsb.s > 0) {
+          setHue(_hsb.h);
+        }
+        setSaturation(_hsb.s);
+        setBrightness(_hsb.b);
+      }
+
+      // 如果是非受控组件或者值确实发生了变化，才调用 onChange
+      var colorWithHash = getColorDisplayValue(_expandedValue);
+      if (valueProp === undefined || colorWithHash !== valueProp) {
+        onChange === null || onChange === void 0 || onChange(colorWithHash);
+      }
+    }
+    // 如果不合法，只更新输入框显示，不触发 onChange
+  };
+
+  // 处理聚焦事件
+  var handleInputFocus = function handleInputFocus(e) {
+    if (disabled) return;
+
+    // 聚焦时全选文本
+    e.target.select();
+  };
+
+  // 处理失焦事件
+  var handleInputBlur = function handleInputBlur() {
+    if (disabled) return;
+
+    // 如果输入为空
+    if (inputValue.trim() === '') {
+      if (allowClear) {
+        // 允许清空，保持空值状态
+        return;
+      } else {
+        // 不允许清空，回退到最后有效值
+        setInputValue(lastValidValueRef.current);
+        return;
+      }
+    }
+
+    // 如果是有效的3位hex，扩展为6位显示
+    if (isValidHexColor(inputValue) && inputValue.length === 3) {
+      var _expandedValue2 = expandHexColor(inputValue);
+      setInputValue(_expandedValue2);
+      // 注意：这里不需要更新 lastValidValueRef，因为在 onChange 时已经更新了
+    } else if (!isValidHexColor(inputValue) || inputValue.length !== 3 && inputValue.length !== 6) {
+      // 如果不合法，回退到最后一个有效值（可能是空字符串）
+      setInputValue(lastValidValueRef.current);
+
+      // 如果回退到空值，需要同步内部状态
+      if (lastValidValueRef.current === '' && allowClear) {
+        setInternalValue(null);
+      }
+    }
+  };
+
+  // HSB 滑块变化处理 - 参考原文件的 handleCustomChange 逻辑
+  var handleHsbChange = function handleHsbChange(type, value) {
+    if (disabled) return;
+    var newHexColor;
+    if (type === 'h') {
+      newHexColor = hsbToHex(value, saturation, brightness);
+      setHue(value);
+    } else if (type === 's') {
+      newHexColor = hsbToHex(hue, value, brightness);
+      setSaturation(value);
+    } else {
+      newHexColor = hsbToHex(hue, saturation, value);
+      setBrightness(value);
+    }
+
+    // 更新内部状态
+    setInternalValue(newHexColor);
+    setInputValue(newHexColor);
+    lastValidValueRef.current = newHexColor;
+
+    // 触发 onChange 回调（带井号）
+    var colorWithHash = getColorDisplayValue(newHexColor);
+    if (valueProp === undefined || colorWithHash !== valueProp) {
+      onChange === null || onChange === void 0 || onChange(colorWithHash);
+    }
+  };
+
+  // H 滑块变化处理
+  var handleHueChange = function handleHueChange(value) {
+    if (typeof value === 'number') {
+      handleHsbChange('h', value);
+    }
+  };
+
+  // S 滑块变化处理
+  var handleSaturationChange = function handleSaturationChange(value) {
+    if (typeof value === 'number') {
+      handleHsbChange('s', value);
+    }
+  };
+
+  // B 滑块变化处理
+  var handleBrightnessChange = function handleBrightnessChange(value) {
+    if (typeof value === 'number') {
+      handleHsbChange('b', value);
+    }
+  };
+
+  // 调色板拖拽处理 - 参考原文件的逻辑
+  var handlePaletteMouseMove = function handlePaletteMouseMove(e) {
+    if (!paletteRef.current || !isDraggingRef.current) return;
+    var rect = paletteRef.current.getBoundingClientRect();
+    var left = rect.left,
+      top = rect.top,
+      width = rect.width,
+      height = rect.height;
+
+    // 计算相对位置 (0-1)
+    var newS = (e.clientX - left) / width;
+    var newB = (e.clientY - top) / height;
+
+    // 边界限制
+    newS = Math.max(0, Math.min(1, newS));
+    newB = Math.max(0, Math.min(1, newB));
+
+    // 转换为百分比，B 需要反转（顶部是100%，底部是0%）
+    var saturationValue = newS * 100;
+    var brightnessValue = (1 - newB) * 100;
+
+    // 一次性更新 S 和 B 值
+    setSaturation(saturationValue);
+    setBrightness(brightnessValue);
+
+    // 计算新的颜色值
+    var newHexColor = hsbToHex(hue, saturationValue, brightnessValue);
+    setInternalValue(newHexColor);
+    setInputValue(newHexColor);
+    lastValidValueRef.current = newHexColor;
+
+    // 触发 onChange 回调（带井号）
+    var colorWithHash = getColorDisplayValue(newHexColor);
+    if (valueProp === undefined || colorWithHash !== valueProp) {
+      onChange === null || onChange === void 0 || onChange(colorWithHash);
+    }
+  };
+  var handlePaletteMouseUp = function handlePaletteMouseUp() {
+    isDraggingRef.current = false;
+    window.removeEventListener('mousemove', handlePaletteMouseMove);
+    window.removeEventListener('mouseup', handlePaletteMouseUp);
+  };
+  var handlePaletteMouseDown = function handlePaletteMouseDown(e) {
+    if (disabled) return;
+    e.preventDefault();
+    isDraggingRef.current = true;
+    var rect = e.currentTarget.getBoundingClientRect();
+    var left = rect.left,
+      top = rect.top,
+      width = rect.width,
+      height = rect.height;
+
+    // 计算初始位置
+    var newS = (e.clientX - left) / width;
+    var newB = (e.clientY - top) / height;
+
+    // 边界限制
+    newS = Math.max(0, Math.min(1, newS));
+    newB = Math.max(0, Math.min(1, newB));
+
+    // 转换为百分比
+    var saturationValue = newS * 100;
+    var brightnessValue = (1 - newB) * 100;
+
+    // 一次性更新 S 和 B 值
+    setSaturation(saturationValue);
+    setBrightness(brightnessValue);
+
+    // 计算新的颜色值
+    var newHexColor = hsbToHex(hue, saturationValue, brightnessValue);
+    setInternalValue(newHexColor);
+    setInputValue(newHexColor);
+    lastValidValueRef.current = newHexColor;
+
+    // 触发 onChange 回调（带井号）
+    var colorWithHash = getColorDisplayValue(newHexColor);
+    if (valueProp === undefined || colorWithHash !== valueProp) {
+      onChange === null || onChange === void 0 || onChange(colorWithHash);
+    }
+
+    // 添加全局监听
+    window.addEventListener('mousemove', handlePaletteMouseMove);
+    window.addEventListener('mouseup', handlePaletteMouseUp);
+  };
+
+  // 计算指示器位置
+  var getIndicatorPosition = function getIndicatorPosition() {
+    var _paletteRef$current, _paletteRef$current2, _indicatorRef$current, _indicatorRef$current2;
+    // 动态获取调色板实际尺寸
+    var paletteWidth = ((_paletteRef$current = paletteRef.current) === null || _paletteRef$current === void 0 ? void 0 : _paletteRef$current.offsetWidth) || 160;
+    var paletteHeight = ((_paletteRef$current2 = paletteRef.current) === null || _paletteRef$current2 === void 0 ? void 0 : _paletteRef$current2.offsetHeight) || 90;
+
+    // 动态获取指示器实际尺寸用于居中
+    var indicatorWidth = ((_indicatorRef$current = indicatorRef.current) === null || _indicatorRef$current === void 0 ? void 0 : _indicatorRef$current.offsetWidth) || 14;
+    var indicatorHeight = ((_indicatorRef$current2 = indicatorRef.current) === null || _indicatorRef$current2 === void 0 ? void 0 : _indicatorRef$current2.offsetHeight) || 14;
+    var halfIndicatorWidth = indicatorWidth / 2;
+    var halfIndicatorHeight = indicatorHeight / 2;
+
+    // S: 0% 在左边(0px)，100% 在右边(paletteWidth)
+    // B: 100% 在顶部(0px)，0% 在底部(paletteHeight)
+    var leftPx = saturation / 100 * paletteWidth;
+    var topPx = (100 - brightness) / 100 * paletteHeight;
+    return "translate3d(".concat(leftPx - halfIndicatorWidth, "px, ").concat(topPx - halfIndicatorHeight, "px, 0)");
+  };
+
+  // 计算当前颜色的显示值（用于 background-color）
+  var currentColorDisplay = getCurrentColor() ? getColorDisplayValue(getCurrentColor()) : 'transparent';
+
+  // 计算 S 滑块的背景色（只基于当前 H，S=100%, B=100%）
+  var saturationSliderColor = function () {
+    var rgb = hsbToRgb(hue, 100, 100);
+    return "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")");
+  }();
+
+  // 计算 B 滑块的背景色（只基于当前 H，S=100%, B=100%）
+  var brightnessSliderColor = function () {
+    var rgb = hsbToRgb(hue, 100, 100);
+    return "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")");
+  }();
+
+  // H 滑块的色相环背景
+  var hueSliderBackground = 'linear-gradient(90deg, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)';
+
+  // 自定义颜色选择器内容
+  var customColorContent = /*#__PURE__*/React.createElement("div", {
+    "data-odn-cp-popup": true
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: paletteRef,
+    "data-odn-cp-popup-panel": true,
+    style: {
+      backgroundColor: "hsl(".concat(hue, ", 100%, 50%)")
+    },
+    onMouseDown: handlePaletteMouseDown
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-cp-popup-panel-s": true
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-odn-cp-popup-panel-b": true
+  }), /*#__PURE__*/React.createElement("i", {
+    ref: indicatorRef,
+    "data-odn-cp-popup-panel-indicator": true,
+    style: {
+      transform: getIndicatorPosition(),
+      backgroundColor: currentColorDisplay
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-cp-popup-slider-wrapper": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-cp-popup-slider-wrapper-label": true
+  }, "H"), /*#__PURE__*/React.createElement(Slider, {
+    "data-odn-cp-popup-slider": true,
+    "data-odn-cp-popup-slider-h": true,
+    tooltipVisible: false,
+    value: hue,
+    min: 0,
+    max: 359,
+    onChange: handleHueChange,
+    style: {
+      '--odn-slider-rail-background': hueSliderBackground
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-cp-popup-slider-wrapper": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-cp-popup-slider-wrapper-label": true
+  }, "S"), /*#__PURE__*/React.createElement(Slider, {
+    "data-odn-cp-popup-slider": true,
+    "data-odn-cp-popup-slider-s": true,
+    tooltipVisible: false,
+    value: saturation,
+    min: 0,
+    max: 100,
+    onChange: handleSaturationChange,
+    style: {
+      '--odn-slider-rail-background': "linear-gradient(90deg, rgb(255, 255, 255) 0%, transparent 100%), ".concat(saturationSliderColor)
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-cp-popup-slider-wrapper": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-cp-popup-slider-wrapper-label": true
+  }, "B"), /*#__PURE__*/React.createElement(Slider, {
+    "data-odn-cp-popup-slider": true,
+    "data-odn-cp-popup-slider-b": true,
+    tooltipVisible: false,
+    value: brightness,
+    min: 0,
+    max: 100,
+    onChange: handleBrightnessChange,
+    style: {
+      '--odn-slider-rail-background': "linear-gradient(90deg, rgb(0, 0, 0) 0%, transparent 100%), ".concat(brightnessSliderColor)
+    }
+  })));
+
+  // 调色板颜色点击处理
+  var handlePaletteColorClick = function handlePaletteColorClick(color) {
+    var cleanColor = color.startsWith('#') ? color.slice(1) : color;
+    if (isValidHexColor(normalizeHexColor(cleanColor))) {
+      var normalizedColor = normalizeHexColor(cleanColor);
+      var expandedColor = expandHexColor(normalizedColor);
+      var _hsb2 = hexToHsb(expandedColor);
+      if (_hsb2) {
+        setHue(_hsb2.h);
+        setSaturation(_hsb2.s);
+        setBrightness(_hsb2.b);
+      }
+      setInternalValue(expandedColor);
+      setInputValue(expandedColor);
+      lastValidValueRef.current = expandedColor;
+      var colorWithHash = getColorDisplayValue(expandedColor);
+      if (valueProp === undefined || colorWithHash !== valueProp) {
+        onChange === null || onChange === void 0 || onChange(colorWithHash);
+      }
+    }
+  };
+
+  // Accordion 状态管理
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    openPanelIndex = _useState12[0],
+    setOpenPanelIndex = _useState12[1]; // 默认打开第一个调色板
+
+  var handlePanelToggle = function handlePanelToggle(index) {
+    setOpenPanelIndex(openPanelIndex === index ? -1 : index);
+  };
+  var defaultPopup = palettes ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-cp-popup-with-palettes": true
+  }, palettes.map(function (palette, index) {
+    return /*#__PURE__*/React.createElement(Collapsible, {
+      key: index,
+      open: openPanelIndex === index,
+      onOpenChange: function onOpenChange() {
+        return handlePanelToggle(index);
+      },
+      "data-odn-cp-popup-collpase-panel": true
+    }, /*#__PURE__*/React.createElement(CollapsibleTrigger, {
+      asChild: true
+    }, function (_ref) {
+      var isOpen = _ref.isOpen;
+      return /*#__PURE__*/React.createElement("div", {
+        "data-odn-cp-popup-collpase-panel-header": true
+      }, /*#__PURE__*/React.createElement("span", null, palette.title), /*#__PURE__*/React.createElement(Icon, {
+        name: "down",
+        "data-odn-cp-popup-collpase-panel-header-icon": true,
+        "data-odn-cp-popup-collpase-panel-header-icon-open": isOpen
+      }));
+    }), /*#__PURE__*/React.createElement(CollapsibleContent, {
+      transition: {
+        duration: 0
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-cp-popup-collpase-panel-content": true
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-cp-popup-collpase-panel-content-grid": true
+    }, palette.colors.map(function (color, colorIndex) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: colorIndex,
+        "data-odn-cp-popup-collpase-panel-content-grid-item": true,
+        style: {
+          backgroundColor: color
+        },
+        onClick: function onClick() {
+          return handlePaletteColorClick(color);
+        },
+        title: color
+      });
+    })))));
+  }), /*#__PURE__*/React.createElement(Collapsible, {
+    open: openPanelIndex === palettes.length,
+    onOpenChange: function onOpenChange() {
+      return handlePanelToggle(palettes.length);
+    }
+  }, /*#__PURE__*/React.createElement(CollapsibleTrigger, {
+    asChild: true
+  }, function (_ref2) {
+    var isOpen = _ref2.isOpen;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-odn-cp-popup-collpase-panel-header": true
+    }, /*#__PURE__*/React.createElement("span", null, "\u81EA\u5B9A\u4E49"), /*#__PURE__*/React.createElement(Icon, {
+      name: "down",
+      "data-odn-cp-popup-collpase-panel-header-icon": true,
+      "data-odn-cp-popup-collpase-panel-header-icon-open": isOpen
+    }));
+  }), /*#__PURE__*/React.createElement(CollapsibleContent, {
+    transition: {
+      duration: 0
+    }
+  }, customColorContent))) : customColorContent;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-cp": true
+  }, /*#__PURE__*/React.createElement(Popover, {
+    trigger: "click",
+    placement: "bottomLeft",
+    popupStyle: {
+      padding: 0
+    },
+    popup: defaultPopup
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-odn-cp-button": true,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-cp-button-inner": true,
+    style: {
+      backgroundColor: currentColorDisplay
+    }
+  }))), /*#__PURE__*/React.createElement(Input, {
+    "data-odn-cp-input": true,
+    value: inputValue,
+    placeholder: placeholder,
+    disabled: disabled,
+    onChange: handleInputChange,
+    onFocus: handleInputFocus,
+    onBlur: handleInputBlur,
+    leftElement: /*#__PURE__*/React.createElement("div", {
+      "data-odn-cp-input-left": true
+    }, "#")
+  }));
+};
+export default ColorPicker;