@react-spectrum/s2 3.0.0-nightly-73414999f-240916 → 3.0.0-nightly-9e79420c1-240918

package/dist/ProgressCircle.css

@@ -1,300 +1,14 @@
-@keyframes -_5slx9u {
-  0% {
-    transform: rotate(90deg);
-  }
-
-  1.69% {
-    transform: rotate(72.3deg);
-  }
-
-  3.39% {
-    transform: rotate(55.5deg);
-  }
-
-  5.08% {
-    transform: rotate(40.3deg);
-  }
-
-  6.78% {
-    transform: rotate(25deg);
-  }
-
-  8.47% {
-    transform: rotate(10.6deg);
-  }
-
-  10.17%, 40.68% {
-    transform: rotate(0);
-  }
-
-  42.37% {
-    transform: rotate(5.3deg);
-  }
-
-  44.07% {
-    transform: rotate(13.4deg);
-  }
-
-  45.76% {
-    transform: rotate(20.6deg);
-  }
-
-  47.46% {
-    transform: rotate(29deg);
-  }
-
-  49.15% {
-    transform: rotate(36.5deg);
-  }
-
-  50.85% {
-    transform: rotate(42.6deg);
-  }
-
-  52.54% {
-    transform: rotate(48.8deg);
-  }
-
-  54.24% {
-    transform: rotate(54.2deg);
-  }
-
-  55.93% {
-    transform: rotate(59.4deg);
-  }
-
-  57.63% {
-    transform: rotate(63.2deg);
-  }
-
-  59.32% {
-    transform: rotate(67.2deg);
-  }
-
-  61.02% {
-    transform: rotate(70.8deg);
-  }
-
-  62.71% {
-    transform: rotate(73.8deg);
-  }
-
-  64.41% {
-    transform: rotate(76.2deg);
-  }
-
-  66.1% {
-    transform: rotate(78.7deg);
-  }
-
-  67.8% {
-    transform: rotate(80.6deg);
-  }
-
-  69.49% {
-    transform: rotate(82.6deg);
-  }
-
-  71.19% {
-    transform: rotate(83.7deg);
-  }
-
-  72.88% {
-    transform: rotate(85deg);
-  }
-
-  74.58% {
-    transform: rotate(86.3deg);
-  }
-
-  76.27% {
-    transform: rotate(87deg);
-  }
-
-  77.97% {
-    transform: rotate(87.7deg);
-  }
-
-  79.66% {
-    transform: rotate(88.3deg);
-  }
-
-  81.36% {
-    transform: rotate(88.6deg);
-  }
-
-  83.05% {
-    transform: rotate(89.2deg);
-  }
-
-  84.75% {
-    transform: rotate(89.2deg);
-  }
-
-  86.44% {
-    transform: rotate(89.5deg);
-  }
-
-  88.14% {
-    transform: rotate(89.9deg);
-  }
-
-  89.83% {
-    transform: rotate(89.7deg);
-  }
-
-  91.53% {
-    transform: rotate(90.1deg);
-  }
-
-  93.22% {
-    transform: rotate(90.2deg);
-  }
-
-  94.92% {
-    transform: rotate(90.1deg);
-  }
-
-  96.61% {
-    transform: rotate(90deg);
-  }
-
-  98.31% {
-    transform: rotate(89.8deg);
-  }
-
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
-@keyframes -_36n5pc {
-  0%, 8.47% {
-    transform: rotate(180deg);
-  }
-
-  10.17% {
-    transform: rotate(179.2deg);
-  }
-
-  11.86% {
-    transform: rotate(164deg);
-  }
-
-  13.56% {
-    transform: rotate(151.8deg);
-  }
-
-  15.25% {
-    transform: rotate(140.8deg);
-  }
-
-  16.95% {
-    transform: rotate(130.3deg);
-  }
-
-  18.64% {
-    transform: rotate(120.4deg);
-  }
-
-  20.34% {
-    transform: rotate(110.8deg);
-  }
-
-  22.03% {
-    transform: rotate(101.6deg);
-  }
-
-  23.73% {
-    transform: rotate(93.5deg);
-  }
-
-  25.42% {
-    transform: rotate(85.4deg);
-  }
-
-  27.12% {
-    transform: rotate(78.1deg);
-  }
-
-  28.81% {
-    transform: rotate(71.2deg);
-  }
-
-  30.51% {
-    transform: rotate(89.1deg);
-  }
-
-  32.2% {
-    transform: rotate(105.5deg);
-  }
-
-  33.9% {
-    transform: rotate(121.3deg);
-  }
-
-  35.59% {
-    transform: rotate(135.5deg);
-  }
-
-  37.29% {
-    transform: rotate(148.4deg);
-  }
-
-  38.98% {
-    transform: rotate(161deg);
-  }
-
-  40.68% {
-    transform: rotate(173.5deg);
-  }
-
-  42.37%, 100% {
-    transform: rotate(180deg);
-  }
-}
-
-@keyframes -nqh121 {
-  0% {
-    transform: rotate(-90deg);
-  }
-
-  100% {
-    transform: rotate(270deg);
-  }
-}
-
 @layer _.a {
-  ._Zb {
-    display: inline-block;
-  }
-
-  .Uc {
-    position: relative;
-  }
-
-  .ci {
-    border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
-  }
-
-  .cj {
-    border-color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
-  }
-
-  .c____9 {
-    border-color: #ffffff2b;
-  }
-
-  .c_____a {
-    border-color: #ffffff36;
+  .lq {
+    width: 2rem;
   }
 
-  .c_____m {
-    border-color: #00000026;
+  .lj {
+    width: 1rem;
   }
 
-  .c_____n {
-    border-color: #00000038;
+  .lB {
+    width: 4rem;
   }
 
   .kq {
@@ -309,223 +23,51 @@
     height: 4rem;
   }
 
-  .lq {
-    width: 2rem;
-  }
-
-  .lj {
-    width: 1rem;
-  }
-
-  .lB {
-    width: 4rem;
-  }
-
   ._bb {
     aspect-ratio: 1;
   }
 
-  .__na {
-    box-sizing: border-box;
-  }
-
-  .wa {
-    border-style: solid;
-  }
-
-  .u-3760g0 {
-    border-top-width: 3px;
-  }
-
-  .uc {
-    border-top-width: 2px;
-  }
-
-  .ud {
-    border-top-width: 4px;
-  }
-
-  .v-3760g0 {
-    border-bottom-width: 3px;
-  }
-
-  .vc {
-    border-bottom-width: 2px;
-  }
-
-  .vd {
-    border-bottom-width: 4px;
-  }
-
-  .s-3760g0 {
-    border-inline-start-width: 3px;
-  }
-
-  .sc {
-    border-inline-start-width: 2px;
-  }
-
-  .sd {
-    border-inline-start-width: 4px;
-  }
-
-  .t-3760g0 {
-    border-inline-end-width: 3px;
-  }
-
-  .tc {
-    border-inline-end-width: 2px;
-  }
-
-  .td {
-    border-inline-end-width: 4px;
-  }
-
-  ._vf {
-    border-start-start-radius: 9999px;
-  }
-
-  ._wf {
-    border-start-end-radius: 9999px;
-  }
-
-  ._xf {
-    border-end-start-radius: 9999px;
-  }
-
-  ._yf {
-    border-end-end-radius: 9999px;
-  }
-
-  .cy {
-    border-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #5681ff);
-  }
-
-  .cz {
-    border-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #6995fe);
-  }
-
-  .c_____f {
-    border-color: #fffffff0;
+  ._Zb {
+    display: inline-block;
   }
 
-  .c_____g {
-    border-color: #fff;
+  .fk {
+    stroke: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  .c_____s {
-    border-color: #000000ed;
+  .f_____b {
+    stroke: #ffffff2b;
   }
 
-  .c_____t {
-    border-color: #000;
+  .f_____o {
+    stroke: #00000026;
   }
 
-  .Xa {
-    top: 0;
+  .fA {
+    stroke: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #5681ff);
   }
 
-  .Ya {
-    left: 0;
+  .f_____h {
+    stroke: #fffffff0;
   }
 
-  ._S-157qd4d {
-    animation-name: -nqh121;
+  .f_____u {
+    stroke: #000000ed;
   }
 
-  ._Y-1fqa2yh {
-    animation-timing-function: cubic-bezier(.25, .78, .48, .89);
+  .R-375ty3 {
+    rotate: -90deg;
   }
 
   .__Ga {
     transform-origin: center;
   }
-
-  .T-115o53i {
-    transform: rotate(180deg);
-  }
-
-  .Ua {
-    position: absolute;
-  }
-
-  .l-3760fj {
-    width: 50%;
-  }
-
-  .T-1gm38v9 {
-    transform: rotate(0);
-  }
-
-  .T-11akxcr {
-    transform: rotate(-180deg);
-  }
-
-  ._S-6p1wh7 {
-    animation-name: -_5slx9u;
-  }
-
-  .l4 {
-    width: 100%;
-  }
-
-  .k4 {
-    height: 100%;
-  }
-
-  .__G-1gvo10c {
-    transform-origin: 100%;
-  }
-
-  .T-1ecy9hq {
-    transform: translateZ(0);
-  }
-
-  .__vb {
-    overflow-x: hidden;
-  }
-
-  .__wb {
-    overflow-y: hidden;
-  }
-
-  ._S-47ds34 {
-    animation-name: -_36n5pc;
-  }
-
-  ._T-yjb9nq {
-    animation-duration: 1s;
-  }
-
-  ._Yb {
-    animation-timing-function: linear;
-  }
-
-  .__Pd {
-    will-change: transform;
-  }
-
-  ._X-twzmrf {
-    animation-iteration-count: infinite;
-  }
 }
 
 @layer _.b, UNSAFE_overrides;
 
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    .kbr {
-      height: 2.5rem;
-    }
-
-    .kbk {
-      height: 1.25rem;
-    }
-
-    .kbC {
-      height: 5rem;
-    }
-
     .lbr {
       width: 2.5rem;
     }
@@ -537,17 +79,29 @@
     .lbC {
       width: 5rem;
     }
+
+    .kbr {
+      height: 2.5rem;
+    }
+
+    .kbk {
+      height: 1.25rem;
+    }
+
+    .kbC {
+      height: 5rem;
+    }
   }
 }
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .ca_____u {
-      border-color: background;
+    .fa_____w {
+      stroke: background;
     }
 
-    .ca_____z {
-      border-color: highlight;
+    .fa_____B {
+      stroke: highlight;
     }
   }
 }
@@ -555,4 +109,24 @@
 .\.:not(#a#b) {
   all: revert-layer;
 }
+
+@keyframes -u41dq3 {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes -_1i5ccgk {
+  0%, 100% {
+    stroke-dashoffset: 75px;
+  }
+
+  30% {
+    stroke-dashoffset: 20px;
+  }
+}
 /*# sourceMappingURL=ProgressCircle.css.map */

package/dist/ProgressCircle.css.map

@@ -1 +1 @@
-{"mappings":"ACuCwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0KA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFJ;;;;;;;;;;AAwBJ;EAAA;;;;EAAA;;;;EAoBF;;;;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;;;;EA8BqB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBhB;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAqBE;;;;EAIc;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5HlB;;AAAA;EAAA;IAuCH;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAnBC;EAAA;IAAA;;;;IAmBD;;;;;;AAAA","sources":["899fc8f7586d17bf","packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["@import \"766ebfa3e9b99037\";\n@import \"cdcaa7bc1c97d336\";\n@import \"788ab0411a865673\";\n@import \"73f154e47fb53c5b\";\n@import \"6c6d672d6676880a\";\n@import \"99c6c5c836ac9ba8\";\n@import \"7d1c62f8f7082322\";\n@import \"63167f67c27b04a9\";\n@import \"e160fe2ae244c819\";\n@import \"2615a8fcc020d27d\";\n@import \"f9d9993d358c0acb\";\n@import \"7f466678796941f2\";\n@import \"4514b1364d299438\";\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 {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {clamp} from '@react-aria/utils';\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n  /**\n   * The size of the ProgressCircle.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'black' | 'white',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst fillMask1Frames = keyframes(`\n0% {\n  transform: rotate(90deg);\n}\n\n1.69% {\n  transform: rotate(72.3deg);\n}\n\n3.39% {\n  transform: rotate(55.5deg);\n}\n\n5.08% {\n  transform: rotate(40.3deg);\n}\n\n6.78% {\n  transform: rotate(25deg);\n}\n\n8.47% {\n  transform: rotate(10.6deg);\n}\n\n10.17%, 40.68% {\n  transform: rotate(0deg);\n}\n\n42.37% {\n  transform: rotate(5.3deg);\n}\n\n44.07% {\n  transform: rotate(13.4deg);\n}\n\n45.76% {\n  transform: rotate(20.6deg);\n}\n\n47.46% {\n  transform: rotate(29deg);\n}\n\n49.15% {\n  transform: rotate(36.5deg);\n}\n\n50.85% {\n  transform: rotate(42.6deg);\n}\n\n52.54% {\n  transform: rotate(48.8deg);\n}\n\n54.24% {\n  transform: rotate(54.2deg);\n}\n\n55.93% {\n  transform: rotate(59.4deg);\n}\n\n57.63% {\n  transform: rotate(63.2deg);\n}\n\n59.32% {\n  transform: rotate(67.2deg);\n}\n\n61.02% {\n  transform: rotate(70.8deg);\n}\n\n62.71% {\n  transform: rotate(73.8deg);\n}\n\n64.41% {\n  transform: rotate(76.2deg);\n}\n\n66.1% {\n  transform: rotate(78.7deg);\n}\n\n67.8% {\n  transform: rotate(80.6deg);\n}\n\n69.49% {\n  transform: rotate(82.6deg);\n}\n\n71.19% {\n  transform: rotate(83.7deg);\n}\n\n72.88% {\n  transform: rotate(85deg);\n}\n\n74.58% {\n  transform: rotate(86.3deg);\n}\n\n76.27% {\n  transform: rotate(87deg);\n}\n\n77.97% {\n  transform: rotate(87.7deg);\n}\n\n79.66% {\n  transform: rotate(88.3deg);\n}\n\n81.36% {\n  transform: rotate(88.6deg);\n}\n\n83.05% {\n  transform: rotate(89.2deg);\n}\n\n84.75% {\n  transform: rotate(89.2deg);\n}\n\n86.44% {\n  transform: rotate(89.5deg);\n}\n\n88.14% {\n  transform: rotate(89.9deg);\n}\n\n89.83% {\n  transform: rotate(89.7deg);\n}\n\n91.53% {\n  transform: rotate(90.1deg);\n}\n\n93.22% {\n  transform: rotate(90.2deg);\n}\n\n94.92% {\n  transform: rotate(90.1deg);\n}\n\n96.61% {\n  transform: rotate(90deg);\n}\n\n98.31% {\n  transform: rotate(89.8deg);\n}\n\n100% {\n  transform: rotate(90deg);\n}\n`);\n\nconst fillMask2Frames = keyframes(`\n0%, 8.47% {\n  transform: rotate(180deg);\n}\n\n10.17% {\n  transform: rotate(179.2deg);\n}\n\n11.86% {\n  transform: rotate(164deg);\n}\n\n13.56% {\n  transform: rotate(151.8deg);\n}\n\n15.25% {\n  transform: rotate(140.8deg);\n}\n\n16.95% {\n  transform: rotate(130.3deg);\n}\n\n18.64% {\n  transform: rotate(120.4deg);\n}\n\n20.34% {\n  transform: rotate(110.8deg);\n}\n\n22.03% {\n  transform: rotate(101.6deg);\n}\n\n23.73% {\n  transform: rotate(93.5deg);\n}\n\n25.42% {\n  transform: rotate(85.4deg);\n}\n\n27.12% {\n  transform: rotate(78.1deg);\n}\n\n28.81% {\n  transform: rotate(71.2deg);\n}\n\n30.51% {\n  transform: rotate(89.1deg);\n}\n\n32.2% {\n  transform: rotate(105.5deg);\n}\n\n33.9% {\n  transform: rotate(121.3deg);\n}\n\n35.59% {\n  transform: rotate(135.5deg);\n}\n\n37.29% {\n  transform: rotate(148.4deg);\n}\n\n38.98% {\n  transform: rotate(161deg);\n}\n\n40.68% {\n  transform: rotate(173.5deg);\n}\n\n42.37%, 100% {\n  transform: rotate(180deg);\n}\n`);\n\nconst fillsRotate = keyframes(`\n0% {transform: rotate(-90deg)}\n100% {transform: rotate(270deg)}\n`);\n\nconst circleDims = {\n  height: {\n    default: 32,\n    size: {\n      S: 16,\n      L: 64\n    }\n  },\n  width: {\n    default: 32,\n    size: {\n      S: 16,\n      L: 64\n    }\n  },\n  aspectRatio: 'square'\n} as const;\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n  ...circleDims,\n  display: 'inline-block',\n  position: 'relative'\n}, getAllowedOverrides());\n\nconst trackStyles = {\n  ...circleDims,\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: {\n    default: '[3px]',\n    size: {\n      S: 2,\n      L: 4\n    }\n  },\n  borderRadius: 'full'\n} as const;\n\nconst track = style<ProgressCircleStyleProps>({\n  ...trackStyles,\n  borderColor: {\n    default: baseColor('gray-300'),\n    staticColor: {\n      white: {\n        default: baseColor('transparent-white-300'),\n        forcedColors: 'Background'\n      },\n      // TODO: no designs for this one\n      black: {\n        default: baseColor('transparent-black-300'),\n        forcedColors: 'Background'\n      }\n    },\n    forcedColors: 'Background'\n  }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n  ...trackStyles,\n  borderColor: {\n    default: baseColor('blue-900'),\n    staticColor: {\n      white: {\n        default: baseColor('transparent-white-900'),\n        forcedColors: 'Highlight'\n      },\n      // TODO: no designs for this one\n      black: {\n        default: baseColor('transparent-black-900'),\n        forcedColors: 'Highlight'\n      }\n    },\n    forcedColors: 'Highlight'\n  }\n});\n\nconst fillsWrapperStyles = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  size: 'full'\n} as const;\n\nconst fillsWrapper = style({\n  ...fillsWrapperStyles\n});\n\nconst fillsWrapperIndeterminate = style({\n  ...fillsWrapperStyles,\n  willChange: 'transform',\n  transform: 'translateZ(0)',\n  animation: fillsRotate,\n  animationDuration: 1000,\n  animationTimingFunction: '[cubic-bezier(.25,.78,.48,.89)]',\n  animationIterationCount: 'infinite',\n  transformOrigin: 'center'\n});\n\nconst commonFillMask = {\n  position: 'absolute',\n  width: '[50%]',\n  height: 'full',\n  transformOrigin: '[100% center]',\n  overflow: 'hidden'\n} as const;\n\nconst fillMask1 = style({\n  ...commonFillMask,\n  transform: 'rotate(180deg)'\n});\n\nconst fillMask2 = style({\n  ...commonFillMask,\n  transform: 'rotate(0deg)'\n});\n\nconst commonFillSubMask = {\n  width: 'full',\n  height: 'full',\n  transformOrigin: '[100% center]',\n  transform: 'rotate(-180deg)',\n  overflow: 'hidden'\n} as const;\n\nconst commonFillSubMaskIndeterminate = {\n  transform: 'translateZ(0)',\n  willChange: 'transform',\n  animationDuration: 1000,\n  animationTimingFunction: 'linear',\n  animationIterationCount: 'infinite'\n} as const;\n\nconst fillSubMask = style({\n  ...commonFillSubMask\n});\n\nconst fillSubMask1Indeterminate = style({\n  ...commonFillSubMask,\n  animation: fillMask1Frames,\n  ...commonFillSubMaskIndeterminate\n});\n\nconst fillSubMask2Indeterminate = style({\n  ...commonFillSubMask,\n  animation: fillMask2Frames,\n  ...commonFillSubMaskIndeterminate\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, StyleProps {}\n\nfunction ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'M',\n    staticColor,\n    isIndeterminate = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  value = clamp(value, minValue, maxValue);\n\n  let subMask1Style: CSSProperties = {};\n  let subMask2Style: CSSProperties = {};\n  if (!isIndeterminate) {\n    let percentage = (value - minValue) / (maxValue - minValue) * 100;\n    let angle;\n    if (percentage > 0 && percentage <= 50) {\n      angle = -180 + (percentage / 50 * 180);\n      subMask1Style.transform = `rotate(${angle}deg)`;\n      subMask2Style.transform = 'rotate(-180deg)';\n    } else if (percentage > 50) {\n      angle = -180 + (percentage - 50) / 50 * 180;\n      subMask1Style.transform = 'rotate(0deg)';\n      subMask2Style.transform = `rotate(${angle}deg)`;\n    }\n  }\n\n  if (!ariaLabel && !ariaLabelledby) {\n    console.warn('ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility');\n  }\n\n  return (\n    <RACProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({\n        ...renderProps,\n        size\n      }, props.styles)}>\n      <div dir=\"ltr\">\n        <div className={track({size, staticColor})} />\n        <div className={isIndeterminate ? fillsWrapperIndeterminate : fillsWrapper}>\n          <div className={fillMask1}>\n            <div\n              className={isIndeterminate ? fillSubMask1Indeterminate : fillSubMask}\n              style={subMask1Style}>\n              <div className={fill({size, staticColor})} />\n            </div>\n          </div>\n          <div className={fillMask2}>\n            <div\n              className={isIndeterminate ? fillSubMask2Indeterminate : fillSubMask}\n              style={subMask2Style}>\n              <div className={fill({size, staticColor})} />\n            </div>\n          </div>\n        </div>\n      </div>\n    </RACProgressBar>\n  );\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nlet _ProgressCircle = /*#__PURE__*/ forwardRef(ProgressCircle);\nexport {_ProgressCircle as ProgressCircle};\n"],"names":[],"version":3,"file":"ProgressCircle.css.map"}
+{"mappings":"ACuCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYF;;;;EAAA;;;;EAAA;;;;EAWD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvBG;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAYF;EAAA;IAAA;;;;IAWD;;;;;;AAAA;;;;AAea;;;;;;;;;;AAWE","sources":["899fc8f7586d17bf","packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["@import \"766ebfa3e9b99037\";\n@import \"cdcaa7bc1c97d336\";\n@import \"788ab0411a865673\";\n@import \"73f154e47fb53c5b\";\n@import \"6c6d672d6676880a\";\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 {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n  /**\n   * The size of the ProgressCircle.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'black' | 'white',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n  size: {\n    default: 32,\n    size: {\n      S: 16,\n      L: 64\n    }\n  },\n  aspectRatio: 'square',\n  display: 'inline-block'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n  stroke: {\n    default: 'gray-300',\n    staticColor: {\n      white: 'transparent-white-300',\n      black: 'transparent-black-300'\n    },\n    forcedColors: 'Background'\n  }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n  stroke: {\n    default: 'blue-900',\n    staticColor: {\n      white: 'transparent-white-900',\n      black: 'transparent-black-900'\n    },\n    forcedColors: 'Highlight'\n  },\n  rotate: -90,\n  transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, StyleProps {}\n\nconst rotationAnimation = keyframes(`\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n  0%, 100% {\n    stroke-dashoffset: 75;\n  }\n\n  30% {\n    stroke-dashoffset: 20;\n  }\n`);\n\nfunction ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n  let {\n    size = 'M',\n    staticColor,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let strokeWidth = 3;\n  if (size === 'S') {\n    strokeWidth = 2;\n  } else if (size === 'L') {\n    strokeWidth = 4;\n  }\n\n  // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n  let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n  return (\n    <RACProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({\n        ...renderProps,\n        size\n      }, props.styles)}>\n      {({percentage, isIndeterminate}) => (\n        <svg\n          fill=\"none\"\n          width=\"100%\"\n          height=\"100%\">\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            strokeWidth={strokeWidth}\n            className={track({staticColor})} />\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            strokeWidth={strokeWidth}\n            className={fill({staticColor})}\n            style={{\n              // These cubic-bezier timing functions were derived from the previous animation keyframes\n              // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n              animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n            }}\n            // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n            pathLength=\"100\"\n            // Add extra gap between dashes so 0% works in Chrome.\n            strokeDasharray=\"100 200\"\n            strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n            strokeLinecap=\"round\" />\n        </svg>\n      )}\n    </RACProgressBar>\n  );\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nlet _ProgressCircle = /*#__PURE__*/ forwardRef(ProgressCircle);\nexport {_ProgressCircle as ProgressCircle};\n"],"names":[],"version":3,"file":"ProgressCircle.css.map"}