@react-spectrum/s2 1.0.0 → 1.1.0

package/dist/Popover.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Popover.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  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  ContextValue,\n  DialogProps,\n  OverlayArrow,\n  OverlayTriggerStateContext,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps,\n  'arrowSize' |\n  'isNonModal' |\n  'arrowBoundaryOffset' |\n  'isKeyboardDismissDisabled' |\n  'shouldCloseOnInteractOutside' |\n  'shouldUpdatePosition' |\n  'style' |\n  'className' |\n  keyof GlobalDOMAttributes\n> {\n  /**\n   * The styles of the popover.\n   */\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  /**\n   * The size of the Popover. If not specified, the popover fits its contents.\n   */\n  size?: 'S' | 'M' | 'L'\n  /** The type of overlay that should be rendered when on a mobile device. */\n  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'layer-2',\n      forcedColors: 'Background'\n    }\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: 336,\n      M: 416,\n      L: 576\n    }\n  },\n  // Don't be larger than full screen minus 2 * containerPadding\n  maxWidth: 'calc(100vw - 24px)',\n  boxSizing: 'border-box',\n  display: 'flex',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  transition: '[opacity, translate]',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\n  },\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  width: 18,\n  height: 9,\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: '-25%',\n      right: '25%'\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction]);\n  // Memoed so it doesn't break ComboBox/Picker scrolling\n  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\n\n  // On small devices, show a modal (or eventually a tray) instead of a popover.\n  // TODO: reverted this until we have trays.\n  // let isMobile = useIsMobileDevice();\n  // if (isMobile && process.env.NODE_ENV !== 'test') {\n  //   let mappedChildren = typeof children === 'function'\n  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n  //     : children;\n\n  //   return (\n  //     <Modal size={size} isDismissable>\n  //       {composeRenderProps(mappedChildren, (children, {state}) => (\n  //         <>\n  //           {children}\n  //           {/* Add additional dismiss button at the end to match popovers. */}\n  //           <DismissButton onDismiss={state.close} />\n  //         </>\n  //       ))}\n  //     </Modal>\n  //   );\n  // }\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n      ref={mergedRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow className=\"\">\n              <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          <InPopoverContext.Provider value>\n            {children}\n          </InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;\nexport interface PopoverDialogProps extends Pick<PopoverProps,\n'size' |\n'hideArrow'|\n'placement' |\n'shouldFlip' |\n'containerPadding' |\n'offset' |\n'crossOffset' |\n'triggerRef' |\n'isOpen' |\n'onOpenChange'\n>, Omit<DialogProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNode,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: PopoverStylesProp\n}\n\nconst innerDivStyle = style({\n  padding: {\n    padding: {\n      default: 8,\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  width: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    padding = 'default',\n    ...otherProps\n  } = props;\n\n  return (\n    <PopoverBase {...otherProps} ref={domRef}>\n      {composeRenderProps(props.children, (children) => (\n        <div\n          style={UNSAFE_style}\n          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\n          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        </div>\n      ))}\n    </PopoverBase>\n  );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Popover.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  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  ContextValue,\n  DialogProps,\n  OverlayArrow,\n  OverlayTriggerStateContext,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps,\n  'arrowSize' |\n  'isNonModal' |\n  'arrowBoundaryOffset' |\n  'isKeyboardDismissDisabled' |\n  'shouldCloseOnInteractOutside' |\n  'shouldUpdatePosition' |\n  'style' |\n  'className' |\n  'render' |\n  keyof GlobalDOMAttributes\n> {\n  /**\n   * The styles of the popover.\n   */\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  /**\n   * The size of the Popover. If not specified, the popover fits its contents.\n   */\n  size?: 'S' | 'M' | 'L'\n  /** The type of overlay that should be rendered when on a mobile device. */\n  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'layer-2',\n      forcedColors: 'Background'\n    }\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: 336,\n      M: 416,\n      L: 576\n    }\n  },\n  // Don't be larger than full screen minus 2 * containerPadding\n  maxWidth: 'calc(100vw - 24px)',\n  boxSizing: 'border-box',\n  display: 'flex',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  transition: '[opacity, translate]',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\n  },\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  width: 18,\n  height: 9,\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: '-25%',\n      right: '25%'\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction]);\n  // Memoed so it doesn't break ComboBox/Picker scrolling\n  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\n\n  // On small devices, show a modal (or eventually a tray) instead of a popover.\n  // TODO: reverted this until we have trays.\n  // let isMobile = useIsMobileDevice();\n  // if (isMobile && process.env.NODE_ENV !== 'test') {\n  //   let mappedChildren = typeof children === 'function'\n  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n  //     : children;\n\n  //   return (\n  //     <Modal size={size} isDismissable>\n  //       {composeRenderProps(mappedChildren, (children, {state}) => (\n  //         <>\n  //           {children}\n  //           {/* Add additional dismiss button at the end to match popovers. */}\n  //           <DismissButton onDismiss={state.close} />\n  //         </>\n  //       ))}\n  //     </Modal>\n  //   );\n  // }\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n      ref={mergedRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow className=\"\">\n              <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          <InPopoverContext.Provider value>\n            {children}\n          </InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;\nexport interface PopoverDialogProps extends Pick<PopoverProps,\n'size' |\n'hideArrow'|\n'placement' |\n'shouldFlip' |\n'containerPadding' |\n'offset' |\n'crossOffset' |\n'triggerRef' |\n'isOpen' |\n'onOpenChange'\n>, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNode,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: PopoverStylesProp\n}\n\nconst innerDivStyle = style({\n  padding: {\n    padding: {\n      default: 8,\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  width: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    padding = 'default',\n    ...otherProps\n  } = props;\n\n  return (\n    <PopoverBase {...otherProps} ref={domRef}>\n      {composeRenderProps(props.children, (children) => (\n        <div\n          style={UNSAFE_style}\n          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\n          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        </div>\n      ))}\n    </PopoverBase>\n  );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}

