@fluentui/react-progress 9.0.0-alpha.1 → 9.0.0-alpha.10

package/dist/index.d.ts

@@ -1,76 +1,96 @@
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import { FieldControl } from '@fluentui/react-field';
+import type { FieldProps } from '@fluentui/react-field';
+import { FieldSlots } from '@fluentui/react-field';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import type { SlotClassNames } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * A progress bar shows the progression of a task.
+ * A ProgressBar bar shows the progression of a task.
  */
-export declare const Progress: ForwardRefComponent<ProgressProps>;
+export declare const ProgressBar: ForwardRefComponent<ProgressBarProps>;
 
-export declare const progressClassNames: SlotClassNames<ProgressSlots>;
+export declare const progressBarClassNames: SlotClassNames<ProgressBarSlots>;
 
 /**
- * Progress Props
+ * ProgressBar Props
  */
-export declare type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {
+export declare type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {
+    /**
+     * The shape of the bar and track.
+     * @default 'rounded'
+     */
+    shape?: 'rounded' | 'rectangular';
     /**
      * A decimal number between `0` and `1` (or between `0` and `max` if given),
      * which specifies how much of the task has been completed.
      *
-     * If `undefined` (default), the Progress will display an **indeterminate** state.
+     * If `undefined` (default), the ProgressBar will display an **indeterminate** state.
      */
     value?: number;
     /**
      * The maximum value, which indicates the task is complete.
-     * The progress bar will be full when `value` equals `max`.
+     * The ProgressBar bar will be full when `value` equals `max`.
      * @default 1
      */
     max?: number;
     /**
-     * The thickness of the Progress bar
+     * The thickness of the ProgressBar bar
      * @default 'medium'
      */
     thickness?: 'medium' | 'large';
+    /**
+     * The status of the ProgressBar bar. Changes the color of the bar.
+     */
+    validationState?: 'success' | 'warning' | 'error';
 };
 
-export declare type ProgressSlots = {
+export declare type ProgressBarSlots = {
     /**
-     * The track behind the progress bar
+     * The track behind the ProgressBar bar
      */
     root: NonNullable<Slot<'div'>>;
     /**
-     * The filled portion of the progress bar. Animated in the indeterminate state, when no value is provided.
+     * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.
      */
     bar?: NonNullable<Slot<'div'>>;
 };
 
 /**
- * State used in rendering Progress
+ * State used in rendering ProgressBar
  */
-export declare type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'thickness'>> & Pick<ProgressProps, 'value'>;
+export declare type ProgressBarState = ComponentState<ProgressBarSlots> & Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressBarProps, 'value' | 'validationState'>;
+
+export declare const ProgressField_unstable: ForwardRefComponent<ProgressFieldProps_unstable>;
+
+export declare const progressFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
+
+export declare type ProgressFieldProps_unstable = FieldProps<typeof ProgressBar>;
 
 /**
- * Render the final JSX of Progress
+ * Render the final JSX of ProgressBar
  */
-export declare const renderProgress_unstable: (state: ProgressState) => JSX.Element;
+export declare const renderProgressBar_unstable: (state: ProgressBarState) => JSX.Element;
 
 /**
- * Create the state required to render Progress.
+ * Create the state required to render ProgressBar.
  *
- * The returned state can be modified with hooks such as useProgressStyles_unstable,
- * before being passed to renderProgress_unstable.
+ * The returned state can be modified with hooks such as useProgressBarStyles_unstable,
+ * before being passed to renderProgressBar_unstable.
  *
- * @param props - props from this instance of Progress
- * @param ref - reference to root HTMLElement of Progress
+ * @param props - props from this instance of ProgressBar
+ * @param ref - reference to root HTMLElement of ProgressBar
  */
-export declare const useProgress_unstable: (props: ProgressProps, ref: React_2.Ref<HTMLElement>) => ProgressState;
+export declare const useProgressBar_unstable: (props: ProgressBarProps, ref: React_2.Ref<HTMLElement>) => ProgressBarState;
 
 /**
- * Apply styling to the Progress slots based on the state
+ * Apply styling to the ProgressBar slots based on the state
  */
-export declare const useProgressStyles_unstable: (state: ProgressState) => ProgressState;
+export declare const useProgressBarStyles_unstable: (state: ProgressBarState) => ProgressBarState;
 
 export { }

package/lib/ProgressBar.js

@@ -0,0 +1,2 @@
+export * from './components/ProgressBar/index';
+//# sourceMappingURL=ProgressBar.js.map

package/lib/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/ProgressBar.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/ProgressBar/index';\n"]}

package/lib/ProgressField.js

@@ -0,0 +1,2 @@
+export * from './components/ProgressField/index';
+//# sourceMappingURL=ProgressField.js.map

package/lib/ProgressField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressField.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/ProgressField.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/ProgressField/index';\n"]}

package/lib/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useProgressBar_unstable } from './useProgressBar';
+import { renderProgressBar_unstable } from './renderProgressBar';
+import { useProgressBarStyles_unstable } from './useProgressBarStyles';
+/**
+ * A ProgressBar bar shows the progression of a task.
+ */
+export const ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useProgressBar_unstable(props, ref);
+  useProgressBarStyles_unstable(state);
+  return renderProgressBar_unstable(state);
+});
+ProgressBar.displayName = 'ProgressBar';
+//# sourceMappingURL=ProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useProgressBar_unstable","renderProgressBar_unstable","useProgressBarStyles_unstable","ProgressBar","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"]}

