@youcan/celeste 0.6.97 → 0.6.99

package/dist/cjs/color-picker.js

@@ -1,518 +0,0 @@
-"use strict";
-const No = require("vue");
-const index = require("./chunks/index.js");
-const tinycolor = require("./chunks/tinycolor.js");
-const useDelegatedProps = require("./use-delegated-props.js");
-const color = require("./color.js");
-const button = require("./button.js");
-;/* empty css                                                                       */
-;/* 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                                                                         */
-;/* empty css                                                                          */
-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 useColorModel = require("./use-color-model.js");
-;/* empty css                                                                     */
-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__ */ No.defineComponent({
-  __name: "color-picker",
-  props: {
-    modelValue: { default: "hsl(240, 100%, 50%)" },
-    label: { default: "Pick Color" },
-    class: {},
-    formats: { default: () => ["hex", "rgb", "hsl", "hsb"] },
-    defaultFormat: {},
-    colorSwatchLabel: { default: "Recommended Colors" }
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    No.useCssVars((_ctx) => ({
-      "637de6e6": _ctx.modelValue
-    }));
-    const props = __props;
-    const emit = __emit;
-    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
-    const forwarded = index.Se(delegatedProps, emit);
-    const tinyColorRef = useColorModel.defineColorModel(props, emit);
-    const hueRef = No.ref(tinyColorRef.value.toHsl().h);
-    const currentColorFormat = No.ref(props.defaultFormat || "hex");
-    const eyeDropper = No.ref(null);
-    const hex = No.computed({
-      get: () => tinyColorRef.value.toHexString().toUpperCase(),
-      set: () => {
-      }
-    });
-    const rgb = No.computed(() => {
-      return tinyColorRef.value.toRgb();
-    });
-    const hsl = No.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 = No.computed(() => {
-      const { h, s, v } = tinyColorRef.value.toHsv();
-      return {
-        h: `${h.toFixed()}°`,
-        s: `${(s * 100).toFixed()}%`,
-        v: `${(v * 100).toFixed()}%`
-      };
-    });
-    No.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 = tinycolor.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 = tinycolor.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 = tinycolor.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 = tinycolor.tinycolor({ ...rgb.value, [key]: newValue });
-        emit("update:modelValue", newColor.toString());
-      } else if (key === "h") {
-        if (currentColorFormat.value === "hsl") {
-          const newColor = tinycolor.tinycolor({ ...tinyColorRef.value.toHsl(), h: newValue });
-          emit("update:modelValue", newColor.toString());
-        } else {
-          const newColor = tinycolor.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 = tinycolor.tinycolor({ ...tinyColorRef.value.toHsl(), [key]: newValue / 100 });
-          emit("update:modelValue", newColor.toString());
-        } else {
-          const currentHsv = tinyColorRef.value.toHsv();
-          const newColor = tinycolor.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 No.openBlock(), No.createBlock(No.unref(popover_vue_vue_type_script_setup_true_lang._sfc_main), null, {
-        default: No.withCtx(() => [
-          No.createVNode(No.unref(popoverTrigger), null, {
-            default: No.withCtx(() => [
-              No.createVNode(No.unref(button), {
-                class: "celeste-picker-trigger",
-                intent: "neutral",
-                variant: "stroke"
-              }, {
-                default: No.withCtx(() => [
-                  _cache[53] || (_cache[53] = No.createElementVNode("span", { class: "celeste-selected-color" }, null, -1)),
-                  No.createTextVNode(" " + No.toDisplayString(_ctx.label), 1)
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          No.createVNode(No.unref(popoverContent), { dismissible: false }, {
-            default: No.withCtx(() => [
-              No.createElementVNode("div", No.mergeProps({ class: "celeste-color-picker-wrapper" }, No.unref(forwarded)), [
-                No.createElementVNode("div", _hoisted_1, [
-                  No.createVNode(No.unref(colorArea), {
-                    modelValue: No.unref(tinyColorRef),
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => No.isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
-                    hue: hueRef.value
-                  }, null, 8, ["modelValue", "hue"]),
-                  No.createVNode(No.unref(hueSlider), {
-                    modelValue: hueRef.value,
-                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hueRef.value = $event)
-                  }, null, 8, ["modelValue"]),
-                  No.createVNode(alphaSlider_vue_vue_type_script_setup_true_lang._sfc_main, {
-                    modelValue: No.unref(tinyColorRef),
-                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => No.isRef(tinyColorRef) ? tinyColorRef.value = $event : null)
-                  }, null, 8, ["modelValue"]),
-                  No.createElementVNode("div", _hoisted_2, [
-                    No.createVNode(No.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: No.withCtx(() => [
-                        No.createVNode(No.unref(selectTrigger), { variant: "inline" }, {
-                          default: No.withCtx(() => [
-                            No.createVNode(No.unref(selectValue), {
-                              placeholder: "HEX",
-                              class: "celeste-selected-color-format"
-                            }, {
-                              default: No.withCtx(() => [
-                                No.createTextVNode(No.toDisplayString(currentColorFormat.value), 1)
-                              ]),
-                              _: 1
-                            })
-                          ]),
-                          _: 1
-                        }),
-                        No.createVNode(No.unref(selectContent), { width: "fit" }, {
-                          default: No.withCtx(() => [
-                            (No.openBlock(true), No.createElementBlock(No.Fragment, null, No.renderList(props.formats, (format) => {
-                              return No.openBlock(), No.createBlock(No.unref(selectItem), {
-                                key: format,
-                                value: format
-                              }, {
-                                default: No.withCtx(() => [
-                                  No.createElementVNode("span", _hoisted_3, No.toDisplayString(format), 1)
-                                ]),
-                                _: 2
-                              }, 1032, ["value"]);
-                            }), 128))
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["modelValue"]),
-                    No.createElementVNode("div", _hoisted_4, [
-                      eyeDropper.value ? (No.openBlock(), No.createBlock(No.unref(button), {
-                        key: 0,
-                        class: "celeste-color-sip",
-                        variant: "stroke",
-                        size: "xxs",
-                        intent: "neutral",
-                        onClick: sipColor
-                      }, {
-                        default: No.withCtx(() => _cache[54] || (_cache[54] = [
-                          No.createElementVNode("i", { class: "i-celeste-sip-line" }, null, -1)
-                        ])),
-                        _: 1
-                      })) : No.createCommentVNode("", true),
-                      No.createElementVNode("div", _hoisted_5, [
-                        currentColorFormat.value === "hex" ? (No.openBlock(), No.createBlock(No.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: No.withKeys(No.withModifiers(inputChangeHex, ["prevent"]), ["enter"])
-                        }, null, 8, ["modelValue", "onKeydown"])) : currentColorFormat.value === "rgb" ? (No.openBlock(), No.createElementBlock(No.Fragment, { key: 1 }, [
-                          No.createVNode(No.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] = No.withKeys(No.withModifiers((e) => inputChangeRGB(e, "r"), ["prevent"]), ["enter"])),
-                              _cache[8] || (_cache[8] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "r"), ["prevent", "stop"]), ["up"])),
-                              _cache[9] || (_cache[9] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "r"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          No.createVNode(No.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] = No.withKeys(No.withModifiers((e) => inputChangeRGB(e, "g"), ["prevent"]), ["enter"])),
-                              _cache[13] || (_cache[13] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "g"), ["prevent", "stop"]), ["up"])),
-                              _cache[14] || (_cache[14] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "g"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          No.createVNode(No.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] = No.withKeys(No.withModifiers((e) => inputChangeRGB(e, "b"), ["prevent"]), ["enter"])),
-                              _cache[18] || (_cache[18] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "b"), ["prevent", "stop"]), ["up"])),
-                              _cache[19] || (_cache[19] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "b"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"])
-                        ], 64)) : currentColorFormat.value === "hsl" ? (No.openBlock(), No.createElementBlock(No.Fragment, { key: 2 }, [
-                          No.createVNode(No.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] = No.withKeys(No.withModifiers((e) => inputChangeHSL(e, "h"), ["prevent"]), ["enter"])),
-                              _cache[23] || (_cache[23] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["up"])),
-                              _cache[24] || (_cache[24] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          No.createVNode(No.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] = No.withKeys(No.withModifiers((e) => inputChangeHSL(e, "s"), ["prevent"]), ["enter"])),
-                              _cache[28] || (_cache[28] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["up"])),
-                              _cache[29] || (_cache[29] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          No.createVNode(No.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] = No.withKeys(No.withModifiers((e) => inputChangeHSL(e, "l"), ["prevent"]), ["enter"])),
-                              _cache[33] || (_cache[33] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "l"), ["prevent", "stop"]), ["up"])),
-                              _cache[34] || (_cache[34] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "l"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"])
-                        ], 64)) : currentColorFormat.value === "hsb" ? (No.openBlock(), No.createElementBlock(No.Fragment, { key: 3 }, [
-                          No.createVNode(No.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] = No.withKeys(No.withModifiers((e) => inputChangeHSB(e, "h"), ["prevent"]), ["enter"])),
-                              _cache[38] || (_cache[38] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["up"])),
-                              _cache[39] || (_cache[39] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          No.createVNode(No.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] = No.withKeys(No.withModifiers((e) => inputChangeHSB(e, "s"), ["prevent"]), ["enter"])),
-                              _cache[43] || (_cache[43] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["up"])),
-                              _cache[44] || (_cache[44] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          No.createVNode(No.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] = No.withKeys(No.withModifiers((e) => inputChangeHSB(e, "v"), ["prevent"]), ["enter"])),
-                              _cache[48] || (_cache[48] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "v"), ["prevent", "stop"]), ["up"])),
-                              _cache[49] || (_cache[49] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "v"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"])
-                        ], 64)) : No.createCommentVNode("", true),
-                        No.createVNode(No.unref(textInput), {
-                          autocomplete: "off",
-                          name: "alpha",
-                          placeholder: "100",
-                          type: "text",
-                          class: "color-input",
-                          size: "xs",
-                          value: `${(No.unref(tinyColorRef).getAlpha() * 100).toFixed()}%`,
-                          onBeforeinput: validateInput,
-                          onFocusout: inputChangeAlpha,
-                          onKeydown: [
-                            No.withKeys(No.withModifiers(inputChangeAlpha, ["prevent", "stop"]), ["enter"]),
-                            _cache[50] || (_cache[50] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "a"), ["prevent", "stop"]), ["up"])),
-                            _cache[51] || (_cache[51] = No.withKeys(No.withModifiers((e) => handleColorValueKeyDown(e, "a"), ["prevent", "stop"]), ["down"]))
-                          ]
-                        }, null, 8, ["value", "onKeydown"])
-                      ])
-                    ])
-                  ])
-                ]),
-                No.createElementVNode("div", _hoisted_6, [
-                  _ctx.$slots.swatches ? No.renderSlot(_ctx.$slots, "swatches", { key: 0 }, void 0, true) : (No.openBlock(), No.createBlock(colorSwatch, {
-                    key: 1,
-                    modelValue: No.unref(tinyColorRef),
-                    "onUpdate:modelValue": _cache[52] || (_cache[52] = ($event) => No.isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
-                    label: _ctx.colorSwatchLabel,
-                    hue: hueRef.value
-                  }, null, 8, ["modelValue", "label", "hue"]))
-                ])
-              ], 16)
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-const colorPicker = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-285bb26b"]]);
-module.exports = colorPicker;

package/dist/cjs/color-swatch.js

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