@react-stately/color 3.6.2-nightly.4664 → 3.6.2-nightly.4666

package/dist/useColorAreaState.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/color/src/useColorAreaState.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 {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {Color, ColorAreaProps, ColorChannel} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorAreaState {\n  /** The current color value displayed by the color area. */\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\n  /** The current value of the horizontal axis channel displayed by the color area. */\n  xValue: number,\n  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n  setXValue(value: number): void,\n\n  /** The current value of the vertical axis channel displayed by the color area. */\n  yValue: number,\n  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n  setYValue(value: number): void,\n\n  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n  setColorFromPoint(x: number, y: number): void,\n  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n  getThumbPosition(): {x: number, y: number},\n\n  /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n  incrementX(stepSize?: number): void,\n  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n  decrementX(stepSize?: number): void,\n\n  /** Increments the value of the vertical axis channel by the channel step or page amount. */\n  incrementY(stepSize?: number): void,\n  /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n  decrementY(stepSize?: number): void,\n\n  /** Whether the color area is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color area is being dragged. */\n  setDragging(value: boolean): void,\n\n  /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n  /** The step value of the xChannel, used when incrementing and decrementing. */\n  xChannelStep: number,\n  /** The step value of the yChannel, used when incrementing and decrementing. */\n  yChannelStep: number,\n  /** The page step value of the xChannel, used when incrementing and decrementing. */\n  xChannelPageStep: number,\n  /** The page step value of the yChannel, used when incrementing and decrementing. */\n  yChannelPageStep: number,\n\n  /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n  getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n  let {\n    value,\n    defaultValue,\n    colorSpace,\n    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n\n  let [colorValue, setColorState] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n  let valueRef = useRef(color);\n  let setColor = (color: Color) => {\n    valueRef.current = color;\n    setColorState(color);\n  };\n\n  let channels = useMemo(() =>\n    color.getColorSpaceAxes({xChannel, yChannel}),\n    [color, xChannel, yChannel]\n  );\n\n  let xChannelRange = color.getChannelRange(channels.xChannel);\n  let yChannelRange = color.getChannelRange(channels.yChannel);\n  let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;\n  let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;\n\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let xValue = color.getChannelValue(channels.xChannel);\n  let yValue = color.getChannelValue(channels.yChannel);\n  let setXValue = (v: number) => {\n    if (v === xValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.xChannel, v);\n    setColor(newColor);\n  };\n  let setYValue = (v: number) => {\n    if (v === yValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.yChannel, v);\n    setColor(newColor);\n  };\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    value: color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    xValue,\n    setXValue,\n    yValue,\n    setYValue,\n    setColorFromPoint(x: number, y: number) {\n      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n      let newColor:Color;\n      if (newXValue !== xValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n        newColor = color.withChannelValue(channels.xChannel, newXValue);\n      }\n      if (newYValue !== yValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n      }\n      if (newColor) {\n        setColor(newColor);\n      }\n    },\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX);\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n      return {x, y};\n    },\n    incrementX(stepSize) {\n      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n    },\n    incrementY(stepSize) {\n      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n    },\n    decrementX(stepSize) {\n      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n    },\n    decrementY(stepSize) {\n      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return color.withChannelValue('alpha', 1);\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.main.js.map"}
+{"mappings":"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","sources":["packages/@react-stately/color/src/useColorAreaState.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 {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {Color, ColorAreaProps, ColorChannel} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorAreaState {\n  /** The current color value displayed by the color area. */\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\n  /** The current value of the horizontal axis channel displayed by the color area. */\n  xValue: number,\n  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n  setXValue(value: number): void,\n\n  /** The current value of the vertical axis channel displayed by the color area. */\n  yValue: number,\n  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n  setYValue(value: number): void,\n\n  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n  setColorFromPoint(x: number, y: number): void,\n  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n  getThumbPosition(): {x: number, y: number},\n\n  /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n  incrementX(stepSize?: number): void,\n  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n  decrementX(stepSize?: number): void,\n\n  /** Increments the value of the vertical axis channel by the channel step or page amount. */\n  incrementY(stepSize?: number): void,\n  /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n  decrementY(stepSize?: number): void,\n\n  /** Whether the color area is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color area is being dragged. */\n  setDragging(value: boolean): void,\n\n  /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n  /** The step value of the xChannel, used when incrementing and decrementing. */\n  xChannelStep: number,\n  /** The step value of the yChannel, used when incrementing and decrementing. */\n  yChannelStep: number,\n  /** The page step value of the xChannel, used when incrementing and decrementing. */\n  xChannelPageStep: number,\n  /** The page step value of the yChannel, used when incrementing and decrementing. */\n  yChannelPageStep: number,\n\n  /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n  getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n  let {\n    value,\n    defaultValue,\n    colorSpace,\n    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n  if (value) {\n    value = normalizeColor(value);\n  }\n  if (defaultValue) {\n    defaultValue = normalizeColor(defaultValue);\n  }\n\n  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default\n  let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n  let valueRef = useRef(color);\n  let setColor = (color: Color) => {\n    valueRef.current = color;\n    setColorState(color);\n  };\n\n  let channels = useMemo(() =>\n    color.getColorSpaceAxes({xChannel, yChannel}),\n    [color, xChannel, yChannel]\n  );\n\n  let xChannelRange = color.getChannelRange(channels.xChannel);\n  let yChannelRange = color.getChannelRange(channels.yChannel);\n  let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;\n  let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;\n\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let xValue = color.getChannelValue(channels.xChannel);\n  let yValue = color.getChannelValue(channels.yChannel);\n  let setXValue = (v: number) => {\n    if (v === xValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.xChannel, v);\n    setColor(newColor);\n  };\n  let setYValue = (v: number) => {\n    if (v === yValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.yChannel, v);\n    setColor(newColor);\n  };\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    value: color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    xValue,\n    setXValue,\n    yValue,\n    setYValue,\n    setColorFromPoint(x: number, y: number) {\n      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n      let newColor: Color | undefined;\n      if (newXValue !== xValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n        newColor = color.withChannelValue(channels.xChannel, newXValue);\n      }\n      if (newYValue !== yValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n      }\n      if (newColor) {\n        setColor(newColor);\n      }\n    },\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX);\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n      return {x, y};\n    },\n    incrementX(stepSize = 1) {\n      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n    },\n    incrementY(stepSize = 1) {\n      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n    },\n    decrementX(stepSize = 1) {\n      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n    },\n    decrementY(stepSize = 1) {\n      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return color.withChannelValue('alpha', 1);\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.main.js.map"}

package/dist/useColorAreaState.mjs

@@ -19,7 +19,10 @@ const $6e14a98a7f67141d$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea
 function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
     let { value: value, defaultValue: defaultValue, colorSpace: colorSpace, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
     if (!value && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
-    let [colorValue, setColorState] = (0, $5ShDH$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    if (value) value = (0, $799cddbef784668f$export$4cde5df63f53f473)(value);
+    if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
+    // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
+    let [colorValue, setColorState] = (0, $5ShDH$useControlledState)(value, defaultValue, onChange);
     let color = (0, $5ShDH$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
         colorValue,
         colorSpace
@@ -93,16 +96,16 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
                 y: y
             };
         },
-        incrementX (stepSize) {
+        incrementX (stepSize = 1) {
             setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $5ShDH$snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
         },
-        incrementY (stepSize) {
+        incrementY (stepSize = 1) {
             setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $5ShDH$snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
         },
-        decrementX (stepSize) {
+        decrementX (stepSize = 1) {
             setXValue((0, $5ShDH$snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
         },
-        decrementY (stepSize) {
+        decrementY (stepSize = 1) {
             setYValue((0, $5ShDH$snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
         },
         setDragging (isDragging) {

package/dist/useColorAreaState.module.js

@@ -19,7 +19,10 @@ const $6e14a98a7f67141d$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea
 function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
     let { value: value, defaultValue: defaultValue, colorSpace: colorSpace, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
     if (!value && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
-    let [colorValue, setColorState] = (0, $5ShDH$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    if (value) value = (0, $799cddbef784668f$export$4cde5df63f53f473)(value);
+    if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
+    // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
+    let [colorValue, setColorState] = (0, $5ShDH$useControlledState)(value, defaultValue, onChange);
     let color = (0, $5ShDH$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
         colorValue,
         colorSpace
@@ -93,16 +96,16 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
                 y: y
             };
         },
-        incrementX (stepSize) {
+        incrementX (stepSize = 1) {
             setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $5ShDH$snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
         },
-        incrementY (stepSize) {
+        incrementY (stepSize = 1) {
             setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $5ShDH$snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
         },
-        decrementX (stepSize) {
+        decrementX (stepSize = 1) {
             setXValue((0, $5ShDH$snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
         },
-        decrementY (stepSize) {
+        decrementY (stepSize = 1) {
             setYValue((0, $5ShDH$snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
         },
         setDragging (isDragging) {

package/dist/useColorAreaState.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/color/src/useColorAreaState.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 {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {Color, ColorAreaProps, ColorChannel} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorAreaState {\n  /** The current color value displayed by the color area. */\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\n  /** The current value of the horizontal axis channel displayed by the color area. */\n  xValue: number,\n  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n  setXValue(value: number): void,\n\n  /** The current value of the vertical axis channel displayed by the color area. */\n  yValue: number,\n  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n  setYValue(value: number): void,\n\n  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n  setColorFromPoint(x: number, y: number): void,\n  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n  getThumbPosition(): {x: number, y: number},\n\n  /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n  incrementX(stepSize?: number): void,\n  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n  decrementX(stepSize?: number): void,\n\n  /** Increments the value of the vertical axis channel by the channel step or page amount. */\n  incrementY(stepSize?: number): void,\n  /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n  decrementY(stepSize?: number): void,\n\n  /** Whether the color area is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color area is being dragged. */\n  setDragging(value: boolean): void,\n\n  /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n  /** The step value of the xChannel, used when incrementing and decrementing. */\n  xChannelStep: number,\n  /** The step value of the yChannel, used when incrementing and decrementing. */\n  yChannelStep: number,\n  /** The page step value of the xChannel, used when incrementing and decrementing. */\n  xChannelPageStep: number,\n  /** The page step value of the yChannel, used when incrementing and decrementing. */\n  yChannelPageStep: number,\n\n  /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n  getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n  let {\n    value,\n    defaultValue,\n    colorSpace,\n    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n\n  let [colorValue, setColorState] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n  let valueRef = useRef(color);\n  let setColor = (color: Color) => {\n    valueRef.current = color;\n    setColorState(color);\n  };\n\n  let channels = useMemo(() =>\n    color.getColorSpaceAxes({xChannel, yChannel}),\n    [color, xChannel, yChannel]\n  );\n\n  let xChannelRange = color.getChannelRange(channels.xChannel);\n  let yChannelRange = color.getChannelRange(channels.yChannel);\n  let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;\n  let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;\n\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let xValue = color.getChannelValue(channels.xChannel);\n  let yValue = color.getChannelValue(channels.yChannel);\n  let setXValue = (v: number) => {\n    if (v === xValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.xChannel, v);\n    setColor(newColor);\n  };\n  let setYValue = (v: number) => {\n    if (v === yValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.yChannel, v);\n    setColor(newColor);\n  };\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    value: color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    xValue,\n    setXValue,\n    yValue,\n    setYValue,\n    setColorFromPoint(x: number, y: number) {\n      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n      let newColor:Color;\n      if (newXValue !== xValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n        newColor = color.withChannelValue(channels.xChannel, newXValue);\n      }\n      if (newYValue !== yValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n      }\n      if (newColor) {\n        setColor(newColor);\n      }\n    },\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX);\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n      return {x, y};\n    },\n    incrementX(stepSize) {\n      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n    },\n    incrementY(stepSize) {\n      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n    },\n    decrementX(stepSize) {\n      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n    },\n    decrementY(stepSize) {\n      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return color.withChannelValue('alpha', 1);\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.module.js.map"}
+{"mappings":"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","sources":["packages/@react-stately/color/src/useColorAreaState.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 {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {Color, ColorAreaProps, ColorChannel} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorAreaState {\n  /** The current color value displayed by the color area. */\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\n  /** The current value of the horizontal axis channel displayed by the color area. */\n  xValue: number,\n  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n  setXValue(value: number): void,\n\n  /** The current value of the vertical axis channel displayed by the color area. */\n  yValue: number,\n  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n  setYValue(value: number): void,\n\n  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n  setColorFromPoint(x: number, y: number): void,\n  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n  getThumbPosition(): {x: number, y: number},\n\n  /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n  incrementX(stepSize?: number): void,\n  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n  decrementX(stepSize?: number): void,\n\n  /** Increments the value of the vertical axis channel by the channel step or page amount. */\n  incrementY(stepSize?: number): void,\n  /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n  decrementY(stepSize?: number): void,\n\n  /** Whether the color area is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color area is being dragged. */\n  setDragging(value: boolean): void,\n\n  /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n  /** The step value of the xChannel, used when incrementing and decrementing. */\n  xChannelStep: number,\n  /** The step value of the yChannel, used when incrementing and decrementing. */\n  yChannelStep: number,\n  /** The page step value of the xChannel, used when incrementing and decrementing. */\n  xChannelPageStep: number,\n  /** The page step value of the yChannel, used when incrementing and decrementing. */\n  yChannelPageStep: number,\n\n  /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n  getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n  let {\n    value,\n    defaultValue,\n    colorSpace,\n    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n  if (value) {\n    value = normalizeColor(value);\n  }\n  if (defaultValue) {\n    defaultValue = normalizeColor(defaultValue);\n  }\n\n  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default\n  let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n  let valueRef = useRef(color);\n  let setColor = (color: Color) => {\n    valueRef.current = color;\n    setColorState(color);\n  };\n\n  let channels = useMemo(() =>\n    color.getColorSpaceAxes({xChannel, yChannel}),\n    [color, xChannel, yChannel]\n  );\n\n  let xChannelRange = color.getChannelRange(channels.xChannel);\n  let yChannelRange = color.getChannelRange(channels.yChannel);\n  let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;\n  let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;\n\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let xValue = color.getChannelValue(channels.xChannel);\n  let yValue = color.getChannelValue(channels.yChannel);\n  let setXValue = (v: number) => {\n    if (v === xValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.xChannel, v);\n    setColor(newColor);\n  };\n  let setYValue = (v: number) => {\n    if (v === yValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.yChannel, v);\n    setColor(newColor);\n  };\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    value: color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    xValue,\n    setXValue,\n    yValue,\n    setYValue,\n    setColorFromPoint(x: number, y: number) {\n      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n      let newColor: Color | undefined;\n      if (newXValue !== xValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n        newColor = color.withChannelValue(channels.xChannel, newXValue);\n      }\n      if (newYValue !== yValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n      }\n      if (newColor) {\n        setColor(newColor);\n      }\n    },\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX);\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n      return {x, y};\n    },\n    incrementX(stepSize = 1) {\n      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n    },\n    incrementY(stepSize = 1) {\n      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n    },\n    decrementX(stepSize = 1) {\n      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n    },\n    decrementY(stepSize = 1) {\n      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return color.withChannelValue('alpha', 1);\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.module.js.map"}

package/dist/useColorFieldState.main.js

@@ -70,7 +70,8 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
         // Set to empty state if input value is empty
         if (!inputValue.length) {
             safelySetColorValue(null);
-            setInputValue(value === undefined ? '' : colorValue.toString('hex'));
+            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

package/dist/useColorFieldState.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA2CD,MAAM,kCAAY,CAAA,GAAA,oCAAS,EAAE;AAC7B,MAAM,kCAAY,CAAA,GAAA,oCAAS,EAAE;AAC7B,MAAM,sCAAgB,gCAAU,QAAQ;AACxC,MAAM,sCAAgB,gCAAU,QAAQ;AAMjC,SAAS,0CACd,KAAsB;IAEtB,IAAI,SACF,KAAK,gBACL,YAAY,YACZ,QAAQ,EACT,GAAG;IACJ,IAAI,QAAC,IAAI,EAAC,GAAG,gCAAU,eAAe,CAAC;IAEvC,IAAI,eAAe,CAAA,GAAA,kCAAO,EAAE;IAC5B,IAAI,sBAAsB,CAAA,GAAA,kCAAO,EAAE;IACnC,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,2CAAiB,EAAS,cAAc,qBAAqB;IAC/F,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,qBAAO,EAAE,IAAM,AAAC,CAAA,SAAS,YAAW,KAAM,aAAa,WAAW,QAAQ,CAAC,SAAS;IAEtH,IAAI,aAAa,CAAA,GAAA,8CAAqB,EAAE;QACtC,GAAG,KAAK;QACR,OAAO;IACT;IAEA,IAAI,sBAAsB,CAAC;QACzB,IAAI,CAAC,cAAc,CAAC,UAAU;YAC5B,cAAc;YACd;QACF;QACA,IAAI,SAAS,QAAQ,OAAO,WAAW,QAAQ,IAAI;YACjD,cAAc;YACd;QACF;IACF;IAEA,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAE;IACzC,IAAI,cAAc,YAAY;QAC5B,cAAc,aAAa,WAAW,QAAQ,CAAC,SAAS;QACxD,aAAa;IACf;IAEA,IAAI,cAAc,CAAA,GAAA,oBAAM,EAAE;QACxB,IAAI;QACJ,IAAI;YACF,QAAQ,CAAA,GAAA,oCAAS,EAAE,WAAW,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,EAAE,WAAW,CAAC;QAC/E,EAAE,OAAO,KAAK;YACZ,QAAQ;QACV;QACA,OAAO;IACT,GAAG;QAAC;KAAW;IAEf,IAAI,SAAS;QACX,6CAA6C;QAC7C,IAAI,CAAC,WAAW,MAAM,EAAE;YACtB,oBAAoB;YACpB,cAAc,UAAU,YAAY,KAAK,WAAW,QAAQ,CAAC;YAC7D;QACF;QAEA,iFAAiF;QACjF,IAAI,eAAe,MAAM;YACvB,cAAc,aAAa,WAAW,QAAQ,CAAC,SAAS;YACxD;QACF;QAEA,oBAAoB;QACpB,yGAAyG;QACzG,IAAI,gBAAgB;QACpB,IAAI,YACF,gBAAgB,WAAW,QAAQ,CAAC;QAEtC,cAAc;IAChB;IAEA,IAAI,YAAY;QACd,IAAI,WAAW,oCAAc,aAAa;QAC1C,2EAA2E;QAC3E,yCAAyC;QACzC,+FAA+F;QAC/F,6GAA6G;QAC7G,IAAI,aAAa,YACf,cAAc,SAAS,QAAQ,CAAC;QAElC,oBAAoB;QACpB,WAAW,gBAAgB;IAC7B;IACA,IAAI,YAAY;QACd,IAAI,WAAW,oCAAc,aAAa,CAAC;QAC3C,2EAA2E;QAC3E,yCAAyC;QACzC,+FAA+F;QAC/F,6GAA6G;QAC7G,IAAI,aAAa,YACf,cAAc,SAAS,QAAQ,CAAC;QAElC,oBAAoB;QACpB,WAAW,gBAAgB;IAC7B;IACA,IAAI,iBAAiB,IAAM,oBAAoB;IAC/C,IAAI,iBAAiB,IAAM,oBAAoB;IAE/C,IAAI,WAAW,CAAC;YAAoC;eAAlB,UAAU,MAAM,CAAC,GAAC,eAAA,MAAM,KAAK,CAAC,mCAAZ,mCAAA,YAAmC,CAAC,EAAE;;IAE1F,OAAO;QACL,GAAG,UAAU;kBACb;oBACA;oBACA;uBACA;gBACA;mBACA;wBACA;mBACA;wBACA;IACF;AACF;AAEA,SAAS,oCAAc,KAAY,EAAE,IAAY;IAC/C,IAAI,WAAW,QAAQ,QAAQ;IAC/B,IAAI,WAAW,SAAS,QAAQ;IAEhC,IAAI,WAAW,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,WAAW,MAAM,sCAAgB;IAClE,IAAI,aAAa,UAAU;QACzB,IAAI,iBAAiB,CAAC,CAAC,EAAE,SAAS,QAAQ,CAAC,IAAI,QAAQ,CAAC,GAAG,KAAK,WAAW,GAAG,CAAC;QAC/E,WAAW,CAAA,GAAA,oCAAS,EAAE;IACxB;IACA,OAAO;AACT","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"}
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA2CD,MAAM,kCAAY,CAAA,GAAA,oCAAS,EAAE;AAC7B,MAAM,kCAAY,CAAA,GAAA,oCAAS,EAAE;AAC7B,MAAM,sCAAgB,gCAAU,QAAQ;AACxC,MAAM,sCAAgB,gCAAU,QAAQ;AAMjC,SAAS,0CACd,KAAsB;IAEtB,IAAI,SACF,KAAK,gBACL,YAAY,YACZ,QAAQ,EACT,GAAG;IACJ,IAAI,QAAC,IAAI,EAAC,GAAG,gCAAU,eAAe,CAAC;IAEvC,IAAI,eAAe,CAAA,GAAA,kCAAO,EAAE;IAC5B,IAAI,sBAAsB,CAAA,GAAA,kCAAO,EAAE;IACnC,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,2CAAiB,EAAgB,cAAe,qBAAsB;IACxG,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,qBAAO,EAAE,IAAM,AAAC,CAAA,SAAS,YAAW,KAAM,aAAa,WAAW,QAAQ,CAAC,SAAS;IAEtH,IAAI,aAAa,CAAA,GAAA,8CAAqB,EAAE;QACtC,GAAG,KAAK;QACR,OAAO;IACT;IAEA,IAAI,sBAAsB,CAAC;QACzB,IAAI,CAAC,cAAc,CAAC,UAAU;YAC5B,cAAc;YACd;QACF;QACA,IAAI,SAAS,QAAQ,OAAO,WAAW,QAAQ,IAAI;YACjD,cAAc;YACd;QACF;IACF;IAEA,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAE;IACzC,IAAI,cAAc,YAAY;QAC5B,cAAc,aAAa,WAAW,QAAQ,CAAC,SAAS;QACxD,aAAa;IACf;IAEA,IAAI,cAAc,CAAA,GAAA,oBAAM,EAAE;QACxB,IAAI;QACJ,IAAI;YACF,QAAQ,CAAA,GAAA,oCAAS,EAAE,WAAW,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,EAAE,WAAW,CAAC;QAC/E,EAAE,OAAO,KAAK;YACZ,QAAQ;QACV;QACA,OAAO;IACT,GAAG;QAAC;KAAW;IAEf,IAAI,SAAS;QACX,6CAA6C;QAC7C,IAAI,CAAC,WAAW,MAAM,EAAE;YACtB,oBAAoB;YACpB,IAAI,UAAU,aAAa,eAAe,MACxC,cAAc;iBAEd,cAAc,WAAW,QAAQ,CAAC;YAEpC;QACF;QAEA,iFAAiF;QACjF,IAAI,eAAe,MAAM;YACvB,cAAc,aAAa,WAAW,QAAQ,CAAC,SAAS;YACxD;QACF;QAEA,oBAAoB;QACpB,yGAAyG;QACzG,IAAI,gBAAgB;QACpB,IAAI,YACF,gBAAgB,WAAW,QAAQ,CAAC;QAEtC,cAAc;IAChB;IAEA,IAAI,YAAY;QACd,IAAI,WAAW,oCAAc,aAAa;QAC1C,2EAA2E;QAC3E,yCAAyC;QACzC,+FAA+F;QAC/F,6GAA6G;QAC7G,IAAI,aAAa,YACf,cAAc,SAAS,QAAQ,CAAC;QAElC,oBAAoB;QACpB,WAAW,gBAAgB;IAC7B;IACA,IAAI,YAAY;QACd,IAAI,WAAW,oCAAc,aAAa,CAAC;QAC3C,2EAA2E;QAC3E,yCAAyC;QACzC,+FAA+F;QAC/F,6GAA6G;QAC7G,IAAI,aAAa,YACf,cAAc,SAAS,QAAQ,CAAC;QAElC,oBAAoB;QACpB,WAAW,gBAAgB;IAC7B;IACA,IAAI,iBAAiB,IAAM,oBAAoB;IAC/C,IAAI,iBAAiB,IAAM,oBAAoB;IAE/C,IAAI,WAAW,CAAC;YAAoC;eAAlB,UAAU,MAAM,CAAC,GAAC,eAAA,MAAM,KAAK,CAAC,mCAAZ,mCAAA,YAAmC,CAAC,EAAE;;IAE1F,OAAO;QACL,GAAG,UAAU;kBACb;oBACA;oBACA;uBACA;gBACA;mBACA;wBACA;mBACA;wBACA;IACF;AACF;AAEA,SAAS,oCAAc,KAAY,EAAE,IAAY;IAC/C,IAAI,WAAW,QAAQ,QAAQ;IAC/B,IAAI,WAAW,SAAS,QAAQ;IAEhC,IAAI,WAAW,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,WAAW,MAAM,sCAAgB;IAClE,IAAI,aAAa,UAAU;QACzB,IAAI,iBAAiB,CAAC,CAAC,EAAE,SAAS,QAAQ,CAAC,IAAI,QAAQ,CAAC,GAAG,KAAK,WAAW,GAAG,CAAC;QAC/E,WAAW,CAAA,GAAA,oCAAS,EAAE;IACxB;IACA,OAAO;AACT","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  /** 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 | null>(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 | 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 (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      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  };\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

@@ -64,7 +64,8 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
         // Set to empty state if input value is empty
         if (!inputValue.length) {
             safelySetColorValue(null);
-            setInputValue(value === undefined ? '' : colorValue.toString('hex'));
+            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

package/dist/useColorFieldState.module.js

@@ -64,7 +64,8 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
         // Set to empty state if input value is empty
         if (!inputValue.length) {
             safelySetColorValue(null);
-            setInputValue(value === undefined ? '' : colorValue.toString('hex'));
+            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

package/dist/useColorFieldState.module.js.map

@@ -1 +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"}
+{"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  /** 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 | null>(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 | 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 (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      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  };\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

@@ -26,7 +26,10 @@ $parcel$export(module.exports, "useColorSliderState", () => $5386a492cfd3234c$ex
 function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
     let { channel: channel, colorSpace: colorSpace, 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 [colorValue, setColor] = (0, $93tpS$reactstatelyutils.useControlledState)(value && (0, $83fe1a57d631223b$exports.normalizeColor)(value), defaultValue && (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue), onChange);
+    if (value) value = (0, $83fe1a57d631223b$exports.normalizeColor)(value);
+    if (defaultValue) defaultValue = (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue);
+    // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error
+    let [colorValue, setColor] = (0, $93tpS$reactstatelyutils.useControlledState)(value, defaultValue, onChange);
     let color = (0, $93tpS$react.useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
         colorValue,
         colorSpace
@@ -34,7 +37,8 @@ function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
     let sliderState = (0, $93tpS$reactstatelyslider.useSliderState)({
         ...color.getChannelRange(channel),
         ...otherProps,
-        // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
+        // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
+        // @ts-ignore
         numberFormatter: null,
         value: color.getChannelValue(channel),
         onChange (v) {

package/dist/useColorSliderState.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AA6BM,SAAS,0CAAoB,KAA8B;IAChE,IAAI,WAAC,OAAO,cAAE,UAAU,SAAE,KAAK,gBAAE,YAAY,YAAE,QAAQ,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IAClF,IAAI,SAAS,QAAQ,gBAAgB,MACnC,MAAM,IAAI,MAAM;IAGlB,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAE,SAAS,CAAA,GAAA,wCAAa,EAAE,QAAQ,gBAAgB,CAAA,GAAA,wCAAa,EAAE,eAAe;IAC9H,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,cAAc,aAAa,WAAW,QAAQ,CAAC,cAAc,YAAY;QAAC;QAAY;KAAW;IAC3H,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;QACA,YAAY,YAAY,eAAe,CAAC;IAC1C;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';\nimport {useMemo} from 'react';\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  /** Whether the color slider is currently being dragged. */\n  readonly isDragging: boolean\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, colorSpace, 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 [colorValue, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\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    isDragging: sliderState.isThumbDragging(0)\n  };\n}\n"],"names":[],"version":3,"file":"useColorSliderState.main.js.map"}
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AA6BM,SAAS,0CAAoB,KAA8B;IAChE,IAAI,WAAC,OAAO,cAAE,UAAU,SAAE,KAAK,gBAAE,YAAY,YAAE,QAAQ,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IAClF,IAAI,SAAS,QAAQ,gBAAgB,MACnC,MAAM,IAAI,MAAM;IAGlB,IAAI,OACF,QAAQ,CAAA,GAAA,wCAAa,EAAE;IAEzB,IAAI,cACF,eAAe,CAAA,GAAA,wCAAa,EAAE;IAEhC,6HAA6H;IAC7H,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAS,OAAgB,cAAuB;IAC9F,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,cAAc,aAAa,WAAW,QAAQ,CAAC,cAAc,YAAY;QAAC;QAAY;KAAW;IAC3H,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,MAAM,eAAe,CAAC,QAAQ;QACjC,GAAG,UAAU;QACb,sHAAsH;QACtH,aAAa;QACb,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;QACA,YAAY,YAAY,eAAe,CAAC;IAC1C;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';\nimport {useMemo} from 'react';\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  /** Whether the color slider is currently being dragged. */\n  readonly isDragging: boolean\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, colorSpace, 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  if (value) {\n    value = normalizeColor(value);\n  }\n  if (defaultValue) {\n    defaultValue = normalizeColor(defaultValue);\n  }\n  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error\n  let [colorValue, setColor] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n  let sliderState = useSliderState({\n    ...color.getChannelRange(channel),\n    ...otherProps,\n    // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.\n    // @ts-ignore\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    isDragging: sliderState.isThumbDragging(0)\n  };\n}\n"],"names":[],"version":3,"file":"useColorSliderState.main.js.map"}

package/dist/useColorSliderState.mjs

@@ -20,7 +20,10 @@ import {useMemo as $1Eavr$useMemo} from "react";
 function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
     let { channel: channel, colorSpace: colorSpace, 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 [colorValue, setColor] = (0, $1Eavr$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    if (value) value = (0, $799cddbef784668f$export$4cde5df63f53f473)(value);
+    if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
+    // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error
+    let [colorValue, setColor] = (0, $1Eavr$useControlledState)(value, defaultValue, onChange);
     let color = (0, $1Eavr$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
         colorValue,
         colorSpace
@@ -28,7 +31,8 @@ function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
     let sliderState = (0, $1Eavr$useSliderState)({
         ...color.getChannelRange(channel),
         ...otherProps,
-        // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
+        // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
+        // @ts-ignore
         numberFormatter: null,
         value: color.getChannelValue(channel),
         onChange (v) {

package/dist/useColorSliderState.module.js

@@ -20,7 +20,10 @@ import {useMemo as $1Eavr$useMemo} from "react";
 function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
     let { channel: channel, colorSpace: colorSpace, 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 [colorValue, setColor] = (0, $1Eavr$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    if (value) value = (0, $799cddbef784668f$export$4cde5df63f53f473)(value);
+    if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
+    // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error
+    let [colorValue, setColor] = (0, $1Eavr$useControlledState)(value, defaultValue, onChange);
     let color = (0, $1Eavr$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
         colorValue,
         colorSpace
@@ -28,7 +31,8 @@ function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
     let sliderState = (0, $1Eavr$useSliderState)({
         ...color.getChannelRange(channel),
         ...otherProps,
-        // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
+        // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
+        // @ts-ignore
         numberFormatter: null,
         value: color.getChannelValue(channel),
         onChange (v) {

package/dist/useColorSliderState.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AA6BM,SAAS,0CAAoB,KAA8B;IAChE,IAAI,WAAC,OAAO,cAAE,UAAU,SAAE,KAAK,gBAAE,YAAY,YAAE,QAAQ,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IAClF,IAAI,SAAS,QAAQ,gBAAgB,MACnC,MAAM,IAAI,MAAM;IAGlB,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAE,SAAS,CAAA,GAAA,yCAAa,EAAE,QAAQ,gBAAgB,CAAA,GAAA,yCAAa,EAAE,eAAe;IAC9H,IAAI,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,cAAc,aAAa,WAAW,QAAQ,CAAC,cAAc,YAAY;QAAC;QAAY;KAAW;IAC3H,IAAI,cAAc,CAAA,GAAA,qBAAa,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,yCAAa,EAAE;QAC1B;QACA;YACE,OAAQ;gBACN,KAAK;oBACH,OAAO,CAAA,GAAA,wCAAS,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;QACA,YAAY,YAAY,eAAe,CAAC;IAC1C;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';\nimport {useMemo} from 'react';\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  /** Whether the color slider is currently being dragged. */\n  readonly isDragging: boolean\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, colorSpace, 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 [colorValue, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\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    isDragging: sliderState.isThumbDragging(0)\n  };\n}\n"],"names":[],"version":3,"file":"useColorSliderState.module.js.map"}
+{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AA6BM,SAAS,0CAAoB,KAA8B;IAChE,IAAI,WAAC,OAAO,cAAE,UAAU,SAAE,KAAK,gBAAE,YAAY,YAAE,QAAQ,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IAClF,IAAI,SAAS,QAAQ,gBAAgB,MACnC,MAAM,IAAI,MAAM;IAGlB,IAAI,OACF,QAAQ,CAAA,GAAA,yCAAa,EAAE;IAEzB,IAAI,cACF,eAAe,CAAA,GAAA,yCAAa,EAAE;IAEhC,6HAA6H;IAC7H,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAS,OAAgB,cAAuB;IAC9F,IAAI,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,cAAc,aAAa,WAAW,QAAQ,CAAC,cAAc,YAAY;QAAC;QAAY;KAAW;IAC3H,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE;QAC/B,GAAG,MAAM,eAAe,CAAC,QAAQ;QACjC,GAAG,UAAU;QACb,sHAAsH;QACtH,aAAa;QACb,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,yCAAa,EAAE;QAC1B;QACA;YACE,OAAQ;gBACN,KAAK;oBACH,OAAO,CAAA,GAAA,wCAAS,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;QACA,YAAY,YAAY,eAAe,CAAC;IAC1C;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';\nimport {useMemo} from 'react';\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  /** Whether the color slider is currently being dragged. */\n  readonly isDragging: boolean\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, colorSpace, 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  if (value) {\n    value = normalizeColor(value);\n  }\n  if (defaultValue) {\n    defaultValue = normalizeColor(defaultValue);\n  }\n  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error\n  let [colorValue, setColor] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n  let sliderState = useSliderState({\n    ...color.getChannelRange(channel),\n    ...otherProps,\n    // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.\n    // @ts-ignore\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    isDragging: sliderState.isThumbDragging(0)\n  };\n}\n"],"names":[],"version":3,"file":"useColorSliderState.module.js.map"}

package/dist/useColorWheelState.main.js

@@ -54,9 +54,12 @@ function $9d7d8736d45f74b8$var$cartesianToAngle(x, y, radius) {
     return (deg + 360) % 360;
 }
 function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
-    let { defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
-    if (!props.value && !defaultValue) defaultValue = $9d7d8736d45f74b8$var$DEFAULT_COLOR;
-    let [stateValue, setValueState] = (0, $5Frb2$reactstatelyutils.useControlledState)((0, $83fe1a57d631223b$exports.normalizeColor)(props.value), (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue), onChange);
+    let { value: propsValue, defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
+    if (!propsValue && !defaultValue) defaultValue = $9d7d8736d45f74b8$var$DEFAULT_COLOR;
+    if (propsValue) propsValue = (0, $83fe1a57d631223b$exports.normalizeColor)(propsValue);
+    if (defaultValue) defaultValue = (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue);
+    // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
+    let [stateValue, setValueState] = (0, $5Frb2$reactstatelyutils.useControlledState)(propsValue, defaultValue, onChange);
     let value = (0, $5Frb2$react.useMemo)(()=>{
         let colorSpace = stateValue.getColorSpace();
         return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');

package/dist/useColorWheelState.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AA2CD,MAAM,sCAAgB,CAAA,GAAA,oCAAS,EAAE;AAEjC,SAAS,kCAAY,KAAa,EAAE,IAAY;IAC9C,OAAO,KAAK,KAAK,CAAC,QAAQ,QAAQ;AACpC;AAEA,SAAS,0BAAI,CAAS,EAAE,CAAS;IAC/B,OAAO,AAAC,CAAA,AAAC,IAAI,IAAK,CAAA,IAAK;AACzB;AAEA,SAAS,gCAAU,CAAS;IAC1B,IAAI,IAAI,KAAK,KAAK,CAAC;IACnB,IAAI,MAAM,GACR,OAAO,IAAI;SAEX,OAAO;AAEX;AAEA,SAAS,+BAAS,GAAW;IAC3B,OAAO,MAAM,KAAK,EAAE,GAAG;AACzB;AAEA,SAAS,+BAAS,GAAW;IAC3B,OAAO,MAAM,MAAM,KAAK,EAAE;AAC5B;AAEA,wCAAwC;AACxC,SAAS,uCAAiB,KAAa,EAAE,MAAc;IACrD,IAAI,MAAM,+BAAS,MAAM,QAAQ;IACjC,IAAI,IAAI,KAAK,GAAG,CAAC,OAAQ;IACzB,IAAI,IAAI,KAAK,GAAG,CAAC,OAAQ;IACzB,OAAO;WAAC;WAAG;IAAC;AACd;AAEA,SAAS,uCAAiB,CAAS,EAAE,CAAS,EAAE,MAAc;IAC5D,IAAI,MAAM,+BAAS,KAAK,KAAK,CAAC,IAAI,QAAQ,IAAI;IAC9C,OAAO,AAAC,CAAA,MAAM,GAAE,IAAK;AACvB;AAMO,SAAS,0CAAmB,KAAsB;IACvD,IAAI,gBAAC,YAAY,YAAE,QAAQ,eAAE,WAAW,EAAC,GAAG;IAE5C,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,cACnB,eAAe;IAGjB,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,2CAAiB,EAAE,CAAA,GAAA,wCAAa,EAAE,MAAM,KAAK,GAAG,CAAA,GAAA,wCAAa,EAAE,eAAe;IAChH,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE;QAClB,IAAI,aAAa,WAAW,aAAa;QACzC,OAAO,eAAe,SAAS,eAAe,QAAQ,aAAa,WAAW,QAAQ,CAAC;IACzF,GAAG;QAAC;KAAW;IACf,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,WAAW,CAAC;QACd,SAAS,OAAO,GAAG;QACnB,cAAc;IAChB;IAEA,IAAI,eAAe,MAAM,eAAe,CAAC;IACzC,IAAI,EAAC,UAAU,SAAS,EAAE,UAAU,SAAS,EAAE,MAAM,IAAI,EAAE,UAAU,QAAQ,EAAC,GAAG;IACjF,IAAI,CAAC,YAAY,YAAY,GAAG,CAAA,GAAA,qBAAO,EAAE;IACzC,IAAI,gBAAgB,CAAA,GAAA,mBAAK,EAAE;IAE3B,IAAI,MAAM,MAAM,eAAe,CAAC;IAChC,SAAS,OAAO,CAAS;QACvB,IAAI,IAAI,KACN,0CAA0C;QAC1C,IAAI;QAEN,IAAI,kCAAY,0BAAI,GAAG,MAAM;QAC7B,IAAI,QAAQ,GAAG;YACb,IAAI,QAAQ,MAAM,gBAAgB,CAAC,OAAO;YAC1C,SAAS;QACX;IACF;IAEA,OAAO;eACL;cACA;kBACA;QACA,UAAS,CAAC;YACR,IAAI,QAAQ,CAAA,GAAA,wCAAa,EAAE;YAC3B,SAAS;QACX;aACA;gBACA;QACA,iBAAgB,CAAC,EAAE,CAAC,EAAE,MAAM;YAC1B,OAAO,uCAAiB,GAAG,GAAG;QAChC;QACA,kBAAiB,MAAM;YACrB,OAAO,uCAAiB,MAAM,eAAe,CAAC,QAAQ;QACxD;QACA,WAAU,WAAW,CAAC;YACpB,IAAI,IAAI,KAAK,GAAG,CAAC,UAAU;YAC3B,IAAI,WAAW,MAAM;YACrB,IAAI,YAAY,WACd,0CAA0C;YAC1C,WAAW;YAEb,OAAO,kCAAY,0BAAI,UAAU,MAAM;QACzC;QACA,WAAU,WAAW,CAAC;YACpB,IAAI,IAAI,KAAK,GAAG,CAAC,UAAU;YAC3B,IAAI,QAAQ,GACV,8DAA8D;YAC9D,oCAAoC;YACpC,OAAO,gCAAU,MAAM,KAAK;iBAE5B,OAAO,kCAAY,0BAAI,MAAM,GAAG,MAAM;QAE1C;QACA,aAAY,UAAU;YACpB,IAAI,cAAc,cAAc,OAAO;YACvC,cAAc,OAAO,GAAG;YAExB,IAAI,eAAe,CAAC,cAAc,aAChC,YAAY,SAAS,OAAO;YAG9B,YAAY;QACd;oBACA;QACA;YACE,OAAO,MAAM,QAAQ,CAAC,OAAO,gBAAgB,CAAC,cAAc,KAAK,gBAAgB,CAAC,aAAa,IAAI,gBAAgB,CAAC,SAAS;QAC/H;QACA,YAAY,MAAM,UAAU,IAAI;IAClC;AACF","sources":["packages/@react-stately/color/src/useColorWheelState.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, ColorWheelProps} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorWheelState {\n  /** The current color value represented by the color wheel. */\n  readonly value: Color,\n  /** Sets the color value represented by the color wheel, and triggers `onChange`. */\n  setValue(value: string | Color): void,\n\n  /** The current value of the hue channel displayed by the color wheel. */\n  readonly hue: number,\n  /** Sets the hue channel of the current color value and triggers `onChange`. */\n  setHue(value: number): void,\n\n  /** Sets the hue channel of the current color value based on the given coordinates and radius of the color wheel, and triggers `onChange`. */\n  setHueFromPoint(x: number, y: number, radius: number): void,\n  /** Returns the coordinates of the thumb relative to the center point of the color wheel. */\n  getThumbPosition(radius: number): {x: number, y: number},\n\n  /** Increments the hue by the given amount (defaults to 1). */\n  increment(stepSize?: number): void,\n  /** Decrements the hue by the given amount (defaults to 1). */\n  decrement(stepSize?: number): void,\n\n  /** Whether the color wheel is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color wheel is being dragged. */\n  setDragging(value: boolean): void,\n  /** Returns the color that should be displayed in the color wheel instead of `value`. */\n  getDisplayColor(): Color,\n  /** The step value of the hue channel, used when incrementing and decrementing. */\n  step: number,\n  /** The page step value of the hue channel, used when incrementing and decrementing. */\n  pageStep: number,\n\n  /** Whether the color wheel is disabled. */\n  readonly isDisabled: boolean\n}\n\nconst DEFAULT_COLOR = parseColor('hsl(0, 100%, 50%)');\n\nfunction roundToStep(value: number, step: number): number {\n  return Math.round(value / step) * step;\n}\n\nfunction mod(n: number, m: number) {\n  return ((n % m) + m) % m;\n}\n\nfunction roundDown(v: number) {\n  let r = Math.floor(v);\n  if (r === v) {\n    return v - 1;\n  } else {\n    return r;\n  }\n}\n\nfunction degToRad(deg: number) {\n  return deg * Math.PI / 180;\n}\n\nfunction radToDeg(rad: number) {\n  return rad * 180 / Math.PI;\n}\n\n// 0deg = 3 o'clock. increases clockwise\nfunction angleToCartesian(angle: number, radius: number): {x: number, y: number} {\n  let rad = degToRad(360 - angle + 90);\n  let x = Math.sin(rad) * (radius);\n  let y = Math.cos(rad) * (radius);\n  return {x, y};\n}\n\nfunction cartesianToAngle(x: number, y: number, radius: number): number {\n  let deg = radToDeg(Math.atan2(y / radius, x / radius));\n  return (deg + 360) % 360;\n}\n\n/**\n * Provides state management for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheelState(props: ColorWheelProps): ColorWheelState {\n  let {defaultValue, onChange, onChangeEnd} = props;\n\n  if (!props.value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n\n  let [stateValue, setValueState] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange);\n  let value = useMemo(() => {\n    let colorSpace = stateValue.getColorSpace();\n    return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');\n  }, [stateValue]);\n  let valueRef = useRef(value);\n  let setValue = (value: Color) => {\n    valueRef.current = value;\n    setValueState(value);\n  };\n\n  let channelRange = value.getChannelRange('hue');\n  let {minValue: minValueX, maxValue: maxValueX, step: step, pageSize: pageStep} = channelRange;\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let hue = value.getChannelValue('hue');\n  function setHue(v: number) {\n    if (v > 360) {\n      // Make sure you can always get back to 0.\n      v = 0;\n    }\n    v = roundToStep(mod(v, 360), step);\n    if (hue !== v) {\n      let color = value.withChannelValue('hue', v);\n      setValue(color);\n    }\n  }\n\n  return {\n    value,\n    step,\n    pageStep,\n    setValue(v) {\n      let color = normalizeColor(v);\n      setValue(color);\n    },\n    hue,\n    setHue,\n    setHueFromPoint(x, y, radius) {\n      setHue(cartesianToAngle(x, y, radius));\n    },\n    getThumbPosition(radius) {\n      return angleToCartesian(value.getChannelValue('hue'), radius);\n    },\n    increment(stepSize = 1) {\n      let s = Math.max(stepSize, step);\n      let newValue = hue + s;\n      if (newValue >= maxValueX) {\n        // Make sure you can always get back to 0.\n        newValue = minValueX;\n      }\n      setHue(roundToStep(mod(newValue, 360), s));\n    },\n    decrement(stepSize = 1) {\n      let s = Math.max(stepSize, step);\n      if (hue === 0) {\n        // We can't just subtract step because this might be the case:\n        // |(previous step) - 0| < step size\n        setHue(roundDown(360 / s) * s);\n      } else {\n        setHue(roundToStep(mod(hue - s, 360), s));\n      }\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1);\n    },\n    isDisabled: props.isDisabled || false\n  };\n}\n"],"names":[],"version":3,"file":"useColorWheelState.main.js.map"}
+{"mappings":"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","sources":["packages/@react-stately/color/src/useColorWheelState.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, ColorWheelProps} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorWheelState {\n  /** The current color value represented by the color wheel. */\n  readonly value: Color,\n  /** Sets the color value represented by the color wheel, and triggers `onChange`. */\n  setValue(value: string | Color): void,\n\n  /** The current value of the hue channel displayed by the color wheel. */\n  readonly hue: number,\n  /** Sets the hue channel of the current color value and triggers `onChange`. */\n  setHue(value: number): void,\n\n  /** Sets the hue channel of the current color value based on the given coordinates and radius of the color wheel, and triggers `onChange`. */\n  setHueFromPoint(x: number, y: number, radius: number): void,\n  /** Returns the coordinates of the thumb relative to the center point of the color wheel. */\n  getThumbPosition(radius: number): {x: number, y: number},\n\n  /** Increments the hue by the given amount (defaults to 1). */\n  increment(stepSize?: number): void,\n  /** Decrements the hue by the given amount (defaults to 1). */\n  decrement(stepSize?: number): void,\n\n  /** Whether the color wheel is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color wheel is being dragged. */\n  setDragging(value: boolean): void,\n  /** Returns the color that should be displayed in the color wheel instead of `value`. */\n  getDisplayColor(): Color,\n  /** The step value of the hue channel, used when incrementing and decrementing. */\n  step: number,\n  /** The page step value of the hue channel, used when incrementing and decrementing. */\n  pageStep: number,\n\n  /** Whether the color wheel is disabled. */\n  readonly isDisabled: boolean\n}\n\nconst DEFAULT_COLOR = parseColor('hsl(0, 100%, 50%)');\n\nfunction roundToStep(value: number, step: number): number {\n  return Math.round(value / step) * step;\n}\n\nfunction mod(n: number, m: number) {\n  return ((n % m) + m) % m;\n}\n\nfunction roundDown(v: number) {\n  let r = Math.floor(v);\n  if (r === v) {\n    return v - 1;\n  } else {\n    return r;\n  }\n}\n\nfunction degToRad(deg: number) {\n  return deg * Math.PI / 180;\n}\n\nfunction radToDeg(rad: number) {\n  return rad * 180 / Math.PI;\n}\n\n// 0deg = 3 o'clock. increases clockwise\nfunction angleToCartesian(angle: number, radius: number): {x: number, y: number} {\n  let rad = degToRad(360 - angle + 90);\n  let x = Math.sin(rad) * (radius);\n  let y = Math.cos(rad) * (radius);\n  return {x, y};\n}\n\nfunction cartesianToAngle(x: number, y: number, radius: number): number {\n  let deg = radToDeg(Math.atan2(y / radius, x / radius));\n  return (deg + 360) % 360;\n}\n\n/**\n * Provides state management for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheelState(props: ColorWheelProps): ColorWheelState {\n  let {value: propsValue, defaultValue, onChange, onChangeEnd} = props;\n\n  if (!propsValue && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n  if (propsValue) {\n    propsValue = normalizeColor(propsValue);\n  }\n  if (defaultValue) {\n    defaultValue = normalizeColor(defaultValue);\n  }\n\n  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default\n  let [stateValue, setValueState] = useControlledState<Color>(propsValue as Color, defaultValue as Color, onChange);\n  let value = useMemo(() => {\n    let colorSpace = stateValue.getColorSpace();\n    return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');\n  }, [stateValue]);\n  let valueRef = useRef(value);\n  let setValue = (value: Color) => {\n    valueRef.current = value;\n    setValueState(value);\n  };\n\n  let channelRange = value.getChannelRange('hue');\n  let {minValue: minValueX, maxValue: maxValueX, step: step, pageSize: pageStep} = channelRange;\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let hue = value.getChannelValue('hue');\n  function setHue(v: number) {\n    if (v > 360) {\n      // Make sure you can always get back to 0.\n      v = 0;\n    }\n    v = roundToStep(mod(v, 360), step);\n    if (hue !== v) {\n      let color = value.withChannelValue('hue', v);\n      setValue(color);\n    }\n  }\n\n  return {\n    value,\n    step,\n    pageStep,\n    setValue(v) {\n      let color = normalizeColor(v);\n      setValue(color);\n    },\n    hue,\n    setHue,\n    setHueFromPoint(x, y, radius) {\n      setHue(cartesianToAngle(x, y, radius));\n    },\n    getThumbPosition(radius) {\n      return angleToCartesian(value.getChannelValue('hue'), radius);\n    },\n    increment(stepSize = 1) {\n      let s = Math.max(stepSize, step);\n      let newValue = hue + s;\n      if (newValue >= maxValueX) {\n        // Make sure you can always get back to 0.\n        newValue = minValueX;\n      }\n      setHue(roundToStep(mod(newValue, 360), s));\n    },\n    decrement(stepSize = 1) {\n      let s = Math.max(stepSize, step);\n      if (hue === 0) {\n        // We can't just subtract step because this might be the case:\n        // |(previous step) - 0| < step size\n        setHue(roundDown(360 / s) * s);\n      } else {\n        setHue(roundToStep(mod(hue - s, 360), s));\n      }\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1);\n    },\n    isDisabled: props.isDisabled || false\n  };\n}\n"],"names":[],"version":3,"file":"useColorWheelState.main.js.map"}

package/dist/useColorWheelState.mjs

@@ -48,9 +48,12 @@ function $ee4262c74a467b07$var$cartesianToAngle(x, y, radius) {
     return (deg + 360) % 360;
 }
 function $ee4262c74a467b07$export$f4301076d9336137(props) {
-    let { defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
-    if (!props.value && !defaultValue) defaultValue = $ee4262c74a467b07$var$DEFAULT_COLOR;
-    let [stateValue, setValueState] = (0, $d4Pfi$useControlledState)((0, $799cddbef784668f$export$4cde5df63f53f473)(props.value), (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let { value: propsValue, defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
+    if (!propsValue && !defaultValue) defaultValue = $ee4262c74a467b07$var$DEFAULT_COLOR;
+    if (propsValue) propsValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(propsValue);
+    if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
+    // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
+    let [stateValue, setValueState] = (0, $d4Pfi$useControlledState)(propsValue, defaultValue, onChange);
     let value = (0, $d4Pfi$useMemo)(()=>{
         let colorSpace = stateValue.getColorSpace();
         return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');

package/dist/useColorWheelState.module.js

@@ -48,9 +48,12 @@ function $ee4262c74a467b07$var$cartesianToAngle(x, y, radius) {
     return (deg + 360) % 360;
 }
 function $ee4262c74a467b07$export$f4301076d9336137(props) {
-    let { defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
-    if (!props.value && !defaultValue) defaultValue = $ee4262c74a467b07$var$DEFAULT_COLOR;
-    let [stateValue, setValueState] = (0, $d4Pfi$useControlledState)((0, $799cddbef784668f$export$4cde5df63f53f473)(props.value), (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let { value: propsValue, defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
+    if (!propsValue && !defaultValue) defaultValue = $ee4262c74a467b07$var$DEFAULT_COLOR;
+    if (propsValue) propsValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(propsValue);
+    if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
+    // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
+    let [stateValue, setValueState] = (0, $d4Pfi$useControlledState)(propsValue, defaultValue, onChange);
     let value = (0, $d4Pfi$useMemo)(()=>{
         let colorSpace = stateValue.getColorSpace();
         return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');

package/dist/useColorWheelState.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/color/src/useColorWheelState.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, ColorWheelProps} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorWheelState {\n  /** The current color value represented by the color wheel. */\n  readonly value: Color,\n  /** Sets the color value represented by the color wheel, and triggers `onChange`. */\n  setValue(value: string | Color): void,\n\n  /** The current value of the hue channel displayed by the color wheel. */\n  readonly hue: number,\n  /** Sets the hue channel of the current color value and triggers `onChange`. */\n  setHue(value: number): void,\n\n  /** Sets the hue channel of the current color value based on the given coordinates and radius of the color wheel, and triggers `onChange`. */\n  setHueFromPoint(x: number, y: number, radius: number): void,\n  /** Returns the coordinates of the thumb relative to the center point of the color wheel. */\n  getThumbPosition(radius: number): {x: number, y: number},\n\n  /** Increments the hue by the given amount (defaults to 1). */\n  increment(stepSize?: number): void,\n  /** Decrements the hue by the given amount (defaults to 1). */\n  decrement(stepSize?: number): void,\n\n  /** Whether the color wheel is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color wheel is being dragged. */\n  setDragging(value: boolean): void,\n  /** Returns the color that should be displayed in the color wheel instead of `value`. */\n  getDisplayColor(): Color,\n  /** The step value of the hue channel, used when incrementing and decrementing. */\n  step: number,\n  /** The page step value of the hue channel, used when incrementing and decrementing. */\n  pageStep: number,\n\n  /** Whether the color wheel is disabled. */\n  readonly isDisabled: boolean\n}\n\nconst DEFAULT_COLOR = parseColor('hsl(0, 100%, 50%)');\n\nfunction roundToStep(value: number, step: number): number {\n  return Math.round(value / step) * step;\n}\n\nfunction mod(n: number, m: number) {\n  return ((n % m) + m) % m;\n}\n\nfunction roundDown(v: number) {\n  let r = Math.floor(v);\n  if (r === v) {\n    return v - 1;\n  } else {\n    return r;\n  }\n}\n\nfunction degToRad(deg: number) {\n  return deg * Math.PI / 180;\n}\n\nfunction radToDeg(rad: number) {\n  return rad * 180 / Math.PI;\n}\n\n// 0deg = 3 o'clock. increases clockwise\nfunction angleToCartesian(angle: number, radius: number): {x: number, y: number} {\n  let rad = degToRad(360 - angle + 90);\n  let x = Math.sin(rad) * (radius);\n  let y = Math.cos(rad) * (radius);\n  return {x, y};\n}\n\nfunction cartesianToAngle(x: number, y: number, radius: number): number {\n  let deg = radToDeg(Math.atan2(y / radius, x / radius));\n  return (deg + 360) % 360;\n}\n\n/**\n * Provides state management for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheelState(props: ColorWheelProps): ColorWheelState {\n  let {defaultValue, onChange, onChangeEnd} = props;\n\n  if (!props.value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n\n  let [stateValue, setValueState] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange);\n  let value = useMemo(() => {\n    let colorSpace = stateValue.getColorSpace();\n    return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');\n  }, [stateValue]);\n  let valueRef = useRef(value);\n  let setValue = (value: Color) => {\n    valueRef.current = value;\n    setValueState(value);\n  };\n\n  let channelRange = value.getChannelRange('hue');\n  let {minValue: minValueX, maxValue: maxValueX, step: step, pageSize: pageStep} = channelRange;\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let hue = value.getChannelValue('hue');\n  function setHue(v: number) {\n    if (v > 360) {\n      // Make sure you can always get back to 0.\n      v = 0;\n    }\n    v = roundToStep(mod(v, 360), step);\n    if (hue !== v) {\n      let color = value.withChannelValue('hue', v);\n      setValue(color);\n    }\n  }\n\n  return {\n    value,\n    step,\n    pageStep,\n    setValue(v) {\n      let color = normalizeColor(v);\n      setValue(color);\n    },\n    hue,\n    setHue,\n    setHueFromPoint(x, y, radius) {\n      setHue(cartesianToAngle(x, y, radius));\n    },\n    getThumbPosition(radius) {\n      return angleToCartesian(value.getChannelValue('hue'), radius);\n    },\n    increment(stepSize = 1) {\n      let s = Math.max(stepSize, step);\n      let newValue = hue + s;\n      if (newValue >= maxValueX) {\n        // Make sure you can always get back to 0.\n        newValue = minValueX;\n      }\n      setHue(roundToStep(mod(newValue, 360), s));\n    },\n    decrement(stepSize = 1) {\n      let s = Math.max(stepSize, step);\n      if (hue === 0) {\n        // We can't just subtract step because this might be the case:\n        // |(previous step) - 0| < step size\n        setHue(roundDown(360 / s) * s);\n      } else {\n        setHue(roundToStep(mod(hue - s, 360), s));\n      }\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1);\n    },\n    isDisabled: props.isDisabled || false\n  };\n}\n"],"names":[],"version":3,"file":"useColorWheelState.module.js.map"}
+{"mappings":"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","sources":["packages/@react-stately/color/src/useColorWheelState.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, ColorWheelProps} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorWheelState {\n  /** The current color value represented by the color wheel. */\n  readonly value: Color,\n  /** Sets the color value represented by the color wheel, and triggers `onChange`. */\n  setValue(value: string | Color): void,\n\n  /** The current value of the hue channel displayed by the color wheel. */\n  readonly hue: number,\n  /** Sets the hue channel of the current color value and triggers `onChange`. */\n  setHue(value: number): void,\n\n  /** Sets the hue channel of the current color value based on the given coordinates and radius of the color wheel, and triggers `onChange`. */\n  setHueFromPoint(x: number, y: number, radius: number): void,\n  /** Returns the coordinates of the thumb relative to the center point of the color wheel. */\n  getThumbPosition(radius: number): {x: number, y: number},\n\n  /** Increments the hue by the given amount (defaults to 1). */\n  increment(stepSize?: number): void,\n  /** Decrements the hue by the given amount (defaults to 1). */\n  decrement(stepSize?: number): void,\n\n  /** Whether the color wheel is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color wheel is being dragged. */\n  setDragging(value: boolean): void,\n  /** Returns the color that should be displayed in the color wheel instead of `value`. */\n  getDisplayColor(): Color,\n  /** The step value of the hue channel, used when incrementing and decrementing. */\n  step: number,\n  /** The page step value of the hue channel, used when incrementing and decrementing. */\n  pageStep: number,\n\n  /** Whether the color wheel is disabled. */\n  readonly isDisabled: boolean\n}\n\nconst DEFAULT_COLOR = parseColor('hsl(0, 100%, 50%)');\n\nfunction roundToStep(value: number, step: number): number {\n  return Math.round(value / step) * step;\n}\n\nfunction mod(n: number, m: number) {\n  return ((n % m) + m) % m;\n}\n\nfunction roundDown(v: number) {\n  let r = Math.floor(v);\n  if (r === v) {\n    return v - 1;\n  } else {\n    return r;\n  }\n}\n\nfunction degToRad(deg: number) {\n  return deg * Math.PI / 180;\n}\n\nfunction radToDeg(rad: number) {\n  return rad * 180 / Math.PI;\n}\n\n// 0deg = 3 o'clock. increases clockwise\nfunction angleToCartesian(angle: number, radius: number): {x: number, y: number} {\n  let rad = degToRad(360 - angle + 90);\n  let x = Math.sin(rad) * (radius);\n  let y = Math.cos(rad) * (radius);\n  return {x, y};\n}\n\nfunction cartesianToAngle(x: number, y: number, radius: number): number {\n  let deg = radToDeg(Math.atan2(y / radius, x / radius));\n  return (deg + 360) % 360;\n}\n\n/**\n * Provides state management for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheelState(props: ColorWheelProps): ColorWheelState {\n  let {value: propsValue, defaultValue, onChange, onChangeEnd} = props;\n\n  if (!propsValue && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n  if (propsValue) {\n    propsValue = normalizeColor(propsValue);\n  }\n  if (defaultValue) {\n    defaultValue = normalizeColor(defaultValue);\n  }\n\n  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default\n  let [stateValue, setValueState] = useControlledState<Color>(propsValue as Color, defaultValue as Color, onChange);\n  let value = useMemo(() => {\n    let colorSpace = stateValue.getColorSpace();\n    return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');\n  }, [stateValue]);\n  let valueRef = useRef(value);\n  let setValue = (value: Color) => {\n    valueRef.current = value;\n    setValueState(value);\n  };\n\n  let channelRange = value.getChannelRange('hue');\n  let {minValue: minValueX, maxValue: maxValueX, step: step, pageSize: pageStep} = channelRange;\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let hue = value.getChannelValue('hue');\n  function setHue(v: number) {\n    if (v > 360) {\n      // Make sure you can always get back to 0.\n      v = 0;\n    }\n    v = roundToStep(mod(v, 360), step);\n    if (hue !== v) {\n      let color = value.withChannelValue('hue', v);\n      setValue(color);\n    }\n  }\n\n  return {\n    value,\n    step,\n    pageStep,\n    setValue(v) {\n      let color = normalizeColor(v);\n      setValue(color);\n    },\n    hue,\n    setHue,\n    setHueFromPoint(x, y, radius) {\n      setHue(cartesianToAngle(x, y, radius));\n    },\n    getThumbPosition(radius) {\n      return angleToCartesian(value.getChannelValue('hue'), radius);\n    },\n    increment(stepSize = 1) {\n      let s = Math.max(stepSize, step);\n      let newValue = hue + s;\n      if (newValue >= maxValueX) {\n        // Make sure you can always get back to 0.\n        newValue = minValueX;\n      }\n      setHue(roundToStep(mod(newValue, 360), s));\n    },\n    decrement(stepSize = 1) {\n      let s = Math.max(stepSize, step);\n      if (hue === 0) {\n        // We can't just subtract step because this might be the case:\n        // |(previous step) - 0| < step size\n        setHue(roundDown(360 / s) * s);\n      } else {\n        setHue(roundToStep(mod(hue - s, 360), s));\n      }\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1);\n    },\n    isDisabled: props.isDisabled || false\n  };\n}\n"],"names":[],"version":3,"file":"useColorWheelState.module.js.map"}