package/lib/components/ProgressBar/ProgressBar.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ProgressBar.types.js.map

package/lib/components/ProgressBar/ProgressBar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":"","sourcesContent":["import 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\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' | 'rectangular';\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   */\n  validationState?: 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<ProgressBarSlots> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'validationState'>;\n"]}

package/lib/components/ProgressBar/index.js

@@ -0,0 +1,6 @@
+export * from './ProgressBar';
+export * from './ProgressBar.types';
+export * from './renderProgressBar';
+export * from './useProgressBar';
+export * from './useProgressBarStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/ProgressBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"]}

package/lib/components/ProgressBar/renderProgressBar.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of ProgressBar
+ */
+export const renderProgressBar_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.bar && /*#__PURE__*/React.createElement(slots.bar, {
+    ...slotProps.bar
+  }));
+};
+//# sourceMappingURL=renderProgressBar.js.map

package/lib/components/ProgressBar/renderProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAC9D,oBAAOH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAAGF,KAAK,CAACG,GAAG,iBAAIP,oBAACI,KAAK,CAACG,GAAG;IAAA,GAAKF,SAAS,CAACE;EAAG,EAAI,CAAc;AACrG,CAAC","names":["React","getSlots","renderProgressBar_unstable","state","slots","slotProps","root","bar"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n  const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n  return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"]}

package/lib/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js}

@@ -1,20 +1,21 @@
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
- * Create the state required to render Progress.
+ * Create the state required to render ProgressBar.
  *
- * The returned state can be modified with hooks such as useProgressStyles_unstable,
- * before being passed to renderProgress_unstable.
+ * The returned state can be modified with hooks such as useProgressBarStyles_unstable,
+ * before being passed to renderProgressBar_unstable.
  *
- * @param props - props from this instance of Progress
- * @param ref - reference to root HTMLElement of Progress
+ * @param props - props from this instance of ProgressBar
+ * @param ref - reference to root HTMLElement of ProgressBar
  */
