@fluentui/react-progress 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/lib/components/ProgressBar/useProgressBarStyles.styles.js

@@ -1,7 +1,7 @@
 'use client';
 
-import { __styles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
 export const progressBarClassNames = {
   root: 'fui-ProgressBar',
   bar: 'fui-ProgressBar__bar'
@@ -13,25 +13,6 @@ const barThicknessValues = {
   medium: '2px',
   large: '4px'
 };
-const indeterminateProgressBar = {
-  '0%': {
-    left: '-33%'
-  },
-  '100%': {
-    left: '100%'
-  }
-};
-const indeterminateProgressBarReducedMotion = {
-  '0%': {
-    opacity: '.2'
-  },
-  '50%': {
-    opacity: '1'
-  },
-  '100%': {
-    opacity: '.2'
-  }
-};
 /**
  * Styles for the root slot
  */
@@ -99,14 +80,7 @@ const useBarStyles = /*#__PURE__*/__styles({
     B2u0y6b: "fa0wk36",
     qhf8xq: "f10pi13n",
     Bcmaq0h: ["fpo0yib", "f1u5hf6c"],
-    Bv12yb3: ["fwd2bol", "f14gig94"],
-    vin17d: "f1a27w2r",
-    Ezkn3b: "f452v7t",
-    w3vfg9: "f1cpbl36",
-    jpy9cc: "f3z2g5w",
-    Bqo2lbl: "fz5izi4",
-    B6plc1d: "fv40pdu",
-    I82g5a: "f1uj6jbf"
+    jpy9cc: "f3z2g5w"
   },
   brand: {
     De3pzq: "ftywsgz"
@@ -125,24 +99,15 @@ const useBarStyles = /*#__PURE__*/__styles({
     m: "screen and (forced-colors: active)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.f3z2g5w{max-width:100%;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.fz5izi4{animation-iteration-count:infinite;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.fv40pdu{animation-duration:3s;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.f1uj6jbf{animation-name:ftc26vs;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
   }]],
   d: [[".f12b9xdw{border-radius:inherit;}", {
     p: -1
-  }], ".f1l02sjl{height:100%;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1u5hf6c{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".fwd2bol{animation-name:f1keuaan;}", ".f14gig94{animation-name:f10x8f8u;}", ".f1a27w2r{animation-duration:3s;}", ".f452v7t{animation-timing-function:linear;}", ".f1cpbl36{animation-iteration-count:infinite;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
-  k: ["@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}", "@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}", "@keyframes ftc26vs{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}"]
+  }], ".f1l02sjl{height:100%;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1u5hf6c{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"]
 });
 /**
  * Apply styling to the ProgressBar slots based on the state
  */
 export const useProgressBarStyles_unstable = state => {
-  'use no memo';
-
   const {
     color,
     max,
@@ -152,11 +117,14 @@ export const useProgressBarStyles_unstable = state => {
   } = state;
   const rootStyles = useRootStyles();
   const barStyles = useBarStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
   if (state.bar) {
+    // eslint-disable-next-line react-hooks/immutability
     state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
   }
   if (state.bar && value !== undefined) {
+    // eslint-disable-next-line react-hooks/immutability
     state.bar.style = {
       width: Math.min(100, Math.max(0, value / max * 100)) + '%',
       ...state.bar.style

package/lib/components/ProgressBar/useProgressBarStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","Ezkn3b","w3vfg9","jpy9cc","Bqo2lbl","B6plc1d","I82g5a","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n    root: 'fui-ProgressBar',\n    bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n    medium: '2px',\n    large: '4px'\n};\nconst indeterminateProgressBar = {\n    '0%': {\n        left: '-33%'\n    },\n    '100%': {\n        left: '100%'\n    }\n};\nconst indeterminateProgressBarReducedMotion = {\n    '0%': {\n        opacity: '.2'\n    },\n    '50%': {\n        opacity: '1'\n    },\n    '100%': {\n        opacity: '.2'\n    }\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'block',\n        backgroundColor: tokens.colorNeutralBackground6,\n        width: '100%',\n        overflow: 'hidden',\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    medium: {\n        height: barThicknessValues.medium\n    },\n    large: {\n        height: barThicknessValues.large\n    }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n    base: {\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'Highlight'\n        },\n        borderRadius: 'inherit',\n        height: '100%'\n    },\n    nonZeroDeterminate: {\n        transitionProperty: 'width',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease'\n    },\n    indeterminate: {\n        maxWidth: '33%',\n        position: 'relative',\n        backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n        animationName: indeterminateProgressBar,\n        animationDuration: '3s',\n        animationTimingFunction: 'linear',\n        animationIterationCount: 'infinite',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            maxWidth: '100%',\n            animationIterationCount: 'infinite',\n            animationDuration: '3s',\n            animationName: indeterminateProgressBarReducedMotion\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorCompoundBrandBackground\n    },\n    error: {\n        backgroundColor: tokens.colorPaletteRedBackground3\n    },\n    warning: {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n    },\n    success: {\n        backgroundColor: tokens.colorPaletteGreenBackground3\n    }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n    'use no memo';\n    const { color, max, shape, thickness, value } = state;\n    const rootStyles = useRootStyles();\n    const barStyles = useBarStyles();\n    state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n    if (state.bar) {\n        state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n    }\n    if (state.bar && value !== undefined) {\n        state.bar.style = {\n            width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n            ...state.bar.style\n        };\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bomf52o","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","jpy9cc","brand","error","warning","success","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const progressBarClassNames = {\n    root: 'fui-ProgressBar',\n    bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n    medium: '2px',\n    large: '4px'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'block',\n        backgroundColor: tokens.colorNeutralBackground6,\n        width: '100%',\n        overflow: 'hidden',\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    medium: {\n        height: barThicknessValues.medium\n    },\n    large: {\n        height: barThicknessValues.large\n    }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n    base: {\n        '@media screen and (forced-colors: active)': {\n            backgroundColor: 'Highlight'\n        },\n        borderRadius: 'inherit',\n        height: '100%'\n    },\n    nonZeroDeterminate: {\n        transitionProperty: 'width',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease'\n    },\n    indeterminate: {\n        maxWidth: '33%',\n        position: 'relative',\n        backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n            maxWidth: '100%'\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorCompoundBrandBackground\n    },\n    error: {\n        backgroundColor: tokens.colorPaletteRedBackground3\n    },\n    warning: {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n    },\n    success: {\n        backgroundColor: tokens.colorPaletteGreenBackground3\n    }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n    const { color, max, shape, thickness, value } = state;\n    const rootStyles = useRootStyles();\n    const barStyles = useBarStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n    if (state.bar) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n    }\n    if (state.bar && value !== undefined) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.bar.style = {\n            width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n            ...state.bar.style\n        };\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js

@@ -1,6 +1,6 @@
 'use client';
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
 export const progressBarClassNames = {
     root: 'fui-ProgressBar',
     bar: 'fui-ProgressBar__bar'
@@ -12,25 +12,6 @@ const barThicknessValues = {
     medium: '2px',
     large: '4px'
 };
-const indeterminateProgressBar = {
-    '0%': {
-        left: '-33%'
-    },
-    '100%': {
-        left: '100%'
-    }
-};
-const indeterminateProgressBarReducedMotion = {
-    '0%': {
-        opacity: '.2'
-    },
-    '50%': {
-        opacity: '1'
-    },
-    '100%': {
-        opacity: '.2'
-    }
-};
 /**
  * Styles for the root slot
  */ const useRootStyles = makeStyles({
@@ -80,15 +61,9 @@ const indeterminateProgressBarReducedMotion = {
       ${tokens.colorTransparentBackground} 50%,
       ${tokens.colorNeutralBackground6} 100%
     )`,
-        animationName: indeterminateProgressBar,
-        animationDuration: '3s',
-        animationTimingFunction: 'linear',
-        animationIterationCount: 'infinite',
         '@media screen and (prefers-reduced-motion: reduce)': {
-            maxWidth: '100%',
-            animationIterationCount: 'infinite',
-            animationDuration: '3s',
-            animationName: indeterminateProgressBarReducedMotion
+            // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion
+            maxWidth: '100%'
         }
     },
     brand: {
@@ -107,15 +82,17 @@ const indeterminateProgressBarReducedMotion = {
 /**
  * Apply styling to the ProgressBar slots based on the state
  */ export const useProgressBarStyles_unstable = (state)=>{
-    'use no memo';
     const { color, max, shape, thickness, value } = state;
     const rootStyles = useRootStyles();
     const barStyles = useBarStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
     if (state.bar) {
+        // eslint-disable-next-line react-hooks/immutability
         state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
     }
     if (state.bar && value !== undefined) {
+        // eslint-disable-next-line react-hooks/immutability
         state.bar.style = {
             width: Math.min(100, Math.max(0, value / max * 100)) + '%',
             ...state.bar.style

package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\nconst indeterminateProgressBar = {\n  '0%': {\n    left: '-33%', // matches indeterminate bar width\n  },\n  '100%': {\n    left: '100%',\n  },\n};\n\nconst indeterminateProgressBarReducedMotion = {\n  '0%': {\n    opacity: '.2',\n  },\n  '50%': {\n    opacity: '1',\n  },\n  '100%': {\n    opacity: '.2',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    overflow: 'hidden',\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    borderRadius: 'inherit',\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    animationName: indeterminateProgressBar,\n    animationDuration: '3s',\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      maxWidth: '100%',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationName: indeterminateProgressBarReducedMotion,\n    },\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  'use no memo';\n\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","animationName","animationDuration","animationTimingFunction","animationIterationCount","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    overflow: 'hidden',\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    borderRadius: 'inherit',\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      // Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion\n      maxWidth: '100%',\n    },\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,wBAAuF;IAClGC,MAAM;IACNC,KAAK;AACP,EAAE;AAEF,sDAAsD;AACtD,oDAAoD;AACpD,MAAMC,iBAAiB;AAEvB,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;AACT;AAEA;;CAEC,GACD,MAAMC,gBAAgBV,WAAW;IAC/BI,MAAM;QACJO,SAAS;QACTC,iBAAiBV,OAAOW,uBAAuB;QAC/CC,OAAO;QACPC,UAAU;QAEV,6CAA6C;YAC3CH,iBAAiB;QACnB;IACF;IACAI,SAAS;QACPC,cAAcf,OAAOgB,kBAAkB;IACzC;IACAC,QAAQ;QACNF,cAAcf,OAAOkB,gBAAgB;IACvC;IACAZ,QAAQ;QACNa,QAAQd,mBAAmBC,MAAM;IACnC;IACAC,OAAO;QACLY,QAAQd,mBAAmBE,KAAK;IAClC;AACF;AAEA;;CAEC,GACD,MAAMa,eAAetB,WAAW;IAC9BuB,MAAM;QACJ,6CAA6C;YAC3CX,iBAAiB;QACnB;QACAK,cAAc;QACdI,QAAQ;IACV;IACAG,oBAAoB;QAClBC,oBAAoB;QACpBC,oBAAoB;QACpBC,0BAA0B;IAC5B;IACAC,eAAe;QACbC,UAAU;QACVC,UAAU;QACVC,iBAAiB,CAAC;;MAEhB,EAAE7B,OAAOW,uBAAuB,CAAC;MACjC,EAAEX,OAAO8B,0BAA0B,CAAC;MACpC,EAAE9B,OAAOW,uBAAuB,CAAC;KAClC,CAAC;QACF,sDAAsD;YACpD,iGAAiG;YACjGgB,UAAU;QACZ;IACF;IAEAI,OAAO;QACLrB,iBAAiBV,OAAOgC,4BAA4B;IACtD;IAEAC,OAAO;QACLvB,iBAAiBV,OAAOkC,0BAA0B;IACpD;IACAC,SAAS;QACPzB,iBAAiBV,OAAOoC,iCAAiC;IAC3D;IACAC,SAAS;QACP3B,iBAAiBV,OAAOsC,4BAA4B;IACtD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,KAAK,EAAEC,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGL;IAChD,MAAMM,aAAatC;IACnB,MAAMuC,YAAY3B;IAElB,oDAAoD;IACpDoB,MAAMtC,IAAI,CAAC8C,SAAS,GAAGjD,aACrBE,sBAAsBC,IAAI,EAC1B4C,WAAW5C,IAAI,EACf4C,UAAU,CAACH,MAAM,EACjBG,UAAU,CAACF,UAAU,EACrBJ,MAAMtC,IAAI,CAAC8C,SAAS;IAGtB,IAAIR,MAAMrC,GAAG,EAAE;QACb,oDAAoD;QACpDqC,MAAMrC,GAAG,CAAC6C,SAAS,GAAGjD,aACpBE,sBAAsBE,GAAG,EACzB4C,UAAU1B,IAAI,EACd0B,UAAUhB,KAAK,EACfc,UAAUI,aAAaF,UAAUrB,aAAa,EAC9CmB,UAAUI,aAAaJ,QAAQzC,kBAAkB2C,UAAUzB,kBAAkB,EAC7EmB,SAASI,UAAUI,aAAaF,SAAS,CAACN,MAAM,EAChDD,MAAMrC,GAAG,CAAC6C,SAAS;IAEvB;IAEA,IAAIR,MAAMrC,GAAG,IAAI0C,UAAUI,WAAW;QACpC,oDAAoD;QACpDT,MAAMrC,GAAG,CAAC+C,KAAK,GAAG;YAChBtC,OAAOuC,KAAKC,GAAG,CAAC,KAAKD,KAAKT,GAAG,CAAC,GAAG,AAACG,QAAQH,MAAO,QAAQ;YACzD,GAAGF,MAAMrC,GAAG,CAAC+C,KAAK;QACpB;IACF;IAEA,OAAOV;AACT,EAAE"}

package/lib/index.js

@@ -1 +1 @@
-export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBar_unstable, useProgressBarStyles_unstable } from './ProgressBar';
+export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBar_unstable, useProgressBarStyles_unstable, useProgressBarBase_unstable } from "./ProgressBar.js";

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBar_unstable,\n  useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable"],"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,6BAA6B,QACxB,gBAAgB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBar_unstable,\n  useProgressBarStyles_unstable,\n  useProgressBarBase_unstable,\n} from './ProgressBar';\nexport type {\n  ProgressBarProps,\n  ProgressBarSlots,\n  ProgressBarState,\n  ProgressBarBaseProps,\n  ProgressBarBaseState,\n} from './ProgressBar';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable","useProgressBarBase_unstable"],"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,6BAA6B,EAC7BC,2BAA2B,QACtB,mBAAgB"}

package/lib/utils/index.js

@@ -1,2 +1,2 @@
-export { clampMax } from './clampMax';
-export { clampValue } from './clampValue';
+export { clampMax } from "./clampMax.js";
+export { clampValue } from "./clampValue.js";

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { clampMax } from './clampMax';\nexport { clampValue } from './clampValue';\n"],"names":["clampMax","clampValue"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AACtC,SAASC,UAAU,QAAQ,eAAe"}
+{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { clampMax } from './clampMax';\nexport { clampValue } from './clampValue';\n"],"names":["clampMax","clampValue"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAa;AACtC,SAASC,UAAU,QAAQ,kBAAe"}

package/lib-commonjs/{ProgressBar.js → ProgressBar.cjs}

@@ -18,6 +18,9 @@ _export(exports, {
     renderProgressBar_unstable: function() {
         return _index.renderProgressBar_unstable;
     },
+    useProgressBarBase_unstable: function() {
+        return _index.useProgressBarBase_unstable;
+    },
     useProgressBarStyles_unstable: function() {
         return _index.useProgressBarStyles_unstable;
     },
@@ -25,4 +28,4 @@ _export(exports, {
         return _index.useProgressBar_unstable;
     }
 });
-const _index = require("./components/ProgressBar/index");
+const _index = require("./components/ProgressBar/index.cjs");

package/lib-commonjs/ProgressBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ProgressBar.ts"],"sourcesContent":["export type {\n  ProgressBarProps,\n  ProgressBarBaseProps,\n  ProgressBarSlots,\n  ProgressBarState,\n  ProgressBarBaseState,\n} from './components/ProgressBar/index';\nexport {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBarStyles_unstable,\n  useProgressBar_unstable,\n  useProgressBarBase_unstable,\n} from './components/ProgressBar/index';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBarStyles_unstable","useProgressBar_unstable","useProgressBarBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAG1BG,kCAA2B;;;eAF3BF,oCAA6B;;;eAC7BC,8BAAuB;;;uBAElB,oCAAiC"}

package/lib-commonjs/components/ProgressBar/{ProgressBar.js → ProgressBar.cjs}

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "ProgressBar", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useProgressBar = require("./useProgressBar");
-const _renderProgressBar = require("./renderProgressBar");
-const _useProgressBarStylesstyles = require("./useProgressBarStyles.styles");
+const _useProgressBar = require("./useProgressBar.cjs");
+const _renderProgressBar = require("./renderProgressBar.cjs");
+const _useProgressBarStylesstyles = require("./useProgressBarStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const ProgressBar = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useProgressBar.useProgressBar_unstable)(props, ref);

package/lib-commonjs/components/ProgressBar/{ProgressBar.js.map → ProgressBar.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles.styles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n  const state = useProgressBar_unstable(props, ref);\n\n  useProgressBarStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useProgressBarStyles_unstable')(state);\n\n  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":["React","useProgressBar_unstable","renderProgressBar_unstable","useProgressBarStyles_unstable","useCustomStyleHook_unstable","ProgressBar","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAGlC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles.styles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n  const state = useProgressBar_unstable(props, ref);\n\n  useProgressBarStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useProgressBarStyles_unstable')(state);\n\n  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":["React","useProgressBar_unstable","renderProgressBar_unstable","useProgressBarStyles_unstable","useCustomStyleHook_unstable","ProgressBar","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;qCAGlC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib-commonjs/components/ProgressBar/{ProgressBar.types.js → ProgressBar.types.cjs}

@@ -1,5 +1,5 @@
 /**
- * State used in rendering ProgressBar
+ * ProgressBar base state — excludes design props (shape, thickness, color).
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/ProgressBar/ProgressBar.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { MotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n  /**\n   * Motion slot for the indeterminate animation. Pass `null` to disable the animation.\n   */\n  indeterminateMotion?: Slot<MotionSlotProps>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\n  /**\n   * A decimal number between `0` and `1` (or between `0` and `max` if given),\n   * which specifies how much of the task has been completed.\n   *\n   * If `undefined` (default), the ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * ProgressBar base props — excludes design props (shape, thickness, color).\n */\nexport type ProgressBarBaseProps = Omit<ProgressBarProps, 'shape' | 'thickness' | 'color' | 'indeterminateMotion'>;\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<Required<ProgressBarSlots>> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n\n/**\n * ProgressBar base state — excludes design props (shape, thickness, color).\n */\nexport type ProgressBarBaseState = Omit<ProgressBarState, 'shape' | 'thickness' | 'color' | 'indeterminateMotion'>;\n"],"names":[],"mappings":"AAiEA;;CAEC,GACD,WAAmH"}

package/lib-commonjs/components/ProgressBar/{index.js → index.cjs}

@@ -18,6 +18,9 @@ _export(exports, {
     renderProgressBar_unstable: function() {
         return _renderProgressBar.renderProgressBar_unstable;
     },
+    useProgressBarBase_unstable: function() {
+        return _useProgressBar.useProgressBarBase_unstable;
+    },
     useProgressBarStyles_unstable: function() {
         return _useProgressBarStylesstyles.useProgressBarStyles_unstable;
     },
@@ -25,7 +28,7 @@ _export(exports, {
         return _useProgressBar.useProgressBar_unstable;
     }
 });
-const _ProgressBar = require("./ProgressBar");
-const _renderProgressBar = require("./renderProgressBar");
-const _useProgressBar = require("./useProgressBar");
-const _useProgressBarStylesstyles = require("./useProgressBarStyles.styles");
+const _ProgressBar = require("./ProgressBar.cjs");
+const _renderProgressBar = require("./renderProgressBar.cjs");
+const _useProgressBar = require("./useProgressBar.cjs");
+const _useProgressBarStylesstyles = require("./useProgressBarStyles.styles.cjs");

package/lib-commonjs/components/ProgressBar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ProgressBar/index.ts"],"sourcesContent":["export { ProgressBar } from './ProgressBar';\nexport type {\n  ProgressBarProps,\n  ProgressBarBaseProps,\n  ProgressBarSlots,\n  ProgressBarState,\n  ProgressBarBaseState,\n} from './ProgressBar.types';\nexport { renderProgressBar_unstable } from './renderProgressBar';\nexport { useProgressBar_unstable, useProgressBarBase_unstable } from './useProgressBar';\nexport { progressBarClassNames, useProgressBarStyles_unstable } from './useProgressBarStyles.styles';\n"],"names":["ProgressBar","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarBase_unstable","progressBarClassNames","useProgressBarStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAUXI,iDAAqB;;;eAFrBH,6CAA0B;;;eACDE,2CAA2B;;;eAC7BE,yDAA6B;;;eADpDH,uCAAuB;;;6BATJ,mBAAgB;mCAQD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC"}

package/lib-commonjs/components/ProgressBar/progressBarMotions.cjs

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ProgressBarIndeterminateMotion", {
+    enumerable: true,
+    get: function() {
+        return ProgressBarIndeterminateMotion;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const ProgressBarIndeterminateMotion = (0, _reactmotion.createMotionComponent)({
+    // translate percentages are relative to the element's own width, not the container's.
+    // The indeterminate bar is ~33% the width of its container, so:
+    //   translate: '-100%' === left: '-33%' (one bar-width off-screen to the left)
+    //   translate: '300%'  === left: '100%' (3 × bar-width ≈ full container width, off-screen to the right)
+    keyframes: [
+        {
+            translate: '-100%'
+        },
+        {
+            translate: '300%'
+        }
+    ],
+    duration: 3000,
+    iterations: Infinity,
+    easing: _reactmotion.motionTokens.curveLinear,
+    reducedMotion: {
+        keyframes: [
+            {
+                opacity: 0.2
+            },
+            {
+                opacity: 1
+            },
+            {
+                opacity: 0.2
+            }
+        ],
+        duration: 3000,
+        iterations: Infinity
+    }
+});

package/lib-commonjs/components/ProgressBar/progressBarMotions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ProgressBar/progressBarMotions.ts"],"sourcesContent":["import { createMotionComponent, motionTokens } from '@fluentui/react-motion';\n\n/**\n * Motion component for the indeterminate ProgressBar bar:\n * a horizontal sliding animation that loops indefinitely.\n * In reduced motion mode, the bar pulses opacity instead of sliding.\n */\nexport const ProgressBarIndeterminateMotion = createMotionComponent({\n  // translate percentages are relative to the element's own width, not the container's.\n  // The indeterminate bar is ~33% the width of its container, so:\n  //   translate: '-100%' === left: '-33%' (one bar-width off-screen to the left)\n  //   translate: '300%'  === left: '100%' (3 × bar-width ≈ full container width, off-screen to the right)\n  keyframes: [{ translate: '-100%' }, { translate: '300%' }],\n  duration: 3000,\n  iterations: Infinity,\n  easing: motionTokens.curveLinear,\n\n  reducedMotion: {\n    keyframes: [{ opacity: 0.2 }, { opacity: 1 }, { opacity: 0.2 }],\n    duration: 3000,\n    iterations: Infinity,\n  },\n});\n"],"names":["createMotionComponent","motionTokens","ProgressBarIndeterminateMotion","keyframes","translate","duration","iterations","Infinity","easing","curveLinear","reducedMotion","opacity"],"mappings":";;;;+BAOaE;;;;;;6BAPuC,yBAAyB;AAOtE,2CAAuCF,kCAAAA,EAAsB;IAClE,sFAAsF;IACtF,gEAAgE;IAChE,+EAA+E;IAC/E,wGAAwG;IACxGG,WAAW;QAAC;YAAEC,WAAW;QAAQ;QAAG;YAAEA,WAAW;QAAO;KAAE;IAC1DC,UAAU;IACVC,YAAYC;IACZC,QAAQP,yBAAAA,CAAaQ,WAAW;IAEhCC,eAAe;QACbP,WAAW;YAAC;gBAAEQ,SAAS;YAAI;YAAG;gBAAEA,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAI;SAAE;QAC/DN,UAAU;QACVC,YAAYC;IACd;AACF,GAAG"}

package/lib-commonjs/components/ProgressBar/{renderProgressBar.js → renderProgressBar.cjs}

@@ -13,6 +13,8 @@ const _reactutilities = require("@fluentui/react-utilities");
 const renderProgressBar_unstable = (state)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
-        children: state.bar && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bar, {})
+        children: state.bar && (state.indeterminateMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.indeterminateMotion, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bar, {})
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bar, {}))
     });
 };

package/lib-commonjs/components/ProgressBar/renderProgressBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ProgressBarBaseState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarBaseState): JSXElement => {\n  assertSlots<ProgressBarSlots>(state);\n  return (\n    <state.root>\n      {state.bar &&\n        (state.indeterminateMotion ? (\n          <state.indeterminateMotion>\n            <state.bar />\n          </state.indeterminateMotion>\n        ) : (\n          <state.bar />\n        ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderProgressBar_unstable","state","root","bar","indeterminateMotion"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAC9B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBACRD,MAAME,GAAG,IACPF,CAAAA,MAAMG,mBAAmB,GAAA,WAAA,OACxB,eAAA,EAACH,MAAMG,mBAAmB,EAAA;sBACxB,WAAA,OAAA,eAAA,EAACH,MAAME,GAAG,EAAA,CAAA;+BAGZ,eAAA,EAACF,MAAME,GAAG,EAAA,CAAA,EAAA,CACZ;;AAGR,EAAE"}

package/lib-commonjs/components/ProgressBar/{useProgressBar.js → useProgressBar.cjs}

@@ -3,21 +3,48 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useProgressBar_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useProgressBarBase_unstable: function() {
+        return useProgressBarBase_unstable;
+    },
+    useProgressBar_unstable: function() {
         return useProgressBar_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactfield = require("@fluentui/react-field");
+const _reactmotion = require("@fluentui/react-motion");
 const _reactutilities = require("@fluentui/react-utilities");
-const _index = require("../../utils/index");
+const _index = require("../../utils/index.cjs");
+const _progressBarMotions = require("./progressBarMotions.cjs");
 const useProgressBar_unstable = (props, ref)=>{
     const field = (0, _reactfield.useFieldContext_unstable)();
     const fieldState = field === null || field === void 0 ? void 0 : field.validationState;
-    const { color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand', shape = 'rounded', thickness = 'medium' } = props;
+    const { color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand', shape = 'rounded', thickness = 'medium', indeterminateMotion, ...baseProps } = props;
+    const state = useProgressBarBase_unstable(baseProps, ref);
+    return {
+        ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            indeterminateMotion: _progressBarMotions.ProgressBarIndeterminateMotion
+        },
+        color,
+        shape,
+        thickness,
+        indeterminateMotion: state.value === undefined ? (0, _reactmotion.motionSlot)(indeterminateMotion, {
+            elementType: _progressBarMotions.ProgressBarIndeterminateMotion,
+            defaultProps: {}
+        }) : undefined
+    };
+};
+const useProgressBarBase_unstable = (props, ref)=>{
+    const field = (0, _reactfield.useFieldContext_unstable)();
     var _props_max;
     const max = (0, _index.clampMax)((_props_max = props.max) !== null && _props_max !== void 0 ? _props_max : 1);
     const value = (0, _index.clampValue)(props.value, max);
@@ -46,18 +73,15 @@ const useProgressBar_unstable = (props, ref)=>{
     const bar = _reactutilities.slot.always(props.bar, {
         elementType: 'div'
     });
-    const state = {
-        color,
+    return {
         max,
-        shape,
-        thickness,
         value,
         components: {
             root: 'div',
-            bar: 'div'
+            bar: 'div',
+            indeterminateMotion: 'div'
         },
         root,
         bar
     };
-    return state;
 };

package/lib-commonjs/components/ProgressBar/useProgressBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { motionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type {\n  ProgressBarProps,\n  ProgressBarState,\n  ProgressBarBaseProps,\n  ProgressBarBaseState,\n} from './ProgressBar.types';\nimport { ProgressBarIndeterminateMotion } from './progressBarMotions';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  const field = useFieldContext_unstable();\n  const fieldState = field?.validationState;\n\n  const {\n    color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand',\n    shape = 'rounded',\n    thickness = 'medium',\n    indeterminateMotion,\n    ...baseProps\n  } = props;\n\n  const state = useProgressBarBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      indeterminateMotion: ProgressBarIndeterminateMotion,\n    },\n    color,\n    shape,\n    thickness,\n    indeterminateMotion:\n      state.value === undefined\n        ? motionSlot(indeterminateMotion, {\n            elementType: ProgressBarIndeterminateMotion,\n            defaultProps: {},\n          })\n        : undefined,\n  };\n};\n\n/**\n * Base hook for ProgressBar component. Manages state related to ARIA progressbar attributes\n * (role, aria-valuemin, aria-valuemax, aria-valuenow) and field context integration —\n * without design props (shape, thickness, color).\n *\n * @param props - props from this instance of ProgressBar (without shape, thickness, color)\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBarBase_unstable = (\n  props: ProgressBarBaseProps,\n  ref: React.Ref<HTMLElement>,\n): ProgressBarBaseState => {\n  const field = useFieldContext_unstable();\n\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role: 'progressbar',\n      'aria-valuemin': value !== undefined ? 0 : undefined,\n      'aria-valuemax': value !== undefined ? max : undefined,\n      'aria-valuenow': value,\n      'aria-labelledby': field?.labelId,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  if (field && (field.validationMessageId || field.hintId)) {\n    // Prepend the field's validation message and/or hint to the user's aria-describedby\n    root['aria-describedby'] = [field?.validationMessageId, field?.hintId, root['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n  const bar = slot.always(props.bar, { elementType: 'div' });\n\n  return {\n    max,\n    value,\n    components: { root: 'div', bar: 'div', indeterminateMotion: 'div' },\n    root,\n    bar,\n  };\n};\n"],"names":["useFieldContext_unstable","motionSlot","getIntrinsicElementProps","slot","clampValue","clampMax","ProgressBarIndeterminateMotion","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","indeterminateMotion","baseProps","state","useProgressBarBase_unstable","components","value","undefined","elementType","defaultProps","max","root","always","role","labelId","validationMessageId","hintId","filter","Boolean","join","bar"],"mappings":"AAAA;;;;;;;;;;;;+BAkEamB;eAAAA;;IA1CAZ,uBAAAA;;;;4BArB4B,wBAAwB;6BACtC,yBAAyB;gCACL,4BAA4B;uBACtC,uBAAoB;oCAOV,0BAAuB;AAW/D,gCAAgC,CAACC,OAAyBC;IAC/D,MAAMC,YAAQV,oCAAAA;IACd,MAAMW,aAAaD,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOE,eAAe;IAEzC,MAAM,EACJC,QAAQF,eAAe,WAAWA,eAAe,aAAaA,eAAe,YAAYA,aAAa,OAAO,EAC7GG,QAAQ,SAAS,EACjBC,YAAY,QAAQ,EACpBC,mBAAmB,EACnB,GAAGC,WACJ,GAAGT;IAEJ,MAAMU,QAAQC,4BAA4BF,WAAWR;IAErD,OAAO;QACL,GAAGS,KAAK;QACRE,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBJ,qBAAqBV,kDAAAA;QACvB;QACAO;QACAC;QACAC;QACAC,qBACEE,MAAMG,KAAK,KAAKC,gBACZrB,uBAAAA,EAAWe,qBAAqB;YAC9BO,aAAajB,kDAAAA;YACbkB,cAAc,CAAC;QACjB,KACAF;IACR;AACF,EAAE;AAUK,oCAAoC,CACzCd,OACAC;IAEA,MAAMC,YAAQV,oCAAAA;QAEOQ;IAArB,MAAMiB,UAAMpB,eAAAA,EAASG,cAAAA,MAAMiB,GAAAA,AAAG,MAAA,QAATjB,eAAAA,KAAAA,IAAAA,aAAa;IAClC,MAAMa,YAAQjB,iBAAAA,EAAWI,MAAMa,KAAK,EAAEI;IAEtC,MAAMC,OAAOvB,oBAAAA,CAAKwB,MAAM,KACtBzB,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FO,KAAKA;QACLmB,MAAM;QACN,iBAAiBP,UAAUC,YAAY,IAAIA;QAC3C,iBAAiBD,UAAUC,YAAYG,MAAMH;QAC7C,iBAAiBD;QACjB,iBAAiB,EAAEX,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOmB,OAAO;QACjC,GAAGrB,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,IAAIb,SAAUA,CAAAA,MAAMoB,mBAAmB,IAAIpB,MAAMqB,MAAAA,AAAK,GAAI;QACxD,oFAAoF;QACpFL,IAAI,CAAC,mBAAmB,GAAG;YAAChB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOoB,mBAAmB;YAAEpB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOqB,MAAM;YAAEL,IAAI,CAAC,mBAAmB;SAAC,CAC7FM,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAMhC,oBAAAA,CAAKwB,MAAM,CAACnB,MAAM2B,GAAG,EAAE;QAAEZ,aAAa;IAAM;IAExD,OAAO;QACLE;QACAJ;QACAD,YAAY;YAAEM,MAAM;YAAOS,KAAK;YAAOnB,qBAAqB;QAAM;QAClEU;QACAS;IACF;AACF,EAAE"}