@youcan/celeste 0.6.98 → 0.6.99

package/dist/cjs/chunks/color-picker.js

@@ -1,458 +0,0 @@
-const require_dist = require("./dist.js");
-const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.js");
-const require_button = require("./button.js");
-require("./compact-button.js");
-require("./fancy-button.js");
-require("./link-button.js");
-require("./social-button.js");
-const require_use_delegated_props = require("../use-delegated-props.js");
-const require_color = require("../color.js");
-const require_use_color_model = require("./use-color-model.js");
-const require_alpha_slider = require("./alpha-slider.js");
-const require_color_area = require("./color-area.js");
-const require_popover_content = require("./popover-content.js");
-const require_popover_trigger = require("./popover-trigger.js");
-const require_popover = require("./popover.js");
-const require_select_content = require("./select-content.js");
-require("./select-group.js");
-require("./select-icon.js");
-const require_select_item = require("./select-item.js");
-require("./select-label.js");
-require("./select-separator.js");
-const require_select_trigger = require("./select-trigger.js");
-const require_select_value = require("./select-value.js");
-const require_select = require("./select.js");
-require("./text-input-affix.js");
-require("./text-input-button.js");
-const require_text_input = require("./text-input.js");
-const require_color_swatch = require("./color-swatch.js");
-const require_hue_slider = require("./hue-slider.js");
-let vue = require("vue");
-//#region src/components/color-picker/color-picker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "celeste-color-picker" };
-var _hoisted_2 = { class: "celeste-color-control-panel" };
-var _hoisted_3 = { class: "celeste-color-format" };
-var _hoisted_4 = { class: "celeste-color-controls" };
-var _hoisted_5 = { class: "celeste-color-format-inputs" };
-var _hoisted_6 = { class: "celeste-color-swatches" };
-var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.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 }) {
-		(0, vue.useCssVars)((_ctx) => ({ "637de6e6": _ctx.modelValue }));
-		const props = __props;
-		const emit = __emit;
-		const forwarded = require_dist.Se(require_use_delegated_props.useDelegatedProps(props, "class"), emit);
-		const tinyColorRef = require_use_color_model.defineColorModel(props, emit);
-		const hueRef = (0, vue.ref)(tinyColorRef.value.toHsl().h);
-		const currentColorFormat = (0, vue.ref)(props.defaultFormat || "hex");
-		const eyeDropper = (0, vue.ref)(null);
-		const hex = (0, vue.computed)({
-			get: () => tinyColorRef.value.toHexString().toUpperCase(),
-			set: () => {}
-		});
-		const rgb = (0, vue.computed)(() => {
-			return tinyColorRef.value.toRgb();
-		});
-		const hsl = (0, vue.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 = (0, vue.computed)(() => {
-			const { h, s, v } = tinyColorRef.value.toHsv();
-			return {
-				h: `${h.toFixed()}°`,
-				s: `${(s * 100).toFixed()}%`,
-				v: `${(v * 100).toFixed()}%`
-			};
-		});
-		(0, vue.watch)(tinyColorRef, (tinyColorInstance) => {
-			const newHue = tinyColorInstance.toHsl().h;
-			if (tinyColorInstance.toHsl().s === 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) => {
-				tinyColorRef.value = require_use_color_model.tinycolor(result.sRGBHex);
-			}).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 = require_color.truncColorValue(input.value) + (inputEvent.data ?? "");
-			if (!require_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 (!require_color.HEX_VALIDATION_PATTERN.test(newValue)) event.preventDefault();
-		}
-		function inputChangeHex(event) {
-			const colorInput = event.target?.value;
-			if (!colorInput) return;
-			tinyColorRef.value = require_use_color_model.tinycolor(colorInput);
-		}
-		function inputChangeRGB(event, key) {
-			const value = Number(event.target?.value);
-			tinyColorRef.value = require_use_color_model.tinycolor({
-				...rgb.value,
-				[key]: value
-			});
-		}
-		function inputChangeHSL(event, key) {
-			const HSLInput = event.target?.value;
-			let newHSLValue = require_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) {
-			const HSBInput = event.target?.value;
-			const HSBValue = require_color.truncColorValue(HSBInput);
-			if (Number.isNaN(HSBValue)) return;
-			const newHSB = { [key]: HSBValue };
-			tinyColorRef.value = {
-				...tinyColorRef.value.toHsv(),
-				...newHSB
-			};
-		}
-		function inputChangeAlpha(event) {
-			const alphaInput = event.target?.value;
-			const alphaValue = require_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 = require_color.resolveArrowDirection(event);
-			const currentValue = getCurrentColorValue(key);
-			const { min, max } = require_color.getColorConstraints(key);
-			const newValue = require_color.clamp(require_color.bumpColorValue(currentValue, direction), min, max);
-			if (key === "r" || key === "g" || key === "b") emit("update:modelValue", require_use_color_model.tinycolor({
-				...rgb.value,
-				[key]: newValue
-			}).toString());
-			else if (key === "h") if (currentColorFormat.value === "hsl") emit("update:modelValue", require_use_color_model.tinycolor({
-				...tinyColorRef.value.toHsl(),
-				h: newValue
-			}).toString());
-			else emit("update:modelValue", require_use_color_model.tinycolor({
-				...tinyColorRef.value.toHsv(),
-				h: newValue
-			}).toString());
-			else if (key === "s" || key === "l" || key === "v") if (currentColorFormat.value === "hsl") emit("update:modelValue", require_use_color_model.tinycolor({
-				...tinyColorRef.value.toHsl(),
-				[key]: newValue / 100
-			}).toString());
-			else emit("update:modelValue", require_use_color_model.tinycolor({
-				...tinyColorRef.value.toHsv(),
-				[key]: newValue / 100
-			}).toString());
-			else if (key === "a") emit("update:modelValue", tinyColorRef.value.setAlpha(newValue / 100).toString());
-		}
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_popover.popover_default), null, {
-				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_popover_trigger.popover_trigger_default), null, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_button.button_default), {
-						class: "celeste-picker-trigger",
-						intent: "neutral",
-						variant: "stroke"
-					}, {
-						default: (0, vue.withCtx)(() => [_cache[53] || (_cache[53] = (0, vue.createElementVNode)("span", { class: "celeste-selected-color" }, null, -1)), (0, vue.createTextVNode)(" " + (0, vue.toDisplayString)(_ctx.label), 1)]),
-						_: 1
-					})]),
-					_: 1
-				}), (0, vue.createVNode)((0, vue.unref)(require_popover_content.popover_content_default), { dismissible: false }, {
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({ class: "celeste-color-picker-wrapper" }, (0, vue.unref)(forwarded)), [(0, vue.createElementVNode)("div", _hoisted_1, [
-						(0, vue.createVNode)((0, vue.unref)(require_color_area.color_area_default), {
-							modelValue: (0, vue.unref)(tinyColorRef),
-							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => (0, vue.isRef)(tinyColorRef) ? tinyColorRef.value = $event : null),
-							hue: hueRef.value
-						}, null, 8, ["modelValue", "hue"]),
-						(0, vue.createVNode)((0, vue.unref)(require_hue_slider.hue_slider_default), {
-							modelValue: hueRef.value,
-							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hueRef.value = $event)
-						}, null, 8, ["modelValue"]),
-						(0, vue.createVNode)(require_alpha_slider.alpha_slider_default, {
-							modelValue: (0, vue.unref)(tinyColorRef),
-							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => (0, vue.isRef)(tinyColorRef) ? tinyColorRef.value = $event : null)
-						}, null, 8, ["modelValue"]),
-						(0, vue.createElementVNode)("div", _hoisted_2, [(0, vue.createVNode)((0, vue.unref)(require_select.select_default), {
-							modelValue: currentColorFormat.value,
-							"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => currentColorFormat.value = $event),
-							name: "color-format"
-						}, {
-							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_select_trigger.select_trigger_default), { variant: "inline" }, {
-								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_select_value.select_value_default), {
-									placeholder: "HEX",
-									class: "celeste-selected-color-format"
-								}, {
-									default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(currentColorFormat.value), 1)]),
-									_: 1
-								})]),
-								_: 1
-							}), (0, vue.createVNode)((0, vue.unref)(require_select_content.select_content_default), { width: "fit" }, {
-								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(props.formats, (format) => {
-									return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_select_item.select_item_default), {
-										key: format,
-										value: format
-									}, {
-										default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_3, (0, vue.toDisplayString)(format), 1)]),
-										_: 2
-									}, 1032, ["value"]);
-								}), 128))]),
-								_: 1
-							})]),
-							_: 1
-						}, 8, ["modelValue"]), (0, vue.createElementVNode)("div", _hoisted_4, [eyeDropper.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_button.button_default), {
-							key: 0,
-							class: "celeste-color-sip",
-							variant: "stroke",
-							size: "xxs",
-							intent: "neutral",
-							onClick: sipColor
-						}, {
-							default: (0, vue.withCtx)(() => _cache[54] || (_cache[54] = [(0, vue.createElementVNode)("i", { class: "i-celeste-sip-line" }, null, -1)])),
-							_: 1
-						})) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_5, [currentColorFormat.value === "hex" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_text_input.text_input_default), {
-							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: (0, vue.withKeys)((0, vue.withModifiers)(inputChangeHex, ["prevent"]), ["enter"])
-						}, null, 8, ["modelValue", "onKeydown"])) : currentColorFormat.value === "rgb" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
-							(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
-								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] = (0, vue.withKeys)((0, vue.withModifiers)((e) => inputChangeRGB(e, "r"), ["prevent"]), ["enter"])),
-									_cache[8] || (_cache[8] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "r"), ["prevent", "stop"]), ["up"])),
-									_cache[9] || (_cache[9] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "r"), ["prevent", "stop"]), ["down"]))
-								]
-							}, null, 8, ["modelValue"]),
-							(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
-								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] = (0, vue.withKeys)((0, vue.withModifiers)((e) => inputChangeRGB(e, "g"), ["prevent"]), ["enter"])),
-									_cache[13] || (_cache[13] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "g"), ["prevent", "stop"]), ["up"])),
-									_cache[14] || (_cache[14] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "g"), ["prevent", "stop"]), ["down"]))
-								]
-							}, null, 8, ["modelValue"]),
-							(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
-								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] = (0, vue.withKeys)((0, vue.withModifiers)((e) => inputChangeRGB(e, "b"), ["prevent"]), ["enter"])),
-									_cache[18] || (_cache[18] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "b"), ["prevent", "stop"]), ["up"])),
-									_cache[19] || (_cache[19] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "b"), ["prevent", "stop"]), ["down"]))
-								]
-							}, null, 8, ["modelValue"])
-						], 64)) : currentColorFormat.value === "hsl" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [
-							(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
-								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] = (0, vue.withKeys)((0, vue.withModifiers)((e) => inputChangeHSL(e, "h"), ["prevent"]), ["enter"])),
-									_cache[23] || (_cache[23] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["up"])),
-									_cache[24] || (_cache[24] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["down"]))
-								]
-							}, null, 8, ["modelValue"]),
-							(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
-								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] = (0, vue.withKeys)((0, vue.withModifiers)((e) => inputChangeHSL(e, "s"), ["prevent"]), ["enter"])),
-									_cache[28] || (_cache[28] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["up"])),
-									_cache[29] || (_cache[29] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["down"]))
-								]
-							}, null, 8, ["modelValue"]),
-							(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
-								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] = (0, vue.withKeys)((0, vue.withModifiers)((e) => inputChangeHSL(e, "l"), ["prevent"]), ["enter"])),
-									_cache[33] || (_cache[33] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "l"), ["prevent", "stop"]), ["up"])),
-									_cache[34] || (_cache[34] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "l"), ["prevent", "stop"]), ["down"]))
-								]
-							}, null, 8, ["modelValue"])
-						], 64)) : currentColorFormat.value === "hsb" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, [
-							(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
-								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] = (0, vue.withKeys)((0, vue.withModifiers)((e) => inputChangeHSB(e, "h"), ["prevent"]), ["enter"])),
-									_cache[38] || (_cache[38] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["up"])),
-									_cache[39] || (_cache[39] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["down"]))
-								]
-							}, null, 8, ["modelValue"]),
-							(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
-								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] = (0, vue.withKeys)((0, vue.withModifiers)((e) => inputChangeHSB(e, "s"), ["prevent"]), ["enter"])),
-									_cache[43] || (_cache[43] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["up"])),
-									_cache[44] || (_cache[44] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["down"]))
-								]
-							}, null, 8, ["modelValue"]),
-							(0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
-								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] = (0, vue.withKeys)((0, vue.withModifiers)((e) => inputChangeHSB(e, "v"), ["prevent"]), ["enter"])),
-									_cache[48] || (_cache[48] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "v"), ["prevent", "stop"]), ["up"])),
-									_cache[49] || (_cache[49] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "v"), ["prevent", "stop"]), ["down"]))
-								]
-							}, null, 8, ["modelValue"])
-						], 64)) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(require_text_input.text_input_default), {
-							autocomplete: "off",
-							name: "alpha",
-							placeholder: "100",
-							type: "text",
-							class: "color-input",
-							size: "xs",
-							value: `${((0, vue.unref)(tinyColorRef).getAlpha() * 100).toFixed()}%`,
-							onBeforeinput: validateInput,
-							onFocusout: inputChangeAlpha,
-							onKeydown: [
-								(0, vue.withKeys)((0, vue.withModifiers)(inputChangeAlpha, ["prevent", "stop"]), ["enter"]),
-								_cache[50] || (_cache[50] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "a"), ["prevent", "stop"]), ["up"])),
-								_cache[51] || (_cache[51] = (0, vue.withKeys)((0, vue.withModifiers)((e) => handleColorValueKeyDown(e, "a"), ["prevent", "stop"]), ["down"]))
-							]
-						}, null, 8, ["value", "onKeydown"])])])])
-					]), (0, vue.createElementVNode)("div", _hoisted_6, [_ctx.$slots.swatches ? (0, vue.renderSlot)(_ctx.$slots, "swatches", { key: 0 }, void 0, true) : ((0, vue.openBlock)(), (0, vue.createBlock)(require_color_swatch.color_swatch_default, {
-						key: 1,
-						modelValue: (0, vue.unref)(tinyColorRef),
-						"onUpdate:modelValue": _cache[52] || (_cache[52] = ($event) => (0, vue.isRef)(tinyColorRef) ? tinyColorRef.value = $event : null),
-						label: _ctx.colorSwatchLabel,
-						hue: hueRef.value
-					}, null, 8, [
-						"modelValue",
-						"label",
-						"hue"
-					]))])], 16)]),
-					_: 3
-				})]),
-				_: 3
-			});
-		};
-	}
-});
-//#endregion
-//#region src/components/color-picker/color-picker.vue
-var color_picker_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(color_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-285bb26b"]]);
-//#endregion
-Object.defineProperty(exports, "color_picker_default", {
-	enumerable: true,
-	get: function() {
-		return color_picker_default;
-	}
-});

package/dist/cjs/chunks/color-swatch.js

@@ -1,65 +0,0 @@
-require("./dist.js");
-const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.js");
-const require_color = require("../color.js");
-const require_use_color_model = require("./use-color-model.js");
-let vue = require("vue");
-//#region src/components/color-picker/color-swatch.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "celeste-color-swatch" };
-var _hoisted_2 = { class: "swatch-label" };
-var _hoisted_3 = { class: "color-palette" };
-var _hoisted_4 = [
-	"aria-selected",
-	"title",
-	"aria-label",
-	"onClick",
-	"onKeydown"
-];
-var color_swatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "color-swatch",
-	props: {
-		modelValue: {},
-		label: {},
-		swatch: { default: () => require_color.DEFAULT_SWATCH },
-		defaultColor: {}
-	},
-	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit }) {
-		(0, vue.useCssVars)((_ctx) => ({ "a9a5260a": activeSwatchColorBg.value }));
-		const tinyColorRef = require_use_color_model.defineColorModel(__props, __emit);
-		const activeSwatchColorBg = (0, vue.computed)(() => {
-			return `0 0 0 2px var(--color-bg-white-0), 0 0 0 4px ${tinyColorRef.value.toRgbString()}`;
-		});
-		function handleSwatchColorClick(newColor) {
-			tinyColorRef.value = require_use_color_model.tinycolor(newColor);
-		}
-		function isSwatchColorSelected(color) {
-			return tinyColorRef.value.toHex8String().toLocaleLowerCase() === require_use_color_model.tinycolor(color).toHex8String().toLocaleLowerCase();
-		}
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createElementVNode)("span", _hoisted_2, (0, vue.toDisplayString)(_ctx.label), 1), (0, vue.createElementVNode)("div", _hoisted_3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.swatch, (swatchColor) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-					key: swatchColor,
-					class: "palette-color",
-					style: (0, vue.normalizeStyle)({ background: swatchColor }),
-					"aria-selected": isSwatchColorSelected(swatchColor.toLowerCase()),
-					title: swatchColor,
-					"aria-label": `Color:${swatchColor}`,
-					role: "option",
-					tabindex: "0",
-					onClick: ($event) => handleSwatchColorClick(swatchColor),
-					onKeydown: (0, vue.withKeys)(($event) => handleSwatchColorClick(swatchColor), ["space"])
-				}, null, 44, _hoisted_4);
-			}), 128))])]);
-		};
-	}
-});
-//#endregion
-//#region src/components/color-picker/color-swatch.vue
-var color_swatch_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(color_swatch_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9bfe53b1"]]);
-//#endregion
-Object.defineProperty(exports, "color_swatch_default", {
-	enumerable: true,
-	get: function() {
-		return color_swatch_default;
-	}
-});

package/dist/cjs/chunks/combobox-anchor.js

@@ -1,33 +0,0 @@
-const require_dist = require("./dist.js");
-const require_clsx = require("./clsx.js");
-let vue = require("vue");
-//#endregion
-//#region src/components/combobox/combobox-anchor.vue
-var combobox_anchor_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "combobox-anchor",
-	props: {
-		asChild: { type: Boolean },
-		as: {},
-		class: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const forwarded = require_dist.Ot((0, vue.computed)(() => {
-			const { class: _, ...delegated } = props;
-			return delegated;
-		}));
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.qv), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: (0, vue.unref)(require_clsx.clsx)(props.class, "celeste-dropdown-anchor") }), {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-				_: 3
-			}, 16, ["class"]);
-		};
-	}
-});
-//#endregion
-Object.defineProperty(exports, "combobox_anchor_default", {
-	enumerable: true,
-	get: function() {
-		return combobox_anchor_default;
-	}
-});

