ten-minds-beta 0.0.1

package/README.md

@@ -0,0 +1,914 @@
+# TenMindsBeta
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build ten-minds-beta
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/ten-minds-beta
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+# ten-minds-beta
+
+Librería de componentes UI para Angular, construida con Tailwind CSS v4 y Lucide Icons.
+
+---
+
+## Instalación
+
+```bash
+npm install ten-minds-beta lucide-angular
+```
+
+---
+
+## Configuración inicial
+
+En el `app.config.ts` de tu proyecto, registrá los íconos de Lucide que vas a usar:
+
+```typescript
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { LucideAngularModule, Download, Trash2, Check, Plus, X, Pencil, Search } from 'lucide-angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    importProvidersFrom(
+      LucideAngularModule.pick({ Download, Trash2, Check, Plus, X, Pencil, Search })
+    )
+  ]
+};
+```
+
+> Registrá solo los íconos que uses — eso mantiene el bundle liviano.
+
+---
+
+## Estilos
+
+Importá los estilos de la librería en el `styles.css` de tu proyecto:
+
+```css
+@import 'ten-minds-beta/styles/styles.css';
+```
+
+---
+
+## Componentes
+
+### `<btn-primary>`
+
+Botón con soporte para múltiples variantes, tamaños, estados y íconos.
+
+#### Importar
+
+```typescript
+import { BtnPrimary } from 'ten-minds-beta';
+
+@Component({
+  imports: [BtnPrimary],
+})
+```
+
+#### Inputs
+
+| Input      | Tipo                                          | Default     | Descripción                        |
+|------------|-----------------------------------------------|-------------|------------------------------------|
+| `color`    | `'primary' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Color del botón                    |
+| `size`     | `'lg' \| 'md' \| 'sm'`                        | `'md'`      | Tamaño del botón                   |
+| `type`     | `'filled' \| 'outlined' \| 'ghost'`           | `'filled'`  | Estilo visual del botón            |
+| `disabled` | `boolean`                                     | `false`     | Deshabilita el botón               |
+| `active`   | `boolean`                                     | `false`     | Aplica estado activo               |
+| `iconLeft` | `string`                                      | —           | Nombre del ícono Lucide a la izquierda |
+| `iconRight`| `string`                                      | —           | Nombre del ícono Lucide a la derecha   |
+
+#### Outputs
+
+| Output    | Tipo         | Descripción                        |
+|-----------|--------------|------------------------------------|
+| `clicked` | `MouseEvent` | Se emite al hacer click en el botón |
+
+---
+
+#### Ejemplos de uso
+
+**Variantes de color:**
+
+```html
+<btn-primary color="primary"  type="filled">Primary</btn-primary>
+<btn-primary color="danger"   type="filled">Danger</btn-primary>
+<btn-primary color="success"  type="filled">Success</btn-primary>
+<btn-primary color="warning"  type="filled">Warning</btn-primary>
+```
+
+**Variantes de tipo:**
+
+```html
+<btn-primary type="filled"  >Filled</btn-primary>
+<btn-primary type="outlined">Outlined</btn-primary>
+<btn-primary type="ghost"   >Ghost</btn-primary>
+```
+
+**Tamaños:**
+
+```html
+<btn-primary size="lg">Large</btn-primary>
+<btn-primary size="md">Medium</btn-primary>
+<btn-primary size="sm">Small</btn-primary>
+```
+
+**Estado disabled:**
+
+```html
+<btn-primary [disabled]="true">Deshabilitado</btn-primary>
+```
+
+**Con íconos:**
+
+```html
+<!-- Ícono izquierdo -->
+<btn-primary iconLeft="download">Exportar</btn-primary>
+
+<!-- Ícono derecho -->
+<btn-primary iconRight="arrow-right">Siguiente</btn-primary>
+
+<!-- Ambos íconos -->
+<btn-primary iconLeft="upload" iconRight="check">Subir archivo</btn-primary>
+```
+
+> Los nombres de íconos van en kebab-case exactamente como aparecen en [lucide.dev](https://lucide.dev).
+> Recordá registrar cada ícono que uses en el `app.config.ts`.
+
+**Escuchando eventos:**
+
+```html
+<!-- Output propio -->
+<btn-primary (clicked)="guardar($event)">Guardar</btn-primary>
+
+<!-- Eventos nativos -->
+<btn-primary
+  (click)="guardar()"
+  (dblclick)="abrirModal()"
+  (focus)="onFocus()"
+  (blur)="onBlur()"
+>
+  Guardar
+</btn-primary>
+```
+
+**Combinado:**
+
+```html
+<btn-primary
+  color="primary"
+  type="filled"
+  size="md"
+  iconLeft="download"
+  (clicked)="exportar($event)"
+>
+  Exportar registros
+</btn-primary>
+
+<btn-primary
+  color="danger"
+  type="outlined"
+  size="sm"
+  iconLeft="trash-2"
+  [disabled]="cargando"
+  (clicked)="eliminar($event)"
+>
+  Eliminar
+</btn-primary>
+```
+
+---
+
+## Íconos disponibles en Lucide
+
+Podés ver el catálogo completo en [lucide.dev](https://lucide.dev). Algunos íconos comunes:
+
+| Nombre           | Uso sugerido         |
+|------------------|----------------------|
+| `download`       | Exportar, descargar  |
+| `upload`         | Importar, subir      |
+| `trash-2`        | Eliminar             |
+| `pencil`         | Editar               |
+| `check`          | Confirmar, guardar   |
+| `x`              | Cancelar, cerrar     |
+| `plus`           | Agregar, nuevo       |
+| `search`         | Buscar               |
+| `arrow-right`    | Siguiente, continuar |
+| `arrow-left`     | Volver, anterior     |
+| `chevron-down`   | Expandir             |
+| `settings`       | Configuración        |
+| `user`           | Perfil, usuario      |
+| `eye`            | Ver, mostrar         |
+| `eye-off`        | Ocultar              |
+| `alert-triangle` | Advertencia          |
+| `info`           | Información          |
+| `filter`         | Filtrar              |
+| `refresh-cw`     | Recargar             |
+
+---
+
+## Desarrollo
+
+```bash
+# Buildear la librería en modo watch
+ng build ten-minds-beta --watch
+
+# Servir la app de prueba
+ng serve consumer-app
+```
+## SnackbarService
+
+Sistema de notificaciones globales para mostrar feedback visual al usuario.
+Reemplaza los `console.log` con mensajes visibles en pantalla.
+
+### Configuración (una sola vez)
+
+**`app.html`:**
+
+```html
+<tm-snackbar-host />
+<router-outlet />
+```
+
+**`app.ts`:**
+
+```typescript
+import { SnackbarHostComponent } from 'ten-minds-beta';
+
+@Component({
+  imports: [SnackbarHostComponent],
+})
+```
+
+### Uso
+```typescript
+import { SnackbarService } from 'ten-minds-beta';
+
+export class MiComponente {
+  snackbar = inject(SnackbarService);
+
+  async onGuardar() {
+    try {
+      await this.service.guardar(data);
+      this.snackbar.success('Guardado', 'Los cambios fueron guardados correctamente');
+    } catch {
+      this.snackbar.error('Error', 'No pudimos guardar los cambios');
+    }
+  }
+}
+```
+
+### Métodos
+
+| Método | Tipo | Descripción |
+|--------|------|-------------|
+| `success(title, description?)` | alert | Desaparece en 5s |
+| `error(title, description?)` | alert | Desaparece en 5s |
+| `warning(title, description?)` | alert | Desaparece en 5s |
+| `info(title, description?)` | alert | Desaparece en 5s |
+| `notify(color{success,error,warning,info}, title, description?)` | notification | El usuario la cierra manualmente |
+---
+
+
+## Chip
+
+Componente para mostrar estados, etiquetas o valores visuales. Puede ser estático o clickeable.
+
+---
+
+## Instalación
+
+```typescript
+import { Chip } from 'ten-minds-beta';
+
+@Component({
+  imports: [Chip],
+})
+```
+
+---
+
+## Status (colores)
+
+| Status    | Uso recomendado                        |
+|-----------|----------------------------------------|
+| `success` | Activo, completado, aprobado           |
+| `warning` | Pendiente, por vencer, precaución      |
+| `danger`  | Inactivo, error, rechazado             |
+| `info`    | Informativo, en proceso                |
+| `indigo`  | Categorías, etiquetas neutras          |
+| `brand`   | Destacado, principal                   |
+
+```html
+<chip status="success">Activo</chip>
+<chip status="warning">Pendiente</chip>
+<chip status="danger">Inactivo</chip>
+<chip status="info">En proceso</chip>
+<chip status="indigo">Categoría</chip>
+<chip status="brand">Destacado</chip>
+```
+
+---
+
+## Type (estilo visual)
+
+| Type       | Descripción                              |
+|------------|------------------------------------------|
+| `filled`   | Fondo sólido con texto blanco            |
+| `subtle`   | Fondo suave con texto del color          |
+| `outlined` | Sin fondo, solo borde y texto del color  |
+
+```html
+<chip status="success" type="filled">Filled</chip>
+<chip status="success" type="subtle">Subtle</chip>
+<chip status="success" type="outlined">Outlined</chip>
+```
+
+---
+
+## Rounded (forma)
+
+| Rounded   | Uso recomendado                                     |
+|-----------|-----------------------------------------------------|
+| `default` | Valores estáticos, estados, badges informativos     |
+| `full`    | Filtros, tags interactivos, estados de productos    |
+
+```html
+<chip status="info" rounded="default">Estado</chip>
+<chip status="info" rounded="full">Etiqueta</chip>
+```
+
+---
+
+## Iconos
+
+Acepta cualquier nombre de icono de [Lucide](https://lucide.dev/icons/) en `iconLeft` o `iconRight`.
+
+```html
+<!-- Solo icono izquierdo -->
+<chip status="success" iconLeft="check">Activo</chip>
+
+<!-- Solo icono derecho -->
+<chip status="info" iconRight="x">Etiqueta</chip>
+
+<!-- Ambos iconos -->
+<chip status="warning" iconLeft="triangle-alert" iconRight="x">Advertencia</chip>
+```
+
+---
+
+## Clickeable
+
+Por defecto el chip es estático. Para hacerlo interactivo usa `[clickable]="true"` y escucha el evento `(clicked)`.
+
+```html
+<chip
+  status="danger"
+  type="filled"
+  rounded="full"
+  iconLeft="circle-x"
+  [clickable]="true"
+  (clicked)="onDesactivar()"
+>
+  Desactivar
+</chip>
+```
+
+```typescript
+onDesactivar() {
+  console.log('chip clickeado');
+}
+```
+
+> Si `clickable` es `false` (default), el chip no emite eventos ni muestra cursor pointer.
+
+---
+
+## Referencia de inputs y outputs
+
+| Input       | Tipo          | Default     | Descripción                                           |
+|-------------|---------------|-------------|-------------------------------------------------------|
+| `status`    | `ChipStatus`  | `'brand'`   | Color del chip                                        |
+| `type`      | `ChipType`    | `'filled'`  | Estilo visual del chip                                |
+| `rounded`   | `ChipRounded` | `'default'` | Forma del borde                                       |
+| `iconLeft`  | `string`      | —           | Nombre del icono Lucide a la izquierda (opcional)     |
+| `iconRight` | `string`      | —           | Nombre del icono Lucide a la derecha (opcional)       |
+| `clickable` | `boolean`     | `false`     | Habilita cursor pointer y emite evento al hacer click |
+
+| Output    | Tipo   | Descripción                                   |
+|-----------|--------|-----------------------------------------------|
+| `clicked` | `void` | Se emite al hacer click si `clickable="true"` |
+
+---
+
+## Casos de uso reales
+
+```html
+<!-- Estado de un producto -->
+<chip status="success" type="subtle" rounded="full" iconLeft="check">
+  Activo
+</chip>
+
+<!-- Licencia por vencer -->
+<chip status="warning" type="filled" rounded="default" iconLeft="triangle-alert">
+  Por vencer
+</chip>
+
+<!-- Filtro clickeable -->
+<chip
+  status="indigo"
+  type="outlined"
+  rounded="full"
+  [clickable]="true"
+  (clicked)="filtrar()"
+>
+  Electrónica
+</chip>
+
+<!-- Notificación de error -->
+<chip status="danger" type="subtle" rounded="default" iconLeft="circle-x">
+  Pago rechazado
+</chip>
+```
+
+## Componente Toggle
+
+Componente de interruptor para activar o desactivar estados. Emite el nuevo valor al padre para que maneje la lógica correspondiente.
+
+---
+
+## Instalación
+
+```typescript
+import { Toggle } from 'ten-minds-beta';
+
+@Component({
+  imports: [Toggle],
+})
+```
+
+---
+
+## Uso básico
+
+```html
+<toggle [value]="isActive" (changed)="isActive = $event" />
+```
+
+---
+
+## Inputs y Outputs
+
+| Input      | Tipo      | Default | Descripción                              |
+|------------|-----------|---------|------------------------------------------|
+| `value`    | `boolean` | `false` | Estado actual del toggle                 |
+| `disabled` | `boolean` | `false` | Desactiva la interacción                 |
+
+| Output    | Tipo      | Descripción                            |
+|-----------|-----------|----------------------------------------|
+| `changed` | `boolean` | Emite el nuevo estado al hacer click   |
+
+---
+
+## Estados
+
+### Default (apagado)
+```html
+<toggle [value]="false" (changed)="onChanged($event)" />
+```
+
+### Active (encendido)
+```html
+<toggle [value]="true" (changed)="onChanged($event)" />
+```
+
+### Disabled
+```html
+<toggle [value]="false" [disabled]="true" />
+<toggle [value]="true" [disabled]="true" />
+```
+
+---
+
+## Manejo del estado
+
+El toggle no guarda estado internamente. El padre es responsable de actualizar el valor:
+
+```typescript
+isActive = false;
+
+onChanged(value: boolean) {
+  this.isActive = value;
+}
+```
+
+```html
+<toggle [value]="isActive" (changed)="onChanged($event)" />
+```
+
+O de forma inline:
+
+```html
+<toggle [value]="isActive" (changed)="isActive = $event" />
+```
+
+---
+
+## Casos de uso reales
+
+### Activar notificaciones
+```html
+<div class="flex items-center gap-3">
+  <toggle [value]="notificaciones" (changed)="notificaciones = $event" />
+  <span>Notificaciones</span>
+</div>
+
+@if(notificaciones) {
+  <p>Recibirás notificaciones de nuevos eventos.</p>
+} @else {
+  <p>Las notificaciones están desactivadas.</p>
+}
+```
+
+### Activar/desactivar un producto
+```html
+<div class="flex items-center gap-3">
+  <toggle [value]="producto.activo" (changed)="toggleProducto($event)" />
+  <span>{{ producto.activo ? 'Activo' : 'Inactivo' }}</span>
+</div>
+```
+
+```typescript
+toggleProducto(value: boolean) {
+  this.producto.activo = value;
+  this.productoService.actualizarEstado(this.producto.id, value);
+}
+```
+
+### Con disabled según permisos
+```html
+<toggle
+  [value]="configuracion.habilitado"
+  [disabled]="!tienePermisos"
+  (changed)="configuracion.habilitado = $event"
+/>
+```
+
+
+# Checkbox
+
+Componente de selección para formularios. Permite marcar o desmarcar una opción individual. Semánticamente correcto y accesible.
+
+---
+
+## Instalación
+
+```typescript
+import { CheckboxButton } from 'ten-minds-beta';
+
+@Component({
+  imports: [CheckboxButton],
+})
+```
+
+---
+
+## Uso básico
+
+```html
+<checkbox-button [checked]="isChecked" (changed)="isChecked = $event" />
+```
+
+---
+
+## Inputs y Outputs
+
+| Input      | Tipo      | Default       | Descripción                                        |
+|------------|-----------|---------------|----------------------------------------------------|
+| `checked`  | `boolean` | `false`       | Estado actual del checkbox                         |
+| `disabled` | `boolean` | `false`       | Desactiva la interacción                           |
+| `label`    | `string`  | —             | Texto descriptivo al lado del checkbox (opcional)  |
+| `id`       | `string`  | auto-generado | ID del input, útil para asociar labels externos    |
+
+| Output    | Tipo      | Descripción                          |
+|-----------|-----------|--------------------------------------|
+| `changed` | `boolean` | Emite el nuevo estado al hacer click |
+
+---
+
+## Estados
+
+### Default (desmarcado)
+```html
+<checkbox-button [checked]="false" (changed)="isChecked = $event" />
+```
+
+### Checked (marcado)
+```html
+<checkbox-button [checked]="true" (changed)="isChecked = $event" />
+```
+
+### Disabled desmarcado
+```html
+<checkbox-button [checked]="false" [disabled]="true" />
+```
+
+### Disabled marcado
+```html
+<checkbox-button [checked]="true" [disabled]="true" />
+```
+
+---
+
+## Con label
+
+```html
+<checkbox-button
+  [checked]="isChecked"
+  label="Aceptar términos y condiciones"
+  (changed)="isChecked = $event"
+/>
+```
+
+---
+
+## Manejo del estado
+
+El checkbox no guarda estado internamente. El padre es responsable de actualizar el valor:
+
+```typescript
+isChecked = false;
+
+onChanged(value: boolean) {
+  this.isChecked = value;
+}
+```
+
+```html
+<checkbox-button [checked]="isChecked" (changed)="onChanged($event)" />
+```
+
+O de forma inline:
+
+```html
+<checkbox-button [checked]="isChecked" (changed)="isChecked = $event" />
+```
+
+---
+
+## Casos de uso reales
+
+### Aceptar términos
+```html
+<checkbox-button
+  [checked]="aceptaTerminos"
+  label="Acepto los términos y condiciones"
+  (changed)="aceptaTerminos = $event"
+/>
+
+<btn-primary
+  [disabled]="!aceptaTerminos"
+  type="filled"
+  (clicked)="continuar()"
+>
+  Continuar
+</btn-primary>
+```
+
+### Lista de permisos
+```html
+@for(permiso of permisos; track permiso.id) {
+  <checkbox-button
+    [checked]="permiso.activo"
+    [label]="permiso.nombre"
+    (changed)="togglePermiso(permiso.id, $event)"
+  />
+}
+```
+
+```typescript
+togglePermiso(id: string, value: boolean) {
+  const permiso = this.permisos.find(p => p.id === id);
+  if (permiso) permiso.activo = value;
+}
+```
+
+### Con disabled según permisos
+```html
+<checkbox-button
+  [checked]="opcion.activa"
+  [disabled]="!tienePermisos"
+  [label]="opcion.nombre"
+  (changed)="opcion.activa = $event"
+/>
+```
+
+
+# Radio Button
+
+Componente de selección única para formularios. Se usa en grupos donde solo una opción puede estar seleccionada a la vez.
+
+---
+
+## Instalación
+
+```typescript
+import { RadioButton } from 'ten-minds-beta';
+
+@Component({
+  imports: [RadioButton],
+})
+```
+
+---
+
+## Uso básico
+
+```html
+<radio-button
+  value="opcion1"
+  name="mi-grupo"
+  [checked]="selected === 'opcion1'"
+  (changed)="selected = $event"
+/>
+```
+
+---
+
+## Inputs y Outputs
+
+| Input      | Tipo      | Default         | Descripción                                              |
+|------------|-----------|-----------------|----------------------------------------------------------|
+| `value`    | `string`  | requerido       | Valor que emite cuando se selecciona                     |
+| `name`     | `string`  | `'radio-group'` | Nombre del grupo, debe ser igual en todos los del grupo  |
+| `checked`  | `boolean` | `false`         | Estado actual del radio                                  |
+| `disabled` | `boolean` | `false`         | Desactiva la interacción                                 |
+| `label`    | `string`  | —               | Texto descriptivo al lado del radio (opcional)           |
+| `id`       | `string`  | auto-generado   | ID del input, útil para asociar labels externos          |
+
+| Output    | Tipo     | Descripción                              |
+|-----------|----------|------------------------------------------|
+| `changed` | `string` | Emite el `value` del radio seleccionado  |
+
+---
+
+## Estados
+
+### Default (sin seleccionar)
+```html
+<radio-button value="opcion1" name="grupo" [checked]="false" (changed)="onChanged($event)" />
+```
+
+### Checked (seleccionado)
+```html
+<radio-button value="opcion1" name="grupo" [checked]="true" (changed)="onChanged($event)" />
+```
+
+### Disabled desmarcado
+```html
+<radio-button value="opcion1" name="grupo" [checked]="false" [disabled]="true" />
+```
+
+### Disabled marcado
+```html
+<radio-button value="opcion1" name="grupo" [checked]="true" [disabled]="true" />
+```
+
+---
+
+## Uso en grupo
+
+El `name` debe ser el mismo en todos los radio del grupo. El padre controla cuál está seleccionado comparando `value` con el valor actual:
+
+```typescript
+selected = 'mensual';
+
+onChanged(value: string) {
+  this.selected = value;
+}
+```
+
+```html
+<div class="flex flex-col gap-3">
+  <radio-button
+    value="mensual"
+    name="plan"
+    label="Mensual"
+    [checked]="selected === 'mensual'"
+    (changed)="onChanged($event)"
+  />
+  <radio-button
+    value="anual"
+    name="plan"
+    label="Anual"
+    [checked]="selected === 'anual'"
+    (changed)="onChanged($event)"
+  />
+  <radio-button
+    value="lifetime"
+    name="plan"
+    label="De por vida"
+    [checked]="selected === 'lifetime'"
+    (changed)="onChanged($event)"
+  />
+</div>
+```
+
+---
+
+## Casos de uso reales
+
+### Selección de plan
+```html
+<div class="flex flex-col gap-3">
+  @for(plan of planes; track plan.id) {
+    <radio-button
+      [value]="plan.id"
+      name="planes"
+      [label]="plan.nombre"
+      [checked]="selectedPlan === plan.id"
+      (changed)="selectedPlan = $event"
+    />
+  }
+</div>
+```
+
+### Con opción desactivada
+```html
+<radio-button
+  value="premium"
+  name="plan"
+  label="Premium (próximamente)"
+  [checked]="false"
+  [disabled]="true"
+/>
+```
+
+### Selección de rol en formulario de usuario
+```html
+<div class="flex flex-col gap-3">
+  <radio-button value="admin" name="rol" label="Administrador" [checked]="rol === 'admin'" (changed)="rol = $event" />
+  <radio-button value="editor" name="rol" label="Editor" [checked]="rol === 'editor'" (changed)="rol = $event" />
+  <radio-button value="viewer" name="rol" label="Solo lectura" [checked]="rol === 'viewer'" (changed)="rol = $event" />
+</div>
+```
+
+```typescript
+rol = 'viewer';
+```