package/dist/ProgressBar.cjs

@@ -41,222 +41,222 @@ const $83e59061dd392311$var$wrapper = function anonymous(props, overrides) {
     let position = false;
     let minWidth = false;
     let maxWidth = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "N") minWidth = true;
         if (p[1] === "L") maxWidth = true;
         rules += p[0];
     }
-    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr1';
-    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s1';
-    if (!position) rules += ' _Pc1';
-    rules += ' se1';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr11';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s11';
+    if (!position) rules += ' _Pc11';
+    rules += ' se11';
     if (props.isIndeterminate) {
-        if (props.labelPosition === "side") rules += ' DPlN5qb1';
-        else if (props.labelPosition === "top") rules += ' DM8Mfn1';
+        if (props.labelPosition === "side") rules += ' DPlN5qb11';
+        else if (props.labelPosition === "top") rules += ' DM8Mfn11';
     } else {
-        if (props.labelPosition === "side") rules += ' DPlN5qb1';
-        else if (props.labelPosition === "top") rules += ' Dxumf9b1';
+        if (props.labelPosition === "side") rules += ' DPlN5qb11';
+        else if (props.labelPosition === "top") rules += ' Dxumf9b11';
     }
     if (props.isIndeterminate) {
-        if (props.labelPosition === "side") rules += ' C2Yfxtb1';
-        else if (props.labelPosition === "top") rules += ' C0J5Chb1';
+        if (props.labelPosition === "side") rules += ' C2Yfxtb11';
+        else if (props.labelPosition === "top") rules += ' C0J5Chb11';
     } else {
-        if (props.labelPosition === "side") rules += ' Cvv4gue1';
-        else if (props.labelPosition === "top") rules += ' CC0Gyo1';
+        if (props.labelPosition === "side") rules += ' Cvv4gue11';
+        else if (props.labelPosition === "top") rules += ' CC0Gyo11';
     }
