@youcan/celeste 0.6.3

package/dist/cjs/color-picker.js

@@ -0,0 +1,515 @@
+"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                                                                         */
+;/* 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 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) => ({
+      "207f2bae": _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", { "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-bc3d76fe"]]);
+module.exports = colorPicker;

package/dist/cjs/color-swatch.js

@@ -0,0 +1,59 @@
+"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;