react-aria-components 3.0.0-nightly-ab9fd5c68-241125 → 3.0.0-nightly-10a43de88-241127

package/dist/ColorSwatchPicker.module.js

@@ -4,7 +4,7 @@ import $jTaLw$intlStringsmodulejs from "./intlStrings.module.js";
 import {ListBox as $eed445e0843c11d0$export$41f133550aa26f48, ListBoxItem as $eed445e0843c11d0$export$a11e76429ed99b4} from "./ListBox.module.js";
 import {useColorPickerState as $jTaLw$useColorPickerState, parseColor as $jTaLw$parseColor} from "@react-stately/color";
 import {filterDOMProps as $jTaLw$filterDOMProps} from "@react-aria/utils";
-import $jTaLw$react, {createContext as $jTaLw$createContext, useMemo as $jTaLw$useMemo, forwardRef as $jTaLw$forwardRef, useContext as $jTaLw$useContext, useEffect as $jTaLw$useEffect} from "react";
+import $jTaLw$react, {createContext as $jTaLw$createContext, forwardRef as $jTaLw$forwardRef, useMemo as $jTaLw$useMemo, useContext as $jTaLw$useContext, useEffect as $jTaLw$useEffect} from "react";
 import {useLocalizedStringFormatter as $jTaLw$useLocalizedStringFormatter, useLocale as $jTaLw$useLocale} from "react-aria";
 
 
@@ -21,7 +21,7 @@ function $parcel$interopDefault(a) {
 
 const $0bb41941cfe72bd4$export$7214f50881fc1eaf = /*#__PURE__*/ (0, $jTaLw$createContext)(null);
 const $0bb41941cfe72bd4$var$ColorMapContext = /*#__PURE__*/ (0, $jTaLw$createContext)(null);
-function $0bb41941cfe72bd4$var$ColorSwatchPicker(props, ref) {
+const $0bb41941cfe72bd4$export$b46792416e3d8515 = /*#__PURE__*/ (0, $jTaLw$forwardRef)(function ColorSwatchPicker(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $0bb41941cfe72bd4$export$7214f50881fc1eaf);
     let state = (0, $jTaLw$useColorPickerState)(props);
     let colorMap = (0, $jTaLw$useMemo)(()=>new Map(), []);
@@ -49,11 +49,8 @@ function $0bb41941cfe72bd4$var$ColorSwatchPicker(props, ref) {
     }, /*#__PURE__*/ (0, $jTaLw$react).createElement($0bb41941cfe72bd4$var$ColorMapContext.Provider, {
         value: colorMap
     }, props.children));
-}
-/**
- * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
- */ let $0bb41941cfe72bd4$export$b46792416e3d8515 = /*#__PURE__*/ (0, $jTaLw$forwardRef)($0bb41941cfe72bd4$var$ColorSwatchPicker);
-function $0bb41941cfe72bd4$var$ColorSwatchPickerItem(props, ref) {
+});
+const $0bb41941cfe72bd4$export$abcd89c27081c2ef = /*#__PURE__*/ (0, $jTaLw$forwardRef)(function ColorSwatchPickerItem(props, ref) {
     let propColor = props.color || '#0000';
     let color = (0, $jTaLw$useMemo)(()=>typeof propColor === 'string' ? (0, $jTaLw$parseColor)(propColor) : propColor, [
         propColor
@@ -89,8 +86,7 @@ function $0bb41941cfe72bd4$var$ColorSwatchPickerItem(props, ref) {
                 color: color
             }
         }, children)));
-}
-let $0bb41941cfe72bd4$export$abcd89c27081c2ef = /*#__PURE__*/ (0, $jTaLw$forwardRef)($0bb41941cfe72bd4$var$ColorSwatchPickerItem);
+});
 
 
 export {$0bb41941cfe72bd4$export$7214f50881fc1eaf as ColorSwatchPickerContext, $0bb41941cfe72bd4$export$b46792416e3d8515 as ColorSwatchPicker, $0bb41941cfe72bd4$export$abcd89c27081c2ef as ColorSwatchPickerItem};

