npm package: @sipal/ui
Description: Biblioteca de componentes React para Sipal - UI moderna com Tailwind CSS 4.1, Radix UI e TypeScript
Author: Sipal
Latest version: 1.0.5

# Sipal UI

**Versão:** 1.0.5

Biblioteca de componentes React moderna e completa para construção de interfaces administrativas e dashboards.

Construída com **React 18**, **TypeScript**, **Tailwind CSS 4.1**, **Radix UI**, **TanStack Table** e **Chart.js**.

---

## ✨ Características

- 🎨 **56 componentes** profissionais prontos para uso
- 🌗 **Dark Mode** nativo com suporte completo
- ♿ **Acessível** - Construído sobre Radix UI com suporte WAI-ARIA
- 📊 **Charts integrados** - Gráficos com tema sincronizado ao Tailwind
- 🎯 **TypeScript** - Tipagem completa em todos os componentes
- 🎭 **Tailwind CSS 4.1** - Sistema de design baseado em variáveis CSS
- 📱 **Responsivo** - Otimizado para mobile, tablet e desktop
- 🚀 **Tree-shakeable** - Bundle otimizado com imports individuais

---

## 📦 Instalação

```bash
npm install @sipal/ui
# ou
yarn add @sipal/ui
# ou
pnpm add @sipal/ui
```

### Peer Dependencies

```bash
npm install react react-dom tailwindcss
```

---

## 🚀 Quick Start

### 1. Configure o Tailwind CSS

No seu `tailwind.config.ts`:

```typescript
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@sipal/ui/dist/**/*.{js,mjs}', // Adicione esta linha
  ],
  darkMode: 'class',
  plugins: [require('tailwindcss-animate')],
}

export default config
```

### 2. Importe o CSS do tema

No seu arquivo CSS principal (ex: `app/globals.css` ou `src/index.css`):

```css
@import "@sipal/ui/styles";
```

Ou importe diretamente no seu `_app.tsx` / `layout.tsx`:

```tsx
import '@sipal/ui/styles'
```

### 3. Use os componentes

```tsx
import { Button, Card, Input } from '@sipal/ui'

function App() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Bem-vindo ao Sipal UI</Card.Title>
      </Card.Header>
      <Card.Content>
        <Input placeholder="Digite seu nome..." />
        <Button>Enviar</Button>
      </Card.Content>
    </Card>
  )
}
```

---

## 📚 Documentação

### 🎯 Início Rápido
- **[📋 Índice Visual de Componentes](./COMPONENT_INDEX.md)** - Referência rápida de todos os 56 componentes
- **[📖 Índice de Documentação](./docs/README.md)** - Portal completo da documentação

### 📖 Guias Detalhados
- **[Guia Completo - Parte 1](./docs/components-guide.md)** - Fundamentos & Formulários (22 componentes)
- **[Guia Completo - Parte 2](./docs/components-guide-part2.md)** - Visualização de Dados (11 componentes)
- **[Guia Completo - Parte 3](./docs/components-guide-part3.md)** - Charts & Navegação (15 componentes)
- **[Guia Completo - Parte 4](./docs/components-guide-part4.md)** - Feedback & Overlays (8 componentes)

### 🎨 Temas e Arquitetura
- [Arquitetura e Padrões](./docs/architecture.md)
- [Sistema de Temas](./docs/theming.md)
- [Sipal Charts](./docs/charts.md)
- [Exemplos Práticos](./docs/examples.md)

---

## 🎨 Sistema de Temas

A Sipal UI utiliza um sistema de temas baseado em **variáveis CSS** (Tailwind CSS 4.1).

### Customizando o Tema

Crie ou edite seu arquivo `src/styles/theme.css`:

```css
@import "tailwindcss";

@theme {
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --radius-lg: var(--radius);
}

:root {
  --primary: 222.2 47.4% 11.2%; /* Azul escuro */
  --primary-foreground: 210 40% 98%;
  --radius: 0.75rem; /* Bordas mais arredondadas */
}

.dark {
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
}
```

---

## 🧩 Lista de Componentes

