@react-aria/color 3.0.0-beta.30 → 3.0.0-beta.32

package/dist/zh-TW.module.js

@@ -0,0 +1,13 @@
+var $b0fef28529309aa6$exports = {};
+$b0fef28529309aa6$exports = {
+    "colorInputLabel": (args)=>`${args.label}\u{FF0C}${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}\u{FF1A}${args.value}`,
+    "colorPicker": `\u{6AA2}\u{8272}\u{5668}`,
+    "twoDimensionalSlider": `2D \u{6ED1}\u{687F}`,
+    "colorSwatch": `color swatch`,
+    "transparent": `transparent`
+};
+
+
+export {$b0fef28529309aa6$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,mBAAmB,CAAC,OAAS,CAAC,EAAE,KAAK,KAAK,CAAC,QAAC,EAAE,KAAK,YAAY,CAAC,CAAC;IACnF,qBAAqB,CAAC,OAAS,CAAC,EAAE,KAAK,IAAI,CAAC,QAAC,EAAE,KAAK,KAAK,CAAC,CAAC;IAC3D,eAAe,CAAC,wBAAG,CAAC;IACpB,wBAAwB,CAAC,mBAAK,CAAC;IAC/B,eAAe,CAAC,YAAY,CAAC;IAC7B,eAAe,CAAC,WAAW,CAAC;AAC9B","sources":["packages/@react-aria/color/intl/zh-TW.json"],"sourcesContent":["{\n  \"colorInputLabel\": \"{label}，{channelLabel}\",\n  \"colorNameAndValue\": \"{name}：{value}\",\n  \"colorPicker\": \"檢色器\",\n  \"twoDimensionalSlider\": \"2D 滑桿\",\n  \"colorSwatch\": \"color swatch\",\n  \"transparent\": \"transparent\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/color",
-  "version": "3.0.0-beta.30",
+  "version": "3.0.0-beta.32",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,17 +22,18 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/i18n": "^3.10.1",
-    "@react-aria/interactions": "^3.21.0",
-    "@react-aria/slider": "^3.7.5",
-    "@react-aria/spinbutton": "^3.6.2",
-    "@react-aria/textfield": "^3.14.2",
-    "@react-aria/utils": "^3.23.1",
-    "@react-aria/visually-hidden": "^3.8.9",
-    "@react-stately/color": "^3.5.2",
-    "@react-stately/form": "^3.0.0",
-    "@react-types/color": "3.0.0-beta.22",
-    "@react-types/shared": "^3.22.0",
+    "@react-aria/i18n": "^3.11.0",
+    "@react-aria/interactions": "^3.21.2",
+    "@react-aria/numberfield": "^3.11.2",
+    "@react-aria/slider": "^3.7.7",
+    "@react-aria/spinbutton": "^3.6.4",
+    "@react-aria/textfield": "^3.14.4",
+    "@react-aria/utils": "^3.24.0",
+    "@react-aria/visually-hidden": "^3.8.11",
+    "@react-stately/color": "^3.6.0",
+    "@react-stately/form": "^3.0.2",
+    "@react-types/color": "3.0.0-beta.24",
+    "@react-types/shared": "^3.23.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -42,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f040ff62678e6a31375b96c05396df0bae660350"
+  "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
 }

package/src/index.ts

@@ -13,8 +13,12 @@ export {useColorArea} from './useColorArea';
 export {useColorSlider} from './useColorSlider';
 export {useColorWheel} from './useColorWheel';
 export {useColorField} from './useColorField';
+export {useColorSwatch} from './useColorSwatch';
+export {useColorChannelField} from './useColorChannelField';
 export type {AriaColorAreaOptions, ColorAreaAria} from './useColorArea';
 export type {AriaColorSliderOptions, ColorSliderAria} from './useColorSlider';
 export type {AriaColorWheelOptions, ColorWheelAria} from './useColorWheel';
 export type {AriaColorFieldProps} from '@react-types/color';
 export type {ColorFieldAria} from './useColorField';
+export type {AriaColorSwatchProps, ColorSwatchAria} from './useColorSwatch';
+export type {AriaColorChannelFieldProps, ColorChannelFieldAria} from './useColorChannelField';

package/src/useColorArea.ts

@@ -25,8 +25,6 @@ import {useVisuallyHidden} from '@react-aria/visually-hidden';
 export interface ColorAreaAria {
   /** Props for the color area container element. */
   colorAreaProps: DOMAttributes,
-  /** Props for the color area gradient foreground element. */
-  gradientProps: DOMAttributes,
   /** Props for the thumb element. */
   thumbProps: DOMAttributes,
   /** Props for the visually hidden horizontal range input element. */
@@ -79,6 +77,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
   });
 
   let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
