@react-aria/color 3.0.0-nightly.4555 → 3.0.0-nightly.4560

package/dist/useColorAreaGradient.module.js

@@ -0,0 +1,224 @@
+import {useMemo as $hLqEt$useMemo} from "react";
+
+/*
+ * Copyright 2022 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.
+*/ 
+const $40297c24c53588e6$var$generateRGB_R = (orientation, dir, zValue)=>{
+    let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+    let result = {
+        colorAreaStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
+        },
+        gradientStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
+            "WebkitMaskImage": maskImage,
+            maskImage: maskImage
+        }
+    };
+    return result;
+};
+const $40297c24c53588e6$var$generateRGB_G = (orientation, dir, zValue)=>{
+    let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+    let result = {
+        colorAreaStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
+        },
+        gradientStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
+            "WebkitMaskImage": maskImage,
+            maskImage: maskImage
+        }
+    };
+    return result;
+};
+const $40297c24c53588e6$var$generateRGB_B = (orientation, dir, zValue)=>{
+    let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+    let result = {
+        colorAreaStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
+        },
+        gradientStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
+            "WebkitMaskImage": maskImage,
+            maskImage: maskImage
+        }
+    };
+    return result;
+};
+const $40297c24c53588e6$var$generateHSL_H = (orientation, dir, zValue)=>{
+    let result = {
+        colorAreaStyles: {},
+        gradientStyles: {
+            background: [
+                `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
+                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
+                `hsl(${zValue}, 100%, 50%)`
+            ].join(",")
+        }
+    };
+    return result;
+};
+const $40297c24c53588e6$var$generateHSL_S = (orientation, dir, alphaValue)=>{
+    let result = {
+        colorAreaStyles: {},
+        gradientStyles: {
+            background: [
+                `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
+                `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+                "hsl(0, 0%, 50%)"
+            ].join(",")
+        }
+    };
+    return result;
+};
+const $40297c24c53588e6$var$generateHSL_L = (orientation, dir, zValue)=>{
+    let result = {
+        colorAreaStyles: {},
+        gradientStyles: {
+            backgroundImage: [
+                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
+                `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
+            ].join(",")
+        }
+    };
+    return result;
+};
+const $40297c24c53588e6$var$generateHSB_H = (orientation, dir, zValue)=>{
+    let result = {
+        colorAreaStyles: {},
+        gradientStyles: {
+            background: [
+                `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
+                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
+                `hsl(${zValue}, 100%, 50%)`
+            ].join(",")
+        }
+    };
+    return result;
+};
+const $40297c24c53588e6$var$generateHSB_S = (orientation, dir, alphaValue)=>{
+    let result = {
+        colorAreaStyles: {},
+        gradientStyles: {
+            background: [
+                `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
+                `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
+            ].join(",")
+        }
+    };
+    return result;
+};
+const $40297c24c53588e6$var$generateHSB_B = (orientation, dir, alphaValue)=>{
+    let result = {
+        colorAreaStyles: {},
+        gradientStyles: {
+            background: [
+                `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
+                `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+                "#000"
+            ].join(",")
+        }
+    };
+    return result;
+};
+function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, isDisabled: isDisabled }) {
+    let returnVal = (0, $hLqEt$useMemo)(()=>{
+        let orientation = [
+            "top",
+            direction === "rtl" ? "left" : "right"
+        ];
+        let dir = false;
+        let background = {
+            colorAreaStyles: {},
+            gradientStyles: {}
+        };
+        let zValue = state.value.getChannelValue(zChannel);
+        let { minValue: zMin, maxValue: zMax } = state.value.getChannelRange(zChannel);
+        let alphaValue = (zValue - zMin) / (zMax - zMin);
+        let isHSL = state.value.getColorSpace() === "hsl";
+        if (!isDisabled) switch(zChannel){
+            case "red":
+                dir = xChannel === "green";
+                background = $40297c24c53588e6$var$generateRGB_R(orientation, dir, zValue);
+                break;
+            case "green":
+                dir = xChannel === "red";
+                background = $40297c24c53588e6$var$generateRGB_G(orientation, dir, zValue);
+                break;
+            case "blue":
+                dir = xChannel === "red";
+                background = $40297c24c53588e6$var$generateRGB_B(orientation, dir, zValue);
+                break;
+            case "hue":
+                dir = xChannel !== "saturation";
+                if (isHSL) background = $40297c24c53588e6$var$generateHSL_H(orientation, dir, zValue);
+                else background = $40297c24c53588e6$var$generateHSB_H(orientation, dir, zValue);
+                break;
+            case "saturation":
+                dir = xChannel === "hue";
+                if (isHSL) background = $40297c24c53588e6$var$generateHSL_S(orientation, dir, alphaValue);
+                else background = $40297c24c53588e6$var$generateHSB_S(orientation, dir, alphaValue);
+                break;
+            case "brightness":
+                dir = xChannel === "hue";
+                background = $40297c24c53588e6$var$generateHSB_B(orientation, dir, alphaValue);
+                break;
+            case "lightness":
+                dir = xChannel === "hue";
+                background = $40297c24c53588e6$var$generateHSL_L(orientation, dir, zValue);
+                break;
+        }
+        let { x: x, y: y } = state.getThumbPosition();
+        if (direction === "rtl") x = 1 - x;
+        let forcedColorAdjustNoneStyle = {
+            forcedColorAdjust: "none"
+        };
+        return {
+            colorAreaStyleProps: {
+                style: {
+                    position: "relative",
+                    touchAction: "none",
+                    ...forcedColorAdjustNoneStyle,
+                    ...background.colorAreaStyles
+                }
+            },
+            gradientStyleProps: {
+                style: {
+                    touchAction: "none",
+                    ...forcedColorAdjustNoneStyle,
+                    ...background.gradientStyles
+                }
+            },
+            thumbStyleProps: {
+                style: {
+                    position: "absolute",
+                    left: `${x * 100}%`,
+                    top: `${y * 100}%`,
+                    transform: "translate(0%, 0%)",
+                    touchAction: "none",
+                    ...forcedColorAdjustNoneStyle
+                }
+            }
+        };
+    }, [
+        direction,
+        state,
+        zChannel,
+        xChannel,
+        isDisabled
+    ]);
+    return returnVal;
+}
+
+
+export {$40297c24c53588e6$export$dd62420467d245ca as useColorAreaGradient};
+//# sourceMappingURL=useColorAreaGradient.module.js.map

package/dist/useColorAreaGradient.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-aria/color/src/useColorAreaGradient.ts"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n*/\n\nimport {CSSProperties, useMemo} from 'react';\n\nconst generateRGB_R = (orientation, dir: boolean, zValue: number) => {\n  let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n  let result = {\n    colorAreaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`\n    },\n    gradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,\n      'WebkitMaskImage': maskImage,\n      maskImage\n    }\n  };\n  return result;\n};\n\nconst generateRGB_G = (orientation, dir: boolean, zValue: number) => {\n  let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n  let result = {\n    colorAreaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`\n    },\n    gradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,\n      'WebkitMaskImage': maskImage,\n      maskImage\n    }\n  };\n  return result;\n};\n\nconst generateRGB_B = (orientation, dir: boolean, zValue: number) => {\n  let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n  let result = {\n    colorAreaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`\n    },\n    gradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,\n      'WebkitMaskImage': maskImage,\n      maskImage\n    }\n  };\n  return result;\n};\n\n\nconst generateHSL_H = (orientation, dir: boolean, zValue: number) => {\n  let result = {\n    colorAreaStyles: {},\n    gradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,\n        `hsl(${zValue}, 100%, 50%)`\n      ].join(',')\n    }\n  };\n  return result;\n};\n\nconst generateHSL_S = (orientation, dir: boolean, alphaValue: number) => {\n  let result = {\n    colorAreaStyles: {},\n    gradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,\n        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,\n        'hsl(0, 0%, 50%)'\n      ].join(',')\n    }\n  };\n  return result;\n};\n\nconst generateHSL_L = (orientation, dir: boolean, zValue: number) => {\n  let result = {\n    colorAreaStyles: {},\n    gradientStyles: {\n      backgroundImage: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,\n        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`\n      ].join(',')\n    }\n  };\n  return result;\n};\n\n\nconst generateHSB_H = (orientation, dir: boolean, zValue: number) => {\n  let result = {\n    colorAreaStyles: {},\n    gradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,\n        `hsl(${zValue}, 100%, 50%)`\n      ].join(',')\n    }\n  };\n  return result;\n};\n\nconst generateHSB_S = (orientation, dir: boolean, alphaValue: number) => {\n  let result = {\n    colorAreaStyles: {},\n    gradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,\n        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`\n      ].join(',')\n    }\n  };\n  return result;\n};\n\nconst generateHSB_B = (orientation, dir: boolean, alphaValue: number) => {\n  let result = {\n    colorAreaStyles: {},\n    gradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,\n        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,\n        '#000'\n      ].join(',')\n    }\n  };\n  return result;\n};\n\n\ninterface Gradients {\n  colorAreaStyleProps: {\n    style: CSSProperties\n  },\n  gradientStyleProps: {\n    style: CSSProperties\n  },\n  thumbStyleProps: {\n    style: CSSProperties\n  }\n}\n\nexport function useColorAreaGradient({direction, state, zChannel, xChannel, isDisabled}): Gradients {\n  let returnVal = useMemo<Gradients>(() => {\n    let orientation = ['top', direction === 'rtl' ? 'left' : 'right'];\n    let dir = false;\n    let background = {colorAreaStyles: {}, gradientStyles: {}};\n    let zValue = state.value.getChannelValue(zChannel);\n    let {minValue: zMin, maxValue: zMax} = state.value.getChannelRange(zChannel);\n    let alphaValue = (zValue - zMin) / (zMax - zMin);\n    let isHSL = state.value.getColorSpace() === 'hsl';\n    if (!isDisabled) {\n      switch (zChannel) {\n        case 'red': {\n          dir = xChannel === 'green';\n          background = generateRGB_R(orientation, dir, zValue);\n          break;\n        }\n        case 'green': {\n          dir = xChannel === 'red';\n          background = generateRGB_G(orientation, dir, zValue);\n          break;\n        }\n        case 'blue': {\n          dir = xChannel === 'red';\n          background = generateRGB_B(orientation, dir, zValue);\n          break;\n        }\n        case 'hue': {\n          dir = xChannel !== 'saturation';\n          if (isHSL) {\n            background = generateHSL_H(orientation, dir, zValue);\n          } else {\n            background = generateHSB_H(orientation, dir, zValue);\n          }\n          break;\n        }\n        case 'saturation': {\n          dir = xChannel === 'hue';\n          if (isHSL) {\n            background = generateHSL_S(orientation, dir, alphaValue);\n          } else {\n            background = generateHSB_S(orientation, dir, alphaValue);\n          }\n          break;\n        }\n        case 'brightness': {\n          dir = xChannel === 'hue';\n          background = generateHSB_B(orientation, dir, alphaValue);\n          break;\n        }\n        case 'lightness': {\n          dir = xChannel === 'hue';\n          background = generateHSL_L(orientation, dir, zValue);\n          break;\n        }\n      }\n    }\n\n    let {x, y} = state.getThumbPosition();\n\n    if (direction === 'rtl') {\n      x = 1 - x;\n    }\n\n    let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};\n\n    return {\n      colorAreaStyleProps: {\n        style: {\n          position: 'relative',\n          touchAction: 'none',\n          ...forcedColorAdjustNoneStyle,\n          ...background.colorAreaStyles\n        }\n      },\n      gradientStyleProps: {\n        style: {\n          touchAction: 'none',\n          ...forcedColorAdjustNoneStyle,\n          ...background.gradientStyles\n        }\n      },\n      thumbStyleProps: {\n        style: {\n          position: 'absolute',\n          left: `${x * 100}%`,\n          top: `${y * 100}%`,\n          transform: 'translate(0%, 0%)',\n          touchAction: 'none',\n          ...forcedColorAdjustNoneStyle\n        }\n      }\n    };\n  }, [direction, state, zChannel, xChannel, isDisabled]);\n\n  return returnVal;\n}\n\n"],"names":[],"version":3,"file":"useColorAreaGradient.module.js.map"}