package/dist/ColorSwatchPicker.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAAwD;AAC5G,MAAM,sDAAkB,CAAA,GAAA,oBAAY,EAA6B;AAEjE,SAAS,wCAAkB,KAA6B,EAAE,GAAiC;IACzF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;IAChC,IAAI,WAAW,CAAA,GAAA,cAAM,EAAE,IAAM,IAAI,OAAO,EAAE;IAC1C,IAAI,YAAY,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAE1D,qBACE,gCAAC,CAAA,GAAA,yCAAM;QACJ,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW;QAAI,EAAE;QAC5C,KAAK;QACL,WAAW,MAAM,SAAS,IAAI;QAC9B,OAAO,MAAM,KAAK;QAClB,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,CAAC,KAAK,CAAC,kBAAkB,GAAG,UAAU,MAAM,CAAC,uBAAuB,SAAQ;QAChH,QAAQ,MAAM,MAAM,IAAI;QACxB,eAAc;QACd,cAAc;YAAC,MAAM,KAAK,CAAC,QAAQ,CAAC;SAAQ;QAC5C,mBAAmB,CAAC;YAClB,yDAAyD;YACzD,IAAI,SAAS,OACX,MAAM,QAAQ,CAAC,SAAS,GAAG,CAAC;mBAAI;aAAK,CAAC,EAAE;QAE5C;QACA,wBAAA;qBACA,gCAAC,sCAAgB,QAAQ;QAAC,OAAO;OAC9B,MAAM,QAAQ;AAIvB;AAEA;;CAEC,GACD,IAAI,0DAAqB,CAAA,GAAA,iBAAS,EAAE;AAepC,SAAS,4CAAsB,KAAiC,EAAE,GAAiC;IACjG,IAAI,YAAY,MAAM,KAAK,IAAI;IAC/B,IAAI,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,cAAc,WAAW,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QAAC;KAAU;IACxG,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,QAAQ,CAAC;QACzB,IAAI,GAAG,CAAC,KAAK;QACb,OAAO;YACL,IAAI,MAAM,CAAC;QACb;IACF,GAAG;QAAC;QAAO;KAAI;IAEf,IAAI,OAAO,CAAC;QACV,IAAI,OAAO,MAAM,YACf,OAAO,CAAC,cAAgB,EAAE;gBAAC,GAAG,WAAW;uBAAE;YAAK;QAElD,OAAO;IACT;IAEA,qBACE,gCAAC,CAAA,GAAA,wCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,IAAI,MAAM,QAAQ,CAAC;QACnB,WAAW,MAAM,YAAY,CAAC;QAC9B,WAAW,KAAK,MAAM,SAAS,IAAI;QACnC,OAAO,KAAK,MAAM,KAAK;OACtB,CAAA,GAAA,yCAAiB,EAAE,KAAK,MAAM,QAAQ,GAAG,CAAA,yBACxC,gCAAC,CAAA,GAAA,yCAAiB,EAAE,QAAQ;YAAC,OAAO;uBAAC;YAAK;WACvC;AAKX;AAEA,IAAI,0DAAyB,CAAA,GAAA,iBAAS,EAAE","sources":["packages/react-aria-components/src/ColorSwatchPicker.tsx"],"sourcesContent":["import {AriaLabelingProps, HoverEvents, ValueBase} from '@react-types/shared';\nimport {Color, parseColor, useColorPickerState} from '@react-stately/color';\nimport {ColorSwatchContext} from './ColorSwatch';\nimport {composeRenderProps, ContextValue, RenderProps, StyleRenderProps, useContextProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBox, ListBoxItem, ListBoxItemRenderProps, ListBoxRenderProps} from './ListBox';\nimport React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';\nimport {useLocale, useLocalizedStringFormatter} from 'react-aria';\n\nexport interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps> {\n  /** The children of the ColorSwatchPicker. */\n  children?: ReactNode,\n  /**\n   * Whether the items are arranged in a stack or grid.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'stack'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);\nconst ColorMapContext = createContext<Map<string, Color> | null>(null);\n\nfunction ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);\n  let state = useColorPickerState(props);\n  let colorMap = useMemo(() => new Map(), []);\n  let formatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');\n\n  return (\n    <ListBox\n      {...filterDOMProps(props, {labelable: true})}\n      ref={ref}\n      className={props.className || 'react-aria-ColorSwatchPicker'}\n      style={props.style}\n      aria-label={props['aria-label'] || (!props['aria-labelledby'] ? formatter.format('colorSwatchPicker') : undefined)}\n      layout={props.layout || 'grid'}\n      selectionMode=\"single\"\n      selectedKeys={[state.color.toString('hexa')]}\n      onSelectionChange={(keys) => {\n        // single select, 'all' cannot occur. appease typescript.\n        if (keys !== 'all') {\n          state.setColor(colorMap.get([...keys][0]));\n        }\n      }}\n      disallowEmptySelection>\n      <ColorMapContext.Provider value={colorMap}>\n        {props.children}\n      </ColorMapContext.Provider>\n    </ListBox>\n  );\n}\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nlet _ColorSwatchPicker = forwardRef(ColorSwatchPicker);\nexport {_ColorSwatchPicker as ColorSwatchPicker};\n\nexport interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, 'selectionMode' | 'selectionBehavior'> {\n  /** The color of the swatch. */\n  color: Color\n}\n\nexport interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents {\n  /** The color of the swatch. */\n  color: string | Color,\n  /** Whether the color swatch is disabled. */\n  isDisabled?: boolean\n}\n\nfunction ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {\n  let propColor = props.color || '#0000';\n  let color = useMemo(() => typeof propColor === 'string' ? parseColor(propColor) : propColor, [propColor]);\n  let {locale} = useLocale();\n  let map = useContext(ColorMapContext)!;\n  useEffect(() => {\n    let key = color.toString('hexa');\n    map.set(key, color);\n    return () => {\n      map.delete(key);\n    };\n  }, [color, map]);\n\n  let wrap = (v) => {\n    if (typeof v === 'function') {\n      return (renderProps) => v({...renderProps, color});\n    }\n    return v;\n  };\n\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      id={color.toString('hexa')}\n      textValue={color.getColorName(locale)}\n      className={wrap(props.className || 'react-aria-ColorSwatchPickerItem')}\n      style={wrap(props.style)}>\n      {composeRenderProps(wrap(props.children), children => (\n        <ColorSwatchContext.Provider value={{color}}>\n          {children}\n        </ColorSwatchContext.Provider>\n      ))}\n    </ListBoxItem>\n  );\n}\n\nlet _ColorSwatchPickerItem = forwardRef(ColorSwatchPickerItem);\nexport {_ColorSwatchPickerItem as ColorSwatchPickerItem};\n"],"names":[],"version":3,"file":"ColorSwatchPicker.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAAwD;AAC5G,MAAM,sDAAkB,CAAA,GAAA,oBAAY,EAA6B;AAK1D,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAAiC;IACrI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;IAChC,IAAI,WAAW,CAAA,GAAA,cAAM,EAAE,IAAM,IAAI,OAAO,EAAE;IAC1C,IAAI,YAAY,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAE1D,qBACE,gCAAC,CAAA,GAAA,yCAAM;QACJ,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW;QAAI,EAAE;QAC5C,KAAK;QACL,WAAW,MAAM,SAAS,IAAI;QAC9B,OAAO,MAAM,KAAK;QAClB,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,CAAC,KAAK,CAAC,kBAAkB,GAAG,UAAU,MAAM,CAAC,uBAAuB,SAAQ;QAChH,QAAQ,MAAM,MAAM,IAAI;QACxB,eAAc;QACd,cAAc;YAAC,MAAM,KAAK,CAAC,QAAQ,CAAC;SAAQ;QAC5C,mBAAmB,CAAC;YAClB,yDAAyD;YACzD,IAAI,SAAS,OACX,MAAM,QAAQ,CAAC,SAAS,GAAG,CAAC;mBAAI;aAAK,CAAC,EAAE;QAE5C;QACA,wBAAA;qBACA,gCAAC,sCAAgB,QAAQ;QAAC,OAAO;OAC9B,MAAM,QAAQ;AAIvB;AAcO,MAAM,0DAAwB,CAAA,GAAA,iBAAS,EAAE,SAAS,sBAAsB,KAAiC,EAAE,GAAiC;IACjJ,IAAI,YAAY,MAAM,KAAK,IAAI;IAC/B,IAAI,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,cAAc,WAAW,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QAAC;KAAU;IACxG,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,QAAQ,CAAC;QACzB,IAAI,GAAG,CAAC,KAAK;QACb,OAAO;YACL,IAAI,MAAM,CAAC;QACb;IACF,GAAG;QAAC;QAAO;KAAI;IAEf,IAAI,OAAO,CAAC;QACV,IAAI,OAAO,MAAM,YACf,OAAO,CAAC,cAAgB,EAAE;gBAAC,GAAG,WAAW;uBAAE;YAAK;QAElD,OAAO;IACT;IAEA,qBACE,gCAAC,CAAA,GAAA,wCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,IAAI,MAAM,QAAQ,CAAC;QACnB,WAAW,MAAM,YAAY,CAAC;QAC9B,WAAW,KAAK,MAAM,SAAS,IAAI;QACnC,OAAO,KAAK,MAAM,KAAK;OACtB,CAAA,GAAA,yCAAiB,EAAE,KAAK,MAAM,QAAQ,GAAG,CAAA,yBACxC,gCAAC,CAAA,GAAA,yCAAiB,EAAE,QAAQ;YAAC,OAAO;uBAAC;YAAK;WACvC;AAKX","sources":["packages/react-aria-components/src/ColorSwatchPicker.tsx"],"sourcesContent":["import {AriaLabelingProps, HoverEvents, ValueBase} from '@react-types/shared';\nimport {Color, parseColor, useColorPickerState} from '@react-stately/color';\nimport {ColorSwatchContext} from './ColorSwatch';\nimport {composeRenderProps, ContextValue, RenderProps, StyleRenderProps, useContextProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBox, ListBoxItem, ListBoxItemRenderProps, ListBoxRenderProps} from './ListBox';\nimport React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';\nimport {useLocale, useLocalizedStringFormatter} from 'react-aria';\n\nexport interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps> {\n  /** The children of the ColorSwatchPicker. */\n  children?: ReactNode,\n  /**\n   * Whether the items are arranged in a stack or grid.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'stack'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);\nconst ColorMapContext = createContext<Map<string, Color> | null>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);\n  let state = useColorPickerState(props);\n  let colorMap = useMemo(() => new Map(), []);\n  let formatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');\n\n  return (\n    <ListBox\n      {...filterDOMProps(props, {labelable: true})}\n      ref={ref}\n      className={props.className || 'react-aria-ColorSwatchPicker'}\n      style={props.style}\n      aria-label={props['aria-label'] || (!props['aria-labelledby'] ? formatter.format('colorSwatchPicker') : undefined)}\n      layout={props.layout || 'grid'}\n      selectionMode=\"single\"\n      selectedKeys={[state.color.toString('hexa')]}\n      onSelectionChange={(keys) => {\n        // single select, 'all' cannot occur. appease typescript.\n        if (keys !== 'all') {\n          state.setColor(colorMap.get([...keys][0]));\n        }\n      }}\n      disallowEmptySelection>\n      <ColorMapContext.Provider value={colorMap}>\n        {props.children}\n      </ColorMapContext.Provider>\n    </ListBox>\n  );\n});\n\nexport interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, 'selectionMode' | 'selectionBehavior'> {\n  /** The color of the swatch. */\n  color: Color\n}\n\nexport interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents {\n  /** The color of the swatch. */\n  color: string | Color,\n  /** Whether the color swatch is disabled. */\n  isDisabled?: boolean\n}\n\nexport const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {\n  let propColor = props.color || '#0000';\n  let color = useMemo(() => typeof propColor === 'string' ? parseColor(propColor) : propColor, [propColor]);\n  let {locale} = useLocale();\n  let map = useContext(ColorMapContext)!;\n  useEffect(() => {\n    let key = color.toString('hexa');\n    map.set(key, color);\n    return () => {\n      map.delete(key);\n    };\n  }, [color, map]);\n\n  let wrap = (v) => {\n    if (typeof v === 'function') {\n      return (renderProps) => v({...renderProps, color});\n    }\n    return v;\n  };\n\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      id={color.toString('hexa')}\n      textValue={color.getColorName(locale)}\n      className={wrap(props.className || 'react-aria-ColorSwatchPickerItem')}\n      style={wrap(props.style)}>\n      {composeRenderProps(wrap(props.children), children => (\n        <ColorSwatchContext.Provider value={{color}}>\n          {children}\n        </ColorSwatchContext.Provider>\n      ))}\n    </ListBoxItem>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSwatchPicker.module.js.map"}

package/dist/ColorThumb.main.js

@@ -23,7 +23,7 @@ $parcel$export(module.exports, "ColorThumb", () => $9775047c98afa2ef$export$a3cc
 
 
 const $9775047c98afa2ef$export$c80c0ea2ca5cb846 = /*#__PURE__*/ (0, $3jWEE$react.createContext)(null);
-function $9775047c98afa2ef$var$ColorThumb(props, ref) {
+const $9775047c98afa2ef$export$a3cc47cee1c1ccc = /*#__PURE__*/ (0, $3jWEE$react.forwardRef)(function ColorThumb(props, ref) {
     let { state: state, thumbProps: thumbProps, inputXRef: inputXRef, inputYRef: inputYRef, xInputProps: xInputProps, yInputProps: yInputProps, isDisabled: isDisabled = false } = (0, $3jWEE$react.useContext)($9775047c98afa2ef$export$c80c0ea2ca5cb846);
     let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $3jWEE$reactariafocus.useFocusRing)();
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $3jWEE$reactariainteractions.useHover)(props);
@@ -63,10 +63,7 @@ function $9775047c98afa2ef$var$ColorThumb(props, ref) {
         ...yInputProps,
         ...focusProps
     }), renderProps.children);
-}
-/**
- * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
- */ const $9775047c98afa2ef$export$a3cc47cee1c1ccc = /*#__PURE__*/ (0, $3jWEE$react.forwardRef)($9775047c98afa2ef$var$ColorThumb);
+});
 
 
 //# sourceMappingURL=ColorThumb.main.js.map