| Componente | Exemplo de Uso Básico |
|------------|-----------------------|
| **Button** | `<Button>Salvar</Button>` |
| **Badge** | `<Badge>Novo</Badge>` |
| **Separator** | `<Separator />` |
| **Skeleton** | `<Skeleton className="h-4 w-full" />` |
| **Aspect Ratio** | `<AspectRatio ratio={16/9}><img ... /></AspectRatio>` |
| **Label** | `<Label htmlFor="email">Email</Label>` |
| **Input** | `<Input placeholder="Email" />` |
| **Password Input** | `<PasswordInput />` |
| **Textarea** | `<Textarea />` |
| **Checkbox** | `<Checkbox />` |
| **Radio Group** | `<RadioGroup><RadioGroupItem value="1" /></RadioGroup>` |
| **Switch** | `<Switch />` |
| **Select** | `<Select><SelectTrigger><SelectValue /></SelectTrigger></Select>` |
| **MultiSelect** | `<MultiSelect options={[]} />` |
| **Slider** | `<Slider defaultValue={[50]} />` |
| **Date Picker** | `<DatePicker />` |
| **Date Range Picker** | `<DateRangePicker />` |
| **Time Picker** | `<TimePicker />` |
| **File Upload** | `<FileUpload />` |
| **Color Picker** | `<ColorPicker />` |
| **Form** | `<Form {...form}><form>...</form></Form>` |
| **Card** | `<Card><CardContent>Content</CardContent></Card>` |
| **KPI Card** | `<KpiCard title="Total" value="100" />` |
| **Table** | `<Table><TableRow><TableCell>Cell</TableCell></TableRow></Table>` |
| **DataTable** | `<DataTable columns={columns} data={data} />` |
| **Accordion** | `<Accordion><AccordionItem value="1">...</AccordionItem></Accordion>` |
| **Collapsible** | `<Collapsible>...</Collapsible>` |
| **Scroll Area** | `<ScrollArea>...</ScrollArea>` |
| **Timeline** | `<Timeline items={[]} />` |
| **Tree View** | `<TreeView data={[]} />` |
| **Code Block** | `<CodeBlock code="..." />` |
| **Resizable** | `<ResizablePanelGroup>...</ResizablePanelGroup>` |
| **Bar Chart** | `<BarChart data={data} />` |
| **Line Chart** | `<LineChart data={data} />` |
| **Area Chart** | `<AreaChart data={data} />` |
| **Pie Chart** | `<PieChart data={data} />` |
| **Scatter Chart** | `<ScatterChart data={data} />` |
| **Mixed Chart** | `<MixedChart data={data} />` |
| **Avatar** | `<Avatar><AvatarImage src="..." /></Avatar>` |
| **Tabs** | `<Tabs><TabsList>...</TabsList></Tabs>` |
| **Breadcrumb** | `<Breadcrumb>...</Breadcrumb>` |
| **Pagination** | `<Pagination>...</Pagination>` |
| **Stepper** | `<Stepper steps={[]} />` |
| **Menubar** | `<Menubar>...</Menubar>` |
| **Dropdown Menu** | `<DropdownMenu>...</DropdownMenu>` |
| **Side Navigation** | `<SideNavigation>...</SideNavigation>` |
| **Alert** | `<Alert><AlertTitle>Info</AlertTitle></Alert>` |
| **Dialog** | `<Dialog><DialogTrigger>Open</DialogTrigger></Dialog>` |
| **Sheet** | `<Sheet><SheetTrigger>Open</SheetTrigger></Sheet>` |
| **Popover** | `<Popover><PopoverTrigger>Open</PopoverTrigger></Popover>` |
| **Tooltip** | `<Tooltip><TooltipTrigger>Hover</TooltipTrigger></Tooltip>` |
| **Toast** | `toast("Message")` |
| **Progress** | `<Progress value={50} />` |
| **Empty State** | `<EmptyState title="No Data" />` |


---

## 📄 Licença

MIT © Sipal

---

## 🔗 Links Úteis

- [Radix UI](https://www.radix-ui.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [TanStack Table](https://tanstack.com/table)
- [Chart.js](https://www.chartjs.org/)