package/dist/useColorField.main.js

@@ -0,0 +1,97 @@
+var $grujV$react = require("react");
+var $grujV$reactariautils = require("@react-aria/utils");
+var $grujV$reactstatelyform = require("@react-stately/form");
+var $grujV$reactariainteractions = require("@react-aria/interactions");
+var $grujV$reactariatextfield = require("@react-aria/textfield");
+var $grujV$reactariaspinbutton = require("@react-aria/spinbutton");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColorField", () => $58c850037bc7a7ce$export$77e32ca575a28fdf);
+/*
+ * 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.
+ */ 
+
+
+
+
+
+function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
+    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
+    let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
+    let inputId = (0, $grujV$reactariautils.useId)();
+    let { spinButtonProps: spinButtonProps } = (0, $grujV$reactariaspinbutton.useSpinButton)({
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired,
+        maxValue: 0xFFFFFF,
+        minValue: 0,
+        onIncrement: increment,
+        onIncrementToMax: incrementToMax,
+        onDecrement: decrement,
+        onDecrementToMin: decrementToMin,
+        value: colorValue ? colorValue.toHexInt() : undefined,
+        textValue: colorValue ? colorValue.toString("hex") : undefined
+    });
+    let [focusWithin, setFocusWithin] = (0, $grujV$react.useState)(false);
+    let { focusWithinProps: focusWithinProps } = (0, $grujV$reactariainteractions.useFocusWithin)({
+        isDisabled: isDisabled,
+        onFocusWithinChange: setFocusWithin
+    });
+    let onWheel = (0, $grujV$react.useCallback)((e)=>{
+        if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+        if (e.deltaY > 0) increment();
+        else if (e.deltaY < 0) decrement();
+    }, [
+        decrement,
+        increment
+    ]);
+    // If the input isn't supposed to receive input, disable scrolling.
+    let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
+    (0, $grujV$reactariainteractions.useScrollWheel)({
+        onScroll: onWheel,
+        isDisabled: scrollingDisabled
+    }, ref);
+    let onChange = (value)=>{
+        if (state.validate(value)) state.setInputValue(value);
+    };
+    let { inputProps: inputProps, ...otherProps } = (0, $grujV$reactariatextfield.useFormattedTextField)((0, $grujV$reactariautils.mergeProps)(props, {
+        id: inputId,
+        value: inputValue,
+        defaultValue: undefined,
+        validate: undefined,
+        [(0, $grujV$reactstatelyform.privateValidationStateProp)]: state,
+        type: "text",
+        autoComplete: "off",
+        onChange: onChange
+    }), state, ref);
+    inputProps = (0, $grujV$reactariautils.mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
+        role: "textbox",
+        "aria-valuemax": null,
+        "aria-valuemin": null,
+        "aria-valuenow": null,
+        "aria-valuetext": null,
+        autoCorrect: "off",
+        spellCheck: "false",
+        onBlur: commit
+    });
+    if (validationBehavior === "native") inputProps["aria-required"] = undefined;
+    return {
+        inputProps: inputProps,
+        ...otherProps
+    };
+}
+
+
+//# sourceMappingURL=useColorField.main.js.map