package/dist/ColorThumb.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,0DAA4B,CAAA,GAAA,0BAAY,EAAyC;AAoC9F,SAAS,iCAAW,KAAsB,EAAE,GAAiC;IAC3E,IAAI,SAAC,KAAK,cAAE,UAAU,aAAE,SAAS,aAAE,SAAS,eAAE,WAAW,eAAE,WAAW,cAAE,aAAa,OAAM,GAAG,CAAA,GAAA,uBAAS,EAAE;IACzG,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW;IACzD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;IAEvC,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc;YACZ,GAAG,WAAW,KAAK;YACnB,iBAAiB,MAAM,eAAe,GAAG,QAAQ;QACnD;QACA,QAAQ;YACN,OAAO,MAAM,eAAe;uBAC5B;YACA,YAAY,MAAM,UAAU;uBAC5B;4BACA;wBACA;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC;QACE,GAAG,CAAA,GAAA,2BAAS,EAAE,YAAY,YAAY,SAAS;QAC/C,GAAG,WAAW;QACf,KAAK;QACL,gBAAc,aAAa;QAC3B,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;QACtC,iBAAe,cAAc;qBAC7B,0DAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrD,6BAAe,0DAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrE,YAAY,QAAQ;AAG3B;AAEA;;CAEC,GACD,MAAM,yDAAc,CAAA,GAAA,uBAAS,EAAE","sources":["packages/react-aria-components/src/ColorThumb.tsx"],"sourcesContent":["import {Color} from '@react-types/color';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {HoverEvents, RefObject} from '@react-types/shared';\nimport {mergeProps} from 'react-aria';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';\nimport {RenderProps, useRenderProps} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface ColorState {\n  getDisplayColor(): Color,\n  isDragging: boolean\n}\n\ninterface InternalColorThumbContextValue {\n  state: ColorState,\n  thumbProps: HTMLAttributes<HTMLElement>,\n  inputXRef: RefObject<HTMLInputElement | null>,\n  inputYRef?: RefObject<HTMLInputElement | null>,\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  yInputProps?: InputHTMLAttributes<HTMLInputElement>,\n  isDisabled?: boolean\n}\n\nexport const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);\n\nexport interface ColorThumbRenderProps {\n  /**\n   * The selected color, excluding the alpha channel.\n   */\n  color: Color,\n  /**\n   * Whether this thumb is currently being dragged.\n   * @selector [data-dragging]\n   */\n  isDragging: boolean,\n  /**\n   * Whether the thumb is currently hovered with a mouse.\n   * @selector [data-hovered]\n   */\n  isHovered: boolean,\n  /**\n   * Whether the thumb is currently focused.\n   * @selector [data-focused]\n   */\n  isFocused: boolean,\n  /**\n   * Whether the thumb is keyboard focused.\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean,\n  /**\n   * Whether the thumb is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean\n}\n\nexport interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps> {}\n\nfunction ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n  let {hoverProps, isHovered} = useHover(props);\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorThumb',\n    defaultStyle: {\n      ...thumbProps.style,\n      backgroundColor: state.getDisplayColor().toString()\n    },\n    values: {\n      color: state.getDisplayColor(),\n      isHovered,\n      isDragging: state.isDragging,\n      isFocused,\n      isFocusVisible,\n      isDisabled\n    }\n  });\n\n  let DOMProps = filterDOMProps(props as any);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...mergeProps(thumbProps, hoverProps, DOMProps)}\n      {...renderProps}\n      ref={ref}\n      data-hovered={isHovered || undefined}\n      data-dragging={state.isDragging || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      data-disabled={isDisabled || undefined}>\n      <input ref={inputXRef} {...xInputProps} {...focusProps} />\n      {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}\n      {renderProps.children}\n    </div>\n  );\n}\n\n/**\n * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.\n */\nconst _ColorThumb = forwardRef(ColorThumb);\nexport {_ColorThumb as ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,0DAA4B,CAAA,GAAA,0BAAY,EAAyC;AAuCvF,MAAM,yDAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,IAAI,SAAC,KAAK,cAAE,UAAU,aAAE,SAAS,aAAE,SAAS,eAAE,WAAW,eAAE,WAAW,cAAE,aAAa,OAAM,GAAG,CAAA,GAAA,uBAAS,EAAE;IACzG,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW;IACzD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;IAEvC,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc;YACZ,GAAG,WAAW,KAAK;YACnB,iBAAiB,MAAM,eAAe,GAAG,QAAQ;QACnD;QACA,QAAQ;YACN,OAAO,MAAM,eAAe;uBAC5B;YACA,YAAY,MAAM,UAAU;uBAC5B;4BACA;wBACA;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC;QACE,GAAG,CAAA,GAAA,2BAAS,EAAE,YAAY,YAAY,SAAS;QAC/C,GAAG,WAAW;QACf,KAAK;QACL,gBAAc,aAAa;QAC3B,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;QACtC,iBAAe,cAAc;qBAC7B,0DAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrD,6BAAe,0DAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrE,YAAY,QAAQ;AAG3B","sources":["packages/react-aria-components/src/ColorThumb.tsx"],"sourcesContent":["import {Color} from '@react-types/color';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {HoverEvents, RefObject} from '@react-types/shared';\nimport {mergeProps} from 'react-aria';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';\nimport {RenderProps, useRenderProps} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface ColorState {\n  getDisplayColor(): Color,\n  isDragging: boolean\n}\n\ninterface InternalColorThumbContextValue {\n  state: ColorState,\n  thumbProps: HTMLAttributes<HTMLElement>,\n  inputXRef: RefObject<HTMLInputElement | null>,\n  inputYRef?: RefObject<HTMLInputElement | null>,\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  yInputProps?: InputHTMLAttributes<HTMLInputElement>,\n  isDisabled?: boolean\n}\n\nexport const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);\n\nexport interface ColorThumbRenderProps {\n  /**\n   * The selected color, excluding the alpha channel.\n   */\n  color: Color,\n  /**\n   * Whether this thumb is currently being dragged.\n   * @selector [data-dragging]\n   */\n  isDragging: boolean,\n  /**\n   * Whether the thumb is currently hovered with a mouse.\n   * @selector [data-hovered]\n   */\n  isHovered: boolean,\n  /**\n   * Whether the thumb is currently focused.\n   * @selector [data-focused]\n   */\n  isFocused: boolean,\n  /**\n   * Whether the thumb is keyboard focused.\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean,\n  /**\n   * Whether the thumb is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean\n}\n\nexport interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps> {}\n\n/**\n * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.\n */\nexport const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n  let {hoverProps, isHovered} = useHover(props);\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorThumb',\n    defaultStyle: {\n      ...thumbProps.style,\n      backgroundColor: state.getDisplayColor().toString()\n    },\n    values: {\n      color: state.getDisplayColor(),\n      isHovered,\n      isDragging: state.isDragging,\n      isFocused,\n      isFocusVisible,\n      isDisabled\n    }\n  });\n\n  let DOMProps = filterDOMProps(props as any);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...mergeProps(thumbProps, hoverProps, DOMProps)}\n      {...renderProps}\n      ref={ref}\n      data-hovered={isHovered || undefined}\n      data-dragging={state.isDragging || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      data-disabled={isDisabled || undefined}>\n      <input ref={inputXRef} {...xInputProps} {...focusProps} />\n      {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}\n      {renderProps.children}\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorThumb.main.js.map"}

package/dist/ColorThumb.mjs

@@ -1,7 +1,7 @@
 import {useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.mjs";
 import {filterDOMProps as $1Ipl1$filterDOMProps} from "@react-aria/utils";
 import {mergeProps as $1Ipl1$mergeProps} from "react-aria";
-import $1Ipl1$react, {createContext as $1Ipl1$createContext, useContext as $1Ipl1$useContext, forwardRef as $1Ipl1$forwardRef} from "react";
+import $1Ipl1$react, {createContext as $1Ipl1$createContext, forwardRef as $1Ipl1$forwardRef, useContext as $1Ipl1$useContext} from "react";
 import {useFocusRing as $1Ipl1$useFocusRing} from "@react-aria/focus";
 import {useHover as $1Ipl1$useHover} from "@react-aria/interactions";
 
@@ -12,7 +12,7 @@ import {useHover as $1Ipl1$useHover} from "@react-aria/interactions";
 
 
 const $e2b71ec1d6016406$export$c80c0ea2ca5cb846 = /*#__PURE__*/ (0, $1Ipl1$createContext)(null);
-function $e2b71ec1d6016406$var$ColorThumb(props, ref) {
+const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /*#__PURE__*/ (0, $1Ipl1$forwardRef)(function ColorThumb(props, ref) {
     let { state: state, thumbProps: thumbProps, inputXRef: inputXRef, inputYRef: inputYRef, xInputProps: xInputProps, yInputProps: yInputProps, isDisabled: isDisabled = false } = (0, $1Ipl1$useContext)($e2b71ec1d6016406$export$c80c0ea2ca5cb846);
     let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $1Ipl1$useFocusRing)();
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $1Ipl1$useHover)(props);
@@ -52,10 +52,7 @@ function $e2b71ec1d6016406$var$ColorThumb(props, ref) {
         ...yInputProps,
         ...focusProps
     }), renderProps.children);
-}
-/**
- * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
- */ const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /*#__PURE__*/ (0, $1Ipl1$forwardRef)($e2b71ec1d6016406$var$ColorThumb);
+});
 
 
 export {$e2b71ec1d6016406$export$c80c0ea2ca5cb846 as InternalColorThumbContext, $e2b71ec1d6016406$export$a3cc47cee1c1ccc as ColorThumb};

package/dist/ColorThumb.module.js

@@ -1,7 +1,7 @@
 import {useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.module.js";
 import {filterDOMProps as $1Ipl1$filterDOMProps} from "@react-aria/utils";
 import {mergeProps as $1Ipl1$mergeProps} from "react-aria";
-import $1Ipl1$react, {createContext as $1Ipl1$createContext, useContext as $1Ipl1$useContext, forwardRef as $1Ipl1$forwardRef} from "react";
+import $1Ipl1$react, {createContext as $1Ipl1$createContext, forwardRef as $1Ipl1$forwardRef, useContext as $1Ipl1$useContext} from "react";
 import {useFocusRing as $1Ipl1$useFocusRing} from "@react-aria/focus";
 import {useHover as $1Ipl1$useHover} from "@react-aria/interactions";
 
@@ -12,7 +12,7 @@ import {useHover as $1Ipl1$useHover} from "@react-aria/interactions";
 
 
 const $e2b71ec1d6016406$export$c80c0ea2ca5cb846 = /*#__PURE__*/ (0, $1Ipl1$createContext)(null);
-function $e2b71ec1d6016406$var$ColorThumb(props, ref) {
+const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /*#__PURE__*/ (0, $1Ipl1$forwardRef)(function ColorThumb(props, ref) {
     let { state: state, thumbProps: thumbProps, inputXRef: inputXRef, inputYRef: inputYRef, xInputProps: xInputProps, yInputProps: yInputProps, isDisabled: isDisabled = false } = (0, $1Ipl1$useContext)($e2b71ec1d6016406$export$c80c0ea2ca5cb846);
     let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $1Ipl1$useFocusRing)();
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $1Ipl1$useHover)(props);
@@ -52,10 +52,7 @@ function $e2b71ec1d6016406$var$ColorThumb(props, ref) {
         ...yInputProps,
         ...focusProps
     }), renderProps.children);