-
-export const useProgress_unstable = (props, ref) => {
+export const useProgressBar_unstable = (props, ref) => {
   // Props
   const {
+    max = 1.0,
+    shape = 'rounded',
     thickness = 'medium',
-    value,
-    max = 1.0
+    validationState,
+    value
   } = props;
   const root = getNativeElementProps('div', {
     ref,
@@ -29,8 +30,10 @@ export const useProgress_unstable = (props, ref) => {
   });
   const state = {
     max,
+    shape,
     thickness,
     value,
+    validationState,
     components: {
       root: 'div',
       bar: 'div'
@@ -40,4 +43,4 @@ export const useProgress_unstable = (props, ref) => {
   };
   return state;
 };
-//# sourceMappingURL=useProgress.js.map
+//# sourceMappingURL=useProgressBar.js.map

package/lib/components/ProgressBar/useProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC,eAAe;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAE5F,MAAMO,IAAI,GAAGV,qBAAqB,CAAC,KAAK,EAAE;IACxCI,GAAG;IACHO,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEF,KAAK,KAAKG,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEH,KAAK,KAAKG,SAAS,GAAGP,GAAG,GAAGO,SAAS;IACtD,eAAe,EAAEH,KAAK;IACtB,GAAGN;GACJ,CAAC;EAEF,MAAMU,GAAG,GAAGZ,gBAAgB,CAACE,KAAK,CAACU,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BV,GAAG;IACHC,KAAK;IACLC,SAAS;IACTE,KAAK;IACLD,eAAe;IACfQ,UAAU,EAAE;MACVN,IAAI,EAAE,KAAK;MACXG,GAAG,EAAE;KACN;IACDH,IAAI;IACJG;GACD;EAED,OAAOE,KAAK;AACd,CAAC","names":["getNativeElementProps","resolveShorthand","useProgressBar_unstable","props","ref","max","shape","thickness","validationState","value","root","role","undefined","bar","required","state","components"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\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  // Props\n  const { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, value } = props;\n\n  const root = getNativeElementProps('div', {\n    ref,\n    role: 'progressbar',\n    'aria-valuemin': value !== undefined ? 0 : undefined,\n    'aria-valuemax': value !== undefined ? max : undefined,\n    'aria-valuenow': value,\n    ...props,\n  });\n\n  const bar = resolveShorthand(props.bar, {\n    required: true,\n  });\n\n  const state: ProgressBarState = {\n    max,\n    shape,\n    thickness,\n    value,\n    validationState,\n    components: {\n      root: 'div',\n      bar: 'div',\n    },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"]}

package/lib/components/ProgressBar/useProgressBarStyles.js

@@ -0,0 +1,157 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+export const progressBarClassNames = {
+  root: 'fui-ProgressBar',
+  bar: 'fui-ProgressBar__bar'
+};
+// If the percentComplete is near 0, don't animate it.
+// This prevents animations on reset to 0 scenarios.
+const ZERO_THRESHOLD = 0.01;
+const barThicknessValues = {
+  medium: '2px',
+  large: '4px'
+};
+const indeterminateProgressBar = {
+  '0%': {
+    left: '0% /* @noflip */'
+  },
+  '100%': {
+    left: '100% /* @noflip */'
+  }
+};
+const indeterminateProgressBarRTL = {
+  '100%': {
+    right: '-100% /* @noflip */'
+  },
+  '0%': {
+    right: '100% /* @noflip */'
+  }
+};
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "ftgm304",
+    De3pzq: "f18f03hv",
+    Bdqf98w: "fhb5wj7",
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    I5kgcl: "fs8b23g",
+    tu2nte: "f1mcb20s",
+    y0r1ed: "fek7wd8"
+  },
+  rounded: {
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"]
+  },
+  rectangular: {
+    Bbmb7ep: ["fzi6hpg", "fyowgf4"],
+    Beyfa6y: ["fyowgf4", "fzi6hpg"],
+    B7oj6ja: ["f3fg2lr", "f13av6d4"],
+    Btl43ni: ["f13av6d4", "f3fg2lr"]
+  },
+  medium: {
+    Bqenvij: "f4t8t6x"
+  },
+  large: {
+    Bqenvij: "f6ywr7j"
+  }
+}, {
+  d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
+  m: [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
+    m: "screen and (forced-colors: active)"
+  }], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
+    m: "screen and (forced-colors: active)"
+  }], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
+    m: "screen and (forced-colors: active)"
+  }]]
+});
+/**
+ * Styles for the ProgressBar bar
+ */
+const useBarStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "ftywsgz",
+    Bpep1pd: "f1neahkh",
+    Bbmb7ep: ["f1d9uwra", "fzibvwi"],
+    Beyfa6y: ["fzibvwi", "f1d9uwra"],
+    B7oj6ja: ["fuoumxm", "f1vtqnvc"],
+    Btl43ni: ["f1vtqnvc", "fuoumxm"]
+  },
+  medium: {
+    Bqenvij: "f4t8t6x"
+  },
+  large: {
+    Bqenvij: "f6ywr7j"
+  },
+  nonZeroDeterminate: {
+    Bmy1vo4: "fjt6zfz",
+    B3o57yi: "f1wofebd",
+    Bkqvd7p: "fv71qf3"
+  },
+  indeterminate: {
+    B2u0y6b: "fa0wk36",
+    qhf8xq: "f10pi13n",
+    Bcmaq0h: ["fpo0yib", "f1u5hf6c"],
+    Bv12yb3: "f1h4fm7e",
+    vin17d: "f1a27w2r",
+    w3vfg9: "f1cpbl36",
+    Gqtpxc: "f4akx1t",
+    B3vm3ge: "f18p5put"
+  },
+  rtl: {
+    Bv12yb3: "fjhwsai"
+  },
+  error: {
+    De3pzq: "fdl5y0r"
+  },
+  warning: {
+    De3pzq: "f1s438gw"
+  },
+  success: {
+    De3pzq: "flxk52p"
+  }
+}, {
+  d: [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".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    );}", ".f1h4fm7e{-webkit-animation-name:fd3k50f;animation-name:fd3k50f;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjhwsai{-webkit-animation-name:f1kx06uz;animation-name:f1kx06uz;}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
+  m: [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
+    m: "screen and (forced-colors: active)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }]],
+  k: ["@-webkit-keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
+});
+/**
+ * Apply styling to the ProgressBar slots based on the state
+ */
+export const useProgressBarStyles_unstable = state => {
+  const {
+    max,
+    shape,
+    thickness,
+    validationState,
+    value
+  } = state;
+  const rootStyles = useRootStyles();
+  const barStyles = useBarStyles();
+  const {
+    dir
+  } = useFluent();
+  state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
+  if (state.bar) {
+    state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, validationState && barStyles[validationState], state.bar.className);
+  }
+  if (state.bar && value !== undefined) {
+    state.bar.style = {
+      width: Math.min(100, Math.max(0, value / max * 100)) + '%',
+      ...state.bar.style
+    };
+  }
+  return state;
+};
+//# sourceMappingURL=useProgressBarStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAIjF,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,GAAG,EAAE;CACN;AAED;AACA;AACA,MAAMC,cAAc,GAAG,IAAI;AAE3B,MAAMC,kBAAkB,GAAG;EACzBC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE;CACR;AAED,MAAMC,wBAAwB,GAAG;EAC/B,IAAI,EAAE;IACJC,IAAI,EAAE;GACP;EACD,MAAM,EAAE;IACNA,IAAI,EAAE;;CAET;AACD,MAAMC,2BAA2B,GAAG;EAClC,MAAM,EAAE;IACNC,KAAK,EAAE;GACR;EACD,IAAI,EAAE;IACJA,KAAK,EAAE;;CAEV;AAED;;;AAGA,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAuBpB;AAEF;;;AAGA,MAAMC,YAAY,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAmDnB;AAEF;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAM;IAAEC,GAAG;IAAEC,KAAK;IAAEC,SAAS;IAAEC,eAAe;IAAEC;EAAK,CAAE,GAAGL,KAAK;EAC/D,MAAMM,UAAU,GAAGT,aAAa,EAAE;EAClC,MAAMU,SAAS,GAAGT,YAAY,EAAE;EAChC,MAAM;IAAEU;EAAG,CAAE,GAAGvB,SAAS,EAAE;EAE3Be,KAAK,CAACb,IAAI,CAACsB,SAAS,GAAG5B,YAAY,CACjCK,qBAAqB,CAACC,IAAI,EAC1BmB,UAAU,CAACnB,IAAI,EACfmB,UAAU,CAACJ,KAAK,CAAC,EACjBI,UAAU,CAACH,SAAS,CAAC,EACrBH,KAAK,CAACb,IAAI,CAACsB,SAAS,CACrB;EAED,IAAIT,KAAK,CAACZ,GAAG,EAAE;IACbY,KAAK,CAACZ,GAAG,CAACqB,SAAS,GAAG5B,YAAY,CAChCK,qBAAqB,CAACE,GAAG,EACzBmB,SAAS,CAACG,IAAI,EACdL,KAAK,KAAKM,SAAS,IAAIJ,SAAS,CAACK,aAAa,EAC9CP,KAAK,KAAKM,SAAS,IAAIH,GAAG,KAAK,KAAK,IAAID,SAAS,CAACM,GAAG,EACrDN,SAAS,CAACJ,SAAS,CAAC,EACpBE,KAAK,KAAKM,SAAS,IAAIN,KAAK,GAAGhB,cAAc,IAAIkB,SAAS,CAACO,kBAAkB,EAC7EV,eAAe,IAAIG,SAAS,CAACH,eAAe,CAAC,EAC7CJ,KAAK,CAACZ,GAAG,CAACqB,SAAS,CACpB;;EAGH,IAAIT,KAAK,CAACZ,GAAG,IAAIiB,KAAK,KAAKM,SAAS,EAAE;IACpCX,KAAK,CAACZ,GAAG,CAAC2B,KAAK,GAAG;MAChBC,KAAK,EAAEC,IAAI,CAACC,GAAG,CAAC,GAAG,EAAED,IAAI,CAAChB,GAAG,CAAC,CAAC,EAAGI,KAAK,GAAGJ,GAAG,GAAI,GAAG,CAAC,CAAC,GAAG,GAAG;MAC5D,GAAGD,KAAK,CAACZ,GAAG,CAAC2B;KACd;;EAGH,OAAOf,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","useFluent_unstable","useFluent","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","useBarStyles","useProgressBarStyles_unstable","state","max","shape","thickness","validationState","value","rootStyles","barStyles","dir","className","base","undefined","indeterminate","rtl","nonZeroDeterminate","style","width","Math","min"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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: '0% /* @noflip */',\n  },\n  '100%': {\n    left: '100% /* @noflip */',\n  },\n};\nconst indeterminateProgressBarRTL = {\n  '100%': {\n    right: '-100% /* @noflip */',\n  },\n  '0%': {\n    right: '100% /* @noflip */',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    justifySelf: 'stretch',\n    ...shorthands.overflow('hidden'),\n\n    '@media screen and (forced-colors: active)': {\n      ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n    },\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  rectangular: {\n    ...shorthands.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    backgroundColor: tokens.colorCompoundBrandBackground,\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    ...shorthands.borderRadius('inherit'),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\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    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      animationDuration: '0.01ms',\n      animationIterationCount: '1',\n    },\n  },\n\n  rtl: {\n    animationName: indeterminateProgressBarRTL,\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 { max, shape, thickness, validationState, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n  const { dir } = useFluent();\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      value === undefined && barStyles.indeterminate,\n      value === undefined && dir === 'rtl' && barStyles.rtl,\n      barStyles[thickness],\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      validationState && barStyles[validationState],\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"]}

package/lib/components/ProgressField/ProgressField.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '@fluentui/react-field';
+import { ProgressBar } from '../../ProgressBar';
+export const progressFieldClassNames = /*#__PURE__*/getFieldClassNames('ProgressField');
+export const ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useField_unstable(props, ref, {
+    component: ProgressBar,
+    classNames: progressFieldClassNames,
+    labelConnection: 'aria-labelledby',
+    ariaInvalidOnError: false
+  });
+  state.control.validationState = state.validationState;
+  useFieldStyles_unstable(state);
+  return renderField_unstable(state);
+});
+ProgressField.displayName = 'ProgressField';
+//# sourceMappingURL=ProgressField.js.map