package/dist/useColorField.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA6BM,SAAS,0CACd,KAA0B,EAC1B,KAAsB,EACtB,GAAgC;IAEhC,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,mBACV,eAAe,sBACf,qBAAqB,QACtB,GAAG;IAEJ,IAAI,cACF,UAAU,cACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,kBACd,cAAc,UACd,MAAM,EACP,GAAG;IAEJ,IAAI,UAAU,CAAA,GAAA,2BAAI;IAClB,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,wCAAY,EAClC;oBACE;oBACA;oBACA;QACA,UAAU;QACV,UAAU;QACV,aAAa;QACb,kBAAkB;QAClB,aAAa;QACb,kBAAkB;QAClB,OAAO,aAAa,WAAW,QAAQ,KAAK;QAC5C,WAAW,aAAa,WAAW,QAAQ,CAAC,SAAS;IACvD;IAGF,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC7C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,2CAAa,EAAE;oBAAC;QAAY,qBAAqB;IAAc;IAExF,IAAI,UAAU,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,IAAI,KAAK,GAAG,CAAC,EAAE,MAAM,KAAK,KAAK,GAAG,CAAC,EAAE,MAAM,GACzC;QAEF,IAAI,EAAE,MAAM,GAAG,GACb;aACK,IAAI,EAAE,MAAM,GAAG,GACpB;IAEJ,GAAG;QAAC;QAAW;KAAU;IACzB,mEAAmE;IACnE,IAAI,oBAAoB,mBAAmB,cAAc,cAAc,CAAC;IACxE,CAAA,GAAA,2CAAa,EAAE;QAAC,UAAU;QAAS,YAAY;IAAiB,GAAG;IAEnE,IAAI,WAAW,CAAA;QACb,IAAI,MAAM,QAAQ,CAAC,QACjB,MAAM,aAAa,CAAC;IAExB;IAEA,IAAI,cAAC,UAAU,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,+CAAoB,EACpD,CAAA,GAAA,gCAAS,EAAE,OAAO;QAChB,IAAI;QACJ,OAAO;QACP,cAAc;QACd,UAAU;QACV,CAAC,CAAA,GAAA,kDAAyB,EAAE,EAAE;QAC9B,MAAM;QACN,cAAc;kBACd;IACF,IAAI,OAAO;IAEb,aAAa,CAAA,GAAA,gCAAS,EAAE,YAAY,iBAAiB,kBAAkB;QACrE,MAAM;QACN,iBAAiB;QACjB,iBAAiB;QACjB,iBAAiB;QACjB,kBAAkB;QAClB,aAAa;QACb,YAAY;QACZ,QAAQ;IACV;IAEA,IAAI,uBAAuB,UACzB,UAAU,CAAC,gBAAgB,GAAG;IAGhC,OAAO;oBACL;QACA,GAAG,UAAU;IACf;AACF","sources":["packages/@react-aria/color/src/useColorField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorFieldProps} from '@react-types/color';\nimport {ColorFieldState} from '@react-stately/color';\nimport {\n  HTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useState\n} from 'react';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {useSpinButton} from '@react-aria/spinbutton';\nimport {ValidationResult} from '@react-types/shared';\n\nexport interface ColorFieldAria extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the input element. */\n  inputProps: HTMLAttributes<HTMLInputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color field component.\n * Color fields allow users to enter and adjust a hex color value.\n */\nexport function useColorField(\n  props: AriaColorFieldProps,\n  state: ColorFieldState,\n  ref: RefObject<HTMLInputElement>\n): ColorFieldAria {\n  let {\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isWheelDisabled,\n    validationBehavior = 'aria'\n  } = props;\n\n  let {\n    colorValue,\n    inputValue,\n    increment,\n    decrement,\n    incrementToMax,\n    decrementToMin,\n    commit\n  } = state;\n\n  let inputId = useId();\n  let {spinButtonProps} = useSpinButton(\n    {\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      maxValue: 0xFFFFFF,\n      minValue: 0,\n      onIncrement: increment,\n      onIncrementToMax: incrementToMax,\n      onDecrement: decrement,\n      onDecrementToMin: decrementToMin,\n      value: colorValue ? colorValue.toHexInt() : undefined,\n      textValue: colorValue ? colorValue.toString('hex') : undefined\n    }\n  );\n\n  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback((e) => {\n    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n      return;\n    }\n    if (e.deltaY > 0) {\n      increment();\n    } else if (e.deltaY < 0) {\n      decrement();\n    }\n  }, [decrement, increment]);\n  // If the input isn't supposed to receive input, disable scrolling.\n  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let {inputProps, ...otherProps} = useFormattedTextField(\n    mergeProps(props, {\n      id: inputId,\n      value: inputValue,\n      defaultValue: undefined,\n      validate: undefined,\n      [privateValidationStateProp]: state,\n      type: 'text',\n      autoComplete: 'off',\n      onChange\n    }), state, ref);\n\n  inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {\n    role: 'textbox',\n    'aria-valuemax': null,\n    'aria-valuemin': null,\n    'aria-valuenow': null,\n    'aria-valuetext': null,\n    autoCorrect: 'off',\n    spellCheck: 'false',\n    onBlur: commit\n  });\n\n  if (validationBehavior === 'native') {\n    inputProps['aria-required'] = undefined;\n  }\n\n  return {\n    inputProps,\n    ...otherProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorField.main.js.map"}

