@react-stately/color 3.8.6 → 3.9.0

package/dist/types.d.ts

@@ -10,6 +10,8 @@ export function getColorChannels(colorSpace: ColorSpace): [ColorChannel, ColorCh
 export interface ColorAreaState {
     /** The current color value displayed by the color area. */
     readonly value: Color;
+    /** The default value of the color area. */
+    readonly defaultValue: Color;
     /** Sets the current color value. If a string is passed, it will be parsed to a Color. */
     setValue(value: string | Color): void;
     /** The current value of the horizontal axis channel displayed by the color area. */
@@ -83,6 +85,8 @@ export function useColorSliderState(props: ColorSliderStateOptions): ColorSlider
 export interface ColorWheelState {
     /** The current color value represented by the color wheel. */
     readonly value: Color;
+    /** The default color value. */
+    readonly defaultValue: Color;
     /** Sets the color value represented by the color wheel, and triggers `onChange`. */
     setValue(value: string | Color): void;
     /** The current value of the hue channel displayed by the color wheel. */
@@ -129,6 +133,10 @@ export interface ColorFieldState extends FormValidationState {
      * Updated based on the `inputValue` as the user types.
      */
     readonly colorValue: Color | null;
+    /** The default value of the color field. */
+    readonly defaultColorValue: Color | null;
+    /** Sets the color value of the field. */
+    setColorValue(value: Color | null): void;
     /** Sets the current text value of the input. */
     setInputValue(value: string): void;
     /**
@@ -164,7 +172,12 @@ export interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {
     locale: string;
 }
 export interface ColorChannelFieldState extends NumberFieldState {
+    /** The current value of the field. */
     colorValue: Color;
+    /** The default value of the field. */
+    defaultColorValue: Color | null;
+    /** Sets the color value of the field. */
+    setColorValue(value: Color | null): void;
 }
 /**
  * Provides state management for a color channel field, allowing users to edit the

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/color/src/packages/@react-stately/color/src/Color.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorAreaState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorSliderState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorWheelState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColor.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorFieldState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorChannelFieldState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorPickerState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/index.ts","packages/@react-stately/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\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\nexport type {ColorAreaState} from './useColorAreaState';\nexport type {ColorSliderState} from './useColorSliderState';\nexport type {ColorWheelState} from './useColorWheelState';\nexport type {ColorFieldState} from './useColorFieldState';\nexport type {ColorChannelFieldProps, ColorChannelFieldState, ColorChannelFieldStateOptions} from './useColorChannelFieldState';\nexport type {ColorPickerProps, ColorPickerState} from './useColorPickerState';\n\nexport {parseColor, getColorChannels} from './Color';\nexport {useColorAreaState} from './useColorAreaState';\nexport {useColorSliderState} from './useColorSliderState';\nexport {useColorWheelState} from './useColorWheelState';\nexport {useColorFieldState} from './useColorFieldState';\nexport {useColorChannelFieldState} from './useColorChannelFieldState';\nexport {useColorPickerState} from './useColorPickerState';\n\nexport type {Color, ColorChannel, ColorFormat, ColorSpace, ColorAreaProps, ColorFieldProps, ColorWheelProps} from '@react-types/color';\nexport type {ColorSliderStateOptions} from './useColorSliderState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","sources":["packages/@react-stately/color/src/packages/@react-stately/color/src/Color.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorAreaState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorSliderState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorWheelState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColor.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorFieldState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorChannelFieldState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorPickerState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/index.ts","packages/@react-stately/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\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\nexport type {ColorAreaState} from './useColorAreaState';\nexport type {ColorSliderState} from './useColorSliderState';\nexport type {ColorWheelState} from './useColorWheelState';\nexport type {ColorFieldState} from './useColorFieldState';\nexport type {ColorChannelFieldProps, ColorChannelFieldState, ColorChannelFieldStateOptions} from './useColorChannelFieldState';\nexport type {ColorPickerProps, ColorPickerState} from './useColorPickerState';\n\nexport {parseColor, getColorChannels} from './Color';\nexport {useColorAreaState} from './useColorAreaState';\nexport {useColorSliderState} from './useColorSliderState';\nexport {useColorWheelState} from './useColorWheelState';\nexport {useColorFieldState} from './useColorFieldState';\nexport {useColorChannelFieldState} from './useColorChannelFieldState';\nexport {useColorPickerState} from './useColorPickerState';\n\nexport type {Color, ColorChannel, ColorFormat, ColorSpace, ColorAreaProps, ColorFieldProps, ColorWheelProps} from '@react-types/color';\nexport type {ColorSliderStateOptions} from './useColorSliderState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/useColorAreaState.main.js

@@ -29,6 +29,7 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
     if (defaultValue) defaultValue = (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue);
     // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
     let [colorValue, setColorState] = (0, $318Do$reactstatelyutils.useControlledState)(value, defaultValue, onChange);
+    let [initialValue] = (0, $318Do$react.useState)(colorValue);
     let color = (0, $318Do$react.useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
         colorValue,
         colorSpace
@@ -71,6 +72,7 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
         xChannelPageStep: pageSizeX,
         yChannelPageStep: pageSizeY,
         value: color,
+        defaultValue: value !== undefined ? initialValue : defaultValue,
         setValue (value) {
             setColor((0, $83fe1a57d631223b$exports.normalizeColor)(value));
         },

package/dist/useColorAreaState.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/color/src/useColorAreaState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {Color, ColorAreaProps, ColorChannel} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorAreaState {\n  /** The current color value displayed by the color area. */\n  readonly value: Color,\n  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n  setValue(value: string | Color): void,\n\n  /** The current value of the horizontal axis channel displayed by the color area. */\n  xValue: number,\n  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n  setXValue(value: number): void,\n\n  /** The current value of the vertical axis channel displayed by the color area. */\n  yValue: number,\n  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n  setYValue(value: number): void,\n\n  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n  setColorFromPoint(x: number, y: number): void,\n  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n  getThumbPosition(): {x: number, y: number},\n\n  /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n  incrementX(stepSize?: number): void,\n  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n  decrementX(stepSize?: number): void,\n\n  /** Increments the value of the vertical axis channel by the channel step or page amount. */\n  incrementY(stepSize?: number): void,\n  /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n  decrementY(stepSize?: number): void,\n\n  /** Whether the color area is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color area is being dragged. */\n  setDragging(value: boolean): void,\n\n  /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n  /** The step value of the xChannel, used when incrementing and decrementing. */\n  xChannelStep: number,\n  /** The step value of the yChannel, used when incrementing and decrementing. */\n  yChannelStep: number,\n  /** The page step value of the xChannel, used when incrementing and decrementing. */\n  xChannelPageStep: number,\n  /** The page step value of the yChannel, used when incrementing and decrementing. */\n  yChannelPageStep: number,\n\n  /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n  getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n  let {\n    value,\n    defaultValue,\n    colorSpace,\n    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n  if (value) {\n    value = normalizeColor(value);\n  }\n  if (defaultValue) {\n    defaultValue = normalizeColor(defaultValue);\n  }\n\n  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default\n  let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n  let valueRef = useRef(color);\n  let setColor = (color: Color) => {\n    valueRef.current = color;\n    setColorState(color);\n  };\n\n  let channels = useMemo(() =>\n    color.getColorSpaceAxes({xChannel, yChannel}),\n    [color, xChannel, yChannel]\n  );\n\n  let xChannelRange = color.getChannelRange(channels.xChannel);\n  let yChannelRange = color.getChannelRange(channels.yChannel);\n  let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;\n  let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;\n\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let xValue = color.getChannelValue(channels.xChannel);\n  let yValue = color.getChannelValue(channels.yChannel);\n  let setXValue = (v: number) => {\n    if (v === xValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.xChannel, v);\n    setColor(newColor);\n  };\n  let setYValue = (v: number) => {\n    if (v === yValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.yChannel, v);\n    setColor(newColor);\n  };\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    value: color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    xValue,\n    setXValue,\n    yValue,\n    setYValue,\n    setColorFromPoint(x: number, y: number) {\n      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n      let newColor: Color | undefined;\n      if (newXValue !== xValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n        newColor = color.withChannelValue(channels.xChannel, newXValue);\n      }\n      if (newYValue !== yValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n      }\n      if (newColor) {\n        setColor(newColor);\n      }\n    },\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX);\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n      return {x, y};\n    },\n    incrementX(stepSize = 1) {\n      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n    },\n    incrementY(stepSize = 1) {\n      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n    },\n    decrementX(stepSize = 1) {\n      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n    },\n    decrementY(stepSize = 1) {\n      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return color.withChannelValue('alpha', 1);\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.main.js.map"}
+{"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  /** The default value of the color area. */\n  readonly defaultValue: Color,\n  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n  setValue(value: string | Color): void,\n\n  /** The current value of the horizontal axis channel displayed by the color area. */\n  xValue: number,\n  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n  setXValue(value: number): void,\n\n  /** The current value of the vertical axis channel displayed by the color area. */\n  yValue: number,\n  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n  setYValue(value: number): void,\n\n  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n  setColorFromPoint(x: number, y: number): void,\n  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n  getThumbPosition(): {x: number, y: number},\n\n  /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n  incrementX(stepSize?: number): void,\n  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n  decrementX(stepSize?: number): void,\n\n  /** Increments the value of the vertical axis channel by the channel step or page amount. */\n  incrementY(stepSize?: number): void,\n  /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n  decrementY(stepSize?: number): void,\n\n  /** Whether the color area is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color area is being dragged. */\n  setDragging(value: boolean): void,\n\n  /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n  /** The step value of the xChannel, used when incrementing and decrementing. */\n  xChannelStep: number,\n  /** The step value of the yChannel, used when incrementing and decrementing. */\n  yChannelStep: number,\n  /** The page step value of the xChannel, used when incrementing and decrementing. */\n  xChannelPageStep: number,\n  /** The page step value of the yChannel, used when incrementing and decrementing. */\n  yChannelPageStep: number,\n\n  /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n  getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n  let {\n    value,\n    defaultValue,\n    colorSpace,\n    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n  if (value) {\n    value = normalizeColor(value);\n  }\n  if (defaultValue) {\n    defaultValue = normalizeColor(defaultValue);\n  }\n\n  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default\n  let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n  let [initialValue] = useState(colorValue);\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    defaultValue: value !== undefined ? initialValue : defaultValue as Color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    xValue,\n    setXValue,\n    yValue,\n    setYValue,\n    setColorFromPoint(x: number, y: number) {\n      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n      let newColor: Color | undefined;\n      if (newXValue !== xValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n        newColor = color.withChannelValue(channels.xChannel, newXValue);\n      }\n      if (newYValue !== yValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n      }\n      if (newColor) {\n        setColor(newColor);\n      }\n    },\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX);\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n      return {x, y};\n    },\n    incrementX(stepSize = 1) {\n      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n    },\n    incrementY(stepSize = 1) {\n      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n    },\n    decrementX(stepSize = 1) {\n      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n    },\n    decrementY(stepSize = 1) {\n      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return color.withChannelValue('alpha', 1);\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.main.js.map"}

package/dist/useColorAreaState.mjs

@@ -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 {useMemo as $5ShDH$useMemo, useRef as $5ShDH$useRef, useState as $5ShDH$useState} from "react";
+import {useState as $5ShDH$useState, useMemo as $5ShDH$useMemo, useRef as $5ShDH$useRef} from "react";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -23,6 +23,7 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
     if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
     // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
     let [colorValue, setColorState] = (0, $5ShDH$useControlledState)(value, defaultValue, onChange);
+    let [initialValue] = (0, $5ShDH$useState)(colorValue);
     let color = (0, $5ShDH$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
         colorValue,
         colorSpace
@@ -65,6 +66,7 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
         xChannelPageStep: pageSizeX,
         yChannelPageStep: pageSizeY,
         value: color,
+        defaultValue: value !== undefined ? initialValue : defaultValue,
         setValue (value) {
             setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
         },

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 {useMemo as $5ShDH$useMemo, useRef as $5ShDH$useRef, useState as $5ShDH$useState} from "react";
+import {useState as $5ShDH$useState, useMemo as $5ShDH$useMemo, useRef as $5ShDH$useRef} from "react";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -23,6 +23,7 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
     if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
     // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
     let [colorValue, setColorState] = (0, $5ShDH$useControlledState)(value, defaultValue, onChange);
+    let [initialValue] = (0, $5ShDH$useState)(colorValue);
     let color = (0, $5ShDH$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
         colorValue,
         colorSpace
@@ -65,6 +66,7 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
         xChannelPageStep: pageSizeX,
         yChannelPageStep: pageSizeY,
         value: color,
+        defaultValue: value !== undefined ? initialValue : defaultValue,
         setValue (value) {
             setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
         },

package/dist/useColorAreaState.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/color/src/useColorAreaState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {Color, ColorAreaProps, ColorChannel} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorAreaState {\n  /** The current color value displayed by the color area. */\n  readonly value: Color,\n  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n  setValue(value: string | Color): void,\n\n  /** The current value of the horizontal axis channel displayed by the color area. */\n  xValue: number,\n  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n  setXValue(value: number): void,\n\n  /** The current value of the vertical axis channel displayed by the color area. */\n  yValue: number,\n  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n  setYValue(value: number): void,\n\n  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n  setColorFromPoint(x: number, y: number): void,\n  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n  getThumbPosition(): {x: number, y: number},\n\n  /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n  incrementX(stepSize?: number): void,\n  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n  decrementX(stepSize?: number): void,\n\n  /** Increments the value of the vertical axis channel by the channel step or page amount. */\n  incrementY(stepSize?: number): void,\n  /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n  decrementY(stepSize?: number): void,\n\n  /** Whether the color area is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color area is being dragged. */\n  setDragging(value: boolean): void,\n\n  /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n  /** The step value of the xChannel, used when incrementing and decrementing. */\n  xChannelStep: number,\n  /** The step value of the yChannel, used when incrementing and decrementing. */\n  yChannelStep: number,\n  /** The page step value of the xChannel, used when incrementing and decrementing. */\n  xChannelPageStep: number,\n  /** The page step value of the yChannel, used when incrementing and decrementing. */\n  yChannelPageStep: number,\n\n  /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n  getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n  let {\n    value,\n    defaultValue,\n    colorSpace,\n    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n  if (value) {\n    value = normalizeColor(value);\n  }\n  if (defaultValue) {\n    defaultValue = normalizeColor(defaultValue);\n  }\n\n  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default\n  let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n  let valueRef = useRef(color);\n  let setColor = (color: Color) => {\n    valueRef.current = color;\n    setColorState(color);\n  };\n\n  let channels = useMemo(() =>\n    color.getColorSpaceAxes({xChannel, yChannel}),\n    [color, xChannel, yChannel]\n  );\n\n  let xChannelRange = color.getChannelRange(channels.xChannel);\n  let yChannelRange = color.getChannelRange(channels.yChannel);\n  let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;\n  let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;\n\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let xValue = color.getChannelValue(channels.xChannel);\n  let yValue = color.getChannelValue(channels.yChannel);\n  let setXValue = (v: number) => {\n    if (v === xValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.xChannel, v);\n    setColor(newColor);\n  };\n  let setYValue = (v: number) => {\n    if (v === yValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.yChannel, v);\n    setColor(newColor);\n  };\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    value: color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    xValue,\n    setXValue,\n    yValue,\n    setYValue,\n    setColorFromPoint(x: number, y: number) {\n      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n      let newColor: Color | undefined;\n      if (newXValue !== xValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n        newColor = color.withChannelValue(channels.xChannel, newXValue);\n      }\n      if (newYValue !== yValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n      }\n      if (newColor) {\n        setColor(newColor);\n      }\n    },\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX);\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n      return {x, y};\n    },\n    incrementX(stepSize = 1) {\n      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n    },\n    incrementY(stepSize = 1) {\n      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n    },\n    decrementX(stepSize = 1) {\n      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n    },\n    decrementY(stepSize = 1) {\n      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return color.withChannelValue('alpha', 1);\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.module.js.map"}
+{"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  /** The default value of the color area. */\n  readonly defaultValue: Color,\n  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n  setValue(value: string | Color): void,\n\n  /** The current value of the horizontal axis channel displayed by the color area. */\n  xValue: number,\n  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n  setXValue(value: number): void,\n\n  /** The current value of the vertical axis channel displayed by the color area. */\n  yValue: number,\n  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n  setYValue(value: number): void,\n\n  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n  setColorFromPoint(x: number, y: number): void,\n  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n  getThumbPosition(): {x: number, y: number},\n\n  /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n  incrementX(stepSize?: number): void,\n  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n  decrementX(stepSize?: number): void,\n\n  /** Increments the value of the vertical axis channel by the channel step or page amount. */\n  incrementY(stepSize?: number): void,\n  /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n  decrementY(stepSize?: number): void,\n\n  /** Whether the color area is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color area is being dragged. */\n  setDragging(value: boolean): void,\n\n  /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n  /** The step value of the xChannel, used when incrementing and decrementing. */\n  xChannelStep: number,\n  /** The step value of the yChannel, used when incrementing and decrementing. */\n  yChannelStep: number,\n  /** The page step value of the xChannel, used when incrementing and decrementing. */\n  xChannelPageStep: number,\n  /** The page step value of the yChannel, used when incrementing and decrementing. */\n  yChannelPageStep: number,\n\n  /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n  getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n  let {\n    value,\n    defaultValue,\n    colorSpace,\n    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n  if (value) {\n    value = normalizeColor(value);\n  }\n  if (defaultValue) {\n    defaultValue = normalizeColor(defaultValue);\n  }\n\n  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default\n  let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n  let [initialValue] = useState(colorValue);\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    defaultValue: value !== undefined ? initialValue : defaultValue as Color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    xValue,\n    setXValue,\n    yValue,\n    setYValue,\n    setColorFromPoint(x: number, y: number) {\n      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n      let newColor: Color | undefined;\n      if (newXValue !== xValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n        newColor = color.withChannelValue(channels.xChannel, newXValue);\n      }\n      if (newYValue !== yValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n      }\n      if (newColor) {\n        setColor(newColor);\n      }\n    },\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX);\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n      return {x, y};\n    },\n    incrementX(stepSize = 1) {\n      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n    },\n    incrementY(stepSize = 1) {\n      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n    },\n    decrementX(stepSize = 1) {\n      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n    },\n    decrementY(stepSize = 1) {\n      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return color.withChannelValue('alpha', 1);\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.module.js.map"}

package/dist/useColorChannelFieldState.main.js

@@ -15,18 +15,13 @@ $parcel$export(module.exports, "useColorChannelFieldState", () => $9f9c35e37074b
 
 function $9f9c35e37074b99b$export$b9fc0d69c9190c4a(props) {
     let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
-    let black = (0, $f8b3be23ba4462b1$exports.useColor)('#000');
     let initialValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.value);
     let initialDefaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.defaultValue);
     let [colorValue, setColor] = (0, $8s2vy$reactstatelyutils.useControlledState)(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
-    let color = (0, $8s2vy$react.useMemo)(()=>{
-        let nonNullColorValue = colorValue || black;
-        return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
-    }, [
-        black,
-        colorValue,
-        colorSpace
-    ]);
+    let color = $9f9c35e37074b99b$var$useConvertColor(colorValue, colorSpace);
+    let [initialColorValue] = (0, $8s2vy$react.useState)(colorValue);
+    let defaultColorValue = initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialColorValue;
+    let defaultColor = $9f9c35e37074b99b$var$useConvertColor(defaultColorValue, colorSpace);
     let value = color.getChannelValue(channel);
     let range = color.getChannelRange(channel);
     let formatOptions = (0, $8s2vy$react.useMemo)(()=>color.getChannelFormatOptions(channel), [
@@ -37,6 +32,7 @@ function $9f9c35e37074b99b$export$b9fc0d69c9190c4a(props) {
     let numberFieldState = (0, $8s2vy$reactstatelynumberfield.useNumberFieldState)({
         locale: locale,
         value: colorValue === null ? NaN : value / multiplier,
+        defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,
         onChange: (v)=>{
             if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
             else setColor(null);
@@ -48,9 +44,22 @@ function $9f9c35e37074b99b$export$b9fc0d69c9190c4a(props) {
     });
     return {
         ...numberFieldState,
-        colorValue: color
+        colorValue: color,
+        defaultColorValue: defaultColorValue,
+        setColorValue: setColor
     };
 }
+function $9f9c35e37074b99b$var$useConvertColor(colorValue, colorSpace) {
+    let black = (0, $f8b3be23ba4462b1$exports.useColor)('#000');
+    return (0, $8s2vy$react.useMemo)(()=>{
+        let nonNullColorValue = colorValue || black;
+        return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
+    }, [
+        black,
+        colorValue,
+        colorSpace
+    ]);
+}
 
 
 //# sourceMappingURL=useColorChannelFieldState.main.js.map

package/dist/useColorChannelFieldState.main.js.map

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

package/dist/useColorChannelFieldState.mjs

@@ -1,7 +1,7 @@
 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";
+import {useState as $52OvP$useState, useMemo as $52OvP$useMemo} from "react";
 
 
 
@@ -9,18 +9,13 @@ import {useMemo as $52OvP$useMemo} from "react";
 
 function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
     let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
-    let black = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)('#000');
     let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
     let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue);
     let [colorValue, setColor] = (0, $52OvP$useControlledState)(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
-    let color = (0, $52OvP$useMemo)(()=>{
-        let nonNullColorValue = colorValue || black;
-        return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
-    }, [
-        black,
-        colorValue,
-        colorSpace
-    ]);
+    let color = $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace);
+    let [initialColorValue] = (0, $52OvP$useState)(colorValue);
+    let defaultColorValue = initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialColorValue;
+    let defaultColor = $31a863bb88e75dd6$var$useConvertColor(defaultColorValue, colorSpace);
     let value = color.getChannelValue(channel);
     let range = color.getChannelRange(channel);
     let formatOptions = (0, $52OvP$useMemo)(()=>color.getChannelFormatOptions(channel), [
@@ -31,6 +26,7 @@ function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
     let numberFieldState = (0, $52OvP$useNumberFieldState)({
         locale: locale,
         value: colorValue === null ? NaN : value / multiplier,
+        defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,
         onChange: (v)=>{
             if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
             else setColor(null);
@@ -42,9 +38,22 @@ function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
     });
     return {
         ...numberFieldState,
-        colorValue: color
+        colorValue: color,
+        defaultColorValue: defaultColorValue,
+        setColorValue: setColor
     };
 }
+function $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace) {
+    let black = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)('#000');
+    return (0, $52OvP$useMemo)(()=>{
+        let nonNullColorValue = colorValue || black;
+        return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
+    }, [
+        black,
+        colorValue,
+        colorSpace
+    ]);
+}
 
 
 export {$31a863bb88e75dd6$export$b9fc0d69c9190c4a as useColorChannelFieldState};

package/dist/useColorChannelFieldState.module.js

@@ -1,7 +1,7 @@
 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";
+import {useState as $52OvP$useState, useMemo as $52OvP$useMemo} from "react";
 
 
 
@@ -9,18 +9,13 @@ import {useMemo as $52OvP$useMemo} from "react";
 
 function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
     let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
-    let black = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)('#000');
     let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
     let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue);
     let [colorValue, setColor] = (0, $52OvP$useControlledState)(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
-    let color = (0, $52OvP$useMemo)(()=>{
-        let nonNullColorValue = colorValue || black;
-        return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
-    }, [
-        black,
-        colorValue,
-        colorSpace
-    ]);
+    let color = $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace);
+    let [initialColorValue] = (0, $52OvP$useState)(colorValue);
+    let defaultColorValue = initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialColorValue;
+    let defaultColor = $31a863bb88e75dd6$var$useConvertColor(defaultColorValue, colorSpace);
     let value = color.getChannelValue(channel);
     let range = color.getChannelRange(channel);
     let formatOptions = (0, $52OvP$useMemo)(()=>color.getChannelFormatOptions(channel), [
@@ -31,6 +26,7 @@ function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
     let numberFieldState = (0, $52OvP$useNumberFieldState)({
         locale: locale,
         value: colorValue === null ? NaN : value / multiplier,
+        defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,
         onChange: (v)=>{
             if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
             else setColor(null);
@@ -42,9 +38,22 @@ function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
     });
     return {
         ...numberFieldState,
-        colorValue: color
+        colorValue: color,
+        defaultColorValue: defaultColorValue,
+        setColorValue: setColor
     };
 }
+function $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace) {
+    let black = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)('#000');
+    return (0, $52OvP$useMemo)(()=>{
+        let nonNullColorValue = colorValue || black;
+        return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
+    }, [
+        black,
+        colorValue,
+        colorSpace
+    ]);
+}
 
 
 export {$31a863bb88e75dd6$export$b9fc0d69c9190c4a as useColorChannelFieldState};

package/dist/useColorChannelFieldState.module.js.map

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

package/dist/useColorFieldState.main.js

@@ -32,9 +32,9 @@ const $d59d0c2b2ce1568f$var$MAX_COLOR_INT = $d59d0c2b2ce1568f$var$MAX_COLOR.toHe
 function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
     let { value: value, defaultValue: defaultValue, onChange: onChange } = props;
     let { step: step } = $d59d0c2b2ce1568f$var$MIN_COLOR.getChannelRange('red');
-    let initialValue = (0, $f8b3be23ba4462b1$exports.useColor)(value);
     let initialDefaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(defaultValue);
-    let [colorValue, setColorValue] = (0, $41neA$reactstatelyutils.useControlledState)(initialValue, initialDefaultValue, onChange);
+    let [colorValue, setColorValue] = (0, $41neA$reactstatelyutils.useControlledState)((0, $f8b3be23ba4462b1$exports.useColor)(value), initialDefaultValue, onChange);
+    let [initialValue] = (0, $41neA$react.useState)(colorValue);
     let [inputValue, setInputValue] = (0, $41neA$react.useState)(()=>(value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
     let validation = (0, $41neA$reactstatelyform.useFormValidationState)({
         ...props,
@@ -84,6 +84,7 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
         let newColorValue = '';
         if (colorValue) newColorValue = colorValue.toString('hex');
         setInputValue(newColorValue);
+        validation.commitValidation();
     };
     let increment = ()=>{
         let newValue = $d59d0c2b2ce1568f$var$addColorValue(parsedValue, step);
@@ -115,6 +116,8 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
         ...validation,
         validate: validate,
         colorValue: colorValue,
+        defaultColorValue: initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialValue,
+        setColorValue: setColorValue,
         inputValue: inputValue,
         setInputValue: setInputValue,
         commit: commit,

package/dist/useColorFieldState.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/color/src/useColorFieldState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Color, ColorFieldProps} from '@react-types/color';\nimport {FormValidationState, useFormValidationState} from '@react-stately/form';\nimport {parseColor} from './Color';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\n\nexport interface ColorFieldState extends FormValidationState {\n  /**\n   * The current text value of the input. Updated as the user types,\n   * and formatted according to `formatOptions` on blur.\n   */\n  readonly inputValue: string,\n  /**\n   * The currently parsed color value, or null if the field is empty.\n   * Updated based on the `inputValue` as the user types.\n   */\n  readonly colorValue: Color | null,\n  /** Sets the current text value of the input. */\n  setInputValue(value: string): void,\n  /**\n   * Updates the input value based on the currently parsed color value.\n   * Typically this is called when the field is blurred.\n   */\n  commit(): void,\n  /** Increments the current input value to the next step boundary, and fires `onChange`. */\n  increment(): void,\n  /** Decrements the current input value to the next step boundary, and fires `onChange`. */\n  decrement(): void,\n  /** Sets the current value to the maximum color value, and fires `onChange`. */\n  incrementToMax(): void,\n  /** Sets the current value to the minimum color value, and fires `onChange`. */\n  decrementToMin(): void,\n  /**\n   * Validates a user input string.\n   * Values can be partially entered, and may be valid even if they cannot currently be parsed to a color.\n   * Can be used to implement validation as a user types.\n   */\n  validate(value: string): boolean\n}\n\nconst MIN_COLOR = parseColor('#000000');\nconst MAX_COLOR = parseColor('#FFFFFF');\nconst MIN_COLOR_INT = MIN_COLOR.toHexInt();\nconst MAX_COLOR_INT = MAX_COLOR.toHexInt();\n\n/**\n * Provides state management for a color field component. Color fields allow\n * users to enter and adjust a hex color value.\n */\nexport function useColorFieldState(\n  props: ColorFieldProps\n): ColorFieldState {\n  let {\n    value,\n    defaultValue,\n    onChange\n  } = props;\n  let {step} = MIN_COLOR.getChannelRange('red');\n\n  let initialValue = useColor(value);\n  let initialDefaultValue = useColor(defaultValue);\n  let [colorValue, setColorValue] = useControlledState<Color | null>(initialValue!, initialDefaultValue!, onChange);\n  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');\n\n  let validation = useFormValidationState({\n    ...props,\n    value: colorValue\n  });\n\n  let safelySetColorValue = (newColor: Color | null) => {\n    if (!colorValue || !newColor) {\n      setColorValue(newColor);\n      return;\n    }\n    if (newColor.toHexInt() !== colorValue.toHexInt()) {\n      setColorValue(newColor);\n      return;\n    }\n  };\n\n  let [prevValue, setPrevValue] = useState(colorValue);\n  if (prevValue !== colorValue) {\n    setInputValue(colorValue ? colorValue.toString('hex') : '');\n    setPrevValue(colorValue);\n  }\n\n  let parsedValue = useMemo(() => {\n    let color;\n    try {\n      color = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);\n    } catch {\n      color = null;\n    }\n    return color;\n  }, [inputValue]);\n\n  let commit = () => {\n    // Set to empty state if input value is empty\n    if (!inputValue.length) {\n      safelySetColorValue(null);\n      if (value === undefined || colorValue === null) {\n        setInputValue('');\n      } else {\n        setInputValue(colorValue.toString('hex'));\n      }\n      return;\n    }\n\n    // if it failed to parse, then reset input to formatted version of current number\n    if (parsedValue == null) {\n      setInputValue(colorValue ? colorValue.toString('hex') : '');\n      return;\n    }\n\n    safelySetColorValue(parsedValue);\n    // in a controlled state, the numberValue won't change, so we won't go back to our old input without help\n    let newColorValue = '';\n    if (colorValue) {\n      newColorValue = colorValue.toString('hex');\n    }\n    setInputValue(newColorValue);\n  };\n\n  let increment = () => {\n    let newValue = addColorValue(parsedValue, step);\n    // if we've arrived at the same value that was previously in the state, the\n    // input value should be updated to match\n    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n    if (newValue === colorValue) {\n      setInputValue(newValue.toString('hex'));\n    }\n    safelySetColorValue(newValue);\n    validation.commitValidation();\n  };\n  let decrement = () => {\n    let newValue = addColorValue(parsedValue, -step);\n    // if we've arrived at the same value that was previously in the state, the\n    // input value should be updated to match\n    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n    if (newValue === colorValue) {\n      setInputValue(newValue.toString('hex'));\n    }\n    safelySetColorValue(newValue);\n    validation.commitValidation();\n  };\n  let incrementToMax = () => safelySetColorValue(MAX_COLOR);\n  let decrementToMin = () => safelySetColorValue(MIN_COLOR);\n\n  let validate = (value: string) => value === '' || !!value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];\n\n  return {\n    ...validation,\n    validate,\n    colorValue,\n    inputValue,\n    setInputValue,\n    commit,\n    increment,\n    incrementToMax,\n    decrement,\n    decrementToMin\n  };\n}\n\nfunction addColorValue(color: Color, step: number) {\n  let newColor = color ? color : MIN_COLOR;\n  let colorInt = newColor.toHexInt();\n\n  let clampInt = Math.min(Math.max(colorInt + step, MIN_COLOR_INT), MAX_COLOR_INT);\n  if (clampInt !== colorInt) {\n    let newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`;\n    newColor = parseColor(newColorString);\n  }\n  return newColor;\n}\n"],"names":[],"version":3,"file":"useColorFieldState.main.js.map"}
+{"mappings":"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","sources":["packages/@react-stately/color/src/useColorFieldState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Color, ColorFieldProps} from '@react-types/color';\nimport {FormValidationState, useFormValidationState} from '@react-stately/form';\nimport {parseColor} from './Color';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\n\nexport interface ColorFieldState extends FormValidationState {\n  /**\n   * The current text value of the input. Updated as the user types,\n   * and formatted according to `formatOptions` on blur.\n   */\n  readonly inputValue: string,\n  /**\n   * The currently parsed color value, or null if the field is empty.\n   * Updated based on the `inputValue` as the user types.\n   */\n  readonly colorValue: Color | null,\n  /** The default value of the color field. */\n  readonly defaultColorValue: Color | null,\n  /** Sets the color value of the field. */\n  setColorValue(value: Color | null): void,\n  /** Sets the current text value of the input. */\n  setInputValue(value: string): void,\n  /**\n   * Updates the input value based on the currently parsed color value.\n   * Typically this is called when the field is blurred.\n   */\n  commit(): void,\n  /** Increments the current input value to the next step boundary, and fires `onChange`. */\n  increment(): void,\n  /** Decrements the current input value to the next step boundary, and fires `onChange`. */\n  decrement(): void,\n  /** Sets the current value to the maximum color value, and fires `onChange`. */\n  incrementToMax(): void,\n  /** Sets the current value to the minimum color value, and fires `onChange`. */\n  decrementToMin(): void,\n  /**\n   * Validates a user input string.\n   * Values can be partially entered, and may be valid even if they cannot currently be parsed to a color.\n   * Can be used to implement validation as a user types.\n   */\n  validate(value: string): boolean\n}\n\nconst MIN_COLOR = parseColor('#000000');\nconst MAX_COLOR = parseColor('#FFFFFF');\nconst MIN_COLOR_INT = MIN_COLOR.toHexInt();\nconst MAX_COLOR_INT = MAX_COLOR.toHexInt();\n\n/**\n * Provides state management for a color field component. Color fields allow\n * users to enter and adjust a hex color value.\n */\nexport function useColorFieldState(\n  props: ColorFieldProps\n): ColorFieldState {\n  let {\n    value,\n    defaultValue,\n    onChange\n  } = props;\n  let {step} = MIN_COLOR.getChannelRange('red');\n\n  let initialDefaultValue = useColor(defaultValue);\n  let [colorValue, setColorValue] = useControlledState<Color | null>(useColor(value), initialDefaultValue!, onChange);\n  let [initialValue] = useState(colorValue);\n  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');\n\n  let validation = useFormValidationState({\n    ...props,\n    value: colorValue\n  });\n\n  let safelySetColorValue = (newColor: Color | null) => {\n    if (!colorValue || !newColor) {\n      setColorValue(newColor);\n      return;\n    }\n    if (newColor.toHexInt() !== colorValue.toHexInt()) {\n      setColorValue(newColor);\n      return;\n    }\n  };\n\n  let [prevValue, setPrevValue] = useState(colorValue);\n  if (prevValue !== colorValue) {\n    setInputValue(colorValue ? colorValue.toString('hex') : '');\n    setPrevValue(colorValue);\n  }\n\n  let parsedValue = useMemo(() => {\n    let color;\n    try {\n      color = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);\n    } catch {\n      color = null;\n    }\n    return color;\n  }, [inputValue]);\n\n  let commit = () => {\n    // Set to empty state if input value is empty\n    if (!inputValue.length) {\n      safelySetColorValue(null);\n      if (value === undefined || colorValue === null) {\n        setInputValue('');\n      } else {\n        setInputValue(colorValue.toString('hex'));\n      }\n      return;\n    }\n\n    // if it failed to parse, then reset input to formatted version of current number\n    if (parsedValue == null) {\n      setInputValue(colorValue ? colorValue.toString('hex') : '');\n      return;\n    }\n\n    safelySetColorValue(parsedValue);\n    // in a controlled state, the numberValue won't change, so we won't go back to our old input without help\n    let newColorValue = '';\n    if (colorValue) {\n      newColorValue = colorValue.toString('hex');\n    }\n    setInputValue(newColorValue);\n    validation.commitValidation();\n  };\n\n  let increment = () => {\n    let newValue = addColorValue(parsedValue, step);\n    // if we've arrived at the same value that was previously in the state, the\n    // input value should be updated to match\n    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n    if (newValue === colorValue) {\n      setInputValue(newValue.toString('hex'));\n    }\n    safelySetColorValue(newValue);\n    validation.commitValidation();\n  };\n  let decrement = () => {\n    let newValue = addColorValue(parsedValue, -step);\n    // if we've arrived at the same value that was previously in the state, the\n    // input value should be updated to match\n    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n    if (newValue === colorValue) {\n      setInputValue(newValue.toString('hex'));\n    }\n    safelySetColorValue(newValue);\n    validation.commitValidation();\n  };\n  let incrementToMax = () => safelySetColorValue(MAX_COLOR);\n  let decrementToMin = () => safelySetColorValue(MIN_COLOR);\n\n  let validate = (value: string) => value === '' || !!value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];\n\n  return {\n    ...validation,\n    validate,\n    colorValue,\n    defaultColorValue: initialDefaultValue ?? initialValue,\n    setColorValue,\n    inputValue,\n    setInputValue,\n    commit,\n    increment,\n    incrementToMax,\n    decrement,\n    decrementToMin\n  };\n}\n\nfunction addColorValue(color: Color, step: number) {\n  let newColor = color ? color : MIN_COLOR;\n  let colorInt = newColor.toHexInt();\n\n  let clampInt = Math.min(Math.max(colorInt + step, MIN_COLOR_INT), MAX_COLOR_INT);\n  if (clampInt !== colorInt) {\n    let newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`;\n    newColor = parseColor(newColorString);\n  }\n  return newColor;\n}\n"],"names":[],"version":3,"file":"useColorFieldState.main.js.map"}

package/dist/useColorFieldState.mjs

@@ -26,9 +26,9 @@ const $b335ada08155d9c0$var$MAX_COLOR_INT = $b335ada08155d9c0$var$MAX_COLOR.toHe
 function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
     let { value: value, defaultValue: defaultValue, onChange: onChange } = props;
     let { step: step } = $b335ada08155d9c0$var$MIN_COLOR.getChannelRange('red');
-    let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(value);
     let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(defaultValue);
-    let [colorValue, setColorValue] = (0, $aP5W6$useControlledState)(initialValue, initialDefaultValue, onChange);
+    let [colorValue, setColorValue] = (0, $aP5W6$useControlledState)((0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(value), initialDefaultValue, onChange);
+    let [initialValue] = (0, $aP5W6$useState)(colorValue);
     let [inputValue, setInputValue] = (0, $aP5W6$useState)(()=>(value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
     let validation = (0, $aP5W6$useFormValidationState)({
         ...props,
@@ -78,6 +78,7 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
         let newColorValue = '';
         if (colorValue) newColorValue = colorValue.toString('hex');
         setInputValue(newColorValue);
+        validation.commitValidation();
     };
     let increment = ()=>{
         let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, step);
@@ -109,6 +110,8 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
         ...validation,
         validate: validate,
         colorValue: colorValue,
+        defaultColorValue: initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialValue,
+        setColorValue: setColorValue,
         inputValue: inputValue,
         setInputValue: setInputValue,
         commit: commit,