open-index/open-npm huggingface dataset:
npm package: @igloo-ui/tabs
Description: Use to alternate among related views within the same context.
Author: Officevibe Inc.
Latest version: 2.1.0

# Tabs

Use to alternate among related views within the same context.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/tabs` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/tabs
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/tabs
```

## Usage

Then to use the component in your code just import it!

```jsx
import Tabs from '@igloo-ui/tabs';

<Tabs
  tabs={[
    {
      label: 'Premium Tab',
      premium: true,
      children: 'Content of premium tab',
    },
    {
      label: 'Notification Tab',
      notification: true,
      children: 'Content of notification tab',
    },
    {
      label: 'Premium Notification Tab',
      notification: true,
      premium: true,
      children: 'Content of premium notification tab',
    },
  ]}
/>;
```

## Variation

Pass the onClick with the navlink when using react router

```jsx
<BrowserRouter>
  <Tabs
    selected={selected}
    tabs={[
      {
        label: (
          <NavLink to={'/home'} onClick={() => handleTabChange(0)}>
            Home
          </NavLink>
        ),
        children: (
          <Routes>
            <Route path="/home" element={<div>Home page</div>} />
          </Routes>
        ),
      },
      {
        label: (
          <NavLink to={'/about'} onClick={() => handleTabChange(1)}>
            About
          </NavLink>
        ),
        children: (
          <Routes>
            <Route path="/about" element={<div>About page</div>} />
          </Routes>
        ),
      },
    ]}
  />
</BrowserRouter>
```
npm package: @igloo-ui/tag
Description: The Tag component informs users of the status of an object or of an action that's been taken.
Author: Officevibe Inc.
Latest version: 3.0.0

# Tag

The Tag component informs users of the status of an object or of an action that's been taken.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/tag` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/tag
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/tag
```

## Usage

Then to use the component in your code just import it!

```jsx
import Tag from '@igloo-ui/tag';
import LabelSolid from '@igloo-ui/icons/dist/LabelSolid';

<Tag icon={<LabelSolid size="small" />} appearance="success" dismissible>
  This is a tag
</Tag>;
```
npm package: @igloo-ui/tag-picker
Description: A multiselect of items displayed as tags.
Author: Officevibe Inc.
Latest version: 0.17.0

# TagPicker

A multiselect of items displayed as tags.

<ReferenceLinks is="custom" />

<Example is="custom" />

## Installation

To install `@igloo-ui/tag-picker` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/tag-picker
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/tag-picker
```

## Usage

Then to use the component in your code just import it!

```jsx
import TagPicker from '@igloo-ui/tag-picker';
import { mockData } from './data';

const [selected, setSelected] = React.useState([]);
const [results, setResults] = React.useState([]);

const onInput = (value) => {
  setResults(
    mockData.filter(
      (d) =>
        d.text.toLowerCase().includes(value.toLowerCase()) &&
        !selected.includes(d)
    )
  );
};

const select = (id) => {
  const selectedItem = mockData.find((d) => d.id === id);
  if (selectedItem) {
    setSelected([...selected, selectedItem]);
  } else {
    setSelected([...selected]);
  }
};

const remove = (id) => {
  setSelected(selected.filter((s) => s.id !== id));
};

<TagPicker
  {...args}
  results={results}
  selectedResults={selected}
  onInput={onInput}
  onSelection={select}
  onTagRemove={remove}
  noResultsText="No results"
  placeholder="Enter Team or Bob"
/>;
```
npm package: @igloo-ui/text-editor
Description: The text editor is a multiline text component with text formatting capabilities. It supports bold, italic, underline, strikethrough and markdown shortcuts as well as adding links and lists.
Author: Officevibe Inc.
Latest version: 1.0.0

# TextEditor

The text editor is a multiline text component with text formatting capabilities.
It supports bold, italic, underline, strikethrough and markdown shortcuts as well as adding links and lists.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/text-editor` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/text-editor
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/text-editor
```

## Usage

Then to use the component in your code just import it!

```jsx
import TextEditor from '@igloo-ui/text-editor';

<TextEditor placeholder="Enter text here" />;
```
npm package: @igloo-ui/textarea
Description: The textarea component defines a multi-line text input control.
Author: Officevibe Inc.
Latest version: 0.7.0

# Textarea

The textarea component defines a multi-line text input control.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/textarea` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/textarea
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/textarea
```

## Usage

Then to use the component in your code just import it!

```jsx
import Textarea from '@igloo-ui/textarea';

<Textarea
  placeholder="The character count will count down to show how many characters are left. MaxLength is required"
  maxLength={1000}
  showCharactersIndicator
/>;
```
npm package: @igloo-ui/toaster
Description: The Toaster component is a non-disruptive message that appears at the top of the viewport to provide quick, at-a-glance feedback on the outcome of an action.
Author: Officevibe Inc.
Latest version: 3.1.0