package/dist/useColorField.mjs

@@ -0,0 +1,92 @@
+import {useState as $f8mV7$useState, useCallback as $f8mV7$useCallback} from "react";
+import {useId as $f8mV7$useId, mergeProps as $f8mV7$mergeProps} from "@react-aria/utils";
+import {privateValidationStateProp as $f8mV7$privateValidationStateProp} from "@react-stately/form";
+import {useFocusWithin as $f8mV7$useFocusWithin, useScrollWheel as $f8mV7$useScrollWheel} from "@react-aria/interactions";
+import {useFormattedTextField as $f8mV7$useFormattedTextField} from "@react-aria/textfield";
+import {useSpinButton as $f8mV7$useSpinButton} from "@react-aria/spinbutton";
+
+/*
+ * 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.
+ */ 
+
+
+
+
+
+function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
+    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
+    let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
+    let inputId = (0, $f8mV7$useId)();
+    let { spinButtonProps: spinButtonProps } = (0, $f8mV7$useSpinButton)({
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired,
+        maxValue: 0xFFFFFF,
+        minValue: 0,
+        onIncrement: increment,
+        onIncrementToMax: incrementToMax,
+        onDecrement: decrement,
+        onDecrementToMin: decrementToMin,
+        value: colorValue ? colorValue.toHexInt() : undefined,
+        textValue: colorValue ? colorValue.toString("hex") : undefined
+    });
+    let [focusWithin, setFocusWithin] = (0, $f8mV7$useState)(false);
+    let { focusWithinProps: focusWithinProps } = (0, $f8mV7$useFocusWithin)({
+        isDisabled: isDisabled,
+        onFocusWithinChange: setFocusWithin
+    });
+    let onWheel = (0, $f8mV7$useCallback)((e)=>{
+        if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+        if (e.deltaY > 0) increment();
+        else if (e.deltaY < 0) decrement();
+    }, [
+        decrement,
+        increment
+    ]);
+    // If the input isn't supposed to receive input, disable scrolling.
+    let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
+    (0, $f8mV7$useScrollWheel)({
+        onScroll: onWheel,
+        isDisabled: scrollingDisabled
+    }, ref);
+    let onChange = (value)=>{
+        if (state.validate(value)) state.setInputValue(value);
+    };
+    let { inputProps: inputProps, ...otherProps } = (0, $f8mV7$useFormattedTextField)((0, $f8mV7$mergeProps)(props, {
+        id: inputId,
+        value: inputValue,
+        defaultValue: undefined,
+        validate: undefined,
+        [(0, $f8mV7$privateValidationStateProp)]: state,
+        type: "text",
+        autoComplete: "off",
+        onChange: onChange
+    }), state, ref);
+    inputProps = (0, $f8mV7$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
+        role: "textbox",
+        "aria-valuemax": null,
+        "aria-valuemin": null,
+        "aria-valuenow": null,
+        "aria-valuetext": null,
+        autoCorrect: "off",
+        spellCheck: "false",
+        onBlur: commit
+    });
+    if (validationBehavior === "native") inputProps["aria-required"] = undefined;
+    return {
+        inputProps: inputProps,
+        ...otherProps
+    };
+}
+
+
+export {$f6896b05b2ecad12$export$77e32ca575a28fdf as useColorField};
+//# sourceMappingURL=useColorField.mjs.map

