# @labex-hambre-ui/react

> 🤖 @labex-hambre-ui/react

Latest version **4.0.0** (published 2024-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @labex-hambre-ui/react
pnpm add @labex-hambre-ui/react
yarn add @labex-hambre-ui/react
bun add @labex-hambre-ui/react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2024-04-22 |
| First published | 2023-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 700.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lacymelo |

## Links

- npm: https://www.npmjs.com/package/@labex-hambre-ui/react
- npm.io page: https://npm.io/package/@labex-hambre-ui/react

## Dependencies (8)

- [phosphor-react](https://npm.io/package/phosphor-react.md) ^1.4.1
- [@stitches/react](https://npm.io/package/@stitches/react.md) ^1.2.8
- [@radix-ui/react-avatar](https://npm.io/package/@radix-ui/react-avatar.md) ^1.0.4
- [@radix-ui/react-select](https://npm.io/package/@radix-ui/react-select.md) ^2.0.0
- [@radix-ui/react-switch](https://npm.io/package/@radix-ui/react-switch.md) ^1.0.3
- [@radix-ui/react-checkbox](https://npm.io/package/@radix-ui/react-checkbox.md) ^1.0.4
- [@radix-ui/react-radio-group](https://npm.io/package/@radix-ui/react-radio-group.md) ^1.1.3
- [@radix-ui/react-alert-dialog](https://npm.io/package/@radix-ui/react-alert-dialog.md) ^1.0.5

## Recent versions

- 4.0.0 (latest) — 2024-04-22
- 3.5.0 — 2024-01-29
- 3.4.0 — 2024-01-16
- 3.3.0 — 2024-01-16
- 3.2.0 — 2024-01-15
- 3.1.0 — 2024-01-11
- 3.0.0 — 2024-01-04
- 2.10.0 — 2024-01-02
- 2.9.0 — 2023-12-26
- 2.8.0 — 2023-12-26
- 2.7.0 — 2023-12-25
- 2.6.0 — 2023-12-22
- 2.5.0 — 2023-12-22
- 2.4.0 — 2023-12-22
- 2.3.0 — 2023-12-21
- … 3 more at https://npm.io/package/@labex-hambre-ui/react/versions

## README

<div align="center">
  <h1>
    🤖 @labex-hambre-ui/react
  </h1>

  > Esta biblioteca fornece um conjunto de componentes React para a construção de interfaces de usuário, sendo compatível com as versões mais recentes do NextJS 13 e 14 🚀, seguindo as diretrizes dos três pilares.
</div>

## :rocket: Abordagem dos três pilares
- [X] Server Components 👉  Para não usar Javascript no lado do cliente.
- [X] Client Components 👉  Enviando somente o javascript necessário para o navegador (cliente).
- [X] Streaming SSR 👉  Ler/escrever dados de forma parcial + Server-Side Rendering
---

##  :rocket:  Componentes

---

- [X] Avatar
- [X] Box
- [X] Button
- [X] Checkbox
- [X] Heading
- [X] Loading
- [X] MessageIcon
- [X] MultiStep
- [X] Radio
- [X] Select
- [X] Switch
- [X] Text
- [X] TextArea
- [X] TextInput
- [X] Transition

## :rocket: Compatibilidade
> A biblioteca @labex-hambre-ui/react é compatível com as seguintes versões de dependências:

- [X] NextJS 12
- [X] NextJS 13
- [X] NextJS 14
- [X] @radix-ui

##  📥 Instalações e configurações 
> Para instalar o @labex-hambre-ui/react, utilize o seguinte comando npm:
```bash
npm i @labex-hambre-ui/react@latest
```
🛠️ Para ativar o Intellisense da biblioteca na criação de um styled component, entre em `tsconfig.json` e altere o moduleResolution para 'Node', dessa forma.
```bash
"moduleResolution": "Node",
```

🛠️ Todos os arquivos `styles.js` que você criar, seja para uma página ou componente, deve ter a configuração `use client` antes de tudo, pois os estilos devem ser renderizados no lado do cliente, como neste exemplo a seguir.
```bash
'use client'
import { Text, styled } from "@labex-hambre-ui/react";

export const LinkRedirect = styled('div', {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '$2',
    cursor: 'pointer',
    color: '$hambre600',
    fontSize: '$sm',
    textDecoration: 'none',

    '&:hover': {
        color: '$hambre300',
        transition: 'all ease .36s'
    },
})
```

## :eyes: Visite o Storybook da Biblioteca
👉 [Storybook](http://lacymelo.github.io/labex-hambre-ui/?path=/docs/home--documentation)

# :closed_book: License

Released in 2023 :closed_book: License
Made with ♥ by  :man_student: Laciene Melo :wave: [#lacymelo](https://github.com/lacymelo) 🚀.
This project is under the [MIT license](./LICENSE).
Give a ⭐️ if this project helped you!

---
_Source: https://npm.io/package/@labex-hambre-ui/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._