@react-stately/color 3.9.4 → 3.10.0

package/dist/useColorChannelFieldState.module.js

@@ -1,60 +0,0 @@
-import {useColor as $aa90ad8b2b1d015f$export$5aadd9c0606af5c2} from "./useColor.module.js";
-import {useNumberFieldState as $52OvP$useNumberFieldState} from "@react-stately/numberfield";
-import {useControlledState as $52OvP$useControlledState} from "@react-stately/utils";
-import {useState as $52OvP$useState, useMemo as $52OvP$useMemo} from "react";
-
-
-
-
-
-function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
-    let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
-    let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
-    let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue);
-    let [colorValue, setColor] = (0, $52OvP$useControlledState)(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
-    let color = $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace);
-    let [initialColorValue] = (0, $52OvP$useState)(colorValue);
-    let defaultColorValue = initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialColorValue;
-    let defaultColor = $31a863bb88e75dd6$var$useConvertColor(defaultColorValue, colorSpace);
-    let value = color.getChannelValue(channel);
-    let range = color.getChannelRange(channel);
-    let formatOptions = (0, $52OvP$useMemo)(()=>color.getChannelFormatOptions(channel), [
-        color,
-        channel
-    ]);
-    let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;
-    let numberFieldState = (0, $52OvP$useNumberFieldState)({
-        locale: locale,
-        value: colorValue === null ? NaN : value / multiplier,
-        defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,
-        onChange: (v)=>{
-            if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
-            else setColor(null);
-        },
-        minValue: range.minValue / multiplier,
-        maxValue: range.maxValue / multiplier,
-        step: range.step / multiplier,
-        formatOptions: formatOptions
-    });
-    return {
-        ...numberFieldState,
-        colorValue: color,
-        defaultColorValue: defaultColorValue,
-        setColorValue: setColor
-    };
-}
-function $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace) {
-    let black = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)('#000');
-    return (0, $52OvP$useMemo)(()=>{
-        let nonNullColorValue = colorValue || black;
-        return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
-    }, [
-        black,
-        colorValue,
-        colorSpace
-    ]);
-}
-
-
-export {$31a863bb88e75dd6$export$b9fc0d69c9190c4a as useColorChannelFieldState};
-//# sourceMappingURL=useColorChannelFieldState.module.js.map

