npm package: @latesoftware/ui
Description: Framework-agnostic UI components library with TypeScript support
Author: LATESOFTARE
Latest version: 1.0.0

# Resumen del Paquete @latesoftware/ui

## Componentes Incluidos

### 1. **Dialog (Modal)**
- API programática completa
- Manejo de formularios integrado
- Cierre por backdrop, botón o ESC
- Animaciones suaves
- **Archivo:** `src/Dialog.ts`

### 2. **ToastManager (Notificaciones)**
- Singleton pattern
- Múltiples tipos: success, error, warning, info, loading
- Posicionamiento configurable (6 posiciones)
- Auto-hide configurable
- Control de máximo de toasts
- **Archivo:** `src/ToastManager.ts`

### 3. **Tabs (Pestañas)**
- Modo declarativo y programático
- Navegación por teclado (flechas, Home, End)
- API para agregar/eliminar tabs dinámicamente
- Accesibilidad (ARIA) incluida
- Soporte para tabs deshabilitadas
- **Archivo:** `src/Tabs.ts`

### 4. **Dropdown/Accordion**
- Modo declarativo y programático
- Single o multiple mode
- Soporte para submenús anidados
- Animaciones configurables
- Perfecto para sidebars y menús
- **Archivo:** `src/Dropdown.ts`

### 5. **Table (Tabla de Datos)**
- Ordenamiento por columnas
- Paginación integrada
- Filtrado programático
- Renderizado personalizado de celdas
- Manejo de datos dinámico (add/update/remove)
- Eventos de click en filas
- **Archivo:** `src/Table.ts`

## Estructura del Proyecto

```
ui-package/
├── src/                          # Código TypeScript
│   ├── Dialog.ts                 # Modal/Dialog
│   ├── ToastManager.ts           # Notificaciones
│   ├── Tabs.ts                   # Pestañas
│   ├── Dropdown.ts               # Dropdown/Accordion
│   ├── Table.ts                  # Tabla de datos
│   └── index.ts                  # Exports principales
│
├── styles/                       # Estilos CSS
│   ├── variables.css             # Variables CSS
│   ├── dialog.css                # Estilos del Dialog
│   ├── toast.css                 # Estilos de Toast
│   ├── tabs.css                  # Estilos de Tabs
│   ├── dropdown.css              # Estilos de Dropdown
│   ├── table.css                 # Estilos de Table
│   ├── button.css                # Botones
│   ├── card.css                  # Cards
│   ├── form.css                  # Formularios
│   ├── alert.css                 # Alertas
│   ├── badge.css                 # Badges
│   └── index.css                 # Import de todos
│
├── examples/                     # Ejemplos de uso
│   └── index.html                # Demo interactiva
│
├── dist/                         # Build output (generado)
│   ├── index.js                  # CommonJS
│   ├── index.esm.js              # ES Modules
│   ├── index.d.ts                # TypeScript definitions
│   └── *.map                     # Source maps
│
├── README.md                     # Documentación principal
├── MIGRATION.md                  # Guía de migración
├── INSTALLATION.md               # Guía de instalación
├── CONTRIBUTING.md               # Guía para contribuir
├── LICENSE                       # Licencia MIT
├── package.json                  # Configuración NPM
├── tsconfig.json                 # Config TypeScript
├── rollup.config.js              # Config Rollup
├── .gitignore                    # Git ignore
└── .npmignore                    # NPM ignore
```

## Cómo Usar

### 1. Instalar dependencias y compilar

```bash
cd ui-package
npm install
npm run build
```

### 2. Ver ejemplos

Abre `examples/index.html` en tu navegador para ver todos los componentes en acción.

### 3. Publicar a NPM (opcional)

```bash
npm login
npm publish --access public
```

### 4. Instalar en otros proyectos

**Opción A: Desde NPM (después de publicar)**
```bash
npm install @latesoftware/ui
```

**Opción B: Localmente con npm link**
```bash
# En la carpeta del paquete
npm link

# En tu proyecto
npm link @latesoftware/ui
```

**Opción C: Desde archivo local**
```bash
npm install ../path/to/ui-package
```

## Uso en Proyectos

### Angular

```typescript
// angular.json
{
  "styles": [
    "node_modules/@latesoftware/ui/styles/index.css"
  ]
}

// component.ts
import { Dialog, ToastManager, Tabs, Dropdown, Table } from '@latesoftware/ui';
```

### React / Next.js

```tsx
// _app.tsx or main component
import '@latesoftware/ui/styles/index.css';
import { Dialog, ToastManager } from '@latesoftware/ui';
```

### Vue / Nuxt

```typescript
// main.ts or app.vue
import '@latesoftware/ui/styles/index.css';
import { Tabs, Dropdown } from '@latesoftware/ui';
```

### Astro

```astro
<style>
  @import '@latesoftware/ui/styles/index.css';
</style>

<script>
  import { Table } from '@latesoftware/ui';
</script>
```

## Características Principales

### Framework-Agnostic
- Funciona con Angular, React, Vue, Astro, Svelte, etc.
- También con JavaScript vanilla

### TypeScript
- 100% escrito en TypeScript
- Tipos exportados para todos los componentes
- Autocompletado en VS Code

### Modular
- Importa solo lo que necesitas
- CSS separado por componente
- Tree-shaking friendly

### Accesible
- ARIA labels incluidos
- Navegación por teclado
- Screen reader friendly

### Personalizable
- Variables CSS para theming
- API programática completa
- Callbacks y eventos

### Sin Dependencias
- Zero dependencies
- Bundle pequeño
- Compatible con todos los bundlers

## Personalización de Tema

```css
:root {
  /* Colores principales */
  --color-primary: #512DA8;     /* Tu color principal */
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  
  /* Superficies */
  --color-surface: #ffffff;
  --color-background: #f8f9fa;
  --color-border: #e9ecef;
  
  /* Espaciado */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  
  /* Geometría */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --transition-speed: 0.2s;
}
```

## Próximos Pasos

1. **Compilar el paquete:**
   ```bash
   npm run build
   ```

2. **Probar en ejemplos:**
   Abre `examples/index.html`

3. **Usar en tu proyecto actual:**
   Sigue la guía en `MIGRATION.md`

4. **Compartir con tu equipo:**
   Todos pueden usar `npm install @latesoftware/ui`