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

package/dist/useColorSlider.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAkCM,SAAS,0CAAe,KAA6B,EAAE,KAAuB;IACnF,IAAI,YAAC,QAAQ,YAAE,QAAQ,eAAE,WAAW,WAAE,OAAO,EAAE,cAAc,SAAS,QAAE,IAAI,EAAC,GAAG;IAEhF,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAElC,oEAAoE;IACpE,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,kBAAkB,EACzD,YAAY,MAAM,KAAK,CAAC,cAAc,CAAC,SAAS;IAGlD,gDAAgD;IAChD,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,CAAA,GAAA,gCAAQ,EAAE;QAAC,GAAG,KAAK;QAAE,cAAc;IAAS,GAAG,OAAO;IAC9G,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,qCAAa,EAAE;QAC5C,OAAO;qBACP;QACA,YAAY,MAAM,UAAU;cAC5B;kBACA;kBACA;IACF,GAAG;IAEH,IAAI,QAAQ,MAAM,eAAe;IACjC,IAAI,qBAAqB;QACvB,IAAI;QACJ,IAAI,gBAAgB,YAClB,KAAK;aACA,IAAI,cAAc,OACvB,KAAK;aAEL,KAAK;QAEP,OAAQ;YACN,KAAK;gBACH,OAAO,CAAC,mBAAmB,EAAE,GAAG,mJAAmJ,CAAC;YACtL,KAAK;gBAAa;oBAChB,oFAAoF;oBACpF,mDAAmD;oBACnD,IAAI,MAAM,MAAM,gBAAgB,CAAC;oBACjC,IAAI,MAAM,MAAM,gBAAgB,CAAC;oBACjC,IAAI,QAAQ,MAAM,gBAAgB,CAAC,SAAS,KAAK,QAAQ,CAAC;oBAC1D,IAAI,SAAS,MAAM,gBAAgB,CAAC,SAAS,AAAC,CAAA,MAAM,GAAE,IAAK,GAAG,QAAQ,CAAC;oBACvE,IAAI,MAAM,MAAM,gBAAgB,CAAC,SAAS,KAAK,QAAQ,CAAC;oBACxD,OAAO,CAAC,mBAAmB,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC;gBACjE;YACA,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;gBAAS;oBACZ,IAAI,QAAQ,MAAM,gBAAgB,CAAC,SAAS,MAAM,gBAAgB,CAAC,IAAI,QAAQ,CAAC;oBAChF,IAAI,MAAM,MAAM,gBAAgB,CAAC,SAAS,MAAM,gBAAgB,CAAC,IAAI,QAAQ,CAAC;oBAC9E,OAAO,CAAC,mBAAmB,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,CAAC,CAAC;gBACtD;YACA;gBACE,MAAM,IAAI,MAAM,4BAA4B;QAChD;IACF;IAEA,IAAI,6BAA6B;QAAC,mBAAmB;IAAM;IAE3D,IAAI,YAAY,OACd,UAAU,CAAC,iBAAiB,IAAI,CAAC,EAAE,EAAE,MAAM,UAAU,CAAC,QAAQ,CAAC;SAC1D,IAAI,YAAY,SACrB,UAAU,CAAC,iBAAiB,IAAI,CAAC,EAAE,EAAE,MAAM,YAAY,CAAC,QAAQ,CAAC;IAGnE,OAAO;QACL,YAAY;YACV,GAAG,CAAA,GAAA,gCAAS,EAAE,YAAY,WAAW;YACrC,OAAO;gBACL,GAAG,WAAW,KAAK;gBACnB,GAAG,0BAA0B;gBAC7B,YAAY;YACd;QACF;oBACA;QACA,YAAY;YACV,GAAG,UAAU;YACb,OAAO;gBACL,GAAG,WAAW,KAAK;gBACnB,GAAG,0BAA0B;YAC/B;QACF;oBACA;qBACA;IACF;AACF","sources":["packages/@react-aria/color/src/useColorSlider.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorSliderProps} from '@react-types/color';\nimport {ColorSliderState} from '@react-stately/color';\nimport {DOMAttributes} from '@react-types/shared';\nimport {InputHTMLAttributes, RefObject} from 'react';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSlider, useSliderThumb} from '@react-aria/slider';\n\nexport interface AriaColorSliderOptions extends AriaColorSliderProps {\n  /** A ref for the track element. */\n  trackRef: RefObject<Element>,\n  /** A ref for the input element. */\n  inputRef: RefObject<HTMLInputElement>\n}\n\nexport interface ColorSliderAria {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the output element, displaying the value of the color slider. */\n  outputProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {\n  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name} = props;\n\n  let {locale, direction} = useLocale();\n\n  // Provide a default aria-label if there is no other label provided.\n  if (!props.label && !ariaLabel && !props['aria-labelledby']) {\n    ariaLabel = state.value.getChannelName(channel, locale);\n  }\n\n  // @ts-ignore - ignore unused incompatible props\n  let {groupProps, trackProps, labelProps, outputProps} = useSlider({...props, 'aria-label': ariaLabel}, state, trackRef);\n  let {inputProps, thumbProps} = useSliderThumb({\n    index: 0,\n    orientation,\n    isDisabled: props.isDisabled,\n    name,\n    trackRef,\n    inputRef\n  }, state);\n\n  let value = state.getDisplayColor();\n  let generateBackground = () => {\n    let to: string;\n    if (orientation === 'vertical') {\n      to = 'top';\n    } else if (direction === 'ltr') {\n      to = 'right';\n    } else {\n      to = 'left';\n    }\n    switch (channel) {\n      case 'hue':\n        return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;\n      case 'lightness': {\n        // We have to add an extra color stop in the middle so that the hue shows up at all.\n        // Otherwise it will always just be black to white.\n        let min = state.getThumbMinValue(0);\n        let max = state.getThumbMaxValue(0);\n        let start = value.withChannelValue(channel, min).toString('css');\n        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');\n        let end = value.withChannelValue(channel, max).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;\n      }\n      case 'saturation':\n      case 'brightness':\n      case 'red':\n      case 'green':\n      case 'blue':\n      case 'alpha': {\n        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');\n        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${end})`;\n      }\n      default:\n        throw new Error('Unknown color channel: ' + channel);\n    }\n  };\n\n  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};\n\n  if (channel === 'hue') {\n    inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;\n  } else if (channel !== 'alpha') {\n    inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;\n  }\n\n  return {\n    trackProps: {\n      ...mergeProps(groupProps, trackProps),\n      style: {\n        ...trackProps.style,\n        ...forcedColorAdjustNoneStyle,\n        background: generateBackground()\n      }\n    },\n    inputProps,\n    thumbProps: {\n      ...thumbProps,\n      style: {\n        ...thumbProps.style,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    labelProps,\n    outputProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorSlider.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/color/src/useColorSlider.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorSliderProps} from '@react-types/color';\nimport {ColorSliderState} from '@react-stately/color';\nimport {DOMAttributes} from '@react-types/shared';\nimport {InputHTMLAttributes, RefObject} from 'react';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSlider, useSliderThumb} from '@react-aria/slider';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorSliderOptions extends AriaColorSliderProps {\n  /** A ref for the track element. */\n  trackRef: RefObject<Element>,\n  /** A ref for the input element. */\n  inputRef: RefObject<HTMLInputElement>\n}\n\nexport interface ColorSliderAria {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the output element, displaying the value of the color slider. */\n  outputProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {\n  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name} = props;\n\n  let {locale, direction} = useLocale();\n\n  // Provide a default aria-label if there is no other label provided.\n  if (!props.label && !ariaLabel && !props['aria-labelledby']) {\n    ariaLabel = state.value.getChannelName(channel, locale);\n  }\n\n  // @ts-ignore - ignore unused incompatible props\n  let {groupProps, trackProps, labelProps, outputProps} = useSlider({...props, 'aria-label': ariaLabel}, state, trackRef);\n  let {inputProps, thumbProps} = useSliderThumb({\n    index: 0,\n    orientation,\n    isDisabled: props.isDisabled,\n    name,\n    trackRef,\n    inputRef\n  }, state);\n\n  let value = state.getDisplayColor();\n  let generateBackground = () => {\n    let to: string;\n    if (orientation === 'vertical') {\n      to = 'top';\n    } else if (direction === 'ltr') {\n      to = 'right';\n    } else {\n      to = 'left';\n    }\n    switch (channel) {\n      case 'hue': {\n        let stops = [0, 60, 120, 180, 240, 300, 360].map(hue => value.withChannelValue('hue', hue).toString('css')).join(', ');\n        return `linear-gradient(to ${to}, ${stops})`;\n      }\n      case 'lightness': {\n        // We have to add an extra color stop in the middle so that the hue shows up at all.\n        // Otherwise it will always just be black to white.\n        let min = state.getThumbMinValue(0);\n        let max = state.getThumbMaxValue(0);\n        let start = value.withChannelValue(channel, min).toString('css');\n        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');\n        let end = value.withChannelValue(channel, max).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;\n      }\n      case 'saturation':\n      case 'brightness':\n      case 'red':\n      case 'green':\n      case 'blue':\n      case 'alpha': {\n        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');\n        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${end})`;\n      }\n      default:\n        throw new Error('Unknown color channel: ' + channel);\n    }\n  };\n\n  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};\n\n  if (channel === 'hue') {\n    inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;\n  } else if (channel !== 'alpha') {\n    inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;\n  }\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...mergeProps(groupProps, trackProps),\n      style: {\n        ...trackProps.style,\n        ...forcedColorAdjustNoneStyle,\n        background: generateBackground()\n      }\n    },\n    inputProps: {\n      ...inputProps,\n      style: {\n        ...inputProps.style,\n        ...visuallyHiddenProps.style\n      }\n    },\n    thumbProps: {\n      ...thumbProps,\n      style: {\n        ...thumbProps.style,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    labelProps,\n    outputProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorSlider.main.js.map"}

package/dist/useColorSlider.mjs

@@ -1,6 +1,7 @@
 import {mergeProps as $6WsjB$mergeProps} from "@react-aria/utils";
 import {useLocale as $6WsjB$useLocale} from "@react-aria/i18n";
 import {useSlider as $6WsjB$useSlider, useSliderThumb as $6WsjB$useSliderThumb} from "@react-aria/slider";
+import {useVisuallyHidden as $6WsjB$useVisuallyHidden} from "@react-aria/visually-hidden";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -15,6 +16,7 @@ import {useSlider as $6WsjB$useSlider, useSliderThumb as $6WsjB$useSliderThumb}
  */ 
 
 
+
 function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
     let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
     let { locale: locale, direction: direction } = (0, $6WsjB$useLocale)();
@@ -41,7 +43,18 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
         else to = "left";
         switch(channel){
             case "hue":
-                return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+                {
+                    let stops = [
+                        0,
+                        60,
+                        120,
+                        180,
+                        240,
+                        300,
+                        360
+                    ].map((hue)=>value.withChannelValue("hue", hue).toString("css")).join(", ");
+                    return `linear-gradient(to ${to}, ${stops})`;
+                }
             case "lightness":
                 {
                     // We have to add an extra color stop in the middle so that the hue shows up at all.
@@ -73,6 +86,14 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
     };
     if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
     else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $6WsjB$useVisuallyHidden)({
+        style: {
+            opacity: "0.0001",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
+        }
+    });
     return {
         trackProps: {
             ...(0, $6WsjB$mergeProps)(groupProps, trackProps),
@@ -82,7 +103,13 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
                 background: generateBackground()
             }
         },
-        inputProps: inputProps,
+        inputProps: {
+            ...inputProps,
+            style: {
+                ...inputProps.style,
+                ...visuallyHiddenProps.style
+            }
+        },
         thumbProps: {
             ...thumbProps,
             style: {

package/dist/useColorSlider.module.js

@@ -1,6 +1,7 @@
 import {mergeProps as $6WsjB$mergeProps} from "@react-aria/utils";
 import {useLocale as $6WsjB$useLocale} from "@react-aria/i18n";
 import {useSlider as $6WsjB$useSlider, useSliderThumb as $6WsjB$useSliderThumb} from "@react-aria/slider";
+import {useVisuallyHidden as $6WsjB$useVisuallyHidden} from "@react-aria/visually-hidden";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -15,6 +16,7 @@ import {useSlider as $6WsjB$useSlider, useSliderThumb as $6WsjB$useSliderThumb}
  */ 
 
 
+
 function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
     let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
     let { locale: locale, direction: direction } = (0, $6WsjB$useLocale)();
@@ -41,7 +43,18 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
         else to = "left";
         switch(channel){
             case "hue":
-                return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+                {
+                    let stops = [
+                        0,
+                        60,
+                        120,
+                        180,
+                        240,
+                        300,
+                        360
+                    ].map((hue)=>value.withChannelValue("hue", hue).toString("css")).join(", ");
+                    return `linear-gradient(to ${to}, ${stops})`;
+                }
             case "lightness":
                 {
                     // We have to add an extra color stop in the middle so that the hue shows up at all.
@@ -73,6 +86,14 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
     };
     if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
     else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $6WsjB$useVisuallyHidden)({
+        style: {
+            opacity: "0.0001",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
+        }
+    });
     return {
         trackProps: {
             ...(0, $6WsjB$mergeProps)(groupProps, trackProps),
@@ -82,7 +103,13 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
                 background: generateBackground()
             }
         },
-        inputProps: inputProps,
+        inputProps: {
+            ...inputProps,
+            style: {
+                ...inputProps.style,
+                ...visuallyHiddenProps.style
+            }
+        },
         thumbProps: {
             ...thumbProps,
             style: {

package/dist/useColorSlider.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAkCM,SAAS,0CAAe,KAA6B,EAAE,KAAuB;IACnF,IAAI,YAAC,QAAQ,YAAE,QAAQ,eAAE,WAAW,WAAE,OAAO,EAAE,cAAc,SAAS,QAAE,IAAI,EAAC,GAAG;IAEhF,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,oEAAoE;IACpE,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,kBAAkB,EACzD,YAAY,MAAM,KAAK,CAAC,cAAc,CAAC,SAAS;IAGlD,gDAAgD;IAChD,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,CAAA,GAAA,gBAAQ,EAAE;QAAC,GAAG,KAAK;QAAE,cAAc;IAAS,GAAG,OAAO;IAC9G,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QAC5C,OAAO;qBACP;QACA,YAAY,MAAM,UAAU;cAC5B;kBACA;kBACA;IACF,GAAG;IAEH,IAAI,QAAQ,MAAM,eAAe;IACjC,IAAI,qBAAqB;QACvB,IAAI;QACJ,IAAI,gBAAgB,YAClB,KAAK;aACA,IAAI,cAAc,OACvB,KAAK;aAEL,KAAK;QAEP,OAAQ;YACN,KAAK;gBACH,OAAO,CAAC,mBAAmB,EAAE,GAAG,mJAAmJ,CAAC;YACtL,KAAK;gBAAa;oBAChB,oFAAoF;oBACpF,mDAAmD;oBACnD,IAAI,MAAM,MAAM,gBAAgB,CAAC;oBACjC,IAAI,MAAM,MAAM,gBAAgB,CAAC;oBACjC,IAAI,QAAQ,MAAM,gBAAgB,CAAC,SAAS,KAAK,QAAQ,CAAC;oBAC1D,IAAI,SAAS,MAAM,gBAAgB,CAAC,SAAS,AAAC,CAAA,MAAM,GAAE,IAAK,GAAG,QAAQ,CAAC;oBACvE,IAAI,MAAM,MAAM,gBAAgB,CAAC,SAAS,KAAK,QAAQ,CAAC;oBACxD,OAAO,CAAC,mBAAmB,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC;gBACjE;YACA,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;gBAAS;oBACZ,IAAI,QAAQ,MAAM,gBAAgB,CAAC,SAAS,MAAM,gBAAgB,CAAC,IAAI,QAAQ,CAAC;oBAChF,IAAI,MAAM,MAAM,gBAAgB,CAAC,SAAS,MAAM,gBAAgB,CAAC,IAAI,QAAQ,CAAC;oBAC9E,OAAO,CAAC,mBAAmB,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,CAAC,CAAC;gBACtD;YACA;gBACE,MAAM,IAAI,MAAM,4BAA4B;QAChD;IACF;IAEA,IAAI,6BAA6B;QAAC,mBAAmB;IAAM;IAE3D,IAAI,YAAY,OACd,UAAU,CAAC,iBAAiB,IAAI,CAAC,EAAE,EAAE,MAAM,UAAU,CAAC,QAAQ,CAAC;SAC1D,IAAI,YAAY,SACrB,UAAU,CAAC,iBAAiB,IAAI,CAAC,EAAE,EAAE,MAAM,YAAY,CAAC,QAAQ,CAAC;IAGnE,OAAO;QACL,YAAY;YACV,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,WAAW;YACrC,OAAO;gBACL,GAAG,WAAW,KAAK;gBACnB,GAAG,0BAA0B;gBAC7B,YAAY;YACd;QACF;oBACA;QACA,YAAY;YACV,GAAG,UAAU;YACb,OAAO;gBACL,GAAG,WAAW,KAAK;gBACnB,GAAG,0BAA0B;YAC/B;QACF;oBACA;qBACA;IACF;AACF","sources":["packages/@react-aria/color/src/useColorSlider.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorSliderProps} from '@react-types/color';\nimport {ColorSliderState} from '@react-stately/color';\nimport {DOMAttributes} from '@react-types/shared';\nimport {InputHTMLAttributes, RefObject} from 'react';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSlider, useSliderThumb} from '@react-aria/slider';\n\nexport interface AriaColorSliderOptions extends AriaColorSliderProps {\n  /** A ref for the track element. */\n  trackRef: RefObject<Element>,\n  /** A ref for the input element. */\n  inputRef: RefObject<HTMLInputElement>\n}\n\nexport interface ColorSliderAria {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the output element, displaying the value of the color slider. */\n  outputProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {\n  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name} = props;\n\n  let {locale, direction} = useLocale();\n\n  // Provide a default aria-label if there is no other label provided.\n  if (!props.label && !ariaLabel && !props['aria-labelledby']) {\n    ariaLabel = state.value.getChannelName(channel, locale);\n  }\n\n  // @ts-ignore - ignore unused incompatible props\n  let {groupProps, trackProps, labelProps, outputProps} = useSlider({...props, 'aria-label': ariaLabel}, state, trackRef);\n  let {inputProps, thumbProps} = useSliderThumb({\n    index: 0,\n    orientation,\n    isDisabled: props.isDisabled,\n    name,\n    trackRef,\n    inputRef\n  }, state);\n\n  let value = state.getDisplayColor();\n  let generateBackground = () => {\n    let to: string;\n    if (orientation === 'vertical') {\n      to = 'top';\n    } else if (direction === 'ltr') {\n      to = 'right';\n    } else {\n      to = 'left';\n    }\n    switch (channel) {\n      case 'hue':\n        return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;\n      case 'lightness': {\n        // We have to add an extra color stop in the middle so that the hue shows up at all.\n        // Otherwise it will always just be black to white.\n        let min = state.getThumbMinValue(0);\n        let max = state.getThumbMaxValue(0);\n        let start = value.withChannelValue(channel, min).toString('css');\n        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');\n        let end = value.withChannelValue(channel, max).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;\n      }\n      case 'saturation':\n      case 'brightness':\n      case 'red':\n      case 'green':\n      case 'blue':\n      case 'alpha': {\n        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');\n        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${end})`;\n      }\n      default:\n        throw new Error('Unknown color channel: ' + channel);\n    }\n  };\n\n  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};\n\n  if (channel === 'hue') {\n    inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;\n  } else if (channel !== 'alpha') {\n    inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;\n  }\n\n  return {\n    trackProps: {\n      ...mergeProps(groupProps, trackProps),\n      style: {\n        ...trackProps.style,\n        ...forcedColorAdjustNoneStyle,\n        background: generateBackground()\n      }\n    },\n    inputProps,\n    thumbProps: {\n      ...thumbProps,\n      style: {\n        ...thumbProps.style,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    labelProps,\n    outputProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorSlider.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/color/src/useColorSlider.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorSliderProps} from '@react-types/color';\nimport {ColorSliderState} from '@react-stately/color';\nimport {DOMAttributes} from '@react-types/shared';\nimport {InputHTMLAttributes, RefObject} from 'react';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSlider, useSliderThumb} from '@react-aria/slider';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorSliderOptions extends AriaColorSliderProps {\n  /** A ref for the track element. */\n  trackRef: RefObject<Element>,\n  /** A ref for the input element. */\n  inputRef: RefObject<HTMLInputElement>\n}\n\nexport interface ColorSliderAria {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the output element, displaying the value of the color slider. */\n  outputProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {\n  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name} = props;\n\n  let {locale, direction} = useLocale();\n\n  // Provide a default aria-label if there is no other label provided.\n  if (!props.label && !ariaLabel && !props['aria-labelledby']) {\n    ariaLabel = state.value.getChannelName(channel, locale);\n  }\n\n  // @ts-ignore - ignore unused incompatible props\n  let {groupProps, trackProps, labelProps, outputProps} = useSlider({...props, 'aria-label': ariaLabel}, state, trackRef);\n  let {inputProps, thumbProps} = useSliderThumb({\n    index: 0,\n    orientation,\n    isDisabled: props.isDisabled,\n    name,\n    trackRef,\n    inputRef\n  }, state);\n\n  let value = state.getDisplayColor();\n  let generateBackground = () => {\n    let to: string;\n    if (orientation === 'vertical') {\n      to = 'top';\n    } else if (direction === 'ltr') {\n      to = 'right';\n    } else {\n      to = 'left';\n    }\n    switch (channel) {\n      case 'hue': {\n        let stops = [0, 60, 120, 180, 240, 300, 360].map(hue => value.withChannelValue('hue', hue).toString('css')).join(', ');\n        return `linear-gradient(to ${to}, ${stops})`;\n      }\n      case 'lightness': {\n        // We have to add an extra color stop in the middle so that the hue shows up at all.\n        // Otherwise it will always just be black to white.\n        let min = state.getThumbMinValue(0);\n        let max = state.getThumbMaxValue(0);\n        let start = value.withChannelValue(channel, min).toString('css');\n        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');\n        let end = value.withChannelValue(channel, max).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;\n      }\n      case 'saturation':\n      case 'brightness':\n      case 'red':\n      case 'green':\n      case 'blue':\n      case 'alpha': {\n        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');\n        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${end})`;\n      }\n      default:\n        throw new Error('Unknown color channel: ' + channel);\n    }\n  };\n\n  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};\n\n  if (channel === 'hue') {\n    inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;\n  } else if (channel !== 'alpha') {\n    inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;\n  }\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...mergeProps(groupProps, trackProps),\n      style: {\n        ...trackProps.style,\n        ...forcedColorAdjustNoneStyle,\n        background: generateBackground()\n      }\n    },\n    inputProps: {\n      ...inputProps,\n      style: {\n        ...inputProps.style,\n        ...visuallyHiddenProps.style\n      }\n    },\n    thumbProps: {\n      ...thumbProps,\n      style: {\n        ...thumbProps.style,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    labelProps,\n    outputProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorSlider.module.js.map"}

package/dist/useColorSwatch.main.js

@@ -0,0 +1,67 @@
+var $4a33e168940636d5$exports = require("./intlStrings.main.js");
+var $gp2Sz$reactariautils = require("@react-aria/utils");
+var $gp2Sz$react = require("react");
+var $gp2Sz$reactstatelycolor = require("@react-stately/color");
+var $gp2Sz$reactariai18n = require("@react-aria/i18n");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColorSwatch", () => $7c947b33be1ec2a6$export$9060ae606178d849);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+function $7c947b33be1ec2a6$export$9060ae606178d849(props) {
+    let { color: value, colorName: colorName } = props;
+    let nonNullValue = value || "#fff0";
+    let color = (0, $gp2Sz$react.useMemo)(()=>typeof nonNullValue === "string" ? (0, $gp2Sz$reactstatelycolor.parseColor)(nonNullValue) : nonNullValue, [
+        nonNullValue
+    ]);
+    let { locale: locale } = (0, $gp2Sz$reactariai18n.useLocale)();
+    let DOMProps = (0, $gp2Sz$reactariautils.filterDOMProps)(props, {
+        labelable: true
+    });
+    let stringFormatter = (0, $gp2Sz$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4a33e168940636d5$exports))), "@react-aria/color");
+    let id = (0, $gp2Sz$reactariautils.useId)(props.id);
+    if (!colorName) colorName = color.getChannelValue("alpha") === 0 ? stringFormatter.format("transparent") : color.getColorName(locale);
+    return {
+        colorSwatchProps: {
+            ...DOMProps,
+            role: "img",
+            "aria-roledescription": stringFormatter.format("colorSwatch"),
+            "aria-label": [
+                colorName,
+                props["aria-label"] || ""
+            ].filter(Boolean).join(", "),
+            "aria-labelledby": props["aria-labelledby"] ? `${id} ${props["aria-labelledby"]}` : undefined,
+            id: id,
+            style: {
+                backgroundColor: color.toString("css"),
+                // @ts-ignore
+                forcedColorAdjust: "none"
+            }
+        },
+        color: color || null
+    };
+}
+
+
+//# sourceMappingURL=useColorSwatch.main.js.map

