reka-ui 2.8.2 → 2.9.1

package/dist/ColorArea/ColorAreaRoot.cjs

@@ -0,0 +1,240 @@
+const require_rolldown_runtime = require('../rolldown-runtime.cjs');
+const require_shared_createContext = require('../shared/createContext.cjs');
+const require_shared_useFormControl = require('../shared/useFormControl.cjs');
+const require_shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
+const require_Primitive_Primitive = require('../Primitive/Primitive.cjs');
+const require_VisuallyHidden_VisuallyHiddenInput = require('../VisuallyHidden/VisuallyHiddenInput.cjs');
+const require_color_convert = require('../color/convert.cjs');
+const require_color_channel = require('../color/channel.cjs');
+const require_color_gradient = require('../color/gradient.cjs');
+const require_color_parse = require('../color/parse.cjs');
+const vue = require_rolldown_runtime.__toESM(require("vue"));
+const __vueuse_core = require_rolldown_runtime.__toESM(require("@vueuse/core"));
+
+//#region src/ColorArea/ColorAreaRoot.vue?vue&type=script&setup=true&lang.ts
+const [injectColorAreaRootContext, provideColorAreaRootContext] = require_shared_createContext.createContext("ColorAreaRoot");
+var ColorAreaRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "ColorAreaRoot",
+	props: {
+		modelValue: {
+			type: [String, Object],
+			required: false
+		},
+		defaultValue: {
+			type: [String, Object],
+			required: false,
+			default: "#ff0000"
+		},
+		colorSpace: {
+			type: String,
+			required: false,
+			default: "hsl"
+		},
+		xChannel: {
+			type: String,
+			required: false,
+			default: "hue"
+		},
+		yChannel: {
+			type: String,
+			required: false,
+			default: "saturation"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		xName: {
+			type: String,
+			required: false
+		},
+		yName: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:color",
+		"change",
+		"changeEnd"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { colorSpace, xChannel, yChannel, disabled } = (0, vue.toRefs)(props);
+		const { forwardRef, currentElement } = require_shared_useForwardExpose.useForwardExpose();
+		const isFormControl = require_shared_useFormControl.useFormControl(currentElement);
+		const modelValue = (0, __vueuse_core.useVModel)(props, "modelValue", emits, {
+			defaultValue: props.defaultValue,
+			passive: props.modelValue === void 0
+		});
+		const color = (0, vue.computed)({
+			get: () => require_color_parse.normalizeColor(modelValue.value ?? "#000000"),
+			set: (newColor) => {
+				const hexString = require_color_convert.colorToString(newColor, "hex");
+				modelValue.value = hexString;
+				emits("update:color", newColor);
+			}
+		});
+		const xRange = (0, vue.computed)(() => require_color_channel.getChannelRange(xChannel.value));
+		const yRange = (0, vue.computed)(() => require_color_channel.getChannelRange(yChannel.value));
+		const xValue = (0, vue.ref)(Math.round(require_color_channel.getChannelValue(color.value, xChannel.value)));
+		const yValue = (0, vue.ref)(Math.round(require_color_channel.getChannelValue(color.value, yChannel.value)));
+		const hueValue = (0, vue.ref)(colorSpace.value === "hsl" ? require_color_convert.convertToHsl(color.value).h : colorSpace.value === "hsb" ? require_color_convert.convertToHsb(color.value).h : 0);
+		let isUpdating = false;
+		(0, vue.watch)(() => color.value, (newColor) => {
+			if (isUpdating) return;
+			const newX = Math.round(require_color_channel.getChannelValue(newColor, xChannel.value));
+			const newY = Math.round(require_color_channel.getChannelValue(newColor, yChannel.value));
+			if (Math.round(xValue.value) !== newX) xValue.value = newX;
+			if (Math.round(yValue.value) !== newY) yValue.value = newY;
+			if (colorSpace.value === "hsl") {
+				const hsl = require_color_convert.convertToHsl(newColor);
+				if (hsl.s > 0) hueValue.value = hsl.h;
+			} else if (colorSpace.value === "hsb") {
+				const hsb = require_color_convert.convertToHsb(newColor);
+				if (hsb.s > 0) hueValue.value = hsb.h;
+			}
+		}, { immediate: true });
+		const areaStyles = (0, vue.computed)(() => {
+			let bgColor = color.value;
+			if (colorSpace.value === "hsl" || colorSpace.value === "hsb") if (colorSpace.value === "hsl") bgColor = {
+				space: "hsl",
+				h: hueValue.value,
+				s: 100,
+				l: 50,
+				alpha: 1
+			};
+			else bgColor = {
+				space: "hsb",
+				h: hueValue.value,
+				s: 100,
+				b: 100,
+				alpha: 1
+			};
+			return require_color_gradient.getAreaBackgroundStyle(bgColor, xChannel.value, yChannel.value, colorSpace.value);
+		});
+		function updateValues(x, y) {
+			const clampedX = Math.max(xRange.value.min, Math.min(xRange.value.max, x));
+			const clampedY = Math.max(yRange.value.min, Math.min(yRange.value.max, y));
+			xValue.value = clampedX;
+			yValue.value = clampedY;
+			isUpdating = true;
+			const channels = [{
+				channel: xChannel.value,
+				value: clampedX
+			}, {
+				channel: yChannel.value,
+				value: clampedY
+			}];
+			const usesHueAxis = xChannel.value === "hue" || yChannel.value === "hue";
+			if (!usesHueAxis && (colorSpace.value === "hsl" || colorSpace.value === "hsb")) channels.push({
+				channel: "hue",
+				value: hueValue.value
+			});
+			color.value = require_color_channel.setChannelValues(color.value, channels);
+			(0, vue.nextTick)(() => {
+				isUpdating = false;
+			});
+		}
+		function commitValues() {
+			emits("changeEnd", require_color_convert.colorToString(color.value, "hex"));
+		}
+		const thumbRef = (0, vue.ref)();
+		provideColorAreaRootContext({
+			color: (0, vue.computed)(() => color.value),
+			xValue,
+			yValue,
+			xChannel,
+			yChannel,
+			colorSpace,
+			disabled,
+			xRange,
+			yRange,
+			thumbRef,
+			updateValues,
+			commitValues
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive_Primitive.Primitive), {
+				ref: (0, vue.unref)(forwardRef),
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				role: "group",
+				"aria-disabled": (0, vue.unref)(disabled) ? "true" : void 0,
+				"data-disabled": (0, vue.unref)(disabled) ? "" : void 0
+			}, {
+				default: (0, vue.withCtx)(() => [
+					(0, vue.renderSlot)(_ctx.$slots, "default", { style: (0, vue.normalizeStyle)(areaStyles.value) }),
+					(0, vue.unref)(isFormControl) && _ctx.xName ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_VisuallyHidden_VisuallyHiddenInput.VisuallyHiddenInput_default), {
+						key: 0,
+						type: "text",
+						value: xValue.value,
+						name: _ctx.xName,
+						disabled: (0, vue.unref)(disabled)
+					}, null, 8, [
+						"value",
+						"name",
+						"disabled"
+					])) : (0, vue.createCommentVNode)("v-if", true),
+					(0, vue.unref)(isFormControl) && _ctx.yName ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_VisuallyHidden_VisuallyHiddenInput.VisuallyHiddenInput_default), {
+						key: 1,
+						type: "text",
+						value: yValue.value,
+						name: _ctx.yName,
+						disabled: (0, vue.unref)(disabled)
+					}, null, 8, [
+						"value",
+						"name",
+						"disabled"
+					])) : (0, vue.createCommentVNode)("v-if", true)
+				]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"aria-disabled",
+				"data-disabled"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorArea/ColorAreaRoot.vue
+var ColorAreaRoot_default = ColorAreaRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+Object.defineProperty(exports, 'ColorAreaRoot_default', {
+  enumerable: true,
+  get: function () {
+    return ColorAreaRoot_default;
+  }
+});
+Object.defineProperty(exports, 'injectColorAreaRootContext', {
+  enumerable: true,
+  get: function () {
+    return injectColorAreaRootContext;
+  }
+});
+//# sourceMappingURL=ColorAreaRoot.cjs.map

