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

package/dist/index.mjs

@@ -0,0 +1,13 @@
+import {
+  MpColorPicker
+} from "./chunk-YLUI3RMF.mjs";
+import "./chunk-PULVLME3.mjs";
+import "./chunk-5FWKSVUW.mjs";
+import "./chunk-DVRBDVR4.mjs";
+import "./chunk-AEUPCATZ.mjs";
+import "./chunk-36OXI4E3.mjs";
+import "./chunk-L5BRB7ES.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpColorPicker
+};

package/dist/input.d.mts

@@ -0,0 +1,41 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const MpColorInput: vue.DefineComponent<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "change"[], "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    value: string | number;
+    label: string;
+}, {}>;
+
+export { MpColorInput };

package/dist/input.d.ts

@@ -0,0 +1,41 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const MpColorInput: vue.DefineComponent<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "change"[], "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    value: string | number;
+    label: string;
+}, {}>;
+
+export { MpColorInput };

package/dist/input.js

@@ -0,0 +1,110 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/input.tsx
+var input_exports = {};
+__export(input_exports, {
+  MpColorInput: () => MpColorInput
+});
+module.exports = __toCommonJS(input_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_pixel3_text = require("@mekari/pixel3-text");
+var import_pixel3_input = require("@mekari/pixel3-input");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var MpColorInput = (0, import_vue2.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_vue2.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_vue.createVNode)("div", {
+        "data-pixel-component": "MpColorPickerInput",
+        "class": (0, import_css.css)({
+          display: "flex",
+          flexDirection: "column",
+          gap: "1"
+        })
+      }, [(0, import_vue.createVNode)("div", null, [(0, import_vue.createVNode)(import_pixel3_text.MpText, {
+        "size": "label-small",
+        "class": (0, import_css.css)({
+          textTransform: "capitalize"
+        })
+      }, {
+        default: () => [props.label]
+      })]), (0, import_vue.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)]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpColorInput
+});

package/dist/input.mjs

@@ -0,0 +1,7 @@
+import {
+  MpColorInput
+} from "./chunk-5FWKSVUW.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpColorInput
+};

package/dist/metafile-cjs.json

@@ -0,0 +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":9339,"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":2196,"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":4530,"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":5065},"src/modules/color-picker.props.ts":{"bytesInOutput":1040},"src/modules/color-picker.hooks.ts":{"bytesInOutput":9666},"src/saturation.tsx":{"bytesInOutput":5060},"src/hue.tsx":{"bytesInOutput":6268},"src/input.tsx":{"bytesInOutput":2116},"src/preset.tsx":{"bytesInOutput":1489}},"bytes":32499},"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":4907},"src/modules/color-picker.props.ts":{"bytesInOutput":1040},"src/modules/color-picker.hooks.ts":{"bytesInOutput":9666},"src/saturation.tsx":{"bytesInOutput":5060},"src/hue.tsx":{"bytesInOutput":6268},"src/input.tsx":{"bytesInOutput":2116},"src/preset.tsx":{"bytesInOutput":1489}},"bytes":32489},"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":2243}},"bytes":3256},"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":9844}},"bytes":11476},"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}}}

package/dist/metafile-esm.json

@@ -0,0 +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":9339,"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":2196,"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":4530,"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-YLUI3RMF.mjs","kind":"import-statement"},{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-5FWKSVUW.mjs","kind":"import-statement"},{"path":"dist/chunk-DVRBDVR4.mjs","kind":"import-statement"},{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-36OXI4E3.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-YLUI3RMF.mjs","kind":"import-statement"},{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-5FWKSVUW.mjs","kind":"import-statement"},{"path":"dist/chunk-DVRBDVR4.mjs","kind":"import-statement"},{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-36OXI4E3.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-YLUI3RMF.mjs":{"imports":[{"path":"dist/chunk-PULVLME3.mjs","kind":"import-statement"},{"path":"dist/chunk-5FWKSVUW.mjs","kind":"import-statement"},{"path":"dist/chunk-DVRBDVR4.mjs","kind":"import-statement"},{"path":"dist/chunk-AEUPCATZ.mjs","kind":"import-statement"},{"path":"dist/chunk-36OXI4E3.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":4154}},"bytes":4597},"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-5FWKSVUW.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpColorInput"],"entryPoint":"src/input.tsx","inputs":{},"bytes":113},"dist/chunk-5FWKSVUW.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":1948}},"bytes":2043},"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-36OXI4E3.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-36OXI4E3.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":8653}},"bytes":8770},"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}}}

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