+  let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);
   let {xChannel, yChannel, zChannel} = state.channels;
   let xChannelStep = state.xChannelStep;
   let yChannelStep = state.yChannelStep;
@@ -183,6 +182,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
     onFocusWithinChange: (focusWithin:boolean) => {
       if (!focusWithin) {
         setValueChangedViaKeyboard(false);
+        setValueChangedViaInputChangeEvent(false);
       }
     }
   });
@@ -336,19 +336,32 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
     }
   });
 
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const {target} = e;
+    setValueChangedViaInputChangeEvent(true);
+    if (target === inputXRef.current) {
+      state.setXValue(parseFloat(target.value));
+    } else if (target === inputYRef.current) {
+      state.setYValue(parseFloat(target.value));
+    }
+  };
+
   let isMobile = isIOS() || isAndroid();
 
-  function getAriaValueTextForChannel(channel:ColorChannel) {
-    return (
-      valueChangedViaKeyboard ?
-      stringFormatter.format('colorNameAndValue', {name: state.value.getChannelName(channel, locale), value: state.value.formatChannelValue(channel, locale)})
+  let value = state.getDisplayColor();
+  const getAriaValueTextForChannel = useCallback((channel:ColorChannel) => {
+    const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;
+    return `${
+      isAfterInput ?
+      stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel, locale), value: value.formatChannelValue(channel, locale)})
       :
       [
-        stringFormatter.format('colorNameAndValue', {name: state.value.getChannelName(channel, locale), value: state.value.formatChannelValue(channel, locale)}),
-        stringFormatter.format('colorNameAndValue', {name: state.value.getChannelName(channel === yChannel ? xChannel : yChannel, locale), value: state.value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)})
+        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel, locale), value: value.formatChannelValue(channel, locale)}),
+        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale), value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)}),
+        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(zChannel, locale), value: value.formatChannelValue(zChannel, locale)})
       ].join(', ')
-    );
-  }
+    }, ${value.getColorName(locale)}`;
+  }, [locale, value, stringFormatter, valueChangedViaInputChangeEvent, valueChangedViaKeyboard, xChannel, yChannel, zChannel]);
 
   let colorPickerLabel = stringFormatter.format('colorPicker');
 
@@ -381,14 +394,13 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
 
   let {
     colorAreaStyleProps,
-    gradientStyleProps,
     thumbStyleProps
   } = useColorAreaGradient({
     direction,
     state,
     xChannel,
-    zChannel,
-    isDisabled: props.isDisabled
+    yChannel,
+    zChannel
   });
 
   return {
@@ -398,10 +410,6 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
       ...colorAreaStyleProps,
       role: 'group'
     },
-    gradientProps: {
-      ...gradientStyleProps,
-      role: 'presentation'
-    },
     thumbProps: {
       ...thumbInteractions,
       ...thumbStyleProps,
@@ -417,6 +425,9 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
       step: xChannelStep,
       'aria-roledescription': ariaRoleDescription,
       'aria-valuetext': getAriaValueTextForChannel(xChannel),
+      'aria-orientation': 'horizontal',
+      'aria-describedby': props['aria-describedby'],
+      'aria-details': props['aria-details'],
       disabled: isDisabled,
       value: state.value.getChannelValue(xChannel),
       name: xName,
@@ -427,9 +438,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
         but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
       */
       'aria-hidden': (isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard ? undefined : 'true'),
-      onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        state.setXValue(parseFloat(e.target.value));
-      }
+      onChange
     },
     yInputProps: {
       ...yInputLabellingProps,
@@ -442,6 +451,8 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
       'aria-roledescription': ariaRoleDescription,
       'aria-valuetext': getAriaValueTextForChannel(yChannel),
       'aria-orientation': 'vertical',
+      'aria-describedby': props['aria-describedby'],
+      'aria-details': props['aria-details'],
       disabled: isDisabled,
       value: state.value.getChannelValue(yChannel),
       name: yName,
@@ -452,9 +463,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
         but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
       */
       'aria-hidden': (isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true'),
-      onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        state.setYValue(parseFloat(e.target.value));
-      }
+      onChange
     }
   };
 }