-}
-/**
- * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
- */ const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /*#__PURE__*/ (0, $1Ipl1$forwardRef)($e2b71ec1d6016406$var$ColorThumb);
+});
 
 
 export {$e2b71ec1d6016406$export$c80c0ea2ca5cb846 as InternalColorThumbContext, $e2b71ec1d6016406$export$a3cc47cee1c1ccc as ColorThumb};

package/dist/ColorThumb.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAwBO,MAAM,0DAA4B,CAAA,GAAA,oBAAY,EAAyC;AAoC9F,SAAS,iCAAW,KAAsB,EAAE,GAAiC;IAC3E,IAAI,SAAC,KAAK,cAAE,UAAU,aAAE,SAAS,aAAE,SAAS,eAAE,WAAW,eAAE,WAAW,cAAE,aAAa,OAAM,GAAG,CAAA,GAAA,iBAAS,EAAE;IACzG,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IACzD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;IAEvC,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc;YACZ,GAAG,WAAW,KAAK;YACnB,iBAAiB,MAAM,eAAe,GAAG,QAAQ;QACnD;QACA,QAAQ;YACN,OAAO,MAAM,eAAe;uBAC5B;YACA,YAAY,MAAM,UAAU;uBAC5B;4BACA;wBACA;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,YAAY,SAAS;QAC/C,GAAG,WAAW;QACf,KAAK;QACL,gBAAc,aAAa;QAC3B,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;QACtC,iBAAe,cAAc;qBAC7B,gCAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrD,6BAAe,gCAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrE,YAAY,QAAQ;AAG3B;AAEA;;CAEC,GACD,MAAM,yDAAc,CAAA,GAAA,iBAAS,EAAE","sources":["packages/react-aria-components/src/ColorThumb.tsx"],"sourcesContent":["import {Color} from '@react-types/color';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {HoverEvents, RefObject} from '@react-types/shared';\nimport {mergeProps} from 'react-aria';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';\nimport {RenderProps, useRenderProps} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface ColorState {\n  getDisplayColor(): Color,\n  isDragging: boolean\n}\n\ninterface InternalColorThumbContextValue {\n  state: ColorState,\n  thumbProps: HTMLAttributes<HTMLElement>,\n  inputXRef: RefObject<HTMLInputElement | null>,\n  inputYRef?: RefObject<HTMLInputElement | null>,\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  yInputProps?: InputHTMLAttributes<HTMLInputElement>,\n  isDisabled?: boolean\n}\n\nexport const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);\n\nexport interface ColorThumbRenderProps {\n  /**\n   * The selected color, excluding the alpha channel.\n   */\n  color: Color,\n  /**\n   * Whether this thumb is currently being dragged.\n   * @selector [data-dragging]\n   */\n  isDragging: boolean,\n  /**\n   * Whether the thumb is currently hovered with a mouse.\n   * @selector [data-hovered]\n   */\n  isHovered: boolean,\n  /**\n   * Whether the thumb is currently focused.\n   * @selector [data-focused]\n   */\n  isFocused: boolean,\n  /**\n   * Whether the thumb is keyboard focused.\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean,\n  /**\n   * Whether the thumb is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean\n}\n\nexport interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps> {}\n\nfunction ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n  let {hoverProps, isHovered} = useHover(props);\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorThumb',\n    defaultStyle: {\n      ...thumbProps.style,\n      backgroundColor: state.getDisplayColor().toString()\n    },\n    values: {\n      color: state.getDisplayColor(),\n      isHovered,\n      isDragging: state.isDragging,\n      isFocused,\n      isFocusVisible,\n      isDisabled\n    }\n  });\n\n  let DOMProps = filterDOMProps(props as any);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...mergeProps(thumbProps, hoverProps, DOMProps)}\n      {...renderProps}\n      ref={ref}\n      data-hovered={isHovered || undefined}\n      data-dragging={state.isDragging || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      data-disabled={isDisabled || undefined}>\n      <input ref={inputXRef} {...xInputProps} {...focusProps} />\n      {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}\n      {renderProps.children}\n    </div>\n  );\n}\n\n/**\n * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.\n */\nconst _ColorThumb = forwardRef(ColorThumb);\nexport {_ColorThumb as ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.module.js.map"}
+{"mappings":";;;;;;;;;;;;;AAwBO,MAAM,0DAA4B,CAAA,GAAA,oBAAY,EAAyC;AAuCvF,MAAM,yDAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,IAAI,SAAC,KAAK,cAAE,UAAU,aAAE,SAAS,aAAE,SAAS,eAAE,WAAW,eAAE,WAAW,cAAE,aAAa,OAAM,GAAG,CAAA,GAAA,iBAAS,EAAE;IACzG,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IACzD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;IAEvC,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc;YACZ,GAAG,WAAW,KAAK;YACnB,iBAAiB,MAAM,eAAe,GAAG,QAAQ;QACnD;QACA,QAAQ;YACN,OAAO,MAAM,eAAe;uBAC5B;YACA,YAAY,MAAM,UAAU;uBAC5B;4BACA;wBACA;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,YAAY,SAAS;QAC/C,GAAG,WAAW;QACf,KAAK;QACL,gBAAc,aAAa;QAC3B,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;QACtC,iBAAe,cAAc;qBAC7B,gCAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrD,6BAAe,gCAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrE,YAAY,QAAQ;AAG3B","sources":["packages/react-aria-components/src/ColorThumb.tsx"],"sourcesContent":["import {Color} from '@react-types/color';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {HoverEvents, RefObject} from '@react-types/shared';\nimport {mergeProps} from 'react-aria';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';\nimport {RenderProps, useRenderProps} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface ColorState {\n  getDisplayColor(): Color,\n  isDragging: boolean\n}\n\ninterface InternalColorThumbContextValue {\n  state: ColorState,\n  thumbProps: HTMLAttributes<HTMLElement>,\n  inputXRef: RefObject<HTMLInputElement | null>,\n  inputYRef?: RefObject<HTMLInputElement | null>,\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  yInputProps?: InputHTMLAttributes<HTMLInputElement>,\n  isDisabled?: boolean\n}\n\nexport const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);\n\nexport interface ColorThumbRenderProps {\n  /**\n   * The selected color, excluding the alpha channel.\n   */\n  color: Color,\n  /**\n   * Whether this thumb is currently being dragged.\n   * @selector [data-dragging]\n   */\n  isDragging: boolean,\n  /**\n   * Whether the thumb is currently hovered with a mouse.\n   * @selector [data-hovered]\n   */\n  isHovered: boolean,\n  /**\n   * Whether the thumb is currently focused.\n   * @selector [data-focused]\n   */\n  isFocused: boolean,\n  /**\n   * Whether the thumb is keyboard focused.\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean,\n  /**\n   * Whether the thumb is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean\n}\n\nexport interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps> {}\n\n/**\n * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.\n */\nexport const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n  let {hoverProps, isHovered} = useHover(props);\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorThumb',\n    defaultStyle: {\n      ...thumbProps.style,\n      backgroundColor: state.getDisplayColor().toString()\n    },\n    values: {\n      color: state.getDisplayColor(),\n      isHovered,\n      isDragging: state.isDragging,\n      isFocused,\n      isFocusVisible,\n      isDisabled\n    }\n  });\n\n  let DOMProps = filterDOMProps(props as any);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...mergeProps(thumbProps, hoverProps, DOMProps)}\n      {...renderProps}\n      ref={ref}\n      data-hovered={isHovered || undefined}\n      data-dragging={state.isDragging || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      data-disabled={isDisabled || undefined}>\n      <input ref={inputXRef} {...xInputProps} {...focusProps} />\n      {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}\n      {renderProps.children}\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorThumb.module.js.map"}

package/dist/ColorWheel.main.js

@@ -16,8 +16,8 @@ function $parcel$export(e, n, v, s) {
 }
 
 $parcel$export(module.exports, "ColorWheelStateContext", () => $85ae22f3b2559b04$export$f5327df9fc840d47);
-$parcel$export(module.exports, "ColorWheelTrackContext", () => $85ae22f3b2559b04$export$aec8299548648839);
 $parcel$export(module.exports, "ColorWheel", () => $85ae22f3b2559b04$export$f80663f808113381);
+$parcel$export(module.exports, "ColorWheelTrackContext", () => $85ae22f3b2559b04$export$aec8299548648839);
 $parcel$export(module.exports, "ColorWheelTrack", () => $85ae22f3b2559b04$export$aaae3dd1f909c692);
 
 
@@ -27,7 +27,7 @@ $parcel$export(module.exports, "ColorWheelTrack", () => $85ae22f3b2559b04$export
 
 
 const $85ae22f3b2559b04$export$f5327df9fc840d47 = /*#__PURE__*/ (0, $k1tmY$react.createContext)(null);
-function $85ae22f3b2559b04$var$ColorWheel(props, ref) {
+const $85ae22f3b2559b04$export$f80663f808113381 = /*#__PURE__*/ (0, $k1tmY$react.forwardRef)(function ColorWheel(props, ref) {
     [props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, (0, $525402dfec7da5bc$exports.ColorWheelContext));
     let state = (0, $k1tmY$reactstatelycolor.useColorWheelState)(props);
     let inputRef = (0, $k1tmY$react.useRef)(null);
@@ -73,12 +73,9 @@ function $85ae22f3b2559b04$var$ColorWheel(props, ref) {
             ]
         ]
     }, renderProps.children));
-}
-/**
- * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
- */ const $85ae22f3b2559b04$export$f80663f808113381 = /*#__PURE__*/ (0, $k1tmY$react.forwardRef)($85ae22f3b2559b04$var$ColorWheel);
+});
 const $85ae22f3b2559b04$export$aec8299548648839 = /*#__PURE__*/ (0, $k1tmY$react.createContext)(null);
