@fluentui/react-spinner 0.0.0-nightly-20220422-0419.1

package/lib/components/Spinner/Spinner.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.types.js","sourceRoot":"../src/","sources":["components/Spinner/Spinner.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n  /**\n   * The root of the Spinner.\n   * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The slot for the animated svg.\n   * The spinner slot receives the `className` and `style` that handles the spinning animation.\n   * An svg is also rendered as a child of this slot\n   */\n  spinner?: Slot<'span'>;\n  /**\n   * The label of the Slider.\n   * The label slot receives the styling related to the text associated with the Spinner.\n   */\n  label?: Slot<typeof Label>;\n};\n\ntype SpinnerCommons = {\n  /**\n   * The appearance of the Spinner.\n   * @default 'primary'\n   */\n  appearance?: 'primary' | 'inverted';\n\n  /**\n   * Where the label is positioned relative to the Spinner\n   * @default 'after'\n   */\n  labelPosition?: 'above' | 'below' | 'before' | 'after';\n\n  /**\n   * The size of the spinner.\n   * @default 'medium'\n   */\n  size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n\n  /**\n   * The status of the Spinner.\n   * @default 'active'\n   */\n  status?: 'active' | 'inactive';\n};\n\n/**\n * Spinner Props\n */\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & Partial<SpinnerCommons>;\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> & SpinnerCommons;\n"]}

package/lib/components/Spinner/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Spinner';
+export * from './Spinner.types';
+export * from './renderSpinner';
+export * from './useSpinner';
+export * from './useSpinnerStyles';

package/lib/components/Spinner/index.js

@@ -0,0 +1,6 @@
+export * from './Spinner';
+export * from './Spinner.types';
+export * from './renderSpinner';
+export * from './useSpinner';
+export * from './useSpinnerStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"]}

package/lib/components/Spinner/renderSpinner.d.ts

@@ -0,0 +1,5 @@
+import type { SpinnerState } from './Spinner.types';
+/**
+ * Render the final JSX of Spinner
+ */
+export declare const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;

package/lib/components/Spinner/renderSpinner.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Spinner
+ */
+
+export const renderSpinner_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  const {
+    labelPosition,
+    status
+  } = state;
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  }), slots.spinner && status === 'active' && /*#__PURE__*/React.createElement(slots.spinner, { ...slotProps.spinner
+  }), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  }));
+};
+//# sourceMappingURL=renderSpinner.js.map

