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

package/dist/useColorWheelState.main.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 {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\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 [value, setValueState] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange);\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  };\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 {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"}

package/dist/useColorWheelState.mjs

@@ -1,6 +1,6 @@
 import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
 import {useControlledState as $d4Pfi$useControlledState} from "@react-stately/utils";
-import {useRef as $d4Pfi$useRef, useState as $d4Pfi$useState} from "react";
+import {useMemo as $d4Pfi$useMemo, useRef as $d4Pfi$useRef, useState as $d4Pfi$useState} from "react";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -50,7 +50,13 @@ function $ee4262c74a467b07$var$cartesianToAngle(x, y, radius) {
 function $ee4262c74a467b07$export$f4301076d9336137(props) {
     let { defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
     if (!props.value && !defaultValue) defaultValue = $ee4262c74a467b07$var$DEFAULT_COLOR;
-    let [value, setValueState] = (0, $d4Pfi$useControlledState)((0, $799cddbef784668f$export$4cde5df63f53f473)(props.value), (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let [stateValue, setValueState] = (0, $d4Pfi$useControlledState)((0, $799cddbef784668f$export$4cde5df63f53f473)(props.value), (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let value = (0, $d4Pfi$useMemo)(()=>{
+        let colorSpace = stateValue.getColorSpace();
+        return colorSpace === "hsl" || colorSpace === "hsb" ? stateValue : stateValue.toFormat("hsl");
+    }, [
+        stateValue
+    ]);
     let valueRef = (0, $d4Pfi$useRef)(value);
     let setValue = (value)=>{
         valueRef.current = value;
@@ -109,7 +115,8 @@ function $ee4262c74a467b07$export$f4301076d9336137(props) {
         isDragging: isDragging,
         getDisplayColor () {
             return value.toFormat("hsl").withChannelValue("saturation", 100).withChannelValue("lightness", 50).withChannelValue("alpha", 1);
-        }
+        },
+        isDisabled: props.isDisabled || false
     };
 }
 

package/dist/useColorWheelState.module.js

@@ -1,6 +1,6 @@
 import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
 import {useControlledState as $d4Pfi$useControlledState} from "@react-stately/utils";
-import {useRef as $d4Pfi$useRef, useState as $d4Pfi$useState} from "react";
+import {useMemo as $d4Pfi$useMemo, useRef as $d4Pfi$useRef, useState as $d4Pfi$useState} from "react";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -50,7 +50,13 @@ function $ee4262c74a467b07$var$cartesianToAngle(x, y, radius) {
 function $ee4262c74a467b07$export$f4301076d9336137(props) {
     let { defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
     if (!props.value && !defaultValue) defaultValue = $ee4262c74a467b07$var$DEFAULT_COLOR;
-    let [value, setValueState] = (0, $d4Pfi$useControlledState)((0, $799cddbef784668f$export$4cde5df63f53f473)(props.value), (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let [stateValue, setValueState] = (0, $d4Pfi$useControlledState)((0, $799cddbef784668f$export$4cde5df63f53f473)(props.value), (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let value = (0, $d4Pfi$useMemo)(()=>{
+        let colorSpace = stateValue.getColorSpace();
+        return colorSpace === "hsl" || colorSpace === "hsb" ? stateValue : stateValue.toFormat("hsl");
+    }, [
+        stateValue
+    ]);
     let valueRef = (0, $d4Pfi$useRef)(value);
     let setValue = (value)=>{
         valueRef.current = value;
@@ -109,7 +115,8 @@ function $ee4262c74a467b07$export$f4301076d9336137(props) {
         isDragging: isDragging,
         getDisplayColor () {
             return value.toFormat("hsl").withChannelValue("saturation", 100).withChannelValue("lightness", 50).withChannelValue("alpha", 1);
-        }
+        },
+        isDisabled: props.isDisabled || false
     };
 }
 

package/dist/useColorWheelState.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAwCD,MAAM,sCAAgB,CAAA,GAAA,wCAAS,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,OAAO,cAAc,GAAG,CAAA,GAAA,yBAAiB,EAAE,CAAA,GAAA,yCAAa,EAAE,MAAM,KAAK,GAAG,CAAA,GAAA,yCAAa,EAAE,eAAe;IAC3G,IAAI,WAAW,CAAA,GAAA,aAAK,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,eAAO,EAAE;IACzC,IAAI,gBAAgB,CAAA,GAAA,aAAK,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,yCAAa,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;IACF;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 {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\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 [value, setValueState] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange);\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  };\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 {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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/color",
-  "version": "3.5.4-nightly.4569+1550ccaa6",
+  "version": "3.5.4-nightly.4578+b09a14eb1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,13 +22,15 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/number": "3.5.2-nightly.4569+1550ccaa6",
-    "@internationalized/string": "3.2.2-nightly.4569+1550ccaa6",
-    "@react-aria/i18n": "3.0.0-nightly.2857+1550ccaa6",
-    "@react-stately/form": "3.0.2-nightly.4569+1550ccaa6",
-    "@react-stately/slider": "3.5.3-nightly.4569+1550ccaa6",
-    "@react-stately/utils": "3.0.0-nightly.2857+1550ccaa6",
-    "@react-types/color": "3.0.0-nightly.4569+1550ccaa6",
+    "@internationalized/number": "3.5.2-nightly.4578+b09a14eb1",
+    "@internationalized/string": "3.2.2-nightly.4578+b09a14eb1",
+    "@react-aria/i18n": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-stately/form": "3.0.2-nightly.4578+b09a14eb1",
+    "@react-stately/numberfield": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-stately/slider": "3.5.3-nightly.4578+b09a14eb1",
+    "@react-stately/utils": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-types/color": "3.0.0-nightly.4578+b09a14eb1",
+    "@react-types/shared": "3.0.0-nightly.2866+b09a14eb1",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -37,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1550ccaa62363b65079eb2e36563380db0e7c043"
+  "gitHead": "b09a14eb1854d9d52e08739e30aa8fae51f1595a"
 }

package/src/Color.ts

@@ -11,7 +11,7 @@
  */
 
 import {clamp, toFixedNumber} from '@react-stately/utils';
-import {ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, Color as IColor} from '@react-types/color';
+import {ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace, Color as IColor} from '@react-types/color';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string';
@@ -37,6 +37,18 @@ export function normalizeColor(v: string | IColor) {
   }
 }
 
+/** Returns a list of color channels for a given color space. */
+export function getColorChannels(colorSpace: ColorSpace) {
+  switch (colorSpace) {
+    case 'rgb':
+      return RGBColor.colorChannels;
+    case 'hsl':
+      return HSLColor.colorChannels;
+    case 'hsb':
+      return HSBColor.colorChannels;
+  }
+}
+
 // Lightness threshold between orange and brown.
 const ORANGE_LIGHTNESS_THRESHOLD = 0.68;
 // Lightness threshold between pure yellow and "yellow green".
@@ -63,6 +75,7 @@ abstract class Color implements IColor {
   abstract toString(format: ColorFormat | 'css'): string;
   abstract clone(): IColor;
   abstract getChannelRange(channel: ColorChannel): ColorChannelRange;
+  abstract getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions;
   abstract formatChannelValue(channel: ColorChannel, locale: string): string;
 
   toHexInt(): number {
@@ -92,7 +105,8 @@ abstract class Color implements IColor {
     return strings.getStringForLocale(channel, locale);
   }
 
-  abstract getColorSpace(): ColorFormat
+  abstract getColorSpace(): ColorSpace;
+
   getColorSpaceAxes(xyChannels: {xChannel?: ColorChannel, yChannel?: ColorChannel}): ColorAxes {
     let {xChannel, yChannel} = xyChannels;
     let xCh = xChannel || this.getColorChannels().find(c => c !== yChannel);
@@ -240,7 +254,7 @@ class RGBColor extends Color {
     return colors.length < 3 ? undefined : new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1);
   }
 
-  toString(format: ColorFormat | 'css') {
+  toString(format: ColorFormat | 'css' = 'css') {
     switch (format) {
       case 'hex':
         return '#' + (this.red.toString(16).padStart(2, '0') + this.green.toString(16).padStart(2, '0') + this.blue.toString(16).padStart(2, '0')).toUpperCase();
@@ -377,29 +391,30 @@ class RGBColor extends Color {
     }
   }
 
-  formatChannelValue(channel: ColorChannel, locale: string) {
-    let options: Intl.NumberFormatOptions;
-    let value = this.getChannelValue(channel);
+  getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
     switch (channel) {
       case 'red':
       case 'green':
       case 'blue':
-        options = {style: 'decimal'};
-        break;
+        return {style: 'decimal'};
       case 'alpha':
-        options = {style: 'percent'};
-        break;
+        return {style: 'percent'};
       default:
         throw new Error('Unknown color channel: ' + channel);
     }
+  }
+
+  formatChannelValue(channel: ColorChannel, locale: string) {
+    let options = this.getChannelFormatOptions(channel);
+    let value = this.getChannelValue(channel);
     return new NumberFormatter(locale, options).format(value);
   }
 
-  getColorSpace(): ColorFormat {
+  getColorSpace(): ColorSpace {
     return 'rgb';
   }
 
-  private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['red', 'green', 'blue'];
+  static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['red', 'green', 'blue'];
   getColorChannels(): [ColorChannel, ColorChannel, ColorChannel] {
     return RGBColor.colorChannels;
   }
@@ -424,7 +439,7 @@ class HSBColor extends Color {
     }
   }
 
-  toString(format: ColorFormat | 'css') {
+  toString(format: ColorFormat | 'css' = 'css') {
     switch (format) {
       case 'css':
         return this.toHSL().toString('css');
@@ -512,32 +527,33 @@ class HSBColor extends Color {
     }
   }
 
-  formatChannelValue(channel: ColorChannel, locale: string) {
-    let options: Intl.NumberFormatOptions;
-    let value = this.getChannelValue(channel);
+  getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
     switch (channel) {
       case 'hue':
-        options = {style: 'unit', unit: 'degree', unitDisplay: 'narrow'};
-        break;
+        return {style: 'unit', unit: 'degree', unitDisplay: 'narrow'};
       case 'saturation':
       case 'brightness':
-        options = {style: 'percent'};
-        value /= 100;
-        break;
       case 'alpha':
-        options = {style: 'percent'};
-        break;
+        return {style: 'percent'};
       default:
         throw new Error('Unknown color channel: ' + channel);
     }
+  }
+
+  formatChannelValue(channel: ColorChannel, locale: string) {
+    let options = this.getChannelFormatOptions(channel);
+    let value = this.getChannelValue(channel);
+    if (channel === 'saturation' || channel === 'brightness') {
+      value /= 100;
+    }
     return new NumberFormatter(locale, options).format(value);
   }
 
-  getColorSpace(): ColorFormat {
+  getColorSpace(): ColorSpace {
     return 'hsb';
   }
 
-  private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['hue', 'saturation', 'brightness'];
+  static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['hue', 'saturation', 'brightness'];
   getColorChannels(): [ColorChannel, ColorChannel, ColorChannel] {
     return HSBColor.colorChannels;
   }
@@ -566,7 +582,7 @@ class HSLColor extends Color {
     }
   }
 
-  toString(format: ColorFormat | 'css') {
+  toString(format: ColorFormat | 'css' = 'css') {
     switch (format) {
       case 'hex':
         return this.toRGB().toString('hex');
@@ -652,32 +668,33 @@ class HSLColor extends Color {
     }
   }
 
-  formatChannelValue(channel: ColorChannel, locale: string) {
-    let options: Intl.NumberFormatOptions;
-    let value = this.getChannelValue(channel);
+  getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
     switch (channel) {
       case 'hue':
-        options = {style: 'unit', unit: 'degree', unitDisplay: 'narrow'};
-        break;
+        return {style: 'unit', unit: 'degree', unitDisplay: 'narrow'};
       case 'saturation':
       case 'lightness':
-        options = {style: 'percent'};
-        value /= 100;
-        break;
       case 'alpha':
-        options = {style: 'percent'};
-        break;
+        return {style: 'percent'};
       default:
         throw new Error('Unknown color channel: ' + channel);
     }
+  }
+
+  formatChannelValue(channel: ColorChannel, locale: string) {
+    let options = this.getChannelFormatOptions(channel);
+    let value = this.getChannelValue(channel);
+    if (channel === 'saturation' || channel === 'lightness') {
+      value /= 100;
+    }
     return new NumberFormatter(locale, options).format(value);
   }
 
-  getColorSpace(): ColorFormat {
+  getColorSpace(): ColorSpace {
     return 'hsl';
   }
 
-  private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['hue', 'saturation', 'lightness'];
+  static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['hue', 'saturation', 'lightness'];
   getColorChannels(): [ColorChannel, ColorChannel, ColorChannel] {
     return HSLColor.colorChannels;
   }

package/src/index.ts

@@ -14,12 +14,16 @@ export type {ColorAreaState} from './useColorAreaState';
 export type {ColorSliderState} from './useColorSliderState';
 export type {ColorWheelState} from './useColorWheelState';
 export type {ColorFieldState} from './useColorFieldState';
+export type {ColorChannelFieldProps, ColorChannelFieldState, ColorChannelFieldStateOptions} from './useColorChannelFieldState';
+export type {ColorPickerProps, ColorPickerState} from './useColorPickerState';
 
-export {parseColor} from './Color';
+export {parseColor, getColorChannels} from './Color';
 export {useColorAreaState} from './useColorAreaState';
 export {useColorSliderState} from './useColorSliderState';
 export {useColorWheelState} from './useColorWheelState';
 export {useColorFieldState} from './useColorFieldState';
+export {useColorChannelFieldState} from './useColorChannelFieldState';
+export {useColorPickerState} from './useColorPickerState';
 
 export type {Color, ColorAreaProps, ColorFieldProps, ColorWheelProps} from '@react-types/color';
 export type {ColorSliderStateOptions} from './useColorSliderState';

package/src/useColorAreaState.ts

@@ -75,6 +75,7 @@ export function useColorAreaState(props: ColorAreaProps): ColorAreaState {
   let {
     value,
     defaultValue,
+    colorSpace,
     xChannel,
     yChannel,
     onChange,
@@ -85,7 +86,8 @@ export function useColorAreaState(props: ColorAreaProps): ColorAreaState {
     defaultValue = DEFAULT_COLOR;
   }
 
-  let [color, setColorState] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);
+  let [colorValue, setColorState] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);
+  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);
   let valueRef = useRef(color);
   let setColor = (color: Color) => {
     valueRef.current = color;

package/src/useColorChannelFieldState.ts

@@ -0,0 +1,49 @@
+import {Color, ColorChannel, ColorFieldProps, ColorSpace} from '@react-types/color';
+import {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';
+import {useColor} from './useColor';
+import {useControlledState} from '@react-stately/utils';
+import {useMemo} from 'react';
+
+export interface ColorChannelFieldProps extends ColorFieldProps {
+  colorSpace?: ColorSpace,
+  channel: ColorChannel
+}
+
+export interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {
+  locale: string
+}
+
+export interface ColorChannelFieldState extends NumberFieldState {
+  colorValue: Color
+}
+
+/**
+ * Provides state management for a color channel field, allowing users to edit the
+ * value of an individual color channel.
+ */
+export function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState {
+  let {channel, colorSpace, locale} = props;
+  let initialValue = useColor(props.value);
+  let initialDefaultValue = useColor(props.defaultValue || '#0000')!;
+  let [colorValue, setColor] = useControlledState(initialValue || undefined, initialDefaultValue, props.onChange);
+  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);
+  let value = color.getChannelValue(channel);
+  let range = color.getChannelRange(channel);
+  let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [color, channel]);
+  let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;
+
+  let numberFieldState = useNumberFieldState({
+    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
+  });
+
+  return {
+    ...numberFieldState,
+    colorValue: color
+  };
+}

package/src/useColorPickerState.ts

@@ -0,0 +1,27 @@
+import {Color} from '@react-types/color';
+import {parseColor} from './Color';
+import {useColor} from './useColor';
+import {useControlledState} from '@react-stately/utils';
+import {ValueBase} from '@react-types/shared';
+
+export interface ColorPickerProps extends ValueBase<string | Color | null, Color> {}
+
+export interface ColorPickerState {
+  /** The current color value of the color picker. */
+  color: Color,
+  /** Sets the current color value of the color picker. */
+  setColor(color: Color | null): void
+}
+
+export function useColorPickerState(props: ColorPickerProps): ColorPickerState {
+  let value = useColor(props.value);
+  let defaultValue = useColor(props.defaultValue || '#0000')!;
+  let [color, setColor] = useControlledState(value || undefined, defaultValue, props.onChange);
+  
+  return {
+    color,
+    setColor(color) {
+      setColor(color || parseColor('#0000'));
+    }
+  };
+}

package/src/useColorSliderState.ts

@@ -14,6 +14,7 @@ import {Color, ColorSliderProps} from '@react-types/color';
 import {normalizeColor, parseColor} from './Color';
 import {SliderState, useSliderState} from '@react-stately/slider';
 import {useControlledState} from '@react-stately/utils';
+import {useMemo} from 'react';
 
 export interface ColorSliderState extends SliderState {
   /** The current color value represented by the color slider. */
@@ -21,7 +22,9 @@ export interface ColorSliderState extends SliderState {
   /** Sets the current color value. If a string is passed, it will be parsed to a Color. */
   setValue(value: string | Color): void,
   /** Returns the color that should be displayed in the slider instead of `value` or the optional parameter. */
-  getDisplayColor(): Color
+  getDisplayColor(): Color,
+  /** Whether the color slider is currently being dragged. */
+  readonly isDragging: boolean
 }
 
 
@@ -35,12 +38,13 @@ export interface ColorSliderStateOptions extends ColorSliderProps {
  * Color sliders allow users to adjust an individual channel of a color value.
  */
 export function useColorSliderState(props: ColorSliderStateOptions): ColorSliderState {
-  let {channel, value, defaultValue, onChange, locale, ...otherProps} = props;
+  let {channel, colorSpace, value, defaultValue, onChange, locale, ...otherProps} = props;
   if (value == null && defaultValue == null) {
     throw new Error('useColorSliderState requires a value or defaultValue');
   }
 
-  let [color, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);
+  let [colorValue, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);
+  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);
   let sliderState = useSliderState({
     ...color.getChannelRange(channel),
     ...otherProps,
@@ -87,6 +91,7 @@ export function useColorSliderState(props: ColorSliderStateOptions): ColorSlider
       return color.formatChannelValue(channel, locale);
     },
     step,
-    pageSize
+    pageSize,
+    isDragging: sliderState.isThumbDragging(0)
   };
 }

package/src/useColorWheelState.ts

@@ -13,7 +13,7 @@
 import {Color, ColorWheelProps} from '@react-types/color';
 import {normalizeColor, parseColor} from './Color';
 import {useControlledState} from '@react-stately/utils';
-import {useRef, useState} from 'react';
+import {useMemo, useRef, useState} from 'react';
 
 export interface ColorWheelState {
   /** The current color value represented by the color wheel. */
@@ -45,7 +45,10 @@ export interface ColorWheelState {
   /** The step value of the hue channel, used when incrementing and decrementing. */
   step: number,
   /** The page step value of the hue channel, used when incrementing and decrementing. */
-  pageStep: number
+  pageStep: number,
+
+  /** Whether the color wheel is disabled. */
+  readonly isDisabled: boolean
 }
 
 const DEFAULT_COLOR = parseColor('hsl(0, 100%, 50%)');
@@ -99,7 +102,11 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
     defaultValue = DEFAULT_COLOR;
   }
 
-  let [value, setValueState] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange);
+  let [stateValue, setValueState] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange);
+  let value = useMemo(() => {
+    let colorSpace = stateValue.getColorSpace();
+    return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');
+  }, [stateValue]);
   let valueRef = useRef(value);
   let setValue = (value: Color) => {
     valueRef.current = value;
@@ -172,6 +179,7 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
     isDragging,
     getDisplayColor() {
       return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1);
-    }
+    },
+    isDisabled: props.isDisabled || false
   };
 }