-    rules += ' ea1';
-    rules += ' _Bb1';
-    if (!minWidth) rules += ' Nl1';
-    if (!maxWidth) rules += ' Lk1';
-    if (props.size === "XL") rules += ' -BhX7R-Fz1';
-    else if (props.size === "L") rules += ' -BhX7R-Fv1';
-    else if (props.size === "S") rules += ' -BhX7R-Fp1';
-    else if (props.size === "XS") rules += ' -BhX7R-Fn1';
-    else rules += ' -BhX7R-Fx1';
-    rules += ' -dTMmze-Fe1';
-    rules += ' -AJjOLd-UCwrhQe1';
-    rules += ' qg1';
+    rules += ' ea11';
+    rules += ' _Bb11';
+    if (!minWidth) rules += ' Nl11';
+    if (!maxWidth) rules += ' Lk11';
+    if (props.size === "XL") rules += ' -BhX7R-Fz11';
+    else if (props.size === "L") rules += ' -BhX7R-Fv11';
+    else if (props.size === "S") rules += ' -BhX7R-Fp11';
+    else if (props.size === "XS") rules += ' -BhX7R-Fn11';
+    else rules += ' -BhX7R-Fx11';
+    rules += ' -dTMmze-Fe11';
+    rules += ' -AJjOLd-UCwrhQe11';
+    rules += ' qg11';
     return rules;
 };
 const $83e59061dd392311$var$valueStyles = function anonymous(props) {
     let rules = " ";
     if (props.size === "XL") {
-        rules += ' uk1';
-        rules += ' ucJ9TBTb1';
-        rules += ' ud3Euai1';
-        rules += ' uea1';
-        rules += ' ugb1';
-        rules += ' uhd1';
-        rules += ' uje1';
-        rules += ' u2NhKxcl1';
-        rules += ' uic1';
+        rules += ' uk11';
+        rules += ' ucJ9TBTb11';
+        rules += ' ud3Euai11';
+        rules += ' uea11';
+        rules += ' ugb11';
+        rules += ' uhd11';
+        rules += ' uje11';
+        rules += ' u2NhKxcl11';
+        rules += ' uic11';
     } else if (props.size === "L") {
-        rules += ' uk1';
-        rules += ' ucJ9TBTb1';
-        rules += ' ud3Euai1';
-        rules += ' uea1';
-        rules += ' ugb1';
-        rules += ' uhd1';
-        rules += ' uje1';
-        rules += ' u2NhKxcl1';
-        rules += ' uic1';
+        rules += ' uk11';
+        rules += ' ucJ9TBTb11';
+        rules += ' ud3Euai11';
+        rules += ' uea11';
+        rules += ' ugb11';
+        rules += ' uhd11';
+        rules += ' uje11';
+        rules += ' u2NhKxcl11';
+        rules += ' uic11';
     } else if (props.size === "S") {
-        rules += ' uk1';
-        rules += ' ucJ9TBTb1';
-        rules += ' ud3Euai1';
-        rules += ' uea1';
-        rules += ' ugb1';
-        rules += ' uhd1';
-        rules += ' uje1';
-        rules += ' u2NhKxcl1';
-        rules += ' uic1';
+        rules += ' uk11';
+        rules += ' ucJ9TBTb11';
+        rules += ' ud3Euai11';
+        rules += ' uea11';
+        rules += ' ugb11';
+        rules += ' uhd11';
+        rules += ' uje11';
+        rules += ' u2NhKxcl11';
+        rules += ' uic11';
     } else if (props.size === "XS") {
-        rules += ' uk1';
-        rules += ' ucJ9TBTb1';
-        rules += ' ud3Euai1';
-        rules += ' uea1';
-        rules += ' ugb1';
-        rules += ' uhd1';
-        rules += ' uje1';
-        rules += ' u2NhKxcl1';
-        rules += ' uic1';
+        rules += ' uk11';
+        rules += ' ucJ9TBTb11';
+        rules += ' ud3Euai11';
+        rules += ' uea11';
+        rules += ' ugb11';
+        rules += ' uhd11';
+        rules += ' uje11';
+        rules += ' u2NhKxcl11';
+        rules += ' uic11';
     } else {
-        rules += ' uk1';
-        rules += ' ucJ9TBTb1';
-        rules += ' ud3Euai1';
-        rules += ' uea1';
-        rules += ' ugb1';
-        rules += ' uhd1';
-        rules += ' uje1';
-        rules += ' u2NhKxcl1';
-        rules += ' uic1';
+        rules += ' uk11';
+        rules += ' ucJ9TBTb11';
+        rules += ' ud3Euai11';
+        rules += ' uea11';
+        rules += ' ugb11';
+        rules += ' uhd11';
+        rules += ' uje11';
+        rules += ' u2NhKxcl11';
+        rules += ' uic11';
     }
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e1';
-        rules += ' vx1';
+        rules += ' -_6BNtrc-e11';
+        rules += ' vx11';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d1';
-        rules += ' vx1';
+        rules += ' -_6BNtrc-d11';
+        rules += ' vx11';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b1';
-        rules += ' vx1';
+        rules += ' -_6BNtrc-b11';
+        rules += ' vx11';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a1';
-        rules += ' vx1';
+        rules += ' -_6BNtrc-a11';
+        rules += ' vx11';
     } else {
-        rules += ' -_6BNtrc-c1';
-        rules += ' vx1';
+        rules += ' -_6BNtrc-c11';
+        rules += ' vx11';
     }
     if (props.size === "XL") {
-        rules += ' xb1';
-        rules += ' _xa1';
+        rules += ' xb11';
+        rules += ' _xa11';
     } else if (props.size === "L") {
-        rules += ' xb1';
-        rules += ' _xa1';
+        rules += ' xb11';
+        rules += ' _xa11';
     } else if (props.size === "S") {
-        rules += ' xb1';
-        rules += ' _xa1';
+        rules += ' xb11';
+        rules += ' _xa11';
     } else if (props.size === "XS") {
-        rules += ' xb1';
-        rules += ' _xa1';
+        rules += ' xb11';
+        rules += ' _xa11';
     } else {
-        rules += ' xb1';
-        rules += ' _xa1';
+        rules += ' xb11';
+        rules += ' _xa11';
     }
     if (props.size === "XL") {
-        rules += ' _Fd1';
-        rules += ' _FnuYUweb1';
+        rules += ' _Fd11';
+        rules += ' _FnuYUweb11';
     } else if (props.size === "L") {
-        rules += ' _Fd1';
-        rules += ' _FnuYUweb1';
+        rules += ' _Fd11';
+        rules += ' _FnuYUweb11';
     } else if (props.size === "S") {
-        rules += ' _Fd1';
-        rules += ' _FnuYUweb1';
+        rules += ' _Fd11';
+        rules += ' _FnuYUweb11';
     } else if (props.size === "XS") {
-        rules += ' _Fd1';
-        rules += ' _FnuYUweb1';
+        rules += ' _Fd11';
+        rules += ' _FnuYUweb11';
     } else {
-        rules += ' _Fd1';
-        rules += ' _FnuYUweb1';
+        rules += ' _Fd11';
+        rules += ' _FnuYUweb11';
     }