package/src/useColorAreaGradient.ts

@@ -10,205 +10,89 @@
  * governing permissions and limitations under the License.
 */
 
+import {Color} from '@react-types/color';
 import {CSSProperties, useMemo} from 'react';
+import {parseColor} from '@react-stately/color';
 
-const generateRGB_R = (orientation, dir: boolean, zValue: number) => {
-  let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-  let result = {
-    colorAreaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
-    },
-    gradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
-      'WebkitMaskImage': maskImage,
-      maskImage
-    }
-  };
-  return result;
-};
-
-const generateRGB_G = (orientation, dir: boolean, zValue: number) => {
-  let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-  let result = {
-    colorAreaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
-    },
-    gradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
-      'WebkitMaskImage': maskImage,
-      maskImage
-    }
-  };
-  return result;
-};
-
-const generateRGB_B = (orientation, dir: boolean, zValue: number) => {
-  let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-  let result = {
-    colorAreaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
-    },
-    gradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
-      'WebkitMaskImage': maskImage,
-      maskImage
-    }
-  };
-  return result;
-};
-
-
-const generateHSL_H = (orientation, dir: boolean, zValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
-        `hsl(${zValue}, 100%, 50%)`
-      ].join(',')
-    }
-  };
-  return result;
-};
-
-const generateHSL_S = (orientation, dir: boolean, alphaValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        'hsl(0, 0%, 50%)'
-      ].join(',')
-    }
-  };
-  return result;
-};
-
-const generateHSL_L = (orientation, dir: boolean, zValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      backgroundImage: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
-      ].join(',')
-    }
-  };
-  return result;
-};
-
-
-const generateHSB_H = (orientation, dir: boolean, zValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
-        `hsl(${zValue}, 100%, 50%)`
-      ].join(',')
-    }
-  };
-  return result;
-};
+const hue = (color: Color) => [0, 60, 120, 180, 240, 300, 360].map(hue => color.withChannelValue('hue', hue).toString('css')).join(', ');
+const saturation = (color: Color) => `${color.withChannelValue('saturation', 0)}, transparent`;
 
-const generateHSB_S = (orientation, dir: boolean, alphaValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
-      ].join(',')
-    }
-  };
-  return result;
+const hslChannels = {
+  hue,
+  saturation,
+  lightness: () => 'black, transparent, white'
 };
 
-const generateHSB_B = (orientation, dir: boolean, alphaValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        '#000'
-      ].join(',')
-    }
-  };
-  return result;
+const hsbChannels = {
+  hue,
+  saturation,
+  brightness: () => 'black, transparent'
 };
 
-
 interface Gradients {
   colorAreaStyleProps: {
     style: CSSProperties
   },
-  gradientStyleProps: {
-    style: CSSProperties
-  },
   thumbStyleProps: {
     style: CSSProperties
   }
 }
 
