@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/dist/_chunk/color.js

@@ -1,15 +1,82 @@
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/color/useColorArea.ts
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/color/useColorField.ts
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/color/useColorSlider.ts
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/color/useColorSwatch.ts
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/color/useColorWheel.ts
+import { n as ariaTrueFalse } from "./mergeProps.js";
+import { t as onOwnedCleanup } from "./owner.js";
 import { t as filterDOMProps } from "./filterDOMProps.js";
-import { n as focusWithoutScrolling } from "./focus.js";
+import { T as focusWithoutScrolling } from "./dom.js";
+import { t as createKeyboard } from "./createKeyboard.js";
 import { i as useLocale } from "./locale.js";
 import { n as createStringFormatter } from "./createStringFormatter.js";
 import { createId as createId$1 } from "../ssr/index.js";
-import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
-import { normalizeColor, parseColor } from "@proyecto-viviana/solid-stately";
+import { t as createFormValidation } from "./createFormValidation.js";
+import { t as createField } from "./createField.js";
+import { createMemo, createSignal, createTrackedEffect } from "solid-js";
+import { createFormValidationState, normalizeColor, parseColor } from "@proyecto-viviana/solid-stately";
 //#region src/color/createColorSlider.ts
 /**
 * createColorSlider hook.
 *
 * Provides ARIA attributes and keyboard handling for a color slider.
+*
+* Ported from packages/react-aria/src/color/useColorSlider.ts.
 */
 /**
 * Creates ARIA props for a color slider.
@@ -112,7 +179,7 @@ function createColorSlider(props, state, trackRef, inputRef) {
 			window.removeEventListener("mouseup", onMouseEnd);
 		};
 	};
-	onCleanup(() => {
+	onOwnedCleanup(() => {
 		cleanupPointerDrag?.();
 		cleanupMouseDrag?.();
 	});
@@ -192,6 +259,8 @@ function createColorSlider(props, state, trackRef, inputRef) {
 			default: handled = false;
 		}
 		if (handled) {
+			s.setDragging(true);
+			s.setDragging(false);
 			e.preventDefault();
 			e.stopPropagation();
 		}
@@ -227,7 +296,6 @@ function createColorSlider(props, state, trackRef, inputRef) {
 	};
 	const trackProps = createMemo(() => {
 		const s = getState();
-		getProps();
 		const bg = generateBackground();
 		return {
 			id: trackElementId(),
@@ -306,6 +374,8 @@ function createColorSlider(props, state, trackRef, inputRef) {
 			onChange: (e) => {
 				const target = e.target;
 				s.setThumbValue(parseFloat(target.value));
+				s.setDragging(true);
+				s.setDragging(false);
 			},
 			onFocus: () => {},
 			style: {
@@ -644,11 +714,13 @@ function createColorStringFormatter() {
 * createColorArea hook.
 *
 * Provides ARIA attributes and keyboard/pointer handling for a 2D color area.
+*
+* Ported from packages/react-aria/src/color/useColorArea.ts.
 */
 /**
 * Creates ARIA props for a color area.
 */