-    if (props.isStaticColor) rules += ' pl1';
-    else if (props.isDisabled) rules += ' pp1';
-    else rules += ' pv1';
-    rules += ' plb1';
-    rules += ' ri1';
-    rules += ' z8bmXs1';
-    rules += ' y8bmXs1';
-    rules += ' B8bmXs1';
-    rules += ' A8bmXs1';
+    if (props.isStaticColor) rules += ' pl11';
+    else if (props.isDisabled) rules += ' pp11';
+    else rules += ' pv11';
+    rules += ' plb11';
+    rules += ' ri11';
+    rules += ' z8bmXs11';
+    rules += ' y8bmXs11';
+    rules += ' B8bmXs11';
+    rules += ' A8bmXs11';
     return rules;
 };
 const $83e59061dd392311$var$trackStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' zMY0fn1';
-    rules += ' yMY0fn1';
-    rules += ' BMY0fn1';
-    rules += ' AMY0fn1';
-    if (props.size === "XL") rules += ' Nl1';
-    else if (props.size === "L") rules += ' Nj1';
-    else if (props.size === "S") rules += ' Nf1';
-    else if (props.size === "XS") rules += ' Ne1';
-    else rules += ' Nk1';
-    if (props.isQuiet) rules += ' _qd1';
-    else rules += ' _qtb1';
-    if (props.size === "XL") rules += ' -Anxdcc-Zt1';
-    else if (props.size === "L") rules += ' -Anxdcc-ZStdtne1';
-    else if (props.size === "S") rules += ' -Anxdcc-Zr1';
-    else rules += ' -Anxdcc-Z3fn9H1';
-    rules += ' __v6TNLWb1';
-    rules += ' _Nc1';
-    rules += ' Pc1';
-    rules += ' og1';
-    rules += ' ng1';
-    rules += ' kg1';
-    rules += ' jg1';
-    if (props.isStaticColor) rules += ' gh1';
-    else rules += ' gE1';
-    rules += ' glb1';
-    rules += ' _Ma1';
-    rules += ' _Mlb1';
-    rules += ' _Le1';
-    rules += ' _Llf1';
-    rules += ' Oj1';
-    rules += ' Olb1';
-    rules += ' _9c1';
-    if (props.size === "XL") rules += ' Fj1';
-    else if (props.size === "L") rules += ' Fi1';
-    else if (props.size === "M") rules += ' Fg1';
-    else if (props.size === "S") rules += ' Fe1';
-    else rules += ' Fg1';
+    rules += ' zMY0fn11';
+    rules += ' yMY0fn11';
+    rules += ' BMY0fn11';
+    rules += ' AMY0fn11';
+    if (props.size === "XL") rules += ' Nl11';
+    else if (props.size === "L") rules += ' Nj11';
+    else if (props.size === "S") rules += ' Nf11';
+    else if (props.size === "XS") rules += ' Ne11';
+    else rules += ' Nk11';
+    if (props.isQuiet) rules += ' _qd11';
+    else rules += ' _qtb11';
+    if (props.size === "XL") rules += ' -Anxdcc-Zt11';
+    else if (props.size === "L") rules += ' -Anxdcc-ZStdtne11';
+    else if (props.size === "S") rules += ' -Anxdcc-Zr11';
+    else rules += ' -Anxdcc-Z3fn9H11';
+    rules += ' __v6TNLWb11';
+    rules += ' _Nc11';
+    rules += ' Pc11';
+    rules += ' og11';
+    rules += ' ng11';
+    rules += ' kg11';
+    rules += ' jg11';
+    if (props.isStaticColor) rules += ' gh11';
+    else rules += ' gE11';
+    rules += ' glb11';
+    rules += ' _Ma11';
+    rules += ' _Mlb11';
+    rules += ' _Le11';
+    rules += ' _Llf11';
+    rules += ' Oj11';
+    rules += ' Olb11';
+    rules += ' _9c11';
+    if (props.size === "XL") rules += ' Fj11';
+    else if (props.size === "L") rules += ' Fi11';
+    else if (props.size === "M") rules += ' Fg11';
+    else if (props.size === "S") rules += ' Fe11';
+    else rules += ' Fg11';
     return rules;
 };
 const $83e59061dd392311$var$fill = function anonymous(props) {
     let rules = " ";
-    rules += ' Fb1';
-    rules += ' _je1';
-    rules += ' og1';
-    rules += ' ng1';
-    rules += ' kg1';
-    rules += ' jg1';
-    if (props.isStaticColor) rules += ' gj1';
-    else rules += ' g21';
-    rules += ' glc1';
-    if (props.isIndeterminate) rules += ' Za1';
-    if (props.isIndeterminate) rules += ' _0e1';
+    rules += ' Fb11';
+    rules += ' _je11';
+    rules += ' og11';
+    rules += ' ng11';
+    rules += ' kg11';
+    rules += ' jg11';
+    if (props.isStaticColor) rules += ' gj11';
+    else rules += ' g211';
+    rules += ' glc11';
+    if (props.isIndeterminate) rules += ' Za11';
+    if (props.isIndeterminate) rules += ' _0e11';
     return rules;
 };
 const $83e59061dd392311$var$indeterminateAnimation = function anonymous(props) {
     let rules = " ";
-    if (props.direction === "rtl") rules += ' _g2FRDs1';
-    else if (props.direction === "ltr") rules += ' _gXZ1Q4d1';
-    rules += ' _ea1';
-    rules += ' _hb1';
-    rules += ' __ea1';
-    rules += ' _8d1';
-    rules += ' _Pc1';
+    if (props.direction === "rtl") rules += ' _g2FRDs11';
+    else if (props.direction === "ltr") rules += ' _gXZ1Q4d11';
+    rules += ' _ea11';
+    rules += ' _hb11';
+    rules += ' __ea11';
+    rules += ' _8d11';
+    rules += ' _Pc11';
     return rules;
 };
 const $83e59061dd392311$export$c17561cb55d4db30 = /*#__PURE__*/ (0, $gIpiX$react.forwardRef)(function ProgressBar(props, ref) {

package/dist/ProgressBar.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+CM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAEtH,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;;;AAkBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,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;IAC1B,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;yBAAe;QAAW,GAAG,MAAM,MAAM;kBAC/F,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;2CAAO;wBAAa;kCAAK;;kCACvG,gCAAC;wBAAI,WAAW,kCAAY;2CAAC;kCAAe;wBAAI;kCAC9C,cAAA,gCAAC;4BACC,WAAW,CAAA,GAAA,qCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;+CAAE;4BAAa,IAAK,kBAAkB,6CAAuB;2CAAC;4BAAS,KAAK;4BACjH,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E","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, 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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+CM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAEtH,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;;;AAkBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,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;IAC1B,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;yBAAe;QAAW,GAAG,MAAM,MAAM;kBAC/F,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;2CAAO;wBAAa;kCAAK;;kCACvG,gCAAC;wBAAI,WAAW,kCAAY;2CAAC;kCAAe;wBAAI;kCAC9C,cAAA,gCAAC;4BACC,WAAW,CAAA,GAAA,qCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;+CAAE;4BAAa,IAAK,kBAAkB,6CAAuB;2CAAC;4BAAS,KAAK;4BACjH,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E","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, 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.cjs.map"}