package/lib/components/ProgressField/ProgressField.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SACEC,kBAAkB,EAClBC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,uBAAuB;AAE9B,SAASC,WAAW,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,uBAAuB,gBAAGL,kBAAkB,CAAC,eAAe,CAAC;AAE1E,OAAO,MAAMM,aAAa,gBAA4CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGP,iBAAiB,CAACK,KAAK,EAAEC,GAAG,EAAE;IAC1CE,SAAS,EAAEP,WAAW;IACtBQ,UAAU,EAAEP,uBAAuB;IACnCQ,eAAe,EAAE,iBAAiB;IAClCC,kBAAkB,EAAE;GACrB,CAAC;EACFJ,KAAK,CAACK,OAAO,CAACC,eAAe,GAAGN,KAAK,CAACM,eAAe;EACrDd,uBAAuB,CAACQ,KAAK,CAAC;EAC9B,OAAOT,oBAAoB,CAACS,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,aAAa,CAACW,WAAW,GAAG,eAAe","names":["React","getFieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","ProgressBar","progressFieldClassNames","ProgressField","forwardRef","props","ref","state","component","classNames","labelConnection","ariaInvalidOnError","control","validationState","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar } from '../../ProgressBar';\n\nexport type ProgressFieldProps = FieldProps<typeof ProgressBar>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, {\n    component: ProgressBar,\n    classNames: progressFieldClassNames,\n    labelConnection: 'aria-labelledby',\n    ariaInvalidOnError: false,\n  });\n  state.control.validationState = state.validationState;\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"]}

