@react-aria/color 3.0.0-beta.30 → 3.0.0-beta.32

package/dist/useColorField.module.js

@@ -0,0 +1,93 @@
+import {useState as $f8mV7$useState, useCallback as $f8mV7$useCallback} from "react";
+import {useId as $f8mV7$useId, mergeProps as $f8mV7$mergeProps} from "@react-aria/utils";
+import {privateValidationStateProp as $f8mV7$privateValidationStateProp} from "@react-stately/form";
+import {useFocusWithin as $f8mV7$useFocusWithin, useScrollWheel as $f8mV7$useScrollWheel} from "@react-aria/interactions";
+import {useFormattedTextField as $f8mV7$useFormattedTextField} from "@react-aria/textfield";
+import {useSpinButton as $f8mV7$useSpinButton} from "@react-aria/spinbutton";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
+    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
+    let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
+    let inputId = (0, $f8mV7$useId)();
+    let { spinButtonProps: spinButtonProps } = (0, $f8mV7$useSpinButton)({
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired,
+        maxValue: 0xFFFFFF,
+        minValue: 0,
+        onIncrement: increment,
+        onIncrementToMax: incrementToMax,
+        onDecrement: decrement,
+        onDecrementToMin: decrementToMin,
+        value: colorValue ? colorValue.toHexInt() : undefined,
+        textValue: colorValue ? colorValue.toString("hex") : undefined
+    });
+    let [focusWithin, setFocusWithin] = (0, $f8mV7$useState)(false);
+    let { focusWithinProps: focusWithinProps } = (0, $f8mV7$useFocusWithin)({
+        isDisabled: isDisabled,
+        onFocusWithinChange: setFocusWithin
+    });
+    let onWheel = (0, $f8mV7$useCallback)((e)=>{
+        if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+        if (e.deltaY > 0) increment();
+        else if (e.deltaY < 0) decrement();
+    }, [
+        decrement,
+        increment
+    ]);
+    // If the input isn't supposed to receive input, disable scrolling.
+    let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
+    (0, $f8mV7$useScrollWheel)({
+        onScroll: onWheel,
+        isDisabled: scrollingDisabled
+    }, ref);
+    let onChange = (value)=>{
+        if (state.validate(value)) state.setInputValue(value);
+    };
+    let { inputProps: inputProps, ...otherProps } = (0, $f8mV7$useFormattedTextField)({
+        ...props,
+        id: inputId,
+        value: inputValue,
+        defaultValue: undefined,
+        validate: undefined,
+        [(0, $f8mV7$privateValidationStateProp)]: state,
+        type: "text",
+        autoComplete: "off",
+        onChange: onChange
+    }, state, ref);
+    inputProps = (0, $f8mV7$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
+        role: "textbox",
+        "aria-valuemax": null,
+        "aria-valuemin": null,
+        "aria-valuenow": null,
+        "aria-valuetext": null,
+        autoCorrect: "off",
+        spellCheck: "false",
+        onBlur: commit
+    });
+    if (validationBehavior === "native") inputProps["aria-required"] = undefined;
+    return {
+        inputProps: inputProps,
+        ...otherProps
+    };
+}
+
+
+export {$f6896b05b2ecad12$export$77e32ca575a28fdf as useColorField};
+//# sourceMappingURL=useColorField.module.js.map

package/dist/useColorField.module.js.map

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

package/dist/useColorSlider.main.js

@@ -0,0 +1,132 @@
+var $edxco$reactariautils = require("@react-aria/utils");
+var $edxco$reactariai18n = require("@react-aria/i18n");
+var $edxco$reactariaslider = require("@react-aria/slider");
+var $edxco$reactariavisuallyhidden = require("@react-aria/visually-hidden");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColorSlider", () => $afbb9647440a7f5b$export$106b7a4e66508f66);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+function $afbb9647440a7f5b$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, $edxco$reactariai18n.useLocale)();
+    // Provide a default aria-label if there is no other label provided.
+    if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
+    // @ts-ignore - ignore unused incompatible props
+    let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $edxco$reactariaslider.useSlider)({
+        ...props,
+        "aria-label": ariaLabel
+    }, state, trackRef);
+    let { inputProps: inputProps, thumbProps: thumbProps } = (0, $edxco$reactariaslider.useSliderThumb)({
+        index: 0,
+        orientation: orientation,
+        isDisabled: props.isDisabled,
+        name: name,
+        trackRef: trackRef,
+        inputRef: inputRef
+    }, state);
+    let value = state.getDisplayColor();
+    let generateBackground = ()=>{
+        let to;
+        if (orientation === "vertical") to = "top";
+        else if (direction === "ltr") to = "right";
+        else to = "left";
+        switch(channel){
+            case "hue":
+                {
+                    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.
+                    // Otherwise it will always just be black to white.
+                    let min = state.getThumbMinValue(0);
+                    let max = state.getThumbMaxValue(0);
+                    let start = value.withChannelValue(channel, min).toString("css");
+                    let middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
+                    let end = value.withChannelValue(channel, max).toString("css");
+                    return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
+                }
+            case "saturation":
+            case "brightness":
+            case "red":
+            case "green":
+            case "blue":
+            case "alpha":
+                {
+                    let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
+                    let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
+                    return `linear-gradient(to ${to}, ${start}, ${end})`;
+                }
+            default:
+                throw new Error("Unknown color channel: " + channel);
+        }
+    };
+    let forcedColorAdjustNoneStyle = {
+        forcedColorAdjust: "none"
+    };
+    if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
+    else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $edxco$reactariavisuallyhidden.useVisuallyHidden)({
+        style: {
+            opacity: "0.0001",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
+        }
+    });
+    return {
+        trackProps: {
+            ...(0, $edxco$reactariautils.mergeProps)(groupProps, trackProps),
+            style: {
+                ...trackProps.style,
+                ...forcedColorAdjustNoneStyle,
+                background: generateBackground()
+            }
+        },
+        inputProps: {
+            ...inputProps,
+            style: {
+                ...inputProps.style,
+                ...visuallyHiddenProps.style
+            }
+        },
+        thumbProps: {
+            ...thumbProps,
+            style: {
+                ...thumbProps.style,
+                ...forcedColorAdjustNoneStyle
+            }
+        },
+        labelProps: labelProps,
+        outputProps: outputProps
+    };
+}
+
+
+//# sourceMappingURL=useColorSlider.main.js.map

