@youcan/celeste 0.6.97 → 0.6.99

package/dist/es/color-picker.js

@@ -1,519 +1,2 @@
-import { defineComponent, useCssVars, ref, computed, watch, createBlock, openBlock, unref, withCtx, createVNode, createElementVNode, createTextVNode, toDisplayString, mergeProps, isRef, createElementBlock, Fragment, renderList, createCommentVNode, withKeys, withModifiers, renderSlot } from "vue";
-import { S as Se } from "./chunks/index.js";
-import { t as tinycolor } from "./chunks/tinycolor.js";
-import { useDelegatedProps } from "./use-delegated-props.js";
-import { truncColorValue, COLOR_NUMBER_VALIDATION_PATTERN, HEX_VALIDATION_PATTERN, resolveArrowDirection, getColorConstraints, clamp, bumpColorValue } from "./color.js";
-import Button from "./button.js";
-/* empty css                                                                      */
-/* empty css                                                                    */
-/* empty css                                                                   */
-/* empty css                                                                     */
-import PopoverContent from "./popover-content.js";
-import PopoverTrigger from "./popover-trigger.js";
-import { _ as _sfc_main$1 } from "./chunks/popover.js";
-import SelectContent from "./select-content.js";
-/* empty css                                                                   */
-import SelectItem from "./select-item.js";
-/* empty css                                                                    */
-/* empty css                                                                        */
-import SelectTrigger from "./select-trigger.js";
-import SelectValue from "./select-value.js";
-import { _ as _sfc_main$3 } from "./chunks/select.js";
-/* empty css                                                                        */
-/* empty css                                                                         */
-import TextInput from "./text-input.js";
-import { _ as _sfc_main$2 } from "./chunks/alpha-slider.js";
-import ColorArea from "./color-area.js";
-import ColorSwatch from "./color-swatch.js";
-import { defineColorModel } from "./use-color-model.js";
-/* empty css                                                                    */
-import hueSlider from "./hue-slider.js";
-import { _ as _export_sfc } from "./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__ */ 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 }) {
-    useCssVars((_ctx) => ({
-      "637de6e6": _ctx.modelValue
-    }));
-    const props = __props;
-    const emit = __emit;
-    const delegatedProps = useDelegatedProps(props, "class");
-    const forwarded = Se(delegatedProps, emit);
-    const tinyColorRef = defineColorModel(props, emit);
-    const hueRef = ref(tinyColorRef.value.toHsl().h);
-    const currentColorFormat = ref(props.defaultFormat || "hex");
-    const eyeDropper = ref(null);
-    const hex = computed({
-      get: () => tinyColorRef.value.toHexString().toUpperCase(),
-      set: () => {
-      }
-    });
-    const rgb = computed(() => {
-      return tinyColorRef.value.toRgb();
-    });
-    const hsl = 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 = computed(() => {
-      const { h, s, v } = tinyColorRef.value.toHsv();
-      return {
-        h: `${h.toFixed()}°`,
-        s: `${(s * 100).toFixed()}%`,
-        v: `${(v * 100).toFixed()}%`
-      };
-    });
-    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(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 = truncColorValue(input.value) + (inputEvent.data ?? "");
-      if (!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 (!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(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(newRgb);
-    }
-    function inputChangeHSL(event, key) {
-      var _a;
-      const HSLInput = (_a = event.target) == null ? void 0 : _a.value;
-      let newHSLValue = 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 = 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 = 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 = resolveArrowDirection(event);
-      const currentValue = getCurrentColorValue(key);
-      const { min, max } = getColorConstraints(key);
-      const newValue = clamp(bumpColorValue(currentValue, direction), min, max);
-      if (key === "r" || key === "g" || key === "b") {
-        const newColor = tinycolor({ ...rgb.value, [key]: newValue });
-        emit("update:modelValue", newColor.toString());
-      } else if (key === "h") {
-        if (currentColorFormat.value === "hsl") {
-          const newColor = tinycolor({ ...tinyColorRef.value.toHsl(), h: newValue });
-          emit("update:modelValue", newColor.toString());
-        } else {
-          const newColor = 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({ ...tinyColorRef.value.toHsl(), [key]: newValue / 100 });
-          emit("update:modelValue", newColor.toString());
-        } else {
-          const currentHsv = tinyColorRef.value.toHsv();
-          const newColor = 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 openBlock(), createBlock(unref(_sfc_main$1), null, {
-        default: withCtx(() => [
-          createVNode(unref(PopoverTrigger), null, {
-            default: withCtx(() => [
-              createVNode(unref(Button), {
-                class: "celeste-picker-trigger",
-                intent: "neutral",
-                variant: "stroke"
-              }, {
-                default: withCtx(() => [
-                  _cache[53] || (_cache[53] = createElementVNode("span", { class: "celeste-selected-color" }, null, -1)),
-                  createTextVNode(" " + toDisplayString(_ctx.label), 1)
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(unref(PopoverContent), { dismissible: false }, {
-            default: withCtx(() => [
-              createElementVNode("div", mergeProps({ class: "celeste-color-picker-wrapper" }, unref(forwarded)), [
-                createElementVNode("div", _hoisted_1, [
-                  createVNode(unref(ColorArea), {
-                    modelValue: unref(tinyColorRef),
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
-                    hue: hueRef.value
-                  }, null, 8, ["modelValue", "hue"]),
-                  createVNode(unref(hueSlider), {
-                    modelValue: hueRef.value,
-                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hueRef.value = $event)
-                  }, null, 8, ["modelValue"]),
-                  createVNode(_sfc_main$2, {
-                    modelValue: unref(tinyColorRef),
-                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(tinyColorRef) ? tinyColorRef.value = $event : null)
-                  }, null, 8, ["modelValue"]),
-                  createElementVNode("div", _hoisted_2, [
-                    createVNode(unref(_sfc_main$3), {
-                      modelValue: currentColorFormat.value,
-                      "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => currentColorFormat.value = $event),
-                      name: "color-format"
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(SelectTrigger), { variant: "inline" }, {
-                          default: withCtx(() => [
-                            createVNode(unref(SelectValue), {
-                              placeholder: "HEX",
-                              class: "celeste-selected-color-format"
-                            }, {
-                              default: withCtx(() => [
-                                createTextVNode(toDisplayString(currentColorFormat.value), 1)
-                              ]),
-                              _: 1
-                            })
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(unref(SelectContent), { width: "fit" }, {
-                          default: withCtx(() => [
-                            (openBlock(true), createElementBlock(Fragment, null, renderList(props.formats, (format) => {
-                              return openBlock(), createBlock(unref(SelectItem), {
-                                key: format,
-                                value: format
-                              }, {
-                                default: withCtx(() => [
-                                  createElementVNode("span", _hoisted_3, toDisplayString(format), 1)
-                                ]),
-                                _: 2
-                              }, 1032, ["value"]);
-                            }), 128))
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["modelValue"]),
-                    createElementVNode("div", _hoisted_4, [
-                      eyeDropper.value ? (openBlock(), createBlock(unref(Button), {
-                        key: 0,
-                        class: "celeste-color-sip",
-                        variant: "stroke",
-                        size: "xxs",
-                        intent: "neutral",
-                        onClick: sipColor
-                      }, {
-                        default: withCtx(() => _cache[54] || (_cache[54] = [
-                          createElementVNode("i", { class: "i-celeste-sip-line" }, null, -1)
-                        ])),
-                        _: 1
-                      })) : createCommentVNode("", true),
-                      createElementVNode("div", _hoisted_5, [
-                        currentColorFormat.value === "hex" ? (openBlock(), createBlock(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: withKeys(withModifiers(inputChangeHex, ["prevent"]), ["enter"])
-                        }, null, 8, ["modelValue", "onKeydown"])) : currentColorFormat.value === "rgb" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                          createVNode(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] = withKeys(withModifiers((e) => inputChangeRGB(e, "r"), ["prevent"]), ["enter"])),
-                              _cache[8] || (_cache[8] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "r"), ["prevent", "stop"]), ["up"])),
-                              _cache[9] || (_cache[9] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "r"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          createVNode(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] = withKeys(withModifiers((e) => inputChangeRGB(e, "g"), ["prevent"]), ["enter"])),
-                              _cache[13] || (_cache[13] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "g"), ["prevent", "stop"]), ["up"])),
-                              _cache[14] || (_cache[14] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "g"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          createVNode(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] = withKeys(withModifiers((e) => inputChangeRGB(e, "b"), ["prevent"]), ["enter"])),
-                              _cache[18] || (_cache[18] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "b"), ["prevent", "stop"]), ["up"])),
-                              _cache[19] || (_cache[19] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "b"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"])
-                        ], 64)) : currentColorFormat.value === "hsl" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                          createVNode(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] = withKeys(withModifiers((e) => inputChangeHSL(e, "h"), ["prevent"]), ["enter"])),
-                              _cache[23] || (_cache[23] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["up"])),
-                              _cache[24] || (_cache[24] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          createVNode(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] = withKeys(withModifiers((e) => inputChangeHSL(e, "s"), ["prevent"]), ["enter"])),
-                              _cache[28] || (_cache[28] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["up"])),
-                              _cache[29] || (_cache[29] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          createVNode(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] = withKeys(withModifiers((e) => inputChangeHSL(e, "l"), ["prevent"]), ["enter"])),
-                              _cache[33] || (_cache[33] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "l"), ["prevent", "stop"]), ["up"])),
-                              _cache[34] || (_cache[34] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "l"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"])
-                        ], 64)) : currentColorFormat.value === "hsb" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-                          createVNode(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] = withKeys(withModifiers((e) => inputChangeHSB(e, "h"), ["prevent"]), ["enter"])),
-                              _cache[38] || (_cache[38] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["up"])),
-                              _cache[39] || (_cache[39] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          createVNode(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] = withKeys(withModifiers((e) => inputChangeHSB(e, "s"), ["prevent"]), ["enter"])),
-                              _cache[43] || (_cache[43] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["up"])),
-                              _cache[44] || (_cache[44] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"]),
-                          createVNode(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] = withKeys(withModifiers((e) => inputChangeHSB(e, "v"), ["prevent"]), ["enter"])),
-                              _cache[48] || (_cache[48] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "v"), ["prevent", "stop"]), ["up"])),
-                              _cache[49] || (_cache[49] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "v"), ["prevent", "stop"]), ["down"]))
-                            ]
-                          }, null, 8, ["modelValue"])
-                        ], 64)) : createCommentVNode("", true),
-                        createVNode(unref(TextInput), {
-                          autocomplete: "off",
-                          name: "alpha",
-                          placeholder: "100",
-                          type: "text",
-                          class: "color-input",
-                          size: "xs",
-                          value: `${(unref(tinyColorRef).getAlpha() * 100).toFixed()}%`,
-                          onBeforeinput: validateInput,
-                          onFocusout: inputChangeAlpha,
-                          onKeydown: [
-                            withKeys(withModifiers(inputChangeAlpha, ["prevent", "stop"]), ["enter"]),
-                            _cache[50] || (_cache[50] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "a"), ["prevent", "stop"]), ["up"])),
-                            _cache[51] || (_cache[51] = withKeys(withModifiers((e) => handleColorValueKeyDown(e, "a"), ["prevent", "stop"]), ["down"]))
-                          ]
-                        }, null, 8, ["value", "onKeydown"])
-                      ])
-                    ])
-                  ])
-                ]),
-                createElementVNode("div", _hoisted_6, [
-                  _ctx.$slots.swatches ? renderSlot(_ctx.$slots, "swatches", { key: 0 }, void 0, true) : (openBlock(), createBlock(ColorSwatch, {
-                    key: 1,
-                    modelValue: unref(tinyColorRef),
-                    "onUpdate:modelValue": _cache[52] || (_cache[52] = ($event) => isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
-                    label: _ctx.colorSwatchLabel,
-                    hue: hueRef.value
-                  }, null, 8, ["modelValue", "label", "hue"]))
-                ])
-              ], 16)
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-const colorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-285bb26b"]]);
-export {
-  colorPicker as default
-};
+import { t as color_picker_default } from "./chunks/color-picker.js";
+export { color_picker_default as default };

package/dist/es/color-swatch.js

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