react-stately 3.45.0 → 3.46.0

package/dist/private/color/useColorAreaState.cjs

@@ -0,0 +1,135 @@
+var $d947385dec0a279e$exports = require("../utils/number.cjs");
+var $90c404755d945e7c$exports = require("./Color.cjs");
+var $14cedf286405cc4b$exports = require("../utils/useControlledState.cjs");
+var $f038u$react = require("react");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColorAreaState", function () { return $fb049df1f0fc9dda$export$6df7f0e2cabc7eef; });
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+const $fb049df1f0fc9dda$var$DEFAULT_COLOR = (0, $90c404755d945e7c$exports.parseColor)('#ffffff');
+function $fb049df1f0fc9dda$export$6df7f0e2cabc7eef(props) {
+    let { value: value, defaultValue: defaultValue, colorSpace: colorSpace, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
+    if (!value && !defaultValue) defaultValue = $fb049df1f0fc9dda$var$DEFAULT_COLOR;
+    if (value) value = (0, $90c404755d945e7c$exports.normalizeColor)(value);
+    if (defaultValue) defaultValue = (0, $90c404755d945e7c$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, $14cedf286405cc4b$exports.useControlledState)(value, defaultValue, onChange);
+    let [initialValue] = (0, $f038u$react.useState)(colorValue);
+    let color = (0, $f038u$react.useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
+    let valueRef = (0, $f038u$react.useRef)(color);
+    let setColor = (color)=>{
+        valueRef.current = color;
+        setColorState(color);
+    };
+    let channels = (0, $f038u$react.useMemo)(()=>color.getColorSpaceAxes({
+            xChannel: xChannel,
+            yChannel: yChannel
+        }), [
+        color,
+        xChannel,
+        yChannel
+    ]);
+    let xChannelRange = color.getChannelRange(channels.xChannel);
+    let yChannelRange = color.getChannelRange(channels.yChannel);
+    let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
+    let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
+    let [isDragging, setDragging] = (0, $f038u$react.useState)(false);
+    let isDraggingRef = (0, $f038u$react.useRef)(false);
+    let xValue = color.getChannelValue(channels.xChannel);
+    let yValue = color.getChannelValue(channels.yChannel);
+    let setXValue = (v)=>{
+        if (v === xValue) return;
+        let newColor = color.withChannelValue(channels.xChannel, v);
+        setColor(newColor);
+    };
+    let setYValue = (v)=>{
+        if (v === yValue) return;
+        let newColor = color.withChannelValue(channels.yChannel, v);
+        setColor(newColor);
+    };
+    return {
+        channels: channels,
+        xChannelStep: stepX,
+        yChannelStep: stepY,
+        xChannelPageStep: pageSizeX,
+        yChannelPageStep: pageSizeY,
+        value: color,
+        defaultValue: value !== undefined ? initialValue : defaultValue,
+        setValue (value) {
+            setColor((0, $90c404755d945e7c$exports.normalizeColor)(value));
+        },
+        xValue: xValue,
+        setXValue: setXValue,
+        yValue: yValue,
+        setYValue: setYValue,
+        setColorFromPoint (x, y) {
+            let newXValue = minValueX + (0, $d947385dec0a279e$exports.clamp)(x, 0, 1) * (maxValueX - minValueX);
+            let newYValue = minValueY + (1 - (0, $d947385dec0a279e$exports.clamp)(y, 0, 1)) * (maxValueY - minValueY);
+            let newColor;
+            if (newXValue !== xValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newXValue = (0, $d947385dec0a279e$exports.snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
+                newColor = color.withChannelValue(channels.xChannel, newXValue);
+            }
+            if (newYValue !== yValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newYValue = (0, $d947385dec0a279e$exports.snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
+                newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+            }
+            if (newColor) setColor(newColor);
+        },
+        getThumbPosition () {
+            let x = (xValue - minValueX) / (maxValueX - minValueX);
+            let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
+            return {
+                x: x,
+                y: y
+            };
+        },
+        incrementX (stepSize = 1) {
+            setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $d947385dec0a279e$exports.snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
+        },
+        incrementY (stepSize = 1) {
+            setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $d947385dec0a279e$exports.snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
+        },
+        decrementX (stepSize = 1) {
+            setXValue((0, $d947385dec0a279e$exports.snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
+        },
+        decrementY (stepSize = 1) {
+            setYValue((0, $d947385dec0a279e$exports.snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
+        },
+        setDragging (isDragging) {
+            let wasDragging = isDraggingRef.current;
+            isDraggingRef.current = isDragging;
+            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
+            setDragging(isDragging);
+        },
+        isDragging: isDragging,
+        getDisplayColor () {
+            return color.withChannelValue('alpha', 1);
+        }
+    };
+}
+
+
+//# sourceMappingURL=useColorAreaState.cjs.map

package/dist/private/color/useColorAreaState.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAiFD,MAAM,sCAAgB,CAAA,GAAA,oCAAS,EAAE;AAK1B,SAAS,0CAAkB,KAAqB;IACrD,IAAI,SACF,KAAK,gBACL,YAAY,cACZ,UAAU,YACV,QAAQ,YACR,QAAQ,YACR,QAAQ,eACR,WAAW,EACZ,GAAG;IAEJ,IAAI,CAAC,SAAS,CAAC,cACb,eAAe;IAEjB,IAAI,OACF,QAAQ,CAAA,GAAA,wCAAa,EAAE;IAEzB,IAAI,cACF,eAAe,CAAA,GAAA,wCAAa,EAAE;IAGhC,+HAA+H;IAC/H,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,4CAAiB,EAAS,OAAgB,cAAuB;IACnG,IAAI,CAAC,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC9B,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,cAAc,aAAa,WAAW,QAAQ,CAAC,cAAc,YAAY;QAAC;QAAY;KAAW;IAC3H,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,WAAW,CAAC;QACd,SAAS,OAAO,GAAG;QACnB,cAAc;IAChB;IAEA,IAAI,WAAW,CAAA,GAAA,oBAAM,EAAE,IACrB,MAAM,iBAAiB,CAAC;sBAAC;sBAAU;QAAQ,IAC3C;QAAC;QAAO;QAAU;KAAS;IAG7B,IAAI,gBAAgB,MAAM,eAAe,CAAC,SAAS,QAAQ;IAC3D,IAAI,gBAAgB,MAAM,eAAe,CAAC,SAAS,QAAQ;IAC3D,IAAI,EAAC,UAAU,SAAS,EAAE,UAAU,SAAS,EAAE,MAAM,KAAK,EAAE,UAAU,SAAS,EAAC,GAAG;IACnF,IAAI,EAAC,UAAU,SAAS,EAAE,UAAU,SAAS,EAAE,MAAM,KAAK,EAAE,UAAU,SAAS,EAAC,GAAG;IAEnF,IAAI,CAAC,YAAY,YAAY,GAAG,CAAA,GAAA,qBAAO,EAAE;IACzC,IAAI,gBAAgB,CAAA,GAAA,mBAAK,EAAE;IAE3B,IAAI,SAAS,MAAM,eAAe,CAAC,SAAS,QAAQ;IACpD,IAAI,SAAS,MAAM,eAAe,CAAC,SAAS,QAAQ;IACpD,IAAI,YAAY,CAAC;QACf,IAAI,MAAM,QACR;QAEF,IAAI,WAAW,MAAM,gBAAgB,CAAC,SAAS,QAAQ,EAAE;QACzD,SAAS;IACX;IACA,IAAI,YAAY,CAAC;QACf,IAAI,MAAM,QACR;QAEF,IAAI,WAAW,MAAM,gBAAgB,CAAC,SAAS,QAAQ,EAAE;QACzD,SAAS;IACX;IAEA,OAAO;kBACL;QACA,cAAc;QACd,cAAc;QACd,kBAAkB;QAClB,kBAAkB;QAClB,OAAO;QACP,cAAc,UAAU,YAAY,eAAe;QACnD,UAAS,KAAK;YACZ,SAAS,CAAA,GAAA,wCAAa,EAAE;QAC1B;gBACA;mBACA;gBACA;mBACA;QACA,mBAAkB,CAAS,EAAE,CAAS;YACpC,IAAI,YAAY,YAAY,CAAA,GAAA,+BAAI,EAAE,GAAG,GAAG,KAAM,CAAA,YAAY,SAAQ;YAClE,IAAI,YAAY,YAAY,AAAC,CAAA,IAAI,CAAA,GAAA,+BAAI,EAAE,GAAG,GAAG,EAAC,IAAM,CAAA,YAAY,SAAQ;YACxE,IAAI;YACJ,IAAI,cAAc,QAAQ;gBACxB,uEAAuE;gBACvE,YAAY,CAAA,GAAA,yCAAc,EAAE,WAAW,WAAW,WAAW;gBAC7D,WAAW,MAAM,gBAAgB,CAAC,SAAS,QAAQ,EAAE;YACvD;YACA,IAAI,cAAc,QAAQ;gBACxB,uEAAuE;gBACvE,YAAY,CAAA,GAAA,yCAAc,EAAE,WAAW,WAAW,WAAW;gBAC7D,WAAW,AAAC,CAAA,YAAY,KAAI,EAAG,gBAAgB,CAAC,SAAS,QAAQ,EAAE;YACrE;YACA,IAAI,UACF,SAAS;QAEb;QACA;YACE,IAAI,IAAI,AAAC,CAAA,SAAS,SAAQ,IAAM,CAAA,YAAY,SAAQ;YACpD,IAAI,IAAI,IAAI,AAAC,CAAA,SAAS,SAAQ,IAAM,CAAA,YAAY,SAAQ;YACxD,OAAO;mBAAC;mBAAG;YAAC;QACd;QACA,YAAW,WAAW,CAAC;YACrB,UAAU,SAAS,WAAW,YAAY,YAAY,CAAA,GAAA,yCAAc,EAAE,SAAS,UAAU,WAAW,WAAW;QACjH;QACA,YAAW,WAAW,CAAC;YACrB,UAAU,SAAS,WAAW,YAAY,YAAY,CAAA,GAAA,yCAAc,EAAE,SAAS,UAAU,WAAW,WAAW;QACjH;QACA,YAAW,WAAW,CAAC;YACrB,UAAU,CAAA,GAAA,yCAAc,EAAE,SAAS,UAAU,WAAW,WAAW;QACrE;QACA,YAAW,WAAW,CAAC;YACrB,UAAU,CAAA,GAAA,yCAAc,EAAE,SAAS,UAAU,WAAW,WAAW;QACrE;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,gBAAgB,CAAC,SAAS;QACzC;IACF;AACF","sources":["packages/react-stately/src/color/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} from '../utils/number';\n\nimport {Color, ColorChannel, ColorSpace} from './types';\nimport {normalizeColor, parseColor} from './Color';\nimport {useControlledState} from '../utils/useControlledState';\nimport {useMemo, useRef, useState} from 'react';\nimport {ValueBase} from '@react-types/shared';\n\nexport interface ColorAreaProps extends Omit<ValueBase<string | Color>, 'onChange'> {\n  /**\n   * The color space that the color area operates in. The `xChannel` and `yChannel` must be in this color space.\n   * If not provided, this defaults to the color space of the `color` or `defaultColor` value.\n   */\n  colorSpace?: ColorSpace,\n  /** Color channel for the horizontal axis. */\n  xChannel?: ColorChannel,\n  /** Color channel for the vertical axis. */\n  yChannel?: ColorChannel,\n  /** Whether the ColorArea is disabled. */\n  isDisabled?: boolean,\n  /** Handler that is called when the value changes, as the user drags. */\n  onChange?: (value: Color) => void,\n  /** Handler that is called when the user stops dragging. */\n  onChangeEnd?: (value: Color) => void\n}\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.cjs.map"}

package/dist/private/color/useColorAreaState.js

@@ -0,0 +1,130 @@
+import {clamp as $9b3cb10e52b1a6e3$export$7d15b64cf5a3a4c4, snapValueToStep as $9b3cb10e52b1a6e3$export$cb6e0bb50bc19463} from "../utils/number.js";
+import {normalizeColor as $9be7d47340a9a2a9$export$4cde5df63f53f473, parseColor as $9be7d47340a9a2a9$export$6e865ea70d7724f} from "./Color.js";
+import {useControlledState as $2a35a170cf8e413e$export$40bfa8c7b0832715} from "../utils/useControlledState.js";
+import {useState as $aLtDL$useState, useMemo as $aLtDL$useMemo, useRef as $aLtDL$useRef} from "react";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+const $4201442174d64b50$var$DEFAULT_COLOR = (0, $9be7d47340a9a2a9$export$6e865ea70d7724f)('#ffffff');
+function $4201442174d64b50$export$6df7f0e2cabc7eef(props) {
+    let { value: value, defaultValue: defaultValue, colorSpace: colorSpace, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
+    if (!value && !defaultValue) defaultValue = $4201442174d64b50$var$DEFAULT_COLOR;
+    if (value) value = (0, $9be7d47340a9a2a9$export$4cde5df63f53f473)(value);
+    if (defaultValue) defaultValue = (0, $9be7d47340a9a2a9$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, $2a35a170cf8e413e$export$40bfa8c7b0832715)(value, defaultValue, onChange);
+    let [initialValue] = (0, $aLtDL$useState)(colorValue);
+    let color = (0, $aLtDL$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
+    let valueRef = (0, $aLtDL$useRef)(color);
+    let setColor = (color)=>{
+        valueRef.current = color;
+        setColorState(color);
+    };
+    let channels = (0, $aLtDL$useMemo)(()=>color.getColorSpaceAxes({
+            xChannel: xChannel,
+            yChannel: yChannel
+        }), [
+        color,
+        xChannel,
+        yChannel
+    ]);
+    let xChannelRange = color.getChannelRange(channels.xChannel);
+    let yChannelRange = color.getChannelRange(channels.yChannel);
+    let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
+    let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
+    let [isDragging, setDragging] = (0, $aLtDL$useState)(false);
+    let isDraggingRef = (0, $aLtDL$useRef)(false);
+    let xValue = color.getChannelValue(channels.xChannel);
+    let yValue = color.getChannelValue(channels.yChannel);
+    let setXValue = (v)=>{
+        if (v === xValue) return;
+        let newColor = color.withChannelValue(channels.xChannel, v);
+        setColor(newColor);
+    };
+    let setYValue = (v)=>{
+        if (v === yValue) return;
+        let newColor = color.withChannelValue(channels.yChannel, v);
+        setColor(newColor);
+    };
+    return {
+        channels: channels,
+        xChannelStep: stepX,
+        yChannelStep: stepY,
+        xChannelPageStep: pageSizeX,
+        yChannelPageStep: pageSizeY,
+        value: color,
+        defaultValue: value !== undefined ? initialValue : defaultValue,
+        setValue (value) {
+            setColor((0, $9be7d47340a9a2a9$export$4cde5df63f53f473)(value));
+        },
+        xValue: xValue,
+        setXValue: setXValue,
+        yValue: yValue,
+        setYValue: setYValue,
+        setColorFromPoint (x, y) {
+            let newXValue = minValueX + (0, $9b3cb10e52b1a6e3$export$7d15b64cf5a3a4c4)(x, 0, 1) * (maxValueX - minValueX);
+            let newYValue = minValueY + (1 - (0, $9b3cb10e52b1a6e3$export$7d15b64cf5a3a4c4)(y, 0, 1)) * (maxValueY - minValueY);
+            let newColor;
+            if (newXValue !== xValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newXValue = (0, $9b3cb10e52b1a6e3$export$cb6e0bb50bc19463)(newXValue, minValueX, maxValueX, stepX);
+                newColor = color.withChannelValue(channels.xChannel, newXValue);
+            }
+            if (newYValue !== yValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newYValue = (0, $9b3cb10e52b1a6e3$export$cb6e0bb50bc19463)(newYValue, minValueY, maxValueY, stepY);
+                newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+            }
+            if (newColor) setColor(newColor);
+        },
+        getThumbPosition () {
+            let x = (xValue - minValueX) / (maxValueX - minValueX);
+            let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
+            return {
+                x: x,
+                y: y
+            };
+        },
+        incrementX (stepSize = 1) {
+            setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $9b3cb10e52b1a6e3$export$cb6e0bb50bc19463)(xValue + stepSize, minValueX, maxValueX, stepX));
+        },
+        incrementY (stepSize = 1) {
+            setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $9b3cb10e52b1a6e3$export$cb6e0bb50bc19463)(yValue + stepSize, minValueY, maxValueY, stepY));
+        },
+        decrementX (stepSize = 1) {
+            setXValue((0, $9b3cb10e52b1a6e3$export$cb6e0bb50bc19463)(xValue - stepSize, minValueX, maxValueX, stepX));
+        },
+        decrementY (stepSize = 1) {
+            setYValue((0, $9b3cb10e52b1a6e3$export$cb6e0bb50bc19463)(yValue - stepSize, minValueY, maxValueY, stepY));
+        },
+        setDragging (isDragging) {
+            let wasDragging = isDraggingRef.current;
+            isDraggingRef.current = isDragging;
+            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
+            setDragging(isDragging);
+        },
+        isDragging: isDragging,
+        getDisplayColor () {
+            return color.withChannelValue('alpha', 1);
+        }
+    };
+}
+
+
+export {$4201442174d64b50$export$6df7f0e2cabc7eef as useColorAreaState};
+//# sourceMappingURL=useColorAreaState.js.map

package/dist/private/color/useColorAreaState.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/react-stately/src/color/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} from '../utils/number';\n\nimport {Color, ColorChannel, ColorSpace} from './types';\nimport {normalizeColor, parseColor} from './Color';\nimport {useControlledState} from '../utils/useControlledState';\nimport {useMemo, useRef, useState} from 'react';\nimport {ValueBase} from '@react-types/shared';\n\nexport interface ColorAreaProps extends Omit<ValueBase<string | Color>, 'onChange'> {\n  /**\n   * The color space that the color area operates in. The `xChannel` and `yChannel` must be in this color space.\n   * If not provided, this defaults to the color space of the `color` or `defaultColor` value.\n   */\n  colorSpace?: ColorSpace,\n  /** Color channel for the horizontal axis. */\n  xChannel?: ColorChannel,\n  /** Color channel for the vertical axis. */\n  yChannel?: ColorChannel,\n  /** Whether the ColorArea is disabled. */\n  isDisabled?: boolean,\n  /** Handler that is called when the value changes, as the user drags. */\n  onChange?: (value: Color) => void,\n  /** Handler that is called when the user stops dragging. */\n  onChangeEnd?: (value: Color) => void\n}\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.js.map"}

package/dist/private/color/useColorAreaState.mjs

@@ -0,0 +1,130 @@
+import {clamp as $240e9101ba2842f5$export$7d15b64cf5a3a4c4, snapValueToStep as $240e9101ba2842f5$export$cb6e0bb50bc19463} from "../utils/number.mjs";
+import {normalizeColor as $890783418b00a858$export$4cde5df63f53f473, parseColor as $890783418b00a858$export$6e865ea70d7724f} from "./Color.mjs";
+import {useControlledState as $3e6197669829fe11$export$40bfa8c7b0832715} from "../utils/useControlledState.mjs";
+import {useState as $5VLix$useState, useMemo as $5VLix$useMemo, useRef as $5VLix$useRef} from "react";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+const $1f22dbfd2b026cf2$var$DEFAULT_COLOR = (0, $890783418b00a858$export$6e865ea70d7724f)('#ffffff');
+function $1f22dbfd2b026cf2$export$6df7f0e2cabc7eef(props) {
+    let { value: value, defaultValue: defaultValue, colorSpace: colorSpace, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
+    if (!value && !defaultValue) defaultValue = $1f22dbfd2b026cf2$var$DEFAULT_COLOR;
+    if (value) value = (0, $890783418b00a858$export$4cde5df63f53f473)(value);
+    if (defaultValue) defaultValue = (0, $890783418b00a858$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, $3e6197669829fe11$export$40bfa8c7b0832715)(value, defaultValue, onChange);
+    let [initialValue] = (0, $5VLix$useState)(colorValue);
+    let color = (0, $5VLix$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+        colorValue,
+        colorSpace
+    ]);
+    let valueRef = (0, $5VLix$useRef)(color);
+    let setColor = (color)=>{
+        valueRef.current = color;
+        setColorState(color);
+    };
+    let channels = (0, $5VLix$useMemo)(()=>color.getColorSpaceAxes({
+            xChannel: xChannel,
+            yChannel: yChannel
+        }), [
+        color,
+        xChannel,
+        yChannel
+    ]);
+    let xChannelRange = color.getChannelRange(channels.xChannel);
+    let yChannelRange = color.getChannelRange(channels.yChannel);
+    let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
+    let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
+    let [isDragging, setDragging] = (0, $5VLix$useState)(false);
+    let isDraggingRef = (0, $5VLix$useRef)(false);
+    let xValue = color.getChannelValue(channels.xChannel);
+    let yValue = color.getChannelValue(channels.yChannel);
+    let setXValue = (v)=>{
+        if (v === xValue) return;
+        let newColor = color.withChannelValue(channels.xChannel, v);
+        setColor(newColor);
+    };
+    let setYValue = (v)=>{
+        if (v === yValue) return;
+        let newColor = color.withChannelValue(channels.yChannel, v);
+        setColor(newColor);
+    };
+    return {
+        channels: channels,
+        xChannelStep: stepX,
+        yChannelStep: stepY,
+        xChannelPageStep: pageSizeX,
+        yChannelPageStep: pageSizeY,
+        value: color,
+        defaultValue: value !== undefined ? initialValue : defaultValue,
+        setValue (value) {
+            setColor((0, $890783418b00a858$export$4cde5df63f53f473)(value));
+        },
+        xValue: xValue,
+        setXValue: setXValue,
+        yValue: yValue,
+        setYValue: setYValue,
+        setColorFromPoint (x, y) {
+            let newXValue = minValueX + (0, $240e9101ba2842f5$export$7d15b64cf5a3a4c4)(x, 0, 1) * (maxValueX - minValueX);
+            let newYValue = minValueY + (1 - (0, $240e9101ba2842f5$export$7d15b64cf5a3a4c4)(y, 0, 1)) * (maxValueY - minValueY);
+            let newColor;
+            if (newXValue !== xValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newXValue = (0, $240e9101ba2842f5$export$cb6e0bb50bc19463)(newXValue, minValueX, maxValueX, stepX);
+                newColor = color.withChannelValue(channels.xChannel, newXValue);
+            }
+            if (newYValue !== yValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newYValue = (0, $240e9101ba2842f5$export$cb6e0bb50bc19463)(newYValue, minValueY, maxValueY, stepY);
+                newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+            }
+            if (newColor) setColor(newColor);
+        },
+        getThumbPosition () {
+            let x = (xValue - minValueX) / (maxValueX - minValueX);
+            let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
+            return {
+                x: x,
+                y: y
+            };
+        },
+        incrementX (stepSize = 1) {
+            setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $240e9101ba2842f5$export$cb6e0bb50bc19463)(xValue + stepSize, minValueX, maxValueX, stepX));
+        },
+        incrementY (stepSize = 1) {
+            setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $240e9101ba2842f5$export$cb6e0bb50bc19463)(yValue + stepSize, minValueY, maxValueY, stepY));
+        },
+        decrementX (stepSize = 1) {
+            setXValue((0, $240e9101ba2842f5$export$cb6e0bb50bc19463)(xValue - stepSize, minValueX, maxValueX, stepX));
+        },
+        decrementY (stepSize = 1) {
+            setYValue((0, $240e9101ba2842f5$export$cb6e0bb50bc19463)(yValue - stepSize, minValueY, maxValueY, stepY));
+        },
+        setDragging (isDragging) {
+            let wasDragging = isDraggingRef.current;
+            isDraggingRef.current = isDragging;
+            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
+            setDragging(isDragging);
+        },
+        isDragging: isDragging,
+        getDisplayColor () {
+            return color.withChannelValue('alpha', 1);
+        }
+    };
+}
+
+
+export {$1f22dbfd2b026cf2$export$6df7f0e2cabc7eef as useColorAreaState};
+//# sourceMappingURL=useColorAreaState.mjs.map

