@mekari/pixel3-color-picker 0.1.1 → 0.1.2-dev.0

package/dist/{chunk-L5BRB7ES.mjs → chunk-2ZZBAQKR.mjs}

@@ -23,7 +23,7 @@ var colorPickerProps = {
   },
   placement: {
     type: String,
-    default: "bottom"
+    default: "bottom-start"
   },
   preset: {
     type: Array,
@@ -51,6 +51,10 @@ var colorPickerProps = {
     type: Boolean,
     default: true
   },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
   isInvalid: {
     type: Boolean,
     default: false

package/dist/{chunk-DVRBDVR4.mjs → chunk-5CI43L4Q.mjs}

@@ -7,6 +7,7 @@ import { createVNode as _createVNode } from "vue";
 import { defineComponent } from "vue";
 import tinycolor from "tinycolor2";
 import { MpIcon } from "@mekari/pixel3-icon";
+import { usePixelTheme } from "@mekari/pixel3-utils";
 import { css } from "@mekari/pixel3-styled-system/css";
 var MpColorPreset = defineComponent({
   name: "MpColorPreset",
@@ -23,6 +24,9 @@ var MpColorPreset = defineComponent({
   setup(props, {
     emit
   }) {
+    const {
+      isNextTheme
+    } = usePixelTheme();
     function handleClick() {
       emit("click", props.value);
     }
@@ -38,7 +42,7 @@ var MpColorPreset = defineComponent({
           width: "6",
           height: "6",
           borderWidth: "1px",
-          borderColor: "gray.50",
+          borderColor: isNextTheme.value ? "border.default" : "gray.50",
           borderRadius: "sm",
           cursor: "pointer"
         }),

package/dist/{chunk-KHGAEPYZ.mjs → chunk-5VPWEGKC.mjs}

@@ -7,8 +7,6 @@ import { computed, watch, ref, toRefs, onMounted } from "vue";
 import tinycolor from "tinycolor2";
 import { getUniqueId } from "@mekari/pixel3-utils";
 import { colorPickerSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
-import { css, cx } from "@mekari/pixel3-styled-system/css";
-import { token } from "@mekari/pixel3-styled-system/tokens";
 function useColorPicker(props, emit) {
   const {
     id,
@@ -17,6 +15,7 @@ function useColorPicker(props, emit) {
     variant,
     placement,
     isShowPopover,
+    isDisabled,
     isInvalid
   } = toRefs(props);
   const val = ref(_colorChange(value.value));
@@ -33,20 +32,7 @@ function useColorPicker(props, emit) {
     }
   });
   const hex = computed(() => {
-    const hex2 = colors.value.hex;
-    return hex2.replace("#", "");
-  });
-  const borderColor = computed(() => {
-    if (isInvalid.value) {
-      return "red.400";
-    }
-    if (!isInvalid.value && isFocused.value) {
-      return "blue.400";
-    }
-    return "gray.100";
-  });
-  const isFocused = computed(() => {
-    return isPopoverOpen.value;
+    return colors.value.hex.replace("#", "");
   });
   const rootAttrs = computed(() => {
     return {
@@ -61,22 +47,18 @@ function useColorPicker(props, emit) {
       placement: placement.value,
       defaultIsOpen: isShowPopover.value,
       initialFocusRef: `#input-${getId}`,
+      isManual: isDisabled.value,
+      // hack way to disabled Popover
       onOpen: handleOpenPopover,
       onClose: handleClosePopover
     };
   });
   const popoverTriggerAttrs = computed(() => {
     return {
+      "data-invalid": isInvalid.value || void 0,
+      "data-disabled": isDisabled.value || void 0,
       tabindex: "0",
-      class: cx(css({
-        boxShadow: isPopoverOpen.value && !isInvalid.value ? "outline" : "none",
-        _hover: {
-          borderColor: isPopoverOpen.value && !isInvalid.value ? "blue.500 !important" : "gray.400 !important"
-        }
-      }), colorPickerSlotRecipe().popoverTrigger),
-      style: {
-        borderColor: token(`colors.${borderColor.value}`)
-      }
+      class: colorPickerSlotRecipe().popoverTrigger
     };
   });
   const boxColorAttrs = computed(() => {
@@ -96,6 +78,8 @@ function useColorPicker(props, emit) {
       maxlength: "6",
       value: colorInput.value,
       placeholder: placeholder.value,
+      isDisabled: isDisabled.value,
+      isInvalid: isInvalid.value,
       class: colorPickerSlotRecipe().inputTrigger,
       onInput: handleInputTrigger
     };
@@ -293,6 +277,8 @@ function useColorPicker(props, emit) {
   }
   __name(handleInputTrigger, "handleInputTrigger");
   function handleOpenPopover() {
+    if (isDisabled.value)
+      return;
     isPopoverOpen.value = true;
     colorInput.value = hex.value;
   }

package/dist/{chunk-YPFR76KW.mjs → chunk-MILYTHNM.mjs}

@@ -43,7 +43,6 @@ var MpColorInput = defineComponent({
       }
     });
     function handleInput(e) {
-      console.log("asdad", e);
       const target = e.target;
       const value = target.value;
       const data = {};

package/dist/{chunk-6XOLIDD7.mjs → chunk-WQTXZAWZ.mjs}

@@ -3,19 +3,19 @@ import {
 } from "./chunk-PULVLME3.mjs";
 import {
   MpColorInput
-} from "./chunk-YPFR76KW.mjs";
+} from "./chunk-MILYTHNM.mjs";
 import {
   MpColorPreset
-} from "./chunk-DVRBDVR4.mjs";
+} from "./chunk-5CI43L4Q.mjs";
 import {
   MpColorSaturation
 } from "./chunk-AEUPCATZ.mjs";
 import {
   useColorPicker
-} from "./chunk-KHGAEPYZ.mjs";
+} from "./chunk-5VPWEGKC.mjs";
 import {
   colorPickerProps
-} from "./chunk-L5BRB7ES.mjs";
+} from "./chunk-2ZZBAQKR.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -28,6 +28,7 @@ import { MpPopover, MpPopoverTrigger, MpPopoverContent } from "@mekari/pixel3-po
 import { MpInput } from "@mekari/pixel3-input";
 import { MpIcon } from "@mekari/pixel3-icon";
 import { MpDivider } from "@mekari/pixel3-divider";
+import { usePixelTheme } from "@mekari/pixel3-utils";
 import { css } from "@mekari/pixel3-styled-system/css";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
@@ -41,6 +42,9 @@ var MpColorPicker = defineComponent({
     slots,
     emit
   }) {
+    const {
+      isNextTheme
+    } = usePixelTheme();
     const {
       rootAttrs,
       popoverAttrs,
@@ -69,6 +73,7 @@ var MpColorPicker = defineComponent({
     return () => {
       const children = slots.default && slots.default();
       const {
+        id,
         variant,
         title,
         isShowSaturation,
@@ -79,28 +84,32 @@ var MpColorPicker = defineComponent({
       return _createVNode("div", rootAttrs.value, [_createVNode(MpPopover, popoverAttrs.value, {
         default: () => [_createVNode(MpPopoverTrigger, null, {
           default: () => [children ? _createVNode("div", null, [children]) : _createVNode("div", popoverTriggerAttrs.value, [_createVNode("div", boxColorAttrs.value, null), variant === "advance" && _createVNode(MpText, {
-            "color": "gray.400",
-            "style": "margin-top: 1px"
+            "color": isNextTheme.value ? "text.disabled" : "gray.400",
+            "class": css({
+              marginTop: "1px"
+            })
           }, {
             default: () => [_createTextVNode("#")]
           }), variant === "advance" && _createVNode(MpInput, inputTriggerAttrs.value, null), _createVNode(MpIcon, iconDropDownAttrs.value, null)])]
         }), _createVNode(MpPopoverContent, popoverContentAttrs.value, {
           default: () => [variant === "advance" && _createVNode("div", wrapperAdvanceAttrs.value, [isShowSaturation && _createVNode("div", wrapperSaturationAttrs.value, [_createVNode(MpColorSaturation, saturationAttrs.value, null)]), isShowHue && _createVNode("div", wrapperHueAttrs.value, [_createVNode(MpColorHue, hueAttrs.value, null)]), isShowInput && _createVNode("div", wrapperInputAttrs.value, [_createVNode(MpColorInput, inputHexAttrs.value, null), _createVNode(MpColorInput, inputRedAttrs.value, null), _createVNode(MpColorInput, inputGreenAttrs.value, null), _createVNode(MpColorInput, inputBlueAttrs.value, null)]), isShowPreset && _createVNode(MpDivider, {
-            "id": "divider-color-picker",
+            "id": `${id}-divider`,
             "class": css({
               marginTop: "0",
               marginBottom: "0"
             })
           }, null), isShowPreset && _createVNode("div", boxPresetAttrs.value, [_createVNode("div", wrapperPresetAttrs.value, [_createVNode(MpText, {
             "size": "label-small",
-            "style": "width: 100%;"
+            "class": css({
+              width: "full"
+            })
           }, {
             default: () => [_createTextVNode("Present")]
           }), props.preset.map((item) => {
             return _createVNode(MpColorPreset, presetBoxAttrs(item), null);
           })])])]), variant === "basic" && _createVNode("div", wrapperBasicAttrs.value, [_createVNode(MpText, {
             "size": "body-small",
-            "color": "gray.600"
+            "color": isNextTheme.value ? "text.secondary" : "gray.600"
           }, _isSlot(title) ? title : {
             default: () => [title]
           }), isShowPreset && _createVNode("div", wrapperBasicPresetAttrs.value, [props.preset.map((item) => {

package/dist/color-picker.d.mts

@@ -51,6 +51,10 @@ declare const MpColorPicker: vue.DefineComponent<{
         type: vue.PropType<boolean>;
         default: boolean;
     };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
     isInvalid: {
         type: vue.PropType<boolean>;
         default: boolean;
@@ -104,6 +108,10 @@ declare const MpColorPicker: vue.DefineComponent<{
         type: vue.PropType<boolean>;
         default: boolean;
     };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
     isInvalid: {
         type: vue.PropType<boolean>;
         default: boolean;
@@ -111,19 +119,20 @@ declare const MpColorPicker: vue.DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    value: string;
-    title: string;
     id: string;
+    title: string;
+    value: string;
     placeholder: string;
-    placement: Placement;
     variant: "advance" | "basic";
-    isInvalid: boolean;
+    placement: Placement;
     preset: string[];
     isShowPopover: boolean;
     isShowSaturation: boolean;
     isShowHue: boolean;
     isShowInput: boolean;
     isShowPreset: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
 }, {}>;
 
 export { MpColorPicker };

package/dist/color-picker.d.ts

@@ -51,6 +51,10 @@ declare const MpColorPicker: vue.DefineComponent<{
         type: vue.PropType<boolean>;
         default: boolean;
     };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
     isInvalid: {
         type: vue.PropType<boolean>;
         default: boolean;
@@ -104,6 +108,10 @@ declare const MpColorPicker: vue.DefineComponent<{
         type: vue.PropType<boolean>;
         default: boolean;
     };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
     isInvalid: {
         type: vue.PropType<boolean>;
         default: boolean;
@@ -111,19 +119,20 @@ declare const MpColorPicker: vue.DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    value: string;
-    title: string;
     id: string;
+    title: string;
+    value: string;
     placeholder: string;
-    placement: Placement;
     variant: "advance" | "basic";
-    isInvalid: boolean;
+    placement: Placement;
     preset: string[];
     isShowPopover: boolean;
     isShowSaturation: boolean;
     isShowHue: boolean;
     isShowInput: boolean;
     isShowPreset: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
 }, {}>;
 
 export { MpColorPicker };

package/dist/color-picker.js

@@ -41,7 +41,8 @@ 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");
+var import_pixel3_utils3 = require("@mekari/pixel3-utils");
+var import_css5 = 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"];
@@ -68,7 +69,7 @@ var colorPickerProps = {
   },
   placement: {
     type: String,
-    default: "bottom"
+    default: "bottom-start"
   },
   preset: {
     type: Array,
@@ -96,6 +97,10 @@ var colorPickerProps = {
     type: Boolean,
     default: true
   },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
   isInvalid: {
     type: Boolean,
     default: false
@@ -107,8 +112,6 @@ 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,
@@ -117,6 +120,7 @@ function useColorPicker(props, emit) {
     variant,
     placement,
     isShowPopover,
+    isDisabled,
     isInvalid
   } = (0, import_vue.toRefs)(props);
   const val = (0, import_vue.ref)(_colorChange(value.value));
@@ -133,20 +137,7 @@ function useColorPicker(props, emit) {
     }
   });
   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;
+    return colors.value.hex.replace("#", "");
   });
   const rootAttrs = (0, import_vue.computed)(() => {
     return {
@@ -161,22 +152,18 @@ function useColorPicker(props, emit) {
       placement: placement.value,
       defaultIsOpen: isShowPopover.value,
       initialFocusRef: `#input-${getId}`,
+      isManual: isDisabled.value,
+      // hack way to disabled Popover
       onOpen: handleOpenPopover,
       onClose: handleClosePopover
     };
   });
   const popoverTriggerAttrs = (0, import_vue.computed)(() => {
     return {
+      "data-invalid": isInvalid.value || void 0,
+      "data-disabled": isDisabled.value || void 0,
       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}`)
-      }
+      class: (0, import_recipes.colorPickerSlotRecipe)().popoverTrigger
     };
   });
   const boxColorAttrs = (0, import_vue.computed)(() => {
@@ -196,6 +183,8 @@ function useColorPicker(props, emit) {
       maxlength: "6",
       value: colorInput.value,
       placeholder: placeholder.value,
+      isDisabled: isDisabled.value,
+      isInvalid: isInvalid.value,
       class: (0, import_recipes.colorPickerSlotRecipe)().inputTrigger,
       onInput: handleInputTrigger
     };
@@ -393,6 +382,8 @@ function useColorPicker(props, emit) {
   }
   __name(handleInputTrigger, "handleInputTrigger");
   function handleOpenPopover() {
+    if (isDisabled.value)
+      return;
     isPopoverOpen.value = true;
     colorInput.value = hex.value;
   }
@@ -444,7 +435,7 @@ 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 import_css = require("@mekari/pixel3-styled-system/css");
 var MpColorSaturation = (0, import_vue3.defineComponent)({
   name: "MpColorSaturation",
   props: {
@@ -529,7 +520,7 @@ var MpColorSaturation = (0, import_vue3.defineComponent)({
         "ref": containerNode,
         "data-pixel-component": "MpColorPickerSaturation",
         "id": "saturation-container",
-        "class": (0, import_css2.css)({
+        "class": (0, import_css.css)({
           cursor: "pointer",
           position: "absolute",
           top: "0",
@@ -545,7 +536,7 @@ var MpColorSaturation = (0, import_vue3.defineComponent)({
         "onTouchstart": handleChange
       }, [(0, import_vue2.createVNode)("div", {
         "id": "saturation-white",
-        "class": (0, import_css2.css)({
+        "class": (0, import_css.css)({
           position: "absolute",
           top: "0",
           right: "0",
@@ -555,7 +546,7 @@ var MpColorSaturation = (0, import_vue3.defineComponent)({
         })
       }, null), (0, import_vue2.createVNode)("div", {
         "id": "saturation-black",
-        "class": (0, import_css2.css)({
+        "class": (0, import_css.css)({
           position: "absolute",
           top: "0",
           right: "0",
@@ -565,7 +556,7 @@ var MpColorSaturation = (0, import_vue3.defineComponent)({
         })
       }, null), (0, import_vue2.createVNode)("div", {
         "id": "saturation-pointer",
-        "class": (0, import_css2.css)({
+        "class": (0, import_css.css)({
           cursor: "pointer",
           position: "absolute"
         }),
@@ -575,7 +566,7 @@ var MpColorSaturation = (0, import_vue3.defineComponent)({
         }
       }, [(0, import_vue2.createVNode)("div", {
         "id": "saturation-circle",
-        "class": (0, import_css2.css)({
+        "class": (0, import_css.css)({
           cursor: "pointer",
           width: "6px",
           height: "6px",
@@ -591,7 +582,7 @@ var MpColorSaturation = (0, import_vue3.defineComponent)({
 // src/hue.tsx
 var import_vue4 = require("vue");
 var import_vue5 = require("vue");
-var import_css3 = require("@mekari/pixel3-styled-system/css");
+var import_css2 = require("@mekari/pixel3-styled-system/css");
 var MpColorHue = (0, import_vue5.defineComponent)({
   name: "MpColorHue",
   props: {
@@ -725,7 +716,7 @@ var MpColorHue = (0, import_vue5.defineComponent)({
       var _a;
       return (0, import_vue4.createVNode)("div", {
         "data-pixel-component": "MpColorPickerHue",
-        "class": (0, import_css3.css)({
+        "class": (0, import_css2.css)({
           position: "absolute",
           top: "0",
           right: "0",
@@ -740,7 +731,7 @@ var MpColorHue = (0, import_vue5.defineComponent)({
         "aria-valuenow": (_a = colors.value) == null ? void 0 : _a.hsl.h,
         "aria-valuemin": "0",
         "aria-valuemax": "360",
-        "class": (0, import_css3.css)({
+        "class": (0, import_css2.css)({
           cursor: "pointer",
           margin: "0 2px",
           position: "relative",
@@ -752,7 +743,7 @@ var MpColorHue = (0, import_vue5.defineComponent)({
       }, [(0, import_vue4.createVNode)("div", {
         "id": "hue-pointer",
         "role": "presentation",
-        "class": (0, import_css3.css)({
+        "class": (0, import_css2.css)({
           position: "absolute",
           zIndex: "2"
         }),
@@ -762,7 +753,7 @@ var MpColorHue = (0, import_vue5.defineComponent)({
         }
       }, [(0, import_vue4.createVNode)("div", {
         "id": "hue-picker",
-        "class": (0, import_css3.css)({
+        "class": (0, import_css2.css)({
           cursor: "pointer",
           marginTop: "-2px",
           width: "32px",
@@ -782,7 +773,7 @@ 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 import_css3 = require("@mekari/pixel3-styled-system/css");
 var MpColorInput = (0, import_vue7.defineComponent)({
   name: "MpColorInput",
   props: {
@@ -818,7 +809,6 @@ var MpColorInput = (0, import_vue7.defineComponent)({
       }
     });
     function handleInput(e) {
-      console.log("asdad", e);
       const target = e.target;
       const value = target.value;
       const data = {};
@@ -833,14 +823,14 @@ var MpColorInput = (0, import_vue7.defineComponent)({
     return () => {
       return (0, import_vue6.createVNode)("div", {
         "data-pixel-component": "MpColorPickerInput",
-        "class": (0, import_css4.css)({
+        "class": (0, import_css3.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)({
+        "class": (0, import_css3.css)({
           textTransform: "capitalize"
         })
       }, {
@@ -865,7 +855,8 @@ 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 import_pixel3_utils2 = require("@mekari/pixel3-utils");
+var import_css4 = require("@mekari/pixel3-styled-system/css");
 var MpColorPreset = (0, import_vue9.defineComponent)({
   name: "MpColorPreset",
   props: {
@@ -881,6 +872,9 @@ var MpColorPreset = (0, import_vue9.defineComponent)({
   setup(props, {
     emit
   }) {
+    const {
+      isNextTheme
+    } = (0, import_pixel3_utils2.usePixelTheme)();
     function handleClick() {
       emit("click", props.value);
     }
@@ -888,7 +882,7 @@ var MpColorPreset = (0, import_vue9.defineComponent)({
     return () => {
       return (0, import_vue8.createVNode)("div", {
         "data-pixel-component": "MpColorPickerPreset",
-        "class": (0, import_css5.css)({
+        "class": (0, import_css4.css)({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -896,7 +890,7 @@ var MpColorPreset = (0, import_vue9.defineComponent)({
           width: "6",
           height: "6",
           borderWidth: "1px",
-          borderColor: "gray.50",
+          borderColor: isNextTheme.value ? "border.default" : "gray.50",
           borderRadius: "sm",
           cursor: "pointer"
         }),
@@ -929,6 +923,9 @@ var MpColorPicker = (0, import_vue11.defineComponent)({
     slots,
     emit
   }) {
+    const {
+      isNextTheme
+    } = (0, import_pixel3_utils3.usePixelTheme)();
     const {
       rootAttrs,
       popoverAttrs,
@@ -957,6 +954,7 @@ var MpColorPicker = (0, import_vue11.defineComponent)({
     return () => {
       const children = slots.default && slots.default();
       const {
+        id,
         variant,
         title,
         isShowSaturation,
@@ -967,28 +965,32 @@ var MpColorPicker = (0, import_vue11.defineComponent)({
       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"
+            "color": isNextTheme.value ? "text.disabled" : "gray.400",
+            "class": (0, import_css5.css)({
+              marginTop: "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, {
-            "id": "divider-color-picker",
-            "class": (0, import_css6.css)({
+            "id": `${id}-divider`,
+            "class": (0, import_css5.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%;"
+            "class": (0, import_css5.css)({
+              width: "full"
+            })
           }, {
             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"
+            "color": isNextTheme.value ? "text.secondary" : "gray.600"
           }, _isSlot(title) ? title : {
             default: () => [title]
           }), isShowPreset && (0, import_vue10.createVNode)("div", wrapperBasicPresetAttrs.value, [props.preset.map((item) => {

package/dist/color-picker.mjs

@@ -1,12 +1,12 @@
 import {
   MpColorPicker
-} from "./chunk-6XOLIDD7.mjs";
+} from "./chunk-WQTXZAWZ.mjs";
 import "./chunk-PULVLME3.mjs";
-import "./chunk-YPFR76KW.mjs";
-import "./chunk-DVRBDVR4.mjs";
+import "./chunk-MILYTHNM.mjs";
+import "./chunk-5CI43L4Q.mjs";
 import "./chunk-AEUPCATZ.mjs";
-import "./chunk-KHGAEPYZ.mjs";
-import "./chunk-L5BRB7ES.mjs";
+import "./chunk-5VPWEGKC.mjs";
+import "./chunk-2ZZBAQKR.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpColorPicker