@react-aria/color 3.0.0-nightly.4567 → 3.0.0-nightly.4578

package/dist/useColorAreaGradient.main.js

@@ -1,4 +1,5 @@
 var $9t8qo$react = require("react");
+var $9t8qo$reactstatelycolor = require("@react-stately/color");
 
 
 function $parcel$export(e, n, v, s) {
@@ -17,171 +18,71 @@ $parcel$export(module.exports, "useColorAreaGradient", () => $99936ad0bf67c8c4$e
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
 */ 
-const $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$var$hue = (color)=>[
+        0,
+        60,
+        120,
+        180,
+        240,
+        300,
+        360
+    ].map((hue)=>color.withChannelValue("hue", hue).toString("css")).join(", ");
+const $99936ad0bf67c8c4$var$saturation = (color)=>`${color.withChannelValue("saturation", 0)}, transparent`;
+const $99936ad0bf67c8c4$var$hslChannels = {
+    hue: $99936ad0bf67c8c4$var$hue,
+    saturation: $99936ad0bf67c8c4$var$saturation,
+    lightness: ()=>"black, transparent, white"
 };
-const $99936ad0bf67c8c4$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;
+const $99936ad0bf67c8c4$var$hsbChannels = {
+    hue: $99936ad0bf67c8c4$var$hue,
+    saturation: $99936ad0bf67c8c4$var$saturation,
+    brightness: ()=>"black, transparent"
 };
-function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, isDisabled: isDisabled }) {
+function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, yChannel: yChannel }) {
     let returnVal = (0, $9t8qo$react.useMemo)(()=>{
-        let orientation = [
-            "top",
-            direction === "rtl" ? "left" : "right"
-        ];
-        let dir = false;
-        let background = {
-            colorAreaStyles: {},
-            gradientStyles: {}
-        };
+        let end = direction === "rtl" ? "left" : "right";
+        let colorAreaStyles = {};
         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 = $99936ad0bf67c8c4$var$generateRGB_R(orientation, dir, zValue);
-                break;
-            case "green":
-                dir = xChannel === "red";
-                background = $99936ad0bf67c8c4$var$generateRGB_G(orientation, dir, zValue);
-                break;
-            case "blue":
-                dir = xChannel === "red";
-                background = $99936ad0bf67c8c4$var$generateRGB_B(orientation, dir, zValue);
-                break;
-            case "hue":
-                dir = xChannel !== "saturation";
-                if (isHSL) background = $99936ad0bf67c8c4$var$generateHSL_H(orientation, dir, zValue);
-                else background = $99936ad0bf67c8c4$var$generateHSB_H(orientation, dir, zValue);
-                break;
-            case "saturation":
-                dir = xChannel === "hue";
-                if (isHSL) background = $99936ad0bf67c8c4$var$generateHSL_S(orientation, dir, alphaValue);
-                else background = $99936ad0bf67c8c4$var$generateHSB_S(orientation, dir, alphaValue);
-                break;
-            case "brightness":
-                dir = xChannel === "hue";
-                background = $99936ad0bf67c8c4$var$generateHSB_B(orientation, dir, alphaValue);
-                break;
-            case "lightness":
-                dir = xChannel === "hue";
-                background = $99936ad0bf67c8c4$var$generateHSL_L(orientation, dir, zValue);
-                break;
+        switch(state.value.getColorSpace()){
+            case "rgb":
+                {
+                    let rgb = (0, $9t8qo$reactstatelycolor.parseColor)("rgb(0, 0, 0)");
+                    colorAreaStyles = {
+                        background: [
+                            // The screen blend mode multiplies the inverse of each channel, e.g. 1 - (1 - a) * (1 - b).
+                            // Create a layer for each channel, with the other channels as 0. After blending, this should
+                            // result in the gradients being combined channel by channel.
+                            `linear-gradient(to ${end}, ${rgb.withChannelValue(xChannel, 0)}, ${rgb.withChannelValue(xChannel, 255)})`,
+                            `linear-gradient(to top, ${rgb.withChannelValue(yChannel, 0)}, ${rgb.withChannelValue(yChannel, 255)})`,
+                            rgb.withChannelValue(zChannel, zValue)
+                        ].join(","),
+                        backgroundBlendMode: "screen"
+                    };
+                    break;
+                }
+            case "hsl":
+                {
+                    let channels = state.value.getColorChannels();
+                    let value = (0, $9t8qo$reactstatelycolor.parseColor)("hsl(0, 100%, 50%)").withChannelValue(zChannel, zValue);
+                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : "top"}, ${$99936ad0bf67c8c4$var$hslChannels[c](value)})`).reverse();
+                    if (zChannel === "hue") bg.push(value.toString("css"));
+                    colorAreaStyles = {
+                        background: bg.join(", ")
+                    };
+                    break;
+                }
+            case "hsb":
+                {
+                    let channels = state.value.getColorChannels();
+                    let value = (0, $9t8qo$reactstatelycolor.parseColor)("hsb(0, 100%, 100%)").withChannelValue(zChannel, zValue);
+                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : "top"}, ${$99936ad0bf67c8c4$var$hsbChannels[c](value)})`).reverse();
+                    if (zChannel === "hue") bg.push(value.toString("css"));
+                    colorAreaStyles = {
+                        background: bg.join(", ")
+                    };
+                    break;
+                }
         }
         let { x: x, y: y } = state.getThumbPosition();
         if (direction === "rtl") x = 1 - x;