package/dist/useColorSwatch.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAkCM,SAAS,0CAAe,KAA2B;IACxD,IAAI,EAAC,OAAO,KAAK,aAAE,SAAS,EAAC,GAAG;IAChC,IAAI,eAAe,SAAS;IAC5B,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,mCAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IACpH,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IACvB,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,KAAK,CAAA,GAAA,2BAAI,EAAE,MAAM,EAAE;IAEvB,IAAI,CAAC,WACH,YAAY,MAAM,eAAe,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC,iBAAiB,MAAM,YAAY,CAAC;IAGhH,OAAO;QACL,kBAAkB;YAChB,GAAG,QAAQ;YACX,MAAM;YACN,wBAAwB,gBAAgB,MAAM,CAAC;YAC/C,cAAc;gBAAC;gBAAW,KAAK,CAAC,aAAa,IAAI;aAAG,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;YAC1E,mBAAmB,KAAK,CAAC,kBAAkB,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,GAAG;gBACpF;YACA,OAAO;gBACL,iBAAiB,MAAM,QAAQ,CAAC;gBAChC,aAAa;gBACb,mBAAmB;YACrB;QACF;QACA,OAAO,SAAS;IAClB;AACF","sources":["packages/@react-aria/color/src/useColorSwatch.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {AriaLabelingProps, DOMProps} from '@react-types/shared';\nimport {Color} from '@react-types/color';\nimport {filterDOMProps, useId} from '@react-aria/utils';\nimport {HTMLAttributes, useMemo} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {parseColor} from '@react-stately/color';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {\n  /** The color value to display in the swatch. */\n  color?: string | Color | null,\n  /** \n   * A localized accessible name for the color.\n   * By default, a description is generated from the color value,\n   * but this can be overridden if you have a more specific color\n   * name (e.g. Pantone colors).\n   */\n  colorName?: string\n}\n\nexport interface ColorSwatchAria {\n  /** Props for the color swatch element. */\n  colorSwatchProps: HTMLAttributes<HTMLElement>,\n  /** The parsed color value of the swatch. */\n  color: Color\n}\n\n/**\n * Provides the accessibility implementation for a color swatch component.\n * A color swatch displays a preview of a selected color.\n */\nexport function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {\n  let {color: value, colorName} = props;\n  let nonNullValue = value || '#fff0';\n  let color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n  let {locale} = useLocale();\n  let DOMProps = filterDOMProps(props, {labelable: true});\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n  let id = useId(props.id);\n\n  if (!colorName) {\n    colorName = color.getChannelValue('alpha') === 0 ? stringFormatter.format('transparent') : color.getColorName(locale);\n  }\n\n  return {\n    colorSwatchProps: {\n      ...DOMProps,\n      role: 'img',\n      'aria-roledescription': stringFormatter.format('colorSwatch'),\n      'aria-label': [colorName, props['aria-label'] || ''].filter(Boolean).join(', '),\n      'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,\n      id,\n      style: {\n        backgroundColor: color.toString('css'),\n        // @ts-ignore\n        forcedColorAdjust: 'none'\n      }\n    },\n    color: color || null\n  };\n}\n"],"names":[],"version":3,"file":"useColorSwatch.main.js.map"}

package/dist/useColorSwatch.mjs

@@ -0,0 +1,62 @@
+import $kMaRF$intlStringsmodulejs from "./intlStrings.mjs";
+import {filterDOMProps as $kMaRF$filterDOMProps, useId as $kMaRF$useId} from "@react-aria/utils";
+import {useMemo as $kMaRF$useMemo} from "react";
+import {parseColor as $kMaRF$parseColor} from "@react-stately/color";
+import {useLocale as $kMaRF$useLocale, useLocalizedStringFormatter as $kMaRF$useLocalizedStringFormatter} from "@react-aria/i18n";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+function $2993fcad7650b98d$export$9060ae606178d849(props) {
+    let { color: value, colorName: colorName } = props;
+    let nonNullValue = value || "#fff0";
+    let color = (0, $kMaRF$useMemo)(()=>typeof nonNullValue === "string" ? (0, $kMaRF$parseColor)(nonNullValue) : nonNullValue, [
+        nonNullValue
+    ]);
+    let { locale: locale } = (0, $kMaRF$useLocale)();
+    let DOMProps = (0, $kMaRF$filterDOMProps)(props, {
+        labelable: true
+    });
+    let stringFormatter = (0, $kMaRF$useLocalizedStringFormatter)((0, ($parcel$interopDefault($kMaRF$intlStringsmodulejs))), "@react-aria/color");
+    let id = (0, $kMaRF$useId)(props.id);
+    if (!colorName) colorName = color.getChannelValue("alpha") === 0 ? stringFormatter.format("transparent") : color.getColorName(locale);
+    return {
+        colorSwatchProps: {
+            ...DOMProps,
+            role: "img",
+            "aria-roledescription": stringFormatter.format("colorSwatch"),
+            "aria-label": [
+                colorName,
+                props["aria-label"] || ""
+            ].filter(Boolean).join(", "),
+            "aria-labelledby": props["aria-labelledby"] ? `${id} ${props["aria-labelledby"]}` : undefined,
+            id: id,
+            style: {
+                backgroundColor: color.toString("css"),
+                // @ts-ignore
+                forcedColorAdjust: "none"
+            }
+        },
+        color: color || null
+    };
+}
+
+
+export {$2993fcad7650b98d$export$9060ae606178d849 as useColorSwatch};
+//# sourceMappingURL=useColorSwatch.mjs.map

package/dist/useColorSwatch.module.js

@@ -0,0 +1,62 @@
+import $kMaRF$intlStringsmodulejs from "./intlStrings.module.js";
+import {filterDOMProps as $kMaRF$filterDOMProps, useId as $kMaRF$useId} from "@react-aria/utils";
+import {useMemo as $kMaRF$useMemo} from "react";
+import {parseColor as $kMaRF$parseColor} from "@react-stately/color";
+import {useLocale as $kMaRF$useLocale, useLocalizedStringFormatter as $kMaRF$useLocalizedStringFormatter} from "@react-aria/i18n";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+function $2993fcad7650b98d$export$9060ae606178d849(props) {
+    let { color: value, colorName: colorName } = props;
+    let nonNullValue = value || "#fff0";
+    let color = (0, $kMaRF$useMemo)(()=>typeof nonNullValue === "string" ? (0, $kMaRF$parseColor)(nonNullValue) : nonNullValue, [
+        nonNullValue
+    ]);
+    let { locale: locale } = (0, $kMaRF$useLocale)();
+    let DOMProps = (0, $kMaRF$filterDOMProps)(props, {
+        labelable: true
+    });
+    let stringFormatter = (0, $kMaRF$useLocalizedStringFormatter)((0, ($parcel$interopDefault($kMaRF$intlStringsmodulejs))), "@react-aria/color");
+    let id = (0, $kMaRF$useId)(props.id);
+    if (!colorName) colorName = color.getChannelValue("alpha") === 0 ? stringFormatter.format("transparent") : color.getColorName(locale);
+    return {
+        colorSwatchProps: {
+            ...DOMProps,
+            role: "img",
+            "aria-roledescription": stringFormatter.format("colorSwatch"),
+            "aria-label": [
+                colorName,
+                props["aria-label"] || ""
+            ].filter(Boolean).join(", "),
+            "aria-labelledby": props["aria-labelledby"] ? `${id} ${props["aria-labelledby"]}` : undefined,
+            id: id,
+            style: {
+                backgroundColor: color.toString("css"),
+                // @ts-ignore
+                forcedColorAdjust: "none"
+            }
+        },
+        color: color || null
+    };
+}
+
+
+export {$2993fcad7650b98d$export$9060ae606178d849 as useColorSwatch};
+//# sourceMappingURL=useColorSwatch.module.js.map

package/dist/useColorSwatch.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAkCM,SAAS,0CAAe,KAA2B;IACxD,IAAI,EAAC,OAAO,KAAK,aAAE,SAAS,EAAC,GAAG;IAChC,IAAI,eAAe,SAAS;IAC5B,IAAI,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IACpH,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,KAAK,CAAA,GAAA,YAAI,EAAE,MAAM,EAAE;IAEvB,IAAI,CAAC,WACH,YAAY,MAAM,eAAe,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC,iBAAiB,MAAM,YAAY,CAAC;IAGhH,OAAO;QACL,kBAAkB;YAChB,GAAG,QAAQ;YACX,MAAM;YACN,wBAAwB,gBAAgB,MAAM,CAAC;YAC/C,cAAc;gBAAC;gBAAW,KAAK,CAAC,aAAa,IAAI;aAAG,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;YAC1E,mBAAmB,KAAK,CAAC,kBAAkB,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,GAAG;gBACpF;YACA,OAAO;gBACL,iBAAiB,MAAM,QAAQ,CAAC;gBAChC,aAAa;gBACb,mBAAmB;YACrB;QACF;QACA,OAAO,SAAS;IAClB;AACF","sources":["packages/@react-aria/color/src/useColorSwatch.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {AriaLabelingProps, DOMProps} from '@react-types/shared';\nimport {Color} from '@react-types/color';\nimport {filterDOMProps, useId} from '@react-aria/utils';\nimport {HTMLAttributes, useMemo} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {parseColor} from '@react-stately/color';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {\n  /** The color value to display in the swatch. */\n  color?: string | Color | null,\n  /** \n   * A localized accessible name for the color.\n   * By default, a description is generated from the color value,\n   * but this can be overridden if you have a more specific color\n   * name (e.g. Pantone colors).\n   */\n  colorName?: string\n}\n\nexport interface ColorSwatchAria {\n  /** Props for the color swatch element. */\n  colorSwatchProps: HTMLAttributes<HTMLElement>,\n  /** The parsed color value of the swatch. */\n  color: Color\n}\n\n/**\n * Provides the accessibility implementation for a color swatch component.\n * A color swatch displays a preview of a selected color.\n */\nexport function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {\n  let {color: value, colorName} = props;\n  let nonNullValue = value || '#fff0';\n  let color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n  let {locale} = useLocale();\n  let DOMProps = filterDOMProps(props, {labelable: true});\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n  let id = useId(props.id);\n\n  if (!colorName) {\n    colorName = color.getChannelValue('alpha') === 0 ? stringFormatter.format('transparent') : color.getColorName(locale);\n  }\n\n  return {\n    colorSwatchProps: {\n      ...DOMProps,\n      role: 'img',\n      'aria-roledescription': stringFormatter.format('colorSwatch'),\n      'aria-label': [colorName, props['aria-label'] || ''].filter(Boolean).join(', '),\n      'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,\n      id,\n      style: {\n        backgroundColor: color.toString('css'),\n        // @ts-ignore\n        forcedColorAdjust: 'none'\n      }\n    },\n    color: color || null\n  };\n}\n"],"names":[],"version":3,"file":"useColorSwatch.module.js.map"}

package/dist/useColorWheel.main.js

@@ -2,6 +2,7 @@ var $iWAp3$reactariautils = require("@react-aria/utils");
 var $iWAp3$react = require("react");
 var $iWAp3$reactariainteractions = require("@react-aria/interactions");
 var $iWAp3$reactariai18n = require("@react-aria/i18n");
+var $iWAp3$reactariavisuallyhidden = require("@react-aria/visually-hidden");
 
 
 function $parcel$export(e, n, v, s) {
@@ -23,6 +24,7 @@ $parcel$export(module.exports, "useColorWheel", () => $1d29bf243d4a9a53$export$9
 
 
 
+
 function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
     let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, "aria-label": ariaLabel, name: name } = props;
     let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $iWAp3$reactariautils.useGlobalListeners)();
@@ -195,6 +197,14 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
     let forcedColorAdjustNoneStyle = {
         forcedColorAdjust: "none"
     };
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $iWAp3$reactariavisuallyhidden.useVisuallyHidden)({
+        style: {
+            opacity: "0.0001",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
+        }
+    });
     return {
         trackProps: {
             ...trackInteractions,
@@ -229,9 +239,9 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
             ...thumbInteractions,
             style: {
                 position: "absolute",
-                left: "50%",
-                top: "50%",
-                transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,
+                left: outerRadius + x,
+                top: outerRadius + y,
+                transform: "translate(-50%, -50%)",
                 touchAction: "none",
                 ...forcedColorAdjustNoneStyle
             }
@@ -247,7 +257,11 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
             name: name,
             onChange: (e)=>{
                 state.setHue(parseFloat(e.target.value));
-            }
+            },
+            style: visuallyHiddenProps.style,
+            "aria-errormessage": props["aria-errormessage"],
+            "aria-describedby": props["aria-describedby"],
+            "aria-details": props["aria-details"]
         })
     };
 }

package/dist/useColorWheel.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/color/src/useColorWheel.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps} from '@react-types/color';\nimport {ColorWheelState} from '@react-stately/color';\nimport {DOMAttributes} from '@react-types/shared';\nimport {focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';\nimport React, {ChangeEvent, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';\nimport {useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaColorWheelOptions extends AriaColorWheelProps {\n  /** The outer radius of the color wheel. */\n  outerRadius: number,\n  /** The inner radius of the color wheel. */\n  innerRadius: number\n}\n\nexport interface ColorWheelAria {\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelState, inputRef: RefObject<HTMLInputElement>): ColorWheelAria {\n  let {\n    isDisabled,\n    innerRadius,\n    outerRadius,\n    'aria-label': ariaLabel,\n    name\n  } = props;\n\n  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n  let thumbRadius = (innerRadius + outerRadius) / 2;\n\n  let focusInput = useCallback(() => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputRef]);\n\n  useFormReset(inputRef, state.hue, state.setHue);\n\n  let currentPosition = useRef<{x: number, y: number} | null>(null);\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      // these are the cases that useMove doesn't handle\n      if (!/^(PageUp|PageDown)$/.test(e.key)) {\n        e.continuePropagation();\n        return;\n      }\n      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us\n      e.preventDefault();\n      // remember to set this and unset it so that onChangeEnd is fired\n      state.setDragging(true);\n      switch (e.key) {\n        case 'PageUp':\n          e.preventDefault();\n          state.increment(state.pageStep);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          state.decrement(state.pageStep);\n          break;\n      }\n      state.setDragging(false);\n    }\n  });\n\n  let moveHandler = {\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setDragging(true);\n    },\n    onMove({deltaX, deltaY, pointerType, shiftKey}) {\n      if (currentPosition.current == null) {\n        currentPosition.current = state.getThumbPosition(thumbRadius);\n      }\n      currentPosition.current.x += deltaX;\n      currentPosition.current.y += deltaY;\n      if (pointerType === 'keyboard') {\n        if (deltaX > 0 || deltaY < 0) {\n          state.increment(shiftKey ? state.pageStep : state.step);\n        } else if (deltaX < 0 || deltaY > 0) {\n          state.decrement(shiftKey ? state.pageStep : state.step);\n        }\n      } else {\n        state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);\n      }\n    },\n    onMoveEnd() {\n      isOnTrack.current = false;\n      state.setDragging(false);\n      focusInput();\n    }\n  };\n  let {moveProps: movePropsThumb} = useMove(moveHandler);\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let isOnTrack = useRef<boolean>(false);\n  let {moveProps: movePropsContainer} = useMove({\n    onMoveStart() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveStart();\n      }\n    },\n    onMove(e) {\n      if (isOnTrack.current) {\n        moveHandler.onMove(e);\n      }\n    },\n    onMoveEnd() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveEnd();\n      }\n    }\n  });\n\n  let onThumbDown = (id: number | null | undefined) => {\n    if (!state.isDragging) {\n      currentPointer.current = id;\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onThumbUp, false);\n        addGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onThumbUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      focusInput();\n      state.setDragging(false);\n      currentPointer.current = undefined;\n      isOnTrack.current = false;\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onThumbUp, false);\n        removeGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onTrackDown = (track: Element, id: number | null | undefined, pageX: number, pageY: number) => {\n    let rect = track.getBoundingClientRect();\n    let x = pageX - rect.x - rect.width / 2;\n    let y = pageY - rect.y - rect.height / 2;\n    let radius = Math.sqrt(x * x + y * y);\n    if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {\n      isOnTrack.current = true;\n      currentPointer.current = id;\n      state.setHueFromPoint(x, y, radius);\n\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onTrackUp, false);\n        addGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let onTrackUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (isOnTrack.current && id === currentPointer.current) {\n      isOnTrack.current = false;\n      currentPointer.current = undefined;\n      state.setDragging(false);\n      focusInput();\n\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onTrackUp, false);\n        removeGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let trackInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\n        }\n      })\n  }, movePropsContainer);\n\n  let thumbInteractions = isDisabled ? {} : mergeProps({\n    onMouseDown: (e: React.MouseEvent) => {\n      if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n        return;\n      }\n      onThumbDown(undefined);\n    },\n    onPointerDown: (e: React.PointerEvent) => {\n      if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n        return;\n      }\n      onThumbDown(e.pointerId);\n    },\n    onTouchStart: (e: React.TouchEvent) => {\n      onThumbDown(e.changedTouches[0].identifier);\n    }\n  }, keyboardProps, movePropsThumb);\n  let {x, y} = state.getThumbPosition(thumbRadius);\n\n  // Provide a default aria-label if none is given\n  let {locale} = useLocale();\n  if (ariaLabel == null && props['aria-labelledby'] == null) {\n    ariaLabel = state.value.getChannelName('hue', locale);\n  }\n\n  let inputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n  });\n\n  let {minValue, maxValue, step} = state.value.getChannelRange('hue');\n\n  let forcedColorAdjustNoneStyle = {\n    forcedColorAdjust: 'none'\n  };\n\n  return {\n    trackProps: {\n      ...trackInteractions,\n      style: {\n        position: 'relative',\n        touchAction: 'none',\n        width: outerRadius * 2,\n        height: outerRadius * 2,\n        background: `\n          conic-gradient(\n            from 90deg,\n            hsl(0, 100%, 50%),\n            hsl(30, 100%, 50%),\n            hsl(60, 100%, 50%),\n            hsl(90, 100%, 50%),\n            hsl(120, 100%, 50%),\n            hsl(150, 100%, 50%),\n            hsl(180, 100%, 50%),\n            hsl(210, 100%, 50%),\n            hsl(240, 100%, 50%),\n            hsl(270, 100%, 50%),\n            hsl(300, 100%, 50%),\n            hsl(330, 100%, 50%),\n            hsl(360, 100%, 50%)\n          )\n        `,\n        clipPath: `path(evenodd, \"${circlePath(outerRadius, outerRadius, outerRadius)} ${circlePath(outerRadius, outerRadius, innerRadius)}\")`,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    thumbProps: {\n      ...thumbInteractions,\n      style: {\n        position: 'absolute',\n        left: '50%',\n        top: '50%',\n        transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,\n        touchAction: 'none',\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    inputProps: mergeProps(\n      inputLabellingProps,\n      {\n        type: 'range',\n        min: String(minValue),\n        max: String(maxValue),\n        step: String(step),\n        'aria-valuetext': `${state.value.formatChannelValue('hue', locale)}, ${state.value.getHueName(locale)}`,\n        disabled: isDisabled,\n        value: `${state.value.getChannelValue('hue')}`,\n        name,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => {\n          state.setHue(parseFloat(e.target.value));\n        }\n      }\n    )\n  };\n}\n\n// Creates an SVG path string for a circle.\nfunction circlePath(cx: number, cy: number, r: number) {\n  return `M ${cx}, ${cy} m ${-r}, 0 a ${r}, ${r}, 0, 1, 0, ${r * 2}, 0 a ${r}, ${r}, 0, 1, 0 ${-r * 2}, 0`;\n}\n"],"names":[],"version":3,"file":"useColorWheel.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/color/src/useColorWheel.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps} from '@react-types/color';\nimport {ColorWheelState} from '@react-stately/color';\nimport {DOMAttributes} from '@react-types/shared';\nimport {focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';\nimport React, {ChangeEvent, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';\nimport {useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorWheelOptions extends AriaColorWheelProps {\n  /** The outer radius of the color wheel. */\n  outerRadius: number,\n  /** The inner radius of the color wheel. */\n  innerRadius: number\n}\n\nexport interface ColorWheelAria {\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelState, inputRef: RefObject<HTMLInputElement>): ColorWheelAria {\n  let {\n    isDisabled,\n    innerRadius,\n    outerRadius,\n    'aria-label': ariaLabel,\n    name\n  } = props;\n\n  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n  let thumbRadius = (innerRadius + outerRadius) / 2;\n\n  let focusInput = useCallback(() => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputRef]);\n\n  useFormReset(inputRef, state.hue, state.setHue);\n\n  let currentPosition = useRef<{x: number, y: number} | null>(null);\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      // these are the cases that useMove doesn't handle\n      if (!/^(PageUp|PageDown)$/.test(e.key)) {\n        e.continuePropagation();\n        return;\n      }\n      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us\n      e.preventDefault();\n      // remember to set this and unset it so that onChangeEnd is fired\n      state.setDragging(true);\n      switch (e.key) {\n        case 'PageUp':\n          e.preventDefault();\n          state.increment(state.pageStep);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          state.decrement(state.pageStep);\n          break;\n      }\n      state.setDragging(false);\n    }\n  });\n\n  let moveHandler = {\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setDragging(true);\n    },\n    onMove({deltaX, deltaY, pointerType, shiftKey}) {\n      if (currentPosition.current == null) {\n        currentPosition.current = state.getThumbPosition(thumbRadius);\n      }\n      currentPosition.current.x += deltaX;\n      currentPosition.current.y += deltaY;\n      if (pointerType === 'keyboard') {\n        if (deltaX > 0 || deltaY < 0) {\n          state.increment(shiftKey ? state.pageStep : state.step);\n        } else if (deltaX < 0 || deltaY > 0) {\n          state.decrement(shiftKey ? state.pageStep : state.step);\n        }\n      } else {\n        state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);\n      }\n    },\n    onMoveEnd() {\n      isOnTrack.current = false;\n      state.setDragging(false);\n      focusInput();\n    }\n  };\n  let {moveProps: movePropsThumb} = useMove(moveHandler);\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let isOnTrack = useRef<boolean>(false);\n  let {moveProps: movePropsContainer} = useMove({\n    onMoveStart() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveStart();\n      }\n    },\n    onMove(e) {\n      if (isOnTrack.current) {\n        moveHandler.onMove(e);\n      }\n    },\n    onMoveEnd() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveEnd();\n      }\n    }\n  });\n\n  let onThumbDown = (id: number | null | undefined) => {\n    if (!state.isDragging) {\n      currentPointer.current = id;\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onThumbUp, false);\n        addGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onThumbUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      focusInput();\n      state.setDragging(false);\n      currentPointer.current = undefined;\n      isOnTrack.current = false;\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onThumbUp, false);\n        removeGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onTrackDown = (track: Element, id: number | null | undefined, pageX: number, pageY: number) => {\n    let rect = track.getBoundingClientRect();\n    let x = pageX - rect.x - rect.width / 2;\n    let y = pageY - rect.y - rect.height / 2;\n    let radius = Math.sqrt(x * x + y * y);\n    if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {\n      isOnTrack.current = true;\n      currentPointer.current = id;\n      state.setHueFromPoint(x, y, radius);\n\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onTrackUp, false);\n        addGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let onTrackUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (isOnTrack.current && id === currentPointer.current) {\n      isOnTrack.current = false;\n      currentPointer.current = undefined;\n      state.setDragging(false);\n      focusInput();\n\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onTrackUp, false);\n        removeGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let trackInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\n        }\n      })\n  }, movePropsContainer);\n\n  let thumbInteractions = isDisabled ? {} : mergeProps({\n    onMouseDown: (e: React.MouseEvent) => {\n      if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n        return;\n      }\n      onThumbDown(undefined);\n    },\n    onPointerDown: (e: React.PointerEvent) => {\n      if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n        return;\n      }\n      onThumbDown(e.pointerId);\n    },\n    onTouchStart: (e: React.TouchEvent) => {\n      onThumbDown(e.changedTouches[0].identifier);\n    }\n  }, keyboardProps, movePropsThumb);\n  let {x, y} = state.getThumbPosition(thumbRadius);\n\n  // Provide a default aria-label if none is given\n  let {locale} = useLocale();\n  if (ariaLabel == null && props['aria-labelledby'] == null) {\n    ariaLabel = state.value.getChannelName('hue', locale);\n  }\n\n  let inputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n  });\n\n  let {minValue, maxValue, step} = state.value.getChannelRange('hue');\n\n  let forcedColorAdjustNoneStyle = {\n    forcedColorAdjust: 'none'\n  };\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...trackInteractions,\n      style: {\n        position: 'relative',\n        touchAction: 'none',\n        width: outerRadius * 2,\n        height: outerRadius * 2,\n        background: `\n          conic-gradient(\n            from 90deg,\n            hsl(0, 100%, 50%),\n            hsl(30, 100%, 50%),\n            hsl(60, 100%, 50%),\n            hsl(90, 100%, 50%),\n            hsl(120, 100%, 50%),\n            hsl(150, 100%, 50%),\n            hsl(180, 100%, 50%),\n            hsl(210, 100%, 50%),\n            hsl(240, 100%, 50%),\n            hsl(270, 100%, 50%),\n            hsl(300, 100%, 50%),\n            hsl(330, 100%, 50%),\n            hsl(360, 100%, 50%)\n          )\n        `,\n        clipPath: `path(evenodd, \"${circlePath(outerRadius, outerRadius, outerRadius)} ${circlePath(outerRadius, outerRadius, innerRadius)}\")`,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    thumbProps: {\n      ...thumbInteractions,\n      style: {\n        position: 'absolute',\n        left: outerRadius + x,\n        top: outerRadius + y,\n        transform: 'translate(-50%, -50%)',\n        touchAction: 'none',\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    inputProps: mergeProps(\n      inputLabellingProps,\n      {\n        type: 'range',\n        min: String(minValue),\n        max: String(maxValue),\n        step: String(step),\n        'aria-valuetext': `${state.value.formatChannelValue('hue', locale)}, ${state.value.getHueName(locale)}`,\n        disabled: isDisabled,\n        value: `${state.value.getChannelValue('hue')}`,\n        name,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => {\n          state.setHue(parseFloat(e.target.value));\n        },\n        style: visuallyHiddenProps.style,\n        'aria-errormessage': props['aria-errormessage'],\n        'aria-describedby': props['aria-describedby'],\n        'aria-details': props['aria-details']\n      }\n    )\n  };\n}\n\n// Creates an SVG path string for a circle.\nfunction circlePath(cx: number, cy: number, r: number) {\n  return `M ${cx}, ${cy} m ${-r}, 0 a ${r}, ${r}, 0, 1, 0, ${r * 2}, 0 a ${r}, ${r}, 0, 1, 0 ${-r * 2}, 0`;\n}\n"],"names":[],"version":3,"file":"useColorWheel.main.js.map"}

package/dist/useColorWheel.mjs

@@ -2,6 +2,7 @@ import {useGlobalListeners as $hcgPp$useGlobalListeners, focusWithoutScrolling a
 import {useCallback as $hcgPp$useCallback, useRef as $hcgPp$useRef} from "react";
 import {useKeyboard as $hcgPp$useKeyboard, useMove as $hcgPp$useMove} from "@react-aria/interactions";
 import {useLocale as $hcgPp$useLocale} from "@react-aria/i18n";
+import {useVisuallyHidden as $hcgPp$useVisuallyHidden} from "@react-aria/visually-hidden";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -17,6 +18,7 @@ import {useLocale as $hcgPp$useLocale} from "@react-aria/i18n";
 
 
 
+
 function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
     let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, "aria-label": ariaLabel, name: name } = props;
     let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $hcgPp$useGlobalListeners)();
@@ -189,6 +191,14 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
     let forcedColorAdjustNoneStyle = {
         forcedColorAdjust: "none"
     };
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $hcgPp$useVisuallyHidden)({
+        style: {
+            opacity: "0.0001",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
+        }
+    });
     return {
         trackProps: {
             ...trackInteractions,
@@ -223,9 +233,9 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
             ...thumbInteractions,
             style: {
                 position: "absolute",
-                left: "50%",
-                top: "50%",
-                transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,
+                left: outerRadius + x,
+                top: outerRadius + y,
+                transform: "translate(-50%, -50%)",
                 touchAction: "none",
                 ...forcedColorAdjustNoneStyle
             }
@@ -241,7 +251,11 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
             name: name,
             onChange: (e)=>{
                 state.setHue(parseFloat(e.target.value));
-            }
+            },
+            style: visuallyHiddenProps.style,
+            "aria-errormessage": props["aria-errormessage"],
+            "aria-describedby": props["aria-describedby"],
+            "aria-details": props["aria-details"]
         })
     };
 }