package/dist/useColorChannelFieldState.module.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;AA4BO,SAAS,0CAA0B,KAAoC;IAC5E,IAAI,WAAC,OAAO,cAAE,UAAU,UAAE,MAAM,EAAC,GAAG;IACpC,IAAI,eAAe,CAAA,GAAA,yCAAO,EAAE,MAAM,KAAK;IACvC,IAAI,sBAAsB,CAAA,GAAA,yCAAO,EAAE,MAAM,YAAY;IACrD,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAE,cAAc,gCAAA,iCAAA,sBAAuB,MAAM,MAAM,QAAQ;IACzG,IAAI,QAAQ,sCAAgB,YAAY;IACxC,IAAI,CAAC,kBAAkB,GAAG,CAAA,GAAA,eAAO,EAAE;IACnC,IAAI,oBAAoB,gCAAA,iCAAA,sBAAuB;IAC/C,IAAI,eAAe,sCAAgB,mBAAmB;IACtD,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,gBAAgB,CAAA,GAAA,cAAM,EAAE,IAAM,MAAM,uBAAuB,CAAC,UAAU;QAAC;QAAO;KAAQ;IAC1F,IAAI,aAAa,cAAc,KAAK,KAAK,aAAa,MAAM,QAAQ,KAAK,MAAM,MAAM;IAErF,IAAI,mBAAmB,CAAA,GAAA,0BAAkB,EAAE;gBACzC;QACA,OAAO,eAAe,OAAO,MAAM,QAAQ;QAC3C,cAAc,sBAAsB,OAAO,MAAM,aAAa,eAAe,CAAC,WAAW;QACzF,UAAU,CAAC;YACT,IAAI,CAAC,OAAO,KAAK,CAAC,IAChB,SAAS,MAAM,gBAAgB,CAAC,SAAS,IAAI;iBAE7C,SAAS;QAEb;QACA,UAAU,MAAM,QAAQ,GAAG;QAC3B,UAAU,MAAM,QAAQ,GAAG;QAC3B,MAAM,MAAM,IAAI,GAAG;uBACnB;IACF;IAEA,OAAO;QACL,GAAG,gBAAgB;QACnB,YAAY;2BACZ;QACA,eAAe;IACjB;AACF;AAEA,SAAS,sCAAgB,UAAwB,EAAE,UAAyC;IAC1F,IAAI,QAAQ,CAAA,GAAA,yCAAO,EAAE;IACrB,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,IAAI,oBAAoB,cAAc;QACtC,OAAO,cAAc,oBAAoB,kBAAkB,QAAQ,CAAC,cAAc;IACpF,GAAG;QAAC;QAAO;QAAY;KAAW;AACpC","sources":["packages/@react-stately/color/src/useColorChannelFieldState.ts"],"sourcesContent":["import {Color, ColorChannel, ColorFieldProps, ColorSpace} from '@react-types/color';\nimport {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\n\nexport interface ColorChannelFieldProps extends ColorFieldProps {\n  colorSpace?: ColorSpace,\n  channel: ColorChannel\n}\n\nexport interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {\n  locale: string\n}\n\nexport interface ColorChannelFieldState extends NumberFieldState {\n  /** The current value of the field. */\n  colorValue: Color,\n  /** The default value of the field. */\n  defaultColorValue: Color | null,\n  /** Sets the color value of the field. */\n  setColorValue(value: Color | null): void\n}\n\n/**\n * Provides state management for a color channel field, allowing users to edit the\n * value of an individual color channel.\n */\nexport function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState {\n  let {channel, colorSpace, locale} = props;\n  let initialValue = useColor(props.value);\n  let initialDefaultValue = useColor(props.defaultValue);\n  let [colorValue, setColor] = useControlledState(initialValue, initialDefaultValue ?? null, props.onChange);\n  let color = useConvertColor(colorValue, colorSpace);\n  let [initialColorValue] = useState(colorValue);\n  let defaultColorValue = initialDefaultValue ?? initialColorValue;\n  let defaultColor = useConvertColor(defaultColorValue, colorSpace);\n  let value = color.getChannelValue(channel);\n  let range = color.getChannelRange(channel);\n  let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [color, channel]);\n  let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;\n\n  let numberFieldState = useNumberFieldState({\n    locale,\n    value: colorValue === null ? NaN : value / multiplier,\n    defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,\n    onChange: (v) => {\n      if (!Number.isNaN(v)) {\n        setColor(color.withChannelValue(channel, v * multiplier));\n      } else {\n        setColor(null);\n      }\n    },\n    minValue: range.minValue / multiplier,\n    maxValue: range.maxValue / multiplier,\n    step: range.step / multiplier,\n    formatOptions\n  });\n\n  return {\n    ...numberFieldState,\n    colorValue: color,\n    defaultColorValue,\n    setColorValue: setColor\n  };\n}\n\nfunction useConvertColor(colorValue: Color | null, colorSpace: ColorSpace | null | undefined) {\n  let black = useColor('#000')!;\n  return useMemo(() => {\n    let nonNullColorValue = colorValue || black;\n    return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;\n  }, [black, colorValue, colorSpace]);\n}\n"],"names":[],"version":3,"file":"useColorChannelFieldState.module.js.map"}

package/dist/useColorFieldState.main.js