-function $85ae22f3b2559b04$var$ColorWheelTrack(props, ref) {
+const $85ae22f3b2559b04$export$aaae3dd1f909c692 = /*#__PURE__*/ (0, $k1tmY$react.forwardRef)(function ColorWheelTrack(props, ref) {
     [props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, $85ae22f3b2559b04$export$aec8299548648839);
     let state = (0, $k1tmY$react.useContext)($85ae22f3b2559b04$export$f5327df9fc840d47);
     let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
@@ -95,10 +92,7 @@ function $85ae22f3b2559b04$var$ColorWheelTrack(props, ref) {
         ref: ref,
         "data-disabled": state.isDisabled || undefined
     });
-}
-/**
- * A color wheel track renders a circular gradient track.
- */ const $85ae22f3b2559b04$export$aaae3dd1f909c692 = /*#__PURE__*/ (0, $k1tmY$react.forwardRef)($85ae22f3b2559b04$var$ColorWheelTrack);
+});
 
 
 //# sourceMappingURL=ColorWheel.main.js.map

package/dist/ColorWheel.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA0B;AAE5E,SAAS,iCAAW,KAAsB,EAAE,GAAiC;IAC3E,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,2CAAgB;IAC3D,IAAI,QAAQ,CAAA,GAAA,2CAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mCAAY,EAAE,OAAO,OAAO;IAEvE,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;QAClB,cAAc;YACZ,UAAU;QACZ;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;qBACnC,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC;gBAAwB;aAAM;YAC/B;gBAAC;gBAAwB;aAAW;YACpC;gBAAC,CAAA,GAAA,mDAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;OACA,YAAY,QAAQ;AAI7B;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE;AAOxB,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA6D;AAE/G,SAAS,sCAAgB,KAA2B,EAAE,GAAiC;IACrF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,uBAAS,EAAE;IAEvB,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;mBAC5B;QACF;IACF;IAEA,qBACE,0DAAC;QACE,GAAG,KAAK;QACR,GAAG,WAAW;QACf,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;;AAEzC;AAEA;;CAEC,GACD,MAAM,0DAAmB,CAAA,GAAA,uBAAS,EAAE","sources":["packages/react-aria-components/src/ColorWheel.tsx"],"sourcesContent":["import {AriaColorWheelOptions, useColorWheel} from '@react-aria/color';\nimport {ColorWheelContext} from './RSPContexts';\nimport {ColorWheelState, useColorWheelState} from '@react-stately/color';\nimport {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';\n\nexport interface ColorWheelRenderProps {\n  /**\n   * Whether the color wheel is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color color wheel.\n   */\n  state: ColorWheelState\n}\n\nexport interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps {}\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(null);\n\nfunction ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelContext);\n  let state = useColorWheelState(props);\n  let inputRef = useRef(null);\n  let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      state,\n      isDisabled: props.isDisabled || false\n    },\n    defaultClassName: 'react-aria-ColorWheel',\n    defaultStyle: {\n      position: 'relative'\n    }\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...DOMProps}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}>\n      <Provider\n        values={[\n          [ColorWheelStateContext, state],\n          [ColorWheelTrackContext, trackProps],\n          [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n        ]}>\n        {renderProps.children}\n      </Provider>\n    </div>\n  );\n}\n\n/**\n * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nconst _ColorWheel = forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n\nexport interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}\nexport interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps> {}\ninterface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, ColorWheelTrackProps {}\n\nexport const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);\n\nfunction ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);\n  let state = useContext(ColorWheelStateContext)!;\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorWheelTrack',\n    values: {\n      isDisabled: state.isDisabled,\n      state\n    }\n  });\n\n  return (\n    <div\n      {...props}\n      {...renderProps}\n      ref={ref}\n      data-disabled={state.isDisabled || undefined} />\n  );\n}\n\n/**\n * A color wheel track renders a circular gradient track.\n */\nconst _ColorWheelTrack = forwardRef(ColorWheelTrack);\nexport {_ColorWheelTrack as ColorWheelTrack};\n"],"names":[],"version":3,"file":"ColorWheel.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA0B;AAKrE,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,2CAAgB;IAC3D,IAAI,QAAQ,CAAA,GAAA,2CAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mCAAY,EAAE,OAAO,OAAO;IAEvE,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;QAClB,cAAc;YACZ,UAAU;QACZ;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;qBACnC,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC;gBAAwB;aAAM;YAC/B;gBAAC;gBAAwB;aAAW;YACpC;gBAAC,CAAA,GAAA,mDAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;OACA,YAAY,QAAQ;AAI7B;AAMO,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA6D;AAKxG,MAAM,0DAAkB,CAAA,GAAA,uBAAS,EAAE,SAAS,gBAAgB,KAA2B,EAAE,GAAiC;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,uBAAS,EAAE;IAEvB,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;mBAC5B;QACF;IACF;IAEA,qBACE,0DAAC;QACE,GAAG,KAAK;QACR,GAAG,WAAW;QACf,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;;AAEzC","sources":["packages/react-aria-components/src/ColorWheel.tsx"],"sourcesContent":["import {AriaColorWheelOptions, useColorWheel} from '@react-aria/color';\nimport {ColorWheelContext} from './RSPContexts';\nimport {ColorWheelState, useColorWheelState} from '@react-stately/color';\nimport {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';\n\nexport interface ColorWheelRenderProps {\n  /**\n   * Whether the color wheel is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color color wheel.\n   */\n  state: ColorWheelState\n}\n\nexport interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps {}\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(null);\n\n/**\n * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelContext);\n  let state = useColorWheelState(props);\n  let inputRef = useRef(null);\n  let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      state,\n      isDisabled: props.isDisabled || false\n    },\n    defaultClassName: 'react-aria-ColorWheel',\n    defaultStyle: {\n      position: 'relative'\n    }\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...DOMProps}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}>\n      <Provider\n        values={[\n          [ColorWheelStateContext, state],\n          [ColorWheelTrackContext, trackProps],\n          [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n        ]}>\n        {renderProps.children}\n      </Provider>\n    </div>\n  );\n});\n\nexport interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}\nexport interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps> {}\ninterface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, ColorWheelTrackProps {}\n\nexport const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);\n\n/**\n * A color wheel track renders a circular gradient track.\n */\nexport const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);\n  let state = useContext(ColorWheelStateContext)!;\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorWheelTrack',\n    values: {\n      isDisabled: state.isDisabled,\n      state\n    }\n  });\n\n  return (\n    <div\n      {...props}\n      {...renderProps}\n      ref={ref}\n      data-disabled={state.isDisabled || undefined} />\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.main.js.map"}

package/dist/ColorWheel.mjs

@@ -4,7 +4,7 @@ import {InternalColorThumbContext as $e2b71ec1d6016406$export$c80c0ea2ca5cb846}
 import {useColorWheel as $fp8U1$useColorWheel} from "@react-aria/color";
 import {useColorWheelState as $fp8U1$useColorWheelState} from "@react-stately/color";
 import {filterDOMProps as $fp8U1$filterDOMProps} from "@react-aria/utils";
-import $fp8U1$react, {createContext as $fp8U1$createContext, useRef as $fp8U1$useRef, forwardRef as $fp8U1$forwardRef, useContext as $fp8U1$useContext} from "react";
+import $fp8U1$react, {createContext as $fp8U1$createContext, forwardRef as $fp8U1$forwardRef, useRef as $fp8U1$useRef, useContext as $fp8U1$useContext} from "react";
 
 
 
@@ -14,7 +14,7 @@ import $fp8U1$react, {createContext as $fp8U1$createContext, useRef as $fp8U1$us
 
 
 const $66beab92e74e495f$export$f5327df9fc840d47 = /*#__PURE__*/ (0, $fp8U1$createContext)(null);
-function $66beab92e74e495f$var$ColorWheel(props, ref) {
+const $66beab92e74e495f$export$f80663f808113381 = /*#__PURE__*/ (0, $fp8U1$forwardRef)(function ColorWheel(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, (0, $4e85f108e88277b8$export$265015d6dc85bf21));
     let state = (0, $fp8U1$useColorWheelState)(props);
     let inputRef = (0, $fp8U1$useRef)(null);
@@ -60,12 +60,9 @@ function $66beab92e74e495f$var$ColorWheel(props, ref) {
             ]
         ]
     }, renderProps.children));
-}
-/**
- * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
- */ const $66beab92e74e495f$export$f80663f808113381 = /*#__PURE__*/ (0, $fp8U1$forwardRef)($66beab92e74e495f$var$ColorWheel);
+});
 const $66beab92e74e495f$export$aec8299548648839 = /*#__PURE__*/ (0, $fp8U1$createContext)(null);