-export function useColorAreaGradient({direction, state, zChannel, xChannel, isDisabled}): Gradients {
+export function useColorAreaGradient({direction, state, zChannel, xChannel, yChannel}): Gradients {
   let returnVal = useMemo<Gradients>(() => {
-    let orientation = ['top', direction === 'rtl' ? 'left' : 'right'];
-    let dir = false;
-    let background = {colorAreaStyles: {}, gradientStyles: {}};
+    let end = direction === 'rtl' ? 'left' : 'right';
+    let colorAreaStyles = {};
     let zValue = state.value.getChannelValue(zChannel);
-    let {minValue: zMin, maxValue: zMax} = state.value.getChannelRange(zChannel);
-    let alphaValue = (zValue - zMin) / (zMax - zMin);
-    let isHSL = state.value.getColorSpace() === 'hsl';
-    if (!isDisabled) {
-      switch (zChannel) {
-        case 'red': {
-          dir = xChannel === 'green';
-          background = generateRGB_R(orientation, dir, zValue);
-          break;
-        }
-        case 'green': {
-          dir = xChannel === 'red';
-          background = generateRGB_G(orientation, dir, zValue);
-          break;
-        }
-        case 'blue': {
-          dir = xChannel === 'red';
-          background = generateRGB_B(orientation, dir, zValue);
-          break;
-        }
-        case 'hue': {
-          dir = xChannel !== 'saturation';
-          if (isHSL) {
-            background = generateHSL_H(orientation, dir, zValue);
-          } else {
-            background = generateHSB_H(orientation, dir, zValue);
-          }
-          break;
-        }
-        case 'saturation': {
-          dir = xChannel === 'hue';
-          if (isHSL) {
-            background = generateHSL_S(orientation, dir, alphaValue);
-          } else {
-            background = generateHSB_S(orientation, dir, alphaValue);
-          }
-          break;
-        }
-        case 'brightness': {
-          dir = xChannel === 'hue';
-          background = generateHSB_B(orientation, dir, alphaValue);
-          break;
+
+    switch (state.value.getColorSpace()) {
+      case 'rgb': {
+        let rgb = parseColor('rgb(0, 0, 0)');
+        colorAreaStyles = {
+          background: [
+            // The screen blend mode multiplies the inverse of each channel, e.g. 1 - (1 - a) * (1 - b).
+            // Create a layer for each channel, with the other channels as 0. After blending, this should
+            // result in the gradients being combined channel by channel.
+            `linear-gradient(to ${end}, ${rgb.withChannelValue(xChannel, 0)}, ${rgb.withChannelValue(xChannel, 255)})`,
+            `linear-gradient(to top, ${rgb.withChannelValue(yChannel, 0)}, ${rgb.withChannelValue(yChannel, 255)})`,
+            rgb.withChannelValue(zChannel, zValue)
+          ].join(','),
+          backgroundBlendMode: 'screen'
+        };
+        break;
+      }
+      case 'hsl': {
+        let channels = state.value.getColorChannels();
+        let value = parseColor('hsl(0, 100%, 50%)').withChannelValue(zChannel, zValue);
+
+        let bg = channels
+          .filter(c => c !== zChannel)
+          .map(c => `linear-gradient(to ${c === xChannel ? end : 'top'}, ${hslChannels[c](value)})`)
+          .reverse();
+        if (zChannel === 'hue') {
+          bg.push(value.toString('css'));
         }
-        case 'lightness': {
-          dir = xChannel === 'hue';
-          background = generateHSL_L(orientation, dir, zValue);
-          break;
+    
+        colorAreaStyles = {
+          background: bg.join(', ')
+        };
+        break;
+      }
+      case 'hsb': {
+        let channels = state.value.getColorChannels();
+        let value = parseColor('hsb(0, 100%, 100%)').withChannelValue(zChannel, zValue);
+
+        let bg = channels
+          .filter(c => c !== zChannel)
+          .map(c => `linear-gradient(to ${c === xChannel ? end : 'top'}, ${hsbChannels[c](value)})`)
+          .reverse();
+        if (zChannel === 'hue') {
+          bg.push(value.toString('css'));
         }
+    
+        colorAreaStyles = {
+          background: bg.join(', ')
+        };
+        break;
       }
     }
 
@@ -226,14 +110,7 @@ export function useColorAreaGradient({direction, state, zChannel, xChannel, isDi
           position: 'relative',
           touchAction: 'none',
           ...forcedColorAdjustNoneStyle,
-          ...background.colorAreaStyles
-        }
-      },
-      gradientStyleProps: {
-        style: {
-          touchAction: 'none',
-          ...forcedColorAdjustNoneStyle,
-          ...background.gradientStyles
+          ...colorAreaStyles
         }
       },
       thumbStyleProps: {
@@ -241,13 +118,13 @@ export function useColorAreaGradient({direction, state, zChannel, xChannel, isDi
           position: 'absolute',
           left: `${x * 100}%`,
           top: `${y * 100}%`,
-          transform: 'translate(0%, 0%)',
+          transform: 'translate(-50%, -50%)',
           touchAction: 'none',
           ...forcedColorAdjustNoneStyle
         }
       }
     };
-  }, [direction, state, zChannel, xChannel, isDisabled]);
+  }, [direction, state, zChannel, xChannel, yChannel]);
 
   return returnVal;
 }

package/src/useColorChannelField.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 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.
+ */
+
+import {AriaLabelingProps} from '@react-types/shared';
+import {ColorChannelFieldProps, ColorChannelFieldState} from '@react-stately/color';
+import {NumberFieldAria, useNumberField} from '@react-aria/numberfield';
+import {RefObject} from 'react';
+import {useLocale} from '@react-aria/i18n';
+
+export interface AriaColorChannelFieldProps extends ColorChannelFieldProps, AriaLabelingProps {}
+export interface ColorChannelFieldAria extends NumberFieldAria {}
+
+/**
+ * Provides the behavior and accessibility implementation for a color channel field, allowing users to edit the
+ * value of an individual color channel.
+ */
+export function useColorChannelField(props: AriaColorChannelFieldProps, state: ColorChannelFieldState, inputRef: RefObject<HTMLInputElement>): ColorChannelFieldAria {
+  let {locale} = useLocale();
+  return useNumberField({
+    ...props,
+    value: undefined,
+    defaultValue: undefined,
+    onChange: undefined,
+    validate: undefined,
+    // Provide a default aria-label if no other label is provided.
+    'aria-label': props['aria-label'] || (props.label || props['aria-labelledby'] ? undefined : state.colorValue.getChannelName(props.channel, locale))
+  }, state, inputRef);
+}

package/src/useColorField.ts

@@ -12,8 +12,9 @@
 
 import {AriaColorFieldProps} from '@react-types/color';
 import {ColorFieldState} from '@react-stately/color';
+import {DOMAttributes, ValidationResult} from '@react-types/shared';
 import {
-  HTMLAttributes,
+  InputHTMLAttributes,
   LabelHTMLAttributes,
   RefObject,
   useCallback,
@@ -24,13 +25,16 @@ import {privateValidationStateProp} from '@react-stately/form';
 import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
 import {useSpinButton} from '@react-aria/spinbutton';
-import {ValidationResult} from '@react-types/shared';
 
 export interface ColorFieldAria extends ValidationResult {
   /** Props for the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
-  inputProps: HTMLAttributes<HTMLInputElement>
+  inputProps: InputHTMLAttributes<HTMLInputElement>,
+  /** Props for the text field's description element, if any. */
+  descriptionProps: DOMAttributes,
+  /** Props for the text field's error message element, if any. */
+  errorMessageProps: DOMAttributes
 }
 
 /**
@@ -100,17 +104,17 @@ export function useColorField(
     }
   };
 
-  let {inputProps, ...otherProps} = useFormattedTextField(
-    mergeProps(props, {
-      id: inputId,
-      value: inputValue,
-      defaultValue: undefined,
-      validate: undefined,
-      [privateValidationStateProp]: state,
-      type: 'text',
-      autoComplete: 'off',
-      onChange
-    }), state, ref);
+  let {inputProps, ...otherProps} = useFormattedTextField({
+    ...props,
+    id: inputId,
+    value: inputValue,
+    defaultValue: undefined,
+    validate: undefined,
+    [privateValidationStateProp]: state,
+    type: 'text',
+    autoComplete: 'off',
+    onChange
+  }, state, ref);
 
   inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {
     role: 'textbox',