@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/color-picker/color-picker.presentation.js

@@ -0,0 +1,761 @@
+import { isOpenPhase, startOpen, valueAsString } from "./color-picker.state.js";
+import { colorPicker as colorPicker$1 } from "./color-picker.machine.js";
+import { ariaDisabled, ariaHidden, ariaLabelledBy, ariaOrientation, ariaRoleDescription, dataAttr, defineComponent, disclosureTrigger, isComposing, isRecord, sliderThumb } from "@spinjs/runtime";
+import { parseColor } from "@zag-js/color-utils";
+// src/color-picker/color-picker.presentation.ts
+const isColorFormat = (raw) => raw === "hex" || raw === "hexa" || raw === "rgb" || raw === "rgba" || raw === "hsl" || raw === "hsla" || raw === "hsb" || raw === "hsba";
+const openOf = (scope) => isOpenPhase(scope.state, scope.context.inline);
+const colorOf = (scope) => {
+	try {
+		return parseColor(scope.context.value);
+	} catch {
+		return parseColor("#000000");
+	}
+};
+const CHANNELS = [
+	"hue",
+	"saturation",
+	"brightness",
+	"lightness",
+	"red",
+	"green",
+	"blue",
+	"alpha"
+];
+const isChannel = (raw) => typeof raw === "string" && CHANNELS.includes(raw);
+const areaChannels = (slot) => {
+	const x = isRecord(slot) ? slot["xChannel"] : void 0;
+	const y = isRecord(slot) ? slot["yChannel"] : void 0;
+	return {
+		x: isChannel(x) ? x : "saturation",
+		y: isChannel(y) ? y : "brightness"
+	};
+};
+const textOf = (target) => {
+	if (!isRecord(target)) return "";
+	const value = target["value"];
+	return typeof value === "string" ? value : "";
+};
+/** Whether the platform ships the eyedropper: a feature check, never assumed. */
+const eyeDropperSupported = () => {
+	const api = Reflect.get(globalThis, "EyeDropper");
+	return api !== void 0 && api !== null;
+};
+const selectText = (target) => {
+	if (!isRecord(target)) return;
+	const select = target["select"];
+	if (typeof select === "function") select.call(target);
+};
+const channelOf = (arg) => {
+	const channel = isRecord(arg) ? arg["channel"] : void 0;
+	const orientation = isRecord(arg) ? arg["orientation"] : void 0;
+	return {
+		channel: isChannel(channel) ? channel : "hue",
+		...orientation === "vertical" || orientation === "horizontal" ? { orientation } : {}
+	};
+};
+const swatchOf = (arg) => {
+	if (!isRecord(arg)) return { value: "" };
+	const value = arg["value"];
+	const disabled = arg["disabled"];
+	return {
+		value: typeof value === "string" ? value : "",
+		...disabled === true ? { disabled: true } : {}
+	};
+};
+const hexSlotOf = (arg) => {
+	const channel = isRecord(arg) ? arg["channel"] : void 0;
+	return { channel: channel === "hex" || isChannel(channel) ? channel : "hex" };
+};
+const areaPropsOf = (arg) => {
+	if (!isRecord(arg)) return {};
+	const x = arg["xChannel"];
+	const y = arg["yChannel"];
+	return {
+		...isChannel(x) ? { xChannel: x } : {},
+		...isChannel(y) ? { yChannel: y } : {}
+	};
+};
+/** Percent of a pointer within a measured rect, 0..1 on each axis. The rect
+* comes from the framework measure or the event's own node — defs never
+* query the document. */
+const pointPercent = (rect, clientX, clientY) => {
+	if (rect === null || rect.width === 0 || rect.height === 0) return {
+		x: 0,
+		y: 0
+	};
+	const clamp = (n) => Math.min(1, Math.max(0, n));
+	return {
+		x: clamp((clientX - rect.left) / rect.width),
+		y: clamp((clientY - rect.top) / rect.height)
+	};
+};
+const trackPercent = (rect, orientation, clientX, clientY, dir) => {
+	if (rect === null) return 0;
+	const clamp = (n) => Math.min(1, Math.max(0, n));
+	if (orientation === "vertical") return clamp((clientY - rect.top) / rect.height);
+	const raw = clamp((clientX - rect.left) / rect.width);
+	return dir === "rtl" ? 1 - raw : raw;
+};
+/** The arrow step: shift multiplies by ten, like a native range input. */
+const arrowStep = (event) => event.shiftKey ? 10 : 1;
+const onAreaKeydown = (scope, event) => {
+	if (event.defaultPrevented) return;
+	if (scope.context.disabled === true || scope.context.readOnly === true) return;
+	if (isComposing(event)) return;
+	const step = arrowStep(event);
+	switch (event.key) {
+		case "ArrowLeft":
+			event.preventDefault();
+			scope.send({
+				type: "AREA.ARROW",
+				channel: "x",
+				delta: scope.context.dir === "rtl" ? step : -step
+			});
+			return;
+		case "ArrowRight":
+			event.preventDefault();
+			scope.send({
+				type: "AREA.ARROW",
+				channel: "x",
+				delta: scope.context.dir === "rtl" ? -step : step
+			});
+			return;
+		case "ArrowUp":
+			event.preventDefault();
+			scope.send({
+				type: "AREA.ARROW",
+				channel: "y",
+				delta: step
+			});
+			return;
+		case "ArrowDown":
+			event.preventDefault();
+			scope.send({
+				type: "AREA.ARROW",
+				channel: "y",
+				delta: -step
+			});
+			return;
+		case "Home":
+			event.preventDefault();
+			scope.send({
+				type: "AREA.HOME_END",
+				channel: "x",
+				toMax: false
+			});
+			return;
+		case "End":
+			event.preventDefault();
+			scope.send({
+				type: "AREA.HOME_END",
+				channel: "x",
+				toMax: true
+			});
+			return;
+		default: return;
+	}
+};
+const onChannelKeydown = (scope, event, channel) => {
+	if (event.defaultPrevented) return;
+	if (scope.context.disabled === true || scope.context.readOnly === true) return;
+	if (isComposing(event)) return;
+	const step = arrowStep(event);
+	switch (event.key) {
+		case "ArrowLeft":
+		case "ArrowDown":
+			event.preventDefault();
+			scope.send({
+				type: "CHANNEL_SLIDER.ARROW",
+				channel,
+				delta: -step
+			});
+			return;
+		case "ArrowRight":
+		case "ArrowUp":
+			event.preventDefault();
+			scope.send({
+				type: "CHANNEL_SLIDER.ARROW",
+				channel,
+				delta: step
+			});
+			return;
+		case "Home":
+			event.preventDefault();
+			scope.send({
+				type: "CHANNEL_SLIDER.HOME_END",
+				channel,
+				toMax: false
+			});
+			return;
+		case "End":
+			event.preventDefault();
+			scope.send({
+				type: "CHANNEL_SLIDER.HOME_END",
+				channel,
+				toMax: true
+			});
+			return;
+		default: return;
+	}
+};
+const swatchState = (scope, slot) => ({
+	value: slot.value,
+	disabled: scope.context.disabled === true || slot.disabled === true,
+	checked: scope.context.value.toLowerCase() === slot.value.toLowerCase()
+});
+const channelValueOf = (context, channel) => {
+	const ctx = context;
+	let color;
+	try {
+		color = parseColor(ctx.value);
+	} catch {
+		color = parseColor("#000000");
+	}
+	if (channel === "hex") try {
+		return color.toString("hex");
+	} catch {
+		return ctx.value;
+	}
+	try {
+		const area = ctx.format.startsWith("hsl") ? "hsla" : "hsba";
+		const source = channel === "alpha" ? color : color.toFormat(area);
+		return String(source.getChannelValue(channel));
+	} catch {
+		return "";
+	}
+};
+const def = {
+	name: "color-picker",
+	machine: (args, authored) => colorPicker$1(args, authored),
+	start: (raw) => startOpen(raw) ? "active" : "idle",
+	reconcile: ({ context, parsed, authored, send, state }) => {
+		if (authored("open")) {
+			const outer = parsed["open"] === true;
+			if (isOpenPhase(state, context.inline) !== outer) {
+				send(outer ? { type: "CONTROLLED.OPEN" } : { type: "CONTROLLED.CLOSE" });
+				return true;
+			}
+		}
+		return false;
+	},
+	parts: {
+		root: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-disabled": dataAttr(scope.context.disabled === true)
+		}) },
+		label: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-disabled": dataAttr(scope.context.disabled === true)
+		}) },
+		control: { attrs: (scope) => ({ "data-disabled": dataAttr(scope.context.disabled === true) }) },
+		trigger: { attrs: (scope) => {
+			const ctx = scope.context;
+			const value = valueAsString(ctx);
+			const open = openOf(scope);
+			return {
+				type: "button",
+				dir: scope.context.dir,
+				"aria-label": `select color. current color is ${value}`,
+				...disclosureTrigger(scope, {
+					expanded: open ? "true" : "false",
+					hasPopup: scope.context.inline === true ? void 0 : "dialog",
+					controls: { part: "content" }
+				}),
+				...ariaLabelledBy(scope, { part: "label" }),
+				"data-state": open ? "open" : "closed",
+				"data-disabled": dataAttr(scope.context.disabled === true),
+				onClick: () => {
+					if (scope.context.disabled === true || scope.context.readOnly === true) return;
+					scope.send({ type: "TRIGGER.CLICK" });
+				},
+				onBlur: () => {
+					if (scope.context.disabled === true || scope.context.readOnly === true) return;
+					scope.send({ type: "TRIGGER.BLUR" });
+				}
+			};
+		} },
+		positioner: { attrs: (scope) => ({ "data-state": openOf(scope) ? "open" : "closed" }) },
+		content: { attrs: (scope) => {
+			const open = openOf(scope);
+			return {
+				role: scope.context.inline === true ? void 0 : "dialog",
+				tabindex: "-1",
+				dir: scope.context.dir,
+				"data-state": open ? "open" : "closed",
+				hidden: open ? void 0 : "",
+				"use:dismissable": {
+					onEscape: () => {
+						if (!openOf(scope)) return;
+						scope.send({ type: "CLOSE" });
+					},
+					onOutside: () => {
+						if (!openOf(scope)) return;
+						scope.send({ type: "LAYER.INTERACT_OUTSIDE" });
+					}
+				}
+			};
+		} },
+		valueText: {
+			id: "value-text",
+			attrs: (scope) => ({
+				dir: scope.context.dir,
+				"data-disabled": dataAttr(scope.context.disabled === true)
+			})
+		},
+		area: { attrs: (scope, arg) => {
+			const slots = arg === void 0 ? void 0 : areaPropsOf(arg);
+			const { x, y } = areaChannels(slots);
+			return {
+				role: "group",
+				"data-disabled": dataAttr(scope.context.disabled === true),
+				"data-channel-x": x,
+				"data-channel-y": y,
+				"use:drag": {
+					enabled: scope.context.disabled !== true && scope.context.readOnly !== true,
+					cancelOnEscape: false,
+					onStart: (press) => {
+						if (press.ctrlKey === true || press.metaKey === true || press.altKey === true) return;
+						const at = pointPercent(scope.measure("area"), press.x, press.y);
+						scope.send({
+							type: "AREA.POINTER_DOWN",
+							x: at.x,
+							y: at.y
+						});
+					},
+					onMove: (delta) => {
+						if (scope.state !== "dragging") return;
+						const at = pointPercent(scope.measure("area"), delta.x, delta.y);
+						scope.send({
+							type: "AREA.POINTER_MOVE",
+							x: at.x,
+							y: at.y
+						});
+					},
+					onEnd: () => {
+						if (scope.state !== "dragging") return;
+						scope.send({ type: "AREA.POINTER_UP" });
+					}
+				}
+			};
+		} },
+		areaBackground: {
+			id: "area-background",
+			attrs: (scope, arg) => {
+				const { x, y } = areaChannels(arg);
+				const area = scope.context.format.startsWith("hsl") ? "hsla" : "hsba";
+				let hue = 0;
+				try {
+					hue = colorOf(scope).toFormat(area).getChannelValue("hue");
+				} catch {
+					hue = 0;
+				}
+				return {
+					"data-disabled": dataAttr(scope.context.disabled === true),
+					style: { backgroundColor: `hsl(${hue}, 100%, 50%)` }
+				};
+			}
+		},
+		areaThumb: {
+			id: "area-thumb",
+			attrs: (scope, arg) => {
+				const { x, y } = areaChannels(arg);
+				const ctx = scope.context;
+				const color = colorOf(scope);
+				const area = ctx.format.startsWith("hsl") ? "hsla" : "hsba";
+				let source = color;
+				try {
+					source = color.toFormat(area);
+				} catch {}
+				let xp = 0;
+				let yp = 0;
+				try {
+					xp = source.getChannelValuePercent(x);
+					yp = 1 - source.getChannelValuePercent(y);
+				} catch {}
+				if (scope.context.dir === "rtl") xp = 1 - xp;
+				const xv = (() => {
+					try {
+						return source.getChannelValue(x);
+					} catch {
+						return 0;
+					}
+				})();
+				const yv = (() => {
+					try {
+						return source.getChannelValue(y);
+					} catch {
+						return 0;
+					}
+				})();
+				return {
+					role: "slider",
+					tabindex: scope.context.disabled === true ? void 0 : "0",
+					dir: scope.context.dir,
+					"aria-label": `${x} and ${y}`,
+					...ariaRoleDescription("2d slider"),
+					...sliderThumb({
+						min: "0",
+						max: "100",
+						now: String(xv),
+						text: `${x} ${xv}, ${y} ${yv}`
+					}),
+					...ariaDisabled(scope.context.disabled === true ? "true" : void 0),
+					"data-disabled": dataAttr(scope.context.disabled === true),
+					style: {
+						left: `${xp * 100}%`,
+						top: `${yp * 100}%`,
+						transform: "translate(-50%, -50%)",
+						background: color.toString("css")
+					},
+					onFocus: () => scope.send({ type: "AREA.ACTIVATE" }),
+					onKeydown: (event) => onAreaKeydown(scope, event)
+				};
+			}
+		},
+		transparencyGrid: {
+			id: "transparency-grid",
+			attrs: () => ({ "--picker-grid": "12px" })
+		},
+		channelSlider: {
+			id: "channel-slider",
+			attrs: (scope, arg) => {
+				const slots = channelOf(arg);
+				const orientation = slots.orientation ?? "horizontal";
+				return {
+					role: "presentation",
+					"data-channel": slots.channel,
+					"data-orientation": orientation,
+					"use:drag": {
+						enabled: scope.context.disabled !== true && scope.context.readOnly !== true,
+						cancelOnEscape: false,
+						onStart: (press) => {
+							if (press.ctrlKey === true || press.metaKey === true || press.altKey === true) return;
+							const rect = scope.measure("track", slots.channel) ?? press.rect;
+							if (rect === null) return;
+							const percent = trackPercent(rect, orientation, press.x, press.y, scope.context.dir);
+							scope.send({
+								type: "CHANNEL_SLIDER.POINTER_DOWN",
+								channel: slots.channel,
+								percent
+							});
+						},
+						onMove: (delta) => {
+							if (scope.state !== "dragging") return;
+							const rect = scope.measure("track", slots.channel) ?? delta.rect;
+							if (rect === null) return;
+							const percent = trackPercent(rect, orientation, delta.x, delta.y, scope.context.dir);
+							scope.send({
+								type: "CHANNEL_SLIDER.POINTER_MOVE",
+								channel: slots.channel,
+								percent
+							});
+						},
+						onEnd: () => {
+							if (scope.state !== "dragging") return;
+							scope.send({ type: "CHANNEL_SLIDER.POINTER_UP" });
+						}
+					}
+				};
+			}
+		},
+		channelSliderTrack: {
+			id: "track",
+			attrs: (scope, arg) => {
+				const slots = channelOf(arg);
+				const orientation = slots.orientation ?? "horizontal";
+				const color = colorOf(scope);
+				const bg = slots.channel === "hue" ? "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)" : slots.channel === "alpha" ? `linear-gradient(to right, transparent, ${color.withChannelValue("alpha", 1).toString("css")})` : color.toString("css");
+				return {
+					id: scope.id("track", slots.channel),
+					role: "group",
+					"data-channel": slots.channel,
+					"data-orientation": orientation,
+					style: { background: bg }
+				};
+			}
+		},
+		channelSliderThumb: {
+			id: "thumb",
+			attrs: (scope, arg) => {
+				const slots = channelOf(arg);
+				const orientation = slots.orientation ?? "horizontal";
+				const ctx = scope.context;
+				const color = colorOf(scope);
+				const area = ctx.format.startsWith("hsl") ? "hsla" : "hsba";
+				let source = color;
+				try {
+					source = slots.channel === "alpha" ? color : color.toFormat(area);
+				} catch {}
+				let offset = 0;
+				let now = 0;
+				let min = 0;
+				let max = 100;
+				try {
+					const range = source.getChannelRange(slots.channel);
+					now = source.getChannelValue(slots.channel);
+					min = range.minValue;
+					max = range.maxValue;
+					offset = max === min ? 0 : (now - min) / (max - min);
+				} catch {}
+				if (orientation === "horizontal" && scope.context.dir === "rtl") offset = 1 - offset;
+				return {
+					id: scope.id("thumb", slots.channel),
+					role: "slider",
+					tabindex: scope.context.disabled === true ? void 0 : "0",
+					"aria-label": slots.channel,
+					...ariaOrientation(orientation),
+					...sliderThumb({
+						min: String(min),
+						max: String(max),
+						now: String(now),
+						text: `${slots.channel} ${now}`
+					}),
+					...ariaDisabled(scope.context.disabled === true ? "true" : void 0),
+					"data-channel": slots.channel,
+					"data-disabled": dataAttr(scope.context.disabled === true),
+					"data-orientation": orientation,
+					style: {
+						left: `${offset * 100}%`,
+						top: "50%",
+						transform: "translate(-50%, -50%)",
+						background: color.toString("css")
+					},
+					onFocus: () => scope.send({
+						type: "CHANNEL_SLIDER.ACTIVATE",
+						channel: slots.channel
+					}),
+					onKeydown: (event) => onChannelKeydown(scope, event, slots.channel)
+				};
+			}
+		},
+		channelSliderLabel: {
+			id: "channel-slider-label",
+			attrs: (scope, arg) => {
+				return {
+					"data-channel": channelOf(arg).channel,
+					dir: scope.context.dir
+				};
+			}
+		},
+		channelSliderValueText: {
+			id: "channel-slider-value-text",
+			attrs: (scope, arg) => {
+				return { "data-channel": channelOf(arg).channel };
+			}
+		},
+		channelInput: {
+			id: "channel-input",
+			attrs: (scope, arg) => {
+				const slots = hexSlotOf(arg);
+				const isText = slots.channel === "hex";
+				const current = channelValueOf(scope.context, slots.channel);
+				return {
+					type: isText ? "text" : "number",
+					dir: scope.context.dir,
+					"data-channel": slots.channel,
+					"aria-label": slots.channel,
+					"data-disabled": dataAttr(scope.context.disabled === true),
+					value: current,
+					onFocus: (event) => {
+						if (scope.context.disabled === true || scope.context.readOnly === true) return;
+						scope.send({
+							type: "CHANNEL_INPUT.FOCUS",
+							channel: slots.channel
+						});
+						selectText(event.currentTarget);
+					},
+					onBlur: (event) => {
+						if (scope.context.disabled === true || scope.context.readOnly === true) return;
+						const raw = textOf(event.currentTarget);
+						scope.send({
+							type: "CHANNEL_INPUT.BLUR",
+							channel: slots.channel,
+							value: raw
+						});
+					},
+					onKeydown: (event) => {
+						if (event.defaultPrevented || isComposing(event)) return;
+						if (scope.context.disabled === true || scope.context.readOnly === true) return;
+						if (event.key !== "Enter") return;
+						const raw = textOf(event.currentTarget);
+						event.preventDefault();
+						scope.send({
+							type: "CHANNEL_INPUT.CHANGE",
+							channel: slots.channel,
+							value: raw
+						});
+					}
+				};
+			}
+		},
+		hiddenInput: {
+			id: "hidden-input",
+			attrs: (scope) => {
+				const name = scope.context.name ?? "";
+				return {
+					type: "hidden",
+					name: name.length > 0 ? name : void 0,
+					tabindex: "-1",
+					readonly: scope.context.readOnly === true ? "" : void 0,
+					value: valueAsString(scope.context)
+				};
+			}
+		},
+		eyeDropperTrigger: {
+			id: "eyedropper",
+			attrs: (scope) => {
+				const supported = eyeDropperSupported();
+				return {
+					type: "button",
+					dir: scope.context.dir,
+					"aria-label": "Pick a color from the screen",
+					"data-disabled": dataAttr(scope.context.disabled === true),
+					hidden: supported ? void 0 : "",
+					onClick: () => {
+						if (scope.context.disabled === true || scope.context.readOnly === true) return;
+						scope.send({ type: "EYEDROPPER.CLICK" });
+					}
+				};
+			}
+		},
+		formatSelect: {
+			id: "format-select",
+			attrs: (scope) => ({
+				dir: scope.context.dir,
+				"data-disabled": dataAttr(scope.context.disabled === true),
+				value: scope.context.format,
+				onChange: (event) => {
+					const next = textOf(event.currentTarget);
+					if (!isColorFormat(next)) return;
+					scope.send({
+						type: "FORMAT.SET",
+						format: next
+					});
+				}
+			})
+		},
+		swatchGroup: {
+			id: "swatch-group",
+			attrs: (scope) => ({
+				id: scope.id("swatchGroup"),
+				role: "group"
+			})
+		},
+		swatchTrigger: {
+			id: "swatch",
+			attrs: (scope, arg) => {
+				const slots = swatchOf(arg);
+				const state = swatchState(scope, slots);
+				return {
+					id: scope.id("swatch", slots.value),
+					type: "button",
+					dir: scope.context.dir,
+					"aria-label": `select ${slots.value} as the color`,
+					"data-checked": dataAttr(state.checked),
+					"data-value": slots.value,
+					"data-disabled": dataAttr(state.disabled),
+					style: {
+						"--picker-swatch": slots.value,
+						backgroundColor: slots.value
+					},
+					onClick: () => {
+						if (state.disabled || scope.context.readOnly === true) return;
+						scope.send({
+							type: "SWATCH_TRIGGER.CLICK",
+							value: slots.value
+						});
+					}
+				};
+			}
+		},
+		swatchIndicator: {
+			id: "swatch-indicator",
+			attrs: (scope, arg) => {
+				const slots = swatchOf(arg);
+				const checked = swatchState(scope, slots).checked;
+				return {
+					...ariaHidden("true"),
+					"data-checked": dataAttr(checked),
+					hidden: checked ? void 0 : ""
+				};
+			}
+		},
+		swatch: {
+			id: "swatch",
+			attrs: (scope, arg) => {
+				const slots = swatchOf(arg);
+				const checked = swatchState(scope, slots).checked;
+				return {
+					"data-checked": dataAttr(checked),
+					"data-value": slots.value,
+					style: {
+						"--picker-swatch": slots.value,
+						backgroundColor: slots.value
+					}
+				};
+			}
+		}
+	},
+	commands: {
+		setValue: { event: ([value]) => ({
+			type: "VALUE.SET",
+			value
+		}) },
+		setFormat: { event: ([format]) => ({
+			type: "FORMAT.SET",
+			format
+		}) },
+		setOpen: { event: ([open]) => ({ type: open ? "OPEN" : "CLOSE" }) }
+	},
+	readers: {
+		open: { read: (context, state) => isOpenPhase(state, context.inline) },
+		value: { read: (context) => context.value },
+		valueAsString: { read: (context) => valueAsString(context) },
+		format: { read: (context) => context.format },
+		disabled: { read: (context) => context.disabled },
+		empty: { read: () => false }
+	},
+	methods: { getChannelValue: { call: (context, _state, [channel]) => {
+		return channelValueOf(context, isChannel(channel) ? channel : "hex");
+	} } },
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [context.value.toLowerCase()],
+			detail: (_watched, _event, _props, context) => ({
+				value: context.value,
+				format: context.format
+			})
+		},
+		"open-change": {
+			prop: "onOpenChange",
+			watch: (context, state) => [isOpenPhase(state, context.inline)],
+			detail: (watched) => ({ open: watched[0] === true })
+		},
+		"format-change": {
+			prop: "onFormatChange",
+			watch: (context) => [context.format],
+			detail: (watched) => {
+				const format = watched[0];
+				return { format: isColorFormat(format) ? format : "hex" };
+			}
+		},
+		"value-change-end": {
+			prop: "onValueChangeEnd",
+			watch: (context) => [context.value.toLowerCase()],
+			detail: (_watched, _event, _props, context) => ({
+				value: context.value,
+				format: context.format
+			}),
+			select: (event, _before, after) => event.type === "AREA.POINTER_UP" || event.type === "CHANNEL_SLIDER.POINTER_UP" || event.type === "CHANNEL_INPUT.BLUR" || event.type === "SWATCH_TRIGGER.CLICK" ? {
+				value: after.value,
+				format: after.format
+			} : null
+		}
+	}
+};
+const colorPicker = defineComponent(def);
+export { colorPicker, def };
+
+//# sourceMappingURL=color-picker.presentation.js.map