package/dist/useColorField.module.js

@@ -0,0 +1,92 @@
+import {useState as $f8mV7$useState, useCallback as $f8mV7$useCallback} from "react";
+import {useId as $f8mV7$useId, mergeProps as $f8mV7$mergeProps} from "@react-aria/utils";
+import {privateValidationStateProp as $f8mV7$privateValidationStateProp} from "@react-stately/form";
+import {useFocusWithin as $f8mV7$useFocusWithin, useScrollWheel as $f8mV7$useScrollWheel} from "@react-aria/interactions";
+import {useFormattedTextField as $f8mV7$useFormattedTextField} from "@react-aria/textfield";
+import {useSpinButton as $f8mV7$useSpinButton} from "@react-aria/spinbutton";
+
+/*
+ * 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.
+ */ 
+
+
+
+
+
+function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
+    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
+    let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
+    let inputId = (0, $f8mV7$useId)();
+    let { spinButtonProps: spinButtonProps } = (0, $f8mV7$useSpinButton)({
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired,
+        maxValue: 0xFFFFFF,
+        minValue: 0,
+        onIncrement: increment,
+        onIncrementToMax: incrementToMax,
+        onDecrement: decrement,
+        onDecrementToMin: decrementToMin,
+        value: colorValue ? colorValue.toHexInt() : undefined,
+        textValue: colorValue ? colorValue.toString("hex") : undefined
+    });
+    let [focusWithin, setFocusWithin] = (0, $f8mV7$useState)(false);
+    let { focusWithinProps: focusWithinProps } = (0, $f8mV7$useFocusWithin)({
+        isDisabled: isDisabled,
+        onFocusWithinChange: setFocusWithin
+    });
+    let onWheel = (0, $f8mV7$useCallback)((e)=>{
+        if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+        if (e.deltaY > 0) increment();
+        else if (e.deltaY < 0) decrement();
+    }, [
+        decrement,
+        increment
+    ]);
+    // If the input isn't supposed to receive input, disable scrolling.
+    let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
+    (0, $f8mV7$useScrollWheel)({
+        onScroll: onWheel,
+        isDisabled: scrollingDisabled
+    }, ref);
+    let onChange = (value)=>{
+        if (state.validate(value)) state.setInputValue(value);
+    };
+    let { inputProps: inputProps, ...otherProps } = (0, $f8mV7$useFormattedTextField)((0, $f8mV7$mergeProps)(props, {
+        id: inputId,
+        value: inputValue,
+        defaultValue: undefined,
+        validate: undefined,
+        [(0, $f8mV7$privateValidationStateProp)]: state,
+        type: "text",
+        autoComplete: "off",
+        onChange: onChange
+    }), state, ref);
+    inputProps = (0, $f8mV7$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
+        role: "textbox",
+        "aria-valuemax": null,
+        "aria-valuemin": null,
+        "aria-valuenow": null,
+        "aria-valuetext": null,
+        autoCorrect: "off",
+        spellCheck: "false",
+        onBlur: commit
+    });
+    if (validationBehavior === "native") inputProps["aria-required"] = undefined;
+    return {
+        inputProps: inputProps,
+        ...otherProps
+    };
+}
+
+
+export {$f6896b05b2ecad12$export$77e32ca575a28fdf as useColorField};
+//# sourceMappingURL=useColorField.module.js.map