package/dist/useColorSlider.main.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,127 @@
+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.
+ * 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 $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)();
+    // Provide a default aria-label if there is no other label provided.
+    if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
+    // @ts-ignore - ignore unused incompatible props
+    let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $6WsjB$useSlider)({
+        ...props,
+        "aria-label": ariaLabel
+    }, state, trackRef);
+    let { inputProps: inputProps, thumbProps: thumbProps } = (0, $6WsjB$useSliderThumb)({
+        index: 0,
+        orientation: orientation,
+        isDisabled: props.isDisabled,
+        name: name,
+        trackRef: trackRef,
+        inputRef: inputRef
+    }, state);
+    let value = state.getDisplayColor();
+    let generateBackground = ()=>{
+        let to;
+        if (orientation === "vertical") to = "top";
+        else if (direction === "ltr") to = "right";
+        else to = "left";
+        switch(channel){
+            case "hue":
+                {
+                    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.
+                    // Otherwise it will always just be black to white.
+                    let min = state.getThumbMinValue(0);
+                    let max = state.getThumbMaxValue(0);
+                    let start = value.withChannelValue(channel, min).toString("css");
+                    let middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
+                    let end = value.withChannelValue(channel, max).toString("css");
+                    return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
+                }
+            case "saturation":
+            case "brightness":
+            case "red":
+            case "green":
+            case "blue":
+            case "alpha":
+                {
+                    let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
+                    let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
+                    return `linear-gradient(to ${to}, ${start}, ${end})`;
+                }
+            default:
+                throw new Error("Unknown color channel: " + channel);
+        }
+    };
+    let forcedColorAdjustNoneStyle = {
+        forcedColorAdjust: "none"
+    };
+    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),
+            style: {
+                ...trackProps.style,
+                ...forcedColorAdjustNoneStyle,
+                background: generateBackground()
+            }
+        },
+        inputProps: {
+            ...inputProps,
+            style: {
+                ...inputProps.style,
+                ...visuallyHiddenProps.style
+            }
+        },
+        thumbProps: {
+            ...thumbProps,
+            style: {
+                ...thumbProps.style,
+                ...forcedColorAdjustNoneStyle
+            }
+        },
+        labelProps: labelProps,
+        outputProps: outputProps
+    };
+}
+
+
+export {$40af666d6c251e36$export$106b7a4e66508f66 as useColorSlider};
+//# sourceMappingURL=useColorSlider.mjs.map

package/dist/useColorSlider.module.js

@@ -0,0 +1,127 @@
+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.
+ * 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 $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)();
+    // Provide a default aria-label if there is no other label provided.
+    if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
+    // @ts-ignore - ignore unused incompatible props
+    let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $6WsjB$useSlider)({
+        ...props,
+        "aria-label": ariaLabel
+    }, state, trackRef);
+    let { inputProps: inputProps, thumbProps: thumbProps } = (0, $6WsjB$useSliderThumb)({
+        index: 0,
+        orientation: orientation,
+        isDisabled: props.isDisabled,
+        name: name,
+        trackRef: trackRef,
+        inputRef: inputRef
+    }, state);
+    let value = state.getDisplayColor();
+    let generateBackground = ()=>{
+        let to;
+        if (orientation === "vertical") to = "top";
+        else if (direction === "ltr") to = "right";
+        else to = "left";
+        switch(channel){
+            case "hue":
+                {
+                    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.
+                    // Otherwise it will always just be black to white.
+                    let min = state.getThumbMinValue(0);
+                    let max = state.getThumbMaxValue(0);
+                    let start = value.withChannelValue(channel, min).toString("css");
+                    let middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
+                    let end = value.withChannelValue(channel, max).toString("css");
+                    return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
+                }
+            case "saturation":
+            case "brightness":
+            case "red":
+            case "green":
+            case "blue":
+            case "alpha":
+                {
+                    let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
+                    let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
+                    return `linear-gradient(to ${to}, ${start}, ${end})`;
+                }
+            default:
+                throw new Error("Unknown color channel: " + channel);
+        }
+    };
+    let forcedColorAdjustNoneStyle = {
+        forcedColorAdjust: "none"
+    };
+    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),
+            style: {
+                ...trackProps.style,
+                ...forcedColorAdjustNoneStyle,
+                background: generateBackground()
+            }
+        },
+        inputProps: {
+            ...inputProps,
+            style: {
+                ...inputProps.style,
+                ...visuallyHiddenProps.style
+            }
+        },
+        thumbProps: {
+            ...thumbProps,
+            style: {
+                ...thumbProps.style,
+                ...forcedColorAdjustNoneStyle
+            }
+        },
+        labelProps: labelProps,
+        outputProps: outputProps
+    };
+}
+
+
+export {$40af666d6c251e36$export$106b7a4e66508f66 as useColorSlider};
+//# sourceMappingURL=useColorSlider.module.js.map

package/dist/useColorSlider.module.js.map

@@ -0,0 +1 @@
+{"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"}