# Toaster

The Toaster component is a non-disruptive message that appears at the top of the viewport to provide quick, at-a-glance feedback on the outcome of an action.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/toaster` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/toaster
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/toaster
```

## Usage

### Displaying a toast

Then to use the component in your code just import it!

```jsx
import Toaster, { toast } from '@igloo-ui/toaster';
import Button from '@igloo-ui/button';

const App = () => {
  return (
    <div>
      <Button onClick={() => toast.success('Successfully toasted!')}>
        Success
      </Button>

      <Toaster />
    </div>
  );
};
```

### Displaying multiple toasts with custom duration

Then to use the component in your code just import it!

```jsx
import Toaster, { toast } from '@igloo-ui/toaster';
import Button from '@igloo-ui/button';

const App = () => {
  return (
    <div>
      <Button onClick={() => toast.success('Successfully toasted!', {duration: 6000})}>
        Success
      </Button>
      <Button
        appearance="secondary"
        onClick={() => toast.error("This didn't work!", {duration: 3000}))}
      >
        Error
      </Button>

      <Toaster />
    </div>
  );
};
```
npm package: @igloo-ui/toggle
Description: Toggle is a component used for binary choice for a given option.
Author: Officevibe Inc.
Latest version: 2.1.0

# Toggle

Toggle is a component used for binary choice for a given option.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/toggle` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/toggle
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/toggle
```

## Usage

```jsx
import Toggle from '@igloo-ui/toggle';

<Toggle htmlFor="toggle-id">Label</Toggle>;
```
npm package: @igloo-ui/tokens
Description: Igloo tokens are all the values needed to construct and maintain a design system — spacing, color, fonts, opacity, etc..
Author: Groupe Officevibe Inc.
Latest version: 2.1.0

# `@igloo-ui/tokens`

Igloo tokens are all the values needed to construct and maintain a design system — spacing, color, fonts, opacity, etc..

## Getting started

To install @igloo-ui/tokens in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```
npm install @igloo-ui/tokens
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```
yarn add @igloo-ui/tokens
```

## Usage

### Sass

In Sass, you can import the files by doing:

```
@import '@igloo-ui/tokens/dist/_variables.scss';
```

### CSS

In CSS, you can import the files by doing:

```
@import '@igloo-ui/tokens/dist/variables.css';
```

### Fonts

You can also do it via CSS Import:

```
@import '@igloo-ui/tokens/dist/fonts.css';
```

## License

Copyright © 2019, GSoft inc. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/gsoft-inc/gsoft-license/blob/master/LICENSE.
npm package: @igloo-ui/tooltip
Description: Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when users hover, focus, tap, or click.
Author: Officevibe Inc.
Latest version: 4.1.0

# Tooltip

Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when users hover, focus, tap, or click.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/tooltip` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/tooltip
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/tooltip
```

## Usage

Then to use the component in your code just import it!

```js
import Tooltip from '@igloo-ui/tooltip';

<Tooltip content="Lorem ipsum dolor">Element</Tooltip>;
```
npm package: @igloo-ui/vertical-bar-chart
Description: A vertical bar chart is a graphical representation that uses vertical bars to display data values, with each bar representing a category or group. The height of each bar corresponds to the magnitude of the data it represents, allowing for easy comparison 
Author: Officevibe Inc.
Latest version: 0.5.0

# VerticalBarChart

A vertical bar chart is a graphical representation that uses vertical bars to display data values, with each bar representing a category or group. The height of each bar corresponds to the magnitude of the data it represents, allowing for easy comparison between different categories.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/vertical-bar-chart` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/vertical-bar-chart
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/vertical-bar-chart
```

## Usage

Then to use the component in your code just import it!

```jsx
import VerticalBarChart from '@igloo-ui/vertical-bar-chart';
import tokens from '@igloo-ui/tokens/dist/base10/tokens.json';

const getColorFromScore = (score) => {
  if (score >= 0 && score < 2) return tokens.coral400;
  if (score >= 2 && score < 4) return tokens.coral200;
  if (score >= 4 && score < 6) return tokens.creamsicle100;
  if (score >= 6 && score < 9) return tokens.seaweed200;
  return tokens.seaweed400;
};

const values = [12, 20, 35, 18, 3, 42, 60, 0, 16, 43, 15];
const chartData = values.map((value, index) => {
  return {
    score: index,
    value,
    color: getColorFromScore(index),
  };
});

<VerticalBarChart data={chartData} />;
```