package/dist/ColorArea/ColorAreaRoot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorAreaRoot.cjs","names":["as","asChild","xName","yName"],"sources":["../../src/ColorArea/ColorAreaRoot.vue","../../src/ColorArea/ColorAreaRoot.vue"],"sourcesContent":[],"mappings":"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"}

package/dist/ColorArea/ColorAreaRoot.js

@@ -0,0 +1,228 @@
+import { createContext } from "../shared/createContext.js";
+import { useFormControl } from "../shared/useFormControl.js";
+import { useForwardExpose } from "../shared/useForwardExpose.js";
+import { Primitive } from "../Primitive/Primitive.js";
+import { VisuallyHiddenInput_default } from "../VisuallyHidden/VisuallyHiddenInput.js";
+import { colorToString, convertToHsb, convertToHsl } from "../color/convert.js";
+import { getChannelRange, getChannelValue, setChannelValues } from "../color/channel.js";
+import { getAreaBackgroundStyle } from "../color/gradient.js";
+import { normalizeColor } from "../color/parse.js";
+import { computed, createBlock, createCommentVNode, defineComponent, nextTick, normalizeStyle, openBlock, ref, renderSlot, toRefs, unref, watch, withCtx } from "vue";
+import { useVModel } from "@vueuse/core";
+
+//#region src/ColorArea/ColorAreaRoot.vue?vue&type=script&setup=true&lang.ts
+const [injectColorAreaRootContext, provideColorAreaRootContext] = createContext("ColorAreaRoot");
+var ColorAreaRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ColorAreaRoot",
+	props: {
+		modelValue: {
+			type: [String, Object],
+			required: false
+		},
+		defaultValue: {
+			type: [String, Object],
+			required: false,
+			default: "#ff0000"
+		},
+		colorSpace: {
+			type: String,
+			required: false,
+			default: "hsl"
+		},
+		xChannel: {
+			type: String,
+			required: false,
+			default: "hue"
+		},
+		yChannel: {
+			type: String,
+			required: false,
+			default: "saturation"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		xName: {
+			type: String,
+			required: false
+		},
+		yName: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:color",
+		"change",
+		"changeEnd"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { colorSpace, xChannel, yChannel, disabled } = toRefs(props);
+		const { forwardRef, currentElement } = useForwardExpose();
+		const isFormControl = useFormControl(currentElement);
+		const modelValue = useVModel(props, "modelValue", emits, {
+			defaultValue: props.defaultValue,
+			passive: props.modelValue === void 0
+		});
+		const color = computed({
+			get: () => normalizeColor(modelValue.value ?? "#000000"),
+			set: (newColor) => {
+				const hexString = colorToString(newColor, "hex");
+				modelValue.value = hexString;
+				emits("update:color", newColor);
+			}
+		});
+		const xRange = computed(() => getChannelRange(xChannel.value));
+		const yRange = computed(() => getChannelRange(yChannel.value));
+		const xValue = ref(Math.round(getChannelValue(color.value, xChannel.value)));
+		const yValue = ref(Math.round(getChannelValue(color.value, yChannel.value)));
+		const hueValue = ref(colorSpace.value === "hsl" ? convertToHsl(color.value).h : colorSpace.value === "hsb" ? convertToHsb(color.value).h : 0);
+		let isUpdating = false;
+		watch(() => color.value, (newColor) => {
+			if (isUpdating) return;
+			const newX = Math.round(getChannelValue(newColor, xChannel.value));
+			const newY = Math.round(getChannelValue(newColor, yChannel.value));
+			if (Math.round(xValue.value) !== newX) xValue.value = newX;
+			if (Math.round(yValue.value) !== newY) yValue.value = newY;
+			if (colorSpace.value === "hsl") {
+				const hsl = convertToHsl(newColor);
+				if (hsl.s > 0) hueValue.value = hsl.h;
+			} else if (colorSpace.value === "hsb") {
+				const hsb = convertToHsb(newColor);
+				if (hsb.s > 0) hueValue.value = hsb.h;
+			}
+		}, { immediate: true });
+		const areaStyles = computed(() => {
+			let bgColor = color.value;
+			if (colorSpace.value === "hsl" || colorSpace.value === "hsb") if (colorSpace.value === "hsl") bgColor = {
+				space: "hsl",
+				h: hueValue.value,
+				s: 100,
+				l: 50,
+				alpha: 1
+			};
+			else bgColor = {
+				space: "hsb",
+				h: hueValue.value,
+				s: 100,
+				b: 100,
+				alpha: 1
+			};
+			return getAreaBackgroundStyle(bgColor, xChannel.value, yChannel.value, colorSpace.value);
+		});
+		function updateValues(x, y) {
+			const clampedX = Math.max(xRange.value.min, Math.min(xRange.value.max, x));
+			const clampedY = Math.max(yRange.value.min, Math.min(yRange.value.max, y));
+			xValue.value = clampedX;
+			yValue.value = clampedY;
+			isUpdating = true;
+			const channels = [{
+				channel: xChannel.value,
+				value: clampedX
+			}, {
+				channel: yChannel.value,
+				value: clampedY
+			}];
+			const usesHueAxis = xChannel.value === "hue" || yChannel.value === "hue";
+			if (!usesHueAxis && (colorSpace.value === "hsl" || colorSpace.value === "hsb")) channels.push({
+				channel: "hue",
+				value: hueValue.value
+			});
+			color.value = setChannelValues(color.value, channels);
+			nextTick(() => {
+				isUpdating = false;
+			});
+		}
+		function commitValues() {
+			emits("changeEnd", colorToString(color.value, "hex"));
+		}
+		const thumbRef = ref();
+		provideColorAreaRootContext({
+			color: computed(() => color.value),
+			xValue,
+			yValue,
+			xChannel,
+			yChannel,
+			colorSpace,
+			disabled,
+			xRange,
+			yRange,
+			thumbRef,
+			updateValues,
+			commitValues
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				ref: unref(forwardRef),
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				role: "group",
+				"aria-disabled": unref(disabled) ? "true" : void 0,
+				"data-disabled": unref(disabled) ? "" : void 0
+			}, {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "default", { style: normalizeStyle(areaStyles.value) }),
+					unref(isFormControl) && _ctx.xName ? (openBlock(), createBlock(unref(VisuallyHiddenInput_default), {
+						key: 0,
+						type: "text",
+						value: xValue.value,
+						name: _ctx.xName,
+						disabled: unref(disabled)
+					}, null, 8, [
+						"value",
+						"name",
+						"disabled"
+					])) : createCommentVNode("v-if", true),
+					unref(isFormControl) && _ctx.yName ? (openBlock(), createBlock(unref(VisuallyHiddenInput_default), {
+						key: 1,
+						type: "text",
+						value: yValue.value,
+						name: _ctx.yName,
+						disabled: unref(disabled)
+					}, null, 8, [
+						"value",
+						"name",
+						"disabled"
+					])) : createCommentVNode("v-if", true)
+				]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"aria-disabled",
+				"data-disabled"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorArea/ColorAreaRoot.vue
+var ColorAreaRoot_default = ColorAreaRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { ColorAreaRoot_default, injectColorAreaRootContext };
+//# sourceMappingURL=ColorAreaRoot.js.map

package/dist/ColorArea/ColorAreaRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorAreaRoot.js","names":["as","asChild","xName","yName"],"sources":["../../src/ColorArea/ColorAreaRoot.vue","../../src/ColorArea/ColorAreaRoot.vue"],"sourcesContent":[],"mappings":"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"}

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"}