@react-spectrum/color 3.0.0-nightly.3168 → 3.0.0-nightly.3173

package/dist/main.js

@@ -1,8 +1,8 @@
 require("./main.css");
 var $aAzec$reactspectrumutils = require("@react-spectrum/utils");
+var $aAzec$reactariacolor = require("@react-aria/color");
 var $aAzec$reactariautils = require("@react-aria/utils");
 var $aAzec$react = require("react");
-var $aAzec$reactariacolor = require("@react-aria/color");
 var $aAzec$reactstatelycolor = require("@react-stately/color");
 var $aAzec$reactariafocus = require("@react-aria/focus");
 var $aAzec$reactariai18n = require("@react-aria/i18n");
@@ -141,6 +141,7 @@ function $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc(props) {
 
 
 
+
 var $d4b4e0a63f9ca8c1$exports = {};
 
 $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorArea", () => $d4b4e0a63f9ca8c1$export$bb6257a55a3c1efc, (v) => $d4b4e0a63f9ca8c1$export$bb6257a55a3c1efc = v);
@@ -173,7 +174,6 @@ $d4b4e0a63f9ca8c1$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_35e2c0";
 
 
 
-
 function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
     props = $aAzec$reactspectrumprovider.useProviderProps(props);
     let { isDisabled: isDisabled  } = props;
@@ -237,7 +237,6 @@ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
     })))));
 }
 let $5f016e950c2dc3a6$export$b2103f68a961418e = /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).forwardRef($5f016e950c2dc3a6$var$ColorArea);
