open-index/open-npm huggingface dataset:
npm package: @rocketsoftware/carbon-components
Description: Rocket Software's open source design system based on the Carbon Design System by IBM.
Latest version: 2.2.0

# @rocketsoftware/carbon-components

> Rocket Software's open source design system based on the Carbon Design System
> by IBM.

## Getting started

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

```bash
npm install -S @rocketsoftware/carbon-components
```

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

```bash
yarn add @rocketsoftware/carbon-components
```

## 📖 API Documentation

If you're looking for `@rocketsoftware/carbon-components` API documentation,
check out:

- [Accessibility](./docs/accessibility.md)
- [Deploying-changes](./docs/deploying-changes.md)
- [Experimental](./docs/experimental.md)
- [G11n](./docs/g11n.md)
- [Migration](./docs/migration)
- [Sass](./docs/sass.md)
- [Vendor-styles](./docs/vendor-styles.md)

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @rocketsoftware/carbon-components-react
Description: React components for Carbon.
Latest version: 2.2.0

# @rocketsoftware/carbon-components-react

> A collection of
> [Carbon Components](https://github.com/RocketSoftware/carbon/tree/master/packages/components)
> built with [React](https://reactjs.org/).

If you're new to React.js or Carbon, check out our
[guide](https://medium.com/carbondesign/up-running-with-carbon-react-in-less-than-5-minutes-25d43cca059e)
to help get you up and running.

## Getting started

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

```bash
npm install -S carbon-components carbon-components-react carbon-icons
```

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

```bash
yarn add carbon-components carbon-components-react carbon-icons
```

If you want to try out `carbon-components-react`, you can also use
[CodeSandbox](https://codesandbox.io/s/github/RocketSoftware/carbon/tree/master/packages/react/examples/codesandbox).

[![Edit carbon-components-react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/RocketSoftware/carbon/tree/master/packages/react/examples/codesandbox)

## Usage

```js
import { Button } from 'carbon-components-react';

function MyComponent() {
  return <Button>Example usage</Button>;
}
```

For more information about each component, check out our
[Storybook](https://react.carbondesignsystem.com). For guides on getting
started, head on over to our
[Website](https://www.carbondesignsystem.com/get-started/develop/react) or check
out our
[Tutorial](https://www.carbondesignsystem.com/developing/react-tutorial/overview/)

# :books: Documentation

- [Storybook](https://react.carbondesignsystem.com)
- [Getting started](https://www.carbondesignsystem.com/get-started/develop/react)
- [🏃‍♀️ Migration Guides](./docs/migration)
  - [v6 to v7](./docs/migration/migrate-to-7.x.md)

## 📚 Examples

If you're looking for more examples on how to use `carbon-components-react`, we
have some examples that you can check out:

- [Create React App](./examples/create-react-app)
- [Next.js](./examples/next)
- [React Router](./examples/react-router)

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @rocketsoftware/charts
Description: Carbon charting components
Author: IBM
Latest version: 1.3.0

# `@rocketsoftware/charts`

> Carbon Charting components

## Getting started

Run the following command using [npm](https://www.npmjs.com/):

```bash
npm install -S @rocketsoftware/charts d3@5.x
```

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

```bash
yarn add @rocketsoftware/charts d3@5.x
```

**Note:** you'd also need to install `carbon-components` if you're not using a
bundled version of the library.

## Step-by-step instructions

Read
[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials-getting-started--vanilla)

## Codesandbox examples

[Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts).

**When opening the link above**, click on the **Edit on Codesandbox** button for
each demo to see an isolated project showing you how to reproduce the demo.

## Charting data & options

Although we will definitely introduce new models in the future as we start
shipping new components such as maps, Data and options follow the same model in
all charts, with minor exceptions and differences in specific components.

For instance in the case of a donut chart you're able to pass in an additional
field called `center` in your options configuring the donut center.

For instructions on using the **tabular data format**, see
[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format)

There are also additional options available depending on the chart type being
used,
[see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).

Customizable options (specific to chart type) can be found
[here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)
npm package: @rocketsoftware/charts-react
Description: Carbon charting components for React
Author: IBM
Latest version: 1.3.0

# `@rocketsoftware/charts-react`

> Carbon Charting React Wrappers

**[Storybook demos](https://carbon-design-system.github.io/carbon-charts/react)**

**[Storybook demo sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data)**

## Getting started

Run the following command using [npm](https://www.npmjs.com/):

```bash
npm install -S @rocketsoftware/charts @rocketsoftware/charts-react d3@5.x
```

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

```bash
yarn add @rocketsoftware/charts @rocketsoftware/charts-react d3@5.x
```

**Note:** you'd also need to install `carbon-components` if you're not using a
bundled version of the library.

## Step-by-step instructions

Read
[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials-getting-started--react)

## Codesandbox examples

[Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts/react).

**When opening the link above**, click on the **Edit on Codesandbox** button for
each demo to see an isolated project showing you how to reproduce the demo.

## Charting data & options

Although we will definitely introduce new models in the future as we start
shipping new components such as maps, Data and options follow the same model in
all charts, with minor exceptions and differences in specific components.

For instance in the case of a donut chart you're able to pass in an additional
field called `center` in your options configuring the donut center.

For instructions on using the **tabular data format**, see
[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format)

There are also additional options available depending on the chart type being
used,
[see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).

Customizable options (specific to chart type) can be found
[here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)
npm package: @rocketsoftware/elements
Description: A collection of design elements in code for the IBM Design Language
Latest version: 2.0.0

# @rocketsoftware/elements

> A collection of design elements in code for the IBM Design Language

## Getting started

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

```bash
npm install -S @rocketsoftware/elements
```

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

```bash
yarn add @rocketsoftware/elements
```

## Usage

`@carbon/elements` includes all of the other elements packages in the project
and can be useful instead of installing each package individually. This package
offers support for both the JavaScript exports from these packages, in addition
to Sass support.

### Sass

`@carbon/elements` provides two entrypoints for you to leverage: a bundled
entrypoint and a module entrypoint. For most use-cases, the bundled entrypoint
will work for you. If you have taken an extra step to configure your build
configuration to properly resolve `@import`s from files, then feel free to use
the module entrypoint.

To include the bundled entrypoint, you can include the following in your Sass
file:

```scss
@import '@carbon/elements/scss/elements';

# Import a specific package nested in elements
@import '@carbon/elements/scss/themes/g10';
```

Include in the example above is how to access nested packages. These packages
are ones that you could optinonally install as a package, like `@carbon/themes`,
but we've included them inline as a convenience.

To include the module entrypoint, you can include the following in your Sass
file:

```scss
@import '@carbon/elements/scss/index';
```

### JavaScript

`@carbon/elements` re-exports the exports from all of the packages that it
exports. That means that if an individual package exports a value, then you can
import it the same way when using `@carbon/elements`. For example, with
`@carbon/colors` we might write:

```js
import { colors } from '@carbon/colors';
```

With `@carbon/elements`, you can also import `colors`:

```js
import { colors } from '@carbon/elements';
```

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @rocketsoftware/grid
Description: Grid for digital and software products using the Carbon Design System
Latest version: 2.0.0

<!-- alex disable primitive -->

# @rocketsoftware/grid

> Grid for digital and software products using the Carbon Design System

## Getting started

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

```bash
npm install -S @rocketsoftware/grid
```

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

```bash
yarn add @rocketsoftware/grid
```

## Usage

_More examples and documentation can be found on this
[live demo website](https://carbon-elements.netlify.com/grid/examples/preview/)._

`@carbon/grid` has three primitive class types to use in order to structure your
application. They include:

- `bx--grid`, defines the overall grid context and sets some useful attributes
  like width and margin
- `bx--row`, defines a row of items in a grid
- `bx--col`, used to define individual columns

You can use a combination of these classes to build a layout. For example, if we
wanted a 4 column layout for a small breakpoint we could use the following
markup:

```html
<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col">1/4</div>
    <div class="bx--col">1/4</div>
    <div class="bx--col">1/4</div>
    <div class="bx--col">1/4</div>
  </div>
</div>
```

While this layout can work for some grid usage scenarios, we probably will want
more control over how many columns our layout will span at each given
breakpoint.

By default, `@carbon/grid` uses the breakpoints defined in `@carbon/layout`.
There are five breakpoints: `sm`, `md`, `lg`, `xlg`, and `max`. You can use each
one in combination with a column to specify the number of columns to span at a
given breakpoint. For example, we could rewrite the above example to be:

```html
<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col-sm-1">1/4</div>
    <div class="bx--col-sm-1">1/4</div>
    <div class="bx--col-sm-1">1/4</div>
    <div class="bx--col-sm-1">1/4</div>
  </div>
</div>
```

The `.bx--col-sm-1` class names tells us that this `<div>` should only span one
column at our `sm` breakpoint. By default, as we scale beyond the breakpoint the
layout will still take up a percentage of the overall width.

## 📚 Examples

If you're looking for more examples on how to use `@carbon/grid`, we have some
examples that you can check out:

- [css-grid](./examples/css-grid)

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @rocketsoftware/icons-handlebars
Description: Handlebars helpers for icons
Latest version: 2.0.0

# @rocketsoftware/icons-handlebars

> Handlebars helpers for icons

## Getting started

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

```bash
npm install -S @rocketsoftware/icons-handlebars
```

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

```bash
yarn add @rocketsoftware/icons-handlebars
```

## Usage

You can use the `carbon-icon` helper by passing in the name of the icon you'd
like to render. For example:

```hbs
{{ carbon-icon "Accessibility32" }}
```

This will output the default `<svg>` markup for the `Accessibility` icon at
32x32. You can pass in additional properties like `aria-label` by doing:

```hbs
{{ carbon-icon "Accessibility32" aria-label="Accessibility label" }}
```

These attributes will be applied to the top-level `<svg>` node.

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @rocketsoftware/icons-vue
Description: Vue components for icons
Latest version: 2.0.0

# @rocketsoftware/icons-vue

> Vue components for icons

## Getting started

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

```bash
npm install -S @rocketsoftware/icons-vue
```

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

```bash
yarn add @rocketsoftware/icons-vue
```

## Usage

Icons in this package support the following sizes: `16`, `20`, `24`, and `32`
pixels. These sizes refer to the width and height of the icon.

You can install these components from `@carbon/icons-vue` through two ways. The
first is to install them when you're initializing your Vue app. For example:

```js
import { CarbonIconsVue } from '@carbon/icons-vue';
import Bee32 from '@carbon/icons-vue/es/bee/32';
import Vue from 'vue';
import App from './App.vue';

Vue.use(CarbonIconsVue, {
  components: {
    Bee32,
  },
});

new Vue({
  render: (h) => h(App),
}).$mount('#app');
```

_Note: if you would like to find the import path for an icon, you can reference
our [icon preview](https://carbon-elements.netlify.com/icons/examples/preview/)_

Using `CarbonIconsVue` we can pass in any of the icon components that we'd like
to use. In our application, we can then use them by doing:

```vue
<template>
  <Bee32 />
</template>
```

If you would rather not register icons globally, you can also import them into
individual components.

```js
import Bee32 from '@carbon/icons-vue/es/bee/32';

export default {
  name: 'MyComponent',
  component: {
    Bee32,
  },
};
```

You can pass in props to any icon component for things like accessibility
labels, custom classes, event handlers, and more. For example:

```vue
<template>
  <Bee32 aria-label="Bee" class="custom-class" v-on:click="handler" />
</template>
```

## 📚 Examples

If you're looking for more examples on how to use `@rocketsoftware/icons-vue`,
we have some examples that you can check out:

- [vue-cli](./examples/vue-cli)

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @rocketsoftware/layout
Description: Layout helpers
Latest version: 2.0.0

# @rocketsoftware/layout

> Layout helpers

## Getting started

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

```bash
npm install -S @rocketsoftware/layout
```

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

```bash
yarn add @rocketsoftware/layout
```

## Usage

`@carbon/layout` provides a couple of useful utilities alongside the
specification for the grid system for the IBM Design Language. This package
includes:

| Feature         | Description                                                                                                                             |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Breakpoints     | Variables and settings for the IBM Design Grid, including gutter and breakpoints. It also includes helpers for working with breakpoints |
| Unit conversion | Helpers for converting from `px` to `rem` or `em`.                                                                                      |
| Key heights     | Helpers for working with key heights at different breakpoints                                                                           |
| Mini unit       | Helpers for working in multiples of the mini-unit                                                                                       |
| Spacing         | Provides a spacing scale and helper for using steps in the scale                                                                        |

One important thing to remember is that `@carbon/layout` is not responsible for
the grid itself. If you are looking for a grid implementation to use, definitely
checkout the [`@carbon/grid`](../grid) package.

`@carbon/layout` provides the above features in both Sass and JavaScript. If
you're looking for support in a different language, feel free to file an issue
proposing the new addition!

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @rocketsoftware/motion
Description: Motion helpers
Latest version: 2.0.0

# @rocketsoftware/motion

> Motion helpers

## Getting started

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

```bash
npm install -S @rocketsoftware/motion
```

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

```bash
yarn add @rocketsoftware/motion
```

## Usage

`@carbon/motion` supports standard, entrance, and exit easing curves in two
motion modes: productive and expressive. You can access these curves using
either Sass or JavaScript.

### Sass

`@carbon/motion` exports a `carbon--motion` function and `carbon--motion` mixin
that you can use to access the value of a motion curve or include that curve as
the `transition-timing-function` for a selector. To use these helpers, you can
do the following in your project:

```scss
@import '@carbon/motion/scss/motion.scss';

.my-custom-selector {
  // Supplies the standard easing curve, using the productive mode by default
  transition-timing-function: carbon--motion(standard);
}

.my-custom-selector-v2 {
  // Supplies the standard easing curve, but with the expressive mode, on the
  // transition-timing-function property for this selector
  @include carbon--motion(standard, expressive);
}
```

Both the `motion` function and mixin support passing in the name of the motion
curve and the mode you want to work in.

### JavaScript

If you're using `@carbon/motion` as a JavaScript dependency, we export our
easings and a function called `motion` that you can use. For example:

```js
// CommonJS
const { easings, motion } = require('@carbon/motion');
```

You can also include this as a JavaScript module:

```js
// ESM
import { easings, motion } from '@carbon/motion';

motion('standard', 'productive'); // Returns a string `cubic-bezier()` function
```

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @rocketsoftware/themes
Description: Themes for applying color in the Carbon Design System
Latest version: 2.0.0

<!-- alex disable white -->

# @rocketsoftware/themes

> Themes for applying color in the Carbon Design System

## Getting started

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

```bash
npm install -S @rocketsoftware/themes
```

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

```bash
yarn add @rocketsoftware/themes
```

## Usage

You can use `@carbon/themes` in JavaScript or Sass by including this package in
your project. By default, `@carbon/themes` provides a set of color tokens that
are pre-defined for a specific theme. Currently, we offer the following color
themes: white, gray 10, gray 90, gray 100 .

You can preview all of the token values for this on the
[Carbon Design System website](https://www.carbondesignsystem.com/guidelines/color/usage)
.

### Sass

If your project is using Sass, you can include this package and the
corresponding default theme by writing the following in your Sass file:

```scss
@import '@carbon/themes/scss/themes';
```

By default, the white theme will be initialized. If you would like to include
another theme, you can do so by setting the global theme variable and then
calling our mixin. For example:

```scss
@import '@carbon/themes/scss/themes';

$carbon--theme: $carbon--theme--g10;

// Use the gray 10 theme
@include carbon--theme();
```

Inline theming can be done by using the mixin. For example:

```scss
@import '@carbon/themes/scss/themes';

// Use the default white theme here

.my-dark-theme {
  @include carbon--theme($carbon--theme--g90) {
    // Use the dark theme here
  }
}

.my-darker-theme {
  @include carbon--theme($carbon--theme--g100) {
    // Use the darker theme here
  }
}
```

### JavaScript

If you're looking to use these themes in JavaScript, we export a variety of
bindings for you to use, including:

```js
import {
  // An object of all themes
  themes,

  // Direct theme values
  white,
  g10,
  g90,
  g100,

  // Specific token values
  interactive01,
  interactive02,
} from '@carbon/themes';
```

## 📚 Examples

If you're looking for more examples on how to use `@rocketsoftware/themes`, we
have some examples that you can check out:

- [sass-modules](./examples/sass-modules)

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).