npm package: @revuu/ds
Description: Revuu Design System - Shared tokens, components and utilities
Author: Revuu
Latest version: 1.2.0

# @revuu/ds

Design System oficial do ecossistema Revuu. Componentes React com Tailwind CSS, Radix UI e acessibilidade.

[![npm version](https://badge.fury.io/js/@revuu%2Fds.svg)](https://www.npmjs.com/package/@revuu/ds)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Instalação

```bash
# npm
npm install @revuu/ds

# pnpm
pnpm add @revuu/ds

# yarn
yarn add @revuu/ds
```

## Configuração

### 1. Configure o Tailwind CSS

```javascript
// tailwind.config.js
module.exports = {
  presets: [require('@revuu/ds/tailwind-preset')],
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/@revuu/ds/dist/**/*.{js,mjs}',
  ],
}
```

### 2. Importe os estilos

```tsx
// app/layout.tsx ou globals.css
import '@revuu/ds/styles.css'
```

## Uso

```tsx
import { Button, Card, Input, Dialog } from '@revuu/ds'

function MyComponent() {
  return (
    <Card>
      <Input placeholder="Digite seu email" />
      <Button variant="primary">Enviar</Button>
    </Card>
  )
}
```

## Componentes Disponíveis

### Básicos
- `Button` - Botões com variantes (primary, secondary, outline, ghost, destructive)
- `Input` - Campo de entrada de texto
- `Textarea` - Área de texto
- `Label` - Rótulos para formulários
- `Badge` - Badges/Tags

### Layout
- `Card` - Container com sombra
- `Separator` - Divisor visual
- `AspectRatio` - Manter proporção de mídia
- `ScrollArea` - Área com scroll customizado

### Formulários
- `Checkbox` - Caixa de seleção
- `RadioGroup` - Grupo de radio buttons
- `Select` - Dropdown de seleção
- `Switch` - Toggle on/off
- `Slider` - Seletor de range
- `DatePicker` - Seletor de data
- `ColorPicker` - Seletor de cor
- `FileUpload` - Upload de arquivos
- `InputOTP` - Input para código OTP

### Navegação
- `Tabs` - Navegação por abas
- `Breadcrumb` - Trilha de navegação
- `NavigationMenu` - Menu de navegação
- `Pagination` - Paginação
- `DropdownMenu` - Menu dropdown

### Feedback
- `Dialog` - Modal
- `AlertDialog` - Modal de confirmação
- `Toast` - Notificações
- `Tooltip` - Dicas de ferramenta
- `Progress` - Barra de progresso
- `Skeleton` - Placeholder de loading

### Dados
- `Table` - Tabela básica
- `DataTable` - Tabela avançada com sort/filter
- `Timeline` - Linha do tempo
- `StatCard` - Cards de métricas
- `EmptyState` - Estados vazios
- `Calendar` - Calendário
- `Chart` - Gráficos

### Avançados
- `Accordion` - Seções colapsáveis
- `Collapsible` - Colapsável simples
- `HoverCard` - Card no hover
- `Popover` - Popover genérico
- `ContextMenu` - Menu de contexto
- `Command` - Paleta de comandos
- `Sheet` - Painel lateral
- `Carousel` - Carrossel
- `Resizable` - Painéis redimensionáveis
- `Avatar` - Avatar de usuário

## Design Tokens

```tsx
import { colors, spacing, typography } from '@revuu/ds/tokens'
```

## Cores do Tema

| Nome | Hex |
|------|-----|
| Primary (Revuu Orange) | `#F59E0B` |
| Hub Purple | `#8600D3` |
| Success | `#22C55E` |
| Error | `#EF4444` |
| Warning | `#EAB308` |
| Info | `#3B82F6` |

## Brand Assets

SVG logos e ícones estão disponíveis na pasta `assets/`:

- `LogoRevuu.svg` - Logo principal
- `LogoHub.svg` - Logo do Hub
- `LogoOps.svg` - Logo do Ops
- `IconRevuu.svg` - Ícone do app
- `FaviconRevuu.svg` - Favicon

## Desenvolvimento

```bash
# Instalar dependências
pnpm install

# Rodar Storybook
pnpm storybook

# Build
pnpm build

# Type check
pnpm typecheck

# Publicar nova versão
pnpm release:patch  # 0.1.0 -> 0.1.1
pnpm release:minor  # 0.1.0 -> 0.2.0
pnpm release:major  # 0.1.0 -> 1.0.0
```

## Publicação

### NPM (público)

1. Configure o token NPM:
   ```bash
   npm login
   # ou
   echo "//registry.npmjs.org/:_authToken=YOUR_TOKEN" >> ~/.npmrc
   ```

2. Publique:
   ```bash
   pnpm release:patch
   ```

### GitHub Actions (automático)

O workflow `.github/workflows/publish.yml` publica automaticamente:
- Ao criar uma release no GitHub
- Manualmente via Actions tab

Configure o secret `NPM_TOKEN` no repositório.

## Links

- [GitHub](https://github.com/revuu/design-system)
- [Revuu](https://revuu.com.br)
- [Revuu Hub](https://hub.revuu.com.br)

## Licença

MIT © [Revuu](https://revuu.com.br)