@react-spectrum/s2 3.0.0-nightly-5ed06068e-241105 → 3.0.0-nightly-09ccc53e7-241107

package/dist/ProgressBar.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA8CM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM;AASN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QAAE,OAAO,kBACd,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;QAAa,GAAG,MAAM,MAAM;kBAClF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,SAAS,CAAC,iCAAmB,gCAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACrG,gCAAC;wBAAI,WAAW,kCAAY;4BAAC,GAAG,KAAK;wBAAA;kCACnC,cAAA,gCAAC;4BACC,WAAW,CAAA,GAAA,qCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;6CAAE;4BAAW,IAAK,kBAAkB,+CAAyB;4BAClG,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E;AAEA;;;CAGC,GACD,MAAM,4CAAe,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ProgressBar as AriaProgressBar,\n  ProgressBarProps as AriaProgressBarProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {size, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n  /**\n   * The size of the ProgressBar.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean,\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminate = keyframes(`\n  0% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n`);\n\nconst wrapper = style({\n  ...bar(),\n  gridTemplateColumns: {\n    default: {\n      labelPosition: {\n        top: ['1fr', 'auto'],\n        side: ['auto', '1fr']\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: ['1fr'],\n        side: ['auto', '1fr']\n      }\n    }\n  },\n  gridTemplateAreas: {\n    default: {\n      labelPosition: {\n        top: [\n          'label value',\n          'bar bar'\n        ],\n        side: [\n          'label bar value'\n        ]\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: [\n          'label',\n          'bar'\n        ],\n        side: [\n          'label bar'\n        ]\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'accent',\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  },\n  width: {\n    isIndeterminate: 'full'\n  },\n  transformOrigin: {\n    isIndeterminate: 'left'\n  }\n});\n\nconst indeterminateAnimation = style({\n  animation: indeterminate,\n  animationDuration: 1000,\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'in-out',\n  willChange: 'transform',\n  position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n  let {\n    label, size = 'M',\n    staticColor,\n    isIndeterminate,\n    labelPosition = 'top',\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n          <div className={trackStyles({...props})}>\n            <div\n              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation : null))}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+CM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM;;;;;;;;;;;AAcN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QAAE,OAAO,kBACd,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAE1B,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;QAAa,GAAG,MAAM,MAAM;kBAClF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,SAAS,CAAC,iCAAmB,gCAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACrG,gCAAC;wBAAI,WAAW,kCAAY;4BAAC,GAAG,KAAK;wBAAA;kCACnC,cAAA,gCAAC;4BACC,WAAW,CAAA,GAAA,qCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;6CAAE;4BAAW,IAAK,kBAAkB,6CAAuB;2CAAC;4BAAS,KAAK;4BAC/G,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E;AAEA;;;CAGC,GACD,MAAM,4CAAe,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ProgressBar as AriaProgressBar,\n  ProgressBarProps as AriaProgressBarProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {size, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n  /**\n   * The size of the ProgressBar.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean,\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n  0% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n`);\n\nconst indeterminateRTL = keyframes(`\n  0% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n`);\n\nconst wrapper = style({\n  ...bar(),\n  gridTemplateColumns: {\n    default: {\n      labelPosition: {\n        top: ['1fr', 'auto'],\n        side: ['auto', '1fr']\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: ['1fr'],\n        side: ['auto', '1fr']\n      }\n    }\n  },\n  gridTemplateAreas: {\n    default: {\n      labelPosition: {\n        top: [\n          'label value',\n          'bar bar'\n        ],\n        side: [\n          'label bar value'\n        ]\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: [\n          'label',\n          'bar'\n        ],\n        side: [\n          'label bar'\n        ]\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'accent',\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  },\n  width: {\n    isIndeterminate: 'full'\n  },\n  transformOrigin: {\n    isIndeterminate: 'left'\n  }\n});\n\nconst indeterminateAnimation = style({\n  animation: {\n    direction: {\n      ltr: indeterminateLTR,\n      rtl: indeterminateRTL\n    }\n  },\n  animationDuration: 1000,\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'in-out',\n  willChange: 'transform',\n  position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n  let {\n    label, size = 'M',\n    staticColor,\n    isIndeterminate,\n    labelPosition = 'top',\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {direction} = useLocale();\n\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n          <div className={trackStyles({...props})}>\n            <div\n              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.cjs.map"}

package/dist/ProgressBar.css

@@ -8,6 +8,16 @@
   }
 }
 
+@keyframes -_167g35 {
+  0% {
+    transform: translateX(100%)scaleX(.7);
+  }
+
+  100% {
+    transform: translateX(-70%)scaleX(.7);
+  }
+}
+
 @layer _.a {
   ._Zf {
     display: grid;
@@ -325,6 +335,10 @@
     animation-name: -vliq1d;
   }
 
+  ._S-2vmxa6 {
+    animation-name: -_167g35;
+  }
+
   ._T-yjb9nq {
     animation-duration: 1s;
   }

package/dist/ProgressBar.css.map

@@ -1 +1 @@
-{"mappings":"AC0DsB;;;;;;;;;;AASN;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArFf;EA0CI;;;;EAAA;;;;;AA1CJ;;AA0CI;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaP;;;;;;AAbO;EAAA;IAAA;;;;;;AAaP","sources":["7293bad37f188837","packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["@import \"0b8d2821d82ee250\";\n@import \"f2b8eec694697861\";\n@import \"bd67a9a4e04bbe30\";\n@import \"928e619efccddb64\";\n@import \"27fd25d02acf65a5\";\n@import \"47f66b5fa7a24be0\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ProgressBar as AriaProgressBar,\n  ProgressBarProps as AriaProgressBarProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {size, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n  /**\n   * The size of the ProgressBar.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean,\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminate = keyframes(`\n  0% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n`);\n\nconst wrapper = style({\n  ...bar(),\n  gridTemplateColumns: {\n    default: {\n      labelPosition: {\n        top: ['1fr', 'auto'],\n        side: ['auto', '1fr']\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: ['1fr'],\n        side: ['auto', '1fr']\n      }\n    }\n  },\n  gridTemplateAreas: {\n    default: {\n      labelPosition: {\n        top: [\n          'label value',\n          'bar bar'\n        ],\n        side: [\n          'label bar value'\n        ]\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: [\n          'label',\n          'bar'\n        ],\n        side: [\n          'label bar'\n        ]\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'accent',\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  },\n  width: {\n    isIndeterminate: 'full'\n  },\n  transformOrigin: {\n    isIndeterminate: 'left'\n  }\n});\n\nconst indeterminateAnimation = style({\n  animation: indeterminate,\n  animationDuration: 1000,\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'in-out',\n  willChange: 'transform',\n  position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n  let {\n    label, size = 'M',\n    staticColor,\n    isIndeterminate,\n    labelPosition = 'top',\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n          <div className={trackStyles({...props})}>\n            <div\n              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation : null))}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.css.map"}
+{"mappings":"AC2DyB;;;;;;;;;;AASA;;;;;;;;;;AAST;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArFf;EA0CI;;;;EAAA;;;;;AA1CJ;;AA0CI;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaP;;;;;;AAbO;EAAA;IAAA;;;;;;AAaP","sources":["7293bad37f188837","packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["@import \"0b8d2821d82ee250\";\n@import \"f2b8eec694697861\";\n@import \"bd67a9a4e04bbe30\";\n@import \"928e619efccddb64\";\n@import \"27fd25d02acf65a5\";\n@import \"47f66b5fa7a24be0\";\n@import \"5d9861be4320075f\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ProgressBar as AriaProgressBar,\n  ProgressBarProps as AriaProgressBarProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {size, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n  /**\n   * The size of the ProgressBar.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean,\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n  0% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n`);\n\nconst indeterminateRTL = keyframes(`\n  0% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n`);\n\nconst wrapper = style({\n  ...bar(),\n  gridTemplateColumns: {\n    default: {\n      labelPosition: {\n        top: ['1fr', 'auto'],\n        side: ['auto', '1fr']\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: ['1fr'],\n        side: ['auto', '1fr']\n      }\n    }\n  },\n  gridTemplateAreas: {\n    default: {\n      labelPosition: {\n        top: [\n          'label value',\n          'bar bar'\n        ],\n        side: [\n          'label bar value'\n        ]\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: [\n          'label',\n          'bar'\n        ],\n        side: [\n          'label bar'\n        ]\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'accent',\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  },\n  width: {\n    isIndeterminate: 'full'\n  },\n  transformOrigin: {\n    isIndeterminate: 'left'\n  }\n});\n\nconst indeterminateAnimation = style({\n  animation: {\n    direction: {\n      ltr: indeterminateLTR,\n      rtl: indeterminateRTL\n    }\n  },\n  animationDuration: 1000,\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'in-out',\n  willChange: 'transform',\n  position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n  let {\n    label, size = 'M',\n    staticColor,\n    isIndeterminate,\n    labelPosition = 'top',\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {direction} = useLocale();\n\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n          <div className={trackStyles({...props})}>\n            <div\n              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.css.map"}

package/dist/ProgressBar.mjs

@@ -6,6 +6,7 @@ import {jsx as $cNVLZ$jsx, jsxs as $cNVLZ$jsxs, Fragment as $cNVLZ$Fragment} fro
 import {ProgressBar as $cNVLZ$ProgressBar} from "react-aria-components";
 import {createContext as $cNVLZ$createContext, forwardRef as $cNVLZ$forwardRef} from "react";
 import {useDOMRef as $cNVLZ$useDOMRef} from "@react-spectrum/utils";
+import {useLocale as $cNVLZ$useLocale} from "@react-aria/i18n";
 
 /*
  * Copyright 2024 Adobe. All rights reserved.
@@ -24,8 +25,10 @@ import {useDOMRef as $cNVLZ$useDOMRef} from "@react-spectrum/utils";
 
 
 
+
 const $b847b7cd294eafba$export$e9f3bf65a26ce129 = /*#__PURE__*/ (0, $cNVLZ$createContext)(null);
-const $b847b7cd294eafba$var$indeterminate = "-vliq1d";
+const $b847b7cd294eafba$var$indeterminateLTR = "-vliq1d";
+const $b847b7cd294eafba$var$indeterminateRTL = "-_167g35";
 const $b847b7cd294eafba$var$wrapper = function anonymous(props, overrides) {
     let rules = " .";
     let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
@@ -177,11 +180,22 @@ const $b847b7cd294eafba$var$fill = function anonymous(props) {
     if (props.isIndeterminate) rules += ' __Gh';
     return rules;
 };
-const $b847b7cd294eafba$var$indeterminateAnimation = " . _S-1aanztv _T-yjb9nq _Ya _X-twzmrf __Pd Uc";
+const $b847b7cd294eafba$var$indeterminateAnimation = function anonymous(props) {
+    let rules = " .";
+    if (props.direction === "rtl") rules += ' _S-2vmxa6';
+    else if (props.direction === "ltr") rules += ' _S-1aanztv';
+    rules += ' _T-yjb9nq';
+    rules += ' _Ya';
+    rules += ' _X-twzmrf';
+    rules += ' __Pd';
+    rules += ' Uc';
+    return rules;
+};
 function $b847b7cd294eafba$var$ProgressBar(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $b847b7cd294eafba$export$e9f3bf65a26ce129);
     let { label: label, size: size = 'M', staticColor: staticColor, isIndeterminate: isIndeterminate, labelPosition: labelPosition = 'top', UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
     let domRef = (0, $cNVLZ$useDOMRef)(ref);
+    let { direction: direction } = (0, $cNVLZ$useLocale)();
     return /*#__PURE__*/ (0, $cNVLZ$jsx)((0, $cNVLZ$ProgressBar), {
         ...props,
         ref: domRef,
@@ -216,7 +230,9 @@ function $b847b7cd294eafba$var$ProgressBar(props, ref) {
                             className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)($b847b7cd294eafba$var$fill({
                                 ...props,
                                 staticColor: staticColor
-                            }), isIndeterminate ? $b847b7cd294eafba$var$indeterminateAnimation : null),
+                            }), isIndeterminate ? $b847b7cd294eafba$var$indeterminateAnimation({
+                                direction: direction
+                            }) : null),
                             style: {
                                 width: isIndeterminate ? undefined : percentage + '%'
                             }

package/dist/ProgressBar.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA8CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM;AASN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QAAE,OAAO,kBACd,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;QAAa,GAAG,MAAM,MAAM;kBAClF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,SAAS,CAAC,iCAAmB,gBAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACrG,gBAAC;wBAAI,WAAW,kCAAY;4BAAC,GAAG,KAAK;wBAAA;kCACnC,cAAA,gBAAC;4BACC,WAAW,CAAA,GAAA,yCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;6CAAE;4BAAW,IAAK,kBAAkB,+CAAyB;4BAClG,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E;AAEA;;;CAGC,GACD,MAAM,4CAAe,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ProgressBar as AriaProgressBar,\n  ProgressBarProps as AriaProgressBarProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {size, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n  /**\n   * The size of the ProgressBar.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean,\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminate = keyframes(`\n  0% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n`);\n\nconst wrapper = style({\n  ...bar(),\n  gridTemplateColumns: {\n    default: {\n      labelPosition: {\n        top: ['1fr', 'auto'],\n        side: ['auto', '1fr']\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: ['1fr'],\n        side: ['auto', '1fr']\n      }\n    }\n  },\n  gridTemplateAreas: {\n    default: {\n      labelPosition: {\n        top: [\n          'label value',\n          'bar bar'\n        ],\n        side: [\n          'label bar value'\n        ]\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: [\n          'label',\n          'bar'\n        ],\n        side: [\n          'label bar'\n        ]\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'accent',\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  },\n  width: {\n    isIndeterminate: 'full'\n  },\n  transformOrigin: {\n    isIndeterminate: 'left'\n  }\n});\n\nconst indeterminateAnimation = style({\n  animation: indeterminate,\n  animationDuration: 1000,\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'in-out',\n  willChange: 'transform',\n  position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n  let {\n    label, size = 'M',\n    staticColor,\n    isIndeterminate,\n    labelPosition = 'top',\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n          <div className={trackStyles({...props})}>\n            <div\n              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation : null))}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.mjs.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM;;;;;;;;;;;AAcN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QAAE,OAAO,kBACd,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;QAAa,GAAG,MAAM,MAAM;kBAClF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,SAAS,CAAC,iCAAmB,gBAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACrG,gBAAC;wBAAI,WAAW,kCAAY;4BAAC,GAAG,KAAK;wBAAA;kCACnC,cAAA,gBAAC;4BACC,WAAW,CAAA,GAAA,yCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;6CAAE;4BAAW,IAAK,kBAAkB,6CAAuB;2CAAC;4BAAS,KAAK;4BAC/G,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E;AAEA;;;CAGC,GACD,MAAM,4CAAe,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ProgressBar as AriaProgressBar,\n  ProgressBarProps as AriaProgressBarProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {size, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n  /**\n   * The size of the ProgressBar.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean,\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n  0% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n`);\n\nconst indeterminateRTL = keyframes(`\n  0% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n`);\n\nconst wrapper = style({\n  ...bar(),\n  gridTemplateColumns: {\n    default: {\n      labelPosition: {\n        top: ['1fr', 'auto'],\n        side: ['auto', '1fr']\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: ['1fr'],\n        side: ['auto', '1fr']\n      }\n    }\n  },\n  gridTemplateAreas: {\n    default: {\n      labelPosition: {\n        top: [\n          'label value',\n          'bar bar'\n        ],\n        side: [\n          'label bar value'\n        ]\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: [\n          'label',\n          'bar'\n        ],\n        side: [\n          'label bar'\n        ]\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'accent',\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  },\n  width: {\n    isIndeterminate: 'full'\n  },\n  transformOrigin: {\n    isIndeterminate: 'left'\n  }\n});\n\nconst indeterminateAnimation = style({\n  animation: {\n    direction: {\n      ltr: indeterminateLTR,\n      rtl: indeterminateRTL\n    }\n  },\n  animationDuration: 1000,\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'in-out',\n  willChange: 'transform',\n  position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n  let {\n    label, size = 'M',\n    staticColor,\n    isIndeterminate,\n    labelPosition = 'top',\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {direction} = useLocale();\n\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n          <div className={trackStyles({...props})}>\n            <div\n              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.mjs.map"}

package/dist/Provider.cjs

@@ -53,7 +53,7 @@ let $914a06b3a1c679bc$var$providerStyles = function anonymous(props) {
     else if (props.colorScheme === "light") rules += ' _Aa';
     else if (props.colorScheme === "light dark") rules += ' _Ac';
     else rules += ' _A-10jn6wd';
-    if (props.background === "layer-2") rules += ' -_1de2x0q_b-______k';
+    if (props.background === "layer-2") rules += ' -_1de2x0q_b-______o';
     else if (props.background === "layer-1") rules += ' -_1de2x0q_b-e';
     else if (props.background === "base") rules += ' -_1de2x0q_b-d';
     if (props.background === "layer-2") rules += ' b-1de2x0q';

package/dist/Provider.css

@@ -55,7 +55,7 @@
     --s2-container-bg: var(--lightningcss-light, #f8f8f8) var(--lightningcss-dark, #1b1b1b);
   }
 
-  .-_1de2x0q_b-______k {
+  .-_1de2x0q_b-______o {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 

package/dist/Provider.mjs

@@ -46,7 +46,7 @@ let $9affbfa4e13b9582$var$providerStyles = function anonymous(props) {
     else if (props.colorScheme === "light") rules += ' _Aa';
     else if (props.colorScheme === "light dark") rules += ' _Ac';
     else rules += ' _A-10jn6wd';
-    if (props.background === "layer-2") rules += ' -_1de2x0q_b-______k';
+    if (props.background === "layer-2") rules += ' -_1de2x0q_b-______o';
     else if (props.background === "layer-1") rules += ' -_1de2x0q_b-e';
     else if (props.background === "base") rules += ' -_1de2x0q_b-d';
     if (props.background === "layer-2") rules += ' b-1de2x0q';

package/dist/Radio.cjs

@@ -101,8 +101,8 @@ const $49f41f366ec3019f$var$circle = function anonymous(props) {
     rules += ' _Zd';
     rules += ' _1c';
     rules += ' _2d';
-    rules += ' _O-acw0og';
-    rules += ' _Q-375y1o';
+    rules += ' _Oa';
+    rules += ' _Q-375x7f';
     rules += ' _Ra';
     rules += ' _vf';
     rules += ' _wf';

package/dist/Radio.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCN,SAAS,4BAAM,KAAiB,EAAE,GAAmC;IACnE,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,sCAAW,EAAqB;IAEpC,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAS,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Radio as AriaRadio,\n  RadioProps as AriaRadioProps,\n  RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The label for the element.\n   */\n  children?: ReactNode\n}\n\ninterface ContextProps {\n  /**\n   * The size of the Radio.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n  ...focusRing(),\n  size: 'control-sm',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  transition: '[border-width]',\n  transitionDuration: 250,\n  transitionTimingFunction: 'in-out',\n  borderRadius: 'full',\n  borderStyle: 'solid',\n  boxSizing: 'border-box',\n  borderWidth: {\n    default: 2,\n    isSelected: '[calc((self(height) - 4px) / 2)]'\n  },\n  forcedColorAdjust: 'none',\n  backgroundColor: 'gray-25',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isSelected: {\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight'\n    },\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let circleRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let isInForm = !!useContext(FormContext);\n  let {\n    size = 'M',\n    ...allProps\n  } = useFormProps<RadioContextProps>(props);\n\n  return (\n    <AriaRadio\n      {...allProps}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              ref={circleRef}\n              style={pressScale(circleRef)(renderProps)}\n              className={circle({\n                ...renderProps,\n                isEmphasized: allProps.isEmphasized,\n                isSelected: renderProps.isSelected,\n                size\n              })} />\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaRadio>\n  );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCN,SAAS,4BAAM,KAAiB,EAAE,GAAmC;IACnE,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,sCAAW,EAAqB;IAEpC,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAS,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Radio as AriaRadio,\n  RadioProps as AriaRadioProps,\n  RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The label for the element.\n   */\n  children?: ReactNode\n}\n\ninterface ContextProps {\n  /**\n   * The size of the Radio.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n  ...focusRing(),\n  size: 'control-sm',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  transition: 'default',\n  borderRadius: 'full',\n  borderStyle: 'solid',\n  boxSizing: 'border-box',\n  borderWidth: {\n    default: 2,\n    isSelected: '[calc((self(height) - 4px) / 2)]'\n  },\n  forcedColorAdjust: 'none',\n  backgroundColor: 'gray-25',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isSelected: {\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight'\n    },\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let circleRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let isInForm = !!useContext(FormContext);\n  let {\n    size = 'M',\n    ...allProps\n  } = useFormProps<RadioContextProps>(props);\n\n  return (\n    <AriaRadio\n      {...allProps}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              ref={circleRef}\n              style={pressScale(circleRef)(renderProps)}\n              className={circle({\n                ...renderProps,\n                isEmphasized: allProps.isEmphasized,\n                isSelected: renderProps.isSelected,\n                size\n              })} />\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaRadio>\n  );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.cjs.map"}

package/dist/Radio.css

@@ -57,10 +57,6 @@
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   }
 
-  ._Q-375x7f {
-    transition-duration: .15s;
-  }
-
   .__a-4a7c5l {
     grid-column-start: field;
   }
@@ -125,12 +121,12 @@
     justify-content: center;
   }
 
-  ._O-acw0og {
-    transition-property: border-width;
+  ._Oa {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
   }
 
-  ._Q-375y1o {
-    transition-duration: .25s;
+  ._Q-375x7f {
+    transition-duration: .15s;
   }
 
   ._Ra {

package/dist/Radio.css.map

@@ -1 +1 @@
-{"mappings":"ACkDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnBC;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAmBD;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["9fa8f4e96c5d74b7","packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["@import \"4c55815e8f2cdad6\";\n@import \"4d824628f052c21a\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Radio as AriaRadio,\n  RadioProps as AriaRadioProps,\n  RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The label for the element.\n   */\n  children?: ReactNode\n}\n\ninterface ContextProps {\n  /**\n   * The size of the Radio.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n  ...focusRing(),\n  size: 'control-sm',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  transition: '[border-width]',\n  transitionDuration: 250,\n  transitionTimingFunction: 'in-out',\n  borderRadius: 'full',\n  borderStyle: 'solid',\n  boxSizing: 'border-box',\n  borderWidth: {\n    default: 2,\n    isSelected: '[calc((self(height) - 4px) / 2)]'\n  },\n  forcedColorAdjust: 'none',\n  backgroundColor: 'gray-25',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isSelected: {\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight'\n    },\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let circleRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let isInForm = !!useContext(FormContext);\n  let {\n    size = 'M',\n    ...allProps\n  } = useFormProps<RadioContextProps>(props);\n\n  return (\n    <AriaRadio\n      {...allProps}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              ref={circleRef}\n              style={pressScale(circleRef)(renderProps)}\n              className={circle({\n                ...renderProps,\n                isEmphasized: allProps.isEmphasized,\n                isSelected: renderProps.isSelected,\n                size\n              })} />\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaRadio>\n  );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.css.map"}
+{"mappings":"ACkDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnBC;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAmBD;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["9fa8f4e96c5d74b7","packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["@import \"4c55815e8f2cdad6\";\n@import \"4d824628f052c21a\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Radio as AriaRadio,\n  RadioProps as AriaRadioProps,\n  RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The label for the element.\n   */\n  children?: ReactNode\n}\n\ninterface ContextProps {\n  /**\n   * The size of the Radio.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n  ...focusRing(),\n  size: 'control-sm',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  transition: 'default',\n  borderRadius: 'full',\n  borderStyle: 'solid',\n  boxSizing: 'border-box',\n  borderWidth: {\n    default: 2,\n    isSelected: '[calc((self(height) - 4px) / 2)]'\n  },\n  forcedColorAdjust: 'none',\n  backgroundColor: 'gray-25',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isSelected: {\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight'\n    },\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let circleRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let isInForm = !!useContext(FormContext);\n  let {\n    size = 'M',\n    ...allProps\n  } = useFormProps<RadioContextProps>(props);\n\n  return (\n    <AriaRadio\n      {...allProps}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              ref={circleRef}\n              style={pressScale(circleRef)(renderProps)}\n              className={circle({\n                ...renderProps,\n                isEmphasized: allProps.isEmphasized,\n                isSelected: renderProps.isSelected,\n                size\n              })} />\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaRadio>\n  );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.css.map"}

package/dist/Radio.mjs

@@ -95,8 +95,8 @@ const $1ae2870af9a200f8$var$circle = function anonymous(props) {
     rules += ' _Zd';
     rules += ' _1c';
     rules += ' _2d';
-    rules += ' _O-acw0og';
-    rules += ' _Q-375y1o';
+    rules += ' _Oa';
+    rules += ' _Q-375x7f';
     rules += ' _Ra';
     rules += ' _vf';
     rules += ' _wf';

package/dist/Radio.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCN,SAAS,4BAAM,KAAiB,EAAE,GAAmC;IACnE,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,yCAAW,EAAqB;IAEpC,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAa;kCACZ,cAAA,gBAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,yCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAS,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Radio as AriaRadio,\n  RadioProps as AriaRadioProps,\n  RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The label for the element.\n   */\n  children?: ReactNode\n}\n\ninterface ContextProps {\n  /**\n   * The size of the Radio.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n  ...focusRing(),\n  size: 'control-sm',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  transition: '[border-width]',\n  transitionDuration: 250,\n  transitionTimingFunction: 'in-out',\n  borderRadius: 'full',\n  borderStyle: 'solid',\n  boxSizing: 'border-box',\n  borderWidth: {\n    default: 2,\n    isSelected: '[calc((self(height) - 4px) / 2)]'\n  },\n  forcedColorAdjust: 'none',\n  backgroundColor: 'gray-25',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isSelected: {\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight'\n    },\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let circleRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let isInForm = !!useContext(FormContext);\n  let {\n    size = 'M',\n    ...allProps\n  } = useFormProps<RadioContextProps>(props);\n\n  return (\n    <AriaRadio\n      {...allProps}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              ref={circleRef}\n              style={pressScale(circleRef)(renderProps)}\n              className={circle({\n                ...renderProps,\n                isEmphasized: allProps.isEmphasized,\n                isSelected: renderProps.isSelected,\n                size\n              })} />\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaRadio>\n  );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.mjs.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCN,SAAS,4BAAM,KAAiB,EAAE,GAAmC;IACnE,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,yCAAW,EAAqB;IAEpC,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAa;kCACZ,cAAA,gBAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,yCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAS,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Radio as AriaRadio,\n  RadioProps as AriaRadioProps,\n  RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The label for the element.\n   */\n  children?: ReactNode\n}\n\ninterface ContextProps {\n  /**\n   * The size of the Radio.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n  ...focusRing(),\n  size: 'control-sm',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  transition: 'default',\n  borderRadius: 'full',\n  borderStyle: 'solid',\n  boxSizing: 'border-box',\n  borderWidth: {\n    default: 2,\n    isSelected: '[calc((self(height) - 4px) / 2)]'\n  },\n  forcedColorAdjust: 'none',\n  backgroundColor: 'gray-25',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isSelected: {\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight'\n    },\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let circleRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let isInForm = !!useContext(FormContext);\n  let {\n    size = 'M',\n    ...allProps\n  } = useFormProps<RadioContextProps>(props);\n\n  return (\n    <AriaRadio\n      {...allProps}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              ref={circleRef}\n              style={pressScale(circleRef)(renderProps)}\n              className={circle({\n                ...renderProps,\n                isEmphasized: allProps.isEmphasized,\n                isSelected: renderProps.isSelected,\n                size\n              })} />\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaRadio>\n  );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.mjs.map"}

package/dist/SegmentedControl.cjs

@@ -45,6 +45,42 @@ const $e33225559d5e019f$var$segmentedControl = function anonymous(props, overrid
     rules += matches.join('');
     let $l = false;
     for (let p of matches)if (/^\s*l/.test(p)) $l = true;
+    rules += ' _Zd';
+    rules += ' ic';
+    rules += ' jc';
+    rules += ' bg';
+    rules += ' _vc';
+    rules += ' _wc';
+    rules += ' _xc';
+    rules += ' _yc';
+    if (!$l) rules += ' lJ';
+    return rules;
+};
+const $e33225559d5e019f$var$controlItem = function anonymous(props, overrides) {
+    let rules = " .";
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+    rules += matches.join('');
+    let $U = false;
+    let $_9 = false;
+    let $h = false;
+    let $_8 = false;
+    let $q = false;
+    for (let p of matches){
+        if (/^\s*U/.test(p)) $U = true;
+        if (/^\s*_9/.test(p)) $_9 = true;
+        if (/^\s*h/.test(p)) $h = true;
+        if (/^\s*_8/.test(p)) $_8 = true;
+        if (/^\s*q/.test(p)) $q = true;
+    }
+    if (props.isFocusVisible) rules += ' _Lb';
+    else rules += ' _La';
+    rules += ' da_____z';
+    rules += ' dx';
+    rules += ' _Nc';
+    rules += ' _M-3t1z';
+    if (!$U) rules += ' Uc';
+    rules += ' _Zd';
+    rules += ' _zb';
     rules += ' _c-bc1l9oh';
     rules += ' _c-1uotwbwg';
     rules += ' _c-eo0c6sf';
@@ -72,35 +108,6 @@ const $e33225559d5e019f$var$segmentedControl = function anonymous(props, overrid
     rules += ' _eb';
     rules += ' _f-1x99dlob';
     rules += ' _fa';
-    rules += ' an';
-    rules += ' _Zd';
-    rules += ' bg';
-    rules += ' _vd';
-    rules += ' _wd';
-    rules += ' _xd';
-    rules += ' _yd';
-    if (!$l) rules += ' lG';
-    return rules;
-};
-const $e33225559d5e019f$var$controlItem = function anonymous(props, overrides) {
-    let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
-    rules += matches.join('');
-    let $U = false;
-    let $h = false;
-    let $_9 = false;
-    let $_8 = false;
-    let $q = false;
-    for (let p of matches){
-        if (/^\s*U/.test(p)) $U = true;
-        if (/^\s*h/.test(p)) $h = true;
-        if (/^\s*_9/.test(p)) $_9 = true;
-        if (/^\s*_8/.test(p)) $_8 = true;
-        if (/^\s*q/.test(p)) $q = true;
-    }
-    if (!$U) rules += ' Uc';
-    rules += ' _Zd';
-    rules += ' _zb';
     if (props.isSelected) rules += ' aa_____A';
     else if (props.isDisabled) rules += ' aa_____B';
     else rules += ' aa_____x';
@@ -116,31 +123,36 @@ const $e33225559d5e019f$var$controlItem = function anonymous(props, overrides) {
         else if (props.isHovered) rules += ' an';
         else rules += ' am';
     } else rules += ' am';
-    rules += ' C-1dz4pg9-ve8p9e';
+    rules += ' C-soocic-ve8p9e';
     rules += ' CI';
-    rules += ' D-1dz4pg9-ve8p9e';
+    rules += ' D-soocic-ve8p9e';
     rules += ' DI';
     rules += ' k-375toq';
     rules += ' _1c';
-    if (!$h) rules += ' ha';
-    if (!$_9) rules += ' _9-3t1y';
+    if (!$_9) {
+        if (props.isJustified) rules += ' _9-3t1y';
+    }
+    if (!$h) {
+        if (props.isJustified) rules += ' ha';
+    }
     if (!$_8) rules += ' _8-3t1x';
     if (!$q) rules += ' qa';
     rules += ' _2d';
     rules += ' _pb';
     rules += ' __R-yksgrp';
+    rules += ' __Da';
+    rules += ' ba';
+    rules += ' wf';
+    rules += ' _vc';
+    rules += ' _wc';
+    rules += ' _xc';
+    rules += ' _yc';
     rules += ' -rwx0fg_e-b';
     rules += ' -_375toq_k-j';
     return rules;
 };
 const $e33225559d5e019f$var$slider = function anonymous(props) {
     let rules = " .";
-    if (props.isFocusVisible) rules += ' _Lb';
-    else rules += ' _La';
-    rules += ' da_____z';
-    rules += ' dx';
-    rules += ' _Nc';
-    rules += ' _M-3t1z';
     if (props.isDisabled) rules += ' ba_____B';
     else rules += ' ba_____z';
     rules += ' bd';
@@ -171,39 +183,43 @@ function $e33225559d5e019f$var$SegmentedControl(props, ref) {
     let domRef = (0, $4JHQR$reactspectrumutils.useDOMRef)(ref);
     let prevRef = (0, $4JHQR$react.useRef)(null);
     let currentSelectedRef = (0, $4JHQR$react.useRef)(null);
-    let onChange = (value)=>{
+    let onChange = (values)=>{
         if (currentSelectedRef.current) prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
-        if (onSelectionChange) onSelectionChange(value);
+        if (onSelectionChange) onSelectionChange(values.values().next().value);
     };
-    return /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $4JHQR$reactariacomponents.RadioGroup), {
+    return /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $4JHQR$reactariacomponents.ToggleButtonGroup), {
         ...props,
-        value: selectedKey,
-        defaultValue: defaultSelectedKey,
+        selectedKeys: selectedKey != null ? [
+            selectedKey
+        ] : undefined,
+        defaultSelectedKeys: defaultSelectedKey != null ? [
+            defaultSelectedKey
+        ] : undefined,
+        disallowEmptySelection: true,
         ref: domRef,
         orientation: "horizontal",
         style: props.UNSAFE_style,
-        onChange: onChange,
-        className: (props.UNSAFE_className || '') + $e33225559d5e019f$var$segmentedControl({
-            size: 'M'
-        }, props.styles),
+        onSelectionChange: onChange,
+        className: (props.UNSAFE_className || '') + $e33225559d5e019f$var$segmentedControl(null, props.styles),
         "aria-label": props['aria-label'],
         children: /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)($e33225559d5e019f$var$DefaultSelectionTracker, {
             defaultValue: defaultSelectedKey,
             value: selectedKey,
             prevRef: prevRef,
             currentSelectedRef: currentSelectedRef,
+            isJustified: props.isJustified,
             children: props.children
         })
     });
 }
 function $e33225559d5e019f$var$DefaultSelectionTracker(props) {
-    let state = (0, $4JHQR$react.useContext)((0, $4JHQR$reactariacomponents.RadioGroupStateContext));
+    let state = (0, $4JHQR$react.useContext)((0, $4JHQR$reactariacomponents.ToggleGroupStateContext));
     let isRegistered = (0, $4JHQR$react.useRef)(!(props.defaultValue == null && props.value == null));
     // default select the first available item
     let register = (0, $4JHQR$react.useCallback)((value)=>{
         if (state && !isRegistered.current) {
             isRegistered.current = true;
-            state.setSelectedValue(value);
+            state.toggleKey(value);
         }
     }, []);
     return /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $4JHQR$reactariacomponents.Provider), {
@@ -213,7 +229,8 @@ function $e33225559d5e019f$var$DefaultSelectionTracker(props) {
                 {
                     register: register,
                     prevRef: props.prevRef,
-                    currentSelectedRef: props.currentSelectedRef
+                    currentSelectedRef: props.currentSelectedRef,
+                    isJustified: props.isJustified
                 }
             ]
         ],
@@ -221,12 +238,11 @@ function $e33225559d5e019f$var$DefaultSelectionTracker(props) {
     });
 }
 function $e33225559d5e019f$var$SegmentedControlItem(props, ref) {
-    let inputRef = (0, $4JHQR$react.useRef)(null);
-    let domRef = (0, $4JHQR$reactspectrumutils.useFocusableRef)(ref, inputRef);
+    let domRef = (0, $4JHQR$reactspectrumutils.useFocusableRef)(ref);
     let divRef = (0, $4JHQR$react.useRef)(null);
-    let { register: register, prevRef: prevRef, currentSelectedRef: currentSelectedRef } = (0, $4JHQR$react.useContext)($e33225559d5e019f$var$InternalSegmentedControlContext);
-    let state = (0, $4JHQR$react.useContext)((0, $4JHQR$reactariacomponents.RadioGroupStateContext));
-    let isSelected = props.id === state?.selectedValue;
+    let { register: register, prevRef: prevRef, currentSelectedRef: currentSelectedRef, isJustified: isJustified } = (0, $4JHQR$react.useContext)($e33225559d5e019f$var$InternalSegmentedControlContext);
+    let state = (0, $4JHQR$react.useContext)((0, $4JHQR$reactariacomponents.ToggleGroupStateContext));
+    let isSelected = state?.selectedKeys.has(props.id);
     // do not apply animation if a user has the prefers-reduced-motion setting
     let isReduced = false;
     if (window?.matchMedia) isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -255,20 +271,18 @@ function $e33225559d5e019f$var$SegmentedControlItem(props, ref) {
     }, [
         isSelected
     ]);
-    return /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $4JHQR$reactariacomponents.Radio), {
+    return /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $4JHQR$reactariacomponents.ToggleButton), {
         ...props,
-        value: props.id,
         ref: domRef,
-        inputRef: inputRef,
         style: props.UNSAFE_style,
         className: (renderProps)=>(props.UNSAFE_className || '') + $e33225559d5e019f$var$controlItem({
-                ...renderProps
+                ...renderProps,
+                isJustified: isJustified
             }, props.styles),
-        children: ({ isSelected: isSelected, isFocusVisible: isFocusVisible, isPressed: isPressed, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsxs)((0, $4JHQR$reactjsxruntime.Fragment), {
+        children: ({ isSelected: isSelected, isPressed: isPressed, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsxs)((0, $4JHQR$reactjsxruntime.Fragment), {
                 children: [
                     isSelected && /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)("div", {
                         className: $e33225559d5e019f$var$slider({
-                            isFocusVisible: isFocusVisible,
                             isDisabled: isDisabled
                         }),
                         ref: currentSelectedRef