open-index/open-npm huggingface dataset:
npm package: @metrostar/warpspeed
Description: Lightweight React USWDS components for general use.
Author: Nathan Barber
Latest version: 1.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# WarpSpeed USWDS Component Library

This component library was built in React with Typescript, based on the United States Web Design System (USWDS) 3.0 Design System. The primary goal of this project is to provide a simplified react version of USWDS.

## Getting Started

- `npm install` to install all project dependencies.
- `npm run storybook` to load up the Design System.

## Other Useful Commands

- `npm run test` to run Jest tests and code coverage.
- `npm run lint` to run ESLint on the Typescript code.
- `npm run prettier` to enforce code style with Prettier.

## Contributing

To publish a new version, first update the `version` tag in package.json, then run an `npm run rollup` to compile the release. Finally, run `npm publish` to make your updates available from npm install.
npm package: @metroui/accordion
Description: Metro UI Accordion Component for React (Vite, TypeScript)
Author: Serhii Pimenov
Latest version: 0.1.1

# Metro UI Accordion for React

## Install
```shell
npm install -S @metroui/accordion
```

## Using
```typescript
import React from "react";
import { createRoot } from 'react-dom/client';

import "./index.less"
import {Accordion, ACCORDION_MODE, Frame} from "../src/index.ts";

const App = () => {
    return (
        <>
            <Accordion mode={ACCORDION_MODE.MULTI_FRAME} duration={300}>
                <Frame open caption="Frame 1">
                    <div className="padding">
                        Frame 1 Content ...
                    </div>
                </Frame>
                <Frame caption="Frame 2">
                    <div className="padding">
                        Frame 2 Content ...
                    </div>
                </Frame>
                <Frame open caption="Frame 3">
                    <div className="padding">
                        Frame 3 Content ...
                    </div>
                </Frame>
            </Accordion>
        </>
    )
}

const root = createRoot(document.getElementById('root'))
root.render(<App />, );
```

### Accordion Mode
- [x] SINGLE_FRAME
- [x] MULTI_FRAME
npm package: @metroui/activities
Description: Metro UI Activities for React (Vite, TypeScript)
Author: Serhii Pimenov
Latest version: 0.1.0

# Metro UI Activities for React
Set of activities and progress bars for React in Metro UI

## Install
```shell
npm i -S @metroui/activities
```

## Using
```typescript
import {Activity} from "@metroui/activities"

<Actyivity type{ACTIVITY_TYPE.ATOM} style={ACTIVITY_STYLE.COLOR} />
```

### Activity Styles
```typescript
export enum ACTIVITY_STYLE {
    COLOR,
    LIGHT,
    DEFAULT,
}
```

### Activity Types
```typescript
export enum ACTIVITY_TYPE {
    RING,
    METRO,
    SQUARE,
    CYCLE,
    SIMPLE,
    BARS,
    ATOM,
}
```
npm package: @metroui/buttons
Description: Metro UI Buttons for React (Vite, TypeScript)
Author: Serhii Pimenov
Latest version: 0.1.1

# Metro UI Button Set for React

## Install
```shell
npm i -S @metroui/buttons
```

## Using
```js
import {Button} from "@metroui/buttons"

<Button caption="Click Me" />
<Button>Click Me</Button>
```
You can see more examples in [demo](demo)
npm package: @metroui/dropdown
Description: Metro UI Dropdown for React (Vite, TypeScript)
Author: Serhii Pimenov
Latest version: 0.1.0

# Metro UI Dropdown for React
Dropdown component for Metro ui for React.

## Install
```shell
npm i -S @metroui/dropdown
```

## Using
```typescript
import React from "react";
import { createRoot } from 'react-dom/client';
import { Dropdown } from "@metroui/dropdown";

const App = () => {
    return (
        <>
            <Dropdown>
                <button>Toggle</button>   <-- Toggle
                <ul>                      <-- Dropdown Menu
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                </ul>
            </Dropdown>
        </>
    )
}

const root = createRoot(document.getElementById('root'))
root.render(<App />, );
```
npm package: @metroui/icons
Description: Metro UI Icons for React (Vite, TypeScript)
Author: Serhii Pimenov
Latest version: 0.1.1

# MIF for React

Metro Icon Font for React.

## Install
```shell
npm i -S @metroui/icons
```

## Using
```javascript
import React from "react";
import { createRoot } from 'react-dom/client';
import { MifIcon} from "@metroui/icons"

const App = () => {
    return (
        <>
            <MifIcon name="share"/>
            <MifIcon name="cog" size="4x"/>
        </>
    )
}

const root = createRoot(document.getElementById('root'))
root.render(<App />, );
```

## Sizes
You can use size from default to: `2x` ... `10x`.

## Icon names
All icon names are available at https://metroui.org.ua/icons.html
npm package: @metroui/pagination
Description: Metro UI Pagination Component for React (Vite, TypeScript)
Author: Serhii Pimenov
Latest version: 0.1.3

# Metro UI Pagination for React

## Install
```shell
npm i -S @metroui/pagination
```

## Using
```typescript
import React from "react";
import { createRoot } from 'react-dom/client';
import { Pagination, PAGINATION_POSITION } from "../src/index"

import "./index.less"

const App = () => {
    return (
        <>
            <Pagination 
                position={PAGINATION_POSITION.CENTER} 
                total={200} 
                itemsPerPage={10} 
                distance={3} 
                current={1}/>
        </>
    )
}

const root = createRoot(document.getElementById('root'))
root.render(<App />, );
```