-// this function looks scary, but it's actually pretty quick, just generates some strings
 function $5f016e950c2dc3a6$var$useGradients({ direction: direction , state: state , zChannel: zChannel , xChannel: xChannel , isDisabled: isDisabled  }) {
     let orientation = [
         'top',
@@ -251,49 +250,39 @@ function $5f016e950c2dc3a6$var$useGradients({ direction: direction , state: stat
         }
     };
     let zValue = state.value.getChannelValue(zChannel);
-    let maskImage;
+    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';
-            maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-            background.colorAreaStyles = {
-                /* the background represents the green channel as a linear gradient from min to max,
-          with the blue channel minimized, adjusted by the red channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
-            };
-            background.gradientStyles = {
-                /* the foreground represents the green channel as a linear gradient from min to max,
-          with the blue channel maximized, adjusted by the red channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
-                /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
-                maskImage: maskImage
-            };
+            background = $aAzec$reactariacolor.generateRGB_R(orientation, dir, zValue);
             break;
         case 'green':
             dir = xChannel === 'red';
-            maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-            background.colorAreaStyles = {
-                /* the background represents the red channel as a linear gradient from min to max,
-          with the blue channel minimized, adjusted by the green channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
-            };
-            background.gradientStyles = {
-                /* the foreground represents the red channel as a linear gradient from min to max,
-          with the blue channel maximized, adjusted by the green channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
-                /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
-                maskImage: maskImage
-            };
+            background = $aAzec$reactariacolor.generateRGB_G(orientation, dir, zValue);
             break;
         case 'blue':
             dir = xChannel === 'red';
-            maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-            background.colorAreaStyles = {
-                /* the background represents the red channel as a linear gradient from min to max,
-          with the green channel minimized, adjusted by the blue channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
-            };
-            background.gradientStyles = {
-                /* the foreground represents the red channel as a linear gradient from min to max,
-          with the green channel maximized, adjusted by the blue channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
-                /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
-                maskImage: maskImage
-            };
+            background = $aAzec$reactariacolor.generateRGB_B(orientation, dir, zValue);
+            break;
+        case 'hue':
+            dir = xChannel !== 'saturation';
+            if (isHSL) background = $aAzec$reactariacolor.generateHSL_H(orientation, dir, zValue);
+            else background = $aAzec$reactariacolor.generateHSB_H(orientation, dir, zValue);
+            break;
+        case 'saturation':
+            dir = xChannel === 'hue';
+            if (isHSL) background = $aAzec$reactariacolor.generateHSL_S(orientation, dir, alphaValue);
+            else background = $aAzec$reactariacolor.generateHSB_S(orientation, dir, alphaValue);
+            break;
+        case 'brightness':
+            dir = xChannel === 'hue';
+            background = $aAzec$reactariacolor.generateHSB_B(orientation, dir, alphaValue);
+            break;
+        case 'lightness':
+            dir = xChannel === 'hue';
+            background = $aAzec$reactariacolor.generateHSL_L(orientation, dir, zValue);
             break;
     }
     let { x: x , y: y  } = state.getThumbPosition();

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n","/*\n * Copyright 2021 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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {CSSProperties, ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputXRef = useRef();\n  let inputYRef = useRef();\n  let containerRef = useFocusableRef(ref, inputXRef);\n\n  let state = useColorAreaState(props);\n\n  let {channels: {xChannel, zChannel}} = state;\n  let {\n    colorAreaProps,\n    gradientProps,\n    xInputProps,\n    yInputProps,\n    thumbProps\n  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n  let {direction} = useLocale();\n  let {colorAreaStyleProps, gradientStyleProps, thumbStyleProps} = useGradients({direction, state, xChannel, zChannel, isDisabled: props.isDisabled});\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      {...colorAreaProps}\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorArea',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...colorAreaStyleProps.style,\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <div {...gradientProps} {...gradientStyleProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorArea-handle')}\n        {...thumbProps}\n        {...thumbStyleProps}>\n        <div role=\"presentation\">\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n        </div>\n      </ColorThumb>\n    </div>\n  );\n}\n\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n\ninterface Gradients {\n  colorAreaStyleProps: {\n    style: CSSProperties\n  },\n  gradientStyleProps: {\n    style: CSSProperties\n  },\n  thumbStyleProps: {\n    style: CSSProperties\n  }\n}\n\n// this function looks scary, but it's actually pretty quick, just generates some strings\nfunction useGradients({direction, state, zChannel, xChannel, isDisabled}): 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 maskImage;\n  if (!isDisabled) {\n    switch (zChannel) {\n      case 'red': {\n        dir = xChannel === 'green';\n        maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n        background.colorAreaStyles = {\n          /* the background represents the green channel as a linear gradient from min to max,\n          with the blue channel minimized, adjusted by the red channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`\n        };\n        background.gradientStyles = {\n          /* the foreground represents the green channel as a linear gradient from min to max,\n          with the blue channel maximized, adjusted by the red channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,\n          /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n          'WebkitMaskImage': maskImage,\n          maskImage\n        };\n        break;\n      }\n      case 'green': {\n        dir = xChannel === 'red';\n        maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n        background.colorAreaStyles = {\n          /* the background represents the red channel as a linear gradient from min to max,\n          with the blue channel minimized, adjusted by the green channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`\n        };\n        background.gradientStyles = {\n          /* the foreground represents the red channel as a linear gradient from min to max,\n          with the blue channel maximized, adjusted by the green channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,\n          /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n          'WebkitMaskImage': maskImage,\n          maskImage\n        };\n        break;\n      }\n      case 'blue': {\n        dir = xChannel === 'red';\n        maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n        background.colorAreaStyles = {\n          /* the background represents the red channel as a linear gradient from min to max,\n          with the green channel minimized, adjusted by the blue channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`\n        };\n        background.gradientStyles = {\n          /* the foreground represents the red channel as a linear gradient from min to max,\n          with the green channel maximized, adjusted by the blue channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,\n          /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n          'WebkitMaskImage': maskImage,\n          maskImage\n        };\n        break;\n      }\n    }\n  }\n\n  let {x, y} = state.getThumbPosition();\n\n  if (direction === 'rtl') {\n    x = 1 - x;\n  }\n\n  return {\n    colorAreaStyleProps: {\n      style: {\n        position: 'relative',\n        touchAction: 'none',\n        ...background.colorAreaStyles\n      }\n    },\n    gradientStyleProps: {\n      style: {\n        touchAction: 'none',\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      }\n    }\n  };\n}\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n  let patternId = useId();\n\n  let valueCSS = value.toString('css');\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden=\"true\">\n        <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n        </pattern>\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={`url(#${patternId})`} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={valueCSS} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n          d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n      </svg>\n      {children}\n    </div>\n  );\n}\n\nexport {ColorThumb};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n\n  let [wheelRadius, setWheelRadius] = useState<number | null>(null);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window.getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius == null) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel({\n    ...props,\n    innerRadius: wheelRadius - wheelThickness,\n    outerRadius: wheelRadius\n  }, state, inputRef);\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorWheel',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        // @ts-ignore\n        'width': size,\n        'height': size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n      </ColorThumb>\n    </div>\n  );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {\n    isDisabled,\n    channel,\n    orientation,\n    label,\n    showValueLabel,\n    'aria-label': ariaLabel\n  } = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let inputRef = useRef();\n  let trackRef = useRef();\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);\n    label = null;\n  }\n\n  // If no external label, aria-label or aria-labelledby is provided,\n  // default to displaying the localized channel value.\n  // Specifically check if label is undefined. If label is `null` then display no visible label.\n  // A default aria-label is provided by useColorSlider in that case.\n  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n    ...props,\n    label,\n    'aria-label': ariaLabel,\n    trackRef,\n    inputRef\n  }, state);\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  let alignLabel;\n  if (vertical) {\n    alignLabel = 'center';\n  } else if (label != null && showValueLabel) {\n    alignLabel = 'space-between';\n  } else if (label != null) {\n    alignLabel = 'flex-start';\n  } else if (showValueLabel) {\n    alignLabel = 'flex-end';\n  }\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        }\n      )}>\n      {label &&\n        <Flex direction=\"row\" justifyContent={alignLabel}>\n          <Label {...labelProps}>{label}</Label>\n          {showValueLabel && <Label elementType=\"span\"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}\n        </Flex>\n      }\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(\n          styles,\n          'spectrum-ColorSlider', {\n            'is-disabled': isDisabled,\n            'spectrum-ColorSlider--vertical': vertical\n          }\n        )\n      }>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport React, {RefObject, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {\n  props = useProviderProps(props);\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();\n  let {\n    labelProps,\n    inputProps\n  } = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={ref}\n      inputRef={inputRef}\n      labelProps={labelProps}\n      inputProps={inputProps}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\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\n.react-spectrum-ColorField-input {\n  direction: ltr;\n  text-align: start;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n","/*\n * Copyright 2021 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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {\n  generateHSB_B,\n  generateHSB_H,\n  generateHSB_S,\n  generateHSL_H,\n  generateHSL_L,\n  generateHSL_S,\n  generateRGB_B,\n  generateRGB_G,\n  generateRGB_R,\n  useColorArea\n} from '@react-aria/color';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {CSSProperties, ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputXRef = useRef();\n  let inputYRef = useRef();\n  let containerRef = useFocusableRef(ref, inputXRef);\n\n  let state = useColorAreaState(props);\n\n  let {channels: {xChannel, zChannel}} = state;\n  let {\n    colorAreaProps,\n    gradientProps,\n    xInputProps,\n    yInputProps,\n    thumbProps\n  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n  let {direction} = useLocale();\n  let {colorAreaStyleProps, gradientStyleProps, thumbStyleProps} = useGradients({direction, state, xChannel, zChannel, isDisabled: props.isDisabled});\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      {...colorAreaProps}\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorArea',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...colorAreaStyleProps.style,\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <div {...gradientProps} {...gradientStyleProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorArea-handle')}\n        {...thumbProps}\n        {...thumbStyleProps}>\n        <div role=\"presentation\">\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n        </div>\n      </ColorThumb>\n    </div>\n  );\n}\n\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n\ninterface Gradients {\n  colorAreaStyleProps: {\n    style: CSSProperties\n  },\n  gradientStyleProps: {\n    style: CSSProperties\n  },\n  thumbStyleProps: {\n    style: CSSProperties\n  }\n}\n\nfunction useGradients({direction, state, zChannel, xChannel, isDisabled}): 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  return {\n    colorAreaStyleProps: {\n      style: {\n        position: 'relative',\n        touchAction: 'none',\n        ...background.colorAreaStyles\n      }\n    },\n    gradientStyleProps: {\n      style: {\n        touchAction: 'none',\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      }\n    }\n  };\n}\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n  let patternId = useId();\n\n  let valueCSS = value.toString('css');\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden=\"true\">\n        <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n        </pattern>\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={`url(#${patternId})`} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={valueCSS} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n          d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n      </svg>\n      {children}\n    </div>\n  );\n}\n\nexport {ColorThumb};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n\n  let [wheelRadius, setWheelRadius] = useState<number | null>(null);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window.getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius == null) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel({\n    ...props,\n    innerRadius: wheelRadius - wheelThickness,\n    outerRadius: wheelRadius\n  }, state, inputRef);\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorWheel',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        // @ts-ignore\n        'width': size,\n        'height': size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n      </ColorThumb>\n    </div>\n  );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {\n    isDisabled,\n    channel,\n    orientation,\n    label,\n    showValueLabel,\n    'aria-label': ariaLabel\n  } = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let inputRef = useRef();\n  let trackRef = useRef();\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);\n    label = null;\n  }\n\n  // If no external label, aria-label or aria-labelledby is provided,\n  // default to displaying the localized channel value.\n  // Specifically check if label is undefined. If label is `null` then display no visible label.\n  // A default aria-label is provided by useColorSlider in that case.\n  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n    ...props,\n    label,\n    'aria-label': ariaLabel,\n    trackRef,\n    inputRef\n  }, state);\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  let alignLabel;\n  if (vertical) {\n    alignLabel = 'center';\n  } else if (label != null && showValueLabel) {\n    alignLabel = 'space-between';\n  } else if (label != null) {\n    alignLabel = 'flex-start';\n  } else if (showValueLabel) {\n    alignLabel = 'flex-end';\n  }\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        }\n      )}>\n      {label &&\n        <Flex direction=\"row\" justifyContent={alignLabel}>\n          <Label {...labelProps}>{label}</Label>\n          {showValueLabel && <Label elementType=\"span\"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}\n        </Flex>\n      }\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(\n          styles,\n          'spectrum-ColorSlider', {\n            'is-disabled': isDisabled,\n            'spectrum-ColorSlider--vertical': vertical\n          }\n        )\n      }>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport React, {RefObject, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {\n  props = useProviderProps(props);\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();\n  let {\n    labelProps,\n    inputProps\n  } = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={ref}\n      inputRef={inputRef}\n      labelProps={labelProps}\n      inputProps={inputProps}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\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\n.react-spectrum-ColorField-input {\n  direction: ltr;\n  text-align: start;\n}\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,8 +1,8 @@
 import "./main.css";
 import {dimensionValue as $kF0Zw$dimensionValue, useStyleProps as $kF0Zw$useStyleProps, useFocusableRef as $kF0Zw$useFocusableRef, classNames as $kF0Zw$classNames} from "@react-spectrum/utils";
+import {useColorArea as $kF0Zw$useColorArea, generateRGB_R as $kF0Zw$generateRGB_R, generateRGB_G as $kF0Zw$generateRGB_G, generateRGB_B as $kF0Zw$generateRGB_B, generateHSL_H as $kF0Zw$generateHSL_H, generateHSB_H as $kF0Zw$generateHSB_H, generateHSL_S as $kF0Zw$generateHSL_S, generateHSB_S as $kF0Zw$generateHSB_S, generateHSB_B as $kF0Zw$generateHSB_B, generateHSL_L as $kF0Zw$generateHSL_L, useColorWheel as $kF0Zw$useColorWheel, useColorSlider as $kF0Zw$useColorSlider, useColorField as $kF0Zw$useColorField} from "@react-aria/color";
 import {mergeProps as $kF0Zw$mergeProps, useId as $kF0Zw$useId, useResizeObserver as $kF0Zw$useResizeObserver} from "@react-aria/utils";
 import $kF0Zw$react, {useRef as $kF0Zw$useRef, useState as $kF0Zw$useState, useCallback as $kF0Zw$useCallback, useEffect as $kF0Zw$useEffect} from "react";
-import {useColorArea as $kF0Zw$useColorArea, useColorWheel as $kF0Zw$useColorWheel, useColorSlider as $kF0Zw$useColorSlider, useColorField as $kF0Zw$useColorField} from "@react-aria/color";
 import {useColorAreaState as $kF0Zw$useColorAreaState, useColorWheelState as $kF0Zw$useColorWheelState, useColorSliderState as $kF0Zw$useColorSliderState, useColorFieldState as $kF0Zw$useColorFieldState} from "@react-stately/color";
 import {useFocusRing as $kF0Zw$useFocusRing} from "@react-aria/focus";
 import {useLocale as $kF0Zw$useLocale} from "@react-aria/i18n";
@@ -125,6 +125,7 @@ function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
 
 
 
+
 var $7d12200010f0192e$exports = {};
 
 $parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea", () => $7d12200010f0192e$export$bb6257a55a3c1efc, (v) => $7d12200010f0192e$export$bb6257a55a3c1efc = v);
@@ -157,7 +158,6 @@ $7d12200010f0192e$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_35e2c0";
 
 
 
-
 function $40046aa1a7ccb226$var$ColorArea(props, ref) {
     props = $kF0Zw$useProviderProps(props);
     let { isDisabled: isDisabled  } = props;
@@ -221,7 +221,6 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
     })))));
 }
 let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ $kF0Zw$react.forwardRef($40046aa1a7ccb226$var$ColorArea);
-// this function looks scary, but it's actually pretty quick, just generates some strings
 function $40046aa1a7ccb226$var$useGradients({ direction: direction , state: state , zChannel: zChannel , xChannel: xChannel , isDisabled: isDisabled  }) {
     let orientation = [
         'top',
@@ -235,49 +234,39 @@ function $40046aa1a7ccb226$var$useGradients({ direction: direction , state: stat
         }
     };
     let zValue = state.value.getChannelValue(zChannel);
-    let maskImage;
+    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';
-            maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-            background.colorAreaStyles = {
-                /* the background represents the green channel as a linear gradient from min to max,
-          with the blue channel minimized, adjusted by the red channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
-            };
-            background.gradientStyles = {
-                /* the foreground represents the green channel as a linear gradient from min to max,
-          with the blue channel maximized, adjusted by the red channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
-                /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
-                maskImage: maskImage
-            };
+            background = $kF0Zw$generateRGB_R(orientation, dir, zValue);
             break;
         case 'green':
             dir = xChannel === 'red';
-            maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-            background.colorAreaStyles = {
-                /* the background represents the red channel as a linear gradient from min to max,
-          with the blue channel minimized, adjusted by the green channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
-            };
-            background.gradientStyles = {
-                /* the foreground represents the red channel as a linear gradient from min to max,
-          with the blue channel maximized, adjusted by the green channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
-                /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
-                maskImage: maskImage
-            };
+            background = $kF0Zw$generateRGB_G(orientation, dir, zValue);
             break;
         case 'blue':
             dir = xChannel === 'red';
-            maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-            background.colorAreaStyles = {
-                /* the background represents the red channel as a linear gradient from min to max,
-          with the green channel minimized, adjusted by the blue channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
-            };
-            background.gradientStyles = {
-                /* the foreground represents the red channel as a linear gradient from min to max,
-          with the green channel maximized, adjusted by the blue channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
-                /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
-                maskImage: maskImage
-            };
+            background = $kF0Zw$generateRGB_B(orientation, dir, zValue);
+            break;
+        case 'hue':
+            dir = xChannel !== 'saturation';
+            if (isHSL) background = $kF0Zw$generateHSL_H(orientation, dir, zValue);
+            else background = $kF0Zw$generateHSB_H(orientation, dir, zValue);
+            break;
+        case 'saturation':
+            dir = xChannel === 'hue';
+            if (isHSL) background = $kF0Zw$generateHSL_S(orientation, dir, alphaValue);
+            else background = $kF0Zw$generateHSB_S(orientation, dir, alphaValue);
+            break;
+        case 'brightness':
+            dir = xChannel === 'hue';
+            background = $kF0Zw$generateHSB_B(orientation, dir, alphaValue);
+            break;
+        case 'lightness':
+            dir = xChannel === 'hue';
+            background = $kF0Zw$generateHSL_L(orientation, dir, zValue);
             break;
     }
     let { x: x , y: y  } = state.getThumbPosition();

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n","/*\n * Copyright 2021 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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {CSSProperties, ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputXRef = useRef();\n  let inputYRef = useRef();\n  let containerRef = useFocusableRef(ref, inputXRef);\n\n  let state = useColorAreaState(props);\n\n  let {channels: {xChannel, zChannel}} = state;\n  let {\n    colorAreaProps,\n    gradientProps,\n    xInputProps,\n    yInputProps,\n    thumbProps\n  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n  let {direction} = useLocale();\n  let {colorAreaStyleProps, gradientStyleProps, thumbStyleProps} = useGradients({direction, state, xChannel, zChannel, isDisabled: props.isDisabled});\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      {...colorAreaProps}\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorArea',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...colorAreaStyleProps.style,\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <div {...gradientProps} {...gradientStyleProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorArea-handle')}\n        {...thumbProps}\n        {...thumbStyleProps}>\n        <div role=\"presentation\">\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n        </div>\n      </ColorThumb>\n    </div>\n  );\n}\n\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n\ninterface Gradients {\n  colorAreaStyleProps: {\n    style: CSSProperties\n  },\n  gradientStyleProps: {\n    style: CSSProperties\n  },\n  thumbStyleProps: {\n    style: CSSProperties\n  }\n}\n\n// this function looks scary, but it's actually pretty quick, just generates some strings\nfunction useGradients({direction, state, zChannel, xChannel, isDisabled}): 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 maskImage;\n  if (!isDisabled) {\n    switch (zChannel) {\n      case 'red': {\n        dir = xChannel === 'green';\n        maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n        background.colorAreaStyles = {\n          /* the background represents the green channel as a linear gradient from min to max,\n          with the blue channel minimized, adjusted by the red channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`\n        };\n        background.gradientStyles = {\n          /* the foreground represents the green channel as a linear gradient from min to max,\n          with the blue channel maximized, adjusted by the red channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,\n          /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n          'WebkitMaskImage': maskImage,\n          maskImage\n        };\n        break;\n      }\n      case 'green': {\n        dir = xChannel === 'red';\n        maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n        background.colorAreaStyles = {\n          /* the background represents the red channel as a linear gradient from min to max,\n          with the blue channel minimized, adjusted by the green channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`\n        };\n        background.gradientStyles = {\n          /* the foreground represents the red channel as a linear gradient from min to max,\n          with the blue channel maximized, adjusted by the green channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,\n          /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n          'WebkitMaskImage': maskImage,\n          maskImage\n        };\n        break;\n      }\n      case 'blue': {\n        dir = xChannel === 'red';\n        maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n        background.colorAreaStyles = {\n          /* the background represents the red channel as a linear gradient from min to max,\n          with the green channel minimized, adjusted by the blue channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`\n        };\n        background.gradientStyles = {\n          /* the foreground represents the red channel as a linear gradient from min to max,\n          with the green channel maximized, adjusted by the blue channel value. */\n          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,\n          /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n          'WebkitMaskImage': maskImage,\n          maskImage\n        };\n        break;\n      }\n    }\n  }\n\n  let {x, y} = state.getThumbPosition();\n\n  if (direction === 'rtl') {\n    x = 1 - x;\n  }\n\n  return {\n    colorAreaStyleProps: {\n      style: {\n        position: 'relative',\n        touchAction: 'none',\n        ...background.colorAreaStyles\n      }\n    },\n    gradientStyleProps: {\n      style: {\n        touchAction: 'none',\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      }\n    }\n  };\n}\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n  let patternId = useId();\n\n  let valueCSS = value.toString('css');\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden=\"true\">\n        <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n        </pattern>\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={`url(#${patternId})`} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={valueCSS} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n          d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n      </svg>\n      {children}\n    </div>\n  );\n}\n\nexport {ColorThumb};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n\n  let [wheelRadius, setWheelRadius] = useState<number | null>(null);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window.getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius == null) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel({\n    ...props,\n    innerRadius: wheelRadius - wheelThickness,\n    outerRadius: wheelRadius\n  }, state, inputRef);\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorWheel',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        // @ts-ignore\n        'width': size,\n        'height': size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n      </ColorThumb>\n    </div>\n  );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {\n    isDisabled,\n    channel,\n    orientation,\n    label,\n    showValueLabel,\n    'aria-label': ariaLabel\n  } = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let inputRef = useRef();\n  let trackRef = useRef();\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);\n    label = null;\n  }\n\n  // If no external label, aria-label or aria-labelledby is provided,\n  // default to displaying the localized channel value.\n  // Specifically check if label is undefined. If label is `null` then display no visible label.\n  // A default aria-label is provided by useColorSlider in that case.\n  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n    ...props,\n    label,\n    'aria-label': ariaLabel,\n    trackRef,\n    inputRef\n  }, state);\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  let alignLabel;\n  if (vertical) {\n    alignLabel = 'center';\n  } else if (label != null && showValueLabel) {\n    alignLabel = 'space-between';\n  } else if (label != null) {\n    alignLabel = 'flex-start';\n  } else if (showValueLabel) {\n    alignLabel = 'flex-end';\n  }\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        }\n      )}>\n      {label &&\n        <Flex direction=\"row\" justifyContent={alignLabel}>\n          <Label {...labelProps}>{label}</Label>\n          {showValueLabel && <Label elementType=\"span\"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}\n        </Flex>\n      }\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(\n          styles,\n          'spectrum-ColorSlider', {\n            'is-disabled': isDisabled,\n            'spectrum-ColorSlider--vertical': vertical\n          }\n        )\n      }>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport React, {RefObject, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {\n  props = useProviderProps(props);\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();\n  let {\n    labelProps,\n    inputProps\n  } = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={ref}\n      inputRef={inputRef}\n      labelProps={labelProps}\n      inputProps={inputProps}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\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\n.react-spectrum-ColorField-input {\n  direction: ltr;\n  text-align: start;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n","/*\n * Copyright 2021 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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {\n  generateHSB_B,\n  generateHSB_H,\n  generateHSB_S,\n  generateHSL_H,\n  generateHSL_L,\n  generateHSL_S,\n  generateRGB_B,\n  generateRGB_G,\n  generateRGB_R,\n  useColorArea\n} from '@react-aria/color';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {CSSProperties, ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputXRef = useRef();\n  let inputYRef = useRef();\n  let containerRef = useFocusableRef(ref, inputXRef);\n\n  let state = useColorAreaState(props);\n\n  let {channels: {xChannel, zChannel}} = state;\n  let {\n    colorAreaProps,\n    gradientProps,\n    xInputProps,\n    yInputProps,\n    thumbProps\n  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n  let {direction} = useLocale();\n  let {colorAreaStyleProps, gradientStyleProps, thumbStyleProps} = useGradients({direction, state, xChannel, zChannel, isDisabled: props.isDisabled});\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      {...colorAreaProps}\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorArea',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...colorAreaStyleProps.style,\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <div {...gradientProps} {...gradientStyleProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorArea-handle')}\n        {...thumbProps}\n        {...thumbStyleProps}>\n        <div role=\"presentation\">\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n        </div>\n      </ColorThumb>\n    </div>\n  );\n}\n\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n\ninterface Gradients {\n  colorAreaStyleProps: {\n    style: CSSProperties\n  },\n  gradientStyleProps: {\n    style: CSSProperties\n  },\n  thumbStyleProps: {\n    style: CSSProperties\n  }\n}\n\nfunction useGradients({direction, state, zChannel, xChannel, isDisabled}): 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  return {\n    colorAreaStyleProps: {\n      style: {\n        position: 'relative',\n        touchAction: 'none',\n        ...background.colorAreaStyles\n      }\n    },\n    gradientStyleProps: {\n      style: {\n        touchAction: 'none',\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      }\n    }\n  };\n}\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n  let patternId = useId();\n\n  let valueCSS = value.toString('css');\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden=\"true\">\n        <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n        </pattern>\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={`url(#${patternId})`} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={valueCSS} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n          d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n      </svg>\n      {children}\n    </div>\n  );\n}\n\nexport {ColorThumb};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n\n  let [wheelRadius, setWheelRadius] = useState<number | null>(null);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window.getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius == null) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel({\n    ...props,\n    innerRadius: wheelRadius - wheelThickness,\n    outerRadius: wheelRadius\n  }, state, inputRef);\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorWheel',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        // @ts-ignore\n        'width': size,\n        'height': size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n      </ColorThumb>\n    </div>\n  );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {\n    isDisabled,\n    channel,\n    orientation,\n    label,\n    showValueLabel,\n    'aria-label': ariaLabel\n  } = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let inputRef = useRef();\n  let trackRef = useRef();\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);\n    label = null;\n  }\n\n  // If no external label, aria-label or aria-labelledby is provided,\n  // default to displaying the localized channel value.\n  // Specifically check if label is undefined. If label is `null` then display no visible label.\n  // A default aria-label is provided by useColorSlider in that case.\n  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n    ...props,\n    label,\n    'aria-label': ariaLabel,\n    trackRef,\n    inputRef\n  }, state);\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  let alignLabel;\n  if (vertical) {\n    alignLabel = 'center';\n  } else if (label != null && showValueLabel) {\n    alignLabel = 'space-between';\n  } else if (label != null) {\n    alignLabel = 'flex-start';\n  } else if (showValueLabel) {\n    alignLabel = 'flex-end';\n  }\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        }\n      )}>\n      {label &&\n        <Flex direction=\"row\" justifyContent={alignLabel}>\n          <Label {...labelProps}>{label}</Label>\n          {showValueLabel && <Label elementType=\"span\"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}\n        </Flex>\n      }\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(\n          styles,\n          'spectrum-ColorSlider', {\n            'is-disabled': isDisabled,\n            'spectrum-ColorSlider--vertical': vertical\n          }\n        )\n      }>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport React, {RefObject, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {\n  props = useProviderProps(props);\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();\n  let {\n    labelProps,\n    inputProps\n  } = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={ref}\n      inputRef={inputRef}\n      labelProps={labelProps}\n      inputProps={inputProps}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\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\n.react-spectrum-ColorField-input {\n  direction: ltr;\n  text-align: start;\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;AC0FA,OAAA,IAAI,mBAAoD,sBAAsB,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACgBvI;;GAEG;AACH,OAAA,IAAI,2KAA0C,CAAC;AC0B/C;;GAEG;AACH,OAAA,IAAI,6KAA4C,CAAC;ACzFjD;;GAEG;AACH,OAAA,MAAM,wGAA0C,CAAC","sources":["packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;ACqGA,OAAA,IAAI,mBAAoD,sBAAsB,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACKvI;;GAEG;AACH,OAAA,IAAI,2KAA0C,CAAC;AC0B/C;;GAEG;AACH,OAAA,IAAI,6KAA4C,CAAC;ACzFjD;;GAEG;AACH,OAAA,MAAM,wGAA0C,CAAC","sources":["packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/color",
-  "version": "3.0.0-nightly.3168+2fabc1ac0",
+  "version": "3.0.0-nightly.3173+fe4148bea",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -32,26 +32,26 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/color": "3.0.0-nightly.3168+2fabc1ac0",
-    "@react-aria/focus": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/i18n": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/interactions": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/slider": "3.0.7-nightly.3168+2fabc1ac0",
-    "@react-aria/utils": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-spectrum/label": "3.4.5-nightly.3168+2fabc1ac0",
-    "@react-spectrum/layout": "3.2.5-nightly.3168+2fabc1ac0",
-    "@react-spectrum/textfield": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-spectrum/utils": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-stately/color": "3.0.0-nightly.3168+2fabc1ac0",
-    "@react-stately/slider": "3.0.7-nightly.3168+2fabc1ac0",
-    "@react-stately/utils": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-types/color": "3.0.0-nightly.3168+2fabc1ac0",
-    "@react-types/shared": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-types/slider": "3.0.6-nightly.3168+2fabc1ac0",
-    "@react-types/textfield": "3.0.0-nightly.1469+2fabc1ac0"
+    "@react-aria/color": "3.0.0-nightly.3173+fe4148bea",
+    "@react-aria/focus": "3.0.0-nightly.1474+fe4148bea",
+    "@react-aria/i18n": "3.0.0-nightly.1474+fe4148bea",
+    "@react-aria/interactions": "3.0.0-nightly.1474+fe4148bea",
+    "@react-aria/slider": "3.0.7-nightly.3173+fe4148bea",
+    "@react-aria/utils": "3.0.0-nightly.1474+fe4148bea",
+    "@react-spectrum/label": "3.4.5-nightly.3173+fe4148bea",
+    "@react-spectrum/layout": "3.2.5-nightly.3173+fe4148bea",
+    "@react-spectrum/textfield": "3.0.0-nightly.1474+fe4148bea",
+    "@react-spectrum/utils": "3.0.0-nightly.1474+fe4148bea",
+    "@react-stately/color": "3.0.0-nightly.3173+fe4148bea",
+    "@react-stately/slider": "3.0.7-nightly.3173+fe4148bea",
+    "@react-stately/utils": "3.0.0-nightly.1474+fe4148bea",
+    "@react-types/color": "3.0.0-nightly.3173+fe4148bea",
+    "@react-types/shared": "3.0.0-nightly.1474+fe4148bea",
+    "@react-types/slider": "3.0.6-nightly.3173+fe4148bea",
+    "@react-types/textfield": "3.0.0-nightly.1474+fe4148bea"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.1469+2fabc1ac0"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.1474+fe4148bea"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2fabc1ac07aa6fd75e7111e571e27787d8a44314"
+  "gitHead": "fe4148beaf7f63a1ea486aecc139747a666f8c3a"
 }

package/src/ColorArea.tsx

@@ -13,11 +13,22 @@
 import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import {ColorThumb} from './ColorThumb';
 import {FocusableRef} from '@react-types/shared';
+import {
+  generateHSB_B,
+  generateHSB_H,
+  generateHSB_S,
+  generateHSL_H,
+  generateHSL_L,
+  generateHSL_S,
+  generateRGB_B,
+  generateRGB_G,
+  generateRGB_R,
+  useColorArea
+} from '@react-aria/color';
 import {mergeProps} from '@react-aria/utils';
 import React, {CSSProperties, ReactElement, useRef} from 'react';
 import {SpectrumColorAreaProps} from '@react-types/color';
 import styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';
-import {useColorArea} from '@react-aria/color';
 import {useColorAreaState} from '@react-stately/color';
 import {useFocusRing} from '@react-aria/focus';
 import {useLocale} from '@react-aria/i18n';
@@ -103,67 +114,57 @@ interface Gradients {
   }
 }
 
