npm package: @scmposs/zeentech-ui
Description: zeentechUI Components Framework - Desenvolvido por Ítalo Soares Campos da equipe ZeenTech-IDT
Author: Ítalo Soares Campos
Latest version: 1.1.7

# zeentechUI

<div align="center">
  <img src="/public/zeentechUI.png" alt="zeentechUI Logo" />
  
  <h1>zeentechUI</h1>
  <p>Framework de componentes UI desenvolvido por <strong>Ítalo Soares Campos</strong></p>
  <p>Equipe <<strong>zeentech-IDT</strong>></p>
  
  <p>
    <a href="#instalação">Instalação</a> •
    <a href="#uso">Uso</a> •
    <a href="#componentes">Componentes</a> •
    <a href="#documentação">Documentação</a>
  </p>
</div>

---

## Sobre

zeentechUI é uma coleção de componentes reutilizáveis construída com **React**, **TypeScript**, **Tailwind CSS** e **Radix UI**. Projetado para ser:

- **Customizável** - Cada componente pode ser personalizado conforme sua necessidade
- **Acessível** - Construído com Radix UI para acessibilidade
- **Copiável** - Copie e cole os componentes diretamente no seu projeto
- **Suporte a temas** - Light, dark e contrast mode incluídos
- **TypeScript** - Totalmente tipado para melhor experiência de desenvolvimento

## Instalação

zeentechUI oferece **duas formas de uso** para atender diferentes necessidades:

### 📦 Via CLI (Recomendado)

Copie apenas os componentes que você precisa diretamente para o seu projeto:

```bash
# 1. Inicialize a configuração (primeira vez - OBRIGATÓRIO)
npx @scmposs/zeentech-ui init

# 2. Adicione componentes específicos
npx @scmposs/zeentech-ui add button
npx @scmposs/zeentech-ui add card badge

# 3. Liste todos os componentes disponíveis
npx @scmposs/zeentech-ui list
```

**O que o `init` faz?**

- ✅ Cria o arquivo `src/lib/utils.ts` com funções utilitárias
- ✅ Verifica se o Tailwind CSS está configurado
- ✅ Prepara seu projeto para receber os componentes

**Vantagens:**

- ✅ Você tem controle total do código
- ✅ Pode customizar livremente
- ✅ Não aumenta o `node_modules`
- ✅ Melhor para tree-shaking
- ✅ Componentes ficam no seu projeto

### 📚 Via NPM (Pacote Completo)

Instale como dependência para acesso rápido a todos os componentes:

```bash
npm install @scmposs/zeentech-ui
```

```bash
yarn add @scmposs/zeentech-ui@latest
```

```bash
pnpm add @scmposs/zeentech-ui@latest
```

**Vantagens:**

- ✅ Instalação rápida
- ✅ Atualizações automáticas
- ✅ Ideal para protótipos
- ✅ Todos os componentes disponíveis

## Uso

### Importação básica (Via NPM)

Quando instalado como pacote npm:

```tsx
import { Button, Card, Badge } from "@scmposs/zeentech-ui";
import "@scmposs/zeentech-ui/styles.css";

function App() {
  return (
    <Card>
      <h2>Olá zeentechUI!</h2>
      <p>Framework desenvolvido por Ítalo Soares Campos</p>
      <div>
        <Button>Clique aqui</Button>
        <Badge variant="secondary">v1.0.0</Badge>
      </div>
    </Card>
  );
}
```

### Importação (Via CLI)

Quando adicionado via CLI, os componentes são copiados para o seu projeto:

```tsx
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

function App() {
  return (
    <Card>
      <h2>Olá zeentechUI!</h2>
      <p>Framework desenvolvido por Ítalo Soares Campos</p>
      <div>
        <Button>Clique aqui</Button>
        <Badge variant="secondary">v1.1.0</Badge>
      </div>
    </Card>
  );
}
```

### Configuração de estilos (NPM)

Ao usar via NPM, importe os estilos CSS no seu projeto:

```tsx
import "@scmposs/zeentech-ui/styles.css";
```

### Configuração de estilos (CLI)

Ao usar via CLI, os estilos já estão integrados com seu Tailwind CSS existente. Não é necessário importar CSS adicional.