package/dist/private/color/useColorAreaState.mjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/react-stately/src/color/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} from '../utils/number';\n\nimport {Color, ColorChannel, ColorSpace} from './types';\nimport {normalizeColor, parseColor} from './Color';\nimport {useControlledState} from '../utils/useControlledState';\nimport {useMemo, useRef, useState} from 'react';\nimport {ValueBase} from '@react-types/shared';\n\nexport interface ColorAreaProps extends Omit<ValueBase<string | Color>, 'onChange'> {\n  /**\n   * The color space that the color area operates in. The `xChannel` and `yChannel` must be in this color space.\n   * If not provided, this defaults to the color space of the `color` or `defaultColor` value.\n   */\n  colorSpace?: ColorSpace,\n  /** Color channel for the horizontal axis. */\n  xChannel?: ColorChannel,\n  /** Color channel for the vertical axis. */\n  yChannel?: ColorChannel,\n  /** Whether the ColorArea is disabled. */\n  isDisabled?: boolean,\n  /** Handler that is called when the value changes, as the user drags. */\n  onChange?: (value: Color) => void,\n  /** Handler that is called when the user stops dragging. */\n  onChangeEnd?: (value: Color) => void\n}\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.mjs.map"}

package/dist/private/color/useColorChannelFieldState.cjs

