@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/dist/_chunk/color.jsx

@@ -0,0 +1,1174 @@
+import { t as filterDOMProps } from "./filterDOMProps.jsx";
+import { n as focusWithoutScrolling } from "./focus.jsx";
+import { a as useLocale } from "./createCollator.jsx";
+import { createId as createId$1 } from "../ssr/index.jsx";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { normalizeColor, parseColor } from "@proyecto-viviana/solid-stately";
+//#region src/color/createColorSlider.ts
+/**
+* createColorSlider hook.
+*
+* Provides ARIA attributes and keyboard handling for a color slider.
+*/
+/**
+* Creates ARIA props for a color slider.
+*/
+function createColorSlider(props, state, trackRef, inputRef) {
+	const getProps = () => props();
+	const getState = () => state();
+	const locale = useLocale();
+	const isRTL = () => locale().direction === "rtl";
+	const trackId = createId$1();
+	const inputId = createId$1();
+	const labelId = createId$1();
+	let cleanupPointerDrag;
+	let cleanupMouseDrag;
+	const getInput = () => inputRef?.() ?? trackRef()?.querySelector("input[type=\"range\"]") ?? null;
+	const focusInput = () => {
+		focusWithoutScrolling(getInput());
+		queueMicrotask(() => focusWithoutScrolling(getInput()));
+	};
+	const channelName = createMemo(() => {
+		const p = getProps();
+		if (p.channelName) return p.channelName;
+		const s = getState();
+		return s.value.getChannelName(s.channel, "en-US");
+	});
+	const orientation = () => getProps().orientation ?? "horizontal";
+	const hasVisibleLabel = () => getProps().label != null;
+	const trackElementId = () => getProps().id ?? trackId;
+	const trackLabelledBy = () => {
+		return getProps()["aria-labelledby"] ?? (hasVisibleLabel() ? labelId : void 0);
+	};
+	const inputLabelledBy = () => hasVisibleLabel() ? labelId : trackElementId();
+	const trackAriaLabel = () => {
+		const p = getProps();
+		if (p["aria-label"]) return p["aria-label"];
+		if (p["aria-labelledby"] || hasVisibleLabel()) return void 0;
+		return channelName();
+	};
+	const updateFromPointer = (clientX, clientY) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		const track = trackRef();
+		if (!track) return;
+		const rect = track.getBoundingClientRect();
+		if (rect.width === 0 || rect.height === 0) return;
+		let percent;
+		if (orientation() === "vertical") percent = 1 - (clientY - rect.top) / rect.height;
+		else {
+			const physicalPercent = (clientX - rect.left) / rect.width;
+			percent = isRTL() ? 1 - physicalPercent : physicalPercent;
+		}
+		getState().setThumbPercent(Math.max(0, Math.min(1, percent)));
+	};
+	const endDrag = (target, pointerId) => {
+		const s = getState();
+		if (!s.isDragging) return;
+		s.setDragging(false);
+		focusInput();
+		if (pointerId == null) return;
+		try {
+			target?.releasePointerCapture?.(pointerId);
+		} catch {}
+	};
+	const installPointerDragListeners = () => {
+		if (typeof window === "undefined") return;
+		cleanupPointerDrag?.();
+		const onPointerMove = (e) => {
+			if (!getState().isDragging) return;
+			updateFromPointer(e.clientX, e.clientY);
+		};
+		const onPointerEnd = (e) => {
+			cleanupPointerDrag?.();
+			cleanupPointerDrag = void 0;
+			endDrag(trackRef(), e.pointerId);
+		};
+		window.addEventListener("pointermove", onPointerMove);
+		window.addEventListener("pointerup", onPointerEnd);
+		window.addEventListener("pointercancel", onPointerEnd);
+		cleanupPointerDrag = () => {
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerEnd);
+			window.removeEventListener("pointercancel", onPointerEnd);
+		};
+	};
+	const installMouseDragListeners = () => {
+		if (typeof window === "undefined") return;
+		cleanupMouseDrag?.();
+		const onMouseMove = (e) => {
+			if (!getState().isDragging) return;
+			updateFromPointer(e.clientX, e.clientY);
+		};
+		const onMouseEnd = () => {
+			cleanupMouseDrag?.();
+			cleanupMouseDrag = void 0;
+			endDrag(trackRef());
+		};
+		window.addEventListener("mousemove", onMouseMove);
+		window.addEventListener("mouseup", onMouseEnd);
+		cleanupMouseDrag = () => {
+			window.removeEventListener("mousemove", onMouseMove);
+			window.removeEventListener("mouseup", onMouseEnd);
+		};
+	};
+	onCleanup(() => {
+		cleanupPointerDrag?.();
+		cleanupMouseDrag?.();
+	});
+	const onTrackPointerDown = (e) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		updateFromPointer(e.clientX, e.clientY);
+		focusInput();
+		getState().setDragging(true);
+		try {
+			e.currentTarget.setPointerCapture?.(e.pointerId);
+		} catch {}
+		installPointerDragListeners();
+		e.preventDefault();
+	};
+	const onTrackPointerMove = (e) => {
+		if (!getState().isDragging) return;
+		updateFromPointer(e.clientX, e.clientY);
+	};
+	const onTrackPointerUp = (e) => {
+		cleanupPointerDrag?.();
+		cleanupPointerDrag = void 0;
+		endDrag(e.currentTarget, e.pointerId);
+	};
+	const onTrackPointerCancel = (e) => {
+		cleanupPointerDrag?.();
+		cleanupPointerDrag = void 0;
+		endDrag(e.currentTarget, e.pointerId);
+	};
+	const onTrackMouseDown = (e) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		updateFromPointer(e.clientX, e.clientY);
+		getState().setDragging(true);
+		installMouseDragListeners();
+		e.preventDefault();
+	};
+	const onTrackMouseMove = (e) => {
+		if (!getState().isDragging) return;
+		updateFromPointer(e.clientX, e.clientY);
+	};
+	const onTrackMouseUp = (e) => {
+		cleanupMouseDrag?.();
+		cleanupMouseDrag = void 0;
+		endDrag(e.currentTarget);
+	};
+	const onKeyDown = (e) => {
+		if (e.defaultPrevented) return;
+		if (getProps().isDisabled || getState().isDisabled) return;
+		const s = getState();
+		let handled = true;
+		switch (e.key) {
+			case "ArrowUp":
+				s.incrementThumb();
+				break;
+			case "ArrowDown":
+				s.decrementThumb();
+				break;
+			case "ArrowRight":
+				if (orientation() === "horizontal" && isRTL()) s.decrementThumb();
+				else s.incrementThumb();
+				break;
+			case "ArrowLeft":
+				if (orientation() === "horizontal" && isRTL()) s.incrementThumb();
+				else s.decrementThumb();
+				break;
+			case "PageUp":
+				s.incrementThumb(s.pageSize);
+				break;
+			case "PageDown":
+				s.decrementThumb(s.pageSize);
+				break;
+			case "Home":
+				s.setThumbValue(s.minValue);
+				break;
+			case "End":
+				s.setThumbValue(s.maxValue);
+				break;
+			default: handled = false;
+		}
+		if (handled) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	};
+	const generateBackground = () => {
+		const s = getState();
+		const value = s.getDisplayColor();
+		const channel = s.channel;
+		const to = orientation() === "vertical" ? "top" : isRTL() ? "left" : "right";
+		switch (channel) {
+			case "hue": return `linear-gradient(to ${to}, ${[
+				0,
+				60,
+				120,
+				180,
+				240,
+				300,
+				360
+			].map((hue) => value.withChannelValue("hue", hue).toString("css")).join(", ")})`;
+			case "lightness": {
+				const min = s.minValue;
+				const max = s.maxValue;
+				return `linear-gradient(to ${to}, ${value.withChannelValue(channel, min).toString("css")}, ${value.withChannelValue(channel, (max - min) / 2).toString("css")}, ${value.withChannelValue(channel, max).toString("css")})`;
+			}
+			case "saturation":
+			case "brightness":
+			case "red":
+			case "green":
+			case "blue":
+			case "alpha": return `linear-gradient(to ${to}, ${value.withChannelValue(channel, s.minValue).toString("css")}, ${value.withChannelValue(channel, s.maxValue).toString("css")})`;
+			default: return;
+		}
+	};
+	const trackProps = createMemo(() => {
+		const s = getState();
+		getProps();
+		const bg = generateBackground();
+		return {
+			id: trackElementId(),
+			role: "group",
+			"aria-label": trackAriaLabel(),
+			"aria-labelledby": trackLabelledBy(),
+			onPointerDown: onTrackPointerDown,
+			onPointerMove: onTrackPointerMove,
+			onPointerUp: onTrackPointerUp,
+			onPointerCancel: onTrackPointerCancel,
+			onMouseDown: onTrackMouseDown,
+			onMouseMove: onTrackMouseMove,
+			onMouseUp: onTrackMouseUp,
+			style: {
+				position: "relative",
+				"touch-action": "none",
+				"forced-color-adjust": "none",
+				...bg ? { background: bg } : {}
+			},
+			"data-disabled": s.isDisabled || void 0
+		};
+	});
+	const thumbProps = createMemo(() => {
+		const s = getState();
+		const p = getProps();
+		const percent = s.getThumbPercent();
+		const x = orientation() === "horizontal" ? isRTL() ? 1 - percent : percent : .5;
+		const y = orientation() === "horizontal" ? .5 : 1 - percent;
+		return {
+			role: "presentation",
+			onKeyDown,
+			style: {
+				position: "absolute",
+				left: `${x * 100}%`,
+				top: `${y * 100}%`,
+				transform: "translate(-50%, -50%)",
+				"touch-action": "none",
+				"forced-color-adjust": "none"
+			},
+			"data-dragging": s.isDragging || void 0,
+			"data-disabled": s.isDisabled || p.isDisabled || void 0
+		};
+	});
+	const ariaValueText = () => {
+		const s = getState();
+		const loc = locale().locale;
+		const displayColor = s.getDisplayColor();
+		let valueText = s.getThumbValueLabel();
+		if (s.channel === "hue") valueText += `, ${displayColor.getHueName(loc)}`;
+		else if (s.channel !== "alpha") valueText += `, ${displayColor.getColorName(loc)}`;
+		return valueText;
+	};
+	const inputProps = createMemo(() => {
+		const s = getState();
+		const p = getProps();
+		return {
+			type: "range",
+			id: inputId,
+			min: s.minValue,
+			max: s.maxValue,
+			step: s.step,
+			value: s.getThumbValue(),
+			name: p.name,
+			form: p.form,
+			disabled: s.isDisabled || p.isDisabled,
+			tabIndex: s.isDisabled || p.isDisabled ? void 0 : 0,
+			"aria-orientation": orientation(),
+			"aria-labelledby": inputLabelledBy(),
+			"aria-describedby": p["aria-describedby"] ?? "",
+			"aria-details": p["aria-details"] ?? "",
+			"aria-valuetext": ariaValueText(),
+			onKeyDown,
+			onInput: (e) => {
+				const target = e.target;
+				s.setThumbValue(parseFloat(target.value));
+			},
+			onChange: (e) => {
+				const target = e.target;
+				s.setThumbValue(parseFloat(target.value));
+			},
+			onFocus: () => {},
+			style: {
+				position: "absolute",
+				opacity: "0.0001",
+				width: "100%",
+				height: "100%",
+				padding: "0",
+				margin: "-1px",
+				overflow: "hidden",
+				clip: "rect(0, 0, 0, 0)",
+				"white-space": "nowrap",
+				border: "0",
+				"pointer-events": "none"
+			}
+		};
+	});
+	const outputProps = createMemo(() => {
+		return {
+			"aria-live": "off",
+			for: inputId
+		};
+	});
+	const labelProps = createMemo(() => {
+		return {
+			id: labelId,
+			onClick: () => {
+				if (typeof document !== "undefined") document.getElementById(inputId)?.focus();
+			}
+		};
+	});
+	return {
+		get trackProps() {
+			return trackProps();
+		},
+		get thumbProps() {
+			return thumbProps();
+		},
+		get inputProps() {
+			return inputProps();
+		},
+		get outputProps() {
+			return outputProps();
+		},
+		get labelProps() {
+			return labelProps();
+		}
+	};
+}
+//#endregion
+//#region src/color/createColorArea.ts
+/**
+* createColorArea hook.
+*
+* Provides ARIA attributes and keyboard/pointer handling for a 2D color area.
+*/
+/**
+* Creates ARIA props for a color area.
+*/
+function createColorArea(props, state, areaRef) {
+	const getProps = () => props();
+	const getState = () => state();
+	const locale = useLocale();
+	const isRTL = () => locale().direction === "rtl";
+	const [focusedInput, setFocusedInput] = createSignal(null);
+	const [valueChangedViaKeyboard, setValueChangedViaKeyboard] = createSignal(false);
+	const [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = createSignal(false);
+	const colorAreaId = createId$1();
+	const xInputId = createId$1();
+	const yInputId = createId$1();
+	const colorPickerLabel = () => "Color picker";
+	const colorInputLabel = () => {
+		const ariaLabel = getProps()["aria-label"];
+		return ariaLabel ? `${ariaLabel}, ${colorPickerLabel()}` : colorPickerLabel();
+	};
+	const colorAreaLabel = () => {
+		const ariaLabel = getProps()["aria-label"];
+		return ariaLabel ? `${ariaLabel}, ${colorPickerLabel()}` : void 0;
+	};
+	const formatChannelValueText = (channel) => {
+		const value = getState().getDisplayColor();
+		const loc = locale().locale;
+		return `${value.getChannelName(channel, loc)}: ${value.formatChannelValue(channel, loc)}`;
+	};
+	const getAriaValueTextForChannel = (channel) => {
+		const s = getState();
+		const value = s.getDisplayColor();
+		const loc = locale().locale;
+		if (valueChangedViaInputChangeEvent() || valueChangedViaKeyboard()) return `${formatChannelValueText(channel)}, ${value.getColorName(loc)}`;
+		const otherChannel = channel === s.yChannel ? s.xChannel : s.yChannel;
+		return [
+			formatChannelValueText(channel),
+			formatChannelValueText(otherChannel),
+			formatChannelValueText(s.zChannel)
+		].join(", ") + `, ${value.getColorName(loc)}`;
+	};
+	const updateFromInput = (e, axis) => {
+		const target = e.target;
+		const nextValue = parseFloat(target.value);
+		setValueChangedViaInputChangeEvent(true);
+		if (axis === "x") getState().setXValue(nextValue);
+		else getState().setYValue(nextValue);
+	};
+	const getPositionFromEvent = (e) => {
+		const area = areaRef();
+		if (!area) return null;
+		const rect = area.getBoundingClientRect();
+		if (rect.width === 0 || rect.height === 0) return null;
+		const physicalX = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+		return {
+			x: isRTL() ? 1 - physicalX : physicalX,
+			y: Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))
+		};
+	};
+	const onPointerDown = (e) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		const pos = getPositionFromEvent(e);
+		if (!pos) return;
+		getState().setColorFromPoint(pos.x, pos.y);
+		getState().setDragging(true);
+		e.currentTarget.setPointerCapture?.(e.pointerId);
+	};
+	const onPointerMove = (e) => {
+		if (!getState().isDragging) return;
+		const pos = getPositionFromEvent(e);
+		if (!pos) return;
+		getState().setColorFromPoint(pos.x, pos.y);
+	};
+	const onPointerUp = (e) => {
+		if (getState().isDragging) {
+			getState().setDragging(false);
+			e.currentTarget.releasePointerCapture?.(e.pointerId);
+		}
+	};
+	const onKeyDown = (e) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		const s = getState();
+		const xStep = e.shiftKey && s.xChannelPageStep > s.xChannelStep ? s.xChannelPageStep : s.xChannelStep;
+		const yStep = e.shiftKey && s.yChannelPageStep > s.yChannelStep ? s.yChannelPageStep : s.yChannelStep;
+		let focusedAxis = "x";
+		let handled = true;
+		switch (e.key) {
+			case "ArrowRight":
+				if (isRTL()) s.decrementX(xStep);
+				else s.incrementX(xStep);
+				break;
+			case "ArrowLeft":
+				if (isRTL()) s.incrementX(xStep);
+				else s.decrementX(xStep);
+				break;
+			case "ArrowUp":
+				s.incrementY(yStep);
+				focusedAxis = "y";
+				break;
+			case "ArrowDown":
+				s.decrementY(yStep);
+				focusedAxis = "y";
+				break;
+			case "PageUp":
+				s.incrementY(s.yChannelPageStep);
+				focusedAxis = "y";
+				break;
+			case "PageDown":
+				s.decrementY(s.yChannelPageStep);
+				focusedAxis = "y";
+				break;
+			case "Home":
+				if (isRTL()) s.incrementX(s.xChannelPageStep);
+				else s.decrementX(s.xChannelPageStep);
+				break;
+			case "End":
+				if (isRTL()) s.decrementX(s.xChannelPageStep);
+				else s.incrementX(s.xChannelPageStep);
+				break;
+			default: handled = false;
+		}
+		if (handled) {
+			setFocusedInput(focusedAxis);
+			setValueChangedViaKeyboard(true);
+			s.setDragging(true);
+			s.setDragging(false);
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	};
+	const onFocusOut = (e) => {
+		const currentTarget = e.currentTarget;
+		const relatedTarget = e.relatedTarget;
+		if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
+			setValueChangedViaKeyboard(false);
+			setValueChangedViaInputChangeEvent(false);
+		}
+	};
+	const colorAreaProps = createMemo(() => {
+		const s = getState();
+		const p = getProps();
+		return {
+			id: p.id ?? colorAreaId,
+			role: "group",
+			"aria-label": colorAreaLabel(),
+			"aria-labelledby": p["aria-labelledby"],
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			style: {
+				position: "relative",
+				"touch-action": "none",
+				"forced-color-adjust": "none",
+				...generateGradient()
+			},
+			"data-disabled": s.isDisabled || p.isDisabled || void 0
+		};
+	});
+	function generateGradient() {
+		const s = getState();
+		const value = s.value;
+		const xCh = s.xChannel;
+		const yCh = s.yChannel;
+		const zCh = s.zChannel;
+		const zValue = value.getChannelValue(zCh);
+		const end = isRTL() ? "left" : "right";
+		const hue = (color) => [
+			0,
+			60,
+			120,
+			180,
+			240,
+			300,
+			360
+		].map((h) => color.withChannelValue("hue", h).toString("css")).join(", ");
+		const hslChannels = {
+			hue,
+			saturation: (color) => `${color.withChannelValue("saturation", 0).toString("css")}, transparent`,
+			lightness: () => "black, transparent, white"
+		};
+		const hsbChannels = {
+			hue,
+			saturation: (color) => `${color.withChannelValue("saturation", 0).toString("css")}, transparent`,
+			brightness: () => "black, transparent"
+		};
+		switch (value.getColorSpace()) {
+			case "rgb": {
+				const rgb = parseColor("rgb(0, 0, 0)");
+				return {
+					background: [
+						`linear-gradient(to ${end}, ${rgb.withChannelValue(xCh, 0).toString("css")}, ${rgb.withChannelValue(xCh, 255).toString("css")})`,
+						`linear-gradient(to top, ${rgb.withChannelValue(yCh, 0).toString("css")}, ${rgb.withChannelValue(yCh, 255).toString("css")})`,
+						rgb.withChannelValue(zCh, zValue).toString("css")
+					].join(","),
+					"background-blend-mode": "screen"
+				};
+			}
+			case "hsl": {
+				const channels = value.getColorChannels();
+				const base = parseColor("hsl(0, 100%, 50%)").withChannelValue(zCh, zValue);
+				const bg = channels.filter((c) => c !== zCh).map((c) => `linear-gradient(to ${c === xCh ? end : "top"}, ${hslChannels[c]?.(base) ?? ""})`).reverse();
+				if (zCh === "hue") bg.push(base.toString("css"));
+				return { background: bg.join(", ") };
+			}
+			case "hsb": {
+				const channels = value.getColorChannels();
+				const base = parseColor("hsb(0, 100%, 100%)").withChannelValue(zCh, zValue);
+				const bg = channels.filter((c) => c !== zCh).map((c) => `linear-gradient(to ${c === xCh ? end : "top"}, ${hsbChannels[c]?.(base) ?? ""})`).reverse();
+				if (zCh === "hue") bg.push(base.toString("css"));
+				return { background: bg.join(", ") };
+			}
+			default: return {};
+		}
+	}
+	const gradientProps = createMemo(() => {
+		return {
+			role: "presentation",
+			style: {
+				width: "100%",
+				height: "100%",
+				"forced-color-adjust": "none",
+				...generateGradient()
+			}
+		};
+	});
+	const thumbProps = createMemo(() => {
+		const s = getState();
+		const p = getProps();
+		const pos = s.getThumbPosition();
+		return {
+			role: "presentation",
+			style: {
+				position: "absolute",
+				left: `${(isRTL() ? 1 - pos.x : pos.x) * 100}%`,
+				top: `${pos.y * 100}%`,
+				transform: "translate(-50%, -50%)",
+				"touch-action": "none",
+				"forced-color-adjust": "none"
+			},
+			onKeyDown,
+			onFocusOut,
+			"data-dragging": s.isDragging || void 0,
+			"data-disabled": s.isDisabled || p.isDisabled || void 0
+		};
+	});
+	const xInputProps = createMemo(() => {
+		const s = getState();
+		const p = getProps();
+		const xRange = s.value.getChannelRange(s.xChannel);
+		return {
+			type: "range",
+			id: p.id ?? xInputId,
+			"aria-label": colorInputLabel(),
+			"aria-roledescription": "2D slider",
+			"aria-valuetext": getAriaValueTextForChannel(s.xChannel),
+			"aria-orientation": "horizontal",
+			"aria-describedby": p["aria-describedby"],
+			"aria-details": p["aria-details"],
+			min: xRange.minValue,
+			max: xRange.maxValue,
+			step: xRange.step,
+			value: s.getXValue(),
+			name: p.xName,
+			form: p.form,
+			disabled: s.isDisabled || p.isDisabled,
+			"aria-hidden": !focusedInput() || focusedInput() === "x" || valueChangedViaKeyboard() ? void 0 : "true",
+			onFocus: () => setFocusedInput("x"),
+			onKeyDown,
+			onInput: (e) => updateFromInput(e, "x"),
+			onChange: (e) => updateFromInput(e, "x"),
+			onBlur: () => {
+				if (s.isDragging) s.setDragging(false);
+			},
+			tabIndex: !focusedInput() || focusedInput() === "x" ? void 0 : -1,
+			style: {
+				position: "absolute",
+				width: "1px",
+				height: "1px",
+				padding: "0",
+				margin: "-1px",
+				overflow: "hidden",
+				clip: "rect(0, 0, 0, 0)",
+				"white-space": "nowrap",
+				border: "0"
+			}
+		};
+	});
+	const yInputProps = createMemo(() => {
+		const s = getState();
+		const p = getProps();
+		const yRange = s.value.getChannelRange(s.yChannel);
+		return {
+			type: "range",
+			id: p.id ?? yInputId,
+			"aria-label": colorInputLabel(),
+			"aria-roledescription": "2D slider",
+			"aria-valuetext": getAriaValueTextForChannel(s.yChannel),
+			"aria-orientation": "vertical",
+			"aria-describedby": p["aria-describedby"],
+			"aria-details": p["aria-details"],
+			min: yRange.minValue,
+			max: yRange.maxValue,
+			step: yRange.step,
+			value: s.getYValue(),
+			name: p.yName,
+			form: p.form,
+			disabled: s.isDisabled || p.isDisabled,
+			"aria-hidden": focusedInput() === "y" || valueChangedViaKeyboard() ? void 0 : "true",
+			onFocus: () => setFocusedInput("y"),
+			onKeyDown,
+			onInput: (e) => updateFromInput(e, "y"),
+			onChange: (e) => updateFromInput(e, "y"),
+			tabIndex: focusedInput() === "y" ? void 0 : -1,
+			style: {
+				position: "absolute",
+				width: "1px",
+				height: "1px",
+				padding: "0",
+				margin: "-1px",
+				overflow: "hidden",
+				clip: "rect(0, 0, 0, 0)",
+				"white-space": "nowrap",
+				border: "0"
+			}
+		};
+	});
+	return {
+		get colorAreaProps() {
+			return colorAreaProps();
+		},
+		get gradientProps() {
+			return gradientProps();
+		},
+		get thumbProps() {
+			return thumbProps();
+		},
+		get xInputProps() {
+			return xInputProps();
+		},
+		get yInputProps() {
+			return yInputProps();
+		}
+	};
+}
+//#endregion
+//#region src/color/createColorWheel.ts
+/**
+* createColorWheel hook.
+*
+* Provides ARIA attributes and keyboard/pointer handling for a circular hue selector.
+*/
+/**
+* Creates ARIA props for a color wheel.
+*/
+function createColorWheel(props, state, wheelRef) {
+	const getProps = () => props();
+	const getState = () => state();
+	const locale = useLocale();
+	const inputId = createId$1();
+	let cleanupPointerDrag;
+	let cleanupMouseDrag;
+	let dragElement = null;
+	const outerRadius = () => getProps().outerRadius ?? 100;
+	const innerRadius = () => getProps().innerRadius ?? 74;
+	const thumbRadius = () => (innerRadius() + outerRadius()) / 2;
+	const getInput = () => wheelRef()?.querySelector("input[type=\"range\"]") ?? null;
+	const focusInput = () => {
+		focusWithoutScrolling(getInput());
+		queueMicrotask(() => focusWithoutScrolling(getInput()));
+	};
+	const getPointFromEvent = (clientX, clientY, element) => {
+		const wheel = element ?? dragElement ?? wheelRef();
+		if (!wheel) return null;
+		const rect = wheel.getBoundingClientRect();
+		const centerX = rect.left + rect.width / 2;
+		const centerY = rect.top + rect.height / 2;
+		return {
+			x: clientX - centerX,
+			y: clientY - centerY
+		};
+	};
+	const updateFromPoint = (clientX, clientY, requireTrackHit = false, element) => {
+		if (getProps().isDisabled || getState().isDisabled) return false;
+		const point = getPointFromEvent(clientX, clientY, element);
+		if (!point) return false;
+		const distance = Math.sqrt(point.x ** 2 + point.y ** 2);
+		if (requireTrackHit && (distance <= innerRadius() || distance >= outerRadius())) return false;
+		getState().setHueFromPoint(point.x, point.y, thumbRadius());
+		return true;
+	};
+	const endDrag = () => {
+		if (!getState().isDragging) return;
+		getState().setDragging(false);
+		dragElement = null;
+		focusInput();
+	};
+	const installPointerDragListeners = () => {
+		if (typeof window === "undefined") return;
+		cleanupPointerDrag?.();
+		const onPointerMove = (e) => {
+			if (!getState().isDragging) return;
+			updateFromPoint(e.clientX, e.clientY);
+		};
+		const onPointerEnd = () => {
+			cleanupPointerDrag?.();
+			cleanupPointerDrag = void 0;
+			endDrag();
+		};
+		window.addEventListener("pointermove", onPointerMove);
+		window.addEventListener("pointerup", onPointerEnd);
+		window.addEventListener("pointercancel", onPointerEnd);
+		cleanupPointerDrag = () => {
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerEnd);
+			window.removeEventListener("pointercancel", onPointerEnd);
+		};
+	};
+	const installMouseDragListeners = () => {
+		if (typeof window === "undefined") return;
+		cleanupMouseDrag?.();
+		const onMouseMove = (e) => {
+			if (!getState().isDragging) return;
+			updateFromPoint(e.clientX, e.clientY);
+		};
+		const onMouseEnd = () => {
+			cleanupMouseDrag?.();
+			cleanupMouseDrag = void 0;
+			endDrag();
+		};
+		window.addEventListener("mousemove", onMouseMove);
+		window.addEventListener("mouseup", onMouseEnd);
+		cleanupMouseDrag = () => {
+			window.removeEventListener("mousemove", onMouseMove);
+			window.removeEventListener("mouseup", onMouseEnd);
+		};
+	};
+	onCleanup(() => {
+		cleanupPointerDrag?.();
+		cleanupMouseDrag?.();
+	});
+	const onTrackPointerDown = (e) => {
+		dragElement = e.currentTarget;
+		if (!updateFromPoint(e.clientX, e.clientY, true, dragElement)) {
+			dragElement = null;
+			return;
+		}
+		focusInput();
+		getState().setDragging(true);
+		installPointerDragListeners();
+		e.preventDefault();
+	};
+	const onTrackMouseDown = (e) => {
+		dragElement = e.currentTarget;
+		if (!updateFromPoint(e.clientX, e.clientY, true, dragElement)) {
+			dragElement = null;
+			return;
+		}
+		focusInput();
+		getState().setDragging(true);
+		installMouseDragListeners();
+		e.preventDefault();
+	};
+	const onThumbPointerDown = (e) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		focusInput();
+		getState().setDragging(true);
+		installPointerDragListeners();
+		e.preventDefault();
+		e.stopPropagation();
+	};
+	const onThumbMouseDown = (e) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		focusInput();
+		getState().setDragging(true);
+		installMouseDragListeners();
+		e.preventDefault();
+		e.stopPropagation();
+	};
+	const onKeyDown = (e) => {
+		if (e.defaultPrevented) return;
+		if (getProps().isDisabled || getState().isDisabled) return;
+		const s = getState();
+		let handled = true;
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				s.increment();
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				s.decrement();
+				break;
+			case "PageUp":
+				s.increment(s.pageStep);
+				break;
+			case "PageDown":
+				s.decrement(s.pageStep);
+				break;
+			case "Home":
+				s.setHue(0);
+				break;
+			case "End":
+				s.setHue(359);
+				break;
+			default: handled = false;
+		}
+		if (handled) {
+			s.setDragging(true);
+			s.setDragging(false);
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	};
+	const conicGradient = `conic-gradient(from 90deg, hsl(0, 100%, 50%), hsl(30, 100%, 50%), hsl(60, 100%, 50%), hsl(90, 100%, 50%), hsl(120, 100%, 50%), hsl(150, 100%, 50%), hsl(180, 100%, 50%), hsl(210, 100%, 50%), hsl(240, 100%, 50%), hsl(270, 100%, 50%), hsl(300, 100%, 50%), hsl(330, 100%, 50%), hsl(360, 100%, 50%))`;
+	const ringPath = () => {
+		const outer = outerRadius();
+		const inner = innerRadius();
+		const circlePath = (radius) => [
+			`M ${outer}, ${outer} m ${-radius}, 0`,
+			`a ${radius}, ${radius}, 0, 1, 0, ${radius * 2}, 0`,
+			`a ${radius}, ${radius}, 0, 1, 0 ${-radius * 2}, 0`
+		].join(" ");
+		return `path(evenodd, "${circlePath(outer)} ${circlePath(inner)}")`;
+	};
+	const trackProps = createMemo(() => {
+		const s = getState();
+		const p = getProps();
+		return {
+			onPointerDown: onTrackPointerDown,
+			onMouseDown: onTrackMouseDown,
+			style: {
+				position: "relative",
+				"touch-action": "none",
+				width: `${outerRadius() * 2}px`,
+				height: `${outerRadius() * 2}px`,
+				background: conicGradient,
+				"clip-path": ringPath(),
+				"forced-color-adjust": "none"
+			},
+			"data-disabled": s.isDisabled || p.isDisabled || void 0
+		};
+	});
+	const thumbProps = createMemo(() => {
+		const s = getState();
+		const p = getProps();
+		const position = s.getThumbPosition(thumbRadius());
+		return {
+			onPointerDown: onThumbPointerDown,
+			onMouseDown: onThumbMouseDown,
+			onKeyDown,
+			style: {
+				position: "absolute",
+				left: `${outerRadius() + position.x}px`,
+				top: `${outerRadius() + position.y}px`,
+				transform: "translate(-50%, -50%)",
+				"touch-action": "none",
+				"forced-color-adjust": "none"
+			},
+			"data-dragging": s.isDragging || void 0,
+			"data-disabled": s.isDisabled || p.isDisabled || void 0
+		};
+	});
+	const inputProps = createMemo(() => {
+		const s = getState();
+		const p = getProps();
+		return {
+			type: "range",
+			id: p.id ?? inputId,
+			min: 0,
+			max: 360,
+			step: s.step,
+			value: s.getHue(),
+			name: p.name,
+			form: p.form,
+			disabled: s.isDisabled || p.isDisabled,
+			tabIndex: s.isDisabled || p.isDisabled ? void 0 : 0,
+			"aria-label": p["aria-label"] ?? (p["aria-labelledby"] ? void 0 : s.value.getChannelName("hue", locale().locale)),
+			"aria-labelledby": p["aria-labelledby"],
+			"aria-describedby": p["aria-describedby"],
+			"aria-details": p["aria-details"],
+			"aria-errormessage": p["aria-errormessage"],
+			"aria-valuetext": `${s.value.formatChannelValue("hue", locale().locale)}, ${s.value.getHueName(locale().locale)}`,
+			onKeyDown,
+			onInput: (e) => {
+				const target = e.target;
+				s.setHue(parseFloat(target.value));
+			},
+			onChange: (e) => {
+				const target = e.target;
+				s.setHue(parseFloat(target.value));
+			},
+			onBlur: () => {
+				if (s.isDragging) s.setDragging(false);
+			},
+			style: {
+				position: "absolute",
+				width: "100%",
+				height: "100%",
+				opacity: "0.0001",
+				padding: "0",
+				margin: "0",
+				overflow: "hidden",
+				clip: "rect(0, 0, 0, 0)",
+				"white-space": "nowrap",
+				border: "0",
+				"pointer-events": "none"
+			}
+		};
+	});
+	return {
+		get trackProps() {
+			return trackProps();
+		},
+		get thumbProps() {
+			return thumbProps();
+		},
+		get inputProps() {
+			return inputProps();
+		}
+	};
+}
+//#endregion
+//#region src/color/createColorField.ts
+/**
+* createColorField hook.
+*
+* Provides ARIA attributes and keyboard handling for a color input field.
+*/
+/**
+* Creates ARIA props for a color field.
+*/
+function createColorField(props, state, inputRef) {
+	const getProps = () => props();
+	const getState = () => state();
+	const generatedInputId = createId$1();
+	const labelId = createId$1();
+	const descriptionId = createId$1();
+	const errorMessageId = createId$1();
+	let didAutoFocus = false;
+	createEffect(() => {
+		const input = inputRef();
+		if (!didAutoFocus && getProps().autoFocus && input) {
+			didAutoFocus = true;
+			input.focus();
+		}
+	});
+	const isDisabled = () => getProps().isDisabled || getState().isDisabled;
+	const isReadOnly = () => getProps().isReadOnly || getState().isReadOnly;
+	const isInvalid = () => getProps().isInvalid || getState().isInvalid;
+	const validationBehavior = () => getProps().validationBehavior ?? "native";
+	const onKeyDown = (e) => {
+		const s = getState();
+		if (isDisabled() || isReadOnly()) return;
+		let handled = true;
+		switch (e.key) {
+			case "ArrowUp":
+				s.increment();
+				break;
+			case "ArrowDown":
+				s.decrement();
+				break;
+			case "PageUp":
+				s.incrementToMax();
+				break;
+			case "PageDown":
+				s.decrementToMin();
+				break;
+			case "Home":
+				s.decrementToMin();
+				break;
+			case "End":
+				s.incrementToMax();
+				break;
+			default: handled = false;
+		}
+		if (handled) e.preventDefault();
+	};
+	const onWheel = (e) => {
+		const p = getProps();
+		const s = getState();
+		if (p.isWheelDisabled || isDisabled() || isReadOnly() || document.activeElement !== inputRef()) return;
+		if (e.deltaY < 0) s.increment();
+		else if (e.deltaY > 0) s.decrement();
+		else return;
+		e.preventDefault();
+	};
+	const labelProps = createMemo(() => {
+		return {
+			id: labelId,
+			for: getProps().id ?? generatedInputId
+		};
+	});
+	const descriptionProps = createMemo(() => ({ id: descriptionId }));
+	const errorMessageProps = createMemo(() => ({ id: getProps()["aria-errormessage"] ?? errorMessageId }));
+	const inputProps = createMemo(() => {
+		const s = getState();
+		const p = getProps();
+		const channelLabel = s.channel && s.colorValue ? s.colorValue.getChannelName(s.channel, "en-US") : void 0;
+		const required = p.isRequired || s.isRequired;
+		const invalid = isInvalid();
+		const describedBy = p["aria-describedby"];
+		return {
+			id: p.id ?? generatedInputId,
+			type: "text",
+			value: s.inputValue,
+			name: s.channel ? void 0 : p.name,
+			form: s.channel ? void 0 : p.form,
+			placeholder: p.placeholder,
+			disabled: isDisabled(),
+			readOnly: isReadOnly(),
+			required: validationBehavior() === "native" ? required || void 0 : void 0,
+			tabIndex: p.excludeFromTabOrder ? -1 : void 0,
+			autoComplete: "off",
+			autoCorrect: "off",
+			spellCheck: "false",
+			"aria-label": p["aria-label"] ?? channelLabel,
+			"aria-labelledby": p["aria-labelledby"],
+			"aria-describedby": describedBy,
+			"aria-details": p["aria-details"],
+			"aria-errormessage": invalid ? p["aria-errormessage"] ?? errorMessageId : void 0,
+			"aria-invalid": invalid || void 0,
+			"aria-required": validationBehavior() === "aria" && required ? true : void 0,
+			role: s.channel ? void 0 : "textbox",
+			"aria-valuenow": void 0,
+			"aria-valuemin": void 0,
+			"aria-valuemax": void 0,
+			"aria-valuetext": void 0,
+			onInput: (e) => {
+				const target = e.target;
+				if (s.validate(target.value)) s.setInputValue(target.value);
+				else target.value = s.inputValue;
+			},
+			onChange: () => {
+				s.commit();
+			},
+			onBlur: () => {
+				s.commit();
+			},
+			onKeyDown,
+			onWheel
+		};
+	});
+	return {
+		get labelProps() {
+			return labelProps();
+		},
+		get inputProps() {
+			return inputProps();
+		},
+		get descriptionProps() {
+			return descriptionProps();
+		},
+		get errorMessageProps() {
+			return errorMessageProps();
+		}
+	};
+}
+//#endregion
+//#region src/color/createColorSwatch.ts
+/**
+* createColorSwatch hook.
+*
+* Provides ARIA attributes for a color swatch display.
+*/
+/**
+* Creates ARIA props for a color swatch.
+*/
+function createColorSwatch(props) {
+	const getProps = () => props();
+	const locale = useLocale();
+	const generatedId = createId$1();
+	const id = () => getProps().id ?? generatedId;
+	const color = createMemo(() => normalizeColor(getProps().color ?? "#fff0"));
+	const colorName = createMemo(() => {
+		const p = getProps();
+		if (p.colorName) return p.colorName;
+		const resolvedColor = color();
+		if (resolvedColor.getChannelValue("alpha") === 0) return "transparent";
+		return resolvedColor.getColorName(locale().locale);
+	});
+	const swatchProps = createMemo(() => {
+		const p = getProps();
+		const domProps = filterDOMProps(p, { labelable: true });
+		const ariaLabel = [colorName(), p["aria-label"] || ""].filter(Boolean).join(", ");
+		return {
+			...domProps,
+			id: id(),
+			slot: p.slot,
+			role: "img",
+			"aria-roledescription": "color swatch",
+			"aria-label": ariaLabel,
+			"aria-labelledby": p["aria-labelledby"] ? `${id()} ${p["aria-labelledby"]}` : void 0,
+			style: {
+				"background-color": color().toString("css"),
+				"forced-color-adjust": "none"
+			}
+		};
+	});
+	return {
+		get swatchProps() {
+			return swatchProps();
+		},
+		get color() {
+			return color();
+		}
+	};
+}
+//#endregion
+export { createColorSlider as a, createColorArea as i, createColorField as n, createColorWheel as r, createColorSwatch as t };
+
+//# sourceMappingURL=color.jsx.map