package/dist/cjs/chunks/combobox-empty.js

@@ -1,36 +0,0 @@
-const require_dist = require("./dist.js");
-const require_clsx = require("./clsx.js");
-const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.js");
-let vue = require("vue");
-//#region src/components/combobox/combobox-empty.vue?vue&type=script&setup=true&lang.ts
-var combobox_empty_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "combobox-empty",
-	props: {
-		asChild: { type: Boolean },
-		as: {},
-		class: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const delegatedProps = (0, vue.computed)(() => {
-			const { class: _, ...delegated } = props;
-			return delegated;
-		});
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.em), (0, vue.mergeProps)(delegatedProps.value, { class: (0, vue.unref)(require_clsx.clsx)("celeste-dropdown-empty-list", props.class) }), {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
-				_: 3
-			}, 16, ["class"]);
-		};
-	}
-});
-//#endregion
-//#region src/components/combobox/combobox-empty.vue
-var combobox_empty_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_empty_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-450bfb63"]]);
-//#endregion
-Object.defineProperty(exports, "combobox_empty_default", {
-	enumerable: true,
-	get: function() {
-		return combobox_empty_default;
-	}
-});

package/dist/cjs/chunks/combobox-group.js

@@ -1,43 +0,0 @@
-const require_dist = require("./dist.js");
-const require_clsx = require("./clsx.js");
-const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.js");
-let vue = require("vue");
-//#region src/components/combobox/combobox-group.vue?vue&type=script&setup=true&lang.ts
-var combobox_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "combobox-group",
-	props: {
-		asChild: { type: Boolean },
-		as: {},
-		class: {},
-		heading: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const delegatedProps = (0, vue.computed)(() => {
-			const { class: _, ...delegated } = props;
-			return delegated;
-		});
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.Zv), (0, vue.mergeProps)(delegatedProps.value, { class: (0, vue.unref)(require_clsx.clsx)(props.class, "celeste-dropdown-items-group") }), {
-				default: (0, vue.withCtx)(() => [_ctx.heading ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.Jv), {
-					key: 0,
-					class: ""
-				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(_ctx.heading), 1)]),
-					_: 1
-				})) : (0, vue.createCommentVNode)("", true), (0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
-				_: 3
-			}, 16, ["class"]);
-		};
-	}
-});
-//#endregion
-//#region src/components/combobox/combobox-group.vue
-var combobox_group_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_group_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-66b5c9e4"]]);
-//#endregion
-Object.defineProperty(exports, "combobox_group_default", {
-	enumerable: true,
-	get: function() {
-		return combobox_group_default;
-	}
-});