@mekari/pixel3-color-picker 0.0.1-dev.0

package/dist/index.js

@@ -0,0 +1,1008 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MpColorPicker: () => MpColorPicker
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/color-picker.tsx
+var import_vue10 = require("vue");
+var import_vue11 = require("vue");
+var import_pixel3_text2 = require("@mekari/pixel3-text");
+var import_pixel3_popover = require("@mekari/pixel3-popover");
+var import_pixel3_input2 = require("@mekari/pixel3-input");
+var import_pixel3_icon2 = require("@mekari/pixel3-icon");
+var import_pixel3_divider = require("@mekari/pixel3-divider");
+var import_css6 = require("@mekari/pixel3-styled-system/css");
+
+// src/modules/color-picker.props.ts
+var PRESET_DEFAULT = ["#3B82F6", "#14B8A6", "#8B5CF6", "#F59E0B", "#EF4444", "#71717A", "#84CC16", "#EC4899", "#232933", "#60A5FA", "#2DD4BF", "#A78BFA", "#FBBF24", "#F87171", "#A1A1AA", "#A3E635", "#F472B6", "#FFFFFF"];
+var colorPickerProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  title: {
+    type: String,
+    default: "Pick a color"
+  },
+  value: {
+    type: String,
+    default: "#3B82F6"
+  },
+  placeholder: {
+    type: String,
+    default: "3B82F6"
+  },
+  variant: {
+    type: String,
+    default: "advance"
+  },
+  placement: {
+    type: String,
+    default: "bottom"
+  },
+  preset: {
+    type: Array,
+    default() {
+      return PRESET_DEFAULT;
+    }
+  },
+  isShowPopover: {
+    type: Boolean,
+    default: false
+  },
+  isShowSaturation: {
+    type: Boolean,
+    default: true
+  },
+  isShowHue: {
+    type: Boolean,
+    default: true
+  },
+  isShowInput: {
+    type: Boolean,
+    default: true
+  },
+  isShowPreset: {
+    type: Boolean,
+    default: true
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  }
+};
+
+// src/modules/color-picker.hooks.ts
+var import_vue = require("vue");
+var import_tinycolor2 = __toESM(require("tinycolor2"));
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_tokens = require("@mekari/pixel3-styled-system/tokens");
+function useColorPicker(props, emit) {
+  const {
+    id,
+    value,
+    placeholder,
+    variant,
+    placement,
+    isShowPopover,
+    isInvalid
+  } = (0, import_vue.toRefs)(props);
+  const val = (0, import_vue.ref)(_colorChange(value.value));
+  const colorInput = (0, import_vue.ref)("");
+  const isPopoverOpen = (0, import_vue.ref)(false);
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "color-picker").value;
+  const colors = (0, import_vue.computed)({
+    get() {
+      return val.value;
+    },
+    set(newVal) {
+      val.value = newVal;
+      emit("change", newVal);
+    }
+  });
+  const hex = (0, import_vue.computed)(() => {
+    const hex2 = colors.value.hex;
+    return hex2.replace("#", "");
+  });
+  const borderColor = (0, import_vue.computed)(() => {
+    if (isInvalid.value) {
+      return "red.400";
+    }
+    if (!isInvalid.value && isFocused.value) {
+      return "blue.400";
+    }
+    return "gray.100";
+  });
+  const isFocused = (0, import_vue.computed)(() => {
+    return isPopoverOpen.value;
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpColorPicker",
+      id: getId,
+      class: (0, import_recipes.colorPickerSlotRecipe)().root,
+      style: {
+        width: variant.value === "advance" ? "280px" : "72px"
+      }
+    };
+  });
+  const popoverAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `popover-${getId}`,
+      placement: placement.value,
+      defaultIsOpen: isShowPopover.value,
+      initialFocusRef: `#input-${getId}`,
+      onOpen: handleOpenPopover,
+      onClose: handleClosePopover
+    };
+  });
+  const popoverTriggerAttrs = (0, import_vue.computed)(() => {
+    return {
+      tabindex: "0",
+      class: (0, import_css.cx)((0, import_css.css)({
+        boxShadow: isPopoverOpen.value && !isInvalid.value ? "outline" : "none",
+        _hover: {
+          borderColor: isPopoverOpen.value && !isInvalid.value ? "blue.500 !important" : "gray.400 !important"
+        }
+      }), (0, import_recipes.colorPickerSlotRecipe)().popoverTrigger),
+      style: {
+        borderColor: (0, import_tokens.token)(`colors.${borderColor.value}`)
+      }
+    };
+  });
+  const boxColorAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().boxColor,
+      style: {
+        background: colors.value.hex
+      }
+    };
+  });
+  const inputTriggerAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `input-${getId}`,
+      type: "text",
+      autocomplete: "off",
+      variant: "unstyled",
+      maxlength: "6",
+      value: colorInput.value,
+      placeholder: placeholder.value,
+      class: (0, import_recipes.colorPickerSlotRecipe)().inputTrigger,
+      onInput: handleInputTrigger
+    };
+  });
+  const iconDropDownAttrs = (0, import_vue.computed)(() => {
+    return {
+      name: "chevrons-down",
+      size: "sm",
+      class: (0, import_recipes.colorPickerSlotRecipe)().iconDropdown
+    };
+  });
+  const popoverContentAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().popoverContent,
+      style: {
+        width: variant.value === "advance" ? "280px" : "188px"
+      }
+    };
+  });
+  const wrapperAdvanceAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperAdvance
+    };
+  });
+  const wrapperBasicAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperBasic
+    };
+  });
+  const wrapperSaturationAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperSaturation
+    };
+  });
+  const saturationAttrs = (0, import_vue.computed)(() => {
+    return {
+      value: colors.value,
+      onChange: childChange
+    };
+  });
+  const wrapperHueAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperHue
+    };
+  });
+  const hueAttrs = (0, import_vue.computed)(() => {
+    return {
+      value: colors.value,
+      onChange: childChange
+    };
+  });
+  const wrapperInputAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperInput
+    };
+  });
+  const inputHexAttrs = (0, import_vue.computed)(() => {
+    return {
+      label: "hex",
+      width: "88px",
+      value: hex.value,
+      onChange: inputChange
+    };
+  });
+  const inputFullAttrs = (0, import_vue.computed)(() => {
+    return {
+      label: "hex",
+      width: "full",
+      value: hex.value,
+      onChange: inputChange
+    };
+  });
+  const inputRedAttrs = (0, import_vue.computed)(() => {
+    return {
+      label: "r",
+      width: "48px",
+      value: colors.value.rgba.r,
+      onChange: inputChange
+    };
+  });
+  const inputGreenAttrs = (0, import_vue.computed)(() => {
+    return {
+      label: "g",
+      width: "48px",
+      value: colors.value.rgba.g,
+      onChange: inputChange
+    };
+  });
+  const inputBlueAttrs = (0, import_vue.computed)(() => {
+    return {
+      label: "b",
+      width: "48px",
+      value: colors.value.rgba.b,
+      onChange: inputChange
+    };
+  });
+  const boxPresetAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().boxPreset
+    };
+  });
+  const wrapperPresetAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperPreset
+    };
+  });
+  const wrapperBasicPresetAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperBasicPreset
+    };
+  });
+  const presetBoxAttrs = /* @__PURE__ */ __name((item) => {
+    return {
+      value: item,
+      isActive: item.toLowerCase() === colors.value.hex.toLowerCase(),
+      onClick: childChange
+    };
+  }, "presetBoxAttrs");
+  function isValidHex(hex2) {
+    return (0, import_tinycolor2.default)(hex2).isValid();
+  }
+  __name(isValidHex, "isValidHex");
+  function childChange(data) {
+    colorChange(data);
+  }
+  __name(childChange, "childChange");
+  function colorChange(data, oldHue) {
+    colors.value = _colorChange(data, oldHue);
+  }
+  __name(colorChange, "colorChange");
+  function _colorChange(data, oldHue) {
+    let color;
+    if (data && data.hsl) {
+      color = (0, import_tinycolor2.default)(data.hsl);
+    } else if (data && data.hex && data.hex.length > 0) {
+      color = (0, import_tinycolor2.default)(data.hex);
+    } else if (data && data.hsv) {
+      color = (0, import_tinycolor2.default)(data.hsv);
+    } else if (data && data.rgba) {
+      color = (0, import_tinycolor2.default)(data.rgba);
+    } else if (data && data.rgb) {
+      color = (0, import_tinycolor2.default)(data.rgb);
+    } else {
+      color = (0, import_tinycolor2.default)(data);
+    }
+    const hsl = color.toHsl();
+    const hsv = color.toHsv();
+    if (hsl.s === 0) {
+      hsv.h = hsl.h = data.h || data.hsl && data.hsl.h || oldHue || 0;
+    }
+    return {
+      hsl,
+      hex: color.toHexString().toUpperCase(),
+      hex8: color.toHex8String().toUpperCase(),
+      rgba: color.toRgb(),
+      hsv,
+      oldHue: data.h || oldHue || hsl.h,
+      source: data.source
+    };
+  }
+  __name(_colorChange, "_colorChange");
+  function inputChange(data) {
+    if (!data) {
+      return;
+    }
+    if (data.hex) {
+      isValidHex(data.hex) && colorChange({
+        hex: data.hex,
+        source: "hex"
+      });
+    } else if (data.r || data.g || data.b || data.a) {
+      colorChange({
+        r: data.r || colors.value.rgba.r,
+        g: data.g || colors.value.rgba.g,
+        b: data.b || colors.value.rgba.b,
+        a: data.a || colors.value.rgba.a,
+        source: "rgba"
+      });
+    }
+  }
+  __name(inputChange, "inputChange");
+  function handleInputTrigger(e) {
+    const target = e.target;
+    const value2 = target.value;
+    const data = {
+      hex: "",
+      "#": ""
+    };
+    data["hex"] = value2;
+    if (data.hex === void 0 && data["#"] === void 0) {
+      inputChange(data);
+    } else if (value2.length > 5) {
+      inputChange(data);
+    }
+  }
+  __name(handleInputTrigger, "handleInputTrigger");
+  function handleOpenPopover() {
+    isPopoverOpen.value = true;
+    colorInput.value = hex.value;
+  }
+  __name(handleOpenPopover, "handleOpenPopover");
+  function handleClosePopover() {
+    isPopoverOpen.value = false;
+    colorInput.value = hex.value;
+  }
+  __name(handleClosePopover, "handleClosePopover");
+  (0, import_vue.watch)(() => value.value, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      val.value = _colorChange(newValue);
+      colorInput.value = hex.value;
+    }
+  });
+  (0, import_vue.onMounted)(() => {
+    colorInput.value = hex.value;
+  });
+  return {
+    rootAttrs,
+    popoverAttrs,
+    popoverTriggerAttrs,
+    boxColorAttrs,
+    inputTriggerAttrs,
+    iconDropDownAttrs,
+    popoverContentAttrs,
+    wrapperAdvanceAttrs,
+    wrapperBasicAttrs,
+    wrapperSaturationAttrs,
+    saturationAttrs,
+    wrapperHueAttrs,
+    hueAttrs,
+    wrapperInputAttrs,
+    inputHexAttrs,
+    inputRedAttrs,
+    inputGreenAttrs,
+    inputBlueAttrs,
+    inputFullAttrs,
+    boxPresetAttrs,
+    wrapperPresetAttrs,
+    wrapperBasicPresetAttrs,
+    presetBoxAttrs
+  };
+}
+__name(useColorPicker, "useColorPicker");
+
+// src/saturation.tsx
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_clamp = __toESM(require("clamp"));
+var import_lodash = __toESM(require("lodash.throttle"));
+var import_css2 = require("@mekari/pixel3-styled-system/css");
+var MpColorSaturation = (0, import_vue3.defineComponent)({
+  name: "MpColorSaturation",
+  props: {
+    value: {
+      type: Object
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const containerNode = (0, import_vue3.ref)();
+    const colors = (0, import_vue3.computed)(() => {
+      return props.value;
+    });
+    const bgColor = (0, import_vue3.computed)(() => {
+      var _a;
+      return `hsl(${(_a = colors.value) == null ? void 0 : _a.hsv.h}, 100%, 50%)`;
+    });
+    const pointerTop = (0, import_vue3.computed)(() => {
+      var _a;
+      return -(((_a = colors.value) == null ? void 0 : _a.hsv.v) * 100) + 1 + 100 + "%";
+    });
+    const pointerLeft = (0, import_vue3.computed)(() => {
+      var _a;
+      return ((_a = colors.value) == null ? void 0 : _a.hsv.s) * 100 + "%";
+    });
+    const handleThrottle = (0, import_lodash.default)((fn, data) => {
+      fn(data);
+    }, 20, {
+      leading: true,
+      trailing: false
+    });
+    function handleChange(e, skip) {
+      var _a, _b;
+      !skip && e.preventDefault();
+      const container = containerNode.value;
+      if (!container) {
+        return;
+      }
+      const containerWidth = container.clientWidth;
+      const containerHeight = container.clientHeight;
+      const xOffset = container.getBoundingClientRect().left + window.scrollX;
+      const yOffset = container.getBoundingClientRect().top + window.scrollY;
+      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
+      const pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0);
+      const left = (0, import_clamp.default)(pageX - xOffset, 0, containerWidth);
+      const top = (0, import_clamp.default)(pageY - yOffset, 0, containerHeight);
+      const saturation = left / containerWidth;
+      const bright = (0, import_clamp.default)(-(top / containerHeight) + 1, 0, 1);
+      handleThrottle(onChange, {
+        h: (_a = colors.value) == null ? void 0 : _a.hsv.h,
+        s: saturation,
+        v: bright,
+        a: (_b = colors.value) == null ? void 0 : _b.hsv.a,
+        source: "hsva"
+      });
+    }
+    __name(handleChange, "handleChange");
+    function onChange(param) {
+      emit("change", param);
+    }
+    __name(onChange, "onChange");
+    function handleMouseDown() {
+      window.addEventListener("mousemove", handleChange);
+      window.addEventListener("mouseup", handleChange);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    __name(handleMouseDown, "handleMouseDown");
+    function handleMouseUp() {
+      unbindEventListeners();
+    }
+    __name(handleMouseUp, "handleMouseUp");
+    function unbindEventListeners() {
+      window.removeEventListener("mousemove", handleChange);
+      window.removeEventListener("mouseup", handleChange);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    __name(unbindEventListeners, "unbindEventListeners");
+    return () => {
+      return (0, import_vue2.createVNode)("div", {
+        "ref": containerNode,
+        "data-pixel-component": "MpColorPickerSaturation",
+        "id": "saturation-container",
+        "class": (0, import_css2.css)({
+          cursor: "pointer",
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0"
+        }),
+        "style": {
+          background: bgColor.value
+        },
+        "onMousedown": handleMouseDown,
+        "onTouchmove": handleChange,
+        "onTouchstart": handleChange
+      }, [(0, import_vue2.createVNode)("div", {
+        "id": "saturation-white",
+        "class": (0, import_css2.css)({
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          background: "linear-gradient(to right, #fff, rgba(255,255,255,0))"
+        })
+      }, null), (0, import_vue2.createVNode)("div", {
+        "id": "saturation-black",
+        "class": (0, import_css2.css)({
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          background: "linear-gradient(to top, #000, rgba(0,0,0,0))"
+        })
+      }, null), (0, import_vue2.createVNode)("div", {
+        "id": "saturation-pointer",
+        "class": (0, import_css2.css)({
+          cursor: "pointer",
+          position: "absolute"
+        }),
+        "style": {
+          top: pointerTop.value,
+          left: pointerLeft.value
+        }
+      }, [(0, import_vue2.createVNode)("div", {
+        "id": "saturation-circle",
+        "class": (0, import_css2.css)({
+          cursor: "pointer",
+          width: "6px",
+          height: "6px",
+          boxShadow: "0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4)",
+          borderRadius: "50%",
+          transform: "translate(-2px, -2px)"
+        })
+      }, null)])]);
+    };
+  }
+});
+
+// src/hue.tsx
+var import_vue4 = require("vue");
+var import_vue5 = require("vue");
+var import_css3 = require("@mekari/pixel3-styled-system/css");
+var MpColorHue = (0, import_vue5.defineComponent)({
+  name: "MpColorHue",
+  props: {
+    value: {
+      type: Object
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const oldHue = (0, import_vue5.ref)(0);
+    const pullDirection = (0, import_vue5.ref)("");
+    const containerNode = (0, import_vue5.ref)();
+    (0, import_vue5.watch)(() => props.value, (oldValue, newValue) => {
+      if (oldValue !== newValue) {
+        handlePullDirection();
+      }
+    });
+    const colors = (0, import_vue5.computed)(() => {
+      return props.value;
+    });
+    const pointerTop = (0, import_vue5.computed)(() => {
+      var _a;
+      const h = (_a = props.value) == null ? void 0 : _a.hsl.h;
+      if (props.direction === "vertical") {
+        if (h === 0 && pullDirection.value === "right")
+          return 0;
+        return -(h * 100 / 360) + 100 + "%";
+      } else {
+        return 0;
+      }
+    });
+    const pointerLeft = (0, import_vue5.computed)(() => {
+      var _a;
+      const h = (_a = props.value) == null ? void 0 : _a.hsl.h;
+      if (props.direction === "vertical") {
+        return 0;
+      } else {
+        if (h === 0 && pullDirection.value === "right")
+          return "100%";
+        return h * 100 / 360 + "%";
+      }
+    });
+    function handlePullDirection() {
+      var _a;
+      const h = (_a = props.value) == null ? void 0 : _a.hsl.h;
+      if (h !== 0 && h - oldHue.value > 0)
+        pullDirection.value = "right";
+      if (h !== 0 && h - oldHue.value < 0)
+        pullDirection.value = "left";
+      oldHue.value = h;
+    }
+    __name(handlePullDirection, "handlePullDirection");
+    function handleChange(e, skip) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      !skip && e.preventDefault();
+      const container = containerNode.value;
+      if (!container) {
+        return;
+      }
+      const containerWidth = container.clientWidth;
+      const containerHeight = container.clientHeight;
+      const xOffset = container.getBoundingClientRect().left + window.scrollX;
+      const yOffset = container.getBoundingClientRect().top + window.scrollY;
+      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
+      const pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0);
+      const left = pageX - xOffset;
+      const top = pageY - yOffset;
+      let h;
+      let percent;
+      if (props.direction === "vertical") {
+        if (top < 0) {
+          h = 360;
+        } else if (top > containerHeight) {
+          h = 0;
+        } else {
+          percent = -(top * 100 / containerHeight) + 100;
+          h = 360 * percent / 100;
+        }
+        if (((_a = colors.value) == null ? void 0 : _a.hsl.h) !== h) {
+          emit("change", {
+            h,
+            s: (_b = colors.value) == null ? void 0 : _b.hsl.s,
+            l: (_c = colors.value) == null ? void 0 : _c.hsl.l,
+            a: (_d = colors.value) == null ? void 0 : _d.hsl.a,
+            source: "hsl"
+          });
+        }
+      } else {
+        if (left < 0) {
+          h = 0;
+        } else if (left > containerWidth) {
+          h = 360;
+        } else {
+          percent = left * 100 / containerWidth;
+          h = 360 * percent / 100;
+        }
+        if (((_e = colors.value) == null ? void 0 : _e.hsl.h) !== h) {
+          emit("change", {
+            h,
+            s: (_f = colors.value) == null ? void 0 : _f.hsl.s,
+            l: (_g = colors.value) == null ? void 0 : _g.hsl.l,
+            a: (_h = colors.value) == null ? void 0 : _h.hsl.a,
+            source: "hsl"
+          });
+        }
+      }
+    }
+    __name(handleChange, "handleChange");
+    function handleMouseDown(e) {
+      handleChange(e, true);
+      window.addEventListener("mousemove", handleChange);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    __name(handleMouseDown, "handleMouseDown");
+    function handleMouseUp() {
+      unbindEventListeners();
+    }
+    __name(handleMouseUp, "handleMouseUp");
+    function unbindEventListeners() {
+      window.removeEventListener("mousemove", handleChange);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    __name(unbindEventListeners, "unbindEventListeners");
+    return () => {
+      var _a;
+      return (0, import_vue4.createVNode)("div", {
+        "data-pixel-component": "MpColorPickerHue",
+        "class": (0, import_css3.css)({
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          background: props.direction === "horizontal" ? "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" : "linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"
+        })
+      }, [(0, import_vue4.createVNode)("div", {
+        "ref": containerNode,
+        "id": "hue-container",
+        "role": "slider",
+        "aria-valuenow": (_a = colors.value) == null ? void 0 : _a.hsl.h,
+        "aria-valuemin": "0",
+        "aria-valuemax": "360",
+        "class": (0, import_css3.css)({
+          cursor: "pointer",
+          margin: "0 2px",
+          position: "relative",
+          height: "100%"
+        }),
+        "onMousedown": handleMouseDown,
+        "onTouchmove": handleChange,
+        "onTouchstart": handleChange
+      }, [(0, import_vue4.createVNode)("div", {
+        "id": "hue-pointer",
+        "role": "presentation",
+        "class": (0, import_css3.css)({
+          position: "absolute",
+          zIndex: "2"
+        }),
+        "style": {
+          top: pointerTop.value,
+          left: pointerLeft.value
+        }
+      }, [(0, import_vue4.createVNode)("div", {
+        "id": "hue-picker",
+        "class": (0, import_css3.css)({
+          cursor: "pointer",
+          marginTop: "-2px",
+          width: "32px",
+          height: "32px",
+          transform: "translateX(-16px)",
+          borderRadius: "24px",
+          boxShadow: "0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)",
+          background: "white"
+        })
+      }, null)])])]);
+    };
+  }
+});
+
+// src/input.tsx
+var import_vue6 = require("vue");
+var import_vue7 = require("vue");
+var import_pixel3_text = require("@mekari/pixel3-text");
+var import_pixel3_input = require("@mekari/pixel3-input");
+var import_css4 = require("@mekari/pixel3-styled-system/css");
+var MpColorInput = (0, import_vue7.defineComponent)({
+  name: "MpColorInput",
+  props: {
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    label: {
+      type: String,
+      default: "hex"
+    },
+    width: {
+      type: String
+    },
+    max: {
+      type: Number
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const val = (0, import_vue7.computed)({
+      get() {
+        return props.value;
+      },
+      set(v) {
+        if (!(props.max === void 0) && +v > props.max) {
+          return props.max;
+        } else {
+          return v;
+        }
+      }
+    });
+    function handleInput(e) {
+      console.log("asdad", e);
+      const target = e.target;
+      const value = target.value;
+      const data = {};
+      data[props.label] = value;
+      if (data.hex === void 0 && data["#"] === void 0) {
+        emit("change", data);
+      } else if (value.length > 5) {
+        emit("change", data);
+      }
+    }
+    __name(handleInput, "handleInput");
+    return () => {
+      return (0, import_vue6.createVNode)("div", {
+        "data-pixel-component": "MpColorPickerInput",
+        "class": (0, import_css4.css)({
+          display: "flex",
+          flexDirection: "column",
+          gap: "1"
+        })
+      }, [(0, import_vue6.createVNode)("div", null, [(0, import_vue6.createVNode)(import_pixel3_text.MpText, {
+        "size": "label-small",
+        "class": (0, import_css4.css)({
+          textTransform: "capitalize"
+        })
+      }, {
+        default: () => [props.label]
+      })]), (0, import_vue6.createVNode)(import_pixel3_input.MpInput, {
+        "value": val.value,
+        "size": "sm",
+        "maxlength": props.label === "hex" ? "7" : "3",
+        "style": {
+          width: props.width,
+          minWidth: props.width
+        },
+        "onInput": handleInput
+      }, null)]);
+    };
+  }
+});
+
+// src/preset.tsx
+var import_vue8 = require("vue");
+var import_vue9 = require("vue");
+var import_tinycolor22 = __toESM(require("tinycolor2"));
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+var import_css5 = require("@mekari/pixel3-styled-system/css");
+var MpColorPreset = (0, import_vue9.defineComponent)({
+  name: "MpColorPreset",
+  props: {
+    value: {
+      type: String
+    },
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["click"],
+  setup(props, {
+    emit
+  }) {
+    function handleClick() {
+      emit("click", props.value);
+    }
+    __name(handleClick, "handleClick");
+    return () => {
+      return (0, import_vue8.createVNode)("div", {
+        "data-pixel-component": "MpColorPickerPreset",
+        "class": (0, import_css5.css)({
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          width: "6",
+          height: "6",
+          borderWidth: "1px",
+          borderColor: "gray.50",
+          borderRadius: "sm",
+          cursor: "pointer"
+        }),
+        "style": {
+          background: props.value
+        },
+        "onClick": handleClick
+      }, [props.isActive && (0, import_vue8.createVNode)(import_pixel3_icon.MpIcon, {
+        "name": "check",
+        "size": "sm",
+        "color": (0, import_tinycolor22.default)(props.value).isDark() ? "white" : "dark",
+        "style": {
+          position: "absolute"
+        }
+      }, null)]);
+    };
+  }
+});
+
+// src/color-picker.tsx
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue10.isVNode)(s);
+}
+__name(_isSlot, "_isSlot");
+var MpColorPicker = (0, import_vue11.defineComponent)({
+  name: "MpColorPicker",
+  props: colorPickerProps,
+  emits: ["change"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      popoverAttrs,
+      popoverTriggerAttrs,
+      boxColorAttrs,
+      inputTriggerAttrs,
+      iconDropDownAttrs,
+      popoverContentAttrs,
+      wrapperAdvanceAttrs,
+      wrapperBasicAttrs,
+      wrapperSaturationAttrs,
+      saturationAttrs,
+      wrapperHueAttrs,
+      hueAttrs,
+      wrapperInputAttrs,
+      inputHexAttrs,
+      inputRedAttrs,
+      inputGreenAttrs,
+      inputBlueAttrs,
+      inputFullAttrs,
+      boxPresetAttrs,
+      wrapperBasicPresetAttrs,
+      wrapperPresetAttrs,
+      presetBoxAttrs
+    } = useColorPicker(props, emit);
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        variant,
+        title,
+        isShowSaturation,
+        isShowHue,
+        isShowInput,
+        isShowPreset
+      } = props;
+      return (0, import_vue10.createVNode)("div", rootAttrs.value, [(0, import_vue10.createVNode)(import_pixel3_popover.MpPopover, popoverAttrs.value, {
+        default: () => [(0, import_vue10.createVNode)(import_pixel3_popover.MpPopoverTrigger, null, {
+          default: () => [children ? (0, import_vue10.createVNode)("div", null, [children]) : (0, import_vue10.createVNode)("div", popoverTriggerAttrs.value, [(0, import_vue10.createVNode)("div", boxColorAttrs.value, null), variant === "advance" && (0, import_vue10.createVNode)(import_pixel3_text2.MpText, {
+            "color": "gray.400",
+            "style": "margin-top: 1px"
+          }, {
+            default: () => [(0, import_vue10.createTextVNode)("#")]
+          }), variant === "advance" && (0, import_vue10.createVNode)(import_pixel3_input2.MpInput, inputTriggerAttrs.value, null), (0, import_vue10.createVNode)(import_pixel3_icon2.MpIcon, iconDropDownAttrs.value, null)])]
+        }), (0, import_vue10.createVNode)(import_pixel3_popover.MpPopoverContent, popoverContentAttrs.value, {
+          default: () => [variant === "advance" && (0, import_vue10.createVNode)("div", wrapperAdvanceAttrs.value, [isShowSaturation && (0, import_vue10.createVNode)("div", wrapperSaturationAttrs.value, [(0, import_vue10.createVNode)(MpColorSaturation, saturationAttrs.value, null)]), isShowHue && (0, import_vue10.createVNode)("div", wrapperHueAttrs.value, [(0, import_vue10.createVNode)(MpColorHue, hueAttrs.value, null)]), isShowInput && (0, import_vue10.createVNode)("div", wrapperInputAttrs.value, [(0, import_vue10.createVNode)(MpColorInput, inputHexAttrs.value, null), (0, import_vue10.createVNode)(MpColorInput, inputRedAttrs.value, null), (0, import_vue10.createVNode)(MpColorInput, inputGreenAttrs.value, null), (0, import_vue10.createVNode)(MpColorInput, inputBlueAttrs.value, null)]), isShowPreset && (0, import_vue10.createVNode)(import_pixel3_divider.MpDivider, {
+            "class": (0, import_css6.css)({
+              marginTop: "0",
+              marginBottom: "0"
+            })
+          }, null), isShowPreset && (0, import_vue10.createVNode)("div", boxPresetAttrs.value, [(0, import_vue10.createVNode)("div", wrapperPresetAttrs.value, [(0, import_vue10.createVNode)(import_pixel3_text2.MpText, {
+            "size": "label-small",
+            "style": "width: 100%;"
+          }, {
+            default: () => [(0, import_vue10.createTextVNode)("Present")]
+          }), props.preset.map((item) => {
+            return (0, import_vue10.createVNode)(MpColorPreset, presetBoxAttrs(item), null);
+          })])])]), variant === "basic" && (0, import_vue10.createVNode)("div", wrapperBasicAttrs.value, [(0, import_vue10.createVNode)(import_pixel3_text2.MpText, {
+            "size": "body-small",
+            "color": "gray.600"
+          }, _isSlot(title) ? title : {
+            default: () => [title]
+          }), isShowPreset && (0, import_vue10.createVNode)("div", wrapperBasicPresetAttrs.value, [props.preset.map((item) => {
+            return (0, import_vue10.createVNode)(MpColorPreset, presetBoxAttrs(item), null);
+          })]), isShowInput && (0, import_vue10.createVNode)("div", wrapperInputAttrs.value, [(0, import_vue10.createVNode)(MpColorInput, inputFullAttrs.value, null)])])]
+        })]
+      })]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpColorPicker
+});