package/lib/components/ProgressField/index.js

@@ -0,0 +1,2 @@
+export * from './ProgressField';
+//# sourceMappingURL=index.js.map

package/lib/components/ProgressField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressField/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './ProgressField';\n"]}

package/lib/index.js

@@ -1,2 +1,3 @@
-export { Progress, progressClassNames, renderProgress_unstable, useProgress_unstable, useProgressStyles_unstable } from './Progress';
+export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBar_unstable, useProgressBarStyles_unstable } from './ProgressBar';
+export { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,QADF,EAEE,kBAFF,EAGE,uBAHF,EAIE,oBAJF,EAKE,0BALF,QAMO,YANP","sourcesContent":["export {\n  Progress,\n  progressClassNames,\n  renderProgress_unstable,\n  useProgress_unstable,\n  useProgressStyles_unstable,\n} from './Progress';\nexport type { ProgressProps, ProgressSlots, ProgressState } from './Progress';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,6BAA6B,QACxB,eAAe;AAGtB,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable","ProgressField","ProgressField_unstable","progressFieldClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/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\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"]}

package/lib-commonjs/ProgressBar.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./components/ProgressBar/index"), exports);
+//# sourceMappingURL=ProgressBar.js.map

package/lib-commonjs/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/ProgressBar.ts"],"sourcesContent":["export * from './components/ProgressBar/index';\n"]}

package/lib-commonjs/ProgressField.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./components/ProgressField/index"), exports);
+//# sourceMappingURL=ProgressField.js.map

package/lib-commonjs/ProgressField.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/ProgressField.ts"],"sourcesContent":["export * from './components/ProgressField/index';\n"]}

package/lib-commonjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBar = void 0;
+const React = /*#__PURE__*/require("react");
+const useProgressBar_1 = /*#__PURE__*/require("./useProgressBar");
+const renderProgressBar_1 = /*#__PURE__*/require("./renderProgressBar");
+const useProgressBarStyles_1 = /*#__PURE__*/require("./useProgressBarStyles");
+/**
+ * A ProgressBar bar shows the progression of a task.
+ */
+exports.ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useProgressBar_1.useProgressBar_unstable(props, ref);
+  useProgressBarStyles_1.useProgressBarStyles_unstable(state);
+  return renderProgressBar_1.renderProgressBar_unstable(state);
+});
+exports.ProgressBar.displayName = 'ProgressBar';
+//# sourceMappingURL=ProgressBar.js.map