package/dist/useColorField.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA6BM,SAAS,0CACd,KAA0B,EAC1B,KAAsB,EACtB,GAAgC;IAEhC,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,mBACV,eAAe,sBACf,qBAAqB,QACtB,GAAG;IAEJ,IAAI,cACF,UAAU,cACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,kBACd,cAAc,UACd,MAAM,EACP,GAAG;IAEJ,IAAI,UAAU,CAAA,GAAA,YAAI;IAClB,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,oBAAY,EAClC;oBACE;oBACA;oBACA;QACA,UAAU;QACV,UAAU;QACV,aAAa;QACb,kBAAkB;QAClB,aAAa;QACb,kBAAkB;QAClB,OAAO,aAAa,WAAW,QAAQ,KAAK;QAC5C,WAAW,aAAa,WAAW,QAAQ,CAAC,SAAS;IACvD;IAGF,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAE;IAC7C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;oBAAC;QAAY,qBAAqB;IAAc;IAExF,IAAI,UAAU,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,IAAI,KAAK,GAAG,CAAC,EAAE,MAAM,KAAK,KAAK,GAAG,CAAC,EAAE,MAAM,GACzC;QAEF,IAAI,EAAE,MAAM,GAAG,GACb;aACK,IAAI,EAAE,MAAM,GAAG,GACpB;IAEJ,GAAG;QAAC;QAAW;KAAU;IACzB,mEAAmE;IACnE,IAAI,oBAAoB,mBAAmB,cAAc,cAAc,CAAC;IACxE,CAAA,GAAA,qBAAa,EAAE;QAAC,UAAU;QAAS,YAAY;IAAiB,GAAG;IAEnE,IAAI,WAAW,CAAA;QACb,IAAI,MAAM,QAAQ,CAAC,QACjB,MAAM,aAAa,CAAC;IAExB;IAEA,IAAI,cAAC,UAAU,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,4BAAoB,EACpD,CAAA,GAAA,iBAAS,EAAE,OAAO;QAChB,IAAI;QACJ,OAAO;QACP,cAAc;QACd,UAAU;QACV,CAAC,CAAA,GAAA,iCAAyB,EAAE,EAAE;QAC9B,MAAM;QACN,cAAc;kBACd;IACF,IAAI,OAAO;IAEb,aAAa,CAAA,GAAA,iBAAS,EAAE,YAAY,iBAAiB,kBAAkB;QACrE,MAAM;QACN,iBAAiB;QACjB,iBAAiB;QACjB,iBAAiB;QACjB,kBAAkB;QAClB,aAAa;QACb,YAAY;QACZ,QAAQ;IACV;IAEA,IAAI,uBAAuB,UACzB,UAAU,CAAC,gBAAgB,GAAG;IAGhC,OAAO;oBACL;QACA,GAAG,UAAU;IACf;AACF","sources":["packages/@react-aria/color/src/useColorField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorFieldProps} from '@react-types/color';\nimport {ColorFieldState} from '@react-stately/color';\nimport {\n  HTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useState\n} from 'react';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {useSpinButton} from '@react-aria/spinbutton';\nimport {ValidationResult} from '@react-types/shared';\n\nexport interface ColorFieldAria extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the input element. */\n  inputProps: HTMLAttributes<HTMLInputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color field component.\n * Color fields allow users to enter and adjust a hex color value.\n */\nexport function useColorField(\n  props: AriaColorFieldProps,\n  state: ColorFieldState,\n  ref: RefObject<HTMLInputElement>\n): ColorFieldAria {\n  let {\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isWheelDisabled,\n    validationBehavior = 'aria'\n  } = props;\n\n  let {\n    colorValue,\n    inputValue,\n    increment,\n    decrement,\n    incrementToMax,\n    decrementToMin,\n    commit\n  } = state;\n\n  let inputId = useId();\n  let {spinButtonProps} = useSpinButton(\n    {\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      maxValue: 0xFFFFFF,\n      minValue: 0,\n      onIncrement: increment,\n      onIncrementToMax: incrementToMax,\n      onDecrement: decrement,\n      onDecrementToMin: decrementToMin,\n      value: colorValue ? colorValue.toHexInt() : undefined,\n      textValue: colorValue ? colorValue.toString('hex') : undefined\n    }\n  );\n\n  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback((e) => {\n    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n      return;\n    }\n    if (e.deltaY > 0) {\n      increment();\n    } else if (e.deltaY < 0) {\n      decrement();\n    }\n  }, [decrement, increment]);\n  // If the input isn't supposed to receive input, disable scrolling.\n  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let {inputProps, ...otherProps} = useFormattedTextField(\n    mergeProps(props, {\n      id: inputId,\n      value: inputValue,\n      defaultValue: undefined,\n      validate: undefined,\n      [privateValidationStateProp]: state,\n      type: 'text',\n      autoComplete: 'off',\n      onChange\n    }), state, ref);\n\n  inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {\n    role: 'textbox',\n    'aria-valuemax': null,\n    'aria-valuemin': null,\n    'aria-valuenow': null,\n    'aria-valuetext': null,\n    autoCorrect: 'off',\n    spellCheck: 'false',\n    onBlur: commit\n  });\n\n  if (validationBehavior === 'native') {\n    inputProps['aria-required'] = undefined;\n  }\n\n  return {\n    inputProps,\n    ...otherProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorField.module.js.map"}