@@ -0,0 +1,206 @@
+import * as vue from 'vue';
+import { ColorPickerProps, ColorPickerEmit, Placement } from './color-picker.props.mjs';
+
+declare function useColorPicker(props: ColorPickerProps, emit: ColorPickerEmit): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        id: string | undefined;
+        class: string;
+        style: {
+            width: string;
+        };
+    }>;
+    popoverAttrs: vue.ComputedRef<{
+        id: string;
+        placement: Placement;
+        defaultIsOpen: boolean;
+        initialFocusRef: string;
+        onOpen: () => void;
+        onClose: () => void;
+    }>;
+    popoverTriggerAttrs: vue.ComputedRef<{
+        tabindex: string;
+        class: string;
+        style: {
+            borderColor: string;
+        };
+    }>;
+    boxColorAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            background: string;
+        };
+    }>;
+    inputTriggerAttrs: vue.ComputedRef<{
+        id: string;
+        type: string;
+        autocomplete: string;
+        variant: "unstyled";
+        maxlength: string;
+        value: string;
+        placeholder: string;
+        class: string;
+        onInput: (e: Event) => void;
+    }>;
+    iconDropDownAttrs: vue.ComputedRef<{
+        name: "chevrons-down";
+        size: "sm";
+        class: string;
+    }>;
+    popoverContentAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            width: string;
+        };
+    }>;
+    wrapperAdvanceAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    wrapperBasicAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    wrapperSaturationAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    saturationAttrs: vue.ComputedRef<{
+        value: {
+            hsl: {
+                h: number;
+                s: number;
+                l: number;
+                a: number;
+            };
+            hex: string;
+            hex8: string;
+            rgba: {
+                r: number;
+                g: number;
+                b: number;
+                a: number;
+            };
+            hsv: {
+                a: number;
+                h: number;
+                s: number;
+                v: number;
+            };
+            oldHue: any;
+            source: any;
+        };
+        onChange: (data: any) => void;
+    }>;
+    wrapperHueAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    hueAttrs: vue.ComputedRef<{
+        value: {
+            hsl: {
+                h: number;
+                s: number;
+                l: number;
+                a: number;
+            };
+            hex: string;
+            hex8: string;
+            rgba: {
+                r: number;
+                g: number;
+                b: number;
+                a: number;
+            };
+            hsv: {
+                a: number;
+                h: number;
+                s: number;
+                v: number;
+            };
+            oldHue: any;
+            source: any;
+        };
+        onChange: (data: any) => void;
+    }>;
+    wrapperInputAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    inputHexAttrs: vue.ComputedRef<{
+        label: string;
+        width: string;
+        value: string;
+        onChange: (data: {
+            hex?: string | undefined;
+            '#'?: string | undefined;
+            r?: string | undefined;
+            g?: string | undefined;
+            b?: string | undefined;
+            a?: string | undefined;
+        }) => void;
+    }>;
+    inputRedAttrs: vue.ComputedRef<{
+        label: string;
+        width: string;
+        value: number;
+        onChange: (data: {
+            hex?: string | undefined;
+            '#'?: string | undefined;
+            r?: string | undefined;
+            g?: string | undefined;
+            b?: string | undefined;
+            a?: string | undefined;
+        }) => void;
+    }>;
+    inputGreenAttrs: vue.ComputedRef<{
+        label: string;
+        width: string;
+        value: number;
+        onChange: (data: {
+            hex?: string | undefined;
+            '#'?: string | undefined;
+            r?: string | undefined;
+            g?: string | undefined;
+            b?: string | undefined;
+            a?: string | undefined;
+        }) => void;
+    }>;
+    inputBlueAttrs: vue.ComputedRef<{
+        label: string;
+        width: string;
+        value: number;
+        onChange: (data: {
+            hex?: string | undefined;
+            '#'?: string | undefined;
+            r?: string | undefined;
+            g?: string | undefined;
+            b?: string | undefined;
+            a?: string | undefined;
+        }) => void;
+    }>;
+    inputFullAttrs: vue.ComputedRef<{
+        label: string;
+        width: string;
+        value: string;
+        onChange: (data: {
+            hex?: string | undefined;
+            '#'?: string | undefined;
+            r?: string | undefined;
+            g?: string | undefined;
+            b?: string | undefined;
+            a?: string | undefined;
+        }) => void;
+    }>;
+    boxPresetAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    wrapperPresetAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    wrapperBasicPresetAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    presetBoxAttrs: (item: string) => {
+        value: string;
+        isActive: boolean;
+        onClick: (data: any) => void;
+    };
+};
+
+export { useColorPicker };