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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Spinner/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/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-commonjs/components/Spinner/renderSpinner.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderSpinner_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of Spinner
+ */
+
+
+const renderSpinner_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  const {
+    labelPosition,
+    status
+  } = state;
+  return React.createElement(slots.root, { ...slotProps.root
+  }, slots.label && (labelPosition === 'above' || labelPosition === 'before') && React.createElement(slots.label, { ...slotProps.label
+  }), slots.spinner && status === 'active' && React.createElement(slots.spinner, { ...slotProps.spinner
+  }), slots.label && (labelPosition === 'below' || labelPosition === 'after') && React.createElement(slots.label, { ...slotProps.label
+  }));
+};
+
+exports.renderSpinner_unstable = renderSpinner_unstable;
+//# sourceMappingURL=renderSpinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Spinner/renderSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;AACA,QAAM;AAAE,IAAA,aAAF;AAAiB,IAAA;AAAjB,MAA4B,KAAlC;AACA,SACE,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,KAA4E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,IAAiB,MAAM,KAAK,QAA5B,IAAwC,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,KAA2E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAH9E,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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-commonjs/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-commonjs/components/Spinner/useSpinner.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSpinner_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
+
+const DefaultSvg_1 = /*#__PURE__*/require("./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
+ */
+
+
+const useSpinner_unstable = (props, ref) => {
+  // Props
+  const {
+    appearance = 'primary',
+    labelPosition = 'after',
+    size = 'medium',
+    status = 'active'
+  } = props;
+  const baseId = react_utilities_1.useId('spinner');
+  const {
+    tabIndex,
+    ...rest
+  } = props;
+  const nativeRoot = react_utilities_1.getNativeElementProps('div', {
+    ref,
+    ...rest
+  }, ['size']);
+  const labelShorthand = react_utilities_1.resolveShorthand(props.label, {
+    defaultProps: {
+      id: baseId
+    },
+    required: false
+  });
+  const spinnerShortHand = react_utilities_1.resolveShorthand(props.spinner, {
+    required: true,
+    defaultProps: {
+      children: React.createElement(DefaultSvg_1.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: react_label_1.Label
+    },
+    root: nativeRoot,
+    spinner: spinnerShortHand,
+    label: labelShorthand
+  };
+  return state;
+};
+
+exports.useSpinner_unstable = useSpinner_unstable;
+//# sourceMappingURL=useSpinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Spinner/useSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,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,iBAAA,CAAA,KAAA,CAAM,SAAN,CAAf;AAEA,QAAM;AAAE,IAAA,QAAF;AAAY,OAAG;AAAf,MAAwB,KAA9B;AACA,QAAM,UAAU,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AAAE,IAAA,GAAF;AAAO,OAAG;AAAV,GAA7B,EAA+C,CAAC,MAAD,CAA/C,CAAnB;AAEA,QAAM,cAAc,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;AACnD,IAAA,YAAY,EAAE;AACZ,MAAA,EAAE,EAAE;AADQ,KADqC;AAInD,IAAA,QAAQ,EAAE;AAJyC,GAA9B,CAAvB;AAOA,QAAM,gBAAgB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,OAAvB,EAAgC;AACvD,IAAA,QAAQ,EAAE,IAD6C;AAEvD,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,YAAA,CAAA,UAAD,EAAW,IAAX,CADE;AAEZ,MAAA;AAFY;AAFyC,GAAhC,CAAzB;;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,aAAA,CAAA;AAHG,KALc;AAU1B,IAAA,IAAI,EAAE,UAVoB;AAW1B,IAAA,OAAO,EAAE,gBAXiB;AAY1B,IAAA,KAAK,EAAE;AAZmB,GAA5B;AAcA,SAAO,KAAP;AACD,CA1CM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","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-commonjs/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-commonjs/components/Spinner/useSpinnerStyles.js

@@ -0,0 +1,260 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSpinnerStyles_unstable = exports.spinnerClassNames = void 0;
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+exports.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: react_theme_1.tokens.fontSizeBase300,
+    lineHeight: react_theme_1.tokens.lineHeightBase300
+  },
+  subtitle2: {
+    fontSize: react_theme_1.tokens.fontSizeBase400,
+    lineHeight: react_theme_1.tokens.lineHeightBase400
+  },
+  subtitle1: {
+    fontSize: react_theme_1.tokens.fontSizeBase500,
+    lineHeight: react_theme_1.tokens.lineHeightBase500
+  }
+};
+/**
+ * Styles for the root slot
+ */
+
+const useRootStyles = /*#__PURE__*/react_1.__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__*/react_1.__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__*/react_1.__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__*/react_1.__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
+ */
+
+
+const useSpinnerStyles_unstable = state => {
+  const {
+    labelPosition,
+    size = 'medium'
+  } = state;
+  const rootStyles = useRootStyles();
+  const spinnerStyles = useLoaderStyles();
+  const labelStyles = useLabelStyles();
+  const trackStyles = useTrackStyles();
+  state.root.className = react_1.mergeClasses(exports.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 = react_1.mergeClasses(exports.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 = react_1.mergeClasses(exports.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;
+};
+
+exports.useSpinnerStyles_unstable = useSpinnerStyles_unstable;
+//# sourceMappingURL=useSpinnerStyles.js.map

package/lib-commonjs/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-commonjs/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-commonjs/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSpinnerStyles_unstable = exports.useSpinner_unstable = exports.renderSpinner_unstable = exports.spinnerClassNames = exports.Spinner = void 0;
+
+var Spinner_1 = /*#__PURE__*/require("./Spinner");
+
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function () {
+    return Spinner_1.Spinner;
+  }
+});
+Object.defineProperty(exports, "spinnerClassNames", {
+  enumerable: true,
+  get: function () {
+    return Spinner_1.spinnerClassNames;
+  }
+});
+Object.defineProperty(exports, "renderSpinner_unstable", {
+  enumerable: true,
+  get: function () {
+    return Spinner_1.renderSpinner_unstable;
+  }
+});
+Object.defineProperty(exports, "useSpinner_unstable", {
+  enumerable: true,
+  get: function () {
+    return Spinner_1.useSpinner_unstable;
+  }
+});
+Object.defineProperty(exports, "useSpinnerStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return Spinner_1.useSpinnerStyles_unstable;
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,OAAA;AAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,mBAAA;AAAmB;AAAnB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA","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/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@fluentui/react-spinner",
+  "version": "0.0.0-nightly-20220422-0419.1",
+  "description": "Spinner component for Fluent UI React",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
+    "clean": "just-scripts clean",
+    "code-style": "just-scripts code-style",
+    "just": "just-scripts",
+    "lint": "just-scripts lint",
+    "start": "yarn storybook",
+    "test": "jest --passWithNoTests",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-spinner/src && yarn docs",
+    "storybook": "node ../../scripts/storybook/runner",
+    "type-check": "tsc -b tsconfig.json"
+  },
+  "devDependencies": {
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220422-0419.1",
+    "@fluentui/scripts": "^1.0.0"
+  },
+  "dependencies": {
+    "@fluentui/react-theme": "0.0.0-nightly-20220422-0419.1",
+    "@fluentui/react-label": "0.0.0-nightly-20220422-0419.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220422-0419.1",
+    "@griffel/react": "1.0.3",
+    "tslib": "^2.1.0"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8.0 <18.0.0",
+    "@types/react-dom": ">=16.8.0 <18.0.0",
+    "react": ">=16.8.0 <18.0.0",
+    "react-dom": ">=16.8.0 <18.0.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "minor",
+      "patch"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    }
+  }
+}