package/lib/components/Spinner/renderSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Spinner/renderSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,CAArC;AACA,QAAM;AAAE,IAAA,aAAF;AAAiB,IAAA;AAAjB,MAA4B,KAAlC;AACA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,QAA/D,kBAA4E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,IAAiB,MAAM,KAAK,QAA5B,iBAAwC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAF3C,EAGG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,OAA/D,kBAA2E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAH9E,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\n  const { slots, slotProps } = getSlots<SpinnerSlots>(state);\n  const { labelPosition, status } = state;\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && (labelPosition === 'above' || labelPosition === 'before') && <slots.label {...slotProps.label} />}\n      {slots.spinner && status === 'active' && <slots.spinner {...slotProps.spinner} />}\n      {slots.label && (labelPosition === 'below' || labelPosition === 'after') && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Spinner/useSpinner.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { SpinnerProps, SpinnerState } from './Spinner.types';
+/**
+ * Create the state required to render Spinner.
+ *
+ * The returned state can be modified with hooks such as useSpinnerStyles_unstable,
+ * before being passed to renderSpinner_unstable.
+ *
+ * @param props - props from this instance of Spinner
+ * @param ref - reference to root HTMLElement of Spinner
+ */
+export declare const useSpinner_unstable: (props: SpinnerProps, ref: React.Ref<HTMLElement>) => SpinnerState;

package/lib/components/Spinner/useSpinner.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
+import { DefaultSvg } from './DefaultSvg';
+/**
+ * Create the state required to render Spinner.
+ *
+ * The returned state can be modified with hooks such as useSpinnerStyles_unstable,
+ * before being passed to renderSpinner_unstable.
+ *
+ * @param props - props from this instance of Spinner
+ * @param ref - reference to root HTMLElement of Spinner
+ */
+
+export const useSpinner_unstable = (props, ref) => {
+  // Props
+  const {
+    appearance = 'primary',
+    labelPosition = 'after',
+    size = 'medium',
+    status = 'active'
+  } = props;
+  const baseId = useId('spinner');
+  const {
+    tabIndex,
+    ...rest
+  } = props;
+  const nativeRoot = getNativeElementProps('div', {
+    ref,
+    ...rest
+  }, ['size']);
+  const labelShorthand = resolveShorthand(props.label, {
+    defaultProps: {
+      id: baseId
+    },
+    required: false
+  });
+  const spinnerShortHand = resolveShorthand(props.spinner, {
+    required: true,
+    defaultProps: {
+      children: /*#__PURE__*/React.createElement(DefaultSvg, null),
+      tabIndex
+    }
+  });
+
+  if (labelShorthand && spinnerShortHand && !spinnerShortHand['aria-labelledby']) {
+    spinnerShortHand['aria-labelledby'] = labelShorthand.id;
+  }
+
+  const state = {
+    appearance,
+    labelPosition,
+    size,
+    status,
+    components: {
+      root: 'div',
+      spinner: 'span',
+      label: Label
+    },
+    root: nativeRoot,
+    spinner: spinnerShortHand,
+    label: labelShorthand
+  };
+  return state;
+};
+//# sourceMappingURL=useSpinner.js.map

package/lib/components/Spinner/useSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Spinner/useSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAEA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;AACpG;AACA,QAAM;AAAE,IAAA,UAAU,GAAG,SAAf;AAA0B,IAAA,aAAa,GAAG,OAA1C;AAAmD,IAAA,IAAI,GAAG,QAA1D;AAAoE,IAAA,MAAM,GAAG;AAA7E,MAA0F,KAAhG;AACA,QAAM,MAAM,GAAG,KAAK,CAAC,SAAD,CAApB;AAEA,QAAM;AAAE,IAAA,QAAF;AAAY,OAAG;AAAf,MAAwB,KAA9B;AACA,QAAM,UAAU,GAAG,qBAAqB,CAAC,KAAD,EAAQ;AAAE,IAAA,GAAF;AAAO,OAAG;AAAV,GAAR,EAA0B,CAAC,MAAD,CAA1B,CAAxC;AAEA,QAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AACnD,IAAA,YAAY,EAAE;AACZ,MAAA,EAAE,EAAE;AADQ,KADqC;AAInD,IAAA,QAAQ,EAAE;AAJyC,GAAd,CAAvC;AAOA,QAAM,gBAAgB,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAP,EAAgB;AACvD,IAAA,QAAQ,EAAE,IAD6C;AAEvD,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CADE;AAEZ,MAAA;AAFY;AAFyC,GAAhB,CAAzC;;AAQA,MAAI,cAAc,IAAI,gBAAlB,IAAsC,CAAC,gBAAgB,CAAC,iBAAD,CAA3D,EAAgF;AAC9E,IAAA,gBAAgB,CAAC,iBAAD,CAAhB,GAAsC,cAAc,CAAC,EAArD;AACD;;AAED,QAAM,KAAK,GAAiB;AAC1B,IAAA,UAD0B;AAE1B,IAAA,aAF0B;AAG1B,IAAA,IAH0B;AAI1B,IAAA,MAJ0B;AAK1B,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,OAAO,EAAE,MAFC;AAGV,MAAA,KAAK,EAAE;AAHG,KALc;AAU1B,IAAA,IAAI,EAAE,UAVoB;AAW1B,IAAA,OAAO,EAAE,gBAXiB;AAY1B,IAAA,KAAK,EAAE;AAZmB,GAA5B;AAcA,SAAO,KAAP;AACD,CA1CM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n  // Props\n  const { appearance = 'primary', labelPosition = 'after', size = 'medium', status = 'active' } = props;\n  const baseId = useId('spinner');\n\n  const { tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, ...rest }, ['size']);\n\n  const labelShorthand = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId,\n    },\n    required: false,\n  });\n\n  const spinnerShortHand = resolveShorthand(props.spinner, {\n    required: true,\n    defaultProps: {\n      children: <DefaultSvg />,\n      tabIndex,\n    },\n  });\n\n  if (labelShorthand && spinnerShortHand && !spinnerShortHand['aria-labelledby']) {\n    spinnerShortHand['aria-labelledby'] = labelShorthand.id;\n  }\n\n  const state: SpinnerState = {\n    appearance,\n    labelPosition,\n    size,\n    status,\n    components: {\n      root: 'div',\n      spinner: 'span',\n      label: Label,\n    },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Spinner/useSpinnerStyles.d.ts

@@ -0,0 +1,7 @@
+import type { SpinnerState, SpinnerSlots } from './Spinner.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
+/**
+ * Apply styling to the Spinner slots based on the state
+ */
+export declare const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState;

package/lib/components/Spinner/useSpinnerStyles.js

@@ -0,0 +1,249 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const spinnerClassNames = {
+  root: 'fui-Spinner',
+  spinner: 'fui-Spinner__spinner',
+  label: 'fui-Spinner__label'
+};
+/*
+ * TODO: Update with proper tokens when added
+ * Radii for the Spinner circles
+ */
+
+const rValues = {
+  tiny: '9',
+  extraSmall: '11',
+  small: '13',
+  medium: '14.5',
+  large: '16.5',
+  extraLarge: '18.5',
+  huge: '20'
+};
+/*
+ * TODO: Update with proper tokens when added
+ * Sizes for the Spinner
+ */
+
+const spinnnerSizes = {
+  tiny: '20px',
+  extraSmall: '24px',
+  small: '28px',
+  medium: '32px',
+  large: '36px',
+  extraLarge: '40px',
+  huge: '44px'
+};
+/*
+ * TODO: Update with proper tokens when added
+ * Stroke widths for the Spinner
+ */
+
+const spinnerStrokeWidth = {
+  sWidth: '2px',
+  mWidth: '3px',
+  lWidth: '4px'
+};
+/*
+ * TODO: Update with proper tokens when added
+ * Animation for Spinner
+ */
+
+const spinnerAnimation = {
+  container: {
+    animationDuration: '3s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+    backgroundColor: 'transparent'
+  }
+};
+/*
+ * TODO: Update with proper tokens when added
+ * Label sizes for the Spinner
+ */
+
+const labelSizeTokens = {
+  body1: {
+    fontSize: tokens.fontSizeBase300,
+    lineHeight: tokens.lineHeightBase300
+  },
+  subtitle2: {
+    fontSize: tokens.fontSizeBase400,
+    lineHeight: tokens.lineHeightBase400
+  },
+  subtitle1: {
+    fontSize: tokens.fontSizeBase500,
+    lineHeight: tokens.lineHeightBase500
+  }
+};
+/**
+ * Styles for the root slot
+ */
+
+const useRootStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "f22iagw",
+    "Bt984gj": "f122n59",
+    "Brf1p80": "f4d9j23",
+    "i8kkvl": "f4px1ci",
+    "Belr9w4": "fn67r4l"
+  },
+  "horizontal": {
+    "Beiy3e4": "f1063pyq"
+  },
+  "vertical": {
+    "Beiy3e4": "f1vx9l62"
+  }
+}, {
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
+});
+
+const useLoaderStyles = /*#__PURE__*/__styles({
+  "spinnerSVG": {
+    "B486eqv": "f1nahjz1",
+    "Bwaue66": ["f5tbecn", "f15qb8s7"],
+    "fyp1ls": "fn4mtlg",
+    "ag6ruv": "f1y80fxs",
+    "osj692": "f1r2crtq",
+    "aq5vjd": "f1wsi8sr",
+    "d32isg": "f1da2vov",
+    "Bsvqbuc": "f11rfva0",
+    "b3s3i5": "f1exc66"
+  },
+  "tiny": {
+    "Bah9ito": "f1j4wmu2",
+    "ut6tcf": "f1vppzuq",
+    "B7p06xz": "f1subliv",
+    "B807ibg": "fd2apu6"
+  },
+  "extraSmall": {
+    "Bah9ito": "fmpqlna",
+    "ut6tcf": "f15z5jzu",
+    "B7p06xz": "f1subliv",
+    "B807ibg": "fm96dlc"
+  },
+  "small": {
+    "Bah9ito": "fo52gbo",
+    "ut6tcf": "f1b41i3v",
+    "B7p06xz": "f1subliv",
+    "B807ibg": "f1i91flz"
+  },
+  "medium": {
+    "Bah9ito": "f1aiqagr",
+    "ut6tcf": "f1wtx80b",
+    "B7p06xz": "f17vzdod",
+    "B807ibg": "fjlkznx"
+  },
+  "large": {
+    "Bah9ito": "f1trdq7b",
+    "ut6tcf": "f9e0mc5",
+    "B7p06xz": "f17vzdod",
+    "B807ibg": "f1upeyd8"
+  },
+  "extraLarge": {
+    "Bah9ito": "f89rf2a",
+    "ut6tcf": "f1w2xg3q",
+    "B7p06xz": "f17vzdod",
+    "B807ibg": "f1r2vitc"
+  },
+  "huge": {
+    "Bah9ito": "f1rx7k5y",
+    "ut6tcf": "f1vtyt49",
+    "B7p06xz": "f1l9ujyx",
+    "B807ibg": "fmhqutl"
+  }
+}, {
+  "i": [".f1nahjz1:focus-visible{outline-style:3px solid transparent;}"],
+  "k": ["@-webkit-keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@-webkit-keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}", "@keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}"],
+  "d": [".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}", ".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}", ".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1wsi8sr>svg{background-color:transparent;}", ".f1da2vov>svg>circle{cx:50%;}", ".f11rfva0>svg>circle{cy:50%;}", ".f1exc66>svg>circle{fill:none;}", ".f1j4wmu2>svg{height:20px;}", ".f1vppzuq>svg{width:20px;}", ".f1subliv>svg>circle{stroke-width:2px;}", ".fd2apu6>svg>circle{r:9;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fm96dlc>svg>circle{r:11;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1i91flz>svg>circle{r:13;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f17vzdod>svg>circle{stroke-width:3px;}", ".fjlkznx>svg>circle{r:14.5;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f1upeyd8>svg>circle{r:16.5;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".f1r2vitc>svg>circle{r:18.5;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1l9ujyx>svg>circle{stroke-width:4px;}", ".fmhqutl>svg>circle{r:20;}"]
+});
+
+const useTrackStyles = /*#__PURE__*/__styles({
+  "inverted": {
+    "gwg7kz": "f1jvpmnu",
+    "Bvrehnu": "fq8a5sv",
+    "Bidp6o": "f1b4lwqj",
+    "cq3kgi": "f1najlst",
+    "Btwiser": "f10r9z1l",
+    "B8001xd": "fu3xdw0",
+    "Bdordwa": ["f1ttdh6v", "fmyjox0"],
+    "Bo2mdfu": "f1eseayc",
+    "Bksq7rz": "f1iqpjmu"
+  },
+  "primary": {
+    "gwg7kz": "f11ditju",
+    "B8k2rxp": "f1m9nikz",
+    "Bvrehnu": "fq8a5sv",
+    "Bidp6o": "f1b4lwqj",
+    "cq3kgi": "f1najlst",
+    "Btwiser": "f10r9z1l",
+    "B8001xd": "fu3xdw0",
+    "Bdordwa": ["f1ttdh6v", "fmyjox0"],
+    "Bo2mdfu": "f1eseayc",
+    "Bksq7rz": "f12uf417",
+    "y14cdu": "flglbw1"
+  }
+}, {
+  "d": [".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}", ".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}", ".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}", ".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f10r9z1l>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:cubic-bezier(0.33,0,0.67,1);animation-timing-function:cubic-bezier(0.33,0,0.67,1);}", ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}", ".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}", ".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}", ".f1iqpjmu>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}", ".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}", ".f12uf417>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackground4);}"],
+  "k": ["@-webkit-keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", "@keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"],
+  "t": ["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", "@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}"]
+});
+
+const useLabelStyles = /*#__PURE__*/__styles({
+  "tiny": {
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "extraSmall": {
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "small": {
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "medium": {
+    "Be2twd7": "fod5ikn",
+    "Bg96gwp": "faaz57k"
+  },
+  "large": {
+    "Be2twd7": "fod5ikn",
+    "Bg96gwp": "faaz57k"
+  },
+  "extraLarge": {
+    "Be2twd7": "fod5ikn",
+    "Bg96gwp": "faaz57k"
+  },
+  "huge": {
+    "Be2twd7": "f1pp30po",
+    "Bg96gwp": "f106mvju"
+  }
+}, {
+  "d": [".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
+});
+/**
+ * Apply styling to the Spinner slots based on the state
+ */
+
+
+export const useSpinnerStyles_unstable = state => {
+  const {
+    labelPosition,
+    size = 'medium'
+  } = state;
+  const rootStyles = useRootStyles();
+  const spinnerStyles = useLoaderStyles();
+  const labelStyles = useLabelStyles();
+  const trackStyles = useTrackStyles();
+  state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
+
+  if (state.spinner && state.appearance) {
+    state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, size === 'extra-small' && spinnerStyles.extraSmall, size === 'extra-large' && spinnerStyles.extraLarge, size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size], trackStyles[state.appearance], state.spinner.className);
+  }
+
+  if (state.label) {
+    state.label.className = mergeClasses(spinnerClassNames.label, size === 'extra-small' && labelStyles.extraSmall, size === 'extra-large' && labelStyles.extraLarge, size !== 'extra-large' && size !== 'extra-small' && labelStyles[size], state.label.className);
+  }
+
+  return state;
+};
+//# sourceMappingURL=useSpinnerStyles.js.map

package/lib/components/Spinner/useSpinnerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n  root: 'fui-Spinner',\n  spinner: 'fui-Spinner__spinner',\n  label: 'fui-Spinner__label',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n  tiny: '9',\n  extraSmall: '11',\n  small: '13',\n  medium: '14.5',\n  large: '16.5',\n  extraLarge: '18.5',\n  huge: '20',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n  tiny: '20px',\n  extraSmall: '24px',\n  small: '28px',\n  medium: '32px',\n  large: '36px',\n  extraLarge: '40px',\n  huge: '44px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Stroke widths for the Spinner\n */\nconst spinnerStrokeWidth = {\n  sWidth: '2px',\n  mWidth: '3px',\n  lWidth: '4px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n  container: {\n    animationDuration: '3s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'linear',\n    backgroundColor: 'transparent',\n  },\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Label sizes for the Spinner\n */\nconst labelSizeTokens = {\n  body1: {\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n\n  subtitle2: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  subtitle1: {\n    fontSize: tokens.fontSizeBase500,\n    lineHeight: tokens.lineHeightBase500,\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.gap('8px'),\n  },\n\n  horizontal: {\n    flexDirection: 'row',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useLoaderStyles = makeStyles({\n  // global SVG class\n  spinnerSVG: {\n    ':focus-visible': {\n      outlineStyle: '3px solid transparent',\n    },\n    ['& > svg']: {\n      animationName: {\n        '0%': { transform: 'rotate(0deg)' },\n        '100%': { transform: 'rotate(360deg)' },\n      },\n      ...spinnerAnimation.container,\n    },\n    ['& > svg > circle']: {\n      cx: '50%',\n      cy: '50%',\n      fill: 'none',\n    },\n  },\n\n  tiny: {\n    ['& > svg']: {\n      height: spinnnerSizes.tiny,\n      width: spinnnerSizes.tiny,\n    },\n    ['& > svg > circle']: {\n      strokeWidth: spinnerStrokeWidth.sWidth,\n      r: rValues.tiny,\n    },\n  },\n\n  extraSmall: {\n    ['& > svg']: {\n      height: spinnnerSizes.extraSmall,\n      width: spinnnerSizes.extraSmall,\n    },\n    ['& > svg > circle']: {\n      strokeWidth: spinnerStrokeWidth.sWidth,\n      r: rValues.extraSmall,\n    },\n  },\n\n  small: {\n    ['& > svg']: {\n      height: spinnnerSizes.small,\n      width: spinnnerSizes.small,\n    },\n    ['& > svg > circle']: {\n      strokeWidth: spinnerStrokeWidth.sWidth,\n      r: rValues.small,\n    },\n  },\n\n  medium: {\n    ['& > svg']: {\n      height: spinnnerSizes.medium,\n      width: spinnnerSizes.medium,\n    },\n    ['& > svg > circle']: {\n      strokeWidth: spinnerStrokeWidth.mWidth,\n      r: rValues.medium,\n    },\n  },\n\n  large: {\n    ['& > svg']: {\n      height: spinnnerSizes.large,\n      width: spinnnerSizes.large,\n    },\n    ['& > svg > circle']: {\n      strokeWidth: spinnerStrokeWidth.mWidth,\n      r: rValues.large,\n    },\n  },\n\n  extraLarge: {\n    ['& > svg']: {\n      height: spinnnerSizes.extraLarge,\n      width: spinnnerSizes.extraLarge,\n    },\n    ['& > svg > circle']: {\n      strokeWidth: spinnerStrokeWidth.mWidth,\n      r: rValues.extraLarge,\n    },\n  },\n\n  huge: {\n    ['& > svg']: {\n      height: spinnnerSizes.huge,\n      width: spinnnerSizes.huge,\n    },\n    ['& > svg > circle']: {\n      strokeWidth: spinnerStrokeWidth.lWidth,\n      r: rValues.huge,\n    },\n  },\n});\n\nconst useTrackStyles = makeStyles({\n  inverted: {\n    ['& > svg > circle.fui-Spinner__Tail']: {\n      stroke: tokens.colorNeutralStrokeOnBrand2,\n      animationName: {\n        '0%': {\n          strokeDasharray: '1,150',\n          strokeDashoffset: '0',\n        },\n\n        '50%': {\n          strokeDasharray: '90,150',\n          strokeDashoffset: '-35',\n        },\n\n        '100%': {\n          strokeDasharray: '90,150',\n          strokeDashoffset: '-124',\n        },\n      },\n      animationDuration: '1.5s',\n      animationIterationCount: 'infinite',\n      animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n      strokeLinecap: 'round',\n      transform: 'rotate(-90deg)',\n      transformOrigin: '50% 50%',\n    },\n\n    ['& > svg > circle.fui-Spinner__Track']: {\n      stroke: tokens.colorNeutralBackgroundInverted,\n    },\n  },\n  primary: {\n    ['& > svg > circle.fui-Spinner__Tail']: {\n      stroke: tokens.colorBrandStroke1,\n      '@media screen and (forced-colors: active)': {\n        stroke: tokens.colorNeutralStrokeOnBrand2,\n      },\n      animationName: {\n        '0%': {\n          strokeDasharray: '1,150',\n          strokeDashoffset: '0',\n        },\n\n        '50%': {\n          strokeDasharray: '90,150',\n          strokeDashoffset: '-35',\n        },\n\n        '100%': {\n          strokeDasharray: '90,150',\n          strokeDashoffset: '-124',\n        },\n      },\n      animationDuration: '1.5s',\n      animationIterationCount: 'infinite',\n      animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n      strokeLinecap: 'round',\n      transform: 'rotate(-90deg)',\n      transformOrigin: '50% 50%',\n    },\n    ['& > svg > circle.fui-Spinner__Track']: {\n      stroke: tokens.colorNeutralBackground4,\n      '@media screen and (forced-colors: active)': {\n        stroke: tokens.colorNeutralBackgroundInverted,\n      },\n    },\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  // style for label\n\n  tiny: {\n    ...labelSizeTokens.body1,\n  },\n\n  extraSmall: {\n    ...labelSizeTokens.body1,\n  },\n\n  small: {\n    ...labelSizeTokens.body1,\n  },\n\n  medium: {\n    ...labelSizeTokens.subtitle2,\n  },\n\n  large: {\n    ...labelSizeTokens.subtitle2,\n  },\n\n  extraLarge: {\n    ...labelSizeTokens.subtitle2,\n  },\n\n  huge: {\n    ...labelSizeTokens.subtitle1,\n  },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n  const { labelPosition, size = 'medium' } = state;\n  const rootStyles = useRootStyles();\n  const spinnerStyles = useLoaderStyles();\n  const labelStyles = useLabelStyles();\n  const trackStyles = useTrackStyles();\n\n  state.root.className = mergeClasses(\n    spinnerClassNames.root,\n    rootStyles.root,\n    (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n    (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n    state.root.className,\n  );\n  if (state.spinner && state.appearance) {\n    state.spinner.className = mergeClasses(\n      spinnerClassNames.spinner,\n      spinnerStyles.spinnerSVG,\n      size === 'extra-small' && spinnerStyles.extraSmall,\n      size === 'extra-large' && spinnerStyles.extraLarge,\n      size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n      trackStyles[state.appearance],\n      state.spinner.className,\n    );\n  }\n  if (state.label) {\n    state.label.className = mergeClasses(\n      spinnerClassNames.label,\n      size === 'extra-small' && labelStyles.extraSmall,\n      size === 'extra-large' && labelStyles.extraLarge,\n      size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable, } from './Spinner';
+export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';

package/lib/index.js

@@ -0,0 +1,2 @@
+export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable } from './Spinner';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,iBAFF,EAGE,sBAHF,EAIE,mBAJF,EAKE,yBALF,QAMO,WANP","sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\n"],"sourceRoot":"../src/"}

package/lib/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.18.1"
+    }
+  ]
+}

