@youcan/celeste 0.6.97 → 0.6.98

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

@@ -0,0 +1,452 @@
+import { I as Se } from "./dist.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as button_default } from "./button.js";
+import "./compact-button.js";
+import "./fancy-button.js";
+import "./link-button.js";
+import "./social-button.js";
+import { useDelegatedProps } from "../use-delegated-props.js";
+import { COLOR_NUMBER_VALIDATION_PATTERN, HEX_VALIDATION_PATTERN, bumpColorValue, clamp, getColorConstraints, resolveArrowDirection, truncColorValue } from "../color.js";
+import { n as defineColorModel, r as tinycolor } from "./use-color-model.js";
+import { t as alpha_slider_default } from "./alpha-slider.js";
+import { t as color_area_default } from "./color-area.js";
+import { t as popover_content_default } from "./popover-content.js";
+import { t as popover_trigger_default } from "./popover-trigger.js";
+import { t as popover_default } from "./popover.js";
+import { t as select_content_default } from "./select-content.js";
+import "./select-group.js";
+import "./select-icon.js";
+import { t as select_item_default } from "./select-item.js";
+import "./select-label.js";
+import "./select-separator.js";
+import { t as select_trigger_default } from "./select-trigger.js";
+import { t as select_value_default } from "./select-value.js";
+import { t as select_default } from "./select.js";
+import "./text-input-affix.js";
+import "./text-input-button.js";
+import { t as text_input_default } from "./text-input.js";
+import { t as color_swatch_default } from "./color-swatch.js";
+import { t as hue_slider_default } from "./hue-slider.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeProps, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useCssVars, watch, withCtx, withKeys, withModifiers } from "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" };
+//#endregion
+//#region src/components/color-picker/color-picker.vue
+var color_picker_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__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 forwarded = Se(useDelegatedProps(props, "class"), 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;
+			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 = 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 = 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) {
+			const colorInput = event.target?.value;
+			if (!colorInput) return;
+			tinyColorRef.value = tinycolor(colorInput);
+		}
+		function inputChangeRGB(event, key) {
+			const value = Number(event.target?.value);
+			tinyColorRef.value = tinycolor({
+				...rgb.value,
+				[key]: value
+			});
+		}
+		function inputChangeHSL(event, key) {
+			const HSLInput = event.target?.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) {
+			const HSBInput = event.target?.value;
+			const HSBValue = 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 = 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") emit("update:modelValue", tinycolor({
+				...rgb.value,
+				[key]: newValue
+			}).toString());
+			else if (key === "h") if (currentColorFormat.value === "hsl") emit("update:modelValue", tinycolor({
+				...tinyColorRef.value.toHsl(),
+				h: newValue
+			}).toString());
+			else emit("update:modelValue", tinycolor({
+				...tinyColorRef.value.toHsv(),
+				h: newValue
+			}).toString());
+			else if (key === "s" || key === "l" || key === "v") if (currentColorFormat.value === "hsl") emit("update:modelValue", tinycolor({
+				...tinyColorRef.value.toHsl(),
+				[key]: newValue / 100
+			}).toString());
+			else emit("update:modelValue", 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 openBlock(), createBlock(unref(popover_default), null, {
+				default: withCtx(() => [createVNode(unref(popover_trigger_default), null, {
+					default: withCtx(() => [createVNode(unref(button_default), {
+						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(popover_content_default), { dismissible: false }, {
+					default: withCtx(() => [createElementVNode("div", mergeProps({ class: "celeste-color-picker-wrapper" }, unref(forwarded)), [createElementVNode("div", _hoisted_1, [
+						createVNode(unref(color_area_default), {
+							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(hue_slider_default), {
+							modelValue: hueRef.value,
+							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hueRef.value = $event)
+						}, null, 8, ["modelValue"]),
+						createVNode(alpha_slider_default, {
+							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(select_default), {
+							modelValue: currentColorFormat.value,
+							"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => currentColorFormat.value = $event),
+							name: "color-format"
+						}, {
+							default: withCtx(() => [createVNode(unref(select_trigger_default), { variant: "inline" }, {
+								default: withCtx(() => [createVNode(unref(select_value_default), {
+									placeholder: "HEX",
+									class: "celeste-selected-color-format"
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(currentColorFormat.value), 1)]),
+									_: 1
+								})]),
+								_: 1
+							}), createVNode(unref(select_content_default), { width: "fit" }, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.formats, (format) => {
+									return openBlock(), createBlock(unref(select_item_default), {
+										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_default), {
+							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(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: withKeys(withModifiers(inputChangeHex, ["prevent"]), ["enter"])
+						}, null, 8, ["modelValue", "onKeydown"])) : currentColorFormat.value === "rgb" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+							createVNode(unref(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] = 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(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] = 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(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] = 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(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] = 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(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] = 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(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] = 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(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] = 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(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] = 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(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] = 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(text_input_default), {
+							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(color_swatch_default, {
+						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
+			});
+		};
+	}
+}), [["__scopeId", "data-v-285bb26b"]]);
+//#endregion
+export { color_picker_default as t };

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

@@ -0,0 +1,58 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { DEFAULT_SWATCH } from "../color.js";
+import { n as defineColorModel, r as tinycolor } from "./use-color-model.js";
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, normalizeStyle, openBlock, renderList, toDisplayString, useCssVars, withKeys } from "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"
+];
+//#endregion
+//#region src/components/color-picker/color-swatch.vue
+var color_swatch_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__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 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))])]);
+		};
+	}
+}), [["__scopeId", "data-v-9bfe53b1"]]);
+//#endregion
+export { color_swatch_default as t };

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

@@ -0,0 +1,28 @@
+import { Nt as qv, O as Ot } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#endregion
+//#region src/components/combobox/combobox-anchor.vue
+var combobox_anchor_default = /* @__PURE__ */ defineComponent({
+	__name: "combobox-anchor",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const forwarded = Ot(computed(() => {
+			const { class: _, ...delegated } = props;
+			return delegated;
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(qv), mergeProps(unref(forwarded), { class: unref(clsx)(props.class, "celeste-dropdown-anchor") }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { combobox_anchor_default as t };

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

@@ -0,0 +1,29 @@
+import { mt as em } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#endregion
+//#region src/components/combobox/combobox-empty.vue
+var combobox_empty_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "combobox-empty",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const delegatedProps = computed(() => {
+			const { class: _, ...delegated } = props;
+			return delegated;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(em), mergeProps(delegatedProps.value, { class: unref(clsx)("celeste-dropdown-empty-list", props.class) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+}), [["__scopeId", "data-v-450bfb63"]]);
+//#endregion
+export { combobox_empty_default as t };

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

@@ -0,0 +1,36 @@
+import { et as Zv, x as Jv } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createBlock, createCommentVNode, createTextVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#endregion
+//#region src/components/combobox/combobox-group.vue
+var combobox_group_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "combobox-group",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: {},
+		heading: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const delegatedProps = computed(() => {
+			const { class: _, ...delegated } = props;
+			return delegated;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Zv), mergeProps(delegatedProps.value, { class: unref(clsx)(props.class, "celeste-dropdown-items-group") }), {
+				default: withCtx(() => [_ctx.heading ? (openBlock(), createBlock(unref(Jv), {
+					key: 0,
+					class: ""
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(_ctx.heading), 1)]),
+					_: 1
+				})) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+}), [["__scopeId", "data-v-66b5c9e4"]]);
+//#endregion
+export { combobox_group_default as t };

package/dist/esm/chunks/combobox-input.js

@@ -0,0 +1,65 @@
+import { m as Gv } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as text_input_default } from "./text-input.js";
+import { computed, createBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, openBlock, unref, useModel, withCtx } from "vue";
+//#endregion
+//#region src/components/combobox/combobox-input.vue
+var combobox_input_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "combobox-input",
+	props: /* @__PURE__ */ mergeModels({
+		type: {},
+		disabled: { type: Boolean },
+		autoFocus: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: {},
+		textInputProps: {},
+		searchable: { type: Boolean },
+		placeholder: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const comboboxInputProps = computed(() => {
+			const { class: _class, textInputProps: _textInputProps, placeholder: _placeholder, ...rest } = props;
+			return rest;
+		});
+		const textInputProps = computed(() => {
+			return {
+				type: "search",
+				size: "sm",
+				placeholder: props.placeholder ?? "Search",
+				...props.textInputProps
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Gv), mergeProps(comboboxInputProps.value, {
+				class: unref(clsx)("celeste-dropdown-input", props.class),
+				readonly: !props.searchable,
+				as: "div"
+			}), {
+				default: withCtx(() => [createVNode(text_input_default, mergeProps(textInputProps.value, {
+					modelValue: model.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					readonly: !props.searchable,
+					style: !props.searchable ? "opacity: 0; height: 1px; padding: 0; border: none;" : ""
+				}), {
+					leadingIcon: withCtx(() => _cache[1] || (_cache[1] = [createElementVNode("i", { "i-celeste-search-2-line": "" }, null, -1)])),
+					_: 1
+				}, 16, [
+					"modelValue",
+					"readonly",
+					"style"
+				])]),
+				_: 1
+			}, 16, ["class", "readonly"]);
+		};
+	}
+}), [["__scopeId", "data-v-32b6a3f8"]]);
+//#endregion
+export { combobox_input_default as t };