@react-stately/color 3.5.4-nightly.4555 → 3.5.4-nightly.4560

package/dist/useColorFieldState.main.js

@@ -0,0 +1,138 @@
+var $83fe1a57d631223b$exports = require("./Color.main.js");
+var $f8b3be23ba4462b1$exports = require("./useColor.main.js");
+var $41neA$reactstatelyform = require("@react-stately/form");
+var $41neA$reactstatelyutils = require("@react-stately/utils");
+var $41neA$react = require("react");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColorFieldState", () => $d59d0c2b2ce1568f$export$d52a01683abdfcd6);
+/*
+ * 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.
+ */ 
+
+
+
+
+const $d59d0c2b2ce1568f$var$MIN_COLOR = (0, $83fe1a57d631223b$exports.parseColor)("#000000");
+const $d59d0c2b2ce1568f$var$MAX_COLOR = (0, $83fe1a57d631223b$exports.parseColor)("#FFFFFF");
+const $d59d0c2b2ce1568f$var$MIN_COLOR_INT = $d59d0c2b2ce1568f$var$MIN_COLOR.toHexInt();
+const $d59d0c2b2ce1568f$var$MAX_COLOR_INT = $d59d0c2b2ce1568f$var$MAX_COLOR.toHexInt();
+function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
+    let { value: value, defaultValue: defaultValue, onChange: onChange } = props;
+    let { step: step } = $d59d0c2b2ce1568f$var$MIN_COLOR.getChannelRange("red");
+    let initialValue = (0, $f8b3be23ba4462b1$exports.useColor)(value);
+    let initialDefaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(defaultValue);
+    let [colorValue, setColorValue] = (0, $41neA$reactstatelyutils.useControlledState)(initialValue, initialDefaultValue, onChange);
+    let [inputValue, setInputValue] = (0, $41neA$react.useState)(()=>(value || defaultValue) && colorValue ? colorValue.toString("hex") : "");
+    let validation = (0, $41neA$reactstatelyform.useFormValidationState)({
+        ...props,
+        value: colorValue
+    });
+    let safelySetColorValue = (newColor)=>{
+        if (!colorValue || !newColor) {
+            setColorValue(newColor);
+            return;
+        }
+        if (newColor.toHexInt() !== colorValue.toHexInt()) {
+            setColorValue(newColor);
+            return;
+        }
+    };
+    let [prevValue, setPrevValue] = (0, $41neA$react.useState)(colorValue);
+    if (prevValue !== colorValue) {
+        setInputValue(colorValue ? colorValue.toString("hex") : "");
+        setPrevValue(colorValue);
+    }
+    let parsedValue = (0, $41neA$react.useMemo)(()=>{
+        let color;
+        try {
+            color = (0, $83fe1a57d631223b$exports.parseColor)(inputValue.startsWith("#") ? inputValue : `#${inputValue}`);
+        } catch (err) {
+            color = null;
+        }
+        return color;
+    }, [
+        inputValue
+    ]);
+    let commit = ()=>{
+        // Set to empty state if input value is empty
+        if (!inputValue.length) {
+            safelySetColorValue(null);
+            setInputValue(value === undefined ? "" : colorValue.toString("hex"));
+            return;
+        }
+        // if it failed to parse, then reset input to formatted version of current number
+        if (parsedValue == null) {
+            setInputValue(colorValue ? colorValue.toString("hex") : "");
+            return;
+        }
+        safelySetColorValue(parsedValue);
+        // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
+        let newColorValue = "";
+        if (colorValue) newColorValue = colorValue.toString("hex");
+        setInputValue(newColorValue);
+    };
+    let increment = ()=>{
+        let newValue = $d59d0c2b2ce1568f$var$addColorValue(parsedValue, step);
+        // if we've arrived at the same value that was previously in the state, the
+        // input value should be updated to match
+        // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+        // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+        if (newValue === colorValue) setInputValue(newValue.toString("hex"));
+        safelySetColorValue(newValue);
+        validation.commitValidation();
+    };
+    let decrement = ()=>{
+        let newValue = $d59d0c2b2ce1568f$var$addColorValue(parsedValue, -step);
+        // if we've arrived at the same value that was previously in the state, the
+        // input value should be updated to match
+        // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+        // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+        if (newValue === colorValue) setInputValue(newValue.toString("hex"));
+        safelySetColorValue(newValue);
+        validation.commitValidation();
+    };
+    let incrementToMax = ()=>safelySetColorValue($d59d0c2b2ce1568f$var$MAX_COLOR);
+    let decrementToMin = ()=>safelySetColorValue($d59d0c2b2ce1568f$var$MIN_COLOR);
+    let validate = (value)=>{
+        var _value_match;
+        return value === "" || !!((_value_match = value.match(/^#?[0-9a-f]{0,6}$/i)) === null || _value_match === void 0 ? void 0 : _value_match[0]);
+    };
+    return {
+        ...validation,
+        validate: validate,
+        colorValue: colorValue,
+        inputValue: inputValue,
+        setInputValue: setInputValue,
+        commit: commit,
+        increment: increment,
+        incrementToMax: incrementToMax,
+        decrement: decrement,
+        decrementToMin: decrementToMin
+    };
+}
+function $d59d0c2b2ce1568f$var$addColorValue(color, step) {
+    let newColor = color ? color : $d59d0c2b2ce1568f$var$MIN_COLOR;
+    let colorInt = newColor.toHexInt();
+    let clampInt = Math.min(Math.max(colorInt + step, $d59d0c2b2ce1568f$var$MIN_COLOR_INT), $d59d0c2b2ce1568f$var$MAX_COLOR_INT);
+    if (clampInt !== colorInt) {
+        let newColorString = `#${clampInt.toString(16).padStart(6, "0").toUpperCase()}`;
+        newColor = (0, $83fe1a57d631223b$exports.parseColor)(newColorString);
+    }
+    return newColor;
+}
+
+
+//# sourceMappingURL=useColorFieldState.main.js.map

package/dist/useColorFieldState.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-stately/color/src/useColorFieldState.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 {Color, ColorFieldProps} from '@react-types/color';\nimport {FormValidationState, useFormValidationState} from '@react-stately/form';\nimport {parseColor} from './Color';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\n\nexport interface ColorFieldState extends FormValidationState {\n  /**\n   * The current text value of the input. Updated as the user types,\n   * and formatted according to `formatOptions` on blur.\n   */\n  readonly inputValue: string,\n  /**\n   * The currently parsed color value, or null if the field is empty.\n   * Updated based on the `inputValue` as the user types.\n   */\n  readonly colorValue: Color,\n  /** Sets the current text value of the input. */\n  setInputValue(value: string): void,\n  /**\n   * Updates the input value based on the currently parsed color value.\n   * Typically this is called when the field is blurred.\n   */\n  commit(): void,\n  /** Increments the current input value to the next step boundary, and fires `onChange`. */\n  increment(): void,\n  /** Decrements the current input value to the next step boundary, and fires `onChange`. */\n  decrement(): void,\n  /** Sets the current value to the maximum color value, and fires `onChange`. */\n  incrementToMax(): void,\n  /** Sets the current value to the minimum color value, and fires `onChange`. */\n  decrementToMin(): void,\n  /**\n   * Validates a user input string.\n   * Values can be partially entered, and may be valid even if they cannot currently be parsed to a color.\n   * Can be used to implement validation as a user types.\n   */\n  validate(value: string): boolean\n}\n\nconst MIN_COLOR = parseColor('#000000');\nconst MAX_COLOR = parseColor('#FFFFFF');\nconst MIN_COLOR_INT = MIN_COLOR.toHexInt();\nconst MAX_COLOR_INT = MAX_COLOR.toHexInt();\n\n/**\n * Provides state management for a color field component. Color fields allow\n * users to enter and adjust a hex color value.\n */\nexport function useColorFieldState(\n  props: ColorFieldProps\n): ColorFieldState {\n  let {\n    value,\n    defaultValue,\n    onChange\n  } = props;\n  let {step} = MIN_COLOR.getChannelRange('red');\n\n  let initialValue = useColor(value);\n  let initialDefaultValue = useColor(defaultValue);\n  let [colorValue, setColorValue] = useControlledState<Color>(initialValue, initialDefaultValue, onChange);\n  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');\n\n  let validation = useFormValidationState({\n    ...props,\n    value: colorValue\n  });\n\n  let safelySetColorValue = (newColor: Color) => {\n    if (!colorValue || !newColor) {\n      setColorValue(newColor);\n      return;\n    }\n    if (newColor.toHexInt() !== colorValue.toHexInt()) {\n      setColorValue(newColor);\n      return;\n    }\n  };\n\n  let [prevValue, setPrevValue] = useState(colorValue);\n  if (prevValue !== colorValue) {\n    setInputValue(colorValue ? colorValue.toString('hex') : '');\n    setPrevValue(colorValue);\n  }\n\n  let parsedValue = useMemo(() => {\n    let color;\n    try {\n      color = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);\n    } catch (err) {\n      color = null;\n    }\n    return color;\n  }, [inputValue]);\n\n  let commit = () => {\n    // Set to empty state if input value is empty\n    if (!inputValue.length) {\n      safelySetColorValue(null);\n      setInputValue(value === undefined ? '' : colorValue.toString('hex'));\n      return;\n    }\n\n    // if it failed to parse, then reset input to formatted version of current number\n    if (parsedValue == null) {\n      setInputValue(colorValue ? colorValue.toString('hex') : '');\n      return;\n    }\n\n    safelySetColorValue(parsedValue);\n    // in a controlled state, the numberValue won't change, so we won't go back to our old input without help\n    let newColorValue = '';\n    if (colorValue) {\n      newColorValue = colorValue.toString('hex');\n    }\n    setInputValue(newColorValue);\n  };\n\n  let increment = () => {\n    let newValue = addColorValue(parsedValue, step);\n    // if we've arrived at the same value that was previously in the state, the\n    // input value should be updated to match\n    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n    if (newValue === colorValue) {\n      setInputValue(newValue.toString('hex'));\n    }\n    safelySetColorValue(newValue);\n    validation.commitValidation();\n  };\n  let decrement = () => {\n    let newValue = addColorValue(parsedValue, -step);\n    // if we've arrived at the same value that was previously in the state, the\n    // input value should be updated to match\n    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n    if (newValue === colorValue) {\n      setInputValue(newValue.toString('hex'));\n    }\n    safelySetColorValue(newValue);\n    validation.commitValidation();\n  };\n  let incrementToMax = () => safelySetColorValue(MAX_COLOR);\n  let decrementToMin = () => safelySetColorValue(MIN_COLOR);\n\n  let validate = (value: string) => value === '' || !!value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];\n\n  return {\n    ...validation,\n    validate,\n    colorValue,\n    inputValue,\n    setInputValue,\n    commit,\n    increment,\n    incrementToMax,\n    decrement,\n    decrementToMin\n  };\n}\n\nfunction addColorValue(color: Color, step: number) {\n  let newColor = color ? color : MIN_COLOR;\n  let colorInt = newColor.toHexInt();\n\n  let clampInt = Math.min(Math.max(colorInt + step, MIN_COLOR_INT), MAX_COLOR_INT);\n  if (clampInt !== colorInt) {\n    let newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`;\n    newColor = parseColor(newColorString);\n  }\n  return newColor;\n}\n"],"names":[],"version":3,"file":"useColorFieldState.main.js.map"}

package/dist/useColorFieldState.mjs

@@ -0,0 +1,133 @@
+import {parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
+import {useColor as $aa90ad8b2b1d015f$export$5aadd9c0606af5c2} from "./useColor.mjs";
+import {useFormValidationState as $aP5W6$useFormValidationState} from "@react-stately/form";
+import {useControlledState as $aP5W6$useControlledState} from "@react-stately/utils";
+import {useState as $aP5W6$useState, useMemo as $aP5W6$useMemo} from "react";
+
+/*
+ * 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.
+ */ 
+
+
+
+
+const $b335ada08155d9c0$var$MIN_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#000000");
+const $b335ada08155d9c0$var$MAX_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#FFFFFF");
+const $b335ada08155d9c0$var$MIN_COLOR_INT = $b335ada08155d9c0$var$MIN_COLOR.toHexInt();
+const $b335ada08155d9c0$var$MAX_COLOR_INT = $b335ada08155d9c0$var$MAX_COLOR.toHexInt();
+function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
+    let { value: value, defaultValue: defaultValue, onChange: onChange } = props;
+    let { step: step } = $b335ada08155d9c0$var$MIN_COLOR.getChannelRange("red");
+    let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(value);
+    let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(defaultValue);
+    let [colorValue, setColorValue] = (0, $aP5W6$useControlledState)(initialValue, initialDefaultValue, onChange);
+    let [inputValue, setInputValue] = (0, $aP5W6$useState)(()=>(value || defaultValue) && colorValue ? colorValue.toString("hex") : "");
+    let validation = (0, $aP5W6$useFormValidationState)({
+        ...props,
+        value: colorValue
+    });
+    let safelySetColorValue = (newColor)=>{
+        if (!colorValue || !newColor) {
+            setColorValue(newColor);
+            return;
+        }
+        if (newColor.toHexInt() !== colorValue.toHexInt()) {
+            setColorValue(newColor);
+            return;
+        }
+    };
+    let [prevValue, setPrevValue] = (0, $aP5W6$useState)(colorValue);
+    if (prevValue !== colorValue) {
+        setInputValue(colorValue ? colorValue.toString("hex") : "");
+        setPrevValue(colorValue);
+    }
+    let parsedValue = (0, $aP5W6$useMemo)(()=>{
+        let color;
+        try {
+            color = (0, $799cddbef784668f$export$6e865ea70d7724f)(inputValue.startsWith("#") ? inputValue : `#${inputValue}`);
+        } catch (err) {
+            color = null;
+        }
+        return color;
+    }, [
+        inputValue
+    ]);
+    let commit = ()=>{
+        // Set to empty state if input value is empty
+        if (!inputValue.length) {
+            safelySetColorValue(null);
+            setInputValue(value === undefined ? "" : colorValue.toString("hex"));
+            return;
+        }
+        // if it failed to parse, then reset input to formatted version of current number
+        if (parsedValue == null) {
+            setInputValue(colorValue ? colorValue.toString("hex") : "");
+            return;
+        }
+        safelySetColorValue(parsedValue);
+        // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
+        let newColorValue = "";
+        if (colorValue) newColorValue = colorValue.toString("hex");
+        setInputValue(newColorValue);
+    };
+    let increment = ()=>{
+        let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, step);
+        // if we've arrived at the same value that was previously in the state, the
+        // input value should be updated to match
+        // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+        // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+        if (newValue === colorValue) setInputValue(newValue.toString("hex"));
+        safelySetColorValue(newValue);
+        validation.commitValidation();
+    };
+    let decrement = ()=>{
+        let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, -step);
+        // if we've arrived at the same value that was previously in the state, the
+        // input value should be updated to match
+        // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+        // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+        if (newValue === colorValue) setInputValue(newValue.toString("hex"));
+        safelySetColorValue(newValue);
+        validation.commitValidation();
+    };
+    let incrementToMax = ()=>safelySetColorValue($b335ada08155d9c0$var$MAX_COLOR);
+    let decrementToMin = ()=>safelySetColorValue($b335ada08155d9c0$var$MIN_COLOR);
+    let validate = (value)=>{
+        var _value_match;
+        return value === "" || !!((_value_match = value.match(/^#?[0-9a-f]{0,6}$/i)) === null || _value_match === void 0 ? void 0 : _value_match[0]);
+    };
+    return {
+        ...validation,
+        validate: validate,
+        colorValue: colorValue,
+        inputValue: inputValue,
+        setInputValue: setInputValue,
+        commit: commit,
+        increment: increment,
+        incrementToMax: incrementToMax,
+        decrement: decrement,
+        decrementToMin: decrementToMin
+    };
+}
+function $b335ada08155d9c0$var$addColorValue(color, step) {
+    let newColor = color ? color : $b335ada08155d9c0$var$MIN_COLOR;
+    let colorInt = newColor.toHexInt();
+    let clampInt = Math.min(Math.max(colorInt + step, $b335ada08155d9c0$var$MIN_COLOR_INT), $b335ada08155d9c0$var$MAX_COLOR_INT);
+    if (clampInt !== colorInt) {
+        let newColorString = `#${clampInt.toString(16).padStart(6, "0").toUpperCase()}`;
+        newColor = (0, $799cddbef784668f$export$6e865ea70d7724f)(newColorString);
+    }
+    return newColor;
+}
+
+
+export {$b335ada08155d9c0$export$d52a01683abdfcd6 as useColorFieldState};
+//# sourceMappingURL=useColorFieldState.mjs.map

package/dist/useColorFieldState.module.js

@@ -0,0 +1,133 @@
+import {parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
+import {useColor as $aa90ad8b2b1d015f$export$5aadd9c0606af5c2} from "./useColor.module.js";
+import {useFormValidationState as $aP5W6$useFormValidationState} from "@react-stately/form";
+import {useControlledState as $aP5W6$useControlledState} from "@react-stately/utils";
+import {useState as $aP5W6$useState, useMemo as $aP5W6$useMemo} from "react";
+
+/*
+ * 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.
+ */ 
+
+
+
+
+const $b335ada08155d9c0$var$MIN_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#000000");
+const $b335ada08155d9c0$var$MAX_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#FFFFFF");
+const $b335ada08155d9c0$var$MIN_COLOR_INT = $b335ada08155d9c0$var$MIN_COLOR.toHexInt();
+const $b335ada08155d9c0$var$MAX_COLOR_INT = $b335ada08155d9c0$var$MAX_COLOR.toHexInt();
+function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
+    let { value: value, defaultValue: defaultValue, onChange: onChange } = props;
+    let { step: step } = $b335ada08155d9c0$var$MIN_COLOR.getChannelRange("red");
+    let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(value);
+    let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(defaultValue);
+    let [colorValue, setColorValue] = (0, $aP5W6$useControlledState)(initialValue, initialDefaultValue, onChange);
+    let [inputValue, setInputValue] = (0, $aP5W6$useState)(()=>(value || defaultValue) && colorValue ? colorValue.toString("hex") : "");
+    let validation = (0, $aP5W6$useFormValidationState)({
+        ...props,
+        value: colorValue
+    });
+    let safelySetColorValue = (newColor)=>{
+        if (!colorValue || !newColor) {
+            setColorValue(newColor);
+            return;
+        }
+        if (newColor.toHexInt() !== colorValue.toHexInt()) {
+            setColorValue(newColor);
+            return;
+        }
+    };
+    let [prevValue, setPrevValue] = (0, $aP5W6$useState)(colorValue);
+    if (prevValue !== colorValue) {
+        setInputValue(colorValue ? colorValue.toString("hex") : "");
+        setPrevValue(colorValue);
+    }
+    let parsedValue = (0, $aP5W6$useMemo)(()=>{
+        let color;
+        try {
+            color = (0, $799cddbef784668f$export$6e865ea70d7724f)(inputValue.startsWith("#") ? inputValue : `#${inputValue}`);
+        } catch (err) {
+            color = null;
+        }
+        return color;
+    }, [
+        inputValue
+    ]);
+    let commit = ()=>{
+        // Set to empty state if input value is empty
+        if (!inputValue.length) {
+            safelySetColorValue(null);
+            setInputValue(value === undefined ? "" : colorValue.toString("hex"));
+            return;
+        }
+        // if it failed to parse, then reset input to formatted version of current number
+        if (parsedValue == null) {
+            setInputValue(colorValue ? colorValue.toString("hex") : "");
+            return;
+        }
+        safelySetColorValue(parsedValue);
+        // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
+        let newColorValue = "";
+        if (colorValue) newColorValue = colorValue.toString("hex");
+        setInputValue(newColorValue);
+    };
+    let increment = ()=>{
+        let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, step);
+        // if we've arrived at the same value that was previously in the state, the
+        // input value should be updated to match
+        // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+        // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+        if (newValue === colorValue) setInputValue(newValue.toString("hex"));
+        safelySetColorValue(newValue);
+        validation.commitValidation();
+    };
+    let decrement = ()=>{
+        let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, -step);
+        // if we've arrived at the same value that was previously in the state, the
+        // input value should be updated to match
+        // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+        // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+        if (newValue === colorValue) setInputValue(newValue.toString("hex"));
+        safelySetColorValue(newValue);
+        validation.commitValidation();
+    };
+    let incrementToMax = ()=>safelySetColorValue($b335ada08155d9c0$var$MAX_COLOR);
+    let decrementToMin = ()=>safelySetColorValue($b335ada08155d9c0$var$MIN_COLOR);
+    let validate = (value)=>{
+        var _value_match;
+        return value === "" || !!((_value_match = value.match(/^#?[0-9a-f]{0,6}$/i)) === null || _value_match === void 0 ? void 0 : _value_match[0]);
+    };
+    return {
+        ...validation,
+        validate: validate,
+        colorValue: colorValue,
+        inputValue: inputValue,
+        setInputValue: setInputValue,
+        commit: commit,
+        increment: increment,
+        incrementToMax: incrementToMax,
+        decrement: decrement,
+        decrementToMin: decrementToMin
+    };
+}
+function $b335ada08155d9c0$var$addColorValue(color, step) {
+    let newColor = color ? color : $b335ada08155d9c0$var$MIN_COLOR;
+    let colorInt = newColor.toHexInt();
+    let clampInt = Math.min(Math.max(colorInt + step, $b335ada08155d9c0$var$MIN_COLOR_INT), $b335ada08155d9c0$var$MAX_COLOR_INT);
+    if (clampInt !== colorInt) {
+        let newColorString = `#${clampInt.toString(16).padStart(6, "0").toUpperCase()}`;
+        newColor = (0, $799cddbef784668f$export$6e865ea70d7724f)(newColorString);
+    }
+    return newColor;
+}
+
+
+export {$b335ada08155d9c0$export$d52a01683abdfcd6 as useColorFieldState};
+//# sourceMappingURL=useColorFieldState.module.js.map

package/dist/useColorFieldState.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-stately/color/src/useColorFieldState.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 {Color, ColorFieldProps} from '@react-types/color';\nimport {FormValidationState, useFormValidationState} from '@react-stately/form';\nimport {parseColor} from './Color';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\n\nexport interface ColorFieldState extends FormValidationState {\n  /**\n   * The current text value of the input. Updated as the user types,\n   * and formatted according to `formatOptions` on blur.\n   */\n  readonly inputValue: string,\n  /**\n   * The currently parsed color value, or null if the field is empty.\n   * Updated based on the `inputValue` as the user types.\n   */\n  readonly colorValue: Color,\n  /** Sets the current text value of the input. */\n  setInputValue(value: string): void,\n  /**\n   * Updates the input value based on the currently parsed color value.\n   * Typically this is called when the field is blurred.\n   */\n  commit(): void,\n  /** Increments the current input value to the next step boundary, and fires `onChange`. */\n  increment(): void,\n  /** Decrements the current input value to the next step boundary, and fires `onChange`. */\n  decrement(): void,\n  /** Sets the current value to the maximum color value, and fires `onChange`. */\n  incrementToMax(): void,\n  /** Sets the current value to the minimum color value, and fires `onChange`. */\n  decrementToMin(): void,\n  /**\n   * Validates a user input string.\n   * Values can be partially entered, and may be valid even if they cannot currently be parsed to a color.\n   * Can be used to implement validation as a user types.\n   */\n  validate(value: string): boolean\n}\n\nconst MIN_COLOR = parseColor('#000000');\nconst MAX_COLOR = parseColor('#FFFFFF');\nconst MIN_COLOR_INT = MIN_COLOR.toHexInt();\nconst MAX_COLOR_INT = MAX_COLOR.toHexInt();\n\n/**\n * Provides state management for a color field component. Color fields allow\n * users to enter and adjust a hex color value.\n */\nexport function useColorFieldState(\n  props: ColorFieldProps\n): ColorFieldState {\n  let {\n    value,\n    defaultValue,\n    onChange\n  } = props;\n  let {step} = MIN_COLOR.getChannelRange('red');\n\n  let initialValue = useColor(value);\n  let initialDefaultValue = useColor(defaultValue);\n  let [colorValue, setColorValue] = useControlledState<Color>(initialValue, initialDefaultValue, onChange);\n  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');\n\n  let validation = useFormValidationState({\n    ...props,\n    value: colorValue\n  });\n\n  let safelySetColorValue = (newColor: Color) => {\n    if (!colorValue || !newColor) {\n      setColorValue(newColor);\n      return;\n    }\n    if (newColor.toHexInt() !== colorValue.toHexInt()) {\n      setColorValue(newColor);\n      return;\n    }\n  };\n\n  let [prevValue, setPrevValue] = useState(colorValue);\n  if (prevValue !== colorValue) {\n    setInputValue(colorValue ? colorValue.toString('hex') : '');\n    setPrevValue(colorValue);\n  }\n\n  let parsedValue = useMemo(() => {\n    let color;\n    try {\n      color = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);\n    } catch (err) {\n      color = null;\n    }\n    return color;\n  }, [inputValue]);\n\n  let commit = () => {\n    // Set to empty state if input value is empty\n    if (!inputValue.length) {\n      safelySetColorValue(null);\n      setInputValue(value === undefined ? '' : colorValue.toString('hex'));\n      return;\n    }\n\n    // if it failed to parse, then reset input to formatted version of current number\n    if (parsedValue == null) {\n      setInputValue(colorValue ? colorValue.toString('hex') : '');\n      return;\n    }\n\n    safelySetColorValue(parsedValue);\n    // in a controlled state, the numberValue won't change, so we won't go back to our old input without help\n    let newColorValue = '';\n    if (colorValue) {\n      newColorValue = colorValue.toString('hex');\n    }\n    setInputValue(newColorValue);\n  };\n\n  let increment = () => {\n    let newValue = addColorValue(parsedValue, step);\n    // if we've arrived at the same value that was previously in the state, the\n    // input value should be updated to match\n    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n    if (newValue === colorValue) {\n      setInputValue(newValue.toString('hex'));\n    }\n    safelySetColorValue(newValue);\n    validation.commitValidation();\n  };\n  let decrement = () => {\n    let newValue = addColorValue(parsedValue, -step);\n    // if we've arrived at the same value that was previously in the state, the\n    // input value should be updated to match\n    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n    if (newValue === colorValue) {\n      setInputValue(newValue.toString('hex'));\n    }\n    safelySetColorValue(newValue);\n    validation.commitValidation();\n  };\n  let incrementToMax = () => safelySetColorValue(MAX_COLOR);\n  let decrementToMin = () => safelySetColorValue(MIN_COLOR);\n\n  let validate = (value: string) => value === '' || !!value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];\n\n  return {\n    ...validation,\n    validate,\n    colorValue,\n    inputValue,\n    setInputValue,\n    commit,\n    increment,\n    incrementToMax,\n    decrement,\n    decrementToMin\n  };\n}\n\nfunction addColorValue(color: Color, step: number) {\n  let newColor = color ? color : MIN_COLOR;\n  let colorInt = newColor.toHexInt();\n\n  let clampInt = Math.min(Math.max(colorInt + step, MIN_COLOR_INT), MAX_COLOR_INT);\n  if (clampInt !== colorInt) {\n    let newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`;\n    newColor = parseColor(newColorString);\n  }\n  return newColor;\n}\n"],"names":[],"version":3,"file":"useColorFieldState.module.js.map"}

package/dist/useColorSliderState.main.js

@@ -0,0 +1,75 @@
+var $83fe1a57d631223b$exports = require("./Color.main.js");
+var $93tpS$reactstatelyslider = require("@react-stately/slider");
+var $93tpS$reactstatelyutils = require("@react-stately/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColorSliderState", () => $5386a492cfd3234c$export$57bc203e1c9c6d44);
+/*
+ * 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 $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
+    let { channel: channel, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, ...otherProps } = props;
+    if (value == null && defaultValue == null) throw new Error("useColorSliderState requires a value or defaultValue");
+    let [color, setColor] = (0, $93tpS$reactstatelyutils.useControlledState)(value && (0, $83fe1a57d631223b$exports.normalizeColor)(value), defaultValue && (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue), onChange);
+    let sliderState = (0, $93tpS$reactstatelyslider.useSliderState)({
+        ...color.getChannelRange(channel),
+        ...otherProps,
+        // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
+        numberFormatter: null,
+        value: color.getChannelValue(channel),
+        onChange (v) {
+            setColor(color.withChannelValue(channel, v));
+        },
+        onChangeEnd (v) {
+            // onChange will have already been called with the right value, this is just to trigger onChangeEnd
+            if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v));
+        }
+    });
+    let { step: step, pageSize: pageSize } = color.getChannelRange(channel);
+    return {
+        ...sliderState,
+        value: color,
+        setValue (value) {
+            setColor((0, $83fe1a57d631223b$exports.normalizeColor)(value));
+        },
+        getDisplayColor () {
+            switch(channel){
+                case "hue":
+                    return (0, $83fe1a57d631223b$exports.parseColor)(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
+                case "lightness":
+                case "brightness":
+                case "saturation":
+                case "red":
+                case "green":
+                case "blue":
+                    return color.withChannelValue("alpha", 1);
+                case "alpha":
+                    return color;
+                default:
+                    throw new Error("Unknown color channel: " + channel);
+            }
+        },
+        getThumbValueLabel () {
+            return color.formatChannelValue(channel, locale);
+        },
+        step: step,
+        pageSize: pageSize
+    };
+}
+
+
+//# sourceMappingURL=useColorSliderState.main.js.map

package/dist/useColorSliderState.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AA0BM,SAAS,0CAAoB,KAA8B;IAChE,IAAI,WAAC,OAAO,SAAE,KAAK,gBAAE,YAAY,YAAE,QAAQ,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IACtE,IAAI,SAAS,QAAQ,gBAAgB,MACnC,MAAM,IAAI,MAAM;IAGlB,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAE,SAAS,CAAA,GAAA,wCAAa,EAAE,QAAQ,gBAAgB,CAAA,GAAA,wCAAa,EAAE,eAAe;IACzH,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,MAAM,eAAe,CAAC,QAAQ;QACjC,GAAG,UAAU;QACb,8FAA8F;QAC9F,iBAAiB;QACjB,OAAO,MAAM,eAAe,CAAC;QAC7B,UAAS,CAAC;YACR,SAAS,MAAM,gBAAgB,CAAC,SAAS;QAC3C;QACA,aAAY,CAAC;YACX,mGAAmG;YACnG,IAAI,MAAM,WAAW,EACnB,MAAM,WAAW,CAAC,MAAM,gBAAgB,CAAC,SAAS;QAEtD;IACF;IAEA,IAAI,QAAC,IAAI,YAAE,QAAQ,EAAC,GAAG,MAAM,eAAe,CAAC;IAC7C,OAAO;QACL,GAAG,WAAW;QACd,OAAO;QACP,UAAS,KAAK;YACZ,SAAS,CAAA,GAAA,wCAAa,EAAE;QAC1B;QACA;YACE,OAAQ;gBACN,KAAK;oBACH,OAAO,CAAA,GAAA,oCAAS,EAAE,CAAC,IAAI,EAAE,MAAM,eAAe,CAAC,OAAO,YAAY,CAAC;gBACrE,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;oBACH,OAAO,MAAM,gBAAgB,CAAC,SAAS;gBACzC,KAAK;oBACH,OAAO;gBAET;oBACE,MAAM,IAAI,MAAM,4BAA4B;YAChD;QACF;QACA;YACE,OAAO,MAAM,kBAAkB,CAAC,SAAS;QAC3C;cACA;kBACA;IACF;AACF","sources":["packages/@react-stately/color/src/useColorSliderState.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 {Color, ColorSliderProps} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {SliderState, useSliderState} from '@react-stately/slider';\nimport {useControlledState} from '@react-stately/utils';\n\nexport interface ColorSliderState extends SliderState {\n  /** The current color value represented by the color slider. */\n  readonly value: Color,\n  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n  setValue(value: string | Color): void,\n  /** Returns the color that should be displayed in the slider instead of `value` or the optional parameter. */\n  getDisplayColor(): Color\n}\n\n\nexport interface ColorSliderStateOptions extends ColorSliderProps {\n  /** The locale to use for formatting the color channel value. */\n  locale: string\n}\n\n/**\n * Provides state management for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSliderState(props: ColorSliderStateOptions): ColorSliderState {\n  let {channel, value, defaultValue, onChange, locale, ...otherProps} = props;\n  if (value == null && defaultValue == null) {\n    throw new Error('useColorSliderState requires a value or defaultValue');\n  }\n\n  let [color, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);\n  let sliderState = useSliderState({\n    ...color.getChannelRange(channel),\n    ...otherProps,\n    // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.\n    numberFormatter: null,\n    value: color.getChannelValue(channel),\n    onChange(v) {\n      setColor(color.withChannelValue(channel, v));\n    },\n    onChangeEnd(v) {\n      // onChange will have already been called with the right value, this is just to trigger onChangeEnd\n      if (props.onChangeEnd) {\n        props.onChangeEnd(color.withChannelValue(channel, v));\n      }\n    }\n  });\n\n  let {step, pageSize} = color.getChannelRange(channel);\n  return {\n    ...sliderState,\n    value: color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    getDisplayColor() {\n      switch (channel) {\n        case 'hue':\n          return parseColor(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`);\n        case 'lightness':\n        case 'brightness':\n        case 'saturation':\n        case 'red':\n        case 'green':\n        case 'blue':\n          return color.withChannelValue('alpha', 1);\n        case 'alpha': {\n          return color;\n        }\n        default:\n          throw new Error('Unknown color channel: ' + channel);\n      }\n    },\n    getThumbValueLabel() {\n      return color.formatChannelValue(channel, locale);\n    },\n    step,\n    pageSize\n  };\n}\n"],"names":[],"version":3,"file":"useColorSliderState.main.js.map"}

package/dist/useColorSliderState.mjs

@@ -0,0 +1,70 @@
+import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
+import {useSliderState as $1Eavr$useSliderState} from "@react-stately/slider";
+import {useControlledState as $1Eavr$useControlledState} from "@react-stately/utils";
+
+/*
+ * 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 $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
+    let { channel: channel, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, ...otherProps } = props;
+    if (value == null && defaultValue == null) throw new Error("useColorSliderState requires a value or defaultValue");
+    let [color, setColor] = (0, $1Eavr$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let sliderState = (0, $1Eavr$useSliderState)({
+        ...color.getChannelRange(channel),
+        ...otherProps,
+        // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
+        numberFormatter: null,
+        value: color.getChannelValue(channel),
+        onChange (v) {
+            setColor(color.withChannelValue(channel, v));
+        },
+        onChangeEnd (v) {
+            // onChange will have already been called with the right value, this is just to trigger onChangeEnd
+            if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v));
+        }
+    });
+    let { step: step, pageSize: pageSize } = color.getChannelRange(channel);
+    return {
+        ...sliderState,
+        value: color,
+        setValue (value) {
+            setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
+        },
+        getDisplayColor () {
+            switch(channel){
+                case "hue":
+                    return (0, $799cddbef784668f$export$6e865ea70d7724f)(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
+                case "lightness":
+                case "brightness":
+                case "saturation":
+                case "red":
+                case "green":
+                case "blue":
+                    return color.withChannelValue("alpha", 1);
+                case "alpha":
+                    return color;
+                default:
+                    throw new Error("Unknown color channel: " + channel);
+            }
+        },
+        getThumbValueLabel () {
+            return color.formatChannelValue(channel, locale);
+        },
+        step: step,
+        pageSize: pageSize
+    };
+}
+
+
+export {$25a25ac0d1624665$export$57bc203e1c9c6d44 as useColorSliderState};
+//# sourceMappingURL=useColorSliderState.mjs.map