@@ -0,0 +1,65 @@
+var $7dbcf2f8a3f533af$exports = require("../numberfield/useNumberFieldState.cjs");
+var $4e0e76ad3205925c$exports = require("./useColor.cjs");
+var $14cedf286405cc4b$exports = require("../utils/useControlledState.cjs");
+var $6OCUc$react = require("react");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColorChannelFieldState", function () { return $426f9e14fe3296e9$export$b9fc0d69c9190c4a; });
+
+
+
+
+function $426f9e14fe3296e9$export$b9fc0d69c9190c4a(props) {
+    let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
+    let initialValue = (0, $4e0e76ad3205925c$exports.useColor)(props.value);
+    let initialDefaultValue = (0, $4e0e76ad3205925c$exports.useColor)(props.defaultValue);
+    let [colorValue, setColor] = (0, $14cedf286405cc4b$exports.useControlledState)(initialValue, initialDefaultValue ?? null, props.onChange);
+    let color = $426f9e14fe3296e9$var$useConvertColor(colorValue, colorSpace);
+    let [initialColorValue] = (0, $6OCUc$react.useState)(colorValue);
+    let defaultColorValue = initialDefaultValue ?? initialColorValue;
+    let defaultColor = $426f9e14fe3296e9$var$useConvertColor(defaultColorValue, colorSpace);
+    let value = color.getChannelValue(channel);
+    let range = color.getChannelRange(channel);
+    let formatOptions = (0, $6OCUc$react.useMemo)(()=>color.getChannelFormatOptions(channel), [
+        color,
+        channel
+    ]);
+    let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;
+    let numberFieldState = (0, $7dbcf2f8a3f533af$exports.useNumberFieldState)({
+        locale: locale,
+        value: colorValue === null ? NaN : value / multiplier,
+        defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,
+        onChange: (v)=>{
+            if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
+            else setColor(null);
+        },
+        minValue: range.minValue / multiplier,
+        maxValue: range.maxValue / multiplier,
+        step: range.step / multiplier,
+        formatOptions: formatOptions
+    });
+    return {
+        ...numberFieldState,
+        colorValue: color,
+        defaultColorValue: defaultColorValue,
+        setColorValue: setColor
+    };
+}
+function $426f9e14fe3296e9$var$useConvertColor(colorValue, colorSpace) {
+    let black = (0, $4e0e76ad3205925c$exports.useColor)('#000');
+    return (0, $6OCUc$react.useMemo)(()=>{
+        let nonNullColorValue = colorValue || black;
+        return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
+    }, [
+        black,
+        colorValue,
+        colorSpace
+    ]);
+}
+
+
+//# sourceMappingURL=useColorChannelFieldState.cjs.map