@@ -194,14 +95,7 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction, state
                     position: "relative",
                     touchAction: "none",
                     ...forcedColorAdjustNoneStyle,
-                    ...background.colorAreaStyles
-                }
-            },
-            gradientStyleProps: {
-                style: {
-                    touchAction: "none",
-                    ...forcedColorAdjustNoneStyle,
-                    ...background.gradientStyles
+                    ...colorAreaStyles
                 }
             },
             thumbStyleProps: {
@@ -209,7 +103,7 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction, state
                     position: "absolute",
                     left: `${x * 100}%`,
                     top: `${y * 100}%`,
-                    transform: "translate(0%, 0%)",
+                    transform: "translate(-50%, -50%)",
                     touchAction: "none",
                     ...forcedColorAdjustNoneStyle
                 }
@@ -220,7 +114,7 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction, state
         state,
         zChannel,
         xChannel,
-        isDisabled
+        yChannel
     ]);
     return returnVal;
 }

package/dist/useColorAreaGradient.main.js.map

@@ -1 +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.main.js.map"}
+{"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 {Color} from '@react-types/color';\nimport {CSSProperties, useMemo} from 'react';\nimport {parseColor} from '@react-stately/color';\n\nconst hue = (color: Color) => [0, 60, 120, 180, 240, 300, 360].map(hue => color.withChannelValue('hue', hue).toString('css')).join(', ');\nconst saturation = (color: Color) => `${color.withChannelValue('saturation', 0)}, transparent`;\n\nconst hslChannels = {\n  hue,\n  saturation,\n  lightness: () => 'black, transparent, white'\n};\n\nconst hsbChannels = {\n  hue,\n  saturation,\n  brightness: () => 'black, transparent'\n};\n\ninterface Gradients {\n  colorAreaStyleProps: {\n    style: CSSProperties\n  },\n  thumbStyleProps: {\n    style: CSSProperties\n  }\n}\n\nexport function useColorAreaGradient({direction, state, zChannel, xChannel, yChannel}): Gradients {\n  let returnVal = useMemo<Gradients>(() => {\n    let end = direction === 'rtl' ? 'left' : 'right';\n    let colorAreaStyles = {};\n    let zValue = state.value.getChannelValue(zChannel);\n\n    switch (state.value.getColorSpace()) {\n      case 'rgb': {\n        let rgb = parseColor('rgb(0, 0, 0)');\n        colorAreaStyles = {\n          background: [\n            // The screen blend mode multiplies the inverse of each channel, e.g. 1 - (1 - a) * (1 - b).\n            // Create a layer for each channel, with the other channels as 0. After blending, this should\n            // result in the gradients being combined channel by channel.\n            `linear-gradient(to ${end}, ${rgb.withChannelValue(xChannel, 0)}, ${rgb.withChannelValue(xChannel, 255)})`,\n            `linear-gradient(to top, ${rgb.withChannelValue(yChannel, 0)}, ${rgb.withChannelValue(yChannel, 255)})`,\n            rgb.withChannelValue(zChannel, zValue)\n          ].join(','),\n          backgroundBlendMode: 'screen'\n        };\n        break;\n      }\n      case 'hsl': {\n        let channels = state.value.getColorChannels();\n        let value = parseColor('hsl(0, 100%, 50%)').withChannelValue(zChannel, zValue);\n\n        let bg = channels\n          .filter(c => c !== zChannel)\n          .map(c => `linear-gradient(to ${c === xChannel ? end : 'top'}, ${hslChannels[c](value)})`)\n          .reverse();\n        if (zChannel === 'hue') {\n          bg.push(value.toString('css'));\n        }\n    \n        colorAreaStyles = {\n          background: bg.join(', ')\n        };\n        break;\n      }\n      case 'hsb': {\n        let channels = state.value.getColorChannels();\n        let value = parseColor('hsb(0, 100%, 100%)').withChannelValue(zChannel, zValue);\n\n        let bg = channels\n          .filter(c => c !== zChannel)\n          .map(c => `linear-gradient(to ${c === xChannel ? end : 'top'}, ${hsbChannels[c](value)})`)\n          .reverse();\n        if (zChannel === 'hue') {\n          bg.push(value.toString('css'));\n        }\n    \n        colorAreaStyles = {\n          background: bg.join(', ')\n        };\n        break;\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          ...colorAreaStyles\n        }\n      },\n      thumbStyleProps: {\n        style: {\n          position: 'absolute',\n          left: `${x * 100}%`,\n          top: `${y * 100}%`,\n          transform: 'translate(-50%, -50%)',\n          touchAction: 'none',\n          ...forcedColorAdjustNoneStyle\n        }\n      }\n    };\n  }, [direction, state, zChannel, xChannel, yChannel]);\n\n  return returnVal;\n}\n\n"],"names":[],"version":3,"file":"useColorAreaGradient.main.js.map"}