-function createColorArea(props, state, areaRef) {
+function createColorArea(props, state, areaRef, inputXRef, inputYRef) {
 	const getProps = () => props();
 	const getState = () => state();
 	const locale = useLocale();
@@ -692,6 +764,36 @@ function createColorArea(props, state, areaRef) {
 			formatChannelValueText(s.zChannel)
 		].join(", ") + `, ${value.getColorName(loc)}`;
 	};
+	const getXInput = () => {
+		const fromRef = inputXRef?.() ?? getProps().inputXRef?.();
+		if (fromRef) return fromRef;
+		const resolvedId = getProps().id ? `${getProps().id}-x` : xInputId;
+		const byId = typeof document !== "undefined" ? document.getElementById(resolvedId) : null;
+		if (byId) return byId;
+		const area = areaRef();
+		if (!area) return null;
+		return area.querySelector("input[type=\"range\"][aria-orientation=\"horizontal\"]") ?? area.querySelectorAll("input[type=\"range\"]")[0] ?? null;
+	};
+	const getYInput = () => {
+		const fromRef = inputYRef?.() ?? getProps().inputYRef?.();
+		if (fromRef) return fromRef;
+		const resolvedId = getProps().id ? `${getProps().id}-y` : yInputId;
+		const byId = typeof document !== "undefined" ? document.getElementById(resolvedId) : null;
+		if (byId) return byId;
+		const area = areaRef();
+		if (!area) return null;
+		return area.querySelector("input[type=\"range\"][aria-orientation=\"vertical\"]") ?? area.querySelectorAll("input[type=\"range\"]")[1] ?? null;
+	};
+	const focusInput = (axis = "x") => {
+		const el = axis === "y" ? getYInput() : getXInput();
+		if (el) {
+			focusWithoutScrolling(el);
+			queueMicrotask(() => {
+				const current = axis === "y" ? getYInput() : getXInput();
+				if (current) focusWithoutScrolling(current);
+			});
+		}
+	};
 	const updateFromInput = (e, axis) => {
 		const target = e.target;
 		const nextValue = parseFloat(target.value);
@@ -699,37 +801,137 @@ function createColorArea(props, state, areaRef) {
 		if (axis === "x") getState().setXValue(nextValue);
 		else getState().setYValue(nextValue);
 	};
-	const getPositionFromEvent = (e) => {
+	let startPointerPos = {
+		x: 0,
+		y: 0
+	};
+	let startThumbPos = {
+		x: 0,
+		y: 0
+	};
+	let lastMovePos = null;
+	let cleanupDragListeners;
+	const installDragListeners = () => {
+		if (typeof window === "undefined") return;
+		cleanupDragListeners?.();
+		const onPointerMove = (e) => {
+			if (!getState().isDragging) return;
+			handleMove(e.clientX, e.clientY);
+		};
+		const onPointerEnd = (e) => {
+			endDragging(e.currentTarget, e.pointerId);
+		};
+		window.addEventListener("pointermove", onPointerMove);
+		window.addEventListener("pointerup", onPointerEnd);
+		window.addEventListener("pointercancel", onPointerEnd);
+		cleanupDragListeners = () => {
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerEnd);
+			window.removeEventListener("pointercancel", onPointerEnd);
+		};
+	};
+	const handleMove = (clientX, clientY) => {
+		if (lastMovePos && lastMovePos.x === clientX && lastMovePos.y === clientY) return;
+		lastMovePos = {
+			x: clientX,
+			y: clientY
+		};
 		const area = areaRef();
-		if (!area) return null;
+		if (!area) return;
 		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))
+		if (rect.width === 0 || rect.height === 0) return;
+		const deltaX = clientX - startPointerPos.x;
+		const deltaY = clientY - startPointerPos.y;
+		const normalizedDeltaX = (isRTL() ? -deltaX : deltaX) / rect.width;
+		const normalizedDeltaY = deltaY / rect.height;
+		const newX = Math.max(0, Math.min(1, startThumbPos.x + normalizedDeltaX));
+		const newY = Math.max(0, Math.min(1, startThumbPos.y + normalizedDeltaY));
+		getState().setColorFromPoint(newX, newY);
+	};
+	const endDragging = (target, pointerId) => {
+		cleanupDragListeners?.();
+		cleanupDragListeners = void 0;
+		lastMovePos = null;
+		if (getState().isDragging) {
+			getState().setDragging(false);
+			if (pointerId !== void 0 && target && target.releasePointerCapture) try {
+				target.releasePointerCapture(pointerId);
+			} catch {}
+			focusInput(focusedInput() ?? "x");
+		}
+	};
+	const startDragging = (clientX, clientY, fromThumb, target, pointerId) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		if (getState().isDragging) return;
+		setValueChangedViaKeyboard(false);
+		setValueChangedViaInputChangeEvent(false);
+		const s = getState();
+		if (fromThumb) startThumbPos = s.getThumbPosition();
+		else {
+			const area = areaRef();
+			if (!area) return;
+			const rect = area.getBoundingClientRect();
+			if (rect.width === 0 || rect.height === 0) return;
+			const physicalX = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+			const x = isRTL() ? 1 - physicalX : physicalX;
+			const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
+			s.setColorFromPoint(x, y);
+			startThumbPos = {
+				x,
+				y
+			};
+		}
+		startPointerPos = {
+			x: clientX,
+			y: clientY
 		};
