reka-ui 2.8.0 → 2.9.0

package/dist/ColorArea/ColorAreaThumb.cjs

@@ -0,0 +1,91 @@
+const require_rolldown_runtime = require('../rolldown-runtime.cjs');
+const require_Primitive_Primitive = require('../Primitive/Primitive.cjs');
+const require_Primitive_usePrimitiveElement = require('../Primitive/usePrimitiveElement.cjs');
+const require_color_channel = require('../color/channel.cjs');
+const require_ColorArea_ColorAreaRoot = require('./ColorAreaRoot.cjs');
+const require_ColorArea_utils = require('./utils.cjs');
+const vue = require_rolldown_runtime.__toESM(require("vue"));
+
+//#region src/ColorArea/ColorAreaThumb.vue?vue&type=script&setup=true&lang.ts
+var ColorAreaThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ColorAreaThumb",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = require_ColorArea_ColorAreaRoot.injectColorAreaRootContext();
+		const { primitiveElement, currentElement } = require_Primitive_usePrimitiveElement.usePrimitiveElement();
+		(0, vue.onMounted)(() => {
+			rootContext.thumbRef.value = currentElement.value;
+		});
+		const xPercent = (0, vue.computed)(() => require_ColorArea_utils.convertValueToPercentage(rootContext.xValue.value, rootContext.xRange.value.min, rootContext.xRange.value.max));
+		const yPercent = (0, vue.computed)(() => require_ColorArea_utils.convertValueToPercentage(rootContext.yValue.value, rootContext.yRange.value.min, rootContext.yRange.value.max));
+		const ariaLabel = (0, vue.computed)(() => {
+			return `${require_color_channel.getChannelName(rootContext.xChannel.value)}, ${require_color_channel.getChannelName(rootContext.yChannel.value)}`;
+		});
+		const ariaValueText = (0, vue.computed)(() => {
+			return `${require_color_channel.getChannelName(rootContext.xChannel.value)} ${Math.round(rootContext.xValue.value)}, ${require_color_channel.getChannelName(rootContext.yChannel.value)} ${Math.round(rootContext.yValue.value)}`;
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive_Primitive.Primitive), {
+				ref_key: "primitiveElement",
+				ref: primitiveElement,
+				role: "slider",
+				tabindex: (0, vue.unref)(rootContext).disabled.value ? void 0 : 0,
+				"aria-label": ariaLabel.value,
+				"aria-roledescription": "Color thumb",
+				"aria-valuemin": (0, vue.unref)(rootContext).xRange.value.min,
+				"aria-valuemax": (0, vue.unref)(rootContext).xRange.value.max,
+				"aria-valuenow": (0, vue.unref)(rootContext).xValue.value,
+				"aria-valuetext": ariaValueText.value,
+				"aria-orientation": "horizontal",
+				"data-disabled": (0, vue.unref)(rootContext).disabled.value ? "" : void 0,
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				style: (0, vue.normalizeStyle)({
+					position: "absolute",
+					left: `${xPercent.value}%`,
+					top: `${100 - yPercent.value}%`,
+					transform: "translate(-50%, -50%)",
+					touchAction: "none"
+				})
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"tabindex",
+				"aria-label",
+				"aria-valuemin",
+				"aria-valuemax",
+				"aria-valuenow",
+				"aria-valuetext",
+				"data-disabled",
+				"as-child",
+				"as",
+				"style"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorArea/ColorAreaThumb.vue
+var ColorAreaThumb_default = ColorAreaThumb_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+Object.defineProperty(exports, 'ColorAreaThumb_default', {
+  enumerable: true,
+  get: function () {
+    return ColorAreaThumb_default;
+  }
+});
+//# sourceMappingURL=ColorAreaThumb.cjs.map

package/dist/ColorArea/ColorAreaThumb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorAreaThumb.cjs","names":["asChild","as"],"sources":["../../src/ColorArea/ColorAreaThumb.vue","../../src/ColorArea/ColorAreaThumb.vue"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EAId,MAAM,cAAc,4DAA2B;EAC/C,MAAM,EAAE,kBAAkB,gBAAgB,GAAG,2DAAoB;AAEjE,qBAAU,MAAM;AACd,eAAY,SAAS,QAAQ,eAAe;EAC7C,EAAA;EAED,MAAM,WAAW,kBAAS,MACxB,iDACE,YAAY,OAAO,OACnB,YAAY,OAAO,MAAM,KACzB,YAAY,OAAO,MAAM,IAC1B,CACH;EAEA,MAAM,WAAW,kBAAS,MACxB,iDACE,YAAY,OAAO,OACnB,YAAY,OAAO,MAAM,KACzB,YAAY,OAAO,MAAM,IAC1B,CACH;EAEA,MAAM,YAAY,kBAAS,MAAM;AAC/B,UAAO,GAAG,qCAAe,YAAY,SAAS,MAAM,CAAC,EAAE,EAAE,qCAAe,YAAY,SAAS,MAAM,EAAC;EACrG,EAAA;EAED,MAAM,gBAAgB,kBAAS,MAAM;AACnC,UAAO,GAAG,qCAAe,YAAY,SAAS,MAAM,CAAC,CAAC,EAAE,KAAK,MAAM,YAAY,OAAO,MAAM,CAAC,EAAE,EAAE,qCAAe,YAAY,SAAS,MAAM,CAAC,CAAC,EAAE,KAAK,MAAM,YAAY,OAAO,MAAM,EAAC;EACrL,EAAA;;gCAIC,qBAuBY,eAAA,sCAAA,EAAA;aAtBN;IAAJ,KAAI;IACJ,MAAK;IACJ,UAAU,eAAA,YAAW,CAAC,SAAS,iBAAiB;IAChD,cAAY,UAAA;IACb,wBAAqB;IACpB,iBAAe,eAAA,YAAW,CAAC,OAAO,MAAM;IACxC,iBAAe,eAAA,YAAW,CAAC,OAAO,MAAM;IACxC,iBAAe,eAAA,YAAW,CAAC,OAAO;IAClC,kBAAgB,cAAA;IACjB,oBAAiB;IAChB,iBAAe,eAAA,YAAW,CAAC,SAAS,QAAK;IACzC,YAAUA,KAAAA;IACV,IAAIC,KAAAA;IACJ,OAAK,wBAAA;;cAA+C,SAAA,MAAQ,CAAA,CAAA;mBAAyB,SAAA,MAAQ,CAAA,CAAA;;;;;8BAQ9F,MAAQ,CAAR,oBAAQ,KAAA,QAAA,UAAA"}

package/dist/ColorArea/ColorAreaThumb.js

@@ -0,0 +1,85 @@
+import { Primitive } from "../Primitive/Primitive.js";
+import { usePrimitiveElement } from "../Primitive/usePrimitiveElement.js";
+import { getChannelName } from "../color/channel.js";
+import { injectColorAreaRootContext } from "./ColorAreaRoot.js";
+import { convertValueToPercentage } from "./utils.js";
+import { computed, createBlock, defineComponent, normalizeStyle, onMounted, openBlock, renderSlot, unref, withCtx } from "vue";
+
+//#region src/ColorArea/ColorAreaThumb.vue?vue&type=script&setup=true&lang.ts
+var ColorAreaThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorAreaThumb",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = injectColorAreaRootContext();
+		const { primitiveElement, currentElement } = usePrimitiveElement();
+		onMounted(() => {
+			rootContext.thumbRef.value = currentElement.value;
+		});
+		const xPercent = computed(() => convertValueToPercentage(rootContext.xValue.value, rootContext.xRange.value.min, rootContext.xRange.value.max));
+		const yPercent = computed(() => convertValueToPercentage(rootContext.yValue.value, rootContext.yRange.value.min, rootContext.yRange.value.max));
+		const ariaLabel = computed(() => {
+			return `${getChannelName(rootContext.xChannel.value)}, ${getChannelName(rootContext.yChannel.value)}`;
+		});
+		const ariaValueText = computed(() => {
+			return `${getChannelName(rootContext.xChannel.value)} ${Math.round(rootContext.xValue.value)}, ${getChannelName(rootContext.yChannel.value)} ${Math.round(rootContext.yValue.value)}`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				ref_key: "primitiveElement",
+				ref: primitiveElement,
+				role: "slider",
+				tabindex: unref(rootContext).disabled.value ? void 0 : 0,
+				"aria-label": ariaLabel.value,
+				"aria-roledescription": "Color thumb",
+				"aria-valuemin": unref(rootContext).xRange.value.min,
+				"aria-valuemax": unref(rootContext).xRange.value.max,
+				"aria-valuenow": unref(rootContext).xValue.value,
+				"aria-valuetext": ariaValueText.value,
+				"aria-orientation": "horizontal",
+				"data-disabled": unref(rootContext).disabled.value ? "" : void 0,
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				style: normalizeStyle({
+					position: "absolute",
+					left: `${xPercent.value}%`,
+					top: `${100 - yPercent.value}%`,
+					transform: "translate(-50%, -50%)",
+					touchAction: "none"
+				})
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"tabindex",
+				"aria-label",
+				"aria-valuemin",
+				"aria-valuemax",
+				"aria-valuenow",
+				"aria-valuetext",
+				"data-disabled",
+				"as-child",
+				"as",
+				"style"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorArea/ColorAreaThumb.vue
+var ColorAreaThumb_default = ColorAreaThumb_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { ColorAreaThumb_default };
+//# sourceMappingURL=ColorAreaThumb.js.map

package/dist/ColorArea/ColorAreaThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorAreaThumb.js","names":["asChild","as"],"sources":["../../src/ColorArea/ColorAreaThumb.vue","../../src/ColorArea/ColorAreaThumb.vue"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EAId,MAAM,cAAc,4BAA2B;EAC/C,MAAM,EAAE,kBAAkB,gBAAgB,GAAG,qBAAoB;AAEjE,YAAU,MAAM;AACd,eAAY,SAAS,QAAQ,eAAe;EAC7C,EAAA;EAED,MAAM,WAAW,SAAS,MACxB,yBACE,YAAY,OAAO,OACnB,YAAY,OAAO,MAAM,KACzB,YAAY,OAAO,MAAM,IAC1B,CACH;EAEA,MAAM,WAAW,SAAS,MACxB,yBACE,YAAY,OAAO,OACnB,YAAY,OAAO,MAAM,KACzB,YAAY,OAAO,MAAM,IAC1B,CACH;EAEA,MAAM,YAAY,SAAS,MAAM;AAC/B,UAAO,GAAG,eAAe,YAAY,SAAS,MAAM,CAAC,EAAE,EAAE,eAAe,YAAY,SAAS,MAAM,EAAC;EACrG,EAAA;EAED,MAAM,gBAAgB,SAAS,MAAM;AACnC,UAAO,GAAG,eAAe,YAAY,SAAS,MAAM,CAAC,CAAC,EAAE,KAAK,MAAM,YAAY,OAAO,MAAM,CAAC,EAAE,EAAE,eAAe,YAAY,SAAS,MAAM,CAAC,CAAC,EAAE,KAAK,MAAM,YAAY,OAAO,MAAM,EAAC;EACrL,EAAA;;uBAIC,YAuBY,MAAA,UAAA,EAAA;aAtBN;IAAJ,KAAI;IACJ,MAAK;IACJ,UAAU,MAAA,YAAW,CAAC,SAAS,iBAAiB;IAChD,cAAY,UAAA;IACb,wBAAqB;IACpB,iBAAe,MAAA,YAAW,CAAC,OAAO,MAAM;IACxC,iBAAe,MAAA,YAAW,CAAC,OAAO,MAAM;IACxC,iBAAe,MAAA,YAAW,CAAC,OAAO;IAClC,kBAAgB,cAAA;IACjB,oBAAiB;IAChB,iBAAe,MAAA,YAAW,CAAC,SAAS,QAAK;IACzC,YAAUA,KAAAA;IACV,IAAIC,KAAAA;IACJ,OAAK,eAAA;;cAA+C,SAAA,MAAQ,CAAA,CAAA;mBAAyB,SAAA,MAAQ,CAAA,CAAA;;;;;qBAQ9F,MAAQ,CAAR,WAAQ,KAAA,QAAA,UAAA"}

package/dist/ColorArea/utils.cjs

@@ -0,0 +1,32 @@
+const require_shared_clamp = require('../shared/clamp.cjs');
+
+//#region src/ColorArea/utils.ts
+function linearScale(input, output) {
+	return (value) => {
+		if (input[0] === input[1] || output[0] === output[1]) return output[0];
+		const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+		return output[0] + ratio * (value - input[0]);
+	};
+}
+function convertValueToPercentage(value, min, max) {
+	if (max === min) return 0;
+	const maxSteps = max - min;
+	const percentPerStep = 100 / maxSteps;
+	const percentage = percentPerStep * (value - min);
+	return require_shared_clamp.clamp(percentage, 0, 100);
+}
+
+//#endregion
+Object.defineProperty(exports, 'convertValueToPercentage', {
+  enumerable: true,
+  get: function () {
+    return convertValueToPercentage;
+  }
+});
+Object.defineProperty(exports, 'linearScale', {
+  enumerable: true,
+  get: function () {
+    return linearScale;
+  }
+});
+//# sourceMappingURL=utils.cjs.map

package/dist/ColorArea/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","names":["input: readonly [number, number]","output: readonly [number, number]","value: number","min: number","max: number"],"sources":["../../src/ColorArea/utils.ts"],"sourcesContent":[],"mappings":";;;AAGA,SAAgB,YAAYA,OAAkCC,QAAmC;AAC/F,QAAO,CAACC,UAAkB;AACxB,MAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO,GAChD,QAAO,OAAO;EAChB,MAAM,SAAS,OAAO,KAAK,OAAO,OAAO,MAAM,KAAK,MAAM;AAC1D,SAAO,OAAO,KAAK,SAAS,QAAQ,MAAM;CAC3C;AACF;AAED,SAAgB,yBAAyBA,OAAeC,KAAaC,KAAa;AAChF,KAAI,QAAQ,IACV,QAAO;CACT,MAAM,WAAW,MAAM;CACvB,MAAM,iBAAiB,MAAM;CAC7B,MAAM,aAAa,kBAAkB,QAAQ;AAC7C,QAAO,2BAAM,YAAY,GAAG,IAAI;AACjC"}

package/dist/ColorArea/utils.js

@@ -0,0 +1,21 @@
+import { clamp } from "../shared/clamp.js";
+
+//#region src/ColorArea/utils.ts
+function linearScale(input, output) {
+	return (value) => {
+		if (input[0] === input[1] || output[0] === output[1]) return output[0];
+		const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+		return output[0] + ratio * (value - input[0]);
+	};
+}
+function convertValueToPercentage(value, min, max) {
+	if (max === min) return 0;
+	const maxSteps = max - min;
+	const percentPerStep = 100 / maxSteps;
+	const percentage = percentPerStep * (value - min);
+	return clamp(percentage, 0, 100);
+}
+
+//#endregion
+export { convertValueToPercentage, linearScale };
+//# sourceMappingURL=utils.js.map

package/dist/ColorArea/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["input: readonly [number, number]","output: readonly [number, number]","value: number","min: number","max: number"],"sources":["../../src/ColorArea/utils.ts"],"sourcesContent":[],"mappings":";;;AAGA,SAAgB,YAAYA,OAAkCC,QAAmC;AAC/F,QAAO,CAACC,UAAkB;AACxB,MAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO,GAChD,QAAO,OAAO;EAChB,MAAM,SAAS,OAAO,KAAK,OAAO,OAAO,MAAM,KAAK,MAAM;AAC1D,SAAO,OAAO,KAAK,SAAS,QAAQ,MAAM;CAC3C;AACF;AAED,SAAgB,yBAAyBA,OAAeC,KAAaC,KAAa;AAChF,KAAI,QAAQ,IACV,QAAO;CACT,MAAM,WAAW,MAAM;CACvB,MAAM,iBAAiB,MAAM;CAC7B,MAAM,aAAa,kBAAkB,QAAQ;AAC7C,QAAO,MAAM,YAAY,GAAG,IAAI;AACjC"}

package/dist/ColorField/ColorFieldInput.cjs

@@ -0,0 +1,140 @@
+const require_rolldown_runtime = require('../rolldown-runtime.cjs');
+const require_Primitive_Primitive = require('../Primitive/Primitive.cjs');
+const require_ColorField_ColorFieldRoot = require('./ColorFieldRoot.cjs');
+const vue = require_rolldown_runtime.__toESM(require("vue"));
+
+//#region src/ColorField/ColorFieldInput.vue?vue&type=script&setup=true&lang.ts
+var ColorFieldInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ColorFieldInput",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "input"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = require_ColorField_ColorFieldRoot.injectColorFieldRootContext();
+		const isFocused = (0, vue.ref)(false);
+		const inputType = (0, vue.computed)(() => {
+			return rootContext.channel.value ? "text" : "text";
+		});
+		const inputMode = (0, vue.computed)(() => {
+			return rootContext.channel.value ? "numeric" : "text";
+		});
+		function handleInput(event) {
+			const target = event.target;
+			rootContext.updateValue(target.value);
+		}
+		function handleBlur() {
+			isFocused.value = false;
+			rootContext.commit();
+		}
+		function handleFocus() {
+			isFocused.value = true;
+		}
+		function handleWheel(event) {
+			if (!isFocused.value) return;
+			rootContext.handleWheel(event);
+		}
+		function handleKeydown(event) {
+			switch (event.key) {
+				case "ArrowUp":
+					event.preventDefault();
+					rootContext.increment();
+					break;
+				case "ArrowDown":
+					event.preventDefault();
+					rootContext.decrement();
+					break;
+				case "PageUp":
+					event.preventDefault();
+					rootContext.incrementPage();
+					break;
+				case "PageDown":
+					event.preventDefault();
+					rootContext.decrementPage();
+					break;
+				case "Home":
+					event.preventDefault();
+					rootContext.decrementToMin();
+					break;
+				case "End":
+					event.preventDefault();
+					rootContext.incrementToMax();
+					break;
+				case "Enter":
+					event.preventDefault();
+					rootContext.commit();
+					break;
+			}
+		}
+		function handleBeforeInput(event) {
+			if (!rootContext.channel.value) return;
+			const target = event.target;
+			const data = event.data;
+			if (data && !/[\d.-]/.test(data)) {
+				event.preventDefault();
+				return;
+			}
+			const nextValue = target.value.slice(0, target.selectionStart ?? void 0) + (data ?? "") + target.value.slice(target.selectionEnd ?? void 0);
+			if (nextValue === "-" || nextValue === "." || nextValue === "-.") return;
+			const numValue = parseFloat(nextValue);
+			if (isNaN(numValue)) event.preventDefault();
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive_Primitive.Primitive), {
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				type: inputType.value,
+				inputmode: inputMode.value,
+				value: (0, vue.unref)(rootContext).inputValue.value,
+				placeholder: (0, vue.unref)(rootContext).placeholder.value,
+				disabled: (0, vue.unref)(rootContext).disabled.value,
+				readonly: (0, vue.unref)(rootContext).readonly.value,
+				"data-disabled": (0, vue.unref)(rootContext).disabled.value ? "" : void 0,
+				"data-readonly": (0, vue.unref)(rootContext).readonly.value ? "" : void 0,
+				"aria-invalid": !(0, vue.unref)(rootContext).channel.value ? void 0 : void 0,
+				onInput: handleInput,
+				onBlur: handleBlur,
+				onFocus: handleFocus,
+				onKeydown: handleKeydown,
+				onWheel: handleWheel,
+				onBeforeinput: handleBeforeInput
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as-child",
+				"as",
+				"type",
+				"inputmode",
+				"value",
+				"placeholder",
+				"disabled",
+				"readonly",
+				"data-disabled",
+				"data-readonly",
+				"aria-invalid"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorField/ColorFieldInput.vue
+var ColorFieldInput_default = ColorFieldInput_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+Object.defineProperty(exports, 'ColorFieldInput_default', {
+  enumerable: true,
+  get: function () {
+    return ColorFieldInput_default;
+  }
+});
+//# sourceMappingURL=ColorFieldInput.cjs.map

package/dist/ColorField/ColorFieldInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorFieldInput.cjs","names":["asChild","as"],"sources":["../../src/ColorField/ColorFieldInput.vue","../../src/ColorField/ColorFieldInput.vue"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAId,MAAM,cAAc,+DAA4B;EAEhD,MAAM,YAAY,aAAI,MAAK;EAE3B,MAAM,YAAY,kBAAS,MAAM;AAC/B,UAAO,YAAY,QAAQ,QAAQ,SAAS;EAC7C,EAAA;EAED,MAAM,YAAY,kBAAS,MAAM;AAC/B,UAAO,YAAY,QAAQ,QAAQ,YAAY;EAChD,EAAA;EAED,SAAS,YAAY,OAAc;GACjC,MAAM,SAAS,MAAM;AACrB,eAAY,YAAY,OAAO,MAAK;EACtC;EAEA,SAAS,aAAa;AACpB,aAAU,QAAQ;AAClB,eAAY,QAAO;EACrB;EAEA,SAAS,cAAc;AACrB,aAAU,QAAQ;EACpB;EAEA,SAAS,YAAY,OAAmB;AACtC,QAAK,UAAU,MACb;AACF,eAAY,YAAY,MAAK;EAC/B;EAEA,SAAS,cAAc,OAAsB;AAC3C,WAAQ,MAAM,KAAd;IACE,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,WAAU;AACtB;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,WAAU;AACtB;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,eAAc;AAC1B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,eAAc;AAC1B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,gBAAe;AAC3B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,gBAAe;AAC3B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,QAAO;AACnB;GACJ;EACF;EAGA,SAAS,kBAAkB,OAAmB;AAC5C,QAAK,YAAY,QAAQ,MACvB;GAEF,MAAM,SAAS,MAAM;GACrB,MAAM,OAAO,MAAM;AAGnB,OAAI,SAAS,SAAS,KAAK,KAAK,EAAE;AAChC,UAAM,gBAAe;AACrB;GACF;GAGA,MAAM,YAAY,OAAO,MAAM,MAAM,GAAG,OAAO,yBAA2B,IACrE,QAAQ,MACT,OAAO,MAAM,MAAM,OAAO,uBAAyB;AAGvD,OAAI,cAAc,OAAO,cAAc,OAAO,cAAc,KAC1D;GAEF,MAAM,WAAW,WAAW,UAAS;AACrC,OAAI,MAAM,SAAS,CACjB,OAAM,gBAAe;EAEzB;;gCAIE,qBAoBY,eAAA,sCAAA,EAAA;IAnBT,YAAUA,KAAAA;IACV,IAAIC,KAAAA;IACJ,MAAM,UAAA;IACN,WAAW,UAAA;IACX,OAAO,eAAA,YAAW,CAAC,WAAW;IAC9B,aAAa,eAAA,YAAW,CAAC,YAAY;IACrC,UAAU,eAAA,YAAW,CAAC,SAAS;IAC/B,UAAU,eAAA,YAAW,CAAC,SAAS;IAC/B,iBAAe,eAAA,YAAW,CAAC,SAAS,QAAK;IACzC,iBAAe,eAAA,YAAW,CAAC,SAAS,QAAK;IACzC,iBAAe,eAAA,YAAW,CAAC,QAAQ;IACnC,SAAO;IACP,QAAM;IACN,SAAO;IACP,WAAS;IACT,SAAO;IACP,eAAa;;8BAEd,MAAQ,CAAR,oBAAQ,KAAA,QAAA,UAAA"}

package/dist/ColorField/ColorFieldInput.js

@@ -0,0 +1,134 @@
+import { Primitive } from "../Primitive/Primitive.js";
+import { injectColorFieldRootContext } from "./ColorFieldRoot.js";
+import { computed, createBlock, defineComponent, openBlock, ref, renderSlot, unref, withCtx } from "vue";
+
+//#region src/ColorField/ColorFieldInput.vue?vue&type=script&setup=true&lang.ts
+var ColorFieldInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorFieldInput",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "input"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = injectColorFieldRootContext();
+		const isFocused = ref(false);
+		const inputType = computed(() => {
+			return rootContext.channel.value ? "text" : "text";
+		});
+		const inputMode = computed(() => {
+			return rootContext.channel.value ? "numeric" : "text";
+		});
+		function handleInput(event) {
+			const target = event.target;
+			rootContext.updateValue(target.value);
+		}
+		function handleBlur() {
+			isFocused.value = false;
+			rootContext.commit();
+		}
+		function handleFocus() {
+			isFocused.value = true;
+		}
+		function handleWheel(event) {
+			if (!isFocused.value) return;
+			rootContext.handleWheel(event);
+		}
+		function handleKeydown(event) {
+			switch (event.key) {
+				case "ArrowUp":
+					event.preventDefault();
+					rootContext.increment();
+					break;
+				case "ArrowDown":
+					event.preventDefault();
+					rootContext.decrement();
+					break;
+				case "PageUp":
+					event.preventDefault();
+					rootContext.incrementPage();
+					break;
+				case "PageDown":
+					event.preventDefault();
+					rootContext.decrementPage();
+					break;
+				case "Home":
+					event.preventDefault();
+					rootContext.decrementToMin();
+					break;
+				case "End":
+					event.preventDefault();
+					rootContext.incrementToMax();
+					break;
+				case "Enter":
+					event.preventDefault();
+					rootContext.commit();
+					break;
+			}
+		}
+		function handleBeforeInput(event) {
+			if (!rootContext.channel.value) return;
+			const target = event.target;
+			const data = event.data;
+			if (data && !/[\d.-]/.test(data)) {
+				event.preventDefault();
+				return;
+			}
+			const nextValue = target.value.slice(0, target.selectionStart ?? void 0) + (data ?? "") + target.value.slice(target.selectionEnd ?? void 0);
+			if (nextValue === "-" || nextValue === "." || nextValue === "-.") return;
+			const numValue = parseFloat(nextValue);
+			if (isNaN(numValue)) event.preventDefault();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				type: inputType.value,
+				inputmode: inputMode.value,
+				value: unref(rootContext).inputValue.value,
+				placeholder: unref(rootContext).placeholder.value,
+				disabled: unref(rootContext).disabled.value,
+				readonly: unref(rootContext).readonly.value,
+				"data-disabled": unref(rootContext).disabled.value ? "" : void 0,
+				"data-readonly": unref(rootContext).readonly.value ? "" : void 0,
+				"aria-invalid": !unref(rootContext).channel.value ? void 0 : void 0,
+				onInput: handleInput,
+				onBlur: handleBlur,
+				onFocus: handleFocus,
+				onKeydown: handleKeydown,
+				onWheel: handleWheel,
+				onBeforeinput: handleBeforeInput
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as-child",
+				"as",
+				"type",
+				"inputmode",
+				"value",
+				"placeholder",
+				"disabled",
+				"readonly",
+				"data-disabled",
+				"data-readonly",
+				"aria-invalid"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorField/ColorFieldInput.vue
+var ColorFieldInput_default = ColorFieldInput_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { ColorFieldInput_default };
+//# sourceMappingURL=ColorFieldInput.js.map

package/dist/ColorField/ColorFieldInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorFieldInput.js","names":["asChild","as"],"sources":["../../src/ColorField/ColorFieldInput.vue","../../src/ColorField/ColorFieldInput.vue"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAId,MAAM,cAAc,6BAA4B;EAEhD,MAAM,YAAY,IAAI,MAAK;EAE3B,MAAM,YAAY,SAAS,MAAM;AAC/B,UAAO,YAAY,QAAQ,QAAQ,SAAS;EAC7C,EAAA;EAED,MAAM,YAAY,SAAS,MAAM;AAC/B,UAAO,YAAY,QAAQ,QAAQ,YAAY;EAChD,EAAA;EAED,SAAS,YAAY,OAAc;GACjC,MAAM,SAAS,MAAM;AACrB,eAAY,YAAY,OAAO,MAAK;EACtC;EAEA,SAAS,aAAa;AACpB,aAAU,QAAQ;AAClB,eAAY,QAAO;EACrB;EAEA,SAAS,cAAc;AACrB,aAAU,QAAQ;EACpB;EAEA,SAAS,YAAY,OAAmB;AACtC,QAAK,UAAU,MACb;AACF,eAAY,YAAY,MAAK;EAC/B;EAEA,SAAS,cAAc,OAAsB;AAC3C,WAAQ,MAAM,KAAd;IACE,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,WAAU;AACtB;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,WAAU;AACtB;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,eAAc;AAC1B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,eAAc;AAC1B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,gBAAe;AAC3B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,gBAAe;AAC3B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,QAAO;AACnB;GACJ;EACF;EAGA,SAAS,kBAAkB,OAAmB;AAC5C,QAAK,YAAY,QAAQ,MACvB;GAEF,MAAM,SAAS,MAAM;GACrB,MAAM,OAAO,MAAM;AAGnB,OAAI,SAAS,SAAS,KAAK,KAAK,EAAE;AAChC,UAAM,gBAAe;AACrB;GACF;GAGA,MAAM,YAAY,OAAO,MAAM,MAAM,GAAG,OAAO,yBAA2B,IACrE,QAAQ,MACT,OAAO,MAAM,MAAM,OAAO,uBAAyB;AAGvD,OAAI,cAAc,OAAO,cAAc,OAAO,cAAc,KAC1D;GAEF,MAAM,WAAW,WAAW,UAAS;AACrC,OAAI,MAAM,SAAS,CACjB,OAAM,gBAAe;EAEzB;;uBAIE,YAoBY,MAAA,UAAA,EAAA;IAnBT,YAAUA,KAAAA;IACV,IAAIC,KAAAA;IACJ,MAAM,UAAA;IACN,WAAW,UAAA;IACX,OAAO,MAAA,YAAW,CAAC,WAAW;IAC9B,aAAa,MAAA,YAAW,CAAC,YAAY;IACrC,UAAU,MAAA,YAAW,CAAC,SAAS;IAC/B,UAAU,MAAA,YAAW,CAAC,SAAS;IAC/B,iBAAe,MAAA,YAAW,CAAC,SAAS,QAAK;IACzC,iBAAe,MAAA,YAAW,CAAC,SAAS,QAAK;IACzC,iBAAe,MAAA,YAAW,CAAC,QAAQ;IACnC,SAAO;IACP,QAAM;IACN,SAAO;IACP,WAAS;IACT,SAAO;IACP,eAAa;;qBAEd,MAAQ,CAAR,WAAQ,KAAA,QAAA,UAAA"}