package/lib-commonjs/Spinner.d.ts

@@ -0,0 +1 @@
+export * from './components/Spinner/index';

package/lib-commonjs/Spinner.js

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

package/lib-commonjs/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Spinner.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Spinner/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Spinner/DefaultSvg.d.ts

@@ -0,0 +1 @@
+export declare const DefaultSvg: () => JSX.Element;

package/lib-commonjs/components/Spinner/DefaultSvg.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultSvg = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const DefaultSvg = () => React.createElement("svg", {
+  role: "progressbar",
+  className: "fui-Spinner__Progressbar"
+}, React.createElement("circle", {
+  className: "fui-Spinner__Track"
+}), React.createElement("circle", {
+  className: "fui-Spinner__Tail"
+}));
+
+exports.DefaultSvg = DefaultSvg;
+//# sourceMappingURL=DefaultSvg.js.map

package/lib-commonjs/components/Spinner/DefaultSvg.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Spinner/DefaultSvg.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEO,MAAM,UAAU,GAAG,MACxB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,EAAA,IAAI,EAAC,aAAV;AAAwB,EAAA,SAAS,EAAC;AAAlC,CAAA,EACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAQ,EAAA,SAAS,EAAC;AAAlB,CAAA,CADF,EAEE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAQ,EAAA,SAAS,EAAC;AAAlB,CAAA,CAFF,CADK;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import * as React from 'react';\n\nexport const DefaultSvg = () => (\n  <svg role=\"progressbar\" className=\"fui-Spinner__Progressbar\">\n    <circle className=\"fui-Spinner__Track\" />\n    <circle className=\"fui-Spinner__Tail\" />\n  </svg>\n);\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Spinner/Spinner.d.ts

@@ -0,0 +1,6 @@
+import type { SpinnerProps } from './Spinner.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * Converged Spinner component for the fluentui repo
+ */
+export declare const Spinner: ForwardRefComponent<SpinnerProps>;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Spinner = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useSpinner_1 = /*#__PURE__*/require("./useSpinner");
+
+const renderSpinner_1 = /*#__PURE__*/require("./renderSpinner");
+
+const useSpinnerStyles_1 = /*#__PURE__*/require("./useSpinnerStyles");
+/**
+ * Converged Spinner component for the fluentui repo
+ */
+
+
+exports.Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useSpinner_1.useSpinner_unstable(props, ref);
+  useSpinnerStyles_1.useSpinnerStyles_unstable(state);
+  return renderSpinner_1.renderSpinner_unstable(state);
+});
+exports.Spinner.displayName = 'Spinner';
+//# sourceMappingURL=Spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxF,QAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;AAEA,EAAA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;AACA,SAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n  const state = useSpinner_unstable(props, ref);\n\n  useSpinnerStyles_unstable(state);\n  return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Spinner/Spinner.types.d.ts