-function $66beab92e74e495f$var$ColorWheelTrack(props, ref) {
+const $66beab92e74e495f$export$aaae3dd1f909c692 = /*#__PURE__*/ (0, $fp8U1$forwardRef)(function ColorWheelTrack(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $66beab92e74e495f$export$aec8299548648839);
     let state = (0, $fp8U1$useContext)($66beab92e74e495f$export$f5327df9fc840d47);
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
@@ -82,11 +79,8 @@ function $66beab92e74e495f$var$ColorWheelTrack(props, ref) {
         ref: ref,
         "data-disabled": state.isDisabled || undefined
     });
-}
-/**
- * A color wheel track renders a circular gradient track.
- */ const $66beab92e74e495f$export$aaae3dd1f909c692 = /*#__PURE__*/ (0, $fp8U1$forwardRef)($66beab92e74e495f$var$ColorWheelTrack);
+});
 
 
-export {$66beab92e74e495f$export$f5327df9fc840d47 as ColorWheelStateContext, $66beab92e74e495f$export$aec8299548648839 as ColorWheelTrackContext, $66beab92e74e495f$export$f80663f808113381 as ColorWheel, $66beab92e74e495f$export$aaae3dd1f909c692 as ColorWheelTrack};
+export {$66beab92e74e495f$export$f5327df9fc840d47 as ColorWheelStateContext, $66beab92e74e495f$export$f80663f808113381 as ColorWheel, $66beab92e74e495f$export$aec8299548648839 as ColorWheelTrackContext, $66beab92e74e495f$export$aaae3dd1f909c692 as ColorWheelTrack};
 //# sourceMappingURL=ColorWheel.module.js.map

package/dist/ColorWheel.module.js

@@ -4,7 +4,7 @@ import {InternalColorThumbContext as $e2b71ec1d6016406$export$c80c0ea2ca5cb846}
 import {useColorWheel as $fp8U1$useColorWheel} from "@react-aria/color";
 import {useColorWheelState as $fp8U1$useColorWheelState} from "@react-stately/color";
 import {filterDOMProps as $fp8U1$filterDOMProps} from "@react-aria/utils";
-import $fp8U1$react, {createContext as $fp8U1$createContext, useRef as $fp8U1$useRef, forwardRef as $fp8U1$forwardRef, useContext as $fp8U1$useContext} from "react";
+import $fp8U1$react, {createContext as $fp8U1$createContext, forwardRef as $fp8U1$forwardRef, useRef as $fp8U1$useRef, useContext as $fp8U1$useContext} from "react";
 
 
 
@@ -14,7 +14,7 @@ import $fp8U1$react, {createContext as $fp8U1$createContext, useRef as $fp8U1$us
 
 
 const $66beab92e74e495f$export$f5327df9fc840d47 = /*#__PURE__*/ (0, $fp8U1$createContext)(null);
-function $66beab92e74e495f$var$ColorWheel(props, ref) {
+const $66beab92e74e495f$export$f80663f808113381 = /*#__PURE__*/ (0, $fp8U1$forwardRef)(function ColorWheel(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, (0, $4e85f108e88277b8$export$265015d6dc85bf21));
     let state = (0, $fp8U1$useColorWheelState)(props);
     let inputRef = (0, $fp8U1$useRef)(null);
@@ -60,12 +60,9 @@ function $66beab92e74e495f$var$ColorWheel(props, ref) {
             ]
         ]
     }, renderProps.children));
-}
-/**
- * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
- */ const $66beab92e74e495f$export$f80663f808113381 = /*#__PURE__*/ (0, $fp8U1$forwardRef)($66beab92e74e495f$var$ColorWheel);
+});
 const $66beab92e74e495f$export$aec8299548648839 = /*#__PURE__*/ (0, $fp8U1$createContext)(null);
-function $66beab92e74e495f$var$ColorWheelTrack(props, ref) {
+const $66beab92e74e495f$export$aaae3dd1f909c692 = /*#__PURE__*/ (0, $fp8U1$forwardRef)(function ColorWheelTrack(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $66beab92e74e495f$export$aec8299548648839);
     let state = (0, $fp8U1$useContext)($66beab92e74e495f$export$f5327df9fc840d47);
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
@@ -82,11 +79,8 @@ function $66beab92e74e495f$var$ColorWheelTrack(props, ref) {
         ref: ref,
         "data-disabled": state.isDisabled || undefined
     });
-}
-/**
- * A color wheel track renders a circular gradient track.
- */ const $66beab92e74e495f$export$aaae3dd1f909c692 = /*#__PURE__*/ (0, $fp8U1$forwardRef)($66beab92e74e495f$var$ColorWheelTrack);
+});
 
 
-export {$66beab92e74e495f$export$f5327df9fc840d47 as ColorWheelStateContext, $66beab92e74e495f$export$aec8299548648839 as ColorWheelTrackContext, $66beab92e74e495f$export$f80663f808113381 as ColorWheel, $66beab92e74e495f$export$aaae3dd1f909c692 as ColorWheelTrack};
+export {$66beab92e74e495f$export$f5327df9fc840d47 as ColorWheelStateContext, $66beab92e74e495f$export$f80663f808113381 as ColorWheel, $66beab92e74e495f$export$aec8299548648839 as ColorWheelTrackContext, $66beab92e74e495f$export$aaae3dd1f909c692 as ColorWheelTrack};
 //# sourceMappingURL=ColorWheel.module.js.map