-// this function looks scary, but it's actually pretty quick, just generates some strings
 function useGradients({direction, state, zChannel, xChannel, isDisabled}): Gradients {
   let orientation = ['top', direction === 'rtl' ? 'left' : 'right'];
   let dir = false;
   let background = {colorAreaStyles: {}, gradientStyles: {}};
   let zValue = state.value.getChannelValue(zChannel);
-  let maskImage;
+  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';
-        maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-        background.colorAreaStyles = {
-          /* the background represents the green channel as a linear gradient from min to max,
-          with the blue channel minimized, adjusted by the red channel value. */
-          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
-        };
-        background.gradientStyles = {
-          /* the foreground represents the green channel as a linear gradient from min to max,
-          with the blue channel maximized, adjusted by the red channel value. */
-          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
-          /* the foreground gradient is masked by a perpendicular linear gradient from black to white */
-          'WebkitMaskImage': maskImage,
-          maskImage
-        };
+        background = generateRGB_R(orientation, dir, zValue);
         break;
       }
       case 'green': {
         dir = xChannel === 'red';
-        maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-        background.colorAreaStyles = {
-          /* the background represents the red channel as a linear gradient from min to max,
-          with the blue channel minimized, adjusted by the green channel value. */
-          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
-        };
-        background.gradientStyles = {
-          /* the foreground represents the red channel as a linear gradient from min to max,
-          with the blue channel maximized, adjusted by the green channel value. */
-          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
-          /* the foreground gradient is masked by a perpendicular linear gradient from black to white */
-          'WebkitMaskImage': maskImage,
-          maskImage
-        };
+        background = generateRGB_G(orientation, dir, zValue);
         break;
       }
       case 'blue': {
         dir = xChannel === 'red';
-        maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-        background.colorAreaStyles = {
-          /* the background represents the red channel as a linear gradient from min to max,
-          with the green channel minimized, adjusted by the blue channel value. */
-          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
-        };
-        background.gradientStyles = {
-          /* the foreground represents the red channel as a linear gradient from min to max,
-          with the green channel maximized, adjusted by the blue channel value. */
-          backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
-          /* the foreground gradient is masked by a perpendicular linear gradient from black to white */
-          'WebkitMaskImage': maskImage,
-          maskImage
-        };
+        background = generateRGB_B(orientation, dir, zValue);
+        break;
+      }
+      case 'hue': {
+        dir = xChannel !== 'saturation';
+        if (isHSL) {
+          background = generateHSL_H(orientation, dir, zValue);
+        } else {
+          background = generateHSB_H(orientation, dir, zValue);
+        }
+        break;
+      }
+      case 'saturation': {
+        dir = xChannel === 'hue';
+        if (isHSL) {
+          background = generateHSL_S(orientation, dir, alphaValue);
+        } else {
+          background = generateHSB_S(orientation, dir, alphaValue);
+        }
+        break;
+      }
+      case 'brightness': {
+        dir = xChannel === 'hue';
+        background = generateHSB_B(orientation, dir, alphaValue);
+        break;
+      }
+      case 'lightness': {
+        dir = xChannel === 'hue';
+        background = generateHSL_L(orientation, dir, zValue);
         break;
       }
     }