# Teddy Design System

Uma biblioteca de componentes Angular otimizada para melhor performance e tree-shaking.

## 📦 Tamanho Otimizado

A biblioteca foi otimizada para reduzir significativamente o tamanho do bundle:
- **Antes**: ~119MB
- **Depois**: ~30MB (75% de redução)

## 🚀 Instalação

```bash
npm install @cloud-teddy/teddy-ds
```

## 📖 Uso

### Importação Completa (Não Recomendado)

```typescript
import { TeddyDsModule } from '@cloud-teddy/teddy-ds';

@NgModule({
  imports: [TeddyDsModule]
})
export class AppModule { }
```

### Importação Seletiva (Recomendado)

Para melhor tree-shaking, importe apenas os componentes que você precisa:

```typescript
import { ButtonComponent } from '@cloud-teddy/teddy-ds';
import { InputComponent } from '@cloud-teddy/teddy-ds';
import { CardComponent } from '@cloud-teddy/teddy-ds';
import { AlertComponent } from '@cloud-teddy/teddy-ds';
import { BadgeComponent } from '@cloud-teddy/teddy-ds';
import { SpinnerComponent } from '@cloud-teddy/teddy-ds';
import { IconComponent } from '@cloud-teddy/teddy-ds';
import { DivisorComponent } from '@cloud-teddy/teddy-ds';

@NgModule({
  imports: [
    ButtonComponent,
    InputComponent,
    CardComponent,
    AlertComponent,
    BadgeComponent,
    SpinnerComponent,
    IconComponent,
    DivisorComponent
  ]
})
export class AppModule { }
```

### Estilos

```typescript
// Importe os estilos globais
import '@cloud-teddy/teddy-ds/styles';
```

## 🎯 Componentes Disponíveis

### Componentes Essenciais (Exportados por Padrão)

- `ButtonComponent` - Botões
- `InputComponent` - Campos de entrada
- `CardComponent` - Cards
- `AlertComponent` - Alertas
- `BadgeComponent` - Badges
- `SpinnerComponent` - Spinners
- `IconComponent` - Ícones
- `DivisorComponent` - Divisores

### Outros Componentes

Para usar outros componentes, você pode importá-los diretamente dos arquivos individuais:

```typescript
import { CheckboxComponent } from '@cloud-teddy/teddy-ds/lib/components/checkbox/checkbox.component';
import { SelectComponent } from '@cloud-teddy/teddy-ds/lib/components/select/select.component';
// ... outros componentes
```

## 🔧 Otimizações Implementadas

1. **Exportação Seletiva**: Apenas componentes essenciais são exportados por padrão
2. **Tree-Shaking**: Configuração otimizada para permitir tree-shaking
3. **Side Effects**: Configurado como `false` para melhor tree-shaking
4. **Build Otimizado**: Configurações de produção para reduzir tamanho
5. **Assets Otimizados**: Apenas assets essenciais incluídos

## 📊 Comparação de Performance

| Métrica | Antes | Depois | Melhoria |
|---------|-------|--------|----------|
| Tamanho Total | 119MB | 30MB | 75% |
| Tempo de Build | 38s | 14s | 63% |
| Bundle ESM | 59MB | 15MB | 75% |
| Bundle FESM | 58MB | 14MB | 76% |

## 🛠️ Desenvolvimento

```bash
# Build da biblioteca
npm run build:lib

# Build de desenvolvimento
npm run build:lib:dev

# Storybook
npm run storybook

# Testes
npm run test
```

## 📝 Notas

- Todos os componentes são standalone para melhor tree-shaking
- Use importações seletivas para minimizar o tamanho do bundle
- Os estilos são incluídos separadamente para permitir customização
- A biblioteca é compatível com Angular 16+