+		lastMovePos = {
+			x: clientX,
+			y: clientY
+		};
+		focusInput(focusedInput() ?? "x");
+		s.setDragging(true);
+		if (pointerId !== void 0 && target?.setPointerCapture) try {
+			target.setPointerCapture(pointerId);
+		} catch {}
+		installDragListeners();
 	};
-	const onPointerDown = (e) => {
+	const onThumbPointerDown = (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);
+		if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+		e.stopPropagation();
+		e.preventDefault();
+		startDragging(e.clientX, e.clientY, true, e.currentTarget, e.pointerId);
+	};
+	const onThumbMouseDown = (e) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
+		e.stopPropagation();
+		e.preventDefault();
+		startDragging(e.clientX, e.clientY, true);
+	};
+	const onAreaPointerDown = (e) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+		e.preventDefault();
+		startDragging(e.clientX, e.clientY, false, e.currentTarget, e.pointerId);
+	};
+	const onAreaMouseDown = (e) => {
+		if (getProps().isDisabled || getState().isDisabled) return;
+		if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
+		e.preventDefault();
+		startDragging(e.clientX, e.clientY, false);
 	};
 	const onPointerMove = (e) => {
 		if (!getState().isDragging) return;
-		const pos = getPositionFromEvent(e);
-		if (!pos) return;
-		getState().setColorFromPoint(pos.x, pos.y);
+		handleMove(e.clientX, e.clientY);
 	};
 	const onPointerUp = (e) => {
-		if (getState().isDragging) {
-			getState().setDragging(false);
-			e.currentTarget.releasePointerCapture?.(e.pointerId);
-		}
+		if (getState().isDragging) endDragging(e.currentTarget, e.pointerId);
 	};
