open-index/open-npm huggingface dataset:
npm package: @hrc/babel-config
Description: Create a Babel config for component packages of hrc to reduce bundle size
Author: Héctor Ochoa
Latest version: 1.2.2

# @hrc/babel-config

Create a `Babel` config for component packages of
[`hrc`](https://hdoc1509.github.io/hrc/) to reduce bundle size.

> [!NOTE]
> If your project supports [`Vite`](https://vitejs.dev/), you can use
> [`vite-plugin-hrc-import`](https://hdoc1509.github.io/hrc/packages/vite-plugin-hrc-import)
> instead.

## Installation

```bash
npm install -D @hrc/babel-config babel-plugin-import
```

## Usage

In your `.babelrc.js` file:

```js
import hrcConfig from "@hrc/babel-config";

// single package
const plugins = [
  // ...otherPlugins,
  ...hrcConfig("input"),
];

// multiple packages
const plugins = [
  // ...otherPlugins,
  ...hrcConfig(["button", "input"]),
];

// all supported packages
const plugins = [
  // ...otherPlugins,
  ...hrcConfig("all"),
];

module.exports = { plugins };
```

## Documentation

- [Package Documentation](https://hdoc1509.github.io/hrc/packages/babel-config)
npm package: @hrc/button
Description: Simple button components for your React app.
Author: Héctor Ochoa
Latest version: 3.1.2

# @hrc/button

<div align="center">

[![version](https://img.shields.io/npm/v/%40hrc%2Fbutton)](https://www.npmjs.com/package/@hrc/button)
![bundle size](https://img.shields.io/bundlephobia/minzip/%40hrc%2Fbutton)
![downloads](https://img.shields.io/npm/dm/%40hrc%2Fbutton)

</div>

Simple button components for your React app.

## Installation

```bash
npm install @hrc/button
```

## Usage

```js
import { Button, ButtonIcon, ButtonGroup } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

export function PackageDemo() {
  return (
    <>
      <Button size="large" color="primary" iconEnd={<Icon name="delete" />}>
        Delete
      </Button>
      <ButtonIcon color="error">
        <Icon name="favorite" />
      </ButtonIcon>
      <ButtonGroup>
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
        <ButtonIcon>
          <Icon name="search" />
        </ButtonIcon>
      </ButtonGroup>
    </>
  );
}
```

## Documentation

- [Package Documentation](https://hdoc1509.github.io/hrc/packages/button/)

<!-- markdownlint-disable-file MD033 -->
npm package: @hrc/input
Description: Simple input components for your React app.
Author: Héctor Ochoa
Latest version: 1.2.2

# @hrc/input

<div align="center">

[![version](https://img.shields.io/npm/v/%40hrc%2Finput)](https://www.npmjs.com/package/@hrc/input)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40hrc%2Finput)
![npm downloads](https://img.shields.io/npm/dm/%40hrc%2Finput)

</div>

Simple input components for your React app.

## Installation

```bash
npm install @hrc/input
```

## Usage

```js
import { useState } from "react";
import { Input, Textarea, Checkbox, Radio, RadioGroup } from "@lib/main";
import { Icon } from "@hrc/material-icons";

export function PackageDemo() {
  const [hasNewsletter, setHasNewsletter] = useState(false);

  return (
    <>
      <Input
        label="Username"
        placeholder="John Doe"
        iconStart={<Icon name="people" />}
      />
      <Textarea label="Comment" placeholder="Hello world" color="secondary" />
      <Checkbox
        label="Receive newsletter"
        color="success"
        checked={hasNewsletter}
        onChange={(e) => setHasNewsletter(e.target.checked)}
      />
      <RadioGroup
        name="newsletter-frequency"
        defaultValue="weekly"
        disabled={!hasNewsletter}
      >
        <Radio label="Daily" value="daily" />
        <Radio label="Weekly" value="weekly" />
        <Radio label="Monthly" value="monthly" />
      </RadioGroup>
    </>
  );
}
```

## Documentation

- [Package Documentation](https://hdoc1509.github.io/hrc/packages/input)

<!-- markdownlint-disable-file MD033 -->
npm package: @hrc/material-icons
Description: Simple component for Material Design Icons font in your React app
Author: Héctor Ochoa
Latest version: 2.3.0

# @hrc/material-icons

<p align="center">
  <a href="https://www.npmjs.com/package/@hrc/material-icons">
    <img alt="npm" src="https://img.shields.io/npm/v/%40hrc%2Fmaterial-icons">
  </a>
  <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/%40hrc%2Fmaterial-icons">
  <img alt="npm" src="https://img.shields.io/npm/dm/%40hrc%2Fmaterial-icons">
</p>

Simple component for Material Design Icons font in your React app.

## Installation

```bash
npm install @hrc/material-icons @material-design-icons/font
```

## Usage

Import `@material-design-icons/font` in your entry file (example: src/main.jsx in Vite):

```js
import "@material-design-icons/font";
```

<!-- TODO: Add this info message to website -->

> :information_source: Check [@material-design-icons/font docs](https://www.npmjs.com/package/@material-design-icons/font#usage) for more info.

Then, in your `App.jsx` or another file:

```js
import { Icon } from "@hrc/material-icons";

function App() {
  return (
    <>
      <Icon name="shopping_cart" size="large" variant="outlined" />
    </>
  );
}
```

## Documentation

- [Package Documentation](https://hdoc1509.github.io/hrc/packages/material-icons/)
npm package: @hrc/spinner
Description: Simple spinner components for your React app.
Author: Héctor Ochoa
Latest version: 0.4.1

# @hrc/spinner

<div align="center">

[![version](https://img.shields.io/npm/v/%40hrc%2Fspinner)](https://www.npmjs.com/package/@hrc/spinner)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40hrc%2Fspinner)
![npm downloads](https://img.shields.io/npm/dm/%40hrc%2Fspinner)

</div>

Simple spinner components for your React app.

## Installation

```bash
npm install @hrc/spinner
```

## Usage

```js
import {
  BarsBounceSpinner,
  BladeSpinner,
  ChaseSpinner,
  CubeGridSpinner,
  DualCubeSpinner,
  GrowingEllipsisSpinner,
  RippleSpinner,
} from "@hrc/spinner";

export function PackageDemo() {
  return (
    <>
      <BarsBounceSpinner size="large" />
      <BladeSpinner color="primary" />
      <ChaseSpinner color="secondary" size="small" />
      <CubeGridSpinner color="error" speed="fast" />
      <DualCubeSpinner color="info" />
      <GrowingEllipsisSpinner color="warning" speed="slow" />
      <RippleSpinner color="success" size="large" />
    </>
  );
}
```

## Documentation

- [Package documentation](https://hdoc1509.github.io/hrc/packages/spinner/)

<!-- markdownlint-disable-file MD033 -->
npm package: @hrc/toggle-theme
Description: Simple component for toggle between light and dark theme in your React app
Author: Héctor Ochoa
Latest version: 2.4.0

# @hrc/toggle-theme

<div align="center">

[![version](https://img.shields.io/npm/v/%40hrc%2Ftoggle-theme)](https://www.npmjs.com/package/@hrc/toggle-theme)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40hrc%2Ftoggle-theme)
![npm downloads](https://img.shields.io/npm/dm/%40hrc%2Ftoggle-theme)

</div>

Simple component for toggle between `light` and `dark` theme in your React app.

- It saves the theme in `localStorage` with the key `theme` by default
- If there is no theme in `localStorage`, the default is the user's preferred
  theme

## Installation

```bash
npm install @hrc/toggle-theme
```

## Usage

1. Use the component in your project:

   ```js
   import { ThemeButton } from "@hrc/toggle-theme";
   import { Icon } from "@hrc/material-icons";

   const Light = () => {
     return (
       <>
         <Icon name="light_mode" size="large" color="warning" />
         <span>Light</span>
       </>
     );
   };

   const Dark = () => {
     return (
       <>
         <Icon name="dark_mode" size="large" color="info" />
         <span>Dark</span>
       </>
     );
   };

   export function PackageDemo() {
     return <ThemeButton lightElement={<Light />} darkElement={<Dark />} />;
   }
   ```

2. Add your styles:

   ```css
   :root {
     --bg-color: #fff;
     --text-color: #17181c;
   }
   [data-theme="dark"] {
     --bg-color: #17181c;
     --text-color: #fff;
   }

   body {
     background-color: var(--bg-color);
     color: var(--text-color);
   }
   ```

## Documentation

- [Package Documentation](https://hdoc1509.github.io/hrc/packages/toggle-theme/)
npm package: @hrc/type-utils
Description: Type utilities used by component packages of hrc.
Author: Héctor Ochoa
Latest version: 1.1.4

# @hrc/type-utils

Type utilities used by the following packages of
[`hrc`](https://hdoc1509.github.io/hrc/):

- [`@hrc/button`](https://hdoc1509.github.io/hrc/packages/button)
- [`@hrc/input`](https://hdoc1509.github.io/hrc/packages/input)

## Installation

```bash
npm install -D @hrc/type-utils
```

## Usage

```ts
import type { Simplify } from "@hrc/type-utils";

type MyType = {
  a: number;
  b: string;
};

type AnotherType = {
  c: boolean;
  d: number;
};

type FlattenedType = Simplify<MyType & AnotherType>;
```

## Documentation

- [Package Documentation](https://hdoc1509.github.io/hrc/packages/type-utils)