### Configuração do Tailwind

Adicione o zeentechUI ao seu `tailwind.config.js`:

```js
module.exports = {
  content: [
    // ... seu conteúdo existente
    "./node_modules/@scmposs/zeentech-ui/**/*.{js,ts,jsx,tsx}",
  ],
  // ... resto da configuração
};
```

## Componentes

### Componentes de Interface

- **Button** - Botões com múltiplas variantes e tamanhos
- **Card** - Containers flexíveis para conteúdo
- **Badge** - Rótulos e tags para categorização
- **Input** - Campos de entrada estilizados
- **Label** - Rótulos para formulários
- **Textarea** - Campos de texto multilinha

### Componentes Interativos

- **Dialog** - Modais e overlays
- **Select** - Seletores dropdown
- **Checkbox** - Caixas de seleção
- **Switch** - Controles de alternância
- **Accordion** - Listas colapsáveis
- **Popover** - Tooltips e popups

### Componentes de Layout

- **Separator** - Divisores visuais
- **Scroll Area** - Áreas de rolagem customizadas
- **Table** - Tabelas responsivas

### Componentes de Feedback

- **Toast** - Notificações temporárias
- **Skeleton** - Loading placeholders

## Documentação

Cada componente vem com documentação completa incluindo:

- **Exemplos visuais** - Veja os componentes em ação
- **Código copiável** - Copie e cole diretamente no seu projeto
- **Props API** - Documentação completa de todas as propriedades
- **Variações** - Diferentes estilos e configurações
- **Casos de uso** - Exemplos práticos de implementação

### Exemplos de componentes

#### Button

```tsx
// Variantes básicas
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Tamanhos
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🎉</Button>
```

#### Card

```tsx
<Card>
  <CardHeader>
    <CardTitle>Título do Card</CardTitle>
    <CardDescription>Descrição opcional</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Conteúdo do card aqui</p>
  </CardContent>
  <CardFooter>
    <Button>Ação</Button>
  </CardFooter>
</Card>
```

## Sistema de Cores

O zeentechUI utiliza um sistema de cores customizado baseado na identidade visual da zeentech:

- **Primary**: `#9a1c1f` - Vermelho característico da marca
- **Accent**: `#d00b12` - Vermelho mais vibrante para destaques
- **Muted**: Tons de cinza para textos secundários
- **Destructive**: Vermelho para ações destrutivas
- **Success**: Verde para confirmações

### Suporte a temas

- **Light Mode** - Tema claro padrão
- **Dark Mode** - Tema escuro elegante
- **Contrast Mode** - Alto contraste para acessibilidade

## Desenvolvimento

### Estrutura do projeto

```
zeentech-ui-italo/
├── src/
│   ├── app/                 # Next.js app router
│   ├── registry/
│   │   └── ui/             # Componentes UI
│   ├── lib/
│   │   └── utils.ts        # Utilitários
│   └── styles/
│       └── globals.css     # Estilos globais
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── README.md
```

### Scripts disponíveis

```bash
# Desenvolvimento
npm run dev

# Build para produção
npm run build

# Lint
npm run lint

# Build dos componentes para NPM
npm run build:package
```

## Autor

<div align="center">
  <img src="https://github.com/SCamposs.png" alt="Ítalo Soares Campos" />
  
  **Ítalo Soares Campos**  
  *Desenvolvedor Front-end*  
  *Equipe zeentech IDT*

  <p>
    <a href="https://github.com/SCamposs">GitHub</a> •
    <a href="https://www.linkedin.com/in/italo-soares-campos/">LinkedIn</a> •
    <a href="mailto:soarescmpos@gmail.com">Email</a>
  </p>
</div>

## zeentech-IDT

Este framework foi desenvolvido como parte do Go Be de Ítalo Soares Campos - **zeentech-IDT** (Itelligence Data Team), focado em criar soluções tecnológicas modernas e acessíveis.

## Licença

MIT License - veja o arquivo [LICENSE](LICENSE) para detalhes.

---

<div align="center">
  <p>Feito por <strong>Ítalo Soares Campos</strong></p>
  <p>© 2025 zeentech-IDT. Todos os direitos reservados.</p>
</div>