package/dist/ColorWheel.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAsBO,MAAM,0DAAyB,CAAA,GAAA,oBAAY,EAA0B;AAE5E,SAAS,iCAAW,KAAsB,EAAE,GAAiC;IAC3E,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,yCAAgB;IAC3D,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE,OAAO,OAAO;IAEvE,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;QAClB,cAAc;YACZ,UAAU;QACZ;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;qBACnC,gCAAC,CAAA,GAAA,yCAAO;QACN,QAAQ;YACN;gBAAC;gBAAwB;aAAM;YAC/B;gBAAC;gBAAwB;aAAW;YACpC;gBAAC,CAAA,GAAA,yCAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;OACA,YAAY,QAAQ;AAI7B;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE;AAOxB,MAAM,0DAAyB,CAAA,GAAA,oBAAY,EAA6D;AAE/G,SAAS,sCAAgB,KAA2B,EAAE,GAAiC;IACrF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE;IAEvB,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;mBAC5B;QACF;IACF;IAEA,qBACE,gCAAC;QACE,GAAG,KAAK;QACR,GAAG,WAAW;QACf,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;;AAEzC;AAEA;;CAEC,GACD,MAAM,0DAAmB,CAAA,GAAA,iBAAS,EAAE","sources":["packages/react-aria-components/src/ColorWheel.tsx"],"sourcesContent":["import {AriaColorWheelOptions, useColorWheel} from '@react-aria/color';\nimport {ColorWheelContext} from './RSPContexts';\nimport {ColorWheelState, useColorWheelState} from '@react-stately/color';\nimport {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';\n\nexport interface ColorWheelRenderProps {\n  /**\n   * Whether the color wheel is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color color wheel.\n   */\n  state: ColorWheelState\n}\n\nexport interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps {}\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(null);\n\nfunction ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelContext);\n  let state = useColorWheelState(props);\n  let inputRef = useRef(null);\n  let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      state,\n      isDisabled: props.isDisabled || false\n    },\n    defaultClassName: 'react-aria-ColorWheel',\n    defaultStyle: {\n      position: 'relative'\n    }\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...DOMProps}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}>\n      <Provider\n        values={[\n          [ColorWheelStateContext, state],\n          [ColorWheelTrackContext, trackProps],\n          [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n        ]}>\n        {renderProps.children}\n      </Provider>\n    </div>\n  );\n}\n\n/**\n * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nconst _ColorWheel = forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n\nexport interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}\nexport interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps> {}\ninterface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, ColorWheelTrackProps {}\n\nexport const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);\n\nfunction ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);\n  let state = useContext(ColorWheelStateContext)!;\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorWheelTrack',\n    values: {\n      isDisabled: state.isDisabled,\n      state\n    }\n  });\n\n  return (\n    <div\n      {...props}\n      {...renderProps}\n      ref={ref}\n      data-disabled={state.isDisabled || undefined} />\n  );\n}\n\n/**\n * A color wheel track renders a circular gradient track.\n */\nconst _ColorWheelTrack = forwardRef(ColorWheelTrack);\nexport {_ColorWheelTrack as ColorWheelTrack};\n"],"names":[],"version":3,"file":"ColorWheel.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;AAsBO,MAAM,0DAAyB,CAAA,GAAA,oBAAY,EAA0B;AAKrE,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,yCAAgB;IAC3D,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE,OAAO,OAAO;IAEvE,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;QAClB,cAAc;YACZ,UAAU;QACZ;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;qBACnC,gCAAC,CAAA,GAAA,yCAAO;QACN,QAAQ;YACN;gBAAC;gBAAwB;aAAM;YAC/B;gBAAC;gBAAwB;aAAW;YACpC;gBAAC,CAAA,GAAA,yCAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;OACA,YAAY,QAAQ;AAI7B;AAMO,MAAM,0DAAyB,CAAA,GAAA,oBAAY,EAA6D;AAKxG,MAAM,0DAAkB,CAAA,GAAA,iBAAS,EAAE,SAAS,gBAAgB,KAA2B,EAAE,GAAiC;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE;IAEvB,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;mBAC5B;QACF;IACF;IAEA,qBACE,gCAAC;QACE,GAAG,KAAK;QACR,GAAG,WAAW;QACf,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;;AAEzC","sources":["packages/react-aria-components/src/ColorWheel.tsx"],"sourcesContent":["import {AriaColorWheelOptions, useColorWheel} from '@react-aria/color';\nimport {ColorWheelContext} from './RSPContexts';\nimport {ColorWheelState, useColorWheelState} from '@react-stately/color';\nimport {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';\n\nexport interface ColorWheelRenderProps {\n  /**\n   * Whether the color wheel is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color color wheel.\n   */\n  state: ColorWheelState\n}\n\nexport interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps {}\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(null);\n\n/**\n * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelContext);\n  let state = useColorWheelState(props);\n  let inputRef = useRef(null);\n  let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      state,\n      isDisabled: props.isDisabled || false\n    },\n    defaultClassName: 'react-aria-ColorWheel',\n    defaultStyle: {\n      position: 'relative'\n    }\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...DOMProps}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}>\n      <Provider\n        values={[\n          [ColorWheelStateContext, state],\n          [ColorWheelTrackContext, trackProps],\n          [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n        ]}>\n        {renderProps.children}\n      </Provider>\n    </div>\n  );\n});\n\nexport interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}\nexport interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps> {}\ninterface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, ColorWheelTrackProps {}\n\nexport const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);\n\n/**\n * A color wheel track renders a circular gradient track.\n */\nexport const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);\n  let state = useContext(ColorWheelStateContext)!;\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorWheelTrack',\n    values: {\n      isDisabled: state.isDisabled,\n      state\n    }\n  });\n\n  return (\n    <div\n      {...props}\n      {...renderProps}\n      ref={ref}\n      data-disabled={state.isDisabled || undefined} />\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.module.js.map"}

package/dist/ComboBox.main.js

@@ -55,7 +55,7 @@ $parcel$export(module.exports, "ComboBox", () => $1d716ce69f118fad$export$72b969
 
 const $1d716ce69f118fad$export$d414ccceff7063c3 = /*#__PURE__*/ (0, $9obPC$react.createContext)(null);
 const $1d716ce69f118fad$export$c02625b26074192c = /*#__PURE__*/ (0, $9obPC$react.createContext)(null);
-function $1d716ce69f118fad$var$ComboBox(props, ref) {
+const $1d716ce69f118fad$export$72b9695b8216309a = /*#__PURE__*/ (0, $9obPC$react.forwardRef)(function ComboBox(props, ref) {
     [props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, $1d716ce69f118fad$export$d414ccceff7063c3);
     let { children: children, isDisabled: isDisabled = false, isInvalid: isInvalid = false, isRequired: isRequired = false } = props;
     let content = (0, $9obPC$react.useMemo)(()=>{
@@ -86,7 +86,7 @@ function $1d716ce69f118fad$var$ComboBox(props, ref) {
             collection: collection,
             comboBoxRef: ref
         }));
-}
+});
 function $1d716ce69f118fad$var$ComboBoxInner({ props: props, collection: collection, comboBoxRef: ref }) {
     let { name: name, formValue: formValue = 'key', allowsCustomValue: allowsCustomValue } = props;
     if (allowsCustomValue) formValue = 'text';
@@ -254,9 +254,6 @@ function $1d716ce69f118fad$var$ComboBoxInner({ props: props, collection: collect
         value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
     }));
 }
-/**
- * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
- */ const $1d716ce69f118fad$export$72b9695b8216309a = /*#__PURE__*/ (0, $9obPC$react.forwardRef)($1d716ce69f118fad$var$ComboBox);
 
 
 //# sourceMappingURL=ComboBox.main.js.map

package/dist/ComboBox.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react-aria-components/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 */\nimport {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, RefObject} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport {ListBoxContext, ListStateContext} from './ListBox';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, useCallback, useMemo, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\nexport interface ComboBoxRenderProps {\n  /**\n   * Whether the combobox is currently open.\n   * @selector [data-open]\n   */\n  isOpen: boolean,\n  /**\n   * Whether the combobox is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * Whether the combobox is invalid.\n   * @selector [data-invalid]\n   */\n  isInvalid: boolean,\n  /**\n   * Whether the combobox is required.\n   * @selector [data-required]\n   */\n  isRequired: boolean\n}\n\nexport interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps {\n  /** The filter function used to determine if a option should be included in the combo box list. */\n  defaultFilter?: (textValue: string, inputValue: string) => boolean,\n  /**\n   * Whether the text or key of the selected item is submitted as part of an HTML form.\n   * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n   * @default 'key'\n   */\n  formValue?: 'text' | 'key',\n  /** Whether the combo box allows the menu to be open when the collection is empty. */\n  allowsEmptyCollection?: boolean\n}\n\nexport const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);\nexport const ComboBoxStateContext = createContext<ComboBoxState<any> | null>(null);\n\nfunction ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ComboBoxContext);\n  let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;\n  let content = useMemo(() => (\n    <ListBoxContext.Provider value={{items: props.items ?? props.defaultItems}}>\n      {typeof children === 'function'\n        ? children({\n          isOpen: false,\n          isDisabled,\n          isInvalid,\n          isRequired,\n          defaultChildren: null\n        })\n        : children}\n    </ListBoxContext.Provider>\n  ), [children, isDisabled, isInvalid, isRequired, props.items, props.defaultItems]);\n\n  return (\n    <CollectionBuilder content={content}>\n      {collection => <ComboBoxInner props={props} collection={collection} comboBoxRef={ref} />}\n    </CollectionBuilder>\n  );\n}\n\ninterface ComboBoxInnerProps<T extends object> {\n  props: ComboBoxProps<T>,\n  collection: Collection<Node<T>>,\n  comboBoxRef: RefObject<HTMLDivElement | null>\n}\n\nfunction ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}: ComboBoxInnerProps<T>) {\n  let {\n    name,\n    formValue = 'key',\n    allowsCustomValue\n  } = props;\n  if (allowsCustomValue) {\n    formValue = 'text';\n  }\n\n  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState({\n    defaultFilter: props.defaultFilter || contains,\n    ...props,\n    // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)\n    items: props.items,\n    children: undefined,\n    collection,\n    validationBehavior\n  });\n\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let listBoxRef = useRef<HTMLDivElement>(null);\n  let popoverRef = useRef<HTMLDivElement>(null);\n  let [labelRef, label] = useSlot();\n  let {\n    buttonProps,\n    inputProps,\n    listBoxProps,\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    ...validation\n  } = useComboBox({\n    ...removeDataAttributes(props),\n    label,\n    inputRef,\n    buttonRef,\n    listBoxRef,\n    popoverRef,\n    name: formValue === 'text' ? name : undefined,\n    validationBehavior\n  }, state);\n\n  // Make menu width match input + button\n  let [menuWidth, setMenuWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (inputRef.current) {\n      let buttonRect = buttonRef.current?.getBoundingClientRect();\n      let inputRect = inputRef.current.getBoundingClientRect();\n      let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;\n      let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;\n      setMenuWidth((maxX - minX) + 'px');\n    }\n  }, [buttonRef, inputRef, setMenuWidth]);\n\n  useResizeObserver({\n    ref: inputRef,\n    onResize: onResize\n  });\n\n  // Only expose a subset of state to renderProps function to avoid infinite render loop\n  let renderPropsState = useMemo(() => ({\n    isOpen: state.isOpen,\n    isDisabled: props.isDisabled || false,\n    isInvalid: validation.isInvalid || false,\n    isRequired: props.isRequired || false\n  }), [state.isOpen, props.isDisabled, validation.isInvalid, props.isRequired]);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: renderPropsState,\n    defaultClassName: 'react-aria-ComboBox'\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <Provider\n      values={[\n        [ComboBoxStateContext, state],\n        [LabelContext, {...labelProps, ref: labelRef}],\n        [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],\n        [InputContext, {...inputProps, ref: inputRef}],\n        [OverlayTriggerStateContext, state],\n        [PopoverContext, {\n          ref: popoverRef,\n          triggerRef: inputRef,\n          scrollRef: listBoxRef,\n          placement: 'bottom start',\n          isNonModal: true,\n          trigger: 'ComboBox',\n          style: {'--trigger-width': menuWidth} as React.CSSProperties\n        }],\n        [ListBoxContext, {...listBoxProps, ref: listBoxRef}],\n        [ListStateContext, state],\n        [TextContext, {\n          slots: {\n            description: descriptionProps,\n            errorMessage: errorMessageProps\n          }\n        }],\n        [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],\n        [FieldErrorContext, validation]\n      ]}>\n      <div\n        {...DOMProps}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        data-focused={state.isFocused || undefined}\n        data-open={state.isOpen || undefined}\n        data-disabled={props.isDisabled || undefined}\n        data-invalid={validation.isInvalid || undefined}\n        data-required={props.isRequired || undefined} />\n      {name && formValue === 'key' && <input type=\"hidden\" name={name} value={state.selectedKey ?? ''} />}\n    </Provider>\n  );\n}\n\n/**\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n */\nconst _ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ComboBox);\nexport {_ComboBox as ComboBox};\n"],"names":[],"version":3,"file":"ComboBox.main.js.map"}
+{"mappings":"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","sources":["packages/react-aria-components/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 */\nimport {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, RefObject} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport {ListBoxContext, ListStateContext} from './ListBox';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, useCallback, useMemo, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\nexport interface ComboBoxRenderProps {\n  /**\n   * Whether the combobox is currently open.\n   * @selector [data-open]\n   */\n  isOpen: boolean,\n  /**\n   * Whether the combobox is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * Whether the combobox is invalid.\n   * @selector [data-invalid]\n   */\n  isInvalid: boolean,\n  /**\n   * Whether the combobox is required.\n   * @selector [data-required]\n   */\n  isRequired: boolean\n}\n\nexport interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps {\n  /** The filter function used to determine if a option should be included in the combo box list. */\n  defaultFilter?: (textValue: string, inputValue: string) => boolean,\n  /**\n   * Whether the text or key of the selected item is submitted as part of an HTML form.\n   * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n   * @default 'key'\n   */\n  formValue?: 'text' | 'key',\n  /** Whether the combo box allows the menu to be open when the collection is empty. */\n  allowsEmptyCollection?: boolean\n}\n\nexport const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);\nexport const ComboBoxStateContext = createContext<ComboBoxState<any> | null>(null);\n\n/**\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ComboBoxContext);\n  let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;\n  let content = useMemo(() => (\n    <ListBoxContext.Provider value={{items: props.items ?? props.defaultItems}}>\n      {typeof children === 'function'\n        ? children({\n          isOpen: false,\n          isDisabled,\n          isInvalid,\n          isRequired,\n          defaultChildren: null\n        })\n        : children}\n    </ListBoxContext.Provider>\n  ), [children, isDisabled, isInvalid, isRequired, props.items, props.defaultItems]);\n\n  return (\n    <CollectionBuilder content={content}>\n      {collection => <ComboBoxInner props={props} collection={collection} comboBoxRef={ref} />}\n    </CollectionBuilder>\n  );\n});\n\ninterface ComboBoxInnerProps<T extends object> {\n  props: ComboBoxProps<T>,\n  collection: Collection<Node<T>>,\n  comboBoxRef: RefObject<HTMLDivElement | null>\n}\n\nfunction ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}: ComboBoxInnerProps<T>) {\n  let {\n    name,\n    formValue = 'key',\n    allowsCustomValue\n  } = props;\n  if (allowsCustomValue) {\n    formValue = 'text';\n  }\n\n  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState({\n    defaultFilter: props.defaultFilter || contains,\n    ...props,\n    // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)\n    items: props.items,\n    children: undefined,\n    collection,\n    validationBehavior\n  });\n\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let listBoxRef = useRef<HTMLDivElement>(null);\n  let popoverRef = useRef<HTMLDivElement>(null);\n  let [labelRef, label] = useSlot();\n  let {\n    buttonProps,\n    inputProps,\n    listBoxProps,\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    ...validation\n  } = useComboBox({\n    ...removeDataAttributes(props),\n    label,\n    inputRef,\n    buttonRef,\n    listBoxRef,\n    popoverRef,\n    name: formValue === 'text' ? name : undefined,\n    validationBehavior\n  }, state);\n\n  // Make menu width match input + button\n  let [menuWidth, setMenuWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (inputRef.current) {\n      let buttonRect = buttonRef.current?.getBoundingClientRect();\n      let inputRect = inputRef.current.getBoundingClientRect();\n      let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;\n      let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;\n      setMenuWidth((maxX - minX) + 'px');\n    }\n  }, [buttonRef, inputRef, setMenuWidth]);\n\n  useResizeObserver({\n    ref: inputRef,\n    onResize: onResize\n  });\n\n  // Only expose a subset of state to renderProps function to avoid infinite render loop\n  let renderPropsState = useMemo(() => ({\n    isOpen: state.isOpen,\n    isDisabled: props.isDisabled || false,\n    isInvalid: validation.isInvalid || false,\n    isRequired: props.isRequired || false\n  }), [state.isOpen, props.isDisabled, validation.isInvalid, props.isRequired]);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: renderPropsState,\n    defaultClassName: 'react-aria-ComboBox'\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <Provider\n      values={[\n        [ComboBoxStateContext, state],\n        [LabelContext, {...labelProps, ref: labelRef}],\n        [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],\n        [InputContext, {...inputProps, ref: inputRef}],\n        [OverlayTriggerStateContext, state],\n        [PopoverContext, {\n          ref: popoverRef,\n          triggerRef: inputRef,\n          scrollRef: listBoxRef,\n          placement: 'bottom start',\n          isNonModal: true,\n          trigger: 'ComboBox',\n          style: {'--trigger-width': menuWidth} as React.CSSProperties\n        }],\n        [ListBoxContext, {...listBoxProps, ref: listBoxRef}],\n        [ListStateContext, state],\n        [TextContext, {\n          slots: {\n            description: descriptionProps,\n            errorMessage: errorMessageProps\n          }\n        }],\n        [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],\n        [FieldErrorContext, validation]\n      ]}>\n      <div\n        {...DOMProps}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        data-focused={state.isFocused || undefined}\n        data-open={state.isOpen || undefined}\n        data-disabled={props.isDisabled || undefined}\n        data-invalid={validation.isInvalid || undefined}\n        data-required={props.isRequired || undefined} />\n      {name && formValue === 'key' && <input type=\"hidden\" name={name} value={state.selectedKey ?? ''} />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.main.js.map"}

package/dist/ComboBox.mjs

@@ -13,7 +13,7 @@ import {useFilter as $cP7hC$useFilter, useComboBox as $cP7hC$useComboBox} from "
 import {useComboBoxState as $cP7hC$useComboBoxState} from "react-stately";
 import {CollectionBuilder as $cP7hC$CollectionBuilder} from "@react-aria/collections";
 import {useResizeObserver as $cP7hC$useResizeObserver, filterDOMProps as $cP7hC$filterDOMProps} from "@react-aria/utils";
-import $cP7hC$react, {createContext as $cP7hC$createContext, useMemo as $cP7hC$useMemo, useRef as $cP7hC$useRef, useState as $cP7hC$useState, useCallback as $cP7hC$useCallback, forwardRef as $cP7hC$forwardRef} from "react";
+import $cP7hC$react, {createContext as $cP7hC$createContext, forwardRef as $cP7hC$forwardRef, useMemo as $cP7hC$useMemo, useRef as $cP7hC$useRef, useState as $cP7hC$useState, useCallback as $cP7hC$useCallback} from "react";
 
 /*
  * Copyright 2022 Adobe. All rights reserved.
@@ -43,7 +43,7 @@ import $cP7hC$react, {createContext as $cP7hC$createContext, useMemo as $cP7hC$u
 
 const $d01f2c01039c0eec$export$d414ccceff7063c3 = /*#__PURE__*/ (0, $cP7hC$createContext)(null);
 const $d01f2c01039c0eec$export$c02625b26074192c = /*#__PURE__*/ (0, $cP7hC$createContext)(null);
-function $d01f2c01039c0eec$var$ComboBox(props, ref) {
+const $d01f2c01039c0eec$export$72b9695b8216309a = /*#__PURE__*/ (0, $cP7hC$forwardRef)(function ComboBox(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $d01f2c01039c0eec$export$d414ccceff7063c3);
     let { children: children, isDisabled: isDisabled = false, isInvalid: isInvalid = false, isRequired: isRequired = false } = props;
     let content = (0, $cP7hC$useMemo)(()=>{
@@ -74,7 +74,7 @@ function $d01f2c01039c0eec$var$ComboBox(props, ref) {
             collection: collection,
             comboBoxRef: ref
         }));
-}
+});
 function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collection, comboBoxRef: ref }) {
     let { name: name, formValue: formValue = 'key', allowsCustomValue: allowsCustomValue } = props;
     if (allowsCustomValue) formValue = 'text';
@@ -242,9 +242,6 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collect
         value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
     }));
 }
