@youcan/celeste 0.6.97 → 0.6.98

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

@@ -0,0 +1,458 @@
+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

@@ -0,0 +1,65 @@
+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,31 +1,33 @@
-"use strict";
-const No = require("vue");
-const clsx = require("./clsx.js");
-const index = require("./index.js");
-const _sfc_main = /* @__PURE__ */ No.defineComponent({
-  __name: "combobox-anchor",
-  props: {
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const delegatedProps = No.computed(() => {
-      const { class: _, ...delegated } = props;
-      return delegated;
-    });
-    const forwarded = index.Ot(delegatedProps);
-    return (_ctx, _cache) => {
-      return No.openBlock(), No.createBlock(No.unref(index.qv), No.mergeProps(No.unref(forwarded), {
-        class: No.unref(clsx.clsx)(props.class, "celeste-dropdown-anchor")
-      }), {
-        default: No.withCtx(() => [
-          No.renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
+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;
+	}
 });
-exports._sfc_main = _sfc_main;

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

@@ -0,0 +1,36 @@
+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;
+	}
+});