open-index/open-npm huggingface dataset:
npm package: @react-spectre/form
Description: React components for Spectre.css's form elements.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/form`
React components for Spectre.css's form.

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/form
```

```shell
npm install @react-spectre/form --save
```

<br><br><br>

## Usage

### Form

There are 7 components exported for form: `FormGroup`, `Input`, `TextArea`, `Select`, `Radio`, `CheckBox` and `Switch`.

```js
import { FormGroup, Input, TextArea, Select, Radio, CheckBox, Switch } from '@react-spectre/form'
```

#### FormGroup

A form group is a wrapper for form controls.

```jsx
<FormGroup label="Name">
  <Input />
</FormGroup>
```

#### Input

```jsx
<Input />              // Default type="text"
<Input type="email" />
```

#### TextArea

```jsx
<TextArea />
<TextArea rows="3" />
```

#### Select

```jsx
<Select>
  <option>Choose an option</option>
  <option>Slack</option>
  <option>Skype</option>
  <option>Hipcat</option>
</Select>

<Select multiple>
  <option>Choose an option</option>
  <option>Slack</option>
  <option>Skype</option>
  <option>Hipcat</option>
</Select>
```

#### Radio

```jsx
<FormGroup label="Genre">
  <Radio label="Male"   name="genre" defaultChecked>
  <Radio label="Female" name="genre">
</FormGroup>
```

#### CheckBox

```jsx
<FormGroup>
  <CheckBox label="Remember me">
  <CheckBox label="Remember me" defaultChecked>
</FormGroup>
```

#### Switch

```jsx
<FormGroup>
  <Switch label="Send me emails with news and tips">
  <Switch label="Send me emails with news and tips" defaultChecked>
</FormGroup>
```

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/grid
Description: React components for Spectre.css's flexbox grid system.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/grid`
React components for Spectre.css's grid

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/grid
```

```shell
npm install @react-spectre/grid --save
```

<br><br><br>

## Usage

### Grid

### Row

### Col

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/icon
Description: React components for Spectre.css icons.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/icon`
React components for Spectre.css's icons.

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/icon
```

```shell
npm install @react-spectre/icon --save
```

<br><br><br>

## Usage

### Icons

There is 1 single component used for icons: `Icon`.

```js
import { Icon } from '@react-spectre/icon'
```

### Icon set

The `Icon` component only have one require property: `name`. The name should be one from [the Spectre.css icon set](https://picturepan2.github.io/spectre/elements.html#icons). For example, if we want to use the `icon-forward` we use the name after the `icon-` as shown:

```jsx
<Icon name="forward" />
```

### Icon Sizes

The `Icon` component can have 3 different sizes using the `size` prop:

```jsx
<Icon name="mail" size="2x" /> // 32px
<Icon name="mail" size="3x" /> // 48px
<Icon name="mail" size="4x" /> // 64px
```

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/label
Description: React components for Spectre.css labels.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/label`
React components for Spectre.css's label

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/label
```

```shell
npm install @react-spectre/label --save
```

<br><br><br>

## Usage

### Label

There is one single component used for labels: `Label`.

```js
import { Label } from '@react-spectre/label'
```

#### Colors

A Label can have 5 different color using props: `primary`, `secondary`, `success`, `warning` and `error`.

```jsx
<Label primary>primary</Label>
<Label secondary>secondary</Label>
<Label success>success</Label>
<Label warning>warning</Label>
<Label error>error</Label>
```

#### Rounded

A Label can have rounded corner using the `rounded` prop

```jsx
<Label rounded>rounded</Label>
<Label rounded primary>rounded primary</Label>
```

#### Small

A Label can be rendered in a `<small />` element.

```jsx
<Label small>small</Label>
<Label small primary>small primary</Label>
<Label small primary rounded>small primary rounded</Label>
```

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/layout
Description: React components for Spectre.css layout
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/layout`
React components for Spectre.css's layout

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/layout
```

```shell
npm install @react-spectre/layout --save
```

<br><br><br>

## Usage

This package groups 2 React Spectre packages, refers to them for usage.

  - [**Grid**](packages/grid)
  - [**Navbar**](packages/navbar)

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/media
Description: React components for Spectre.css media elements.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/media`
React components for Spectre.css's media elements

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/media
```

```shell
npm install @react-spectre/media --save
```

<br><br><br>

## Usage

### Media

There are 4 components used for media elements: `Image`, `Figure`, `Video` and `Container`<sup>1</sup>.

```js
import { Image, Figure, Video, Container } from '@react-spectre/media'
```

**Notes:** <sup>1</sup> `Container` is an alias for `Video.Container`.

### Image

An `Image` can have different styling using `responsive`, `contain` and `cover` props.

```jsx
<Image src="..." />
<Image src="..." responsive />
<Image src="..." contain />
<Image src="..." cover />
```

### Figure

An `Image` can be rendered inside a `Figure`.

```jsx
<Figure caption="A cool picture" captionAlignment="center">
  <Image src="..." />
</Figure>
```

The `captionAlignment` can have one of the following values: `left`, `center` or `right`.

### Video

A `Video` can have different aspect ratio using `responsive` prop.

```jsx
<Video responsive /> // Defaults is "16:9"
<Video responsive="1:1" />
<Video responsive="4:3" />
```

The `responsive` prop can have one fo the following values: `1:1`, `4:3` or `16:9`.

### Container

A `Video` or `<iframe />` can be rendered inside a `Container`.

```jsx
<Video.Container responsive> 
  <iframe src="https://www.youtube.com/embed/BzMLA8YIgG0" />