@@ -0,0 +1,51 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
+export declare type SpinnerSlots = {
+    /**
+     * The root of the Spinner.
+     * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.
+     */
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * The slot for the animated svg.
+     * The spinner slot receives the `className` and `style` that handles the spinning animation.
+     * An svg is also rendered as a child of this slot
+     */
+    spinner?: Slot<'span'>;
+    /**
+     * The label of the Slider.
+     * The label slot receives the styling related to the text associated with the Spinner.
+     */
+    label?: Slot<typeof Label>;
+};
+declare type SpinnerCommons = {
+    /**
+     * The appearance of the Spinner.
+     * @default 'primary'
+     */
+    appearance?: 'primary' | 'inverted';
+    /**
+     * Where the label is positioned relative to the Spinner
+     * @default 'after'
+     */
+    labelPosition?: 'above' | 'below' | 'before' | 'after';
+    /**
+     * The size of the spinner.
+     * @default 'medium'
+     */
+    size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
+    /**
+     * The status of the Spinner.
+     * @default 'active'
+     */
+    status?: 'active' | 'inactive';
+};
+/**
+ * Spinner Props
+ */
+export declare type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & Partial<SpinnerCommons>;
+/**
+ * State used in rendering Spinner
+ */
+export declare type SpinnerState = ComponentState<SpinnerSlots> & SpinnerCommons;
+export {};

package/lib-commonjs/components/Spinner/Spinner.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=Spinner.types.js.map

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

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

package/lib-commonjs/components/Spinner/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Spinner';
+export * from './Spinner.types';
+export * from './renderSpinner';
+export * from './useSpinner';
+export * from './useSpinnerStyles';