ten-minds-ui-kit 0.0.1

package/README.md

@@ -0,0 +1,2212 @@
+# @10mindssoftware/tm-ui-kit
+
+Librería de componentes UI para Angular, construida con Tailwind CSS v4 y Lucide Icons.
+
+---
+
+## Instalación
+
+```bash
+npm install @10mindssoftware/tm-ui-kit
+```
+
+---
+
+## Configuración inicial
+
+1.- Instalar la sgte libreria lucide-angular
+`npm i lucide-angular`
+
+### 1. Agregar los estilos de la librería
+
+Importá los estilos de la librería en el `styles.css` de tu proyecto:
+
+```css
+@import '@10mindssoftware/tm-ui-kit/styles/styles.css';
+```
+
+---
+
+# Customización de Estilos
+
+La librería **@10mindssoftware/tm-ui-kit** ofrece tres niveles de personalización según el alcance que necesites.
+
+---
+
+## Nivel 1 — Global: sobreescribir tokens CSS
+
+Afecta **todos** los componentes que usen ese token en toda la app.
+
+Agrega esto en el `styles.css` de tu proyecto:
+
+```css
+:root {
+  --tm-gray-900: #your-brand-color;
+}
+```
+
+O directamente el token semántico:
+
+```css
+:root {
+  --color-tm-brand: #your-brand-color;
+  --color-tm-primary: #your-text-color;
+}
+```
+
+### Tokens disponibles
+
+| Token                            | Descripción                 | Default (light) |
+| -------------------------------- | --------------------------- | --------------- |
+| `--color-tm-brand`               | Color principal de la marca | `#141414`       |
+| `--color-tm-primary`             | Texto principal             | `#141414`       |
+| `--color-tm-secondary`           | Texto secundario            | `#737373`       |
+| `--color-tm-tertiary`            | Texto terciario             | `#A0A0A0`       |
+| `--color-tm-inverse`             | Texto sobre fondos oscuros  | `#FFFFFF`       |
+| `--color-tm-canvas`              | Fondo general de la app     | `#FAFAFA`       |
+| `--color-tm-surface`             | Fondo de tarjetas y paneles | `#FFFFFF`       |
+| `--color-tm-subtle`              | Fondo sutil                 | `#F0F0F0`       |
+| `--color-tm-muted`               | Fondo atenuado              | `#E4E4E4`       |
+| `--color-tm-brand-hover-default` | Hover del botón brand       | `#363636`       |
+| `--color-tm-brand-hover-subtle`  | Hover sutil del botón brand | `#F0F0F0`       |
+| `--color-tm-default`             | Borde por defecto           | `#E4E4E4`       |
+| `--color-tm-strong`              | Borde fuerte                | `#C8C8C8`       |
+
+---
+
+## Nivel 2 — Scoped: cambiar un componente en una sección
+
+Afecta solo los componentes dentro de un contenedor específico. Se usa CSS puro — **no Tailwind**.
+
+```css
+/* styles.css del proyecto consumidor */
+.mi-seccion tm-btn-primary button {
+  background-color: #your-color !important;
+  font-size: 1.25rem !important;
+  border-radius: 999px !important;
+}
+```
+
+```html
+<div class="mi-seccion">
+  <tm-btn-primary>Solo este botón cambia</tm-btn-primary>
+</div>
+
+<tm-btn-primary>Este queda igual</tm-btn-primary>
+```
+
+> ⚠️ CSS puro únicamente. Tailwind no funciona aquí porque se compila en build time y las clases de la librería no están disponibles en el proyecto consumidor.
+
+---
+
+## Nivel 3 — Puntual: un solo componente con `customClass`
+
+Afecta **únicamente** el componente donde lo aplicas. Aquí sí puedes usar clases de Tailwind porque se compilan en el proyecto consumidor.
+
+```html
+<!-- Tailwind funciona aquí -->
+<tm-btn-primary customClass="!bg-orange-500 !text-black"> Botón personalizado </tm-btn-primary>
+
+<!-- CSS también funciona con clase propia -->
+<tm-btn-primary customClass="mi-boton-especial"> Botón personalizado </tm-btn-primary>
+```
+
+```css
+/* styles.css */
+.mi-boton-especial {
+  background-color: orange !important;
+  font-size: 1.25rem !important;
+}
+```
+
+> ℹ️ El modificador `!` de Tailwind es necesario para sobreescribir estilos ya definidos por el componente.
+
+---
+
+## Resumen
+
+| Método                     | Alcance       | Tailwind | Cuándo usarlo                             |
+| -------------------------- | ------------- | -------- | ----------------------------------------- |
+| Token CSS en `:root`       | Toda la app   | ✗        | Cambiar la paleta de colores del proyecto |
+| CSS scoped con clase padre | Una sección   | ✗        | Variante especial en una página o sección |
+| `customClass` input        | Un componente | ✓        | Ajuste puntual en un solo componente      |
+
+### 2. Importar los componentes
+
+Los componentes son standalone — solo importa los que necesites directamente en tu componente o módulo:
+
+```typescript
+import { BtnPrimary, Chip, CheckboxButton } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [BtnPrimary, Chip, CheckboxButton],
+})
+```
+
+### 3. Usar íconos
+
+Los íconos se importan directamente desde `lucide-angular` como objetos. **No se requiere ninguna configuración global en `app.config.ts`.**
+
+```typescript
+import { Download, Trash2, Check } from 'lucide-angular';
+
+export class MiComponente {
+  download = Download;
+  trash = Trash2;
+  check = Check;
+}
+```
+
+```html
+<tm-btn-primary [iconLeft]="download">Exportar</tm-btn-primary>
+<tm-chip [iconLeft]="check">Activo</tm-chip>
+```
+
+---
+
+## Componentes disponibles
+
+| Componente       | Selector           | Descripción                             |
+| ---------------- | ------------------ | --------------------------------------- |
+| `BtnPrimary`     | `tm-btn-primary`   | Botón principal con múltiples variantes |
+| `Chip`           | `tm-chip`          | Etiqueta de estado o categoría          |
+| `CheckboxButton` | `tm-checkbox`      | Checkbox personalizado                  |
+| `Toggle`         | `tm-toggle`        | Switch on/off                           |
+| `RadioButton`    | `tm-radio-button`  | Botón de selección única                |
+| `InputTen`       | `tm-input`         | Campo de texto                          |
+| `Avatar`         | `tm-avatar`        | Avatar con iniciales y estado           |
+| `SnackbarHost`   | `tm-snackbar-host` | Contenedor de notificaciones            |
+
+---
+
+## Dark Mode
+
+La librería soporta dark mode mediante la clase `.dark` en el elemento raíz. Agrégala o quítala desde tu componente:
+
+```typescript
+onThemeChange(mode: 'light' | 'dark') {
+  if (mode === 'dark') {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+}
+```
+
+---
+
+## Componentes
+
+# Avatar
+
+Componente de avatar de la librería **ten-minds-beta**. Soporta imagen, iniciales como fallback, múltiples tamaños e indicador de estado.
+
+---
+
+## Importación
+
+```typescript
+import { Avatar } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [Avatar],
+})
+```
+
+---
+
+## API
+
+### Inputs
+
+| Prop       | Tipo                   | Default    | Descripción                                                |
+| ---------- | ---------------------- | ---------- | ---------------------------------------------------------- |
+| `src`      | `string`               | `''`       | URL de la imagen. Si está vacío, se muestran las iniciales |
+| `initials` | `string`               | `''`       | Texto de iniciales, se muestra cuando no hay imagen        |
+| `alt`      | `string`               | `'Avatar'` | Texto alternativo para accesibilidad                       |
+| `size`     | `AvatarSize`           | `'md'`     | Tamaño del avatar                                          |
+| `status`   | `AvatarStatus \| null` | `null`     | Indicador de estado visible sobre el avatar                |
+
+### Tipos
+
+```typescript
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarStatus = 'online' | 'busy' | 'disconnect';
+```
+
+### Tamaños de referencia
+
+| Valor | Tamaño |
+| ----- | ------ |
+| `xs`  | 28px   |
+| `sm`  | 40px   |
+| `md`  | 48px   |
+| `lg`  | 60px   |
+| `xl`  | 80px   |
+
+---
+
+## Ejemplos
+
+### Con imagen
+
+```html
+<tm-avatar src="https://ejemplo.com/foto.jpg" />
+<tm-avatar src="https://ejemplo.com/foto.jpg" alt="Foto de Juan" />
+```
+
+### Con iniciales (fallback sin imagen)
+
+```html
+<tm-avatar initials="JP" /> <tm-avatar initials="AB" />
+```
+
+> Si `src` está vacío e `initials` tiene valor, se muestran las iniciales sobre el fondo de marca.
+
+### Tamaños
+
+```html
+<tm-avatar src="..." size="xs" />
+<tm-avatar src="..." size="sm" />
+<tm-avatar src="..." size="md" />
+<tm-avatar src="..." size="lg" />
+<tm-avatar src="..." size="xl" />
+```
+
+### Indicador de estado
+
+```html
+<tm-avatar src="..." status="online" />
+<tm-avatar src="..." status="busy" />
+<tm-avatar src="..." status="disconnect" />
+```
+
+### Sin estado (por defecto)
+
+```html
+<tm-avatar src="..." />
+<!-- status es null por defecto, no se muestra el indicador -->
+```
+
+### Combinaciones comunes
+
+```html
+<!-- Avatar con iniciales y estado online -->
+<tm-avatar initials="MG" status="online" />
+
+<!-- Avatar grande con imagen y estado ocupado -->
+<tm-avatar src="https://ejemplo.com/foto.jpg" alt="María García" size="lg" status="busy" />
+
+<!-- Avatar pequeño desconectado -->
+<tm-avatar src="https://ejemplo.com/foto.jpg" size="sm" status="disconnect" />
+
+<!-- Avatar extra grande solo con iniciales -->
+<tm-avatar initials="TM" size="xl" />
+```
+
+---
+
+## Notas
+
+- Si `src` tiene valor, se muestra la imagen. Si no, se recurre a las `initials`. Si tampoco hay iniciales, el avatar queda vacío con el fondo de marca.
+- El indicador de `status` escala automáticamente según el `size` del avatar y se posiciona en la esquina inferior derecha.
+- El indicador incluye `role="status"` y `aria-label` con el valor del estado para accesibilidad.
+
+---
+
+# Componente BtnIcon
+
+Componente de botón de ícono de la librería **@10mindssoftware/tm-ui-kit**. Versión cuadrada del botón principal, diseñado para acciones que se representan únicamente con un ícono. Soporta los mismos colores, variantes, tamaños y bordes redondeados que `BtnPrimary`.
+
+---
+
+## Importación
+
+```typescript
+import { BtnIcon } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [BtnIcon],
+})
+```
+
+---
+
+## API
+
+### Inputs
+
+| Prop        | Tipo             | Default     | Descripción                                                              |
+| ----------- | ---------------- | ----------- | ------------------------------------------------------------------------ |
+| `icon`      | `LucideIconData` | —           | **Requerido.** Ícono a mostrar dentro del botón                          |
+| `color`     | `ButtonColor`    | `'primary'` | Color del botón                                                          |
+| `size`      | `ButtonSize`     | `'md'`      | Tamaño del botón                                                         |
+| `type`      | `ButtonType`     | `'filled'`  | Variante visual                                                          |
+| `rounded`   | `ButtonRounded`  | `'default'` | Forma del borde                                                          |
+| `active`    | `boolean`        | `false`     | Aplica estado activo (brightness)                                        |
+| `disabled`  | `boolean`        | `false`     | Desactiva el botón                                                       |
+| `ariaLabel` | `string`         | `''`        | Texto accesible del botón. Recomendado siempre que no haya texto visible |
+
+### Outputs
+
+| Evento    | Tipo         | Descripción                                         |
+| --------- | ------------ | --------------------------------------------------- |
+| `clicked` | `MouseEvent` | Se emite al hacer click (no emite si está disabled) |
+
+### Tipos
+
+```typescript
+type ButtonColor = 'primary' | 'danger' | 'success' | 'warning';
+type ButtonSize = 'lg' | 'md' | 'sm';
+type ButtonType = 'filled' | 'outlined' | 'ghost';
+type ButtonRounded = 'default' | 'full';
+```
+
+### Tamaños de referencia
+
+| Valor | Tamaño | Ícono |
+| ----- | ------ | ----- |
+| `lg`  | 44px   | 20px  |
+| `md`  | 40px   | 18px  |
+| `sm`  | 36px   | 16px  |
+
+---
+
+## Ejemplos
+
+### Uso básico
+
+El prop `icon` es requerido. Siempre importa el ícono desde `lucide-angular` como objeto.
+
+```typescript
+import { Trash2, Edit, Plus } from 'lucide-angular';
+
+export class App {
+  trash = Trash2;
+  edit = Edit;
+  plus = Plus;
+}
+```
+
+```html
+<tm-icon-button [icon]="edit" ariaLabel="Editar" />
+```
+
+### Colores
+
+```html
+<tm-icon-button [icon]="edit" color="primary" ariaLabel="Editar" />
+<tm-icon-button [icon]="trash" color="danger" ariaLabel="Eliminar" />
+<tm-icon-button [icon]="plus" color="success" ariaLabel="Agregar" />
+<tm-icon-button [icon]="edit" color="warning" ariaLabel="Advertencia" />
+```
+
+### Variantes
+
+```html
+<tm-icon-button [icon]="edit" type="filled" ariaLabel="Editar" />
+<tm-icon-button [icon]="edit" type="outlined" ariaLabel="Editar" />
+<tm-icon-button [icon]="edit" type="ghost" ariaLabel="Editar" />
+```
+
+### Tamaños
+
+```html
+<tm-icon-button [icon]="edit" size="lg" ariaLabel="Editar" />
+<tm-icon-button [icon]="edit" size="md" ariaLabel="Editar" />
+<tm-icon-button [icon]="edit" size="sm" ariaLabel="Editar" />
+```
+
+### Bordes redondeados
+
+```html
+<tm-icon-button [icon]="plus" rounded="default" ariaLabel="Agregar" />
+<tm-icon-button [icon]="plus" rounded="full" ariaLabel="Agregar" />
+```
+
+### Disabled
+
+```html
+<tm-icon-button [icon]="trash" [disabled]="true" ariaLabel="Eliminar" />
+<tm-icon-button
+  [icon]="trash"
+  color="danger"
+  type="outlined"
+  [disabled]="true"
+  ariaLabel="Eliminar"
+/>
+```
+
+### Manejo de eventos
+
+```html
+<tm-icon-button [icon]="trash" color="danger" ariaLabel="Eliminar" (clicked)="onEliminar($event)" />
+```
+
+```typescript
+onEliminar(event: MouseEvent) {
+  console.log('Eliminando...', event);
+}
+```
+
+### Combinaciones comunes
+
+```html
+<!-- Botón de acción flotante (FAB) -->
+<tm-icon-button
+  [icon]="plus"
+  color="primary"
+  size="lg"
+  rounded="full"
+  ariaLabel="Crear nuevo"
+  (clicked)="onCreate($event)"
+/>
+
+<!-- Botón destructivo ghost -->
+<tm-icon-button
+  [icon]="trash"
+  color="danger"
+  type="ghost"
+  size="sm"
+  ariaLabel="Eliminar fila"
+  (clicked)="onDelete($event)"
+/>
+
+<!-- Botón de edición outlined -->
+<tm-icon-button
+  [icon]="edit"
+  color="primary"
+  type="outlined"
+  ariaLabel="Editar registro"
+  (clicked)="onEdit($event)"
+/>
+```
+
+---
+
+## Notas
+
+- El prop `icon` es **requerido**. El componente no renderiza nada sin él.
+- El evento `clicked` **no se emite** cuando `disabled` es `true`, no es necesario manejarlo manualmente.
+- Se recomienda proporcionar siempre un `ariaLabel` descriptivo ya que el botón no contiene texto visible, lo cual es importante para accesibilidad.
+- Los íconos deben importarse desde `lucide-angular` como objetos y asignarse a propiedades del componente. Pasar strings directamente **no funciona**.
+- El tamaño del ícono se ajusta automáticamente según el `size` del botón.
+
+---
+
+# tm-button — Componente de Botón
+
+Componente de botón de la librería **@10mindssoftware/tm-ui-kit**. Soporta múltiples colores, variantes, tamaños, bordes redondeados e íconos.
+
+---
+
+## Instalación
+
+Importa el componente en tu componente standalone:
+
+```typescript
+import { BtnPrimary } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [BtnPrimary],
+})
+```
+
+---
+
+## API
+
+### Inputs
+
+| Prop          | Tipo             | Default     | Descripción            |
+| ------------- | ---------------- | ----------- | ---------------------- |
+| `color`       | `ButtonColor`    | `'primary'` | Color del botón        |
+| `size`        | `ButtonSize`     | `'md'`      | Tamaño del botón       |
+| `type`        | `ButtonType`     | `'filled'`  | Variante visual        |
+| `rounded`     | `ButtonRounded`  | `'default'` | Forma del borde        |
+| `disabled`    | `boolean`        | `false`     | Desactiva el botón     |
+| `active`      | `boolean`        | `false`     | Aplica estado activo   |
+| `iconLeft`    | `LucideIconData` | —           | Ícono a la izquierda   |
+| `iconRight`   | `LucideIconData` | —           | Ícono a la derecha     |
+| `customClass` | `string`         | `''`        | Clases CSS adicionales |
+
+### Outputs
+
+| Evento      | Tipo         | Descripción                                         |
+| ----------- | ------------ | --------------------------------------------------- |
+| `(clicked)` | `MouseEvent` | Se emite al hacer click (no emite si está disabled) |
+
+### Tipos
+
+```typescript
+type ButtonColor = 'primary' | 'danger' | 'success' | 'warning';
+type ButtonSize = 'lg' | 'md' | 'sm';
+type ButtonType = 'filled' | 'outlined' | 'ghost';
+type ButtonRounded = 'default' | 'full';
+```
+
+---
+
+## Ejemplos
+
+### Uso básico
+
+```html
+<tm-button>Guardar</tm-button>
+```
+
+### Colores
+
+```html
+<tm-button color="primary">Primary</tm-button>
+<tm-button color="danger">Danger</tm-button>
+<tm-button color="success">Success</tm-button>
+<tm-button color="warning">Warning</tm-button>
+```
+
+### Variantes
+
+```html
+<tm-button type="filled">Filled</tm-button>
+<tm-button type="outlined">Outlined</tm-button>
+<tm-button type="ghost">Ghost</tm-button>
+```
+
+### Tamaños
+
+```html
+<tm-button size="lg">Large</tm-button>
+<tm-button size="md">Medium</tm-button>
+<tm-button size="sm">Small</tm-button>
+```
+
+### Bordes redondeados
+
+```html
+<tm-button rounded="default">Default</tm-button> <tm-button rounded="full">Pill</tm-button>
+```
+
+### Disabled
+
+```html
+<tm-button [disabled]="true">No disponible</tm-button>
+<tm-button color="danger" type="outlined" [disabled]="true">Eliminar</tm-button>
+```
+
+### Con íconos
+
+Los íconos se importan desde `lucide-angular` como objetos y se asignan a propiedades del componente:
+
+```typescript
+import { Download, Trash2, Check } from 'lucide-angular';
+
+export class MiComponente {
+  download = Download;
+  trash = Trash2;
+  check = Check;
+}
+```
+
+```html
+<!-- Ícono izquierdo -->
+<tm-button [iconLeft]="download">Exportar</tm-button>
+
+<!-- Ícono derecho -->
+<tm-button color="success" [iconRight]="check">Confirmar</tm-button>
+
+<!-- Ambos íconos -->
+<tm-button color="danger" type="outlined" [iconLeft]="trash" [iconRight]="check">
+  Eliminar
+</tm-button>
+```
+
+### Manejo de eventos
+
+```html
+<tm-button color="success" (clicked)="onGuardar($event)">Guardar</tm-button>
+```
+
+```typescript
+onGuardar(event: MouseEvent) {
+  console.log('Guardando...', event);
+}
+```
+
+### Combinaciones comunes
+
+```html
+<!-- Botón de acción principal -->
+<tm-button color="primary" size="md" [iconLeft]="download">Exportar</tm-button>
+
+<!-- Botón destructivo -->
+<tm-button color="danger" type="outlined" size="md" [iconLeft]="trash">Eliminar</tm-button>
+
+<!-- Botón pill -->
+<tm-button color="primary" rounded="full" [iconLeft]="check">Confirmar</tm-button>
+
+<!-- Botón pequeño ghost -->
+<tm-button color="primary" type="ghost" size="sm">Ver más</tm-button>
+```
+
+---
+
+## Notas
+
+- El evento `(clicked)` no se emite cuando `disabled` es `true`.
+- Los íconos deben importarse desde `lucide-angular` como objetos. Pasar strings no funciona.
+- Usa `customClass` para agregar clases adicionales sin sobreescribir las base.
+
+---
+
+# Componente Btn Theme
+
+Componente de botón para alternar entre modo claro y oscuro. Cambia el icono según el modo actual y emite el nuevo modo al padre.
+
+---
+
+## Instalación
+
+```typescript
+import { BtnTheme } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [BtnTheme],
+})
+```
+
+---
+
+## Uso básico
+
+```html
+<lib-btn-theme [mode]="currentTheme" (modeChange)="onThemeChange($event)" />
+```
+
+```typescript
+import { ThemeMode } from '@10mindssoftware/tm-ui-kit';
+
+currentTheme: ThemeMode = 'light';
+
+onThemeChange(mode: ThemeMode) {
+  this.currentTheme = mode;
+  if (mode === 'dark') {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+}
+```
+
+---
+
+## Inputs y Outputs
+
+| Input      | Tipo        | Default   | Descripción              |
+| ---------- | ----------- | --------- | ------------------------ |
+| `mode`     | `ThemeMode` | `'light'` | Modo actual del tema     |
+| `disabled` | `boolean`   | `false`   | Desactiva la interacción |
+
+| Output       | Tipo        | Descripción                        |
+| ------------ | ----------- | ---------------------------------- |
+| `modeChange` | `ThemeMode` | Emite el nuevo modo al hacer click |
+
+---
+
+## Tipos
+
+```typescript
+type ThemeMode = 'light' | 'dark';
+```
+
+---
+
+## Estados
+
+### Light (modo claro)
+
+```html
+<lib-btn-theme mode="light" (modeChange)="onThemeChange($event)" />
+```
+
+### Dark (modo oscuro)
+
+```html
+<lib-btn-theme mode="dark" (modeChange)="onThemeChange($event)" />
+```
+
+### Disabled
+
+```html
+<lib-btn-theme [disabled]="true" />
+```
+
+---
+
+## Casos de uso reales
+
+### Toggle global en el navbar
+
+```html
+<nav class="flex items-center justify-between px-6 py-4">
+  <span>Mi App</span>
+  <lib-btn-theme [mode]="currentTheme" (modeChange)="onThemeChange($event)" />
+</nav>
+```
+
+```typescript
+currentTheme: ThemeMode = 'light';
+
+onThemeChange(mode: ThemeMode) {
+  this.currentTheme = mode;
+  if (mode === 'dark') {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+}
+```
+
+### Persistir en localStorage
+
+```typescript
+currentTheme: ThemeMode = 'light';
+
+ngOnInit() {
+  const saved = localStorage.getItem('theme') as ThemeMode;
+  if (saved) {
+    this.currentTheme = saved;
+    document.documentElement.classList.toggle('dark', saved === 'dark');
+  }
+}
+
+onThemeChange(mode: ThemeMode) {
+  this.currentTheme = mode;
+  localStorage.setItem('theme', mode);
+  document.documentElement.classList.toggle('dark', mode === 'dark');
+}
+```
+
+# Componente CardButton
+
+Componente de botón de carrito de compras de la librería **@10mindssoftware/tm-ui-kit**. Muestra un ícono de carrito con un badge numérico opcional según la cantidad de ítems.
+
+---
+
+## Importación
+
+```typescript
+import { CardButton } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [CardButton],
+})
+```
+
+---
+
+## API
+
+### Inputs
+
+| Prop        | Tipo      | Default                | Descripción                                                                            |
+| ----------- | --------- | ---------------------- | -------------------------------------------------------------------------------------- |
+| `count`     | `number`  | `0`                    | Cantidad de ítems en el carrito. Si es `0`, no se muestra el badge                     |
+| `disabled`  | `boolean` | `false`                | Desactiva el botón                                                                     |
+| `ariaLabel` | `string`  | `'Carrito de compras'` | Texto accesible del botón. Se complementa automáticamente con la cantidad si hay ítems |
+
+### Outputs
+
+| Evento    | Tipo   | Descripción                                         |
+| --------- | ------ | --------------------------------------------------- |
+| `clicked` | `void` | Se emite al hacer click (no emite si está disabled) |
+
+---
+
+## Ejemplos
+
+### Uso básico
+
+```html
+<tm-card-button />
+```
+
+### Con ítems en el carrito
+
+```html
+<tm-card-button [count]="3" /> <tm-card-button [count]="9" />
+```
+
+> Cuando `count` supera 9, el badge muestra `9+` en lugar del número exacto.
+
+```html
+<tm-card-button [count]="15" />
+<!-- Badge muestra: 9+ -->
+```
+
+### Deshabilitado
+
+```html
+<tm-card-button [disabled]="true" /> <tm-card-button [count]="4" [disabled]="true" />
+```
+
+### Manejo de eventos
+
+```html
+<tm-card-button [count]="itemCount" (clicked)="onCartClick()" />
+```
+
+```typescript
+itemCount = 2;
+
+onCartClick() {
+  console.log('Abriendo carrito...');
+}
+```
+
+### Con aria-label personalizado
+
+```html
+<tm-card-button ariaLabel="Ver mi pedido" [count]="2" />
+<!-- aria-label resultante: "Ver mi pedido, 2 items" -->
+```
+
+### Combinaciones comunes
+
+```html
+<!-- Carrito vacío -->
+<tm-card-button (clicked)="abrirCarrito()" />
+
+<!-- Carrito con items -->
+<tm-card-button [count]="totalItems" (clicked)="abrirCarrito()" />
+
+<!-- Carrito deshabilitado durante carga -->
+<tm-card-button [count]="totalItems" [disabled]="cargando" (clicked)="abrirCarrito()" />
+```
+
+---
+
+## Notas
+
+- El badge solo es visible cuando `count` es mayor a `0`.
+- Cuando `count` supera 9, el badge muestra `9+` para evitar desbordamiento visual.
+- El evento `clicked` **no se emite** cuando `disabled` es `true`, no es necesario manejarlo manualmente.
+- El `aria-label` se construye dinámicamente: si hay ítems, añade la cantidad al texto base (ej. `"Carrito de compras, 3 items"`). El badge tiene `aria-hidden="true"` para evitar duplicados en lectores de pantalla.
+- El ícono del carrito es fijo (`ShoppingCart` de `lucide-angular`) y no es configurable.
+
+---
+
+# Componente 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 '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [CheckboxButton],
+})
+```
+
+---
+
+## Uso básico
+
+```html
+<tm-checkbox-button [checked]="isChecked" (changed)="isChecked = $event" />
+```
+
+---
+
+## API
+
+### Inputs
+
+| 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    |
+| `id`       | `string`  | auto-generado | ID del input para asociar labels externos |
+
+### Outputs
+
+| Output      | Tipo      | Descripción                          |
+| ----------- | --------- | ------------------------------------ |
+| `(changed)` | `boolean` | Emite el nuevo estado al hacer click |
+
+---
+
+## Estados
+
+```html
+<!-- Desmarcado -->
+<tm-checkbox-button [checked]="false" (changed)="isChecked = $event" />
+
+<!-- Marcado -->
+<tm-checkbox-button [checked]="true" (changed)="isChecked = $event" />
+
+<!-- Disabled desmarcado -->
+<tm-checkbox-button [checked]="false" [disabled]="true" />
+
+<!-- Disabled marcado -->
+<tm-checkbox-button [checked]="true" [disabled]="true" />
+```
+
+---
+
+## Con label
+
+```html
+<tm-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
+<tm-checkbox-button [checked]="isChecked" (changed)="onChanged($event)" />
+```
+
+---
+
+## Casos de uso reales
+
+### Aceptar términos
+
+```html
+<tm-checkbox-button
+  [checked]="aceptaTerminos"
+  label="Acepto los términos y condiciones"
+  (changed)="aceptaTerminos = $event"
+/>
+
+<tm-button [disabled]="!aceptaTerminos" (clicked)="continuar()"> Continuar </tm-button>
+```
+
+### Lista de permisos
+
+```html
+@for (permiso of permisos; track permiso.id) {
+<tm-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
+<tm-checkbox-button
+  [checked]="opcion.activa"
+  [disabled]="!tienePermisos"
+  [label]="opcion.nombre"
+  (changed)="opcion.activa = $event"
+/>
+```
+
+# Componente de Chip
+
+Componente para mostrar estados, etiquetas o valores visuales. Puede ser estático o clickeable.
+
+---
+
+## Instalación
+
+```typescript
+import { Chip } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [Chip],
+})
+```
+
+---
+
+## Uso básico
+
+```html
+<tm-chip status="success">Activo</tm-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
+<tm-chip status="success">Activo</tm-chip>
+<tm-chip status="warning">Pendiente</tm-chip>
+<tm-chip status="danger">Inactivo</tm-chip>
+<tm-chip status="info">En proceso</tm-chip>
+<tm-chip status="indigo">Categoría</tm-chip>
+<tm-chip status="brand">Destacado</tm-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
+<tm-chip status="success" type="filled">Filled</tm-chip>
+<tm-chip status="success" type="subtle">Subtle</tm-chip>
+<tm-chip status="success" type="outlined">Outlined</tm-chip>
+```
+
+---
+
+## Rounded (forma)
+
+| Rounded   | Uso recomendado              |
+| --------- | ---------------------------- |
+| `default` | Estados, badges informativos |
+| `full`    | Filtros, tags interactivos   |
+
+```html
+<tm-chip status="info" rounded="default">Estado</tm-chip>
+<tm-chip status="info" rounded="full">Etiqueta</tm-chip>
+```
+
+---
+
+## Íconos
+
+Los íconos se importan desde `lucide-angular` como objetos:
+
+```typescript
+import { Check, TriangleAlert, X } from 'lucide-angular';
+
+export class MiComponente {
+  check = Check;
+  alert = TriangleAlert;
+  x = X;
+}
+```
+
+```html
+<!-- Ícono izquierdo -->
+<tm-chip status="success" [iconLeft]="check">Activo</tm-chip>
+
+<!-- Ícono derecho -->
+<tm-chip status="info" [iconRight]="x">Etiqueta</tm-chip>
+
+<!-- Ambos íconos -->
+<tm-chip status="warning" [iconLeft]="alert" [iconRight]="x">Advertencia</tm-chip>
+```
+
+---
+
+## Clickeable
+
+Por defecto el chip es estático. Para hacerlo interactivo usa `[clickable]="true"` y escucha el evento `(clicked)`:
+
+```html
+<tm-chip
+  status="danger"
+  type="filled"
+  rounded="full"
+  [iconLeft]="x"
+  [clickable]="true"
+  (clicked)="onDesactivar()"
+>
+  Desactivar
+</tm-chip>
+```
+
+```typescript
+onDesactivar() {
+  console.log('chip clickeado');
+}
+```
+
+> Si `clickable` es `false` (default), el chip no emite eventos ni muestra cursor pointer.
+
+---
+
+## API
+
+### Inputs
+
+| Input       | Tipo             | Default     | Descripción                     |
+| ----------- | ---------------- | ----------- | ------------------------------- |
+| `status`    | `ChipStatus`     | `'brand'`   | Color del chip                  |
+| `type`      | `ChipType`       | `'filled'`  | Estilo visual                   |
+| `rounded`   | `ChipRounded`    | `'default'` | Forma del borde                 |
+| `iconLeft`  | `LucideIconData` | —           | Ícono a la izquierda            |
+| `iconRight` | `LucideIconData` | —           | Ícono a la derecha              |
+| `clickable` | `boolean`        | `false`     | Habilita click y cursor pointer |
+
+### Outputs
+
+| Output      | Tipo   | Descripción                                   |
+| ----------- | ------ | --------------------------------------------- |
+| `(clicked)` | `void` | Se emite al hacer click si `clickable="true"` |
+
+### Tipos
+
+```typescript
+type ChipStatus = 'success' | 'warning' | 'indigo' | 'danger' | 'info' | 'brand';
+type ChipType = 'filled' | 'subtle' | 'outlined';
+type ChipRounded = 'default' | 'full';
+```
+
+---
+
+## Casos de uso reales
+
+```html
+<!-- Estado de un producto -->
+<tm-chip status="success" type="subtle" rounded="full" [iconLeft]="check"> Activo </tm-chip>
+
+<!-- Licencia por vencer -->
+<tm-chip status="warning" type="filled" rounded="default" [iconLeft]="alert"> Por vencer </tm-chip>
+
+<!-- Filtro clickeable -->
+<tm-chip status="indigo" type="outlined" rounded="full" [clickable]="true" (clicked)="filtrar()">
+  Electrónica
+</tm-chip>
+
+<!-- Notificación de error -->
+<tm-chip status="danger" type="subtle" rounded="default" [iconLeft]="x"> Pago rechazado </tm-chip>
+```
+
+# Componente CloseDialog
+
+Componente de botón de cierre de la librería **@10mindssoftware/tm-ui-kit**. Diseñado para cerrar diálogos, modales o paneles. Muestra un ícono de `X` con fondo circular al hacer hover.
+
+---
+
+## Importación
+
+```typescript
+import { CloseDialog } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [CloseDialog],
+})
+```
+
+---
+
+## API
+
+### Inputs
+
+| Prop        | Tipo      | Default    | Descripción               |
+| ----------- | --------- | ---------- | ------------------------- |
+| `disabled`  | `boolean` | `false`    | Desactiva el botón        |
+| `ariaLabel` | `string`  | `'Cerrar'` | Texto accesible del botón |
+
+### Outputs
+
+| Evento   | Tipo   | Descripción                                         |
+| -------- | ------ | --------------------------------------------------- |
+| `closed` | `void` | Se emite al hacer click (no emite si está disabled) |
+
+---
+
+## Ejemplos
+
+### Uso básico
+
+```html
+<tm-close-dialog (closed)="onClose()" />
+```
+
+### Deshabilitado
+
+```html
+<tm-close-dialog [disabled]="true" />
+```
+
+### Con aria-label personalizado
+
+```html
+<tm-close-dialog ariaLabel="Cerrar modal de confirmación" (closed)="onClose()" />
+```
+
+### Combinaciones comunes
+
+```html
+<!-- En la cabecera de un modal -->
+<div class="flex items-center justify-between">
+  <h2>Título del modal</h2>
+  <tm-close-dialog (closed)="cerrarModal()" />
+</div>
+
+<!-- Deshabilitado durante procesamiento -->
+<tm-close-dialog [disabled]="procesando" (closed)="cerrarModal()" />
+```
+
+```typescript
+procesando = false;
+
+cerrarModal() {
+  console.log('Cerrando modal...');
+}
+```
+
+---
+
+## Notas
+
+- El evento `closed` **no se emite** cuando `disabled` es `true`, no es necesario manejarlo manualmente.
+- El ícono de cierre es fijo (`X` de `lucide-angular`) y no es configurable.
+- El botón tiene forma circular y aplica un fondo sutil (`hover:bg-tm-subtle`) al pasar el cursor, sin afectar el layout del contenedor.
+
+---
+
+# Componente InputTen
+
+Componente de campo de texto de la librería **@10mindssoftware/tm-ui-kit**. Soporta múltiples tipos de input, tamaños, íconos, estados de error, hints y labels.
+
+---
+
+## Uso
+
+Importa el componente en tu módulo o componente standalone:
+
+```typescript
+import { InputTen } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [InputTen],
+})
+```
+
+---
+
+## API
+
+### Inputs
+
+| Prop          | Tipo             | Default         | Descripción                                                  |
+| ------------- | ---------------- | --------------- | ------------------------------------------------------------ |
+| `value`       | `string`         | `''`            | Valor del input (two-way binding con `model`)                |
+| `size`        | `InputSize`      | `'md'`          | Tamaño del input                                             |
+| `type`        | `InputType`      | `'text'`        | Tipo de input nativo                                         |
+| `placeholder` | `string`         | `'placeholder'` | Texto de placeholder                                         |
+| `label`       | `string`         | `''`            | Etiqueta visible sobre el input                              |
+| `hint`        | `string`         | `''`            | Texto de ayuda debajo del input (no se muestra si hay error) |
+| `disabled`    | `boolean`        | `false`         | Desactiva el input                                           |
+| `required`    | `boolean`        | `false`         | Marca el campo como requerido (agrega `*` al label)          |
+| `error`       | `string`         | `''`            | Mensaje de error (activa el estado visual de error)          |
+| `iconLeft`    | `LucideIconData` | —               | Ícono a la izquierda del input                               |
+| `iconRight`   | `LucideIconData` | —               | Ícono a la derecha del input                                 |
+
+### Outputs
+
+| Evento    | Tipo         | Descripción                             |
+| --------- | ------------ | --------------------------------------- |
+| `focused` | `FocusEvent` | Se emite cuando el input recibe el foco |
+| `blurred` | `FocusEvent` | Se emite cuando el input pierde el foco |
+
+### Tipos
+
+```typescript
+type InputSize = 'sm' | 'md';
+type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+```
+
+---
+
+## Ejemplos
+
+### Uso básico
+
+```html
+<tm-input placeholder="Escribe algo..." />
+```
+
+### Con label y hint
+
+```html
+<tm-input
+  label="Correo electrónico"
+  placeholder="ejemplo@correo.com"
+  hint="Nunca compartiremos tu correo."
+/>
+```
+
+### Campo requerido
+
+```html
+<tm-input label="Nombre completo" placeholder="Juan Pérez" [required]="true" />
+```
+
+### Tamaños
+
+```html
+<tm-input size="md" placeholder="Medium (default)" /> <tm-input size="sm" placeholder="Small" />
+```
+
+### Tipos de input
+
+```html
+<tm-input type="text" placeholder="Texto" />
+<tm-input type="email" placeholder="Correo" />
+<tm-input type="password" placeholder="Contraseña" />
+<tm-input type="number" placeholder="Número" />
+<tm-input type="search" placeholder="Buscar..." />
+<tm-input type="tel" placeholder="Teléfono" />
+<tm-input type="url" placeholder="https://..." />
+```
+
+### Estado deshabilitado
+
+```html
+<tm-input [disabled]="true" placeholder="No disponible" />
+<tm-input [disabled]="true" label="Usuario" placeholder="admin" />
+```
+
+### Estado de error
+
+```html
+<tm-input
+  label="Correo electrónico"
+  placeholder="ejemplo@correo.com"
+  error="El correo ingresado no es válido."
+/>
+```
+
+> Cuando `error` tiene valor, el hint queda oculto y el borde cambia a rojo.
+
+### Con íconos
+
+Los íconos se pasan como objetos `LucideIconData`, **no como strings**.
+
+```typescript
+// app.ts
+import { Mail, Lock, Search, Eye } from 'lucide-angular';
+
+export class App {
+  mail = Mail;
+  lock = Lock;
+  search = Search;
+  eye = Eye;
+}
+```
+
+```html
+<!-- Ícono izquierdo -->
+<tm-input [iconLeft]="mail" placeholder="Correo electrónico" />
+
+<!-- Ícono derecho -->
+<tm-input [iconRight]="eye" type="password" placeholder="Contraseña" />
+
+<!-- Ambos íconos -->
+<tm-input [iconLeft]="search" [iconRight]="eye" placeholder="Buscar..." />
+```
+
+### Two-way binding
+
+```html
+<tm-input [(value)]="correo" placeholder="Correo electrónico" />
+<p>Valor actual: {{ correo }}</p>
+```
+
+```typescript
+correo = '';
+```
+
+### Manejo de eventos de foco
+
+```html
+<tm-input placeholder="Nombre" (focused)="onFocus($event)" (blurred)="onBlur($event)" />
+```
+
+```typescript
+onFocus(event: FocusEvent) {
+  console.log('Input enfocado', event);
+}
+
+onBlur(event: FocusEvent) {
+  console.log('Input desenfocado', event);
+}
+```
+
+### Combinaciones comunes
+
+```html
+<!-- Campo de búsqueda -->
+<tm-input type="search" size="sm" [iconLeft]="search" placeholder="Buscar usuarios..." />
+
+<!-- Campo de contraseña con label y error -->
+<tm-input
+  type="password"
+  label="Contraseña"
+  placeholder="Mínimo 8 caracteres"
+  [iconLeft]="lock"
+  error="La contraseña es demasiado corta."
+/>
+
+<!-- Campo de email requerido con hint -->
+<tm-input
+  type="email"
+  label="Correo electrónico"
+  placeholder="ejemplo@correo.com"
+  [iconLeft]="mail"
+  hint="Te enviaremos un enlace de confirmación."
+  [required]="true"
+  [(value)]="email"
+/>
+```
+
+---
+
+## Notas
+
+- El prop `value` usa `model()` de Angular Signals, lo que permite two-way binding con la sintaxis `[(value)]`.
+- Cuando `error` tiene contenido, el `hint` **no se muestra**, independientemente de su valor.
+- El estado visual del wrapper cambia automáticamente entre `default`, `active`, `error` y `disabled` sin configuración adicional.
+- Los íconos deben importarse desde `lucide-angular` como objetos y asignarse a propiedades del componente. Pasar strings directamente **no funciona**.
+- No se requiere ninguna configuración global de íconos en `app.config.ts`.
+
+---
+
+# Componente de Menú
+
+Componente de menú desplegable flexible para Angular. Soporta cualquier trigger personalizado (avatar, botón, ícono de 3 puntos, etc.) y contenido variable dentro del panel.
+
+---
+
+## Instalación
+
+Importa `TmMenu` en tu componente:
+
+```typescript
+import { TmMenu } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [TmMenu],
+})
+export class MiComponente {}
+```
+
+> `TmMenu` ya incluye `MenuComponent`, `MenuTriggerDirective` y `MenuItem` — no necesitas importarlos por separado.
+
+---
+
+## Uso básico
+
+```html
+<tm-menu placement="bottom-end" triggerOn="click">
+  <ng-template tmMenuTrigger>
+    <button>Abrir menú</button>
+  </ng-template>
+
+  <tm-menu-item label="Mi perfil" [icon]="userIcon" />
+  <tm-menu-item label="Configuración" [icon]="settingsIcon" />
+  <tm-menu-item label="Cerrar sesión" [danger]="true" [divider]="true" />
+</tm-menu>
+```
+
+---
+
+## Inputs de `tm-menu`
+
+| Input       | Tipo                                                         | Default        | Descripción             |
+| ----------- | ------------------------------------------------------------ | -------------- | ----------------------- |
+| `placement` | `'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'` | `'bottom-end'` | Posición del panel      |
+| `triggerOn` | `'click' \| 'hover' \| 'both'`                               | `'click'`      | Cómo se dispara el menú |
+
+## Outputs de `tm-menu`
+
+| Output     | Descripción                       |
+| ---------- | --------------------------------- |
+| `(opened)` | Se emite cuando el menú se abre   |
+| `(closed)` | Se emite cuando el menú se cierra |
+
+---
+
+## Inputs de `tm-menu-item`
+
+| Input      | Tipo             | Default   | Descripción                   |
+| ---------- | ---------------- | --------- | ----------------------------- |
+| `label`    | `string`         | requerido | Texto del ítem                |
+| `icon`     | `LucideIconData` | —         | Ícono a la izquierda          |
+| `danger`   | `boolean`        | `false`   | Estilo de color rojo          |
+| `divider`  | `boolean`        | `false`   | Muestra línea divisora encima |
+| `disabled` | `boolean`        | `false`   | Deshabilita el ítem           |
+
+## Outputs de `tm-menu-item`
+
+| Output       | Descripción                                  |
+| ------------ | -------------------------------------------- |
+| `(selected)` | Se emite al hacer click (respeta `disabled`) |
+
+---
+
+## Ícono dinámico de abierto/cerrado
+
+Para mostrar un chevron que cambia según el estado del menú, usa los outputs `(opened)` y `(closed)` junto con un `signal` en tu componente:
+
+**En tu `.ts`:**
+
+```typescript
+import { signal } from '@angular/core';
+import { ChevronDown, ChevronUp } from 'lucide-angular';
+
+isMenuOpen = signal(false);
+chevronDown = ChevronDown;
+chevronUp = ChevronUp;
+```
+
+**En tu `.html`:**
+
+```html
+<tm-menu placement="bottom-end" (opened)="isMenuOpen.set(true)" (closed)="isMenuOpen.set(false)">
+  <ng-template tmMenuTrigger>
+    <div class="flex items-center gap-2">
+      <span>Jhon Doe</span>
+      <lucide-icon [img]="isMenuOpen() ? chevronUp : chevronDown" [size]="16" />
+    </div>
+  </ng-template>
+
+  <tm-menu-item label="Mi perfil" [icon]="userIcon" />
+  <tm-menu-item label="Cerrar sesión" [danger]="true" />
+</tm-menu>
+```
+
+> Si tienes múltiples menús en el mismo componente, crea un signal separado para cada uno: `isMenu1Open`, `isMenu2Open`, etc.
+
+---
+
+## Menú con header de perfil (caso mobile/especial)
+
+Usa el slot `menuHeader` para agregar contenido encima de los ítems, como el avatar y nombre del usuario:
+
+```html
+<tm-menu placement="bottom-start">
+  <ng-template tmMenuTrigger>
+    <img src="avatar.png" class="rounded-full w-10 h-10" />
+  </ng-template>
+
+  <!-- Header opcional -->
+  <div menuHeader class="px-3 py-3 flex items-center gap-3 border-b border-tm-subtle w-full">
+    <img src="avatar.png" class="rounded-full w-10 h-10" />
+    <div>
+      <p class="font-medium text-sm">Jhon Doe</p>
+      <p class="text-xs text-tm-secondary">Super Admin</p>
+    </div>
+  </div>
+
+  <tm-menu-item label="Mi perfil" [icon]="userIcon" />
+  <tm-menu-item label="Cerrar sesión" [danger]="true" [divider]="true" />
+</tm-menu>
+```
+
+---
+
+## Menú de acciones en tabla (ícono de 3 puntos)
+
+```html
+<tm-menu placement="bottom-end">
+  <ng-template tmMenuTrigger>
+    <lucide-icon [img]="dotsIcon" [size]="16" />
+  </ng-template>
+
+  <tm-menu-item label="Editar" [icon]="editIcon" />
+  <tm-menu-item label="Eliminar" [icon]="trashIcon" [danger]="true" [divider]="true" />
+</tm-menu>
+```
+
+---
+
+## Divider
+
+El `divider` muestra una línea separadora **encima** del ítem. Úsalo en el primer ítem de una sección secundaria, como "Cerrar sesión":
+
+```html
+<tm-menu-item label="Cerrar sesión" [danger]="true" [divider]="true" />
+```
+
+## Componente de 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 '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [RadioButton],
+})
+```
+
+---
+
+## Uso básico
+
+```html
+<tm-radio-button
+  value="opcion1"
+  name="mi-grupo"
+  [checked]="selected === 'opcion1'"
+  (changed)="selected = $event"
+/>
+```
+
+---
+
+## API
+
+### Inputs
+
+| 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                     |
+| `id`       | `string`  | auto-generado   | ID del input para asociar labels externos               |
+
+### Outputs
+
+| Output      | Tipo     | Descripción                             |
+| ----------- | -------- | --------------------------------------- |
+| `(changed)` | `string` | Emite el `value` del radio seleccionado |
+
+---
+
+## Estados
+
+```html
+<!-- Sin seleccionar -->
+<tm-radio-button value="opcion1" name="grupo" [checked]="false" (changed)="onChanged($event)" />
+
+<!-- Seleccionado -->
+<tm-radio-button value="opcion1" name="grupo" [checked]="true" (changed)="onChanged($event)" />
+
+<!-- Disabled desmarcado -->
+<tm-radio-button value="opcion1" name="grupo" [checked]="false" [disabled]="true" />
+
+<!-- Disabled marcado -->
+<tm-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">
+  <tm-radio-button
+    value="mensual"
+    name="plan"
+    label="Mensual"
+    [checked]="selected === 'mensual'"
+    (changed)="onChanged($event)"
+  />
+  <tm-radio-button
+    value="anual"
+    name="plan"
+    label="Anual"
+    [checked]="selected === 'anual'"
+    (changed)="onChanged($event)"
+  />
+  <tm-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) {
+  <tm-radio-button
+    [value]="plan.id"
+    name="planes"
+    [label]="plan.nombre"
+    [checked]="selectedPlan === plan.id"
+    (changed)="selectedPlan = $event"
+  />
+  }
+</div>
+```
+
+### Con opción desactivada
+
+```html
+<tm-radio-button
+  value="premium"
+  name="plan"
+  label="Premium (próximamente)"
+  [checked]="false"
+  [disabled]="true"
+/>
+```
+
+### Selección de rol en formulario
+
+```html
+<div class="flex flex-col gap-3">
+  <tm-radio-button
+    value="admin"
+    name="rol"
+    label="Administrador"
+    [checked]="rol === 'admin'"
+    (changed)="rol = $event"
+  />
+  <tm-radio-button
+    value="editor"
+    name="rol"
+    label="Editor"
+    [checked]="rol === 'editor'"
+    (changed)="rol = $event"
+  />
+  <tm-radio-button
+    value="viewer"
+    name="rol"
+    label="Solo lectura"
+    [checked]="rol === 'viewer'"
+    (changed)="rol = $event"
+  />
+</div>
+```
+
+```typescript
+rol = 'viewer';
+```
+
+## Componente de Select
+
+Combobox con búsqueda integrada, soporte para avatar, ícono y grupos de opciones. Usa CDK Overlay para funcionar correctamente dentro de modales y tablas.
+
+---
+
+## Instalación
+
+Importa `TmSelect` en tu componente:
+
+```typescript
+import { TmSelect } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [TmSelect],
+})
+export class MiComponente {}
+```
+
+---
+
+## Uso básico
+
+```html
+<div class="w-[273px]">
+  <tm-select
+    label="Asignar a"
+    placeholder="Selecciona una persona"
+    [options]="myOptions"
+    (changed)="onSelect($event)"
+  />
+</div>
+```
+
+```typescript
+import { SelectOption } from '@10mindssoftware/tm-ui-kit';
+
+myOptions: SelectOption[] = [
+  { value: 1, label: 'Ana García' },
+  { value: 2, label: 'Luis Pérez' },
+  { value: 3, label: 'Sin asignar', disabled: true },
+];
+
+onSelect(option: SelectOption | null) {
+  console.log('value:', option?.value); // el ID que mandas al backend
+}
+```
+
+> El select ocupa el 100% del contenedor padre. Define el ancho desde afuera con un `div` wrapper.
+
+---
+
+## API de inputs
+
+| Input         | Tipo             | Default            | Descripción                   |
+| ------------- | ---------------- | ------------------ | ----------------------------- |
+| `options`     | `SelectOption[]` | `[]`               | Lista de opciones             |
+| `placeholder` | `string`         | `'Seleccionar...'` | Texto cuando no hay selección |
+| `size`        | `'sm' \| 'md'`   | `'md'`             | Tamaño del campo              |
+| `label`       | `string`         | `''`               | Etiqueta encima del campo     |
+| `disabled`    | `boolean`        | `false`            | Deshabilita el select         |
+| `error`       | `string`         | `''`               | Mensaje de error              |
+
+## API de outputs
+
+| Output      | Tipo                   | Descripción                       |
+| ----------- | ---------------------- | --------------------------------- |
+| `(changed)` | `SelectOption \| null` | Se emite al seleccionar o limpiar |
+
+## Model
+
+| Model   | Tipo                       | Descripción                                    |
+| ------- | -------------------------- | ---------------------------------------------- |
+| `value` | `string \| number \| null` | Valor seleccionado (bindeable con `[(value)]`) |
+
+---
+
+## Ejemplo con avatar e ícono
+
+Cada opción puede tener un `avatar` (imagen) o un `icon` (Lucide). Si tiene ambos, el avatar tiene prioridad.
+
+```typescript
+import { User, Package } from 'lucide-angular';
+
+myOptions: SelectOption[] = [
+  { value: 1, label: 'Ana García', avatar: 'https://ejemplo.com/ana.jpg' },
+  { value: 2, label: 'Luis Pérez', icon: User },
+  { value: 3, label: 'Sin asignar', disabled: true },
+];
+```
+
+```html
+<div class="w-[273px]">
+  <tm-select
+    label="Responsable"
+    placeholder="Selecciona una persona"
+    [options]="myOptions"
+    (changed)="onSelect($event)"
+  />
+</div>
+```
+
+---
+
+## Ejemplo con grupos
+
+Agrega la propiedad `group` a cada opción para agruparlas con un encabezado:
+
+```typescript
+myOptions: SelectOption[] = [
+  { value: 1, label: 'Ana García', avatar: 'https://...', group: 'Equipo A' },
+  { value: 2, label: 'Luis Pérez', icon: User,            group: 'Equipo A' },
+  { value: 3, label: 'Sin asignar',                       group: 'Equipo B', disabled: true },
+];
+```
+
+Las opciones sin `group` se muestran sin encabezado.
+
+---
+
+## Ejemplo con error y disabled
+
+```html
+<div class="w-[273px] flex flex-col gap-4">
+  <!-- Con error -->
+  <tm-select
+    label="Asignar a"
+    [options]="myOptions"
+    error="Este campo es requerido"
+    (changed)="onSelect($event)"
+  />
+
+  <!-- Deshabilitado -->
+  <tm-select label="Asignar a" [options]="myOptions" [disabled]="true" />
+</div>
+```
+
+---
+
+## Obtener el valor para el backend
+
+El `value` de cada opción es el ID que usas para mandar al backend:
+
+```typescript
+onSelect(option: SelectOption | null) {
+  const payload = {
+    asignado_a: option?.value ?? null
+  };
+  this.api.post('/tarea', payload).subscribe();
+}
+```
+
+---
+
+## Interface SelectOption
+
+```typescript
+export interface SelectOption {
+  value: string | number;
+  label: string;
+  avatar?: string;
+  icon?: LucideIconData;
+  group?: string;
+  disabled?: boolean;
+}
+```
+
+# Componente SnackbarService
+
+Sistema de notificaciones globales para mostrar feedback visual al usuario.
+
+### Configuración (una sola vez)
+
+**`app.html`:**
+
+```html
+<snackbar-host /> <router-outlet />
+```
+
+**`app.ts`:**
+
+```typescript
+import { SnackbarHost } from '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [SnackbarHost],
+})
+```
+
+### Uso
+
+```typescript
+import { SnackbarService } from '@10mindssoftware/tm-ui-kit';
+
+export class MiComponente {
+  snackbar = inject(SnackbarService);
+
+  async onGuardar() {
+    try {
+      await this.service.guardar(data);
+      this.snackbar.alert('success', 'Guardado', 'Los cambios fueron guardados correctamente');
+    } catch {
+      this.snackbar.alert('error', 'Error', 'No pudimos guardar los cambios');
+    }
+  }
+}
+```
+
+### Métodos
+
+| Método                                                    | Descripción                      |
+| --------------------------------------------------------- | -------------------------------- |
+| `alert(color, title, description?, duration?, position?)` | Desaparece automáticamente       |
+| `notify(color, title, description?, position?)`           | El usuario la cierra manualmente |
+
+### Parámetros
+
+| Parámetro     | Tipo               | Default     | Valores                                                                          |
+| ------------- | ------------------ | ----------- | -------------------------------------------------------------------------------- |
+| `color`       | `SnackbarColor`    | —           | `success` `error` `warning` `info`                                               |
+| `title`       | `string`           | —           | —                                                                                |
+| `description` | `string`           | `undefined` | —                                                                                |
+| `duration`    | `number`           | `5000`      | Milisegundos                                                                     |
+| `position`    | `SnackbarPosition` | `top-right` | `top-left` `top-center` `top-right` `bottom-left` `bottom-center` `bottom-right` |
+
+### Ejemplos
+
+```typescript
+// Mínimo
+this.snackbar.alert('success', 'Guardado');
+
+// Con descripción
+this.snackbar.alert('error', 'Error de pago', 'No pudimos procesar tu método de pago');
+
+// Con duración personalizada
+this.snackbar.alert('warning', 'Licencia por expirar', 'Expira en 7 días', 2000);
+
+// Con posición personalizada
+this.snackbar.alert('info', 'Nueva versión', 'Yana 2.0 disponible', 5000, 'bottom-center');
+
+// Notificación persistente
+this.snackbar.notify('success', 'Compra exitosa', 'Tu licencia fue activada');
+
+// Notificación con posición
+this.snackbar.notify('error', 'Sin conexión', undefined, 'bottom-right');
+```
+
+---
+
+# 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 '@10mindssoftware/tm-ui-kit';
+
+@Component({
+  imports: [Toggle],
+})
+```
+
+---
+
+## Uso básico
+
+```html
+<tm-toggle [value]="isActive" (changed)="isActive = $event" />
+```
+
+---
+
+## API
+
+### Inputs
+
+| Input      | Tipo      | Default | Descripción              |
+| ---------- | --------- | ------- | ------------------------ |
+| `value`    | `boolean` | `false` | Estado actual del toggle |
+| `disabled` | `boolean` | `false` | Desactiva la interacción |
+
+### Outputs
+
+| Output      | Tipo      | Descripción                          |
+| ----------- | --------- | ------------------------------------ |
+| `(changed)` | `boolean` | Emite el nuevo estado al hacer click |
+
+---
+
+## Estados
+
+```html
+<!-- Apagado -->
+<tm-toggle [value]="false" (changed)="onChanged($event)" />
+
+<!-- Encendido -->
+<tm-toggle [value]="true" (changed)="onChanged($event)" />
+
+<!-- Disabled apagado -->
+<tm-toggle [value]="false" [disabled]="true" />
+
+<!-- Disabled encendido -->
+<tm-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
+<tm-toggle [value]="isActive" (changed)="onChanged($event)" />
+```
+
+O de forma inline:
+
+```html
+<tm-toggle [value]="isActive" (changed)="isActive = $event" />
+```
+
+---
+
+## Casos de uso reales
+
+### Activar notificaciones
+
+```html
+<div class="flex items-center gap-3">
+  <tm-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">
+  <tm-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
+<tm-toggle
+  [value]="configuracion.habilitado"
+  [disabled]="!tienePermisos"
+  (changed)="configuracion.habilitado = $event"
+/>
+```