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

package/dist/index.js

@@ -43,7 +43,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"];
@@ -70,7 +71,7 @@ var colorPickerProps = {
   },
   placement: {
     type: String,
-    default: "bottom"
+    default: "bottom-start"
   },
   preset: {
     type: Array,
@@ -98,6 +99,10 @@ var colorPickerProps = {
     type: Boolean,
     default: true
   },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
   isInvalid: {
     type: Boolean,
     default: false
@@ -109,8 +114,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,
@@ -119,6 +122,7 @@ function useColorPicker(props, emit) {
     variant,
     placement,
     isShowPopover,
+    isDisabled,
     isInvalid
   } = (0, import_vue.toRefs)(props);
   const val = (0, import_vue.ref)(_colorChange(value.value));
@@ -135,20 +139,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 {
@@ -163,22 +154,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)(() => {
@@ -198,6 +185,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
     };
@@ -395,6 +384,8 @@ function useColorPicker(props, emit) {
   }
   __name(handleInputTrigger, "handleInputTrigger");
   function handleOpenPopover() {
+    if (isDisabled.value)
+      return;
     isPopoverOpen.value = true;
     colorInput.value = hex.value;
   }
@@ -446,7 +437,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: {
@@ -531,7 +522,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",
@@ -547,7 +538,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",
@@ -557,7 +548,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",
@@ -567,7 +558,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"
         }),
@@ -577,7 +568,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",
@@ -593,7 +584,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: {
@@ -727,7 +718,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",
@@ -742,7 +733,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",
@@ -754,7 +745,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"
         }),
@@ -764,7 +755,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",
@@ -784,7 +775,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: {
@@ -820,7 +811,6 @@ var MpColorInput = (0, import_vue7.defineComponent)({
       }
     });
     function handleInput(e) {
-      console.log("asdad", e);
       const target = e.target;
       const value = target.value;
       const data = {};
@@ -835,14 +825,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"
         })
       }, {
@@ -867,7 +857,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: {
@@ -883,6 +874,9 @@ var MpColorPreset = (0, import_vue9.defineComponent)({
   setup(props, {
     emit
   }) {
+    const {
+      isNextTheme
+    } = (0, import_pixel3_utils2.usePixelTheme)();
     function handleClick() {
       emit("click", props.value);
     }
@@ -890,7 +884,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",
@@ -898,7 +892,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"
         }),
@@ -931,6 +925,9 @@ var MpColorPicker = (0, import_vue11.defineComponent)({
     slots,
     emit
   }) {
+    const {
+      isNextTheme
+    } = (0, import_pixel3_utils3.usePixelTheme)();
     const {
       rootAttrs,
       popoverAttrs,
@@ -959,6 +956,7 @@ var MpColorPicker = (0, import_vue11.defineComponent)({
     return () => {
       const children = slots.default && slots.default();
       const {
+        id,
         variant,
         title,
         isShowSaturation,
@@ -969,28 +967,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")]
+            default: () => [(0, import_vue10.createTextVNode)("Preset")]
           }), 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/index.mjs

@@ -1,12 +1,13 @@
+import "./chunk-62SESCIE.mjs";
 import {
   MpColorPicker
-} from "./chunk-6XOLIDD7.mjs";
+} from "./chunk-NT4KAY3K.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

package/dist/input.js

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

package/dist/input.mjs

@@ -1,6 +1,6 @@
 import {
   MpColorInput
-} from "./chunk-YPFR76KW.mjs";
+} from "./chunk-MILYTHNM.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpColorInput

package/dist/metafile-cjs.json

@@ -1 +1 @@
-{"inputs":{"src/modules/color-picker.props.ts":{"bytes":1916,"imports":[{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/modules/color-picker.hooks.ts":{"bytes":8916,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/saturation.tsx":{"bytes":4652,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"clamp","kind":"import-statement","external":true},{"path":"lodash.throttle","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/hue.tsx":{"bytes":5628,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/input.tsx":{"bytes":2228,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/preset.tsx":{"bytes":1437,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/color-picker.tsx":{"bytes":4572,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-popover","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-divider","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"src/modules/color-picker.props.ts","kind":"import-statement","original":"./modules/color-picker.props"},{"path":"src/modules/color-picker.hooks.ts","kind":"import-statement","original":"./modules/color-picker.hooks"},{"path":"src/saturation.tsx","kind":"import-statement","original":"./saturation"},{"path":"src/hue.tsx","kind":"import-statement","original":"./hue"},{"path":"src/input.tsx","kind":"import-statement","original":"./input"},{"path":"src/preset.tsx","kind":"import-statement","original":"./preset"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":132,"imports":[{"path":"src/color-picker.tsx","kind":"import-statement","original":"./color-picker"}],"format":"esm"}},"outputs":{"dist/color-picker.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-popover","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-divider","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"clamp","kind":"require-call","external":true},{"path":"lodash.throttle","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/color-picker.tsx","inputs":{"src/color-picker.tsx":{"bytesInOutput":5107},"src/modules/color-picker.props.ts":{"bytesInOutput":1040},"src/modules/color-picker.hooks.ts":{"bytesInOutput":9580},"src/saturation.tsx":{"bytesInOutput":5060},"src/hue.tsx":{"bytesInOutput":6268},"src/input.tsx":{"bytesInOutput":2148},"src/preset.tsx":{"bytesInOutput":1489}},"bytes":32487},"dist/hue.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/hue.tsx","inputs":{"src/hue.tsx":{"bytesInOutput":6383}},"bytes":7392},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-popover","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-divider","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"clamp","kind":"require-call","external":true},{"path":"lodash.throttle","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":131},"src/color-picker.tsx":{"bytesInOutput":4949},"src/modules/color-picker.props.ts":{"bytesInOutput":1040},"src/modules/color-picker.hooks.ts":{"bytesInOutput":9580},"src/saturation.tsx":{"bytesInOutput":5060},"src/hue.tsx":{"bytesInOutput":6268},"src/input.tsx":{"bytesInOutput":2148},"src/preset.tsx":{"bytesInOutput":1489}},"bytes":32477},"dist/input.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/input.tsx","inputs":{"src/input.tsx":{"bytesInOutput":2275}},"bytes":3288},"dist/preset.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/preset.tsx","inputs":{"src/preset.tsx":{"bytesInOutput":1622}},"bytes":3234},"dist/saturation.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"clamp","kind":"require-call","external":true},{"path":"lodash.throttle","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/saturation.tsx","inputs":{"src/saturation.tsx":{"bytesInOutput":5208}},"bytes":6828},"dist/modules/color-picker.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/color-picker.hooks.ts","inputs":{"src/modules/color-picker.hooks.ts":{"bytesInOutput":9758}},"bytes":11390},"dist/modules/color-picker.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/color-picker.props.ts","inputs":{"src/modules/color-picker.props.ts":{"bytesInOutput":1298}},"bytes":2264}}}
+{"inputs":{"src/modules/color-picker.props.ts":{"bytes":2062,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"./color-picker.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/color-picker.hooks.ts":{"bytes":8472,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/saturation.tsx":{"bytes":4652,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"clamp","kind":"import-statement","external":true},{"path":"lodash.throttle","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/hue.tsx":{"bytes":5692,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"./modules/color-picker.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/input.tsx":{"bytes":2197,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/preset.tsx":{"bytes":1585,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/color-picker.tsx":{"bytes":4830,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-popover","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-divider","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"src/modules/color-picker.props.ts","kind":"import-statement","original":"./modules/color-picker.props"},{"path":"src/modules/color-picker.hooks.ts","kind":"import-statement","original":"./modules/color-picker.hooks"},{"path":"src/saturation.tsx","kind":"import-statement","original":"./saturation"},{"path":"src/hue.tsx","kind":"import-statement","original":"./hue"},{"path":"src/input.tsx","kind":"import-statement","original":"./input"},{"path":"src/preset.tsx","kind":"import-statement","original":"./preset"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/color-picker.types.ts":{"bytes":200,"imports":[],"format":"esm"},"src/index.ts":{"bytes":178,"imports":[{"path":"src/color-picker.tsx","kind":"import-statement","original":"./color-picker"},{"path":"src/modules/color-picker.types.ts","kind":"import-statement","original":"./modules/color-picker.types"}],"format":"esm"}},"outputs":{"dist/color-picker.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-popover","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-divider","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"clamp","kind":"require-call","external":true},{"path":"lodash.throttle","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/color-picker.tsx","inputs":{"src/color-picker.tsx":{"bytesInOutput":5431},"src/modules/color-picker.props.ts":{"bytesInOutput":1105},"src/modules/color-picker.hooks.ts":{"bytesInOutput":9042},"src/saturation.tsx":{"bytesInOutput":5054},"src/hue.tsx":{"bytesInOutput":6268},"src/input.tsx":{"bytesInOutput":2117},"src/preset.tsx":{"bytesInOutput":1669}},"bytes":32481},"dist/hue.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/hue.tsx","inputs":{"src/hue.tsx":{"bytesInOutput":6383}},"bytes":7392},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-popover","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-divider","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"clamp","kind":"require-call","external":true},{"path":"lodash.throttle","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":131},"src/color-picker.tsx":{"bytesInOutput":5273},"src/modules/color-picker.props.ts":{"bytesInOutput":1105},"src/modules/color-picker.hooks.ts":{"bytesInOutput":9042},"src/saturation.tsx":{"bytesInOutput":5054},"src/hue.tsx":{"bytesInOutput":6268},"src/input.tsx":{"bytesInOutput":2117},"src/preset.tsx":{"bytesInOutput":1669}},"bytes":32471},"dist/input.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/input.tsx","inputs":{"src/input.tsx":{"bytesInOutput":2244}},"bytes":3257},"dist/preset.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/preset.tsx","inputs":{"src/preset.tsx":{"bytesInOutput":1800}},"bytes":3412},"dist/saturation.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"clamp","kind":"require-call","external":true},{"path":"lodash.throttle","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/saturation.tsx","inputs":{"src/saturation.tsx":{"bytesInOutput":5208}},"bytes":6828},"dist/modules/color-picker.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"tinycolor2","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/color-picker.hooks.ts","inputs":{"src/modules/color-picker.hooks.ts":{"bytesInOutput":9220}},"bytes":10852},"dist/modules/color-picker.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/color-picker.props.ts","inputs":{"src/modules/color-picker.props.ts":{"bytesInOutput":1363}},"bytes":2329},"dist/modules/color-picker.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/color-picker.types.ts","inputs":{"src/modules/color-picker.types.ts":{"bytesInOutput":96}},"bytes":805}}}

package/dist/metafile-esm.json

@@ -1 +1 @@
-{"inputs":{"src/modules/color-picker.props.ts":{"bytes":1916,"imports":[{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/modules/color-picker.hooks.ts":{"bytes":8916,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/saturation.tsx":{"bytes":4652,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"clamp","kind":"import-statement","external":true},{"path":"lodash.throttle","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/hue.tsx":{"bytes":5628,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/input.tsx":{"bytes":2228,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/preset.tsx":{"bytes":1437,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/color-picker.tsx":{"bytes":4572,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-popover","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-divider","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"src/modules/color-picker.props.ts","kind":"import-statement","original":"./modules/color-picker.props"},{"path":"src/modules/color-picker.hooks.ts","kind":"import-statement","original":"./modules/color-picker.hooks"},{"path":"src/saturation.tsx","kind":"import-statement","original":"./saturation"},{"path":"src/hue.tsx","kind":"import-statement","original":"./hue"},{"path":"src/input.tsx","kind":"import-statement","original":"./input"},{"path":"src/preset.tsx","kind":"import-statement","original":"./preset"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":132,"imports":[{"path":"src/color-picker.tsx","kind":"import-statement","original":"./color-picker"}],"format":"esm"}},"outputs":{"dist/color-picker.mjs":{"imports":[{"path":"dist/chunk-6XOLIDD7.mjs","kind":"import-statement"},{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-YPFR76KW.mjs","kind":"import-statement"},{"path":"dist/chunk-DVRBDVR4.mjs","kind":"import-statement"},{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-KHGAEPYZ.mjs","kind":"import-statement"},{"path":"dist/chunk-L5BRB7ES.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorPicker"],"entryPoint":"src/color-picker.tsx","inputs":{},"bytes":301},"dist/hue.mjs":{"imports":[{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorHue"],"entryPoint":"src/hue.tsx","inputs":{},"bytes":109},"dist/index.mjs":{"imports":[{"path":"dist/chunk-6XOLIDD7.mjs","kind":"import-statement"},{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-YPFR76KW.mjs","kind":"import-statement"},{"path":"dist/chunk-DVRBDVR4.mjs","kind":"import-statement"},{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-KHGAEPYZ.mjs","kind":"import-statement"},{"path":"dist/chunk-L5BRB7ES.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorPicker"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":301},"dist/chunk-6XOLIDD7.mjs":{"imports":[{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-YPFR76KW.mjs","kind":"import-statement"},{"path":"dist/chunk-DVRBDVR4.mjs","kind":"import-statement"},{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-KHGAEPYZ.mjs","kind":"import-statement"},{"path":"dist/chunk-L5BRB7ES.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-popover","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-divider","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["MpColorPicker"],"inputs":{"src/color-picker.tsx":{"bytesInOutput":4196}},"bytes":4639},"dist/chunk-PULVLME3.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["MpColorHue"],"inputs":{"src/hue.tsx":{"bytesInOutput":6037}},"bytes":6128},"dist/input.mjs":{"imports":[{"path":"dist/chunk-YPFR76KW.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorInput"],"entryPoint":"src/input.tsx","inputs":{},"bytes":113},"dist/chunk-YPFR76KW.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["MpColorInput"],"inputs":{"src/input.tsx":{"bytesInOutput":1980}},"bytes":2075},"dist/preset.mjs":{"imports":[{"path":"dist/chunk-DVRBDVR4.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorPreset"],"entryPoint":"src/preset.tsx","inputs":{},"bytes":115},"dist/chunk-DVRBDVR4.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["MpColorPreset"],"inputs":{"src/preset.tsx":{"bytesInOutput":1365}},"bytes":1462},"dist/saturation.mjs":{"imports":[{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorSaturation"],"entryPoint":"src/saturation.tsx","inputs":{},"bytes":123},"dist/chunk-AEUPCATZ.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"clamp","kind":"import-statement","external":true},{"path":"lodash.throttle","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["MpColorSaturation"],"inputs":{"src/saturation.tsx":{"bytesInOutput":4709}},"bytes":4814},"dist/modules/color-picker.hooks.mjs":{"imports":[{"path":"dist/chunk-KHGAEPYZ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useColorPicker"],"entryPoint":"src/modules/color-picker.hooks.ts","inputs":{},"bytes":119},"dist/chunk-KHGAEPYZ.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true}],"exports":["useColorPicker"],"inputs":{"src/modules/color-picker.hooks.ts":{"bytesInOutput":8567}},"bytes":8684},"dist/modules/color-picker.props.mjs":{"imports":[{"path":"dist/chunk-L5BRB7ES.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["colorPickerEmit","colorPickerProps"],"entryPoint":"src/modules/color-picker.props.ts","inputs":{},"bytes":161},"dist/chunk-L5BRB7ES.mjs":{"imports":[],"exports":["colorPickerEmit","colorPickerProps"],"inputs":{"src/modules/color-picker.props.ts":{"bytesInOutput":1074}},"bytes":1162},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}
+{"inputs":{"src/modules/color-picker.props.ts":{"bytes":2062,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"./color-picker.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/color-picker.hooks.ts":{"bytes":8472,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/saturation.tsx":{"bytes":4652,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"clamp","kind":"import-statement","external":true},{"path":"lodash.throttle","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/hue.tsx":{"bytes":5692,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"./modules/color-picker.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/input.tsx":{"bytes":2197,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/preset.tsx":{"bytes":1585,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/color-picker.tsx":{"bytes":4830,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-popover","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-divider","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"src/modules/color-picker.props.ts","kind":"import-statement","original":"./modules/color-picker.props"},{"path":"src/modules/color-picker.hooks.ts","kind":"import-statement","original":"./modules/color-picker.hooks"},{"path":"src/saturation.tsx","kind":"import-statement","original":"./saturation"},{"path":"src/hue.tsx","kind":"import-statement","original":"./hue"},{"path":"src/input.tsx","kind":"import-statement","original":"./input"},{"path":"src/preset.tsx","kind":"import-statement","original":"./preset"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/color-picker.types.ts":{"bytes":200,"imports":[],"format":"esm"},"src/index.ts":{"bytes":178,"imports":[{"path":"src/color-picker.tsx","kind":"import-statement","original":"./color-picker"},{"path":"src/modules/color-picker.types.ts","kind":"import-statement","original":"./modules/color-picker.types"}],"format":"esm"}},"outputs":{"dist/modules/color-picker.types.mjs":{"imports":[{"path":"dist/chunk-62SESCIE.mjs","kind":"import-statement"}],"exports":[],"entryPoint":"src/modules/color-picker.types.ts","inputs":{},"bytes":32},"dist/color-picker.mjs":{"imports":[{"path":"dist/chunk-NT4KAY3K.mjs","kind":"import-statement"},{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-MILYTHNM.mjs","kind":"import-statement"},{"path":"dist/chunk-5CI43L4Q.mjs","kind":"import-statement"},{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-5VPWEGKC.mjs","kind":"import-statement"},{"path":"dist/chunk-2ZZBAQKR.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorPicker"],"entryPoint":"src/color-picker.tsx","inputs":{},"bytes":301},"dist/hue.mjs":{"imports":[{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorHue"],"entryPoint":"src/hue.tsx","inputs":{},"bytes":109},"dist/index.mjs":{"imports":[{"path":"dist/chunk-62SESCIE.mjs","kind":"import-statement"},{"path":"dist/chunk-NT4KAY3K.mjs","kind":"import-statement"},{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-MILYTHNM.mjs","kind":"import-statement"},{"path":"dist/chunk-5CI43L4Q.mjs","kind":"import-statement"},{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-5VPWEGKC.mjs","kind":"import-statement"},{"path":"dist/chunk-2ZZBAQKR.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorPicker"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":332},"dist/chunk-62SESCIE.mjs":{"imports":[],"exports":[],"inputs":{"src/modules/color-picker.types.ts":{"bytesInOutput":0}},"bytes":0},"dist/chunk-NT4KAY3K.mjs":{"imports":[{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-MILYTHNM.mjs","kind":"import-statement"},{"path":"dist/chunk-5CI43L4Q.mjs","kind":"import-statement"},{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-5VPWEGKC.mjs","kind":"import-statement"},{"path":"dist/chunk-2ZZBAQKR.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-popover","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-divider","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["MpColorPicker"],"inputs":{"src/color-picker.tsx":{"bytesInOutput":4454}},"bytes":4897},"dist/chunk-PULVLME3.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["MpColorHue"],"inputs":{"src/hue.tsx":{"bytesInOutput":6037}},"bytes":6128},"dist/input.mjs":{"imports":[{"path":"dist/chunk-MILYTHNM.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorInput"],"entryPoint":"src/input.tsx","inputs":{},"bytes":113},"dist/chunk-MILYTHNM.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["MpColorInput"],"inputs":{"src/input.tsx":{"bytesInOutput":1949}},"bytes":2044},"dist/preset.mjs":{"imports":[{"path":"dist/chunk-5CI43L4Q.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorPreset"],"entryPoint":"src/preset.tsx","inputs":{},"bytes":115},"dist/chunk-5CI43L4Q.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["MpColorPreset"],"inputs":{"src/preset.tsx":{"bytesInOutput":1513}},"bytes":1610},"dist/saturation.mjs":{"imports":[{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorSaturation"],"entryPoint":"src/saturation.tsx","inputs":{},"bytes":123},"dist/chunk-AEUPCATZ.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"clamp","kind":"import-statement","external":true},{"path":"lodash.throttle","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["MpColorSaturation"],"inputs":{"src/saturation.tsx":{"bytesInOutput":4709}},"bytes":4814},"dist/modules/color-picker.hooks.mjs":{"imports":[{"path":"dist/chunk-5VPWEGKC.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useColorPicker"],"entryPoint":"src/modules/color-picker.hooks.ts","inputs":{},"bytes":119},"dist/chunk-5VPWEGKC.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"tinycolor2","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useColorPicker"],"inputs":{"src/modules/color-picker.hooks.ts":{"bytesInOutput":8121}},"bytes":8238},"dist/modules/color-picker.props.mjs":{"imports":[{"path":"dist/chunk-2ZZBAQKR.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["colorPickerEmit","colorPickerProps"],"entryPoint":"src/modules/color-picker.props.ts","inputs":{},"bytes":161},"dist/chunk-2ZZBAQKR.mjs":{"imports":[],"exports":["colorPickerEmit","colorPickerProps"],"inputs":{"src/modules/color-picker.props.ts":{"bytesInOutput":1139}},"bytes":1227},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

package/dist/modules/color-picker.hooks.d.mts

@@ -1,5 +1,6 @@
 import * as vue from 'vue';
 import { ColorPickerProps, ColorPickerEmit, Placement } from './color-picker.props.mjs';
+import './color-picker.types.mjs';
 
 declare function useColorPicker(props: ColorPickerProps, emit: ColorPickerEmit): {
     rootAttrs: vue.ComputedRef<{
@@ -12,15 +13,15 @@ declare function useColorPicker(props: ColorPickerProps, emit: ColorPickerEmit):
         placement: Placement;
         defaultIsOpen: boolean;
         initialFocusRef: string;
+        isManual: boolean;
         onOpen: () => void;
         onClose: () => void;
     }>;
     popoverTriggerAttrs: vue.ComputedRef<{
+        'data-invalid': true | undefined;
+        'data-disabled': true | undefined;
         tabindex: string;
         class: string;
-        style: {
-            borderColor: string;
-        };
     }>;
     boxColorAttrs: vue.ComputedRef<{
         class: string;
@@ -36,6 +37,8 @@ declare function useColorPicker(props: ColorPickerProps, emit: ColorPickerEmit):
         maxlength: string;
         value: string;
         placeholder: string;
+        isDisabled: boolean;
+        isInvalid: boolean;
         class: string;
         onInput: (e: Event) => void;
     }>;

package/dist/modules/color-picker.hooks.d.ts

@@ -1,5 +1,6 @@
 import * as vue from 'vue';
 import { ColorPickerProps, ColorPickerEmit, Placement } from './color-picker.props.js';
+import './color-picker.types.js';
 
 declare function useColorPicker(props: ColorPickerProps, emit: ColorPickerEmit): {
     rootAttrs: vue.ComputedRef<{
@@ -12,15 +13,15 @@ declare function useColorPicker(props: ColorPickerProps, emit: ColorPickerEmit):
         placement: Placement;
         defaultIsOpen: boolean;
         initialFocusRef: string;
+        isManual: boolean;
         onOpen: () => void;
         onClose: () => void;
     }>;
     popoverTriggerAttrs: vue.ComputedRef<{
+        'data-invalid': true | undefined;
+        'data-disabled': true | undefined;
         tabindex: string;
         class: string;
-        style: {
-            borderColor: string;
-        };
     }>;
     boxColorAttrs: vue.ComputedRef<{
         class: string;
@@ -36,6 +37,8 @@ declare function useColorPicker(props: ColorPickerProps, emit: ColorPickerEmit):
         maxlength: string;
         value: string;
         placeholder: string;
+        isDisabled: boolean;
+        isInvalid: boolean;
         class: string;
         onInput: (e: Event) => void;
     }>;