npm package: @sabercontabil/saber-ui
Description: Design System da Saber Contabil - Componentes UI padronizados
Author: Saber Contabil
Latest version: 0.1.0

# @sabercontabil/saber-ui

<!-- VERSION_START -->
**v0.1.0** | Atualizado em 2026-02-01
<!-- VERSION_END -->

Design System oficial da **Saber Contabil** — Componentes React padronizados para o ecossistema de plataformas internas.

## Instalacao

```bash
npm install @sabercontabil/saber-ui
```

### Setup automatizado

```bash
npx @sabercontabil/saber-ui init
```

O comando `init` configura automaticamente:
- Tailwind CSS preset com os design tokens do Saber
- CSS variables (tema light/dark) no seu arquivo CSS
- Dependencias necessarias (tailwindcss, postcss, autoprefixer, tailwindcss-animate)

### Setup manual

1. Importar o tema no seu CSS principal (apos `@tailwind utilities`):

```css
@import '@sabercontabil/saber-ui/theme.css';
```

2. Adicionar o preset no `tailwind.config.ts`:

```ts
export default {
  presets: [require('@sabercontabil/saber-ui/tailwind-preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@sabercontabil/saber-ui/dist/**/*.js',
  ],
};
```

## Uso

```tsx
import { Button, Input, Heading, Text } from '@sabercontabil/saber-ui';

function LoginForm() {
  return (
    <div>
      <Heading as="h1">Bem-vindo</Heading>
      <Text color="muted">Entre com suas credenciais</Text>
      <Input type="email" placeholder="Email" />
      <Button variant="default" fullWidth>Entrar</Button>
    </div>
  );
}
```

## Componentes

<!-- COMPONENTS_START -->

### Primitivos (12)

| Componente | Descricao |
|------------|-----------|
| Button | Botao com variantes (default, secondary, outline, ghost, destructive, link) |
| Input | Campo de entrada com suporte a icones e validacao |
| Label | Rotulo para campos de formulario |
| Select | Seletor dropdown com variantes |
| Checkbox | Caixa de selecao com tamanhos e cores |
| Switch | Toggle on/off com tamanhos e cores |
| Textarea | Area de texto com redimensionamento |
| Calendar | Calendario com selecao de data |
| ScrollArea | Area de scroll customizada |
| Heading | Titulos h1-h6 com variantes |
| Text | Texto inline com cores e tamanhos |
| Paragraph | Paragrafos com estilos |

### Compostos (14)

| Componente | Descricao |
|------------|-----------|
| Card | Container com header, content e footer |
| Dialog | Modal de dialogo |
| Table | Tabela de dados com header, body e footer |
| Tabs | Abas de navegacao |
| FormField | Campo de formulario com label e erro |
| Form | Integracao com React Hook Form |
| DatePicker | Seletor de data |
| DateRangePicker | Seletor de intervalo de datas |
| StatsCard | Card de estatisticas com tendencia |
| ChartCard | Card com grafico embutido |
| DetailSection | Secao de detalhes com campos |
| ConfigToggle | Toggle de configuracao |
| Charts | BarChart, PieChart, AreaChart (Recharts) |
| ThemeProvider | Provedor de tema light/dark |

### Feedback (8)

| Componente | Descricao |
|------------|-----------|
| Alert | Alerta com variantes (success, warning, error, info) |
| Progress | Barra de progresso linear e circular |
| Skeleton | Placeholder de carregamento |
| Spinner | Indicador de carregamento |
| Toast | Notificacao temporaria |
| Tooltip | Dica flutuante |
| ContentLoading | Loading de conteudo |
| PageLoading | Loading de pagina inteira |

### Navigation (4)

| Componente | Descricao |
|------------|-----------|
| Breadcrumb | Trilha de navegacao |
| DropdownMenu | Menu dropdown com subitens |
| Pagination | Paginacao com variantes |
| ProtectedRoute | Rota protegida por autenticacao |

### Overlay (5)

| Componente | Descricao |
|------------|-----------|
| AlertDialog | Dialogo de confirmacao |
| ConfirmDialog | Dialogo de confirmacao simplificado |
| ContextMenu | Menu de contexto (clique direito) |
| Popover | Conteudo flutuante |
| Sheet | Painel lateral deslizante |

### Layout (6)

| Componente | Descricao |
|------------|-----------|
| Sidebar | Menu lateral colapsavel |
| Header | Cabecalho com nav e acoes |
| Container | Container responsivo com Stack e Grid |
| Footer | Rodape com secoes e links |
| PageHeader | Cabecalho de pagina com titulo e acoes |
| EmptyState | Estado vazio com icone e acao |

### Data Display (4)

| Componente | Descricao |
|------------|-----------|
| Badge | Tag/etiqueta com variantes |
| Avatar | Imagem de perfil com fallback |
| AspectRatio | Container com proporcao fixa |
| Separator | Linha divisoria |

### Auth (6)

| Componente | Descricao |
|------------|-----------|
| LoginForm | Formulario de login |
| RegisterForm | Formulario de cadastro |
| ForgotPasswordForm | Formulario de recuperacao de senha |
| ResetPasswordForm | Formulario de redefinicao de senha |
| TwoFactorForm | Formulario de autenticacao 2FA |
| VerifyEmailForm | Formulario de verificacao de email |

### Paginas e Layouts (9)

| Componente | Descricao |
|------------|-----------|
| AuthLayout | Layout padrao para paginas de autenticacao |
| LoginPage | Pagina de login com branding |
| RegisterPage | Pagina de cadastro |
| ForgotPasswordPage | Pagina de recuperacao de senha |
| ResetPasswordPage | Pagina de redefinicao de senha |
| TwoFactorPage | Pagina de autenticacao 2FA |
| VerifyEmailPage | Pagina de verificacao de email |
| DashboardLayout | Layout de dashboard com sidebar e header |
| DashboardSidebar | Sidebar de navegacao do dashboard |

<!-- COMPONENTS_END -->

**Total: 68 componentes**

## Design Tokens

```tsx
import { colors, typography, spacing } from '@sabercontabil/saber-ui';

// Brand
colors.brand.primary.DEFAULT  // #EA610B (Laranja Saber)
colors.brand.secondary.DEFAULT // #0B1E3F (Azul Escuro)

// Tipografia
typography.fontFamily.sans  // Inter
typography.fontFamily.mono  // JetBrains Mono
```

## Stack

| Camada | Tecnologia |
|--------|------------|
| Build | Vite + Rollup |
| Framework | React 18 |
| Linguagem | TypeScript 5 |
| Estilizacao | Tailwind CSS 3 |
| Primitivos | Radix UI |
| Variantes | CVA (class-variance-authority) |

## Desenvolvimento

```bash
npm install          # Instalar dependencias
npm run dev          # Modo desenvolvimento
npm run storybook    # Documentacao interativa
npm run build:lib    # Build da biblioteca
npm run test:run     # Executar testes
```

## Release

```bash
npm run release:check           # Validar antes de publicar
npm version <patch|minor|major> # Bump de versao
npm publish                     # Publicar no npm
```

## Licenca

MIT - Saber Contabil