npm package: @ompo/berry
Description: <div align="center">   <img src="public/images/BerryBranco.svg" alt="Berry Design System" width="226" />   <h1>Berry Design System</h1>   <p>Uma biblioteca de componentes React desenvolvida pela Room Company</p> </div>
Author: Room Company
Latest version: 0.0.1

<div align="center">
  <img src="public/images/BerryBranco.svg" alt="Berry Design System" width="226" />
  <h1>Berry Design System</h1>
  <p>Uma biblioteca de componentes React desenvolvida pela Room Company</p>
</div>

## 🚀 Sobre o Berry

O Berry é um Design System desenvolvido em React + TypeScript que serve como base para todos os projetos front-end da Room Company. Construído com foco em composição, acessibilidade e performance, o Berry oferece uma coleção abrangente de componentes reutilizáveis e tokens de design.

## 📦 Instalação

```bash
# Usando npm
npm install @room-company/berry

# Usando yarn
yarn add @room-company/berry

# Usando pnpm
pnpm add @room-company/berry
```

## 🎯 Principais Características

- **Composition Pattern**: Arquitetura baseada em composição para maior flexibilidade e reusabilidade
- **TypeScript**: Tipagem forte para melhor DX e prevenção de erros
- **SCSS Modules**: Estilização modular e encapsulada
- **Acessibilidade**: Componentes seguindo WCAG 2.1
- **Design Tokens**: Sistema completo de tokens para consistência visual
- **Temas**: Suporte nativo a temas claro e escuro
- **Zero Dependencies**: Mínimo de dependências externas
- **Tree-shaking**: Otimizado para bundle final

## 🛠️ Tecnologias

- React 18+
- TypeScript 5
- Vite
- SCSS Modules
- Storybook 7
- Vitest
- ESLint
- Prettier

## 📚 Uso

```tsx
import { Button } from '@room-company/berry'

function App() {
  return (
    <Button variant="filled" color="#7C3AED">
      Click me
    </Button>
  )
}
```

## 🎨 Design Tokens

O Berry utiliza um sistema de design tokens para garantir consistência visual:

```scss
// Cores
$brand-60: #7257FF;
$brand-70: #5336E2;

// Tipografia
$font-family-primary: 'Inter', sans-serif;
$font-size-sm: 0.875rem;

// Espaçamentos
$spacing-4: 1rem;
$spacing-8: 2rem;
```

## 🏗️ Arquitetura

O Berry utiliza o Composition Pattern para criar componentes flexíveis e reutilizáveis:

```tsx
// Exemplo de composição
<Accordion.Root>
  <Accordion.Title>Título</Accordion.Title>
  <Accordion.Content>Conteúdo</Accordion.Content>
</Accordion.Root>
```

## ⚡ Performance

- Bundle size otimizado com tree-shaking
- Code-splitting automático
- Lazy loading de componentes
- Mínimo de dependências externas
- CSS-in-JS evitado em favor de SCSS Modules

## 🧪 Testes

```bash
# Executar testes unitários
npm test

# Executar testes com coverage
npm test:coverage
```

## 📖 Documentação

A documentação completa está disponível através do Storybook:

```bash
# Iniciar Storybook
npm run storybook
```

## 🤝 Contribuição

O Berry é um projeto interno da Room Company. Para contribuir:

1. Siga os padrões de código
2. Adicione testes para novas features
3. Atualize a documentação
4. Mantenha a compatibilidade com versões anteriores

## 📄 Licença

Este projeto é propriedade da Room Company.

## 🔍 Por que Berry?

- **Consistência**: Design system unificado para todos os projetos
- **Produtividade**: Componentes prontos e bem documentados
- **Manutenibilidade**: Código limpo e bem testado
- **Flexibilidade**: Composition pattern para maior adaptabilidade
- **Performance**: Bundle otimizado e boas práticas
- **Acessibilidade**: WCAG 2.1 como padrão

## 🔗 Links Úteis

- [Documentação](https://berry.room.com.br)
- [Figma](https://figma.com/room/berry)
- [NPM Package](https://npm.com/room-company/berry)
- [Changelog](CHANGELOG.md)