open-index/open-npm huggingface dataset:
npm package: @fluentui/common-styles
Description: Common style definitions for Fluent UI React components
Latest version: 1.2.78

# @fluentui/common-styles

**Common style definitions for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**

To import common styles files into a .scss file:

```scss
@import '~@fluentui/common-styles/dist/sass/common';
@import '~@fluentui/common-styles/dist/sass/focusBorder';
// ... or any others as needed
```
npm package: @fluentui/cra-template
Description: Create React App template for Fluent UI React (@fluentui/react)
Latest version: 8.4.223

# @fluentui/cra-template

**Create React App for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**

[Create React App](https://create-react-app.dev/) template for `@fluentui/react`.

<!--
NOTES:
- The template has a devDep on @fluentui/react to ensure that the package is built in PR/CI
  before the template's tests run
- See template.json for the actual list of deps installed when the template is used
-->

## Available scripts within the template

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
npm package: @fluentui/date-time-utilities
Description: Date-time utilities
Latest version: 8.6.11

# @fluentui/date-time-utilities

**Date and time utilities for [Fluent UI](https://developer.microsoft.com/en-us/fluentui)**

This package includes a number of date and time utility functions used by Fluent UI React DatePicker and Calendar components.

See [GitHub](https://github.com/microsoft/fluentui) for more details on the Fluent UI React project and packages within.
npm package: @fluentui/dom-utilities
Description: DOM utilities for use within Fluent web components
Latest version: 2.3.10

# @fluentui/dom-utilities

**DOM Utilities for use within [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**

This package contains extensions for traversing DOM within Fluent components, which should generally be used instead of the native equivalents.
Fluent supports the concept of 'layers', which leverage React 'Portals' to project popups and other overlay content over other content.
However, since this is not a native DOM concept, this library provides functionality to traverse the DOM in a way which reflects the hierarchy established by the projections.
npm package: @fluentui/example-data
Description: Data generators for Fluent UI React examples.
Latest version: 8.4.25

# @fluentui/example-data

**Data generators for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui) examples**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

This package is intended for use within the Fluent UI React repo. Therefore, the APIs may be unstable.
npm package: @fluentui/fluent2-theme
Description: A Fluent2 theme for Fluent UI React 8.x
Latest version: 8.107.152

# @fluentui/fluent2-theme

**Fluent2 theme for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

This package provides the Fluent 2 theme for Fluent UI React 8.0.

```jsx
  import { ThemeProvider } from '@fluentui/react';
  import { Fluent2WebLightTheme, Fluent2WebDarkTheme } from '@fluentui/fluent2-theme';

  <ThemeProvider theme={Fluent2WebLightTheme}>
    <div>Light Themed</div>
  </ThemeProvider>

  <ThemeProvider theme={Fluent2WebDarkTheme}>
    <div>Dark Themed</div>
  </ThemeProvider>
```
npm package: @fluentui/font-icons-mdl2
Description: Fluent UI React icon set.
Latest version: 8.5.72

# @fluentui/font-icons-mdl2

**Icons for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

Fluent UI React Icons includes a collection of 1100+ icons which you can use in your application.

## Getting started

If you are using Fluent UI React components, you can make all icons available by calling the `initializeIcons` function from the `@fluentui/font-icons-mdl2` package:

```tsx
import { initializeIcons } from '@fluentui/font-icons-mdl2';

// Register icons and pull the fonts from the default SharePoint cdn.
initializeIcons();

// ...or, register icons and pull the fonts from your own cdn:
initializeIcons('https://my.cdn.com/path/to/icons/');
```

This will make ALL icons in the collection available, but will download them on demand when referenced using the `@fluentui/style-utilities` APIs `getIcon` or `getIconClassName`.

## Usage in code

### Icon component

If you are using Fluent UI React, you can use the `Icon` component and pass in the corresponding iconName property to render a given icon.

```tsx
import { Icon } from '@fluentui/react/lib/Icon';

<Icon iconName="Snow" />;
```

### `getIconClassName` API

The `@fluentui/style-utilities` package includes a `getIconClassName` API which can provide a css class to use for rendering the icon manually using the `:before` pseudoselector:

```ts
import { getIconClassName } from '@fluentui/style-utilities';

return `<i class="${getIconClassName('Snow')}" />`;
```

## Notes

See [GitHub](https://github.com/microsoft/fluentui) for more details on the Fluent UI React project and packages within.
npm package: @fluentui/ie11-polyfills
Description: Package to hold current and future ie11 polyfills
Latest version: 0.1.4

# @fluentui/ie11-polyfills

**IE11 polyfills for Fluent UI React**

Package to hold ie11 polyfill that allows webpages that use CSS variables for styling to render correctly in IE11. It will also hold any future IE11 polyfills

To use the polyfill, just import the package:

```js
import '@fluentui/ie11-polyfills';
```

If you are using any websites with hot reloading, you will have to either put the polyfill on each page that uses css variables, or refresh the page for the script to take effect.
npm package: @fluentui/local-sandbox
Description: This package is an empty application which uses Fluent UI.
Latest version: 0.45.0

# Local sandbox

This package is an empty application which uses Fluent UI.

Production build without hot reload. Primary purpose of this application is to manually test performance and/or memory impact.

## Usage

```
yarn build:dependencies
yarn build:production
yarn serve
```

## Measuring bundle size

This package can be also used to analyze bundle size. After running `yarn build:production`, bundle size report is stored to **dist/report.html**.
npm package: @fluentui/public-docsite
Description: The official website for the Fluent UI project.
Latest version: 8.2.41

# [Fluent UI website](https://dev.microsoft.com/fabric)

**The official website for the Fluent UI project.**

Fluent UI is a collection of projects that represent the Fluent design language in code. This website helps document the components and styles that make up Fluent UI.

## Build the website

See the [readme](https://github.com/microsoft/fluentui) for instructions on getting started with Fluent UI development.

Once your repo is set up, run the following to start a local copy of the website. (Be sure to **start from the root of the repo**, not the `public-docsite` folder.)

```
yarn
yarn buildto public-docsite
cd apps
cd public-docsite
yarn start
```

`yarn start` will open your operating system's default web browser with the website. You can make changes to the code which will automatically build and refresh the page using live-reload.
npm package: @fluentui/public-docsite-resources
Description: Fluent UI React local demo app
Latest version: 8.1.41

# @fluentui/public-docsite-resources

**Local demo app for @fluentui/react controls**

This package contains the demo app that runs when you do `yarn start` from the root of the Fluent UI repo or from the `@fluentui/react` package.

To see a live version of this app, go to https://aka.ms/fluentdemo and choose a version.

See the [readme](https://github.com/microsoft/fluentui) for more information about Fluent UI and instructions for getting started with development, including how to run this app locally.
npm package: @fluentui/public-docsite-setup
Description: Bootstrap code for the Fluent UI website. Internal use only.
Latest version: 0.3.34

# @fluentui/public-docsite-setup

This is an **internal use only** package for sharing bootstrapping and version switching code between different major versions of Fluent/Fabric on https://developer.microsoft.com/fluentui, as well as the local and PR deploy versions of the site. It's consumed from npm by `@uifabric/fabric-website` in the `7.0`, `6.0`, and `5.0` branches.

## Usage

The most important file in this package is `src/loadSite.ts`, which handles various bootstrapping tasks for the site. It's intended to be used in your site version via a webpack config as follows.

1. Ensure `webpack` 4 or 5 and `copy-webpack-plugin` >= 4 are installed. (These are not listed in `peerDependencies` because they're only required when using the `getLoadSiteConfig` utility, not the types.)

1. In your webpack config file(s), add the result of `getLoadSiteConfig()` to your array of exported configs:

   ```js
   const getLoadSiteConfig = require('@fluentui/public-docsite-setup/scripts/getLoadSiteConfig');

   module.exports = [
     getLoadSiteConfig({
       libraryPath: 'path/to/@fluentui/react', // or 'office-ui-fabric-react' if appropriate
       outDir: path.join(__dirname, 'dist'), // full path to output directory
       isProduction: isProductionArg, // whether to do a minified build (filename is the same regardless)
     }),
     ...yourOtherConfigs,
   ];
   ```

This should give you two files:

- `[outDir]/index.html`: has some basic styling and a reference to `loadSite.js`
- `[outDir]/loadSite.js` does a few setup tasks:
  - Load the rest of the site. For local or PR deploy builds, this will load the locally deployed files starting with `[outDir]/[bundleName].js`. For the real site, this uses the manifest file (prod or df) for the appropriate major version: latest by default, or a version specified with `?fabricVer`.
  - Define `window.__versionSwitcherDefinition` with metadata for switching between available major versions of the site.
  - Define `window.MonacoConfig` used by the example editor.
npm package: @fluentui/react-builder
Description: A drag and drop UI builder.
Author: Levi Thomason
Latest version: 0.67.2

# Fluent UI React Builder

## Usage

### Requirements

Node

Yarn

### Getting Started

#### Command line setup

1. Clone the repository.
2. From the root folder (fluentui), run `yarn` to install required dependencies. This may take a while.
3. To build the project, run `yarn start:northstar`. Upon success, the builder can be found at `localhost:8080`. Happy building!

## Features

### State

While the scope of the app is small (blueline tool) we are just using React's state management.

If the scope grows, the state management solution may change.

### Takeaways

Tree nested vs flat

iframe callback vs messages

### Dropping

- Assumes all components can be dropped on all others (allow for config of this)
npm package: @fluentui/react-cards
Description: Deprecated experimental Card container components for Fluent UI React.
Latest version: 0.207.5

# @fluentui/react-cards

> **For the converged Card components, see `@fluentui/react-card` instead.**

**Deprecated experimental Card components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

These components never graduated from experimental status and were going to be removed in Fluent UI React version 8, but they've been added back for now to avoid breaking apps that were already using them. **Do not use these components in new code!**
npm package: @fluentui/react-data-grid-react-window
Description: Virtualized DataGrid components and utilities powered by react-window
Latest version: 9.0.0-beta.40
Deprecated: This package is deprecated please use @fluentui-contrib/react-data-grid-react-window

# @fluentui/react-data-grid-react-window

**This package is deprecated - please use [@fluentui-contrib/react-data-grid-react-window](https://www.npmjs.com/package/@fluentui-contrib/react-data-grid-react-window) instead**
npm package: @fluentui/react-date-time
Description: Date and time related React components for building experiences for Microsoft 365.
Latest version: 8.8.5

# @fluentui/react-date-time

**Date and time-related components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

To import the components:

```js
import { Calendar, DatePicker } from '@fluentui/react-date-time';
```
npm package: @fluentui/react-file-type-icons
Description: Fluent UI React file type icon set.
Latest version: 8.17.0

# @fluentui/react-file-type-icons

**File type icons for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

This package includes a collection of icons to represent file types.

## Getting started

If you are using Fluent UI React components, you can make all file type icons available by calling the `initializeFileTypeIcons` function from the `@fluentui/react-file-type-icons` package:

```tsx
import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';

// Register icons and pull the fonts from the default Microsoft Fluent CDN:
initializeFileTypeIcons();

// Or register icons and pull the fonts from a different CDN or folder path:
initializeFileTypeIcons('https://my.cdn.com/path/to/icons/');
```

**NOTE:** Proceed carefully if you override the default CDN location, whose contents may not match the registered file type icons and supported extensions. Do not use the `item-types-fluent` icon set that was previously uploaded to the Fluent CDN; it's deprecated.

## Usage in code

If you are using Fluent UI React, you can use the `Icon` component and pass in the corresponding icon properties to render a given icon.

```tsx
import { Icon } from '@fluentui/react/lib/Icon';
import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';

<Icon {...getFileTypeIconProps({ extension: 'docx', size: 16 })} />;
```

## Notes

See [GitHub](https://github.com/microsoft/fluentui) for more details on the Fluent UI React project and packages within.
npm package: @fluentui/react-focus
Description: Focus helpers to be used in React applications.
Latest version: 8.10.5

# @fluentui/react-focus

**Focus management components for [Fluent UI React](https://dev.microsoft.com/fabric)**

This package contains various components that deal with focus management to be leveraged when building applications using Fluent UI.

At the moment, these components include:

- `FocusZone`

To import a component from the `@fluentui/react-focus` package:

```js
import { ComponentName } from '@fluentui/react-focus';
```
npm package: @fluentui/react-icon-provider
Description: Package for applying icon overrides to Fluent UI React SVG icons
Latest version: 1.4.5

# @fluentui/react-icon-provider

**Icon override provider for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**

This component is used for providing overrides to the icons in `@fluentui/react-icons-mdl2`. This provider does not affect legacy icons or their overrides (`initializeIcons` and `registerIcons` from `@fluentui/font-icons-mdl2`).

Below is an example of how to override an icon:

```js
import * as ReactDOMClient from 'react-dom/client';
import { IconProvider } from '@fluentui/react-icon-provider';
import { IIconSubset } from '@fluentui/style-utilities';
import { FilterIcon } from '@fluentui/react-icons-mdl2';

const FakeIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" width="2048" height="2048">
    <path d="M1472 0q40 0 75 15t61 41 41 61 15 75v1664q0 40-15 75t-41 61-61 41-75 15H448q-40 0-75-15t-61-41-41-61-15-75V192q0-40 15-75t41-61 61-41 75-15h1024zm64 1856V192q0-26-19-45t-45-19H448q-26 0-45 19t-19 45v1664q0 26 19 45t45 19h1024q26 0 45-19t19-45zM512 1024V256h896v768H512zm128-640v512h640V384H640zM512 1792v-640h896v640H512zm128-512v384h640v-384H640z" />
  </svg>
);
const override: IIconSubset = {
  icons: {
    FilterIcon: <FakeIcon />,
  },
};

const OverriddenFilterIcon = () => (
  <IconProvider icons={override}>
    <FilterIcon />
  </IconProvider>
);

ReactDOMClient.createRoot(document.body.firstChild).render(<OverriddenFilterIcon />);
```
npm package: @fluentui/react-icons-mdl2
Description: SVG icon components for @fluentui/react
Latest version: 1.4.5

# @fluentui/react-icons-mdl2

**Icon components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**

This package contains SVG versions of the MDL2 icon set(excluding any branded icons), wrapped in React components. It also includes utilities for creating SVG icon components. These icons are available under the MIT license.

For more information, including a list of available icons, see the [Fluent UI website](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons).

To import the icon components:

```js
import { IconName } from '@fluentui/react-icons-mdl2';
```
npm package: @fluentui/react-icons-northstar
Description: A set svg icons and utilities for creating custom ones.
Latest version: 0.71.3

# `@fluentui/react-icons-northstar`

A set of reusable components and hooks to build component libraries and UI kits.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Icons](#icons)
  - [`createSvgIcon()`](#createsvgicon)
    - [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# Installation

**NPM**

```bash
npm install --save @fluentui/react-icons-northstar
```

**Yarn**

```bash
yarn add @fluentui/react-icons-northstar
```

# Utilities

## `createSvgIcon()`

A factory for creating svg icons.

#### Usage

The example below assumes an icon component called `<CircleIcon>` will be created in this way:

```tsx
const circleSvg = ({ classes }) => (
  <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
    <g>
      <path d="M16,8c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8S20.418,8,16,8z M16,22.85c-3.783,0-6.85-3.067-6.85-6.85S12.217,9.15,16,9.15s6.85,3.067,6.85,6.85S19.783,22.85,16,22.85z" />
      <circle className={classes.filledPart} cx="16" cy="16" r="8" />
    </g>
  </svg>
);

const CircleIcon = createSvgIcon({ svg: circleSvg, displayName: 'CircleIcon' });
```
npm package: @fluentui/react-native-icons
Description: Fluent System Icons are a collection of familiar, friendly, and modern icons from Microsoft.
Latest version: 2.0.323

# @fluentui/react-native-icons

Fluent System Icons are a collection of familiar, friendly, and modern icons from Microsoft.

## User story

`@fluentui/react-native-icons` are SVG based icons wrapped in a React Native element. Because each icon is its own element, you only need to import what you need for your application.

There are two different states of each icon, `Filled` and `Regular`, so you can choose what works best for your application. These are by default sized to `1em`, and can be scaled up or down to suit your developer needs.

Unlike the react-icons package, styling support isn't yet available due to limited styling capabilities of RNSVG.

## User flows

In order to use these icons, simply import them as `import { [Componentname][state] } from @fluentui/react-native-icons` as follows:

```tsx
import { AccessTimeFilled } from '@fluentui/react-native-icons';
```

The previous icon offerings are scalable, but if you know what size you want to use for your icons, and you are not planning on using multiple sizes, it is recommended to use the sized icons. These are the same icons as the general case, but in multiple different sizes, built to look pixel perfect at those specific sizes.
You can import the sized icons in a similar way:

```tsx
import { AccessTime24Filled } from '@fluentui/react-native-icons';
```

```tsx
import { AccessTime20Filled } from '@fluentui/react-native-icons';

const FluentIconsTest: React.FunctionComponent = () => {
  return (
    <React.Fragment>
      <View style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
        <View style={{ flexDirection: 'row' }}>
          <AccessTime20Filled />
        </View>
      </View>
    </React.Fragment>
  );
};
```

###### tags: `Templates` `Documentation`
npm package: @fluentui/react-next
Description: Next major release staging package: Reusable React components for building web experiences.
Latest version: 9.0.0-alpha.29

# [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)

**The React-based front-end framework for building web experiences.**

**Fluent UI React 8**

This package represents a staging ground for breaking changes in v8. We will be
staging potentially breaking updates for shippig later this summer.

Please see the tracking issue here for more information on v8:

https://github.com/microsoft/fluentui/issues/12770
npm package: @fluentui/react-northstar
Description: A themable React component library.
Author: Levi Thomason
Latest version: 0.71.3

# Fluent UI - React Northstar ([docs](https://aka.ms/fluent-ui))

[![npm version](https://img.shields.io/npm/v/@fluentui/react-northstar?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-northstar)

This is the home for `@fluentui/react-northstar` and related packages which were migrated from the [`microsoft/fluent-ui-react` repo][1].

**Status**

Fluent UI React Northstar has been superseded by Fluent UI React Components v9. For more details about migration to Fluent UI React Components v9, see [Migration documentation][5].

**Versioning**

> Since the `@fluentui/react-northstar` packages are on version 0.x, note that:
>
> 1.  **MINOR** versions represent **breaking changes**
> 1.  **PATCH** versions represent **fixes _and_ features**
> 1.  There are **no deprecation warnings** between releases
> 1.  Consult the [**CHANGELOG**][2] and related issues/PRs for more information

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Contributing](#contributing)
- [Issues](#issues)
- [Documentation and usage examples](#documentation-and-usage-examples)
- [FAQs](#faqs)
  - [What is the future of Fluent UI React Northstar?](#what-is-the-future-of-fluent-ui-react-northstar)
  - [How can we migrate to Fluent UI React Components v9?](#how-can-we-migrate-to-fluent-ui-react-components-v9)
  - [What's happening with Teams support?](#whats-happening-with-teams-support)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for a step-by-step setup and development guide specific to `@fluentui/react-northstar`.

## Issues

If you need to [file an issue][3], please note in the title or description that it refers to `@fluentui/react-northstar`.
List of [active issues][4]

## Documentation and usage examples

See the doc site at https://aka.ms/fluent-ui.

## FAQs

### What is the future of Fluent UI React Northstar?

The future of `@fluentui/react-northstar` is called `@fluentui/react-components`. It builds on top of many base principles that were present in Northstar, streamlines the API and brings significantly improved performance.

### How can we migrate to Fluent UI React Components v9?

Please see the [Migration documentation][5].

### What's happening with Teams support?

`@fluentui/react-northstar v0.x.x` (formerly `@fluentui/react v0.x.x`) has been the official set of components for Teams. This is still the case and no support is being dropped. New features will only be added to Fluent UI React Components v9.

[1]: https://github.com/microsoft/fluent-ui-react
[2]: https://github.com/microsoft/fluentui/blob/master/packages/fluentui/CHANGELOG.md
[3]: https://github.com/microsoft/fluentui/issues/new/choose
[4]: https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-northstar+%28v0%29%22
[5]: https://react.fluentui.dev/?path=/docs/concepts-migration-getting-started--docs
npm package: @fluentui/react-swatch-picker-preview
Description: New fluentui react package
Latest version: 0.6.0

# @fluentui/react-swatch-picker-preview

**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**

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.

The SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.
The SwatchPicker can be integrated within a popover or used as a standalone feature.

## Usage

To import React SwatchPicker components:

```tsx
import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';
```

Simple example of SwatchPicker Usage:

```tsx
import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';

export const App = () => {
  const [selectedValue, setSelectedValue] = React.useState('00B053');
  const [selectedColor, setSelectedColor] = React.useState('#00B053');
  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {
    setSelectedValue(data.selectedValue);
    setSelectedColor(data.selectedColor);
  };

  return (
    <>
      <SwatchPicker aria-label="SwatchPicker default" selectedValue={selectedValue} onSelectionChange={handleSelect}>
        <ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />
        <ColorSwatch color="#FFC12E" value="FFC12E" aria-label="orange" />
        <ColorSwatch color="#FEFF37" value="FEFF37" aria-label="yellow" />
        <ColorSwatch disabled color="#90D057" value="90D057" aria-label="light green" />
        <ColorSwatch color="#00B053" value="00B053" aria-label="green" />
        <ColorSwatch color="#00AFED" value="00AFED" aria-label="light blue" />
        <ColorSwatch color="#006EBD" value="006EBD" aria-label="blue" />
        <ColorSwatch color="#011F5E" value="011F5E" aria-label="dark blue" />
        <ColorSwatch color="#712F9E" value="712F9E" aria-label="purple" />
      </SwatchPicker>

      <div
        style={{
          backgroundColor: selectedColor,
        }}
      />
    </>
  );
};
```

## Specification

See the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.

## API

For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).
npm package: @fluentui/scheme-utilities
Description: Fluent UI React subtheme generator.
Latest version: 8.3.73

# @fluentui/scheme-utilities

**Theme variant generator for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

Variants are [themes](https://github.com/microsoft/fluentui/wiki/Theming) generated from an existing theme, as opposed to [from raw colors](https://developer.microsoft.com/en-us/fluentui#/styles/themegenerator). A variant will share the same colors as the original theme it was generated from, but will use those colors differently. For example, the background color and text color might be swapped. Variants can be used to highlight or de-emphasize portions of the page.

Example of normal, soft, and strong variants:

![example of variants](https://github.com/microsoft/fluentui/blob/master/packages/scheme-utilities/example.png)

This project provides helper functions to create variants of a given theme, which can be used with the [ThemeProvider](https://github.com/microsoft/fluentui/blob/master/packages/react-theme-provider/src/ThemeProvider.tsx) component to theme a specific portion of the page. Each function takes in an [IPartialTheme](https://github.com/microsoft/fluentui/blob/master/packages/style-utilities/src/interfaces/ITheme.ts) and returns an [ITheme](https://github.com/microsoft/fluentui/blob/master/packages/style-utilities/src/interfaces/ITheme.ts).

The following example creates a strong variant of a given theme, and applies that strong variant to the components wrapped by `ThemeProvider`.

```jsx
import { FluentTheme } from '@fluentui/theme';
import { getStrongVariant } from '@fluentui/theme-schemes';

const strongTheme = getStrongVariant(FluentTheme);

<ThemeProvider theme={strongTheme}>
  <components... />
</ThemeProvider>
```

The available variants are:

- `getNeutralVariant(theme: IPartialTheme): ITheme`
  - Neutral - a soft neutral color is used as the background (light gray in the default theme), most other colors are changed very little or not at all
- `getSoftVariant(theme: IPartialTheme): ITheme`
  - Soft - a soft shade of the primary color is used as the background (light blue in the default theme), most other colors are changed very little or not at all, but input controls look different
- `getStrongVariant(theme: IPartialTheme): ITheme`
  - Strong - a strong shade of the primary color is used as the background (blue in the default theme), almost all colors are changed
npm package: @fluentui/state
Description: A set of utils to create framework agnostic and reusable state managers
Author: Oleksandr Fediashov
Latest version: 0.67.2

# `@fluentui/state`

A set of utils to create framework agnostic and reusable state managers.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)
- [Usage with React](#usage-with-react)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# Installation

**NPM**

```bash
npm install --save @fluentui/state
```

**Yarn**

```bash
yarn add @fluentui/state
```

# Usage

```tsx
import { createManager, ManagerFactory } from '@fluentui/state';

type InputState = { value: string };
type InputActions = { change: (value: string) => void };

const createInputManager: ManagerFactory<InputState, InputActions> = config =>
  createManager<InputState, InputActions>({
    ...config,
    actions: {
      change: (value: string) => () => ({ value }),
    },
    state: { value: '', ...config.state },
  });
const manager = createInputManager({ state: { value: 'Hello world!' } });
```

# Usage with React

We provide React bindings under [`@fluentui/react-bindings`](https://github.com/microsoft/fluentui/tree/master/packages/fluentui/react-bindings).
npm package: @fluentui/svg-icons
Description: Fluent System Icons are a collection of familiar, friendly, and modern icons from Microsoft.
Latest version: 1.1.323

# Fluent UI System Icons (svg)

This package provides the Fluent UI System Icons as optimized plain svg assets.

## Installation

```bash
npm install @fluentui/svg-icons
```

## Usage

The library offers icons in SVG format; the icon names are structured as:

> `[name]_[size]_[style]`

- `name` - Name of the icon from [assets](../assets) that is all lowercased and underscore separated.
- `size` - Size of the icon that is one of 16/20/24/28/48. Note that some icons do not have all sizes available yet. Our designers are working to add missing ones to complete the collection.
- `style` - Style of the icon that is one of `regular`, `filled`. See the section below for details.

### Icon styles

The library offers icons in two styles, `regular` and `filled`

| regular                                                  | filled                                                 |
| -------------------------------------------------------- | ------------------------------------------------------ |
| ![mail_24_regular](../../art/ic_fluent_mail_regular.png) | ![mail_24_filled](../../art/ic_fluent_mail_filled.png) |

## Implementation

A common use case is to use [svg-inline-loader](https://www.npmjs.com/package/svg-inline-loader) in your Webpack config.

```bash
npm install svg-inline-loader --save-dev
```

webpack.js:

```js
module.exports = {
  resolve: {
    extensions: ['.svg'],
  },
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-inline-loader',
            options: {
              removeSVGTagAttrs: false,
            },
          },
        ],
      },
    ],
  },
};
```

Then reference an icon on a page.

Using template literal:

```ts
import AddIcon from '@fluentui/svg-icons/icons/add_20_filled.svg';

`<div>${AddIcon}</div>`;
```

Or `require`:

```ts
var icon = require('@fluentui/svg-icons/icons/add_20_filled.svg');
```
npm package: @fluentui/test-utilities
Description: Utilities used when testing components.
Latest version: 8.5.1

# @fluentui/test-utilities

Set of common test utilities for testing code within the Fluent UI React repo.

**React support:**

- 16 and 17
- `>17` limited

> [!WARNING]
> ⚠️ Most of this package public API is deprecated and may not work with new React major versions. Pleas migrate to `@testing-library/react` instead
>
> To learn more see https://react.dev/warnings/react-test-renderer
>
> **Affected APIs:**
>
> - `create` / may not work with React >=19
> - `safeCreate` / may not work with React >=19
> - `safeMount` / wont work with React >=18
npm package: @fluentui/theme
Description: Basic building blocks for Fluent UI React Component themes
Latest version: 2.7.2

# @fluentui/theme

**Basic building blocks for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui) Themes**

Define your own theme based on an existing theme:

```js
import { createTheme, Theme, FontWeights } from '@fluentui/theme';

export const MyTheme: Theme = createTheme({
  components: {
    Button: {
      variants: {
        fontWeight: FontWeights.semibold,
        paddingLeft: '24px',
        paddingRight: '24px',
      },
    },
  },
});
```
npm package: @fluentui/theme-samples
Description: Sample themes for use with Fabric components.
Latest version: 8.7.224

# @fluentui/theme-samples

**Theme samples for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

This is not a production-ready package and **should never be used in product**. This space is useful for serving as an example for theme definition and for testing new themes before finalizing them for use elsewhere.

To import sample themes:

```js
import { ThemeName } from '@fluentui/theme-samples';
```
npm package: @fluentui/utilities
Description: Fluent UI React utilities for building components.
Latest version: 8.17.2

# @fluentui/utilities

**Utilities for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

This package includes a number of basic utility functions required by most Fluent UI React components.

See [GitHub](https://github.com/microsoft/fluentui) for more details on the Fluent UI React project and packages within.
npm package: @fluentui/webpack-utilities
Description: Fluent UI React utilities for Webpack bundler.
Latest version: 8.1.29

# Fluent UI React - Webpack utilities

This package contains utilities for optimizing the use of Fluent UI React ([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/)) for the [Webpack](https://webpack.js.org) bundler.

## Installation

To use any of these Webpack utilities, you must install it into your project:

`npm i -D @fluentui/webpack-utilities`

or

`yarn add -D @fluentui/webpack-utilities`

## Fabric Async Loader

This is a Webpack loader that will automatically perform code splitting with no code changes needed on the library or application side. It accomplishes this through the Webpack loader mechanism filtered through the `include` property. To use this, modify your `webpack.config.js` like so:

```js
module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.(jsx?|tsx?)$/,
        include: require('@fluentui/webpack-utilities/lib/fabricAsyncLoaderInclude'),
        loader: '@fluentui/webpack-utilities/lib/fabricAsyncLoader.js',
        options: {
          ...
        }
      },
    ...
  }
};
```

### Loader Options (Webpack 4 only)

- `chunkName`: the generated file name will be based on this setting
- `prefetch`: translates to the webpackPrefetch magic comment
- `preload`: translates to the webpackPreload magic comment

### Credits

Thanks to:

- [react-loadable](https://github.com/jamiebuilds/react-loadable) by @jamiebuilds who created a delay loaded component
- [react-loadable-loader](https://github.com/baflo/react-loadable-loader) by @baflo who inspired this project; we modified that implementation to work with non-default exports
npm package: @fluentwind/eslint-plugin-vue-i18n
Description: Lint vue i18n
Author: fluentwind
Latest version: 0.0.10

# @fluentwind/eslint-plugin-vue-i18n

lint vue i18n

## Installation

You'll first need to install [ESLint](http://eslint.org):

```
$ npm i eslint --save-dev
```

Next, install `@fluentwind/eslint-plugin-vue-i18n`:

```
$ npm install @fluentwind/eslint-plugin-vue-i18n --save-dev
```

**Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-vue-i18n` globally.

## Usage

Add `@fluentwind/vue-i18n` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:

```json
{
    "plugins": [
        "@fluentwind/vue-i18n"
    ]
}
```

Or `@fluentwind/vue-i18n` to the extends section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:

```json
{
    "extends": [
        "plugin:@fluentwind/vue-i18n/base"
    ]
}
```


Then configure the rules you want to use under the rules section.

```json
{
    "rules": {
        "@fluentwind/vue-i18n/no-duplicated-values": "warn"
    }
}
```

## Supported Rules

###no-duplicated-values
多个文件共同扫描时：
1. 检测不同语言中相同的key-value
2. 单个文件中重复定义的value
3. 在其他语言没定义的key

en.js:
````js
export default {
  all: 'All',
  submit: 'Submit',
  operation: {
    submit: '操作',
    submit2: '操作en',
  },
};
````

zh-CN.js:
````js
export default {
  all: 'All',
  submit: '操作',
  operation: {
    submit: '操作',
    submit2: '操作',
    submit3: '操作',
  },
};
````
zh-TW.js:
````js
export default {
  all: 'All',
  submit: '操作TW',
  operation: {
    submit: '操作',
    submit2: '操作',
  },
  submit2: '操作TW',
};

````
输出:
````
eslint-plugin-vue-i18n\tests\data2\en.js
  3:3  warning  'all': 'All' 在所有国际化语言中都相同，建议无需国际化              no-duplicated-values
  6:5  warning  'operation.submit': '操作' 在所有国际化语言中都相同，建议无需国际化  no-duplicated-values

eslint-plugin-vue-i18n\tests\data2\zh-CN.js
  3:3  warning  'all': 'All' 在所有国际化语言中都相同，建议无需国际化              no-duplicated-values
  6:5  warning  'operation.submit': '操作' 在所有国际化语言中都相同，建议无需国际化  no-duplicated-values
  8:5  warning  'operation.submit3' 在语言en中未定义                  no-duplicated-values
  8:5  warning  'operation.submit3' 在语言zh-TW中未定义               no-duplicated-values
  8:5  warning  当前语言中重复定义了值 'operation.submit3': '操作'          no-duplicated-values

eslint-plugin-vue-i18n\tests\data2\zh-TW.js
  3:3  warning  'all': 'All' 在所有国际化语言中都相同，建议无需国际化              no-duplicated-values
  6:5  warning  'operation.submit': '操作' 在所有国际化语言中都相同，建议无需国际化  no-duplicated-values
  9:3  warning  'submit2' 在语言en中未定义                            no-duplicated-values
  9:3  warning  'submit2' 在语言zh-CN中未定义                         no-duplicated-values
  9:3  warning  当前语言中重复定义了值 'submit2': '操作TW'                  no-duplicated-values

✖ 12 problems (0 errors, 12 warnings)
````
npm package: @fluerswap/sdk
Description: 🛠 An SDK for building applications on top of FluerSwap.
Latest version: 3.0.10

# Uniswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/VenomProtocol/venomswap-sdk/workflows/CI/badge.svg)](https://github.com/VenomProtocol/venomswap-sdk)
[![npm version](https://img.shields.io/npm/v/@venomswap/sdk/latest.svg)](https://www.npmjs.com/package/@venomswap/sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@venomswap/sdk/latest.svg)](https://bundlephobia.com/result?p=@venomswap/sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/VenomProtocol/venomswap-sdk.git
```

Move into the uniswap-sdk working directory

```sh
cd uniswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @fluerswap/sdk-core
Description: ⚒️ An SDK for building applications on top of Uniswap V3
Latest version: 3.1.0

# Uniswap SDK Core

[![Unit Tests](https://github.com/Uniswap/uniswap-sdk-core/workflows/Unit%20Tests/badge.svg)](https://github.com/Uniswap/uniswap-sdk-core/actions?query=workflow%3A%22Unit+Tests%22)
[![Lint](https://github.com/Uniswap/uniswap-sdk-core/workflows/Lint/badge.svg)](https://github.com/Uniswap/uniswap-sdk-core/actions?query=workflow%3ALint)
[![npm version](https://img.shields.io/npm/v/@uniswap/sdk-core/latest.svg)](https://www.npmjs.com/package/@uniswap/sdk-core/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/sdk-core/latest.svg)](https://bundlephobia.com/result?p=@uniswap/sdk-core@latest)

This code is shared across Uniswap TypeScript SDKs.
npm package: @fluerswap/v2-sdk
Description: 🛠 An SDK for building applications on top of Uniswap V2
Latest version: 3.0.2

# Uniswap V2 SDK

[![Unit Tests](https://github.com/Uniswap/uniswap-v2-sdk/workflows/Unit%20Tests/badge.svg)](https://github.com/Uniswap/uniswap-v2-sdk/actions?query=workflow%3A%22Unit+Tests%22)
[![Lint](https://github.com/Uniswap/uniswap-v2-sdk/workflows/Lint/badge.svg)](https://github.com/Uniswap/uniswap-v2-sdk/actions?query=workflow%3ALint)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![npm version](https://img.shields.io/npm/v/@uniswap/v2-sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/v2-sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/v2-sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/v2-sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).
npm package: @fluex/fluexgl-dsp
Description: An open-source, web-based DSP library developed alongside FluexGL, designed for creating and manipulating sounds in various contexts.
Author: Rohan Kanhaisingh
Latest version: 0.4.7

# 🎚️ FluexGL DSP
An open-source, web-based DSP library developed alongside FluexGL, with the purpose of creating and manipulating sound in various contexts.

This open-source project is part of the Fluex ecosystem and is maintained by Rohan Kanhaisingh, the lead developer of this library.

**Note: this project is still under development and may not work yet.**

## 🧩 About
FluexGL DSP is a modern, TypeScript-based Web Audio library for creating and manipulating sound. Inspired by and based on DAW-style workflows, it provides a flexible, object-oriented channel system with master and sub channels.

It integrates smoothly with FluexGL, making it ideal for use in games, interactive web experiences, and multimedia projects.

## 📦 Installation

See down below for more details.

```
$ npm i @fluex/fluexgl-dsp
```

## ⚡ Quick start

```ts
import { DspPipeline, Channel, LoadAudioSource, AudioClip } from "@fluex/fluexgl-dsp";

(async function() {

    const pipeline = new DspPipeline({
        pathToWasm: "/data/fluexgl-dsp-wasm_bg.wasm",
        pathToWorklet: "/data/fluexgl-dsp-processor.worklet"
    });

    await pipeline.InitializeDpsPipeline();

    const audioDevice = await pipeline.ResolveDefaultAudioOutputDevice();

    if(!audioDevice) return;

    const master = audioDevice.GetMasterChannel();
    const context = audioDevice.GetContext();

    const audioSource = await LoadAudioSource("/music.mp3");

    if(!audioSource) return;

    const audioClip = new AudioClip(audioSource);
    const channel = new Channel(context);

    channel.Send(master);
    audioClip.Send(channel);

    button.addEventListener("click", function() {
        audioClip.Play();
    });
})();
```

## 💡 Effects, tools and more
FluexGL DSP provides built-in such as effects, tools, and utilities for advanced web audio processing, such as reverbs, delays, and stereo imaging effects.

The library also includes a powerful debugging system that allows developers to inspect and analyze the audio pipeline for easier troubleshooting and optimization.

## Web Assembly

FluexGL DSP is partially made using Web Assembly, and Rust as programming language. In order to use FluexGL DSP, the wasm source code must be provided when initializing the DSP pipeline. The source code can be found at the [FluexGL DSP WebAssembly Github repository](https://github.com/rohankanhaisingh/FluexGL-DSP-WebAssembly).