npm package: @hypixo/design-system
Description: HYPiXO design system: buttons, inputs, cards, modals and theme tokens
Latest version: 1.0.0

# @hypixo/design-system

29 componentes React y tokens de tema para la plataforma HYPiXO.

## Instalacion

```bash
npm install @hypixo/design-system
```

## Setup

Importa los CSS en tu archivo de estilos principal:

```css
@import '@hypixo/design-system/theme.css';       /* Requerido: tokens + animaciones */
@import '@hypixo/design-system/base.css';         /* Opcional: resets de elementos */
@import '@hypixo/design-system/utilities.css';    /* Opcional: headings, glow, gradientes */
```

## Uso

```tsx
import {
  Button, Input, Badge, Spinner,
  Card, CardHeader, CardTitle, CardContent,
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
  cn,
} from '@hypixo/design-system';
```

## Componentes

### Forms
| Componente | Descripcion |
|-----------|-------------|
| `Button` | 8 variantes (default, cta, accent, outline, ghost, link, destructive, secondary). Soporta `asChild`. |
| `Input` | Label, error, helpText, iconos. Tamanios: sm, md, lg. |
| `Textarea` | Area de texto con resize vertical. |
| `Select` | Select nativo estilizado. |
| `Checkbox` | Con label y `onCheckedChange`. |
| `Switch` | Toggle on/off con label. |
| `RadioGroup` | Compound: RadioGroup + RadioGroupItem. |
| `Label` | Label con indicador de requerido. |

### Layout
| Componente | Descripcion |
|-----------|-------------|
| `Card` | Compound: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter. |
| `Separator` | Horizontal/vertical con estilo de marca. |
| `Tabs` | Compound: Tabs, TabsList, TabsTrigger, TabsContent. |
| `Accordion` | Compound: single/multiple. Con animacion accordion-down. |
| `Table` | Compound: Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption. |
| `ScrollArea` | Scroll personalizado (vertical/horizontal/both). |

### Feedback
| Componente | Descripcion |
|-----------|-------------|
| `Alert` | Compound: Alert, AlertTitle, AlertDescription. 3 variantes. |
| `Toast` | Default/success/destructive. Auto-close. ToastContainer para posicionamiento. |
| `Spinner` | 3 tamanios (sm, md, lg). Usa Loader2 de Lucide. |
| `Skeleton` | Placeholder de carga con animate-pulse. |
| `Progress` | Barra de progreso con value/max. |

### Navigation
| Componente | Descripcion |
|-----------|-------------|
| `Breadcrumb` | Items con href, separador custom, aria-current. |
| `Pagination` | Prev/next, ellipsis, aria-current. |
| `DropdownMenu` | Compound: 5 sub-componentes. Click-outside + Escape. |

### Overlays
| Componente | Descripcion |
|-----------|-------------|
| `Modal` | Focus trap, Escape/overlay close. Tamanios: sm, md, lg, xl, full. |
| `Sheet` | Drawer lateral (left/right/top/bottom). |
| `AlertDialog` | Confirmacion con default/destructive. |
| `Tooltip` | 4 posiciones con delay configurable. |
| `Popover` | Contenido interactivo en click. 4 posiciones. |

### Display
| Componente | Descripcion |
|-----------|-------------|
| `Badge` | 6 variantes: default, secondary, accent, cta, destructive, outline. |
| `Avatar` | Imagen con fallback (inicial). 3 tamanios. |

## Iconos

Usa [Lucide React](https://lucide.dev) como sistema de iconos. Ya incluido como dependencia.

```tsx
import { Search, Plus, ChevronDown } from 'lucide-react';
```

## Dark mode

```html
<html class="dark">
```

Los componentes se adaptan automaticamente via tokens CSS.

## Storybook

Tres categorias: **Foundations** (colores, tipografia, espaciado, animaciones), **Components** (29), **Patterns** (formularios, tablas, dialogos, layouts).

```bash
bun run storybook
```

## Requisitos

- React >= 18
- Tailwind CSS v4

## Desarrollo

```bash
bun install        # Instalar dependencias
bun run build      # Build
bun run test       # Tests (130)
bun run lint       # ESLint
bun run storybook  # Storybook en puerto 6006
```

## Licencia

MIT