package/dist/private/color/useColorChannelFieldState.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;AA6BO,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,4CAAiB,EAAE,cAAc,uBAAuB,MAAM,MAAM,QAAQ;IACzG,IAAI,QAAQ,sCAAgB,YAAY;IACxC,IAAI,CAAC,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IACnC,IAAI,oBAAoB,uBAAuB;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,6CAAkB,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/src/color/useColorChannelFieldState.ts"],"sourcesContent":["import {Color, ColorChannel, ColorSpace} from './types';\nimport {ColorFieldProps} from './useColorFieldState';\nimport {NumberFieldState, useNumberFieldState} from '../numberfield/useNumberFieldState';\nimport {useColor} from './useColor';\nimport {useControlledState} from '../utils/useControlledState';\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.cjs.map"}

package/dist/private/color/useColorChannelFieldState.js

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

package/dist/private/color/useColorChannelFieldState.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;AA6BO,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,yCAAiB,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,yCAAkB,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/src/color/useColorChannelFieldState.ts"],"sourcesContent":["import {Color, ColorChannel, ColorSpace} from './types';\nimport {ColorFieldProps} from './useColorFieldState';\nimport {NumberFieldState, useNumberFieldState} from '../numberfield/useNumberFieldState';\nimport {useColor} from './useColor';\nimport {useControlledState} from '../utils/useControlledState';\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.js.map"}