npm package: @preparia/brand-system
Description: Sistema de marca animada da PreparIA - Componente React reutilizável
Author: PreparIA Team
Latest version: 1.0.0

# 🎨 Sistema de Marca PreparIA

Sistema de marca animada da PreparIA - Componente React reutilizável com animações CSS personalizadas.

## 📦 Instalação

```bash
npm install @preparia/brand-system
# ou
yarn add @preparia/brand-system
# ou
pnpm add @preparia/brand-system
```

## 🚀 Uso Básico

### 1. Importar o componente e estilos

```tsx
import { BrandText, brandStyles } from '@preparia/brand-system';

// Adicione os estilos ao seu CSS global ou componente
// Se usar styled-components ou emotion:
const GlobalStyle = createGlobalStyle`${brandStyles}`;

// Ou adicione ao seu arquivo CSS global:
// @import '@preparia/brand-system/dist/styles.css';
```

### 2. Usar o componente

```tsx
function App() {
  return (
    <div>
      {/* Header principal */}
      <BrandText variant="large" size="3xl" textOnly />
      
      {/* Destaque de IA */}
      <BrandText variant="ai-only" size="xl" dotVariant="large" />
      
      {/* Footer */}
      <BrandText variant="footer" size="md" dotVariant="subtle" />
    </div>
  );
}
```

## 🎯 Props da API

| Prop | Tipo | Padrão | Descrição |
|------|------|--------|-----------|
| `variant` | `"default" \| "large" \| "small" \| "footer" \| "ai-only"` | `"default"` | Variação visual da marca |
| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl"` | `"md"` | Tamanho do texto |
| `showDot` | `boolean` | `true` | Exibir o ponto animado |
| `dotVariant` | `"default" \| "large" \| "small" \| "subtle"` | `"default"` | Variação do ponto animado |
| `textOnly` | `boolean` | `false` | Usar apenas "PreparIA" completo |
| `customText` | `string` | - | Texto customizado (substitui "PreparIA") |
| `className` | `string` | `""` | Classes CSS adicionais |

## 📖 Exemplos de Uso

### Header/Navegação
```tsx
<BrandText variant="large" size="3xl" textOnly />
```

### Cards e Componentes
```tsx
<BrandText variant="small" size="lg" showDot={false} />
<BrandText variant="ai-only" size="xl" dotVariant="large" />
```

### Footer
```tsx
<BrandText variant="footer" size="2xl" dotVariant="subtle" textOnly />
```

### Padrões de Fundo
```tsx
<div className="grid grid-cols-6 gap-4 opacity-10">
  {Array.from({ length: 12 }).map((_, i) => (
    <BrandText key={i} variant="ai-only" size="sm" showDot={false} />
  ))}
</div>
```

### Texto Customizado
```tsx
<BrandText 
  variant="large" 
  size="2xl" 
  customText="MinhaMarca" 
  dotVariant="large" 
/>
```

## 🎨 Variações Visuais

### Variantes
- **`default`**: Gradiente padrão cinza → vermelho
- **`large`**: Mesmo que default, para headers principais  
- **`small`**: Gradiente mais suave para componentes
- **`footer`**: Gradiente claro para fundos escuros
- **`ai-only`**: Gradiente vermelho intenso para destaque de IA

### Pontos Animados
- **`default`**: Vermelho padrão com pulso de 2s
- **`large`**: Mesmo que default
- **`small`**: Tom mais claro com pulso de 3s  
- **`subtle`**: Tom bem suave com pulso de 4s

## 🔧 Configuração com Frameworks

### Next.js
```tsx
// pages/_app.tsx ou app/layout.tsx
import { brandStyles } from '@preparia/brand-system';

export default function App({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{brandStyles}</style>
      <Component {...pageProps} />
    </>
  );
}
```

### Vite + React
```tsx
// src/main.tsx
import { brandStyles } from '@preparia/brand-system';

// Adicionar estilos dinamicamente
const styleSheet = document.createElement('style');
styleSheet.innerText = brandStyles;
document.head.appendChild(styleSheet);
```

### Tailwind CSS
O componente é compatível com Tailwind CSS. Certifique-se de que as classes utilitárias estão disponíveis:

```js
// tailwind.config.js
module.exports = {
  content: [
    // seus arquivos...
    "./node_modules/@preparia/brand-system/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // resto da config...
}
```

## 🎭 Customização

### Sobrescrever Estilos
```css
/* Customizar cores do gradiente */
.preparia-brand-text {
  background: linear-gradient(135deg, #your-color 0%, #your-color2 100%) !important;
}

/* Customizar velocidade da animação */
.preparia-brand-text {
  animation-duration: 5s !important;
}
```

### Criar Variações Próprias
```tsx
<BrandText 
  customText="SuaMarca"
  variant="default"
  size="2xl"
  className="minha-customizacao"
/>
```

## 🔄 Migrando de Versões Anteriores

Se você está migrando de uma implementação local:

1. Substitua importações:
```tsx
// Antes
import { BrandText } from './components/ui/brand-text';

// Depois  
import { BrandText } from '@preparia/brand-system';
```

2. Atualize nomes de classes CSS (prefixo `preparia-`):
```css
/* Antes */
.brand-text { }

/* Depois */
.preparia-brand-text { }
```

## 🤝 Contribuindo

1. Fork o repositório
2. Crie uma branch para sua feature (`git checkout -b feature/AmazingFeature`)
3. Commit suas mudanças (`git commit -m 'Add some AmazingFeature'`)
4. Push para a branch (`git push origin feature/AmazingFeature`)
5. Abra um Pull Request

## 📄 Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo [LICENSE](LICENSE) para detalhes.

## 🔗 Links

- [Repositório GitHub](https://github.com/YagoROliveira/preparia-brand-system)
- [NPM Package](https://www.npmjs.com/package/@preparia/brand-system)
- [Documentação](https://preparia-brand-system.vercel.app)

---

Feito com ❤️ pela equipe PreparIA