-/**
- * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
- */ const $d01f2c01039c0eec$export$72b9695b8216309a = /*#__PURE__*/ (0, $cP7hC$forwardRef)($d01f2c01039c0eec$var$ComboBox);
 
 
 export {$d01f2c01039c0eec$export$d414ccceff7063c3 as ComboBoxContext, $d01f2c01039c0eec$export$c02625b26074192c as ComboBoxStateContext, $d01f2c01039c0eec$export$72b9695b8216309a as ComboBox};

package/dist/ComboBox.module.js

@@ -13,7 +13,7 @@ import {useFilter as $cP7hC$useFilter, useComboBox as $cP7hC$useComboBox} from "
 import {useComboBoxState as $cP7hC$useComboBoxState} from "react-stately";
 import {CollectionBuilder as $cP7hC$CollectionBuilder} from "@react-aria/collections";
 import {useResizeObserver as $cP7hC$useResizeObserver, filterDOMProps as $cP7hC$filterDOMProps} from "@react-aria/utils";
-import $cP7hC$react, {createContext as $cP7hC$createContext, useMemo as $cP7hC$useMemo, useRef as $cP7hC$useRef, useState as $cP7hC$useState, useCallback as $cP7hC$useCallback, forwardRef as $cP7hC$forwardRef} from "react";
+import $cP7hC$react, {createContext as $cP7hC$createContext, forwardRef as $cP7hC$forwardRef, useMemo as $cP7hC$useMemo, useRef as $cP7hC$useRef, useState as $cP7hC$useState, useCallback as $cP7hC$useCallback} from "react";
 
 /*
  * Copyright 2022 Adobe. All rights reserved.
@@ -43,7 +43,7 @@ import $cP7hC$react, {createContext as $cP7hC$createContext, useMemo as $cP7hC$u
 
 const $d01f2c01039c0eec$export$d414ccceff7063c3 = /*#__PURE__*/ (0, $cP7hC$createContext)(null);
 const $d01f2c01039c0eec$export$c02625b26074192c = /*#__PURE__*/ (0, $cP7hC$createContext)(null);
-function $d01f2c01039c0eec$var$ComboBox(props, ref) {
+const $d01f2c01039c0eec$export$72b9695b8216309a = /*#__PURE__*/ (0, $cP7hC$forwardRef)(function ComboBox(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $d01f2c01039c0eec$export$d414ccceff7063c3);
     let { children: children, isDisabled: isDisabled = false, isInvalid: isInvalid = false, isRequired: isRequired = false } = props;
     let content = (0, $cP7hC$useMemo)(()=>{
@@ -74,7 +74,7 @@ function $d01f2c01039c0eec$var$ComboBox(props, ref) {
             collection: collection,
             comboBoxRef: ref
         }));
-}
+});
 function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collection, comboBoxRef: ref }) {
     let { name: name, formValue: formValue = 'key', allowsCustomValue: allowsCustomValue } = props;
     if (allowsCustomValue) formValue = 'text';
@@ -242,9 +242,6 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collect
         value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
     }));
 }
-/**
- * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
- */ const $d01f2c01039c0eec$export$72b9695b8216309a = /*#__PURE__*/ (0, $cP7hC$forwardRef)($d01f2c01039c0eec$var$ComboBox);
 
 
 export {$d01f2c01039c0eec$export$d414ccceff7063c3 as ComboBoxContext, $d01f2c01039c0eec$export$c02625b26074192c as ComboBoxStateContext, $d01f2c01039c0eec$export$72b9695b8216309a as ComboBox};