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

package/CHANGELOG.json

@@ -0,0 +1,173 @@
+{
+  "name": "@fluentui/react-spinner",
+  "entries": [
+    {
+      "date": "Fri, 22 Apr 2022 04:28:36 GMT",
+      "tag": "@fluentui/react-spinner_v0.0.0-nightly-20220422-0419.1",
+      "version": "0.0.0-nightly-20220422-0419.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui/react-spinner",
+            "commit": "not available",
+            "comment": "Release nightly v9"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "1cfb2361e0c8de06d93d0ba0578a809aaa5d0c0b",
+            "comment": "Reexport react-spinner in react-components"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220422-0419.1",
+            "commit": "0dbe6a48dea9ac8bef02ea228baf4172014f9ac9"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220422-0419.1",
+            "commit": "0dbe6a48dea9ac8bef02ea228baf4172014f9ac9"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220422-0419.1",
+            "commit": "0dbe6a48dea9ac8bef02ea228baf4172014f9ac9"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220422-0419.1",
+            "commit": "0dbe6a48dea9ac8bef02ea228baf4172014f9ac9"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Apr 2022 19:17:29 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.0-beta.6",
+      "version": "9.0.0-beta.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.0.0-beta.10",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Mar 2022 05:17:40 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.0-beta.6",
+      "version": "9.0.0-beta.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.4",
+            "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.5",
+            "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Mar 2022 02:17:40 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.0-beta.6",
+      "version": "9.0.0-beta.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.4",
+            "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 18 Feb 2022 13:35:38 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.0-beta.6",
+      "version": "9.0.0-beta.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.3",
+            "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
+            "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3",
+            "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 10 Feb 2022 08:52:26 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.0-beta.5",
+      "version": "9.0.0-beta.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,71 @@
+# Change Log - @fluentui/react-spinner
+
+This log was last generated on Fri, 22 Apr 2022 04:28:36 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20220422-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v0.0.0-nightly-20220422-0419.1)
+
+Fri, 22 Apr 2022 04:28:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-beta.6..@fluentui/react-spinner_v0.0.0-nightly-20220422-0419.1)
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
+- Reexport react-spinner in react-components ([PR #22531](https://github.com/microsoft/fluentui/pull/22531) by ololubek@microsoft.com)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220422-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/0dbe6a48dea9ac8bef02ea228baf4172014f9ac9) by beachball)
+- Bump @fluentui/react-label to v0.0.0-nightly-20220422-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/0dbe6a48dea9ac8bef02ea228baf4172014f9ac9) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220422-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/0dbe6a48dea9ac8bef02ea228baf4172014f9ac9) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220422-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/0dbe6a48dea9ac8bef02ea228baf4172014f9ac9) by beachball)
+
+## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-beta.6)
+
+Tue, 19 Apr 2022 19:17:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-beta.6..@fluentui/react-spinner_v9.0.0-beta.6)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-label to v9.0.0-beta.10 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+
+## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-beta.6)
+
+Fri, 04 Mar 2022 05:17:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-beta.6..@fluentui/react-spinner_v9.0.0-beta.6)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
+
+## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-beta.6)
+
+Tue, 01 Mar 2022 02:17:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-beta.6..@fluentui/react-spinner_v9.0.0-beta.6)
+
+### Changes
+
+- Bump @fluentui/react-utilities to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
+
+## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-beta.6)
+
+Fri, 18 Feb 2022 13:35:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-beta.5..@fluentui/react-spinner_v9.0.0-beta.6)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+
+## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-beta.5)
+
+Thu, 10 Feb 2022 08:52:26 GMT
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-spinner
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/MIGRATION.md

@@ -0,0 +1,17 @@
+# Spinner Migration
+
+## Migration from v0
+
+- `Loader`
+  - `inline` => Not supported.
+  - `labelPosition` => 'start' and 'end' changed to 'before' and 'after'
+  - `size` => There are the same number of sizes
+  - `delay` => Not supported.
+
+## Migration from v8
+
+- `Spinner`
+  - `ariaLabel` => use `aria-label` instead.
+  - `ariaLive` => use `aria-live` instead.
+  - `componentRef` => use `ref` instead.
+  - `theme` => Not supported. Use a `ThemeProvider` control instead.

package/README.md

@@ -0,0 +1,28 @@
+# @fluentui/react-spinner
+
+**React Spinner components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+The Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. Spinner is typically an indeterminate ProgressIndicator that is used when it is unknown how long a task will take to complete. They can be various sizes, located inline with content or centered. They generally appear while an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+## Usage
+
+To import Spinner:
+
+```js
+import { Spinner } from '@fluentui/react-spinner';
+```
+
+Once the Spinner component is ready for production use, the component will be available at:
+
+```js
+import { Spinner } from '@fluentui/react-components';
+```
+
+### Examples
+
+```js
+<Spinner label="Loading..." />
+<Spinner size="large" />
+```

package/Spec.md