</Video.Container>
```

The `responsive` prop can have one fo the following values: `1:1`, `4:3` or `16:9`.

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/navbar
Description: React components for Spectre.css's navigation bar.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/navbar`
React components for Spectre.css's navigation bar

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/navbar
```

```shell
npm install @react-spectre/navbar --save
```

<br>

## Usage

### Navbar

Navbar is a layout container that appears in the header of apps and websites.

```js
import { Navbar, Brand, Section } from '@react-spectre/navbar'
```

```jsx
<Navbar>
    <Navbar.Section>
        <Navbar.Brand>MyAwesomeBrand</Navbar.Brand>
        <a href="#" className="btn btn-link">Docs</a>
        <a href="https://github.com/picturepan2/spectre" className="btn btn-link">GitHub</a>
    </Navbar.Section>
    <Navbar.Section>
        <div className="input-group input-inline">
              <input className="form-input" type="text" placeholder="search"/>
        </div>
    </Navbar.Section>
</Navbar>
```

> **Note:** The main component is `Navbar`, other component can be accessed through it, for example: `Navbar.Section` and `Navbar.Brand`.

### Section

The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the navbar-section className will be evenly distributed in the container.

The `Section` components provide a `center` props in case you want to center the elements inside the section.

```jsx
<Navbar>
    <Navbar.Section center>
        <Navbar.Brand>MyAwesomeBrand</Navbar.Brand>
        <a href="#" className="btn btn-link">Docs</a>
        <a href="https://github.com/picturepan2/spectre" className="btn btn-link">GitHub</a>
    </Navbar.Section>
</Navbar>
```

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/step
Description: React components for Spectre.css's steps.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/step`

React components for Spectre.css's steps

<br><br><br>

</div>

## Installation

```shell
yarn add @react-spectre/step
```

```shell
npm install @react-spectre/step --save
```

<br><br><br>

## Usage

```js
import { Step } from '@react-spectre/step'
```

```jsx
<Step>
  <Step.Item>
    <a href="#" className="tooltip" data-tooltip="Step 1">
      Step 1
    </a>
  <Step.Item>
  // Pass the 'active' property in order to set this step as the current one selected.
  <Step.Item active>
    <a href="#" className="tooltip" data-tooltip="Step 2">
      Step 2
    </a>
  <Step.Item>
</Step>
```

<div align=center>
<br><br><br>

Made with :heart: by [Cesar Contreras](https://github.com/ccontreras).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/table
Description: React components for Spectre.css's table.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/table`
React components for Spectre.css's table.

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/table
```

```shell
npm install @react-spectre/table --save
```

<br><br><br>

## Usage

### Table

There are 6 components exported for tables: `Table`, `Header` (thead), `Body` (tbody), `Row` (tr), `Heading` (th) and `Cell` (td).

```js
import { Table, Header, Body, Row, Heading, Cell } from '@react-spectre/table'
```

> **Note:** The main component is `Table`, other component can be accessed through `Table` for example: `Table.Header`, `Table.Body`, `Table.Row`, etc...

#### Example

```jsx
<Table striped hover scroll>
  <Header>
    <Row>
      <Heading>Name</Heading>
      <Heading>Age</Heading>
      <Heading>Is admin?</Heading>
    </Row>
  </Header>
  <Body>
    <Row active>
      <Cell>Rubens</Cell>
      <Cell>98</Cell>
      <Cell>Yes</Cell>
    </Row>
  </Body>
</Table>
```

Tables can have 2 different style decorators: `striped` and `hover`.

```jsx
<Table></Table>
<Table striped></Table>
<Table hover></Table>
<Table hover striped></Table>
```

#### Rows

Table rows can be marked as active using: `active` prop:

```jsx
<Table>
  <Body>
    <Row></Row>
    <Row active></Row>
  </Body>
<Table>
```

#### Scroll

A table can have horizontal scroll using the `scroll` props:

```jsx
<Table scroll></Table>
```

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/toast
Description: React components for Spectre.css's toast.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/toast`

React components for Spectre.css's toast

<br><br><br>

</div>

## Installation

```shell
yarn add @react-spectre/toast
```

```shell
npm install @react-spectre/toast --save
```

<br><br><br>

## Usage

```js
import { Toast } from '@react-spectre/toast'
```

### Variants

There are multiples avialable variants that can be passed as props:

1. primary

```jsx
<Toast primary>This is a primary toast</Toast>
```

2. success

```jsx
<Toast success>This is a success toast</Toast>
```

3. warning

```jsx
<Toast warning>This is a success toast</Toast>
```

4. error

```jsx
<Toast error>This is a success toast</Toast>
```

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/typography
Description: React components for Spectre.css's typography.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/typography`
React components for Spectre.css's typography

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/typography
```

```shell
npm install @react-spectre/typography --save
```

<br><br><br>

## Usage

### Headings

There are 7 components used for headings. `H1`-`H6` for headings from level 1 to 6 and `Label` to add a label inside any `H1`-`H6`.

```js
import { H1, H2, H3, H4, H5, H6, Label } from '@react-spectre/typography'
```

Headings can have contents by passing children components or setting the `contents` prop:

```jsx
<H1>Viewing all users</H1>
<H1 contents="Viewing all users" />
```

A label can be added to a `Heading` using the `label` prop:

```jsx
<H1 contents="Viewing all users" label="(185 in total)" />

// The following is an alternative to render the same.
<H1 label="(185 in total)">Viewing all users</H1>

// The following is another alternative to render the same.
<H1>
  Viewing all users
  <H1.Label>(185 in total)</H1.Label>
</H1>

// And this one too.
<H1>
  Viewing all users
  <H1.Label contents="(185 in total)" />
</H1>
```

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>