package/dist/useColorAreaGradient.mjs

@@ -1,4 +1,5 @@
 import {useMemo as $hLqEt$useMemo} from "react";
+import {parseColor as $hLqEt$parseColor} from "@react-stately/color";
 
 /*
  * Copyright 2022 Adobe. All rights reserved.
@@ -11,171 +12,71 @@ import {useMemo as $hLqEt$useMemo} from "react";
  * 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$hue = (color)=>[
+        0,
+        60,
+        120,
+        180,
+        240,
+        300,
+        360
+    ].map((hue)=>color.withChannelValue("hue", hue).toString("css")).join(", ");
+const $40297c24c53588e6$var$saturation = (color)=>`${color.withChannelValue("saturation", 0)}, transparent`;
+const $40297c24c53588e6$var$hslChannels = {
+    hue: $40297c24c53588e6$var$hue,
+    saturation: $40297c24c53588e6$var$saturation,
+    lightness: ()=>"black, transparent, white"
 };
-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;
+const $40297c24c53588e6$var$hsbChannels = {
+    hue: $40297c24c53588e6$var$hue,
+    saturation: $40297c24c53588e6$var$saturation,
+    brightness: ()=>"black, transparent"
 };
-function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, isDisabled: isDisabled }) {
+function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, yChannel: yChannel }) {
     let returnVal = (0, $hLqEt$useMemo)(()=>{
-        let orientation = [
-            "top",
-            direction === "rtl" ? "left" : "right"
-        ];
-        let dir = false;
-        let background = {
-            colorAreaStyles: {},
-            gradientStyles: {}
-        };
+        let end = direction === "rtl" ? "left" : "right";
+        let colorAreaStyles = {};
         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;
+        switch(state.value.getColorSpace()){
+            case "rgb":
+                {
+                    let rgb = (0, $hLqEt$parseColor)("rgb(0, 0, 0)");
+                    colorAreaStyles = {
+                        background: [
+                            // The screen blend mode multiplies the inverse of each channel, e.g. 1 - (1 - a) * (1 - b).
+                            // Create a layer for each channel, with the other channels as 0. After blending, this should
+                            // result in the gradients being combined channel by channel.
+                            `linear-gradient(to ${end}, ${rgb.withChannelValue(xChannel, 0)}, ${rgb.withChannelValue(xChannel, 255)})`,
+                            `linear-gradient(to top, ${rgb.withChannelValue(yChannel, 0)}, ${rgb.withChannelValue(yChannel, 255)})`,
+                            rgb.withChannelValue(zChannel, zValue)
+                        ].join(","),
+                        backgroundBlendMode: "screen"
+                    };
+                    break;
+                }
+            case "hsl":
+                {
+                    let channels = state.value.getColorChannels();
+                    let value = (0, $hLqEt$parseColor)("hsl(0, 100%, 50%)").withChannelValue(zChannel, zValue);
+                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : "top"}, ${$40297c24c53588e6$var$hslChannels[c](value)})`).reverse();
+                    if (zChannel === "hue") bg.push(value.toString("css"));
+                    colorAreaStyles = {
+                        background: bg.join(", ")
+                    };
+                    break;
+                }
+            case "hsb":
+                {
+                    let channels = state.value.getColorChannels();
+                    let value = (0, $hLqEt$parseColor)("hsb(0, 100%, 100%)").withChannelValue(zChannel, zValue);
+                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : "top"}, ${$40297c24c53588e6$var$hsbChannels[c](value)})`).reverse();
+                    if (zChannel === "hue") bg.push(value.toString("css"));
+                    colorAreaStyles = {
+                        background: bg.join(", ")
+                    };
+                    break;
+                }
         }
         let { x: x, y: y } = state.getThumbPosition();
         if (direction === "rtl") x = 1 - x;
@@ -188,14 +89,7 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state
                     position: "relative",
                     touchAction: "none",
                     ...forcedColorAdjustNoneStyle,
-                    ...background.colorAreaStyles
-                }
-            },
-            gradientStyleProps: {
-                style: {
-                    touchAction: "none",
-                    ...forcedColorAdjustNoneStyle,
-                    ...background.gradientStyles
+                    ...colorAreaStyles
                 }
             },
             thumbStyleProps: {
@@ -203,7 +97,7 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state
                     position: "absolute",
                     left: `${x * 100}%`,
                     top: `${y * 100}%`,
-                    transform: "translate(0%, 0%)",
+                    transform: "translate(-50%, -50%)",
                     touchAction: "none",
                     ...forcedColorAdjustNoneStyle
                 }
@@ -214,7 +108,7 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state
         state,
         zChannel,
         xChannel,
-        isDisabled
+        yChannel
     ]);
     return returnVal;
 }