@@ -0,0 +1,135 @@
+# @fluentui/react-spinner Spec
+
+## Background
+
+A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. Spinner is typically an indeterminate ProgressIndicator that is used when it is unknown how long a task will take to complete. They can be various sizes, located inline with content or centered. They generally appear while an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.
+
+## Prior Art
+
+### Open UI
+
+| Library                 | Component Name     | Spec Link                                                                                 | Notes                                                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------ | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Chakra UI               | `CircularProgress` | [CircularProgress](https://chakra-ui.com/docs/feedback/circular-progress)                 | `CircularProgress` has determinate and indeterminate forms, with props that give user the ability to change size, value, line thickness, and a min and max value, and add a label                                                                                                                 |
+| Material UI             | `CircularProgress` | [CircularProgress](https://mui.com/components/progress/#progress)                         | `CircularProgress` has determinate and indeterminate, allows users to change color, add value, and add a label                                                                                                                                                                                    |
+| Carbon                  | `InlineLoading`    | [InlineLoading](https://www.carbondesignsystem.com/components/inline-loading/usage)       | `InlineLoading` only has an indeterminate form, with four states: `inactive`, `active`, `finished`, `error`                                                                                                                                                                                       |
+| FluentUI Northstar      | `Loader`           | [Loader](https://fluentsite.z22.web.core.windows.net/0.57.0/components/loader/definition) | `Loader` has a `delay` prop that specifies how long to wait before the `Loader` is visible on the page. You can also render a custom svg as the image, and use the `as` prop to choose whether to render the loader as a string or a component. Other props include `inline`, `label`, and `size` |
+| Latitude Design System  | `Loader`           | [Loader](https://www.flexport.com/design/components/loaders#Loader)                       | This is a simple loader that allows users to modify size and whether the loader is inline                                                                                                                                                                                                         |
+| Orbit                   | `Loading`          | [Loading](https://orbit.kiwi/components/progress-indicators/loading/)                     | Simple loader with animation and text                                                                                                                                                                                                                                                             |
+| Elastic UI              | `LoadingSpinner`   | [LoadingSpinner](https://elastic.github.io/eui/#/display/loading#spinner)                 | Simple spinner                                                                                                                                                                                                                                                                                    |
+| Adobe Spectrum          | `ProgressCircle`   | [ProgressCircle](https://spectrum.adobe.com/page/progress-circle/)                        | It has a default and an over background state. It also has a min and max value setting, as well as a size, determinate, and indeterminate                                                                                                                                                         |
+| Ant Design              | `Spin`             | [Spin](https://ant.design/components/spin/)                                               | Can change size, add a delay, and render a custom spinner                                                                                                                                                                                                                                         |
+| Atlassian Design System | `Spinner`          | [Spinner](https://atlassian.design/components/spinner/examples)                           | Has a default Spinner, with ability to change size(there are preset size options, with the ability to render the spinner with a custom size). Can also delay the Spinner, and use present animations such as `FadeIn`                                                                             |
+| Base Web                | `Spinner`          | [Spinner](https://baseweb.design/components/spinner#api)                                  | Started out with a simple Spinner with a size, color, and title prop, but adds an override prop that lets you customize the look and feel of the Spinner                                                                                                                                          |
+| Blueprint               | `Spinner`          | [Spinner](https://blueprintjs.com/docs/#core/components/spinner)                          | Has a value prop to allow for determinate or indeterminate Spinners, and a size prop with preset sizes provided as an ENUM                                                                                                                                                                        |
+| Evergreen Design System | `Spinner`          | [Spinner](https://evergreen.segment.com/components/spinner)                               | Default Spinner that allows you to change size and add a delay, as well as render it centered in a div                                                                                                                                                                                            |
+| Fabric                  | `Spinner`          | [Spinner](https://developer.microsoft.com/en-us/fluentui#/controls/web/spinner)           | This Spinner has specific aria attributes as props as well as label and size props to modify the default Spinner                                                                                                                                                                                  |
+| GitLab Design System    | `Spinner`          | [Spinner](https://design.gitlab.com/components/spinner)                                   | Can change size, color, and set inline. Comes with a default 100ms delay                                                                                                                                                                                                                          |
+| Paste                   | `Spinner`          | [Spinner](https://paste.twilio.design/components/spinner/#paste-docs-content-area)        | Contains many elements present in other design systems' Spinners: delay, size, color, and as props. Notably, no determinate or indeterminate forms                                                                                                                                                |
+| Primer                  | `Spinner`          | [Spinner](https://primer.style/react/Spinner)                                             | Default Spinner with a size prop                                                                                                                                                                                                                                                                  |
+| Garden                  | `Spinner`          | [Spinner](https://garden.zendesk.com/components/spinner)                                  | Default Spinner with color and size prop                                                                                                                                                                                                                                                          |
+| Polaris                 | `Spinner`          | [Spinner](https://polaris.shopify.com/components/feedback-indicators/spinner)             | Default Spinner with a size prop, with preset small and large values                                                                                                                                                                                                                              |
+| Lightning Design System | `Spinner`          | [Spinner](https://react.lightningdesignsystem.com/components/spinners/)                   | A more robust indeterminate Spinner with props that allow the Spinner to be rendered in a container, add styling to said container, inline the Spinner, and change the size                                                                                                                       |
+
+### Comparison of v8 and v0
+
+The existing components are:
+
+- v8
+  - `Spinner`
+- v0
+  - `Loader`
+- Both `Spinner` and `Loader` have very similar props
+- `Loader` has `delay`, while `Spinner` has aria props exposed for accessibility.
+
+## Sample Code
+
+Basic examples:
+
+```jsx=
+import { Spinner } from "@fluentui/react-spinner";
+
+function App() {
+    return (
+        <Spinner size="medium" label="Loading" />
+    )
+}
+
+```
+
+## Variants
+
+- Indeterminate Spinner
+  - The default Spinner that spins around indefinitely
+
+### Shape
+
+The Spinner is represented as a circle with an arc of a darker shade rotating the circumfrence
+
+## API
+
+From [Spinner.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-spinner/src/components/Spinner/Spinner.types.ts)
+
+### Slots
+
+- `root` - The root element of the Spinner. The html element is a `span`
+- `loader` - The svg element that gets animated into a Spinner. The html element is `svg`
+- `label` - The text shown with the Spinner. This uses the `Text` control
+
+### Props
+
+```jsx
+export type SpinnerProps = ComponentProps &
+  React.HTMLAttributes<HTMLElement> & {
+    /* The appearance of the Spinner*/
+    appearance?: 'primary' | 'inverted',
+    /* The labelPosition prop allows user to set the location of the label*/
+    labelPosition?: 'above' | 'below' | 'before' | 'after',
+    /* The size prop sets the size of the Spinner
+     * @defaultValue "medium"*/
+    size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge',
+    // inactive ? : boolean
+    status?: 'active' | 'inactive',
+  };
+```
+
+## Structure
+
+```html
+<span class="fui-Spinner">
+  <!-- Label for Spinner -->
+  <span className="fui-Spinner__label">Loading...</span>
+  <span className="fui-Spinner__spinner">
+    <!-- Svg that receives the animation. Classnames are used for animation -->
+    <svg role="progressbar" className="fui-Spinner__Progressbar">
+      <circle className="fui-Spinner__Track" />
+      <circle className="fui-Spinner__Tail" />
+    </svg>
+  </span>
+</span>
+```
+
+## Migration
+
+See [MIGRATION.md]().
+
+## Behaviors
+
+### States
+
+- **Display** - The Spinner will use the following priority:
+
+  - Adding the `inverted` will alter the way that the Spinner is displayed.
+
+### Interaction
+
+The Spinner is non-interactive.
+
+- **Keyboard** - Not keyboard focusable.
+- **Mouse**
+
+  - Click: No action
+
+- **Touch** - Nothing
+
+## Accessibility

package/dist/react-spinner.d.ts

@@ -0,0 +1,89 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Render the final JSX of Spinner
+ */
+export declare const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
+
+/**
+ * Converged Spinner component for the fluentui repo
+ */
+export declare const Spinner: ForwardRefComponent<SpinnerProps>;
+
+export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
+
+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>;
+
+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>;
+};
+
+/**
+ * State used in rendering Spinner
+ */
+export declare type SpinnerState = ComponentState<SpinnerSlots> & SpinnerCommons;
+
+/**
+ * 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_2.Ref<HTMLElement>) => SpinnerState;
+
+/**
+ * Apply styling to the Spinner slots based on the state
+ */
+export declare const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState;
+
+export { }

package/lib/Spinner.d.ts

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

package/lib/Spinner.js

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

package/lib/Spinner.js.map

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

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

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

package/lib/components/Spinner/DefaultSvg.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export const DefaultSvg = () => /*#__PURE__*/React.createElement("svg", {
+  role: "progressbar",
+  className: "fui-Spinner__Progressbar"
+}, /*#__PURE__*/React.createElement("circle", {
+  className: "fui-Spinner__Track"
+}), /*#__PURE__*/React.createElement("circle", {
+  className: "fui-Spinner__Tail"
+}));
+//# sourceMappingURL=DefaultSvg.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Spinner/DefaultSvg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,OAAO,MAAM,UAAU,GAAG,mBACxB,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","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/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/components/Spinner/Spinner.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useSpinner_unstable } from './useSpinner';
+import { renderSpinner_unstable } from './renderSpinner';
+import { useSpinnerStyles_unstable } from './useSpinnerStyles';
+/**
+ * Converged Spinner component for the fluentui repo
+ */
+
+export const Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useSpinner_unstable(props, ref);
+  useSpinnerStyles_unstable(state);
+  return renderSpinner_unstable(state);
+});
+Spinner.displayName = 'Spinner';
+//# sourceMappingURL=Spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxF,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;AAEA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AACA,SAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,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/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 {};