@react-aria/color 3.1.5 → 3.2.0

package/dist/zh-TW.module.js

@@ -1,13 +0,0 @@
-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}`,
-    "colorSwatch": `\u{8272}\u{7968}`,
-    "transparent": `\u{900F}\u{660E}`,
-    "twoDimensionalSlider": `2D \u{6ED1}\u{687F}`
-};
-
-
-export {$b0fef28529309aa6$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map

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

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

package/src/useColorArea.ts

@@ -1,467 +0,0 @@
-/*
- * 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.
- */
-
-import {AriaColorAreaProps, ColorChannel} from '@react-types/color';
-import {ColorAreaState} from '@react-stately/color';
-import {DOMAttributes, RefObject} from '@react-types/shared';
-import {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef, useState} from 'react';
-import {useColorAreaGradient} from './useColorAreaGradient';
-import {useFocus, useFocusWithin, useKeyboard, useMove} from '@react-aria/interactions';
-import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useVisuallyHidden} from '@react-aria/visually-hidden';
-
-export interface ColorAreaAria {
-  /** Props for the color area container element. */
-  colorAreaProps: DOMAttributes,
-  /** Props for the thumb element. */
-  thumbProps: DOMAttributes,
-  /** Props for the visually hidden horizontal range input element. */
-  xInputProps: InputHTMLAttributes<HTMLInputElement>,
-  /** Props for the visually hidden vertical range input element. */
-  yInputProps: InputHTMLAttributes<HTMLInputElement>
-}
-
-export interface AriaColorAreaOptions extends AriaColorAreaProps {
-  /** A ref to the input that represents the x axis of the color area. */
-  inputXRef: RefObject<HTMLInputElement | null>,
-  /** A ref to the input that represents the y axis of the color area. */
-  inputYRef: RefObject<HTMLInputElement | null>,
-  /** A ref to the color area containing element. */
-  containerRef: RefObject<Element | null>
-}
-
-/**
- * Provides the behavior and accessibility implementation for a color area component.
- * Color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
- */
-export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState): ColorAreaAria {
-  let {
-    isDisabled,
-    inputXRef,
-    inputYRef,
-    containerRef,
-    'aria-label': ariaLabel,
-    xName,
-    yName,
-    form
-  } = props;
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');
-
-  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
-
-  let {direction, locale} = useLocale();
-
-  let [focusedInput, setFocusedInput] = useState<'x' | 'y' | null>(null);
-  let focusInput = useCallback((inputRef:RefObject<HTMLInputElement | null> = inputXRef) => {
-    if (inputRef.current) {
-      focusWithoutScrolling(inputRef.current);
-    }
-  }, [inputXRef]);
-
-  useFormReset(inputXRef, state.defaultValue, state.setValue);
-
-  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
-  let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);
-  let {xChannel, yChannel, zChannel} = state.channels;
-  let xChannelStep = state.xChannelStep;
-  let yChannelStep = state.yChannelStep;
-
-  let currentPosition = useRef<{x: number, y: number} | null>(null);
-
-  let {keyboardProps} = useKeyboard({
-    onKeyDown(e) {
-      // these are the cases that useMove doesn't handle
-      if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
-        e.continuePropagation();
-        return;
-      }
-      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
-      e.preventDefault();
-      // remember to set this and unset it so that onChangeEnd is fired
-      state.setDragging(true);
-      setValueChangedViaKeyboard(true);
-      let dir;
-      switch (e.key) {
-        case 'PageUp':
-          state.incrementY(state.yChannelPageStep);
-          dir = 'y';
-          break;
-        case 'PageDown':
-          state.decrementY(state.yChannelPageStep);
-          dir = 'y';
-          break;
-        case 'Home':
-          direction === 'rtl' ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);
-          dir = 'x';
-          break;
-        case 'End':
-          direction === 'rtl' ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);
-          dir = 'x';
-          break;
-      }
-      state.setDragging(false);
-      if (dir) {
-        let input = dir === 'x' ? inputXRef : inputYRef;
-        focusInput(input);
-        setFocusedInput(dir);
-      }
-    }
-  });
-
-  let moveHandler = {
-    onMoveStart() {
-      currentPosition.current = null;
-      state.setDragging(true);
-    },
-    onMove({deltaX, deltaY, pointerType, shiftKey}) {
-      let {
-        incrementX,
-        decrementX,
-        incrementY,
-        decrementY,
-        xChannelPageStep,
-        xChannelStep,
-        yChannelPageStep,
-        yChannelStep,
-        getThumbPosition,
-        setColorFromPoint
-      } = state;
-      if (currentPosition.current == null) {
-        currentPosition.current = getThumbPosition();
-      }
-      let {width, height} = containerRef.current?.getBoundingClientRect() || {width: 0, height: 0};
-      let valueChanged = deltaX !== 0 || deltaY !== 0;
-      if (pointerType === 'keyboard') {
-        let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;
-        let deltaYValue = shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;
-        if ((deltaX > 0 && direction === 'ltr') || (deltaX < 0 && direction === 'rtl')) {
-          incrementX(deltaXValue);
-        } else if ((deltaX < 0 && direction === 'ltr') || (deltaX > 0 && direction === 'rtl')) {
-          decrementX(deltaXValue);
-        } else if (deltaY > 0) {
-          decrementY(deltaYValue);
-        } else if (deltaY < 0) {
-          incrementY(deltaYValue);
-        }
-        setValueChangedViaKeyboard(valueChanged);
-        // set the focused input based on which axis has the greater delta
-        focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? 'y' : 'x';
-        setFocusedInput(focusedInput);
-      } else {
-        currentPosition.current.x += (direction === 'rtl' ? -1 : 1) * deltaX / width ;
-        currentPosition.current.y += deltaY / height;
-        setColorFromPoint(currentPosition.current.x, currentPosition.current.y);
-      }
-    },
-    onMoveEnd() {
-      isOnColorArea.current = false;
-      state.setDragging(false);
-      let input = focusedInput === 'x' ? inputXRef : inputYRef;
-      focusInput(input);
-    }
-  };
-  let {moveProps: movePropsThumb} = useMove(moveHandler);
-
-  let {focusWithinProps} = useFocusWithin({
-    onFocusWithinChange: (focusWithin:boolean) => {
-      if (!focusWithin) {
-        setValueChangedViaKeyboard(false);
-        setValueChangedViaInputChangeEvent(false);
-      }
-    }
-  });
-
-  let currentPointer = useRef<number | null | undefined>(undefined);
-  let isOnColorArea = useRef<boolean>(false);
-  let {moveProps: movePropsContainer} = useMove({
-    onMoveStart() {
-      if (isOnColorArea.current) {
-        moveHandler.onMoveStart();
-      }
-    },
-    onMove(e) {
-      if (isOnColorArea.current) {
-        moveHandler.onMove(e);
-      }
-    },
-    onMoveEnd() {
-      if (isOnColorArea.current) {
-        moveHandler.onMoveEnd();
-      }
-    }
-  });
-
-  let onThumbDown = (id: number | null | undefined) => {
-    if (!state.isDragging) {
-      currentPointer.current = id;
-      setValueChangedViaKeyboard(false);
-      focusInput();
-      state.setDragging(true);
-      if (typeof PointerEvent !== 'undefined') {
-        addGlobalListener(window, 'pointerup', onThumbUp, false);
-      } else {
-        addGlobalListener(window, 'mouseup', onThumbUp, false);
-        addGlobalListener(window, 'touchend', onThumbUp, false);
-      }
-    }
-  };
-
-  let onThumbUp = (e) => {
-    let id = e.pointerId ?? e.changedTouches?.[0].identifier;
-    if (id === currentPointer.current) {
-      setValueChangedViaKeyboard(false);
-      focusInput();
-      state.setDragging(false);
-      currentPointer.current = undefined;
-      isOnColorArea.current = false;
-
-      if (typeof PointerEvent !== 'undefined') {
-        removeGlobalListener(window, 'pointerup', onThumbUp, false);
-      } else {
-        removeGlobalListener(window, 'mouseup', onThumbUp, false);
-        removeGlobalListener(window, 'touchend', onThumbUp, false);
-      }
-    }
-  };
-
-  let onColorAreaDown = (colorArea: Element, id: number | null | undefined, clientX: number, clientY: number) => {
-    let rect = colorArea.getBoundingClientRect();
-    let {width, height} = rect;
-    let x = (clientX - rect.x) / width;
-    let y = (clientY - rect.y) / height;
-    if (direction === 'rtl') {
-      x = 1 - x;
-    }
-    if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {
-      isOnColorArea.current = true;
-      setValueChangedViaKeyboard(false);
-      currentPointer.current = id;
-      state.setColorFromPoint(x, y);
-
-      focusInput();
-      state.setDragging(true);
-
-      if (typeof PointerEvent !== 'undefined') {
-        addGlobalListener(window, 'pointerup', onColorAreaUp, false);
-      } else {
-        addGlobalListener(window, 'mouseup', onColorAreaUp, false);
-        addGlobalListener(window, 'touchend', onColorAreaUp, false);
-      }
-    }
-  };
-
-  let onColorAreaUp = (e) => {
-    let id = e.pointerId ?? e.changedTouches?.[0].identifier;
-    if (isOnColorArea.current && id === currentPointer.current) {
-      isOnColorArea.current = false;
-      setValueChangedViaKeyboard(false);
-      currentPointer.current = undefined;
-      state.setDragging(false);
-      focusInput();
-
-      if (typeof PointerEvent !== 'undefined') {
-        removeGlobalListener(window, 'pointerup', onColorAreaUp, false);
-      } else {
-        removeGlobalListener(window, 'mouseup', onColorAreaUp, false);
-        removeGlobalListener(window, 'touchend', onColorAreaUp, false);
-      }
-    }
-  };
-
-  let colorAreaInteractions = isDisabled ? {} : mergeProps({
-    ...(typeof PointerEvent !== 'undefined' ? {
-      onPointerDown: (e: React.PointerEvent) => {
-        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {
-          return;
-        }
-        onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
-      }} : {
-        onMouseDown: (e: React.MouseEvent) => {
-          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
-            return;
-          }
-          onColorAreaDown(e.currentTarget, undefined, e.clientX, e.clientY);
-        },
-        onTouchStart: (e: React.TouchEvent) => {
-          onColorAreaDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
-        }
-      })
-  }, movePropsContainer);
-
-  let thumbInteractions = isDisabled ? {} : mergeProps({
-    ...(typeof PointerEvent !== 'undefined' ? {
-      onPointerDown: (e: React.PointerEvent) => {
-        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {
-          return;
-        }
-        onThumbDown(e.pointerId);
-      }} : {
-        onMouseDown: (e: React.MouseEvent) => {
-          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
-            return;
-          }
-          onThumbDown(undefined);
-        },
-        onTouchStart: (e: React.TouchEvent) => {
-          onThumbDown(e.changedTouches[0].identifier);
-        }
-      })
-  }, focusWithinProps, keyboardProps, movePropsThumb);
-
-  let {focusProps: xInputFocusProps} = useFocus({
-    onFocus: () => {
-      setFocusedInput('x');
-    }
-  });
-
-  let {focusProps: yInputFocusProps} = useFocus({
-    onFocus: () => {
-      setFocusedInput('y');
-    }
-  });
-
-  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();
-
-  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: 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');
-
-  let xInputLabellingProps = useLabels({
-    ...props,
-    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel
-  });
-
-  let yInputLabellingProps = useLabels({
-    ...props,
-    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel
-  });
-
-  let colorAreaLabellingProps = useLabels(
-    {
-      ...props,
-      'aria-label': ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
-    },
-    isMobile ? colorPickerLabel : undefined
-  );
-
-  let ariaRoleDescription = stringFormatter.format('twoDimensionalSlider');
-
-  let {visuallyHiddenProps} = useVisuallyHidden({style: {
-    opacity: '0.0001',
-    width: '100%',
-    height: '100%',
-    pointerEvents: 'none'
-  }});
-
-  let {
-    colorAreaStyleProps,
-    thumbStyleProps
-  } = useColorAreaGradient({
-    direction,
-    state,
-    xChannel,
-    yChannel,
-    zChannel
-  });
-
-  return {
-    colorAreaProps: {
-      ...colorAreaLabellingProps,
-      ...colorAreaInteractions,
-      ...colorAreaStyleProps,
-      role: 'group'
-    },
-    thumbProps: {
-      ...thumbInteractions,
-      ...thumbStyleProps,
-      role: 'presentation'
-    },
-    xInputProps: {
-      ...xInputLabellingProps,
-      ...visuallyHiddenProps,
-      ...xInputFocusProps,
-      type: 'range',
-      min: state.value.getChannelRange(xChannel).minValue,
-      max: state.value.getChannelRange(xChannel).maxValue,
-      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,
-      form,
-      tabIndex: (isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1),
-      /*
-        So that only a single "2d slider" control shows up when listing form elements for screen readers,
-        add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
-        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
-    },
-    yInputProps: {
-      ...yInputLabellingProps,
-      ...visuallyHiddenProps,
-      ...yInputFocusProps,
-      type: 'range',
-      min: state.value.getChannelRange(yChannel).minValue,
-      max: state.value.getChannelRange(yChannel).maxValue,
-      step: yChannelStep,
-      '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,
-      form,
-      tabIndex: (isMobile || focusedInput === 'y' ? undefined : -1),
-      /*
-        So that only a single "2d slider" control shows up when listing form elements for screen readers,
-        add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
-        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
-    }
-  };
-}

package/src/useColorAreaGradient.ts

@@ -1,139 +0,0 @@
-/*
- * Copyright 2022 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 {Color, ColorChannel} from '@react-types/color';
-import {ColorAreaState, parseColor} from '@react-stately/color';
-import {CSSProperties, useMemo} from 'react';
-
-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 hslChannels = {
-  hue,
-  saturation,
-  lightness: () => 'black, transparent, white'
-};
-
-const hsbChannels = {
-  hue,
-  saturation,
-  brightness: () => 'black, transparent'
-};
-
-interface Gradients {
-  colorAreaStyleProps: {
-    style: CSSProperties
-  },
-  thumbStyleProps: {
-    style: CSSProperties
-  }
-}
-
-interface ColorAreaGradientProps {
-  direction: 'ltr' | 'rtl',
-  state: ColorAreaState,
-  zChannel: ColorChannel,
-  xChannel: ColorChannel,
-  yChannel: ColorChannel
-}
-
-export function useColorAreaGradient({direction, state, zChannel, xChannel, yChannel}: ColorAreaGradientProps): Gradients {
-  let returnVal = useMemo<Gradients>(() => {
-    let end = direction === 'rtl' ? 'left' : 'right';
-    let colorAreaStyles = {};
-    let zValue = state.value.getChannelValue(zChannel);
-
-    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'));
-        }
-
-        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;
-      }
-    }
-
-    let {x, y} = state.getThumbPosition();
-
-    if (direction === 'rtl') {
-      x = 1 - x;
-    }
-
-    let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};
-
-    return {
-      colorAreaStyleProps: {
-        style: {
-          position: 'relative',
-          touchAction: 'none',
-          ...forcedColorAdjustNoneStyle,
-          ...colorAreaStyles
-        }
-      },
-      thumbStyleProps: {
-        style: {
-          position: 'absolute',
-          left: `${x * 100}%`,
-          top: `${y * 100}%`,
-          transform: 'translate(-50%, -50%)',
-          touchAction: 'none',
-          ...forcedColorAdjustNoneStyle
-        }
-      }
-    };
-  }, [direction, state, zChannel, xChannel, yChannel]);
-
-  return returnVal;
-}
-

package/src/useColorChannelField.ts

@@ -1,36 +0,0 @@
-/*
- * 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, RefObject} from '@react-types/shared';
-import {ColorChannelFieldProps, ColorChannelFieldState} from '@react-stately/color';
-import {NumberFieldAria, useNumberField} from '@react-aria/numberfield';
-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 | null>): 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);
-}