@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/ProgressBar.css

@@ -19,93 +19,93 @@
 }
 
 @layer _.a {
-  .-Ovbhqd-g4hn3s13 {
+  .-Ovbhqd-g4hn3s15 {
     --s2-container-bg: white;
   }
 
-  .-Ovbhqd-gcwrnr13 {
+  .-Ovbhqd-gcwrnr15 {
     --s2-container-bg: black;
   }
 
-  .se13 {
+  .se15 {
     display: grid;
   }
 
-  .Dxumf9b13 {
+  .Dxumf9b15 {
     grid-template-columns: 1fr auto;
   }
 
-  .DM8Mfn13 {
+  .DM8Mfn15 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb13 {
+  .DPlN5qb15 {
     grid-template-columns: auto 1fr;
   }
 
-  .CC0Gyo13 {
+  .CC0Gyo15 {
     grid-template-areas: "label value"
                          "bar bar";
   }
 
-  .Cvv4gue13 {
+  .Cvv4gue15 {
     grid-template-areas: "label bar value";
   }
 
-  .C0J5Chb13 {
+  .C0J5Chb15 {
     grid-template-areas: "label"
                          "bar";
   }
 
-  .C2Yfxtb13 {
+  .C2Yfxtb15 {
     grid-template-areas: "label bar";
   }
 
-  .ea13 {
+  .ea15 {
     align-items: baseline;
   }
 
-  ._Bb13 {
+  ._Bb15 {
     isolation: isolate;
   }
 
-  .Lk13 {
+  .Lk15 {
     max-width: calc(48rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fx13 {
+  .-BhX7R-Fx15 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn13 {
+  .-BhX7R-Fn15 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp13 {
+  .-BhX7R-Fp15 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv13 {
+  .-BhX7R-Fv15 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz13 {
+  .-BhX7R-Fz15 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-dTMmze-Fe13 {
+  .-dTMmze-Fe15 {
     --track-to-label: calc(.25rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UCwrhQe13 {
+  .-AJjOLd-UCwrhQe15 {
     --field-gap: calc((calc(var(--field-height) + var(--track-to-label)) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .qg13 {
+  .qg15 {
     column-gap: .75rem;
   }
 
-  .uk13 {
+  .uk15 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
@@ -113,39 +113,39 @@
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c15 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a13 {
+  .-_6BNtrc-a15 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b13 {
+  .-_6BNtrc-b15 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d13 {
+  .-_6BNtrc-d15 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e13 {
+  .-_6BNtrc-e15 {
     --fs: pow(1.125, 2);
   }
 
-  .vx13 {
+  .vx15 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb13 {
+  .xb15 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa15 {
     font-synthesis-weight: none;
   }
 
-  ._Fd13 {
+  ._Fd15 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
@@ -153,290 +153,290 @@
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .pv13 {
+  .pv15 {
     color: light-dark(#505050, #afafaf);
   }
 
-  .pp13 {
+  .pp15 {
     color: light-dark(#c6c6c6, #444);
   }
 
-  .pl13 {
+  .pl15 {
     color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  .ri13 {
+  .ri15 {
     cursor: default;
   }
 
-  .z8bmXs13 {
+  .z8bmXs15 {
     grid-column-start: value;
   }
 
-  .y8bmXs13 {
+  .y8bmXs15 {
     grid-column-end: value;
   }
 
-  .B8bmXs13 {
+  .B8bmXs15 {
     grid-row-start: value;
   }
 
-  .A8bmXs13 {
+  .A8bmXs15 {
     grid-row-end: value;
   }
 
-  .zMY0fn13 {
+  .zMY0fn15 {
     grid-column-start: bar;
   }
 
-  .yMY0fn13 {
+  .yMY0fn15 {
     grid-column-end: bar;
   }
 
-  .BMY0fn13 {
+  .BMY0fn15 {
     grid-row-start: bar;
   }
 
-  .AMY0fn13 {
+  .AMY0fn15 {
     grid-row-end: bar;
   }
 
-  .Nk13 {
+  .Nk15 {
     min-width: calc(2rem * var(--s2-scale));
   }
 
-  .Ne13 {
+  .Ne15 {
     min-width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Nf13 {
+  .Nf15 {
     min-width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Nj13 {
+  .Nj15 {
     min-width: calc(2.5rem * var(--s2-scale));
   }
 
-  .Nl13 {
+  .Nl15 {
     min-width: calc(3rem * var(--s2-scale));
   }
 
-  ._qd13 {
+  ._qd15 {
     contain: none;
   }
 
-  .-Anxdcc-Z3fn9H13 {
+  .-Anxdcc-Z3fn9H15 {
     --defaultWidth: calc(13rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zr13 {
+  .-Anxdcc-Zr15 {
     --defaultWidth: calc(12rem * var(--s2-scale));
   }
 
-  .-Anxdcc-ZStdtne13 {
+  .-Anxdcc-ZStdtne15 {
     --defaultWidth: calc(14rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zt13 {
+  .-Anxdcc-Zt15 {
     --defaultWidth: calc(15rem * var(--s2-scale));
   }
 
-  .__v6TNLWb13 {
+  .__v6TNLWb15 {
     contain-intrinsic-width: calc(var(--defaultWidth) - var(--S, 0px) - var(--R, 0px) - var(--m, 0px) - var(--l, 0px));
   }
 
-  ._Nc13 {
+  ._Nc15 {
     overflow-x: hidden;
   }
 
-  .Pc13 {
+  .Pc15 {
     overflow-y: hidden;
   }
 
-  .gE13 {
+  .gE15 {
     background-color: light-dark(#dadada, #393939);
   }
 
-  .gh13 {
+  .gh15 {
     background-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .17);
   }
 
-  ._Ma13 {
+  ._Ma15 {
     outline-width: 0;
   }
 
-  ._Le13 {
+  ._Le15 {
     outline-style: none;
   }
 
-  .Oj13 {
+  .Oj15 {
     outline-color: #0000;
   }
 
-  ._9c13 {
+  ._9c15 {
     z-index: 1;
   }
 
-  .Fe13 {
+  .Fe15 {
     height: calc(.25rem * var(--s2-scale));
   }
 
-  .Fg13 {
+  .Fg15 {
     height: calc(.375rem * var(--s2-scale));
   }
 
-  .Fi13 {
+  .Fi15 {
     height: calc(.5rem * var(--s2-scale));
   }
 
-  .Fj13 {
+  .Fj15 {
     height: calc(.625rem * var(--s2-scale));
   }
 
-  .Fb13 {
+  .Fb15 {
     height: 100%;
   }
 
-  ._je13 {
+  ._je15 {
     border-style: none;
   }
 
-  .og13 {
+  .og15 {
     border-start-start-radius: 9999px;
   }
 
-  .ng13 {
+  .ng15 {
     border-start-end-radius: 9999px;
   }
 
-  .kg13 {
+  .kg15 {
     border-end-start-radius: 9999px;
   }
 
-  .jg13 {
+  .jg15 {
     border-end-end-radius: 9999px;
   }
 
-  .g213 {
+  .g215 {
     background-color: light-dark(#3b63fb, #4069fd);
   }
 
-  .gj13 {
+  .gj15 {
     background-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  .Za13 {
+  .Za15 {
     width: 100%;
   }
 
-  ._0e13 {
+  ._0e15 {
     transform-origin: 0;
   }
 
-  ._gXZ1Q4d13 {
+  ._gXZ1Q4d15 {
     animation-name: VHPsfc;
   }
 
-  ._g2FRDs13 {
+  ._g2FRDs15 {
     animation-name: reCXe;
   }
 
-  ._ea13 {
+  ._ea15 {
     animation-duration: 1s;
   }
 
-  ._hb13 {
+  ._hb15 {
     animation-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .__ea13 {
+  .__ea15 {
     animation-iteration-count: infinite;
   }
 
-  ._8d13 {
+  ._8d15 {
     will-change: transform;
   }
 
-  ._Pc13 {
+  ._Pc15 {
     position: relative;
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb15:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.c {
-  .ud3Euai13:lang(he) {
+  .ud3Euai15:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea13:lang(ja) {
+  .uea15:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb13:lang(ko) {
+  .ugb15:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd15:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje15:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl15:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic15:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb13 {
+    .plb15 {
       color: buttontext;
     }
 
-    .glb13 {
+    .glb15 {
       background-color: buttonface;
     }
 
-    ._Mlb13 {
+    ._Mlb15 {
       outline-width: 1px;
     }
 
-    ._Llf13 {
+    ._Llf15 {
       outline-style: solid;
     }
 
-    .Olb13 {
+    .Olb15 {
       outline-color: buttontext;
     }
 
-    .glc13 {
+    .glc15 {
       background-color: buttontext;
     }
   }
@@ -444,7 +444,7 @@
 
 @layer _.b.t {
   @supports (contain-intrinsic-width: 1px) {
-    ._qtb13 {
+    ._qtb15 {
       contain: inline-size;
     }
   }

package/dist/private/ProgressBar.css.map

@@ -1 +1 @@
-{"mappings":"ACyDyB;;;;;;;;;;AASA;;;;;;;;;;AAST;EAAA;;;;EAAA;;;;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;;;;EAaP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnCX;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaP;;;;;;AAbO;EAAA;IAAA","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 {ProgressBar as AriaProgressBar, ProgressBarProps as AriaProgressBarProps} from 'react-aria-components/ProgressBar';\n\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, 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 {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\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' | 'auto',\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' | 'render' | keyof GlobalDOMAttributes>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<Partial<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: 6,\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: 6, // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: 10 // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps & {isStaticColor: boolean}>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'accent',\n    isStaticColor: 'transparent-overlay-900',\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\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 */\nexport const ProgressBar = /*#__PURE__*/ forwardRef(function 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  let isStaticColor = !!staticColor;\n\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size, labelPosition, staticColor}, 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', isStaticColor})}>{valueText}</span>}\n          <div className={trackStyles({isStaticColor, size})}>\n            <div\n              className={mergeStyles(fill({...props, isStaticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n\n"],"names":[],"version":3,"file":"ProgressBar.css.map"}
+{"mappings":"ACoEyB;;;;;;;;;;AASA;;;;;;;;;;AAST;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCI;;;;;;;;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;;;;EAaP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnCX;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaP;;;;;;AAbO;EAAA;IAAA","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} from 'react-aria-components/ProgressBar';\n\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, 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 {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\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' | 'auto';\n  /**\n   * The label's overall position relative to the element it is labeling.\n   *\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition;\n}\n\nexport interface ProgressBarProps\n  extends\n    Omit<\n      AriaProgressBarProps,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    ProgressBarStyleProps,\n    StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode;\n}\n\nexport const ProgressBarContext =\n  createContext<ContextValue<Partial<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  {\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: ['label value', 'bar bar'],\n          side: ['label bar value']\n        }\n      },\n      isIndeterminate: {\n        labelPosition: {\n          top: ['label', 'bar'],\n          side: ['label bar']\n        }\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: 6,\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: 6, // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: 10 // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps & {isStaticColor: boolean}>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'accent',\n    isStaticColor: 'transparent-overlay-900',\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\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing,\n * etc., in a visual way. They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(\n  props: ProgressBarProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n  let {\n    label,\n    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  let isStaticColor = !!staticColor;\n\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className + wrapper({...props, size, labelPosition, staticColor}, props.styles)\n      }>\n      {({percentage, valueText}) => (\n        <>\n          {label && (\n            <FieldLabel\n              size={size}\n              labelAlign=\"start\"\n              labelPosition={labelPosition}\n              staticColor={staticColor}>\n              {label}\n            </FieldLabel>\n          )}\n          {label && !isIndeterminate && (\n            <span className={valueStyles({size, labelAlign: 'end', isStaticColor})}>\n              {valueText}\n            </span>\n          )}\n          <div className={trackStyles({isStaticColor, size})}>\n            <div\n              className={mergeStyles(\n                fill({...props, isStaticColor}),\n                isIndeterminate ? indeterminateAnimation({direction}) : null\n              )}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}}\n            />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBar.css.map"}