@youcan/celeste 0.6.28 → 0.6.29

package/dist/cjs/color-picker.js

@@ -1,514 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const useDelegatedProps = require("./use-delegated-props.js");
-const color = require("./color.js");
-const index = require("./chunks/index.js");
-const useColorModel = require("./chunks/use-color-model.js");
-const button = require("./button.js");
-require("./compact-button.js");
-;/* empty css                                                                     */
-;/* empty css                                                                    */
-;/* empty css                                                                      */
-const popoverContent = require("./popover-content.js");
-const popoverTrigger = require("./popover-trigger.js");
-const popover_vue_vue_type_script_setup_true_lang = require("./chunks/popover.js");
-const selectContent = require("./select-content.js");
-;/* empty css                                                                    */
-const selectItem = require("./select-item.js");
-;/* empty css                                                                     */
-;/* empty css                                                                         */
-const selectTrigger = require("./select-trigger.js");
-const selectValue = require("./select-value.js");
-const select_vue_vue_type_script_setup_true_lang = require("./chunks/select.js");
-;/* empty css                                                                         */
-require("./text-input-button.js");
-const textInput = require("./text-input.js");
-const alphaSlider_vue_vue_type_script_setup_true_lang = require("./chunks/alpha-slider.js");
-const colorArea = require("./color-area.js");
-const colorSwatch = require("./color-swatch.js");
-const hueSlider = require("./hue-slider.js");
-const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _hoisted_1 = { class: "celeste-color-picker" };
-const _hoisted_2 = { class: "celeste-color-control-panel" };
-const _hoisted_3 = { class: "celeste-color-format" };
-const _hoisted_4 = { class: "celeste-color-controls" };
-const _hoisted_5 = { class: "celeste-color-format-inputs" };
-const _hoisted_6 = { class: "celeste-color-swatches" };
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "color-picker",
-  props: {
-    modelValue: { default: "hsl(240, 100%, 50%)" },
-    label: { default: "Pick Color" },
-    class: {},
-    formats: { default: () => ["hex", "rgb", "hsl", "hsb"] },
-    defaultFormat: {}
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    Mo.useCssVars((_ctx) => ({
-      "88e786d6": _ctx.modelValue
-    }));
-    const props = __props;
-    const emit = __emit;
-    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
-    const forwarded = index.xe(delegatedProps, emit);
-    const tinyColorRef = useColorModel.defineColorModel(props, emit);
-    const hueRef = Mo.ref(tinyColorRef.value.toHsl().h);
-    const currentColorFormat = Mo.ref(props.defaultFormat || "hex");
-    const eyeDropper = Mo.ref(null);
-    const hex = Mo.computed({
-      get: () => tinyColorRef.value.toHexString().toUpperCase(),
-      set: () => {
-      }
-    });
-    const rgb = Mo.computed(() => {
-      return tinyColorRef.value.toRgb();
-    });
-    const hsl = Mo.computed(() => {
-      const { h, s, l } = tinyColorRef.value.toHsl();
-      return {
-        h: `${h.toFixed()}°`,
-        s: `${(s * 100).toFixed()}%`,
-        l: `${(l * 100).toFixed()}%`,
-        a: tinyColorRef.value.getAlpha()
-      };
-    });
-    const hsv = Mo.computed(() => {
-      const { h, s, v } = tinyColorRef.value.toHsv();
-      return {
-        h: `${h.toFixed()}°`,
-        s: `${(s * 100).toFixed()}%`,
-        v: `${(v * 100).toFixed()}%`
-      };
-    });
-    Mo.watch(tinyColorRef, (tinyColorInstance) => {
-      const newHue = tinyColorInstance.toHsl().h;
-      const saturation = tinyColorInstance.toHsl().s;
-      if (saturation === 0 && hueRef.value !== 0) {
-        return;
-      }
-      hueRef.value = newHue;
-    }, { immediate: true });
-    if (window.EyeDropper) {
-      eyeDropper.value = new window.EyeDropper();
-    }
-    function sipColor() {
-      if (!eyeDropper.value) {
-        return;
-      }
-      eyeDropper.value.open().then((result) => {
-        const newColor = useColorModel.tinycolor(result.sRGBHex);
-        tinyColorRef.value = newColor;
-      }).catch((e) => {
-      });
-    }
-    function getCurrentColorValue(key) {
-      let currentValue = 0;
-      if (key === "r" || key === "g" || key === "b") {
-        currentValue = rgb.value[key];
-      } else if (key === "h") {
-        currentValue = tinyColorRef.value.toHsl().h;
-      } else if (key === "s" || key === "l" || key === "v") {
-        if (currentColorFormat.value === "hsl") {
-          const currentHsl = tinyColorRef.value.toHsl();
-          currentValue = key === "s" ? currentHsl.s * 100 : currentHsl.l * 100;
-        } else {
-          const currentHsv = tinyColorRef.value.toHsv();
-          currentValue = key === "s" ? currentHsv.s * 100 : currentHsv.v * 100;
-        }
-      } else if (key === "a") {
-        currentValue = tinyColorRef.value.getAlpha() * 100;
-      }
-      return currentValue;
-    }
-    function validateInput(event) {
-      const input = event.target;
-      const inputEvent = event;
-      const newValue = color.truncColorValue(input.value) + (inputEvent.data ?? "");
-      if (!color.COLOR_NUMBER_VALIDATION_PATTERN.test(newValue)) {
-        event.preventDefault();
-      }
-    }
-    function validateHexInput(event) {
-      const input = event.target;
-      const inputEvent = event;
-      const newValue = input.value + (inputEvent.data ?? "");
-      if (!color.HEX_VALIDATION_PATTERN.test(newValue)) {
-        event.preventDefault();
-      }
-    }
-    function inputChangeHex(event) {
-      var _a;
-      const colorInput = (_a = event.target) == null ? void 0 : _a.value;
-      if (!colorInput) {
-        return;
-      }
-      tinyColorRef.value = useColorModel.tinycolor(colorInput);
-    }
-    function inputChangeRGB(event, key) {
-      var _a;
-      const value = Number((_a = event.target) == null ? void 0 : _a.value);
-      const currentRgb = rgb.value;
-      const newRgb = { ...currentRgb, [key]: value };
-      tinyColorRef.value = useColorModel.tinycolor(newRgb);
-    }
-    function inputChangeHSL(event, key) {
-      var _a;
-      const HSLInput = (_a = event.target) == null ? void 0 : _a.value;
-      let newHSLValue = color.truncColorValue(HSLInput);
-      if (key === "s" || key === "l") {
-        newHSLValue /= 100;
-      }
-      if (Number.isNaN(newHSLValue)) {
-        return;
-      }
-      const newHSL = { [key]: newHSLValue };
-      tinyColorRef.value = {
-        ...tinyColorRef.value.toHsl(),
-        ...newHSL
-      };
-    }
-    function inputChangeHSB(event, key) {
-      var _a;
-      const HSBInput = (_a = event.target) == null ? void 0 : _a.value;
-      const HSBValue = color.truncColorValue(HSBInput);
-      if (Number.isNaN(HSBValue)) {
-        return;
-      }
-      const newHSB = { [key]: HSBValue };
-      tinyColorRef.value = {
-        ...tinyColorRef.value.toHsv(),
-        ...newHSB
-      };
-    }
-    function inputChangeAlpha(event) {
-      var _a;
-      const alphaInput = (_a = event.target) == null ? void 0 : _a.value;
-      const alphaValue = color.truncColorValue(alphaInput) / 100;
-      if (Number.isNaN(alphaValue)) {
-        return;
-      }
-      tinyColorRef.value = tinyColorRef.value.setAlpha(Math.max(0, Math.min(1, alphaValue)));
-    }
-    function handleColorValueKeyDown(event, key) {
-      const direction = color.resolveArrowDirection(event);
-      const currentValue = getCurrentColorValue(key);
-      const { min, max } = color.getColorConstraints(key);
-      const newValue = color.clamp(color.bumpColorValue(currentValue, direction), min, max);
-      if (key === "r" || key === "g" || key === "b") {
-        const newColor = useColorModel.tinycolor({ ...rgb.value, [key]: newValue });
-        emit("update:modelValue", newColor.toString());
-      } else if (key === "h") {
-        if (currentColorFormat.value === "hsl") {
-          const newColor = useColorModel.tinycolor({ ...tinyColorRef.value.toHsl(), h: newValue });
-          emit("update:modelValue", newColor.toString());
-        } else {
-          const newColor = useColorModel.tinycolor({ ...tinyColorRef.value.toHsv(), h: newValue });
-          emit("update:modelValue", newColor.toString());
-        }
-      } else if (key === "s" || key === "l" || key === "v") {
-        if (currentColorFormat.value === "hsl") {
-          const newColor = useColorModel.tinycolor({ ...tinyColorRef.value.toHsl(), [key]: newValue / 100 });
-          emit("update:modelValue", newColor.toString());
-        } else {
-          const currentHsv = tinyColorRef.value.toHsv();
-          const newColor = useColorModel.tinycolor({ ...currentHsv, [key]: newValue / 100 });
-          emit("update:modelValue", newColor.toString());
-        }
-      } else if (key === "a") {
-        const newColor = tinyColorRef.value.setAlpha(newValue / 100);
-        emit("update:modelValue", newColor.toString());
-      }
-    }
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(Mo.unref(popover_vue_vue_type_script_setup_true_lang._sfc_main), null, {
-        default: Mo.withCtx(() => [
-          Mo.createVNode(Mo.unref(popoverTrigger), null, {
-            default: Mo.withCtx(() => [
-              Mo.createVNode(Mo.unref(button), {
-                class: "celeste-picker-trigger",
-                intent: "neutral",
-                variant: "stroke"
-              }, {
-                default: Mo.withCtx(() => [
-                  _cache[53] || (_cache[53] = Mo.createElementVNode("span", { class: "celeste-selected-color" }, null, -1)),
-                  Mo.createTextVNode(" " + Mo.toDisplayString(_ctx.label), 1)
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          Mo.createVNode(Mo.unref(popoverContent), { dismissible: false }, {
-            default: Mo.withCtx(() => [
-              Mo.createElementVNode("div", Mo.mergeProps({ class: "celeste-color-picker-wrapper" }, Mo.unref(forwarded)), [
-                Mo.createElementVNode("div", _hoisted_1, [
-                  Mo.createVNode(Mo.unref(colorArea), {
-                    modelValue: Mo.unref(tinyColorRef),
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => Mo.isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
-                    hue: hueRef.value
-                  }, null, 8, ["modelValue", "hue"]),
-                  Mo.createVNode(Mo.unref(hueSlider), {
-                    modelValue: hueRef.value,
-                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hueRef.value = $event)
-                  }, null, 8, ["modelValue"]),
-                  Mo.createVNode(alphaSlider_vue_vue_type_script_setup_true_lang._sfc_main, {
-                    modelValue: Mo.unref(tinyColorRef),
-                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => Mo.isRef(tinyColorRef) ? tinyColorRef.value = $event : null)
-                  }, null, 8, ["modelValue"]),
-                  Mo.createElementVNode("div", _hoisted_2, [
-                    Mo.createVNode(Mo.unref(select_vue_vue_type_script_setup_true_lang._sfc_main), {
-                      modelValue: currentColorFormat.value,
-                      "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => currentColorFormat.value = $event),
-                      name: "color-format"
-                    }, {
-                      default: Mo.withCtx(() => [
-                        Mo.createVNode(Mo.unref(selectTrigger), { variant: "inline" }, {
-                          default: Mo.withCtx(() => [
-                            Mo.createVNode(Mo.unref(selectValue), {
-                              placeholder: "HEX",
-                              class: "celeste-selected-color-format"
-                            }, {
-                              default: Mo.withCtx(() => [
-                                Mo.createTextVNode(Mo.toDisplayString(currentColorFormat.value), 1)
-                              ]),
-                              _: 1
-                            })
-                          ]),
-                          _: 1
-                        }),
-                        Mo.createVNode(Mo.unref(selectContent), { width: "fit" }, {
-                          default: Mo.withCtx(() => [
-                            (Mo.openBlock(true), Mo.createElementBlock(Mo.Fragment, null, Mo.renderList(props.formats, (format) => {
-                              return Mo.openBlock(), Mo.createBlock(Mo.unref(selectItem), {
-                                key: format,
-                                value: format
-                              }, {
-                                default: Mo.withCtx(() => [
-                                  Mo.createElementVNode("span", _hoisted_3, Mo.toDisplayString(format), 1)
-                                ]),
-                                _: 2
-                              }, 1032, ["value"]);
-                            }), 128))
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["modelValue"]),
-                    Mo.createElementVNode("div", _hoisted_4, [
-                      eyeDropper.value ? (Mo.openBlock(), Mo.createBlock(Mo.unref(button), {
-                        key: 0,
-                        class: "celeste-color-sip",
-                        variant: "stroke",
-                        size: "xxs",
-                        intent: "neutral",
-                        onClick: sipColor
-                      }, {
-                        default: Mo.withCtx(() => _cache[54] || (_cache[54] = [
-                          Mo.createElementVNode("i", { class: "i-celeste-sip-line" }, null, -1)
-                        ])),
-                        _: 1
-                      })) : Mo.createCommentVNode("", true),
-                      Mo.createElementVNode("div", _hoisted_5, [
-                        currentColorFormat.value === "hex" ? (Mo.openBlock(), Mo.createBlock(Mo.unref(textInput), {
-                          key: 0,
-                          modelValue: hex.value,
-                          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => hex.value = $event),
-                          autocomplete: "off",
-                          name: "hex",
-                          placeholder: "#FFFFFF",
-                          type: "text",
-                          class: "color-input",
-                          size: "xs",
-                          onBeforeinput: validateHexInput,
-                          onFocusout: inputChangeHex,
-                          onKeydown: Mo.withKeys(Mo.withModifiers(inputChangeHex, ["prevent"]), ["enter"])
-                        }, null, 8, ["modelValue", "onKeydown"])) : currentColorFormat.value === "rgb" ? (Mo.openBlock(), Mo.createElementBlock(Mo.Fragment, { key: 1 }, [
-                          Mo.createVNode(Mo.unref(textInput), {
-                            modelValue: rgb.value.r,
-                            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => rgb.value.r = $event),
-                            autocomplete: "off",
-                            name: "red",
-                            type: "text",
-                            class: "color-input",
-                            size: "xs",
-                            onBeforeinput: validateInput,
-                            onFocusout: _cache[6] || (_cache[6] = (e) => inputChangeRGB(e, "r")),
-                            onKeydown: [
-                              _cache[7] || (_cache[7] = Mo.withKeys(Mo.withModifiers((e) => inputChangeRGB(e, "r"), ["prevent"]), ["enter"])),
-                              _cache[8] || (_cache[8] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "r"), ["prevent", "stop"]), ["up"])),
-                              _cache[9] || (_cache[9] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "r"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          Mo.createVNode(Mo.unref(textInput), {
-                            modelValue: rgb.value.g,
-                            "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => rgb.value.g = $event),
-                            autocomplete: "off",
-                            name: "green",
-                            type: "text",
-                            class: "color-input",
-                            size: "xs",
-                            onBeforeinput: validateInput,
-                            onFocusout: _cache[11] || (_cache[11] = (e) => inputChangeRGB(e, "g")),
-                            onKeydown: [
-                              _cache[12] || (_cache[12] = Mo.withKeys(Mo.withModifiers((e) => inputChangeRGB(e, "g"), ["prevent"]), ["enter"])),
-                              _cache[13] || (_cache[13] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "g"), ["prevent", "stop"]), ["up"])),
-                              _cache[14] || (_cache[14] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "g"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          Mo.createVNode(Mo.unref(textInput), {
-                            modelValue: rgb.value.b,
-                            "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => rgb.value.b = $event),
-                            autocomplete: "off",
-                            name: "blue",
-                            type: "text",
-                            class: "color-input",
-                            size: "xs",
-                            onBeforeinput: validateInput,
-                            onFocusout: _cache[16] || (_cache[16] = (e) => inputChangeRGB(e, "b")),
-                            onKeydown: [
-                              _cache[17] || (_cache[17] = Mo.withKeys(Mo.withModifiers((e) => inputChangeRGB(e, "b"), ["prevent"]), ["enter"])),
-                              _cache[18] || (_cache[18] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "b"), ["prevent", "stop"]), ["up"])),
-                              _cache[19] || (_cache[19] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "b"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"])
-                        ], 64)) : currentColorFormat.value === "hsl" ? (Mo.openBlock(), Mo.createElementBlock(Mo.Fragment, { key: 2 }, [
-                          Mo.createVNode(Mo.unref(textInput), {
-                            modelValue: hsl.value.h,
-                            "onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => hsl.value.h = $event),
-                            autocomplete: "off",
-                            name: "hue",
-                            type: "text",
-                            class: "color-input",
-                            size: "xs",
-                            onBeforeinput: validateInput,
-                            onFocusout: _cache[21] || (_cache[21] = (e) => inputChangeHSL(e, "h")),
-                            onKeydown: [
-                              _cache[22] || (_cache[22] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSL(e, "h"), ["prevent"]), ["enter"])),
-                              _cache[23] || (_cache[23] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["up"])),
-                              _cache[24] || (_cache[24] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          Mo.createVNode(Mo.unref(textInput), {
-                            modelValue: hsl.value.s,
-                            "onUpdate:modelValue": _cache[25] || (_cache[25] = ($event) => hsl.value.s = $event),
-                            autocomplete: "off",
-                            name: "saturation",
-                            type: "text",
-                            class: "color-input",
-                            size: "xs",
-                            onBeforeinput: validateInput,
-                            onFocusout: _cache[26] || (_cache[26] = (e) => inputChangeHSL(e, "s")),
-                            onKeydown: [
-                              _cache[27] || (_cache[27] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSL(e, "s"), ["prevent"]), ["enter"])),
-                              _cache[28] || (_cache[28] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["up"])),
-                              _cache[29] || (_cache[29] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          Mo.createVNode(Mo.unref(textInput), {
-                            modelValue: hsl.value.l,
-                            "onUpdate:modelValue": _cache[30] || (_cache[30] = ($event) => hsl.value.l = $event),
-                            autocomplete: "off",
-                            name: "lightness",
-                            type: "text",
-                            class: "color-input",
-                            size: "xs",
-                            onBeforeinput: validateInput,
-                            onFocusout: _cache[31] || (_cache[31] = (e) => inputChangeHSL(e, "l")),
-                            onKeydown: [
-                              _cache[32] || (_cache[32] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSL(e, "l"), ["prevent"]), ["enter"])),
-                              _cache[33] || (_cache[33] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "l"), ["prevent", "stop"]), ["up"])),
-                              _cache[34] || (_cache[34] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "l"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"])
-                        ], 64)) : currentColorFormat.value === "hsb" ? (Mo.openBlock(), Mo.createElementBlock(Mo.Fragment, { key: 3 }, [
-                          Mo.createVNode(Mo.unref(textInput), {
-                            modelValue: hsv.value.h,
-                            "onUpdate:modelValue": _cache[35] || (_cache[35] = ($event) => hsv.value.h = $event),
-                            autocomplete: "off",
-                            name: "hue",
-                            type: "text",
-                            class: "color-input",
-                            size: "xs",
-                            onBeforeinput: validateInput,
-                            onFocusout: _cache[36] || (_cache[36] = (e) => inputChangeHSB(e, "h")),
-                            onKeydown: [
-                              _cache[37] || (_cache[37] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSB(e, "h"), ["prevent"]), ["enter"])),
-                              _cache[38] || (_cache[38] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["up"])),
-                              _cache[39] || (_cache[39] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          Mo.createVNode(Mo.unref(textInput), {
-                            modelValue: hsv.value.s,
-                            "onUpdate:modelValue": _cache[40] || (_cache[40] = ($event) => hsv.value.s = $event),
-                            autocomplete: "off",
-                            name: "saturation",
-                            type: "text",
-                            class: "color-input",
-                            size: "xs",
-                            onBeforeinput: validateInput,
-                            onFocusout: _cache[41] || (_cache[41] = (e) => inputChangeHSB(e, "s")),
-                            onKeydown: [
-                              _cache[42] || (_cache[42] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSB(e, "s"), ["prevent"]), ["enter"])),
-                              _cache[43] || (_cache[43] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["up"])),
-                              _cache[44] || (_cache[44] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          Mo.createVNode(Mo.unref(textInput), {
-                            modelValue: hsv.value.v,
-                            "onUpdate:modelValue": _cache[45] || (_cache[45] = ($event) => hsv.value.v = $event),
-                            autocomplete: "off",
-                            name: "brightness",
-                            type: "text",
-                            class: "color-input",
-                            size: "xs",
-                            onBeforeinput: validateInput,
-                            onFocusout: _cache[46] || (_cache[46] = (e) => inputChangeHSB(e, "v")),
-                            onKeydown: [
-                              _cache[47] || (_cache[47] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSB(e, "v"), ["prevent"]), ["enter"])),
-                              _cache[48] || (_cache[48] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "v"), ["prevent", "stop"]), ["up"])),
-                              _cache[49] || (_cache[49] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "v"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"])
-                        ], 64)) : Mo.createCommentVNode("", true),
-                        Mo.createVNode(Mo.unref(textInput), {
-                          autocomplete: "off",
-                          name: "alpha",
-                          placeholder: "100",
-                          type: "text",
-                          class: "color-input",
-                          size: "xs",
-                          value: `${(Mo.unref(tinyColorRef).getAlpha() * 100).toFixed()}%`,
-                          onBeforeinput: validateInput,
-                          onFocusout: inputChangeAlpha,
-                          onKeydown: [
-                            Mo.withKeys(Mo.withModifiers(inputChangeAlpha, ["prevent", "stop"]), ["enter"]),
-                            _cache[50] || (_cache[50] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "a"), ["prevent", "stop"]), ["up"])),
-                            _cache[51] || (_cache[51] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "a"), ["prevent", "stop"]), ["down"]))
-                          ]
-                        }, null, 8, ["value", "onKeydown"])
-                      ])
-                    ])
-                  ])
-                ]),
-                Mo.createElementVNode("div", _hoisted_6, [
-                  _ctx.$slots.swatches ? Mo.renderSlot(_ctx.$slots, "swatches", { key: 0 }, void 0, true) : (Mo.openBlock(), Mo.createBlock(colorSwatch, {
-                    key: 1,
-                    modelValue: Mo.unref(tinyColorRef),
-                    "onUpdate:modelValue": _cache[52] || (_cache[52] = ($event) => Mo.isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
-                    hue: hueRef.value
-                  }, null, 8, ["modelValue", "hue"]))
-                ])
-              ], 16)
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-const colorPicker = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-5d801c64"]]);
-module.exports = colorPicker;

package/dist/cjs/color-swatch.js

@@ -1,59 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const color = require("./color.js");
-const useColorModel = require("./chunks/use-color-model.js");
-const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _hoisted_1 = { class: "celeste-color-swatch" };
-const _hoisted_2 = { class: "swatch-label" };
-const _hoisted_3 = { class: "color-palette" };
-const _hoisted_4 = ["aria-selected", "title", "aria-label", "onClick", "onKeydown"];
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "color-swatch",
-  props: {
-    modelValue: {},
-    label: { default: "Recommended Colors" },
-    swatch: { default: () => color.DEFAULT_SWATCH },
-    defaultColor: {}
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    Mo.useCssVars((_ctx) => ({
-      "0829b6e2": activeSwatchColorBg.value
-    }));
-    const props = __props;
-    const emit = __emit;
-    const tinyColorRef = useColorModel.defineColorModel(props, emit);
-    const activeSwatchColorBg = Mo.computed(() => {
-      return `0 0 0 2px var(--color-bg-white-0), 0 0 0 4px ${tinyColorRef.value.toRgbString()}`;
-    });
-    function handleSwatchColorClick(newColor) {
-      tinyColorRef.value = useColorModel.tinycolor(newColor);
-    }
-    function isSwatchColorSelected(color2) {
-      return tinyColorRef.value.toHex8String().toLocaleLowerCase() === useColorModel.tinycolor(color2).toHex8String().toLocaleLowerCase();
-    }
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createElementBlock("div", _hoisted_1, [
-        Mo.createElementVNode("span", _hoisted_2, Mo.toDisplayString(_ctx.label), 1),
-        Mo.createElementVNode("div", _hoisted_3, [
-          (Mo.openBlock(true), Mo.createElementBlock(Mo.Fragment, null, Mo.renderList(_ctx.swatch, (swatchColor) => {
-            return Mo.openBlock(), Mo.createElementBlock("div", {
-              key: swatchColor,
-              class: "palette-color",
-              style: Mo.normalizeStyle({ background: swatchColor }),
-              "aria-selected": isSwatchColorSelected(swatchColor.toLowerCase()),
-              title: swatchColor,
-              "aria-label": `Color:${swatchColor}`,
-              role: "option",
-              tabindex: "0",
-              onClick: ($event) => handleSwatchColorClick(swatchColor),
-              onKeydown: Mo.withKeys(($event) => handleSwatchColorClick(swatchColor), ["space"])
-            }, null, 44, _hoisted_4);
-          }), 128))
-        ])
-      ]);
-    };
-  }
-});
-const ColorSwatch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-095c22f0"]]);
-module.exports = ColorSwatch;

package/dist/cjs/color.js

@@ -1,102 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const COLOR_NUMBER_VALIDATION_PATTERN = /^\d*\s?[%°]?$/;
-const HEX_VALIDATION_PATTERN = /^#?[0-9a-f]{0,6}$/i;
-const DEFAULT_SWATCH = [
-  "#717784ff",
-  "#335cffff",
-  "#ff8547ff",
-  "#fb3747ff",
-  "#1fc16bff",
-  "#f6b51eff",
-  "#7e52f4ff",
-  "#47c2ffff"
-];
-function getFractionDigit(data) {
-  const str = data.toString();
-  if (str.includes(".")) {
-    return str.split(".")[1].length;
-  }
-  return 0;
-}
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-function truncColorValue(value) {
-  return Math.trunc(Number(value.replace(/[%°]/g, "").trim()));
-}
-function getColorConstraints(key) {
-  const min = 0;
-  let max = 0;
-  if (key === "r" || key === "g" || key === "b") {
-    max = 255;
-  }
-  if (key === "h") {
-    max = 359;
-  }
-  if (["s", "l", "v", "a"].includes(key)) {
-    max = 100;
-  }
-  return {
-    min,
-    max
-  };
-}
-function bumpColorValue(value, direction) {
-  let multiplier = 0;
-  switch (direction) {
-    case "down":
-      multiplier = -1;
-      break;
-    case "up":
-      multiplier = 1;
-      break;
-  }
-  return value + multiplier;
-}
-function getPageXYFromEvent(e) {
-  const coordinates = { x: 0, y: 0 };
-  if (e instanceof MouseEvent) {
-    coordinates.x = e.pageX;
-    coordinates.y = e.pageY;
-  }
-  if (typeof TouchEvent !== "undefined" && e instanceof TouchEvent) {
-    coordinates.x = e.touches ? e.touches[0].pageX : e.changedTouches ? e.changedTouches[0].pageX : 0;
-    coordinates.y = e.touches ? e.touches[0].pageY : e.changedTouches ? e.changedTouches[0].pageY : 0;
-  }
-  return coordinates;
-}
-function getScrollXY() {
-  const x = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft || 0;
-  const y = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || 0;
-  return { x, y };
-}
-function getAbsolutePosition(container) {
-  const { x: scrollX, y: scrollY } = getScrollXY();
-  const rect = container.getBoundingClientRect();
-  return {
-    x: rect.left + scrollX,
-    y: rect.top + scrollY
-  };
-}
-function resolveArrowDirection(e) {
-  const arrowMap = {
-    ArrowUp: "up",
-    ArrowDown: "down",
-    ArrowLeft: "left",
-    ArrowRight: "right"
-  };
-  return arrowMap[e.code];
-}
-exports.COLOR_NUMBER_VALIDATION_PATTERN = COLOR_NUMBER_VALIDATION_PATTERN;
-exports.DEFAULT_SWATCH = DEFAULT_SWATCH;
-exports.HEX_VALIDATION_PATTERN = HEX_VALIDATION_PATTERN;
-exports.bumpColorValue = bumpColorValue;
-exports.clamp = clamp;
-exports.getAbsolutePosition = getAbsolutePosition;
-exports.getColorConstraints = getColorConstraints;
-exports.getFractionDigit = getFractionDigit;
-exports.getPageXYFromEvent = getPageXYFromEvent;
-exports.getScrollXY = getScrollXY;
-exports.resolveArrowDirection = resolveArrowDirection;
-exports.truncColorValue = truncColorValue;