package/lib-commonjs/components/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,mBAAW,gBAA0CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDG,oDAA6B,CAACF,KAAK,CAAC;EACpC,OAAOG,8CAA0B,CAACH,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,mBAAW,CAACS,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useProgressBar_1","useProgressBarStyles_1","renderProgressBar_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"]}

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

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-//# sourceMappingURL=Progress.types.js.map
+//# sourceMappingURL=ProgressBar.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/ProgressBar/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./ProgressBar"), exports);
+tslib_1.__exportStar(require("./ProgressBar.types"), exports);
+tslib_1.__exportStar(require("./renderProgressBar"), exports);
+tslib_1.__exportStar(require("./useProgressBar"), exports);
+tslib_1.__exportStar(require("./useProgressBarStyles"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"]}

package/lib-commonjs/components/ProgressBar/renderProgressBar.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderProgressBar_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of ProgressBar
+ */
+const renderProgressBar_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.bar && React.createElement(slots.bar, {
+    ...slotProps.bar
+  }));
+};
+exports.renderProgressBar_unstable = renderProgressBar_unstable;
+//# sourceMappingURL=renderProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBH,KAAK,CAAC;EAC9D,OAAOI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAAGJ,KAAK,CAACK,GAAG,IAAIF,oBAACH,KAAK,CAACK,GAAG;IAAA,GAAKJ,SAAS,CAACI;EAAG,EAAI,CAAc;AACrG,CAAC;AAHYC,kCAA0B","names":["renderProgressBar_unstable","state","slots","slotProps","react_utilities_1","React","root","bar","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n  const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n  return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"]}