@@ -1,142 +0,0 @@
-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 initialDefaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(defaultValue);
-    let [colorValue, setColorValue] = (0, $41neA$reactstatelyutils.useControlledState)((0, $f8b3be23ba4462b1$exports.useColor)(value), initialDefaultValue, onChange);
-    let [initialValue] = (0, $41neA$react.useState)(colorValue);
-    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  {
-            color = null;
-        }
-        return color;
-    }, [
-        inputValue
-    ]);
-    let commit = ()=>{
-        // Set to empty state if input value is empty
-        if (!inputValue.length) {
-            safelySetColorValue(null);
-            if (value === undefined || colorValue === null) setInputValue('');
-            else setInputValue(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);
-        validation.commitValidation();
-    };
-    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,
-        defaultColorValue: initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialValue,
-        setColorValue: setColorValue,
-        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

@@ -1 +0,0 @@
-{"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 | null,\n  /** The default value of the color field. */\n  readonly defaultColorValue: Color | null,\n  /** Sets the color value of the field. */\n  setColorValue(value: Color | null): void,\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 initialDefaultValue = useColor(defaultValue);\n  let [colorValue, setColorValue] = useControlledState<Color | null>(useColor(value), initialDefaultValue!, onChange);\n  let [initialValue] = useState(colorValue);\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 | null) => {\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 {\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      if (value === undefined || colorValue === null) {\n        setInputValue('');\n      } else {\n        setInputValue(colorValue.toString('hex'));\n      }\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    validation.commitValidation();\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    defaultColorValue: initialDefaultValue ?? initialValue,\n    setColorValue,\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

@@ -1,137 +0,0 @@
-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 initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(defaultValue);
-    let [colorValue, setColorValue] = (0, $aP5W6$useControlledState)((0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(value), initialDefaultValue, onChange);
-    let [initialValue] = (0, $aP5W6$useState)(colorValue);
-    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  {
-            color = null;
-        }
-        return color;
-    }, [
-        inputValue
-    ]);
-    let commit = ()=>{
-        // Set to empty state if input value is empty
-        if (!inputValue.length) {
-            safelySetColorValue(null);
-            if (value === undefined || colorValue === null) setInputValue('');
-            else setInputValue(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);
-        validation.commitValidation();
-    };
-    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,
-        defaultColorValue: initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialValue,
-        setColorValue: setColorValue,
-        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

@@ -1,137 +0,0 @@
-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 initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(defaultValue);
-    let [colorValue, setColorValue] = (0, $aP5W6$useControlledState)((0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(value), initialDefaultValue, onChange);
-    let [initialValue] = (0, $aP5W6$useState)(colorValue);
-    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  {
-            color = null;
-        }
-        return color;
-    }, [
-        inputValue
-    ]);
-    let commit = ()=>{
-        // Set to empty state if input value is empty
-        if (!inputValue.length) {
-            safelySetColorValue(null);
-            if (value === undefined || colorValue === null) setInputValue('');
-            else setInputValue(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);
-        validation.commitValidation();
-    };
-    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,
-        defaultColorValue: initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialValue,
-        setColorValue: setColorValue,
-        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

@@ -1 +0,0 @@
-{"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 | null,\n  /** The default value of the color field. */\n  readonly defaultColorValue: Color | null,\n  /** Sets the color value of the field. */\n  setColorValue(value: Color | null): void,\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 initialDefaultValue = useColor(defaultValue);\n  let [colorValue, setColorValue] = useControlledState<Color | null>(useColor(value), initialDefaultValue!, onChange);\n  let [initialValue] = useState(colorValue);\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 | null) => {\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 {\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      if (value === undefined || colorValue === null) {\n        setInputValue('');\n      } else {\n        setInputValue(colorValue.toString('hex'));\n      }\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    validation.commitValidation();\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    defaultColorValue: initialDefaultValue ?? initialValue,\n    setColorValue,\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/useColorPickerState.main.js

@@ -1,27 +0,0 @@
-var $83fe1a57d631223b$exports = require("./Color.main.js");
-var $f8b3be23ba4462b1$exports = require("./useColor.main.js");
-var $1Pz5H$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, "useColorPickerState", () => $f31788ea48a5c383$export$dc6b73b623f8645f);
-
-
-
-function $f31788ea48a5c383$export$dc6b73b623f8645f(props) {
-    let value = (0, $f8b3be23ba4462b1$exports.useColor)(props.value);
-    let defaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.defaultValue || '#000000');
-    let [color, setColor] = (0, $1Pz5H$reactstatelyutils.useControlledState)(value || undefined, defaultValue, props.onChange);
-    return {
-        color: color,
-        setColor (color) {
-            if (color != null) setColor(color || (0, $83fe1a57d631223b$exports.parseColor)('#000000'));
-        }
-    };
-}
-
-
-//# sourceMappingURL=useColorPickerState.main.js.map

package/dist/useColorPickerState.main.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;AAeO,SAAS,0CAAoB,KAAuB;IACzD,IAAI,QAAQ,CAAA,GAAA,kCAAO,EAAE,MAAM,KAAK;IAChC,IAAI,eAAe,CAAA,GAAA,kCAAO,EAAE,MAAM,YAAY,IAAI;IAClD,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAE,SAAS,WAAW,cAAc,MAAM,QAAQ;IAE3F,OAAO;eACL;QACA,UAAS,KAAK;YACZ,IAAI,SAAS,MACX,SAAS,SAAS,CAAA,GAAA,oCAAS,EAAE;QAEjC;IACF;AACF","sources":["packages/@react-stately/color/src/useColorPickerState.ts"],"sourcesContent":["import {Color} from '@react-types/color';\nimport {parseColor} from './Color';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {ValueBase} from '@react-types/shared';\n\nexport interface ColorPickerProps extends ValueBase<string | Color, Color> {}\n\nexport interface ColorPickerState {\n  /** The current color value of the color picker. */\n  color: Color,\n  /** Sets the current color value of the color picker. */\n  setColor(color: Color | null): void\n}\n\nexport function useColorPickerState(props: ColorPickerProps): ColorPickerState {\n  let value = useColor(props.value);\n  let defaultValue = useColor(props.defaultValue || '#000000')!;\n  let [color, setColor] = useControlledState(value || undefined, defaultValue, props.onChange);\n  \n  return {\n    color,\n    setColor(color) {\n      if (color != null) {\n        setColor(color || parseColor('#000000'));\n      }\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorPickerState.main.js.map"}

package/dist/useColorPickerState.mjs

@@ -1,22 +0,0 @@
-import {parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
-import {useColor as $aa90ad8b2b1d015f$export$5aadd9c0606af5c2} from "./useColor.mjs";
-import {useControlledState as $5GESt$useControlledState} from "@react-stately/utils";
-
-
-
-
-function $309d2b7669014898$export$dc6b73b623f8645f(props) {
-    let value = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
-    let defaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue || '#000000');
-    let [color, setColor] = (0, $5GESt$useControlledState)(value || undefined, defaultValue, props.onChange);
-    return {
-        color: color,
-        setColor (color) {
-            if (color != null) setColor(color || (0, $799cddbef784668f$export$6e865ea70d7724f)('#000000'));
-        }
-    };
-}
-
-
-export {$309d2b7669014898$export$dc6b73b623f8645f as useColorPickerState};
-//# sourceMappingURL=useColorPickerState.module.js.map

package/dist/useColorPickerState.module.js

@@ -1,22 +0,0 @@
-import {parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
-import {useColor as $aa90ad8b2b1d015f$export$5aadd9c0606af5c2} from "./useColor.module.js";
-import {useControlledState as $5GESt$useControlledState} from "@react-stately/utils";
-
-
-
-
-function $309d2b7669014898$export$dc6b73b623f8645f(props) {
-    let value = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
-    let defaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue || '#000000');
-    let [color, setColor] = (0, $5GESt$useControlledState)(value || undefined, defaultValue, props.onChange);
-    return {
-        color: color,
-        setColor (color) {
-            if (color != null) setColor(color || (0, $799cddbef784668f$export$6e865ea70d7724f)('#000000'));
-        }
-    };
-}
-
-
-export {$309d2b7669014898$export$dc6b73b623f8645f as useColorPickerState};
-//# sourceMappingURL=useColorPickerState.module.js.map

package/dist/useColorPickerState.module.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;AAeO,SAAS,0CAAoB,KAAuB;IACzD,IAAI,QAAQ,CAAA,GAAA,yCAAO,EAAE,MAAM,KAAK;IAChC,IAAI,eAAe,CAAA,GAAA,yCAAO,EAAE,MAAM,YAAY,IAAI;IAClD,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAE,SAAS,WAAW,cAAc,MAAM,QAAQ;IAE3F,OAAO;eACL;QACA,UAAS,KAAK;YACZ,IAAI,SAAS,MACX,SAAS,SAAS,CAAA,GAAA,wCAAS,EAAE;QAEjC;IACF;AACF","sources":["packages/@react-stately/color/src/useColorPickerState.ts"],"sourcesContent":["import {Color} from '@react-types/color';\nimport {parseColor} from './Color';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {ValueBase} from '@react-types/shared';\n\nexport interface ColorPickerProps extends ValueBase<string | Color, Color> {}\n\nexport interface ColorPickerState {\n  /** The current color value of the color picker. */\n  color: Color,\n  /** Sets the current color value of the color picker. */\n  setColor(color: Color | null): void\n}\n\nexport function useColorPickerState(props: ColorPickerProps): ColorPickerState {\n  let value = useColor(props.value);\n  let defaultValue = useColor(props.defaultValue || '#000000')!;\n  let [color, setColor] = useControlledState(value || undefined, defaultValue, props.onChange);\n  \n  return {\n    color,\n    setColor(color) {\n      if (color != null) {\n        setColor(color || parseColor('#000000'));\n      }\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorPickerState.module.js.map"}