+	onOwnedCleanup(() => {
+		cleanupDragListeners?.();
+	});
 	const onKeyDown = (e) => {
 		if (getProps().isDisabled || getState().isDisabled) return;
 		const s = getState();
@@ -741,10 +943,12 @@ function createColorArea(props, state, areaRef) {
 			case "ArrowRight":
 				if (isRTL()) s.decrementX(xStep);
 				else s.incrementX(xStep);
+				focusedAxis = "x";
 				break;
 			case "ArrowLeft":
 				if (isRTL()) s.incrementX(xStep);
 				else s.decrementX(xStep);
+				focusedAxis = "x";
 				break;
 			case "ArrowUp":
 				s.incrementY(yStep);
@@ -765,10 +969,12 @@ function createColorArea(props, state, areaRef) {
 			case "Home":
 				if (isRTL()) s.incrementX(s.xChannelPageStep);
 				else s.decrementX(s.xChannelPageStep);
+				focusedAxis = "x";
 				break;
 			case "End":
 				if (isRTL()) s.decrementX(s.xChannelPageStep);
 				else s.incrementX(s.xChannelPageStep);
+				focusedAxis = "x";
 				break;
 			default: handled = false;
 		}
@@ -777,6 +983,7 @@ function createColorArea(props, state, areaRef) {
 			setValueChangedViaKeyboard(true);
 			s.setDragging(true);
 			s.setDragging(false);
+			focusInput(focusedAxis);
 			e.preventDefault();
 			e.stopPropagation();
 		}
@@ -797,9 +1004,10 @@ function createColorArea(props, state, areaRef) {
 			role: "group",
 			"aria-label": colorAreaLabel(),
 			"aria-labelledby": p["aria-labelledby"],
-			onPointerDown,
+			onPointerDown: onAreaPointerDown,
 			onPointerMove,
 			onPointerUp,
+			onMouseDown: onAreaMouseDown,
 			style: {
 				position: "relative",
 				"touch-action": "none",
@@ -890,6 +1098,10 @@ function createColorArea(props, state, areaRef) {
 				"touch-action": "none",
 				"forced-color-adjust": "none"
 			},
+			onPointerDown: onThumbPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onMouseDown: onThumbMouseDown,
 			onKeyDown,
 			onFocusOut,
 			"data-dragging": s.isDragging || void 0,
@@ -902,7 +1114,7 @@ function createColorArea(props, state, areaRef) {
 		const xRange = s.value.getChannelRange(s.xChannel);
 		return {
 			type: "range",
-			id: p.id ?? xInputId,
+			id: p.id ? `${p.id}-x` : xInputId,
 			"aria-label": colorInputLabel(),
 			"aria-roledescription": stringFormatter().format("twoDimensionalSlider"),
 			"aria-valuetext": getAriaValueTextForChannel(s.xChannel),
@@ -941,7 +1153,7 @@ function createColorArea(props, state, areaRef) {
 		const yRange = s.value.getChannelRange(s.yChannel);
 		return {
 			type: "range",
-			id: p.id ?? yInputId,
+			id: p.id ? `${p.id}-y` : yInputId,
 			"aria-label": colorInputLabel(),
 			"aria-roledescription": stringFormatter().format("twoDimensionalSlider"),
 			"aria-valuetext": getAriaValueTextForChannel(s.yChannel),
@@ -998,6 +1210,8 @@ function createColorArea(props, state, areaRef) {
 * createColorWheel hook.
 *
 * Provides ARIA attributes and keyboard/pointer handling for a circular hue selector.
+*
+* Ported from packages/react-aria/src/color/useColorWheel.ts.
 */
 /**
 * Creates ARIA props for a color wheel.
@@ -1084,7 +1298,7 @@ function createColorWheel(props, state, wheelRef) {
 			window.removeEventListener("mouseup", onMouseEnd);
 		};
 	};
-	onCleanup(() => {
+	onOwnedCleanup(() => {
 		cleanupPointerDrag?.();
 		cleanupMouseDrag?.();
 	});
@@ -1150,13 +1364,15 @@ function createColorWheel(props, state, wheelRef) {
 				s.setHue(0);
 				break;
 			case "End":
-				s.setHue(359);
+				s.setHue(0);
 				break;
 			default: handled = false;
 		}
 		if (handled) {
-			s.setDragging(true);
-			s.setDragging(false);
+			if (e.key !== "Home" && e.key !== "End") {
+				s.setDragging(true);
+				s.setDragging(false);
+			}
 			e.preventDefault();
 			e.stopPropagation();
 		}
@@ -1237,6 +1453,8 @@ function createColorWheel(props, state, wheelRef) {
 			onChange: (e) => {
 				const target = e.target;
 				s.setHue(parseFloat(target.value));
+				s.setDragging(true);
+				s.setDragging(false);
 			},
 			style: {
 				position: "absolute",
@@ -1271,6 +1489,8 @@ function createColorWheel(props, state, wheelRef) {
 * createColorField hook.
 *
 * Provides ARIA attributes and keyboard handling for a color input field.
+*
+* Ported from packages/react-aria/src/color/useColorField.ts.
 */
 /**
 * Creates ARIA props for a color field.
@@ -1280,10 +1500,8 @@ function createColorField(props, state, inputRef) {
 	const getState = () => state();
 	const generatedInputId = createId$1();
 	const labelId = createId$1();
-	const descriptionId = createId$1();
-	const errorMessageId = createId$1();
 	let didAutoFocus = false;
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const input = inputRef();
 		if (!didAutoFocus && getProps().autoFocus && input) {
 			didAutoFocus = true;
@@ -1294,6 +1512,34 @@ function createColorField(props, state, inputRef) {
 	const isReadOnly = () => getProps().isReadOnly || getState().isReadOnly;
 	const isInvalid = () => getProps().isInvalid || getState().isInvalid;
 	const validationBehavior = () => getProps().validationBehavior ?? "native";
+	const validationState = createFormValidationState({
+		get value() {
+			return getState().inputValue;
+		},
+		get isInvalid() {
+			return isInvalid();
+		},
+		get validationBehavior() {
+			return validationBehavior();
+		}
+	});
+	createFormValidation({ get validationBehavior() {
+		return validationBehavior();
+	} }, validationState, () => inputRef() ?? void 0);
+	const field = createField({
+		get description() {
+			return getProps().description;
+		},
+		get errorMessage() {
+			return getProps().errorMessage;
+		},
+		get isInvalid() {
+			return isInvalid();
+		},
+		get "aria-describedby"() {
+			return getProps()["aria-describedby"];
+		}
+	});
 	const onKeyDown = (e) => {
 		const s = getState();
 		if (isDisabled() || isReadOnly()) return;
@@ -1306,10 +1552,10 @@ function createColorField(props, state, inputRef) {
 				s.decrement();
 				break;
 			case "PageUp":
-				s.incrementToMax();
+				s.increment();
 				break;
 			case "PageDown":
-				s.decrementToMin();
+				s.decrement();
 				break;
 			case "Home":
 				s.decrementToMin();
@@ -1321,12 +1567,23 @@ function createColorField(props, state, inputRef) {
 		}
 		if (handled) e.preventDefault();
 	};
+	const { keyboardProps } = createKeyboard({
+		shortcuts: { Enter: () => {
+			const s = getState();
+			if (isDisabled() || isReadOnly()) return { shouldPreventDefault: false };
+			s.commit();
+			const commitValidation = s.commitValidation;
+			commitValidation?.();
+			return { shouldPreventDefault: false };
+		} },
+		onKeyDown
+	});
 	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();
+		if (e.deltaY > 0) s.increment();
+		else if (e.deltaY < 0) s.decrement();
 		else return;
 		e.preventDefault();
 	};
@@ -1336,15 +1593,14 @@ function createColorField(props, state, inputRef) {
 			for: getProps().id ?? generatedInputId
 		};
 	});
-	const descriptionProps = createMemo(() => ({ id: descriptionId }));
-	const errorMessageProps = createMemo(() => ({ id: getProps()["aria-errormessage"] ?? errorMessageId }));
+	const descriptionProps = () => field.descriptionProps;
+	const errorMessageProps = () => field.errorMessageProps;
 	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",
@@ -1361,11 +1617,11 @@ function createColorField(props, state, inputRef) {
 			spellCheck: "false",
 			"aria-label": p["aria-label"] ?? channelLabel,
 			"aria-labelledby": p["aria-labelledby"],
-			"aria-describedby": describedBy,
+			"aria-describedby": field.fieldProps["aria-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,
+			"aria-errormessage": invalid ? p["aria-errormessage"] ?? field.errorMessageProps.id : void 0,
+			"aria-invalid": invalid ? ariaTrueFalse(true) : void 0,
+			"aria-required": validationBehavior() === "aria" && required ? "true" : void 0,
 			role: s.channel ? void 0 : "textbox",
 			"aria-valuenow": void 0,
 			"aria-valuemin": void 0,
@@ -1382,7 +1638,8 @@ function createColorField(props, state, inputRef) {
 			onBlur: () => {
 				s.commit();
 			},
-			onKeyDown,
+			onKeyDown: keyboardProps.onKeyDown,
+			onKeyUp: keyboardProps.onKeyUp,
 			onWheel
 		};
 	});
@@ -1407,6 +1664,8 @@ function createColorField(props, state, inputRef) {
 * createColorSwatch hook.
 *
 * Provides ARIA attributes for a color swatch display.
+*
+* Ported from packages/react-aria/src/color/useColorSwatch.ts.
 */
 /**
 * Creates ARIA props for a color swatch.