@react-stately/color 3.5.4-nightly.4569 → 3.5.4-nightly.4582

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    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n\n  let [color, setColorState] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);\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\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"}

package/dist/useColorAreaState.mjs

@@ -1,6 +1,6 @@
 import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
 import {useControlledState as $5ShDH$useControlledState, clamp as $5ShDH$clamp, snapValueToStep as $5ShDH$snapValueToStep} from "@react-stately/utils";
-import {useRef as $5ShDH$useRef, useMemo as $5ShDH$useMemo, useState as $5ShDH$useState} from "react";
+import {useMemo as $5ShDH$useMemo, useRef as $5ShDH$useRef, useState as $5ShDH$useState} from "react";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -17,9 +17,13 @@ import {useRef as $5ShDH$useRef, useMemo as $5ShDH$useMemo, useState as $5ShDH$u
 
 const $6e14a98a7f67141d$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#ffffff");
 function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
-    let { value: value, defaultValue: defaultValue, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = 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 [color, setColorState] = (0, $5ShDH$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let [colorValue, setColorState] = (0, $5ShDH$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let color = (0, $5ShDH$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
     let valueRef = (0, $5ShDH$useRef)(color);
     let setColor = (color)=>{
         valueRef.current = color;

package/dist/useColorAreaState.module.js

@@ -1,6 +1,6 @@
 import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
 import {useControlledState as $5ShDH$useControlledState, clamp as $5ShDH$clamp, snapValueToStep as $5ShDH$snapValueToStep} from "@react-stately/utils";
-import {useRef as $5ShDH$useRef, useMemo as $5ShDH$useMemo, useState as $5ShDH$useState} from "react";
+import {useMemo as $5ShDH$useMemo, useRef as $5ShDH$useRef, useState as $5ShDH$useState} from "react";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -17,9 +17,13 @@ import {useRef as $5ShDH$useRef, useMemo as $5ShDH$useMemo, useState as $5ShDH$u
 
 const $6e14a98a7f67141d$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#ffffff");
 function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
-    let { value: value, defaultValue: defaultValue, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = 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 [color, setColorState] = (0, $5ShDH$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let [colorValue, setColorState] = (0, $5ShDH$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let color = (0, $5ShDH$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
     let valueRef = (0, $5ShDH$useRef)(color);
     let setColor = (color)=>{
         valueRef.current = color;

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    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n\n  let [color, setColorState] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);\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\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"}

package/dist/useColorChannelFieldState.main.js

@@ -0,0 +1,48 @@
+var $f8b3be23ba4462b1$exports = require("./useColor.main.js");
+var $8s2vy$reactstatelynumberfield = require("@react-stately/numberfield");
+var $8s2vy$reactstatelyutils = require("@react-stately/utils");
+var $8s2vy$react = require("react");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColorChannelFieldState", () => $9f9c35e37074b99b$export$b9fc0d69c9190c4a);
+
+
+
+
+function $9f9c35e37074b99b$export$b9fc0d69c9190c4a(props) {
+    let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
+    let initialValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.value);
+    let initialDefaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.defaultValue || "#0000");
+    let [colorValue, setColor] = (0, $8s2vy$reactstatelyutils.useControlledState)(initialValue || undefined, initialDefaultValue, props.onChange);
+    let color = (0, $8s2vy$react.useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
+    let value = color.getChannelValue(channel);
+    let range = color.getChannelRange(channel);
+    let formatOptions = (0, $8s2vy$react.useMemo)(()=>color.getChannelFormatOptions(channel), [
+        color,
+        channel
+    ]);
+    let multiplier = formatOptions.style === "percent" && range.maxValue === 100 ? 100 : 1;
+    let numberFieldState = (0, $8s2vy$reactstatelynumberfield.useNumberFieldState)({
+        locale: locale,
+        value: value / multiplier,
+        onChange: (v)=>setColor(color.withChannelValue(channel, v * multiplier)),
+        minValue: range.minValue / multiplier,
+        maxValue: range.maxValue / multiplier,
+        step: range.step / multiplier,
+        formatOptions: formatOptions
+    });
+    return {
+        ...numberFieldState,
+        colorValue: color
+    };
+}
+
+
+//# sourceMappingURL=useColorChannelFieldState.main.js.map

package/dist/useColorChannelFieldState.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;AAuBO,SAAS,0CAA0B,KAAoC;IAC5E,IAAI,WAAC,OAAO,cAAE,UAAU,UAAE,MAAM,EAAC,GAAG;IACpC,IAAI,eAAe,CAAA,GAAA,kCAAO,EAAE,MAAM,KAAK;IACvC,IAAI,sBAAsB,CAAA,GAAA,kCAAO,EAAE,MAAM,YAAY,IAAI;IACzD,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAE,gBAAgB,WAAW,qBAAqB,MAAM,QAAQ;IAC9G,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,cAAc,aAAa,WAAW,QAAQ,CAAC,cAAc,YAAY;QAAC;QAAY;KAAW;IAC3H,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,gBAAgB,CAAA,GAAA,oBAAM,EAAE,IAAM,MAAM,uBAAuB,CAAC,UAAU;QAAC;QAAO;KAAQ;IAC1F,IAAI,aAAa,cAAc,KAAK,KAAK,aAAa,MAAM,QAAQ,KAAK,MAAM,MAAM;IAErF,IAAI,mBAAmB,CAAA,GAAA,kDAAkB,EAAE;gBACzC;QACA,OAAO,QAAQ;QACf,UAAU,CAAC,IAAM,SAAS,MAAM,gBAAgB,CAAC,SAAS,IAAI;QAC9D,UAAU,MAAM,QAAQ,GAAG;QAC3B,UAAU,MAAM,QAAQ,GAAG;QAC3B,MAAM,MAAM,IAAI,GAAG;uBACnB;IACF;IAEA,OAAO;QACL,GAAG,gBAAgB;QACnB,YAAY;IACd;AACF","sources":["packages/@react-stately/color/src/useColorChannelFieldState.ts"],"sourcesContent":["import {Color, ColorChannel, ColorFieldProps, ColorSpace} from '@react-types/color';\nimport {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo} from 'react';\n\nexport interface ColorChannelFieldProps extends ColorFieldProps {\n  colorSpace?: ColorSpace,\n  channel: ColorChannel\n}\n\nexport interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {\n  locale: string\n}\n\nexport interface ColorChannelFieldState extends NumberFieldState {\n  colorValue: Color\n}\n\n/**\n * Provides state management for a color channel field, allowing users to edit the\n * value of an individual color channel.\n */\nexport function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState {\n  let {channel, colorSpace, locale} = props;\n  let initialValue = useColor(props.value);\n  let initialDefaultValue = useColor(props.defaultValue || '#0000')!;\n  let [colorValue, setColor] = useControlledState(initialValue || undefined, initialDefaultValue, props.onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n  let value = color.getChannelValue(channel);\n  let range = color.getChannelRange(channel);\n  let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [color, channel]);\n  let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;\n\n  let numberFieldState = useNumberFieldState({\n    locale,\n    value: value / multiplier,\n    onChange: (v) => setColor(color.withChannelValue(channel, v * multiplier)),\n    minValue: range.minValue / multiplier,\n    maxValue: range.maxValue / multiplier,\n    step: range.step / multiplier,\n    formatOptions\n  });\n\n  return {\n    ...numberFieldState,\n    colorValue: color\n  };\n}\n"],"names":[],"version":3,"file":"useColorChannelFieldState.main.js.map"}

package/dist/useColorChannelFieldState.mjs

@@ -0,0 +1,43 @@
+import {useColor as $aa90ad8b2b1d015f$export$5aadd9c0606af5c2} from "./useColor.mjs";
+import {useNumberFieldState as $52OvP$useNumberFieldState} from "@react-stately/numberfield";
+import {useControlledState as $52OvP$useControlledState} from "@react-stately/utils";
+import {useMemo as $52OvP$useMemo} from "react";
+
+
+
+
+
+function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
+    let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
+    let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
+    let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue || "#0000");
+    let [colorValue, setColor] = (0, $52OvP$useControlledState)(initialValue || undefined, initialDefaultValue, props.onChange);
+    let color = (0, $52OvP$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
+    let value = color.getChannelValue(channel);
+    let range = color.getChannelRange(channel);
+    let formatOptions = (0, $52OvP$useMemo)(()=>color.getChannelFormatOptions(channel), [
+        color,
+        channel
+    ]);
+    let multiplier = formatOptions.style === "percent" && range.maxValue === 100 ? 100 : 1;
+    let numberFieldState = (0, $52OvP$useNumberFieldState)({
+        locale: locale,
+        value: value / multiplier,
+        onChange: (v)=>setColor(color.withChannelValue(channel, v * multiplier)),
+        minValue: range.minValue / multiplier,
+        maxValue: range.maxValue / multiplier,
+        step: range.step / multiplier,
+        formatOptions: formatOptions
+    });
+    return {
+        ...numberFieldState,
+        colorValue: color
+    };
+}
+
+
+export {$31a863bb88e75dd6$export$b9fc0d69c9190c4a as useColorChannelFieldState};
+//# sourceMappingURL=useColorChannelFieldState.mjs.map

package/dist/useColorChannelFieldState.module.js

@@ -0,0 +1,43 @@
+import {useColor as $aa90ad8b2b1d015f$export$5aadd9c0606af5c2} from "./useColor.module.js";
+import {useNumberFieldState as $52OvP$useNumberFieldState} from "@react-stately/numberfield";
+import {useControlledState as $52OvP$useControlledState} from "@react-stately/utils";
+import {useMemo as $52OvP$useMemo} from "react";
+
+
+
+
+
+function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
+    let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
+    let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
+    let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue || "#0000");
+    let [colorValue, setColor] = (0, $52OvP$useControlledState)(initialValue || undefined, initialDefaultValue, props.onChange);
+    let color = (0, $52OvP$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
+    let value = color.getChannelValue(channel);
+    let range = color.getChannelRange(channel);
+    let formatOptions = (0, $52OvP$useMemo)(()=>color.getChannelFormatOptions(channel), [
+        color,
+        channel
+    ]);
+    let multiplier = formatOptions.style === "percent" && range.maxValue === 100 ? 100 : 1;
+    let numberFieldState = (0, $52OvP$useNumberFieldState)({
+        locale: locale,
+        value: value / multiplier,
+        onChange: (v)=>setColor(color.withChannelValue(channel, v * multiplier)),
+        minValue: range.minValue / multiplier,
+        maxValue: range.maxValue / multiplier,
+        step: range.step / multiplier,
+        formatOptions: formatOptions
+    });
+    return {
+        ...numberFieldState,
+        colorValue: color
+    };
+}
+
+
+export {$31a863bb88e75dd6$export$b9fc0d69c9190c4a as useColorChannelFieldState};
+//# sourceMappingURL=useColorChannelFieldState.module.js.map

package/dist/useColorChannelFieldState.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;AAuBO,SAAS,0CAA0B,KAAoC;IAC5E,IAAI,WAAC,OAAO,cAAE,UAAU,UAAE,MAAM,EAAC,GAAG;IACpC,IAAI,eAAe,CAAA,GAAA,yCAAO,EAAE,MAAM,KAAK;IACvC,IAAI,sBAAsB,CAAA,GAAA,yCAAO,EAAE,MAAM,YAAY,IAAI;IACzD,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAE,gBAAgB,WAAW,qBAAqB,MAAM,QAAQ;IAC9G,IAAI,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,cAAc,aAAa,WAAW,QAAQ,CAAC,cAAc,YAAY;QAAC;QAAY;KAAW;IAC3H,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,gBAAgB,CAAA,GAAA,cAAM,EAAE,IAAM,MAAM,uBAAuB,CAAC,UAAU;QAAC;QAAO;KAAQ;IAC1F,IAAI,aAAa,cAAc,KAAK,KAAK,aAAa,MAAM,QAAQ,KAAK,MAAM,MAAM;IAErF,IAAI,mBAAmB,CAAA,GAAA,0BAAkB,EAAE;gBACzC;QACA,OAAO,QAAQ;QACf,UAAU,CAAC,IAAM,SAAS,MAAM,gBAAgB,CAAC,SAAS,IAAI;QAC9D,UAAU,MAAM,QAAQ,GAAG;QAC3B,UAAU,MAAM,QAAQ,GAAG;QAC3B,MAAM,MAAM,IAAI,GAAG;uBACnB;IACF;IAEA,OAAO;QACL,GAAG,gBAAgB;QACnB,YAAY;IACd;AACF","sources":["packages/@react-stately/color/src/useColorChannelFieldState.ts"],"sourcesContent":["import {Color, ColorChannel, ColorFieldProps, ColorSpace} from '@react-types/color';\nimport {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo} from 'react';\n\nexport interface ColorChannelFieldProps extends ColorFieldProps {\n  colorSpace?: ColorSpace,\n  channel: ColorChannel\n}\n\nexport interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {\n  locale: string\n}\n\nexport interface ColorChannelFieldState extends NumberFieldState {\n  colorValue: Color\n}\n\n/**\n * Provides state management for a color channel field, allowing users to edit the\n * value of an individual color channel.\n */\nexport function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState {\n  let {channel, colorSpace, locale} = props;\n  let initialValue = useColor(props.value);\n  let initialDefaultValue = useColor(props.defaultValue || '#0000')!;\n  let [colorValue, setColor] = useControlledState(initialValue || undefined, initialDefaultValue, props.onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n  let value = color.getChannelValue(channel);\n  let range = color.getChannelRange(channel);\n  let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [color, channel]);\n  let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;\n\n  let numberFieldState = useNumberFieldState({\n    locale,\n    value: value / multiplier,\n    onChange: (v) => setColor(color.withChannelValue(channel, v * multiplier)),\n    minValue: range.minValue / multiplier,\n    maxValue: range.maxValue / multiplier,\n    step: range.step / multiplier,\n    formatOptions\n  });\n\n  return {\n    ...numberFieldState,\n    colorValue: color\n  };\n}\n"],"names":[],"version":3,"file":"useColorChannelFieldState.module.js.map"}

package/dist/useColorPickerState.main.js

@@ -0,0 +1,27 @@
+var $83fe1a57d631223b$exports = require("./Color.main.js");
+var $f8b3be23ba4462b1$exports = require("./useColor.main.js");
+var $1Pz5H$reactstatelyutils = require("@react-stately/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColorPickerState", () => $f31788ea48a5c383$export$dc6b73b623f8645f);
+
+
+
+function $f31788ea48a5c383$export$dc6b73b623f8645f(props) {
+    let value = (0, $f8b3be23ba4462b1$exports.useColor)(props.value);
+    let defaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.defaultValue || "#0000");
+    let [color, setColor] = (0, $1Pz5H$reactstatelyutils.useControlledState)(value || undefined, defaultValue, props.onChange);
+    return {
+        color: color,
+        setColor (color) {
+            setColor(color || (0, $83fe1a57d631223b$exports.parseColor)("#0000"));
+        }
+    };
+}
+
+
+//# sourceMappingURL=useColorPickerState.main.js.map

package/dist/useColorPickerState.main.js.map

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

package/dist/useColorPickerState.mjs

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

package/dist/useColorPickerState.module.js

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

package/dist/useColorPickerState.module.js.map

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

package/dist/useColorSliderState.main.js

@@ -1,6 +1,7 @@
 var $83fe1a57d631223b$exports = require("./Color.main.js");
 var $93tpS$reactstatelyslider = require("@react-stately/slider");
 var $93tpS$reactstatelyutils = require("@react-stately/utils");
+var $93tpS$react = require("react");
 
 
 function $parcel$export(e, n, v, s) {
@@ -21,10 +22,15 @@ $parcel$export(module.exports, "useColorSliderState", () => $5386a492cfd3234c$ex
  */ 
 
 
+
 function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
-    let { channel: channel, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, ...otherProps } = 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 [color, setColor] = (0, $93tpS$reactstatelyutils.useControlledState)(value && (0, $83fe1a57d631223b$exports.normalizeColor)(value), defaultValue && (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue), onChange);
+    let [colorValue, setColor] = (0, $93tpS$reactstatelyutils.useControlledState)(value && (0, $83fe1a57d631223b$exports.normalizeColor)(value), defaultValue && (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue), onChange);
+    let color = (0, $93tpS$react.useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
     let sliderState = (0, $93tpS$reactstatelyslider.useSliderState)({
         ...color.getChannelRange(channel),
         ...otherProps,
@@ -67,7 +73,8 @@ function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
             return color.formatChannelValue(channel, locale);
         },
         step: step,
-        pageSize: pageSize
+        pageSize: pageSize,
+        isDragging: sliderState.isThumbDragging(0)
     };
 }
 

package/dist/useColorSliderState.main.js.map

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

package/dist/useColorSliderState.mjs

@@ -1,6 +1,7 @@
 import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
 import {useSliderState as $1Eavr$useSliderState} from "@react-stately/slider";
 import {useControlledState as $1Eavr$useControlledState} from "@react-stately/utils";
+import {useMemo as $1Eavr$useMemo} from "react";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -15,10 +16,15 @@ import {useControlledState as $1Eavr$useControlledState} from "@react-stately/ut
  */ 
 
 
+
 function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
-    let { channel: channel, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, ...otherProps } = 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 [color, setColor] = (0, $1Eavr$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let [colorValue, setColor] = (0, $1Eavr$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let color = (0, $1Eavr$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
     let sliderState = (0, $1Eavr$useSliderState)({
         ...color.getChannelRange(channel),
         ...otherProps,
@@ -61,7 +67,8 @@ function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
             return color.formatChannelValue(channel, locale);
         },
         step: step,
-        pageSize: pageSize
+        pageSize: pageSize,
+        isDragging: sliderState.isThumbDragging(0)
     };
 }
 

package/dist/useColorSliderState.module.js

@@ -1,6 +1,7 @@
 import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
 import {useSliderState as $1Eavr$useSliderState} from "@react-stately/slider";
 import {useControlledState as $1Eavr$useControlledState} from "@react-stately/utils";
+import {useMemo as $1Eavr$useMemo} from "react";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -15,10 +16,15 @@ import {useControlledState as $1Eavr$useControlledState} from "@react-stately/ut
  */ 
 
 
+
 function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
-    let { channel: channel, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, ...otherProps } = 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 [color, setColor] = (0, $1Eavr$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let [colorValue, setColor] = (0, $1Eavr$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let color = (0, $1Eavr$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
     let sliderState = (0, $1Eavr$useSliderState)({
         ...color.getChannelRange(channel),
         ...otherProps,
@@ -61,7 +67,8 @@ function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
             return color.formatChannelValue(channel, locale);
         },
         step: step,
-        pageSize: pageSize
+        pageSize: pageSize,
+        isDragging: sliderState.isThumbDragging(0)
     };
 }
 

package/dist/useColorSliderState.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AA0BM,SAAS,0CAAoB,KAA8B;IAChE,IAAI,WAAC,OAAO,SAAE,KAAK,gBAAE,YAAY,YAAE,QAAQ,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IACtE,IAAI,SAAS,QAAQ,gBAAgB,MACnC,MAAM,IAAI,MAAM;IAGlB,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAE,SAAS,CAAA,GAAA,yCAAa,EAAE,QAAQ,gBAAgB,CAAA,GAAA,yCAAa,EAAE,eAAe;IACzH,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;IACF;AACF","sources":["packages/@react-stately/color/src/useColorSliderState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Color, ColorSliderProps} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {SliderState, useSliderState} from '@react-stately/slider';\nimport {useControlledState} from '@react-stately/utils';\n\nexport interface ColorSliderState extends SliderState {\n  /** The current color value represented by the color slider. */\n  readonly value: Color,\n  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n  setValue(value: string | Color): void,\n  /** Returns the color that should be displayed in the slider instead of `value` or the optional parameter. */\n  getDisplayColor(): Color\n}\n\n\nexport interface ColorSliderStateOptions extends ColorSliderProps {\n  /** The locale to use for formatting the color channel value. */\n  locale: string\n}\n\n/**\n * Provides state management for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSliderState(props: ColorSliderStateOptions): ColorSliderState {\n  let {channel, value, defaultValue, onChange, locale, ...otherProps} = props;\n  if (value == null && defaultValue == null) {\n    throw new Error('useColorSliderState requires a value or defaultValue');\n  }\n\n  let [color, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);\n  let sliderState = useSliderState({\n    ...color.getChannelRange(channel),\n    ...otherProps,\n    // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.\n    numberFormatter: null,\n    value: color.getChannelValue(channel),\n    onChange(v) {\n      setColor(color.withChannelValue(channel, v));\n    },\n    onChangeEnd(v) {\n      // onChange will have already been called with the right value, this is just to trigger onChangeEnd\n      if (props.onChangeEnd) {\n        props.onChangeEnd(color.withChannelValue(channel, v));\n      }\n    }\n  });\n\n  let {step, pageSize} = color.getChannelRange(channel);\n  return {\n    ...sliderState,\n    value: color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    getDisplayColor() {\n      switch (channel) {\n        case 'hue':\n          return parseColor(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`);\n        case 'lightness':\n        case 'brightness':\n        case 'saturation':\n        case 'red':\n        case 'green':\n        case 'blue':\n          return color.withChannelValue('alpha', 1);\n        case 'alpha': {\n          return color;\n        }\n        default:\n          throw new Error('Unknown color channel: ' + channel);\n      }\n    },\n    getThumbValueLabel() {\n      return color.formatChannelValue(channel, locale);\n    },\n    step,\n    pageSize\n  };\n}\n"],"names":[],"version":3,"file":"useColorSliderState.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,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"}

package/dist/useColorWheelState.main.js

@@ -56,7 +56,13 @@ function $9d7d8736d45f74b8$var$cartesianToAngle(x, y, radius) {
 function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
     let { defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
     if (!props.value && !defaultValue) defaultValue = $9d7d8736d45f74b8$var$DEFAULT_COLOR;
-    let [value, setValueState] = (0, $5Frb2$reactstatelyutils.useControlledState)((0, $83fe1a57d631223b$exports.normalizeColor)(props.value), (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue), onChange);
+    let [stateValue, setValueState] = (0, $5Frb2$reactstatelyutils.useControlledState)((0, $83fe1a57d631223b$exports.normalizeColor)(props.value), (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue), onChange);
+    let value = (0, $5Frb2$react.useMemo)(()=>{
+        let colorSpace = stateValue.getColorSpace();
+        return colorSpace === "hsl" || colorSpace === "hsb" ? stateValue : stateValue.toFormat("hsl");
+    }, [
+        stateValue
+    ]);
     let valueRef = (0, $5Frb2$react.useRef)(value);
     let setValue = (value)=>{
         valueRef.current = value;
@@ -115,7 +121,8 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
         isDragging: isDragging,
         getDisplayColor () {
             return value.toFormat("hsl").withChannelValue("saturation", 100).withChannelValue("lightness", 50).withChannelValue("alpha", 1);
-        }
+        },
+        isDisabled: props.isDisabled || false
     };
 }