@react-spectrum/s2 1.0.0 → 1.2.0

package/dist/ProgressBar.css

@@ -19,93 +19,93 @@
 }
 
 @layer _.a {
-  .-Ovbhqd-g4hn3s1 {
+  .-Ovbhqd-g4hn3s12 {
     --s2-container-bg: white;
   }
 
-  .-Ovbhqd-gcwrnr1 {
+  .-Ovbhqd-gcwrnr12 {
     --s2-container-bg: black;
   }
 
-  .se1 {
+  .se12 {
     display: grid;
   }
 
-  .Dxumf9b1 {
+  .Dxumf9b12 {
     grid-template-columns: 1fr auto;
   }
 
-  .DM8Mfn1 {
+  .DM8Mfn12 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb1 {
+  .DPlN5qb12 {
     grid-template-columns: auto 1fr;
   }
 
-  .CC0Gyo1 {
+  .CC0Gyo12 {
     grid-template-areas: "label value"
                          "bar bar";
   }
 
-  .Cvv4gue1 {
+  .Cvv4gue12 {
     grid-template-areas: "label bar value";
   }
 
-  .C0J5Chb1 {
+  .C0J5Chb12 {
     grid-template-areas: "label"
                          "bar";
   }
 
-  .C2Yfxtb1 {
+  .C2Yfxtb12 {
     grid-template-areas: "label bar";
   }
 
-  .ea1 {
+  .ea12 {
     align-items: baseline;
   }
 
-  ._Bb1 {
+  ._Bb12 {
     isolation: isolate;
   }
 
-  .Lk1 {
+  .Lk12 {
     max-width: calc(48rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fx1 {
+  .-BhX7R-Fx12 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn1 {
+  .-BhX7R-Fn12 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp1 {
+  .-BhX7R-Fp12 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv1 {
+  .-BhX7R-Fv12 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz1 {
+  .-BhX7R-Fz12 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-dTMmze-Fe1 {
+  .-dTMmze-Fe12 {
     --track-to-label: calc(.25rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UCwrhQe1 {
+  .-AJjOLd-UCwrhQe12 {
     --field-gap: calc((calc(var(--field-height)  + var(--track-to-label))  - var(--_k, 0px)  - var(--h, 0px)  - 1lh) / 2);
   }
 
-  .qg1 {
+  .qg12 {
     column-gap: .75rem;
   }
 
-  .uk1 {
+  .uk12 {
     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-c1 {
+  .-_6BNtrc-c12 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a1 {
+  .-_6BNtrc-a12 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b1 {
+  .-_6BNtrc-b12 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d1 {
+  .-_6BNtrc-d12 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e1 {
+  .-_6BNtrc-e12 {
     --fs: pow(1.125, 2);
   }
 
-  .vx1 {
+  .vx12 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb1 {
+  .xb12 {
     font-weight: 400;
   }
 
-  ._xa1 {
+  ._xa12 {
     font-synthesis-weight: none;
   }
 
-  ._Fd1 {
+  ._Fd12 {
     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);
   }
 
-  .pv1 {
+  .pv12 {
     color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #afafaf);
   }
 
-  .pp1 {
+  .pp12 {
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  .pl1 {
+  .pl12 {
     color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  .ri1 {
+  .ri12 {
     cursor: default;
   }
 
-  .z8bmXs1 {
+  .z8bmXs12 {
     grid-column-start: value;
   }
 
-  .y8bmXs1 {
+  .y8bmXs12 {
     grid-column-end: value;
   }
 
-  .B8bmXs1 {
+  .B8bmXs12 {
     grid-row-start: value;
   }
 
-  .A8bmXs1 {
+  .A8bmXs12 {
     grid-row-end: value;
   }
 
-  .zMY0fn1 {
+  .zMY0fn12 {
     grid-column-start: bar;
   }
 
-  .yMY0fn1 {
+  .yMY0fn12 {
     grid-column-end: bar;
   }
 
-  .BMY0fn1 {
+  .BMY0fn12 {
     grid-row-start: bar;
   }
 
-  .AMY0fn1 {
+  .AMY0fn12 {
     grid-row-end: bar;
   }
 
-  .Nk1 {
+  .Nk12 {
     min-width: calc(2rem * var(--s2-scale));
   }
 
-  .Ne1 {
+  .Ne12 {
     min-width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Nf1 {
+  .Nf12 {
     min-width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Nj1 {
+  .Nj12 {
     min-width: calc(2.5rem * var(--s2-scale));
   }
 
-  .Nl1 {
+  .Nl12 {
     min-width: calc(3rem * var(--s2-scale));
   }
 
-  ._qd1 {
+  ._qd12 {
     contain: none;
   }
 
-  .-Anxdcc-Z3fn9H1 {
+  .-Anxdcc-Z3fn9H12 {
     --defaultWidth: calc(13rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zr1 {
+  .-Anxdcc-Zr12 {
     --defaultWidth: calc(12rem * var(--s2-scale));
   }
 
-  .-Anxdcc-ZStdtne1 {
+  .-Anxdcc-ZStdtne12 {
     --defaultWidth: calc(14rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zt1 {
+  .-Anxdcc-Zt12 {
     --defaultWidth: calc(15rem * var(--s2-scale));
   }
 
-  .__v6TNLWb1 {
+  .__v6TNLWb12 {
     contain-intrinsic-width: calc(var(--defaultWidth)  - var(--S, 0px)  - var(--R, 0px)  - var(--m, 0px)  - var(--l, 0px));
   }
 
-  ._Nc1 {
+  ._Nc12 {
     overflow-x: hidden;
   }
 
-  .Pc1 {
+  .Pc12 {
     overflow-y: hidden;
   }
 
-  .gE1 {
+  .gE12 {
     background-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  .gh1 {
+  .gh12 {
     background-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .17);
   }
 
-  ._Ma1 {
+  ._Ma12 {
     outline-width: 0;
   }
 
-  ._Le1 {
+  ._Le12 {
     outline-style: none;
   }
 
-  .Oj1 {
+  .Oj12 {
     outline-color: #0000;
   }
 
-  ._9c1 {
+  ._9c12 {
     z-index: 1;
   }
 
-  .Fe1 {
+  .Fe12 {
     height: calc(.25rem * var(--s2-scale));
   }
 
-  .Fg1 {
+  .Fg12 {
     height: calc(.375rem * var(--s2-scale));
   }
 
-  .Fi1 {
+  .Fi12 {
     height: calc(.5rem * var(--s2-scale));
   }
 
-  .Fj1 {
+  .Fj12 {
     height: calc(.625rem * var(--s2-scale));
   }
 
-  .Fb1 {
+  .Fb12 {
     height: 100%;
   }
 
-  ._je1 {
+  ._je12 {
     border-style: none;
   }
 
-  .og1 {
+  .og12 {
     border-start-start-radius: 9999px;
   }
 
-  .ng1 {
+  .ng12 {
     border-start-end-radius: 9999px;
   }
 
-  .kg1 {
+  .kg12 {
     border-end-start-radius: 9999px;
   }
 
-  .jg1 {
+  .jg12 {
     border-end-end-radius: 9999px;
   }
 
-  .g21 {
+  .g212 {
     background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .gj1 {
+  .gj12 {
     background-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  .Za1 {
+  .Za12 {
     width: 100%;
   }
 
-  ._0e1 {
+  ._0e12 {
     transform-origin: 0;
   }
 
-  ._gXZ1Q4d1 {
+  ._gXZ1Q4d12 {
     animation-name: VHPsfc;
   }
 
-  ._g2FRDs1 {
+  ._g2FRDs12 {
     animation-name: reCXe;
   }
 
-  ._ea1 {
+  ._ea12 {
     animation-duration: 1s;
   }
 
-  ._hb1 {
+  ._hb12 {
     animation-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .__ea1 {
+  .__ea12 {
     animation-iteration-count: infinite;
   }
 
-  ._8d1 {
+  ._8d12 {
     will-change: transform;
   }
 
-  ._Pc1 {
+  ._Pc12 {
     position: relative;
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb1:lang(ar) {
+  .ucJ9TBTb12:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUweb1:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb12: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 {
-  .ud3Euai1:lang(he) {
+  .ud3Euai12:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea1:lang(ja) {
+  .uea12: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 {
-  .ugb1:lang(ko) {
+  .ugb12:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd1:lang(zh) {
+  .uhd12:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje1:lang(zh-hant) {
+  .uje12: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 {
-  .u2NhKxcl1:lang(zh-HK) {
+  .u2NhKxcl12: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 {
-  .uic1:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic12: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) {
-    .plb1 {
+    .plb12 {
       color: buttontext;
     }
 
-    .glb1 {
+    .glb12 {
       background-color: buttonface;
     }
 
-    ._Mlb1 {
+    ._Mlb12 {
       outline-width: 1px;
     }
 
-    ._Llf1 {
+    ._Llf12 {
       outline-style: solid;
     }
 
-    .Olb1 {
+    .Olb12 {
       outline-color: buttontext;
     }
 
-    .glc1 {
+    .glc12 {
       background-color: buttontext;
     }
   }
@@ -444,7 +444,7 @@
 
 @layer _.b.t {
   @supports (contain-intrinsic-width: 1px) {
-    ._qtb1 {
+    ._qtb12 {
       contain: inline-size;
     }
   }

package/dist/ProgressBar.css.map

@@ -1 +1 @@
-{"mappings":"AC2DyB;;;;;;;;;;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 {\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, 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 '@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' | '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' | 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":"AC2DyB;;;;;;;;;;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 {\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, 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 '@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' | '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"}