@jonapin006/tiger 1.0.45 → 1.0.46

package/README.md

@@ -53,193 +53,862 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 
 ---
 
-## 🏗️ Guía de Componentes Clave
+## 🌓 Dark Mode
 
-### 🌓 Dark Mode y Persistencia
-Tiger incluye persistencia nativa en `localStorage`. Una vez que el usuario activa el modo oscuro, se mantendrá en futuras sesiones sin parpadeos.
+Tiger incluye persistencia nativa en `localStorage`. El modo se mantiene entre sesiones sin parpadeos.
 
 ```tsx
 import { useTheme } from '@jonapin006/tiger';
 
-const ThemeSwitcher = () => {
-    const { mode, toggleMode } = useTheme();
-    return (
-        <button onClick={toggleMode}>
-            Activo: {mode} (Click para cambiar)
-        </button>
-    );
-};
+function ThemeSwitcher() {
+  const { mode, toggleMode } = useTheme();
+  return <button onClick={toggleMode}>Modo actual: {mode}</button>;
+}
 ```
 
-### 📂 Sidebar Multinivel (Jerarquía 2 Nivel)
-El `TigerSidebar` soporta navegación recursiva. Si un ítem tiene hijos (`children`), se renderizará automáticamente como un grupo desplegable (acordeón).
+---
+
+## 📦 Componentes
+
+### TigerTypography
+
+Componente base para texto. Controla tamaño, peso, y decoración.
 
 ```tsx
-import { TigerSidebar } from '@jonapin006/tiger';
-import { Layout, Star, CreditCard } from 'lucide-react';
-
-const menuItems = [
-    {
-        id: 'group1',
-        label: 'Gestión',
-        icon: Layout,
-        children: [
-            { id: 'sub1', label: 'Campañas', icon: Star },
-            { id: 'sub2', label: 'Tarjetas', icon: CreditCard },
-        ]
-    },
-    { id: 'direct1', label: 'Clientes', icon: Users }
-];
+import { TigerTypography, TypographySize } from '@jonapin006/tiger';
+
+// Tamaños
+<TigerTypography typographySize={TypographySize.Xsmall}>Extra pequeño</TigerTypography>
+<TigerTypography typographySize={TypographySize.Small}>Pequeño</TigerTypography>
+<TigerTypography typographySize={TypographySize.Medium}>Medio</TigerTypography>
+<TigerTypography typographySize={TypographySize.Large}>Grande</TigerTypography>
+<TigerTypography typographySize={TypographySize.Xlarge}>Extra grande</TigerTypography>
+
+// Elemento HTML
+<TigerTypography variant="h1" typographySize={TypographySize.Xlarge}>Título</TigerTypography>
+<TigerTypography variant="span" typographySize={TypographySize.Small}>Inline</TigerTypography>
+
+// Peso tipográfico
+<TigerTypography weight="regular">Regular</TigerTypography>
+<TigerTypography weight="semibold">Semibold</TigerTypography>
+<TigerTypography weight="bold">Bold</TigerTypography>
+
+// Decoración
+<TigerTypography italic>Cursiva</TigerTypography>
+<TigerTypography underline>Subrayado</TigerTypography>
+<TigerTypography strikethrough>Tachado</TigerTypography>
+
+// Combinaciones
+<TigerTypography typographySize={TypographySize.Large} weight="semibold" italic underline>
+  Texto compuesto
+</TigerTypography>
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `typographySize` | `TypographySize` | `Medium` | Tamaño del texto |
+| `variant` | `'h1' \| 'h2' \| 'h3' \| 'p' \| 'span'` | `'p'` | Elemento HTML |
+| `weight` | `'regular' \| 'semibold' \| 'bold'` | — | Peso tipográfico |
+| `bold` | `boolean` | `false` | Shorthand de `weight="bold"` |
+| `italic` | `boolean` | `false` | Cursiva |
+| `underline` | `boolean` | `false` | Subrayado |
+| `strikethrough` | `boolean` | `false` | Tachado |
+| `className` | `string` | — | Clases CSS adicionales |
+| `id` | `string` | — | Atributo id |
+
+---
+
+### TigerButton
+
+Botón principal con variantes, tamaños e íconos.
+
+```tsx
+import { TigerButton, TigerButtonVariant, ComponentSize } from '@jonapin006/tiger';
+import { Download, ArrowRight } from 'lucide-react';
+
+// Variantes
+<TigerButton variant={TigerButtonVariant.Primary}>Primario</TigerButton>
+<TigerButton variant={TigerButtonVariant.Secondary}>Secundario</TigerButton>
+<TigerButton variant={TigerButtonVariant.Ghost}>Ghost</TigerButton>
+
+// Tamaños
+<TigerButton size={ComponentSize.Small}>Pequeño</TigerButton>
+<TigerButton size={ComponentSize.Medium}>Medio</TigerButton>
+<TigerButton size={ComponentSize.Large}>Grande</TigerButton>
+<TigerButton size={ComponentSize.Xlarge}>Extra grande</TigerButton>
+
+// Con íconos
+<TigerButton iconLeft={Download}>Descargar</TigerButton>
+<TigerButton iconRight={ArrowRight}>Continuar</TigerButton>
+
+// Ancho completo
+<TigerButton fullWidth>Acción principal</TigerButton>
+
+// Deshabilitado
+<TigerButton disabled>No disponible</TigerButton>
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `variant` | `TigerButtonVariant` | `Primary` | Estilo visual |
+| `size` | `ComponentSize` | `Medium` | Tamaño (excluye `xsmall`) |
+| `iconLeft` | `React.ElementType` | — | Ícono izquierdo |
+| `iconRight` | `React.ElementType` | — | Ícono derecho |
+| `fullWidth` | `boolean` | `false` | Ocupa el ancho del contenedor |
+| `typographySize` | `TypographySize` | — | Sobreescribe tamaño tipográfico |
+
+Acepta todos los atributos nativos de `<button>`.
+
+---
+
+### TigerIconButton
+
+Botón exclusivamente de ícono.
+
+```tsx
+import { TigerIconButton, TigerButtonVariant, ComponentSize } from '@jonapin006/tiger';
+import { Settings } from 'lucide-react';
+
+<TigerIconButton
+  icon={<Settings />}
+  variant={TigerButtonVariant.Ghost}
+  size={ComponentSize.Medium}
+  aria-label="Configuración"
+  onClick={() => {}}
+/>
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `icon` | `ReactNode` | — | Ícono a renderizar |
+| `variant` | `TigerButtonVariant` | `Primary` | Estilo visual |
+| `size` | `ComponentSize` | `Medium` | Tamaño (excluye `xsmall`) |
+| `disabled` | `boolean` | `false` | Deshabilita el botón |
+| `aria-label` | `string` | — | Etiqueta accesible (recomendado) |
+
+---
+
+### TigerBadge
+
+Etiqueta de estado o categoría.
+
+```tsx
+import { TigerBadge, TigerBadgeVariant, ComponentSize } from '@jonapin006/tiger';
+
+<TigerBadge variant={TigerBadgeVariant.Primary}>Nuevo</TigerBadge>
+<TigerBadge variant={TigerBadgeVariant.Success}>Activo</TigerBadge>
+<TigerBadge variant={TigerBadgeVariant.Warning}>Pendiente</TigerBadge>
+<TigerBadge variant={TigerBadgeVariant.Error}>Error</TigerBadge>
+<TigerBadge variant={TigerBadgeVariant.Accent} size={ComponentSize.Medium}>
+  Destacado
+</TigerBadge>
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `variant` | `TigerBadgeVariant` | `Primary` | Color del badge |
+| `size` | `ComponentSize.Small \| .Medium` | `Small` | Tamaño |
+| `typographySize` | `TypographySize` | — | Sobreescribe tamaño tipográfico |
+
+---
+
+### TigerCard
+
+Contenedor tipo tarjeta con padding y bordes redondeados según el tema.
+
+```tsx
+import { TigerCard, ComponentSize } from '@jonapin006/tiger';
+
+// Estática
+<TigerCard size={ComponentSize.Medium}>
+  <p>Contenido</p>
+</TigerCard>
+
+// Clickeable (aplica hover y cursor automáticamente)
+<TigerCard size={ComponentSize.Large} onClick={() => navigate('/detail')}>
+  <h2>Título</h2>
+  <p>Descripción</p>
+</TigerCard>
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `size` | `ComponentSize` | `Medium` | Padding y borde redondeado (excluye `xsmall`) |
+| `onClick` | `() => void` | — | Si se provee, habilita estilos interactivos |
+| `typographySize` | `TypographySize` | — | Sobreescribe tamaño tipográfico |
+
+---
+
+### TigerStack
+
+Layout flexbox para organizar elementos con gap y alineación uniformes.
+
+```tsx
+import { TigerStack, ComponentSize } from '@jonapin006/tiger';
+
+// Vertical (default)
+<TigerStack gap={ComponentSize.Medium}>
+  <div>Elemento 1</div>
+  <div>Elemento 2</div>
+</TigerStack>
+
+// Horizontal centrado
+<TigerStack direction="horizontal" gap={ComponentSize.Small} align="center">
+  <TigerBadge>Estado</TigerBadge>
+  <TigerTypography>Texto</TigerTypography>
+</TigerStack>
+```
 
-<TigerSidebar 
-    items={menuItems} 
-    activeId={activeId} 
-    onItemSelect={setActiveId} 
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | Dirección del flex |
+| `gap` | `ComponentSize` | `Medium` | Espacio entre hijos |
+| `align` | `'start' \| 'center' \| 'end'` | `'start'` | Alineación |
+
+---
+
+### TigerInput
+
+Campo de texto nativo con variantes de tamaño.
+
+```tsx
+import { TigerInput, ComponentSize } from '@jonapin006/tiger';
+
+<TigerInput placeholder="Buscar..." size={ComponentSize.Medium} />
+
+<TigerInput
+  type="email"
+  placeholder="correo@ejemplo.com"
+  size={ComponentSize.Large}
+  onChange={(e) => setValue(e.target.value)}
 />
+
+// Con ref
+const ref = useRef<HTMLInputElement>(null);
+<TigerInput ref={ref} placeholder="Focus me" />
 ```
 
-### 📏 TopBar y Tipografía
-La `TigerTopBar` está diseñada para ser 100% agnóstica a estilos de layout. Úsala junto a `TigerTypography` para mantener la excelencia visual.
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `size` | `ComponentSize` | `Medium` | Tamaño (excluye `xsmall`) |
+
+Acepta todos los atributos nativos de `<input>` (excepto `size`, `className` y `style`).
+
+---
+
+### TigerCheckbox
+
+Casilla de verificación accesible.
 
 ```tsx
-<TigerTopBar 
-    title="Dashboard" 
-    description="Bienvenido al panel centralizado"
-    actions={<MyActionsComponent />} 
+import { TigerCheckbox, ComponentSize } from '@jonapin006/tiger';
+
+const [checked, setChecked] = useState(false);
+
+<TigerCheckbox checked={checked} onChange={setChecked} size={ComponentSize.Medium} />
+
+<TigerCheckbox checked={true} onChange={() => {}} disabled />
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `checked` | `boolean` | `false` | Estado |
+| `onChange` | `(checked: boolean) => void` | — | Callback |
+| `size` | `ComponentSize.Small \| .Medium \| .Large` | `Medium` | Tamaño |
+| `disabled` | `boolean` | `false` | Deshabilita |
+
+---
+
+### TigerSwitch
+
+Toggle on/off con etiqueta y descripción opcionales.
+
+```tsx
+import { TigerSwitch, TigerSwitchColor, ComponentSize } from '@jonapin006/tiger';
+
+const [enabled, setEnabled] = useState(false);
+
+<TigerSwitch
+  checked={enabled}
+  onChange={setEnabled}
+  label="Notificaciones"
+  description="Recibe alertas por email"
+/>
+
+<TigerSwitch
+  checked={enabled}
+  onChange={setEnabled}
+  color={TigerSwitchColor.Primary}
+  size={ComponentSize.Large}
 />
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `checked` | `boolean` | — | Estado (requerido) |
+| `onChange` | `(checked: boolean) => void` | — | Callback (requerido) |
+| `size` | `ComponentSize.Small \| .Medium \| .Large` | `Medium` | Tamaño |
+| `color` | `TigerSwitchColor` | `Primary` | Color |
+| `label` | `string` | — | Etiqueta visible |
+| `description` | `string` | — | Descripción secundaria |
+| `disabled` | `boolean` | `false` | Deshabilita |
 
 ---
 
-## 🎨 Catálogo de Componentes (Ejemplos)
+### TigerTabs
 
-Tiger está diseñado para ser intuitivo. Aquí tienes cómo usar las piezas maestras de la librería.
+Interfaz de pestañas con tres variantes visuales.
 
-### 🏛️ Dashboard Layout (Orquestación)
-El `TigerDashboardLayout` es el contenedor estructural. Gestiona el scroll independiente del Sidebar y el Contenido, y aplica las sombras direccionales automáticamente.
+```tsx
+import { TigerTabs, TigerTabsVariant, ComponentSize } from '@jonapin006/tiger';
+
+const tabs = [
+  { id: 'general', label: 'General', content: <div>Contenido general</div> },
+  { id: 'security', label: 'Seguridad', content: <div>Seguridad</div> },
+  { id: 'billing', label: 'Facturación', content: <div>Pago</div>, disabled: true },
+];
+
+// Segmento
+<TigerTabs items={tabs} variant={TigerTabsVariant.Segment} />
+
+// Subrayado — ancho completo
+<TigerTabs items={tabs} variant={TigerTabsVariant.Underline} fullWidth />
+
+// Pill — controlado externamente
+<TigerTabs
+  items={tabs}
+  variant={TigerTabsVariant.Pill}
+  activeId={activeTab}
+  onChange={setActiveTab}
+/>
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `items` | `TigerTabItem[]` | — | Pestañas (requerido) |
+| `variant` | `TigerTabsVariant` | `Segment` | Estilo visual |
+| `size` | `ComponentSize` | `Medium` | Tamaño |
+| `activeId` | `string` | — | Control externo |
+| `defaultActiveId` | `string` | — | Tab activo inicial |
+| `onChange` | `(id: string) => void` | — | Callback |
+| `fullWidth` | `boolean` | `false` | Ocupa el ancho completo |
+
+**TigerTabItem:** `id`, `label`, `content`, `icon?`, `disabled?`
+
+---
+
+### TigerAccordion
+
+Secciones expandibles.
 
 ```tsx
-import { TigerDashboardLayout, TigerSidebar, TigerTopBar } from '@jonapin006/tiger';
+import { TigerAccordion } from '@jonapin006/tiger';
+
+const items = [
+  { id: 'q1', title: '¿Cómo funciona?', content: <p>El sistema procesa automáticamente.</p> },
+  { id: 'q2', title: '¿Cuánto cuesta?', content: <p>El plan básico es gratuito.</p> },
+];
 
-// ... tu lógica de estado para el sidebar
+// Una sección a la vez (default)
+<TigerAccordion items={items} defaultExpandedId="q1" />
 
-<TigerDashboardLayout 
-  sidebar={<TigerSidebar items={menuItems} activeId={active} />}
-  topbar={
-    <TigerTopBar 
-      title="Dashboard" 
-      description="Estado de tus operaciones" 
-      actions={<UserMenu />}
-    />
+// Múltiples abiertas simultáneamente
+<TigerAccordion items={items} allowMultiple />
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `items` | `TigerAccordionItemConfig[]` | — | Secciones (requerido) |
+| `allowMultiple` | `boolean` | `false` | Abre varias a la vez |
+| `defaultExpandedId` | `string` | — | Sección abierta inicial |
+| `onExpandedChange` | `(id: string) => void` | — | Callback |
+
+**TigerAccordionItemConfig:** `id`, `title`, `content`, `icon?`, `disabled?`
+
+---
+
+### TigerList / TigerListItem
+
+Lista estructurada con íconos y divisores opcionales.
+
+```tsx
+import { TigerList, TigerListItem, ComponentSize } from '@jonapin006/tiger';
+import { User, Settings, LogOut } from 'lucide-react';
+
+<TigerList size={ComponentSize.Medium} divided>
+  <TigerListItem icon={<User size={16} />}>Perfil</TigerListItem>
+  <TigerListItem icon={<Settings size={16} />}>Configuración</TigerListItem>
+  <TigerListItem icon={<LogOut size={16} />}>Cerrar sesión</TigerListItem>
+</TigerList>
+```
+
+**TigerList**
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `size` | `ComponentSize` | `Medium` | Tamaño (excluye `xsmall`) |
+| `divided` | `boolean` | `true` | Línea divisoria entre ítems |
+
+**TigerListItem**
+
+| Prop | Tipo | Descripción |
+|------|------|-------------|
+| `icon` | `ReactNode` | Ícono a la izquierda |
+| `typographySize` | `TypographySize` | Sobreescribe tamaño tipográfico |
+
+---
+
+### TigerTable
+
+Tabla de datos con sub-componentes semánticos.
+
+```tsx
+import {
+  TigerTable, TigerThead, TigerTbody,
+  TigerTr, TigerTh, TigerTd,
+  ComponentSize
+} from '@jonapin006/tiger';
+
+<TigerTable size={ComponentSize.Medium}>
+  <TigerThead>
+    <TigerTr isHeader>
+      <TigerTh>Nombre</TigerTh>
+      <TigerTh>Email</TigerTh>
+      <TigerTh>Estado</TigerTh>
+    </TigerTr>
+  </TigerThead>
+  <TigerTbody>
+    {users.map((user) => (
+      <TigerTr key={user.id}>
+        <TigerTd>{user.name}</TigerTd>
+        <TigerTd>{user.email}</TigerTd>
+        <TigerTd>
+          <TigerBadge variant={TigerBadgeVariant.Success}>{user.status}</TigerBadge>
+        </TigerTd>
+      </TigerTr>
+    ))}
+  </TigerTbody>
+</TigerTable>
+```
+
+Todos los sub-componentes aceptan `size?: ComponentSize` y `className?: string`. `TigerTr` acepta `isHeader?: boolean`. `TigerTh` y `TigerTd` aceptan `typographySize?: TypographySize`.
+
+---
+
+### TigerModal
+
+Diálogo modal con overlay y pie de página.
+
+```tsx
+import { TigerModal, TigerButton, TigerButtonVariant, ComponentSize } from '@jonapin006/tiger';
+
+const [open, setOpen] = useState(false);
+
+<TigerModal
+  isOpen={open}
+  onClose={() => setOpen(false)}
+  title="Confirmar acción"
+  size={ComponentSize.Medium}
+  footer={
+    <>
+      <TigerButton variant={TigerButtonVariant.Ghost} onClick={() => setOpen(false)}>
+        Cancelar
+      </TigerButton>
+      <TigerButton variant={TigerButtonVariant.Primary} onClick={handleConfirm}>
+        Confirmar
+      </TigerButton>
+    </>
   }
 >
-  {/* El contenido aquí tendrá scroll automático independiente */}
-  <div className="p-6">
-     <MyMainContent />
-  </div>
-</TigerDashboardLayout>
+  <p>¿Estás seguro de que deseas continuar?</p>
+</TigerModal>
 ```
 
-### 🔘 Botones e Iconos
-Tiger soporta iconos integrados en ambos lados, respetando el sistema de tamaños y espaciado temático de forma nativa.
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | — | Visibilidad (requerido) |
+| `onClose` | `() => void` | — | Callback al cerrar (requerido) |
+| `title` | `string` | — | Título del header |
+| `footer` | `ReactNode` | — | Contenido del footer |
+| `size` | `ComponentSize` | `Medium` | Ancho máximo (excluye `xsmall`) |
+| `showCloseButton` | `boolean` | `true` | Muestra botón × |
+
+---
+
+### TigerMessage
+
+Alerta o mensaje con ícono, título y acciones.
 
 ```tsx
-import { TigerButton, ComponentSize } from '@jonapin006/tiger';
-import { Plus, ArrowRight, Download, Send } from 'lucide-react';
+import { TigerMessage, TigerMessageVariant } from '@jonapin006/tiger';
+import { AlertCircle } from 'lucide-react';
 
-/* Ejemplos por tamaño */
-<TigerButton size={ComponentSize.Small} iconLeft={Plus}>
-  Nuevo
-</TigerButton>
+// Simple
+<TigerMessage
+  variant={TigerMessageVariant.Info}
+  title="Tu plan se renueva el 15 de enero."
+/>
 
-<TigerButton size={ComponentSize.Medium} iconRight={ArrowRight}>
-  Continuar
-</TigerButton>
+// Con descripción, ícono y cierre
+<TigerMessage
+  variant={TigerMessageVariant.Error}
+  title="Error de conexión"
+  description="No se pudo conectar al servidor."
+  icon={<AlertCircle />}
+  onClose={() => setVisible(false)}
+  action={
+    <TigerButton size={ComponentSize.Small} onClick={retry}>
+      Reintentar
+    </TigerButton>
+  }
+/>
+```
 
-<TigerButton size={ComponentSize.Large} iconLeft={Download} iconRight={Send}>
-  Doble Icono
-</TigerButton>
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `title` | `string` | — | Título (requerido) |
+| `variant` | `TigerMessageVariant` | `Info` | Tipo/color |
+| `description` | `ReactNode` | — | Detalle del mensaje |
+| `icon` | `ReactNode` | — | Ícono personalizado |
+| `action` | `ReactNode` | — | Botones o acciones |
+| `onClose` | `() => void` | — | Si se provee, muestra botón de cierre |
 
-<TigerButton size={ComponentSize.Xlarge} iconLeft={Plus} iconRight={ArrowRight}>
-  Boton Hero
-</TigerButton>
+---
+
+### TigerToast
+
+Notificaciones temporales. Requiere `TigerToastContainer` en el layout raíz.
+
+```tsx
+import { TigerToastContainer, useToast } from '@jonapin006/tiger';
+
+// En el layout raíz (una sola vez):
+<TigerToastContainer />
+
+// En cualquier componente:
+function SaveButton() {
+  const { addToast } = useToast();
+
+  return (
+    <TigerButton onClick={() =>
+      addToast({
+        title: 'Guardado',
+        description: 'Los cambios se guardaron correctamente.',
+        type: 'success',
+      })
+    }>
+      Guardar
+    </TigerButton>
+  );
+}
 ```
 
-### ✍️ Inputs y Switch
-Todos los inputs consumen el sistema de tamaños (Size System) de Tiger.
+**Opciones de `addToast`**
+
+| Campo | Tipo | Descripción |
+|-------|------|-------------|
+| `title` | `string` | Título del toast |
+| `description` | `string` | Descripción (opcional) |
+| `type` | `'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'` | Tipo visual |
+
+---
+
+### TigerProgress
+
+Barra de progreso o indicador de pasos.
 
 ```tsx
-import { TigerInput, TigerSwitch, TigerStack } from '@jonapin006/tiger';
-
-<TigerStack gap="medium">
-  <TigerInput 
-    label="Correo Electrónico" 
-    placeholder="ejemplo@tiger.com" 
-    icon={Mail} 
-  />
-  
-  <TigerSwitch 
-    label="Notificaciones Push" 
-    checked={isEnabled} 
-    onChange={setIsEnabled} 
-  />
-</TigerStack>
+import { TigerProgress, ComponentSize } from '@jonapin006/tiger';
+
+// Barra de progreso (0–100)
+<TigerProgress value={65} size={ComponentSize.Medium} />
+
+// Sin porcentaje visible
+<TigerProgress value={30} showValue={false} />
+
+// Valor máximo personalizado
+<TigerProgress value={750} max={1000} />
+
+// Por pasos
+<TigerProgress
+  variant="steps"
+  currentStep={3}
+  totalSteps={5}
+  size={ComponentSize.Large}
+/>
 ```
 
-### 📊 Tablas de Datos
-La `TigerTable` es premium por defecto, con soporte para estados de carga, filas vacías y estilos de celdas temáticos.
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `variant` | `'bar' \| 'steps'` | `'bar'` | Tipo de indicador |
+| `value` | `number` | `0` | Valor actual (para `bar`) |
+| `max` | `number` | `100` | Valor máximo (para `bar`) |
+| `currentStep` | `number` | `0` | Paso actual (para `steps`) |
+| `totalSteps` | `number` | `5` | Total de pasos (para `steps`) |
+| `size` | `ComponentSize` | `Medium` | Tamaño (excluye `xsmall`) |
+| `showValue` | `boolean` | `true` | Muestra el porcentaje |
+
+---
+
+### TigerDropdown
+
+Menú desplegable composable.
 
 ```tsx
-import { TigerTable } from '@jonapin006/tiger';
+import {
+  TigerDropdown,
+  TigerDropdownTrigger,
+  TigerDropdownContent,
+  TigerDropdownItem,
+  ComponentSize,
+} from '@jonapin006/tiger';
+
+<TigerDropdown size={ComponentSize.Medium}>
+  <TigerDropdownTrigger label="Opciones" value="Selecciona una opción" />
+  <TigerDropdownContent>
+    <TigerDropdownItem value="edit" onClick={handleEdit}>Editar</TigerDropdownItem>
+    <TigerDropdownItem value="duplicate" onClick={handleDuplicate}>Duplicar</TigerDropdownItem>
+    <TigerDropdownItem value="delete" onClick={handleDelete} disabled>Eliminar</TigerDropdownItem>
+  </TigerDropdownContent>
+</TigerDropdown>
+```
 
-const columns = [
-  { key: 'name', header: 'Nombre' },
-  { key: 'status', header: 'Estado', render: (val) => <TigerBadge status={val} /> },
-  { key: 'amount', header: 'Monto', align: 'right' }
+**TigerDropdown**
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `size` | `ComponentSize` | `Medium` | Ancho mínimo del contenido |
+| `defaultOpen` | `boolean` | `false` | Estado abierto inicial |
+
+**TigerDropdownTrigger:** `label?: string`, `value?: ReactNode`
+**TigerDropdownItem:** `value?: string`, `onClick`, `disabled?: boolean`
+
+---
+
+### TigerSidebar
+
+Barra de navegación lateral con soporte para subelementos.
+
+```tsx
+import { TigerSidebar } from '@jonapin006/tiger';
+import { Home, Users, Settings, BarChart } from 'lucide-react';
+
+const items = [
+  { id: 'dashboard', label: 'Dashboard', icon: Home },
+  {
+    id: 'users',
+    label: 'Usuarios',
+    icon: Users,
+    children: [
+      { id: 'users-list', label: 'Lista', icon: Users },
+      { id: 'users-roles', label: 'Roles', icon: Users },
+    ],
+  },
+  { id: 'analytics', label: 'Analíticas', icon: BarChart },
+  { id: 'settings', label: 'Configuración', icon: Settings },
 ];
 
-<TigerTable 
-  columns={columns} 
-  data={myRecords} 
-  loading={isLoading}
+<TigerSidebar
+  items={items}
+  activeId="dashboard"
+  onItemSelect={(id) => navigate(id)}
+  header={<Logo />}
+  footer={<UserProfile />}
 />
 ```
 
-### 📦 Cards y Badges
-Úsalos para agrupar información con elevaciones temáticas.
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `items` | `SidebarItem[]` | — | Ítems de navegación (requerido) |
+| `activeId` | `string` | — | ID del ítem activo (requerido) |
+| `onItemSelect` | `(id: string) => void` | — | Callback de selección (requerido) |
+| `header` | `ReactNode` | — | Encabezado (ej: logo) |
+| `footer` | `ReactNode` | — | Pie (ej: perfil de usuario) |
+
+**SidebarItem:** `id`, `label`, `icon: React.ElementType`, `children?: SidebarItem[]`
+
+---
+
+### TigerTopBar
+
+Encabezado de página con título, descripción y acciones.
 
 ```tsx
-import { TigerCard, TigerBadge, TigerTypography } from '@jonapin006/tiger';
-
-<TigerCard hoverable padding="large">
-  <div className="flex justify-between items-center">
-    <TigerTypography variant="h3">Ventas Totales</TigerTypography>
-    <TigerBadge variant="success" label="Activo" />
-  </div>
-  <TigerTypography variant="body1" className="mt-4">
-    $4,250.00
-  </TigerTypography>
-</TigerCard>
+import { TigerTopBar, ComponentSize } from '@jonapin006/tiger';
+
+<TigerTopBar
+  title="Panel de Control"
+  description="Resumen general del sistema"
+  size={ComponentSize.Large}
+  actions={
+    <TigerButton variant={TigerButtonVariant.Primary} iconLeft={Plus}>
+      Nueva entrada
+    </TigerButton>
+  }
+/>
 ```
 
-### 🔔 Modales y Feedback
-Gestiona overlays con transiciones suaves y fondos desenfocados (glassmorphism).
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `title` | `ReactNode` | — | Título principal |
+| `description` | `ReactNode` | — | Descripción secundaria |
+| `actions` | `ReactNode` | — | Área derecha (botones, etc.) |
+| `size` | `ComponentSize.Medium \| .Large \| .Xlarge` | `Large` | Tamaño tipográfico del título |
+| `titleTypographySize` | `TypographySize` | — | Sobreescribe tamaño del título |
+| `descriptionTypographySize` | `TypographySize` | — | Sobreescribe tamaño de la descripción |
+
+---
+
+### TigerThumbnail
+
+Avatar o imagen miniatura con forma y estilo configurables.
 
 ```tsx
-import { TigerModal, TigerButton } from '@jonapin006/tiger';
+import { TigerThumbnail, TigerThumbnailVariant, ThumbnailShape, ComponentSize } from '@jonapin006/tiger';
+
+// Con imagen
+<TigerThumbnail
+  src="/avatars/user.jpg"
+  alt="Avatar"
+  size={ComponentSize.Medium}
+  shape={ThumbnailShape.Circle}
+/>
 
-<TigerModal 
-  isOpen={show} 
-  onClose={() => setShow(false)}
-  title="Confirmar Acción"
-  footer={
-    <div className="flex gap-2">
-      <TigerButton variant="ghost" onClick={() => setShow(false)}>Cancelar</TigerButton>
-      <TigerButton variant="primary">Confirmar</TigerButton>
-    </div>
+// Inicial sin imagen
+<TigerThumbnail
+  size={ComponentSize.Large}
+  variant={TigerThumbnailVariant.Soft}
+  shape={ThumbnailShape.Squircle}
+>
+  JD
+</TigerThumbnail>
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `src` | `string` | — | URL de la imagen |
+| `alt` | `string` | — | Texto alternativo |
+| `size` | `ComponentSize` | `Medium` | Tamaño |
+| `shape` | `ThumbnailShape` | `Squircle` | Forma |
+| `variant` | `TigerThumbnailVariant` | `Soft` | Estilo cuando no hay imagen |
+| `bgColor` | `string` | — | Color de fondo personalizado |
+
+---
+
+### TigerGlassContainer
+
+Contenedor con efecto glassmorphism del tema activo.
+
+```tsx
+import { TigerGlassContainer } from '@jonapin006/tiger';
+
+// Estático
+<TigerGlassContainer>
+  <TigerTypography>Contenido en vidrio</TigerTypography>
+</TigerGlassContainer>
+
+// Interactivo (aplica hover automáticamente)
+<TigerGlassContainer onClick={() => openDetail()}>
+  <TigerTypography weight="bold">Tarjeta</TigerTypography>
+</TigerGlassContainer>
+```
+
+| Prop | Tipo | Descripción |
+|------|------|-------------|
+| `onClick` | `() => void` | Si se provee, aplica estilos interactivos |
+| `className` | `string` | Clases CSS adicionales |
+
+Acepta todos los atributos nativos de `<div>`.
+
+---
+
+### TigerDashboardLayout
+
+Layout principal de la aplicación: sidebar + topbar + contenido.
+
+```tsx
+import { TigerDashboardLayout } from '@jonapin006/tiger';
+
+<TigerDashboardLayout
+  sidebar={
+    <TigerSidebar
+      items={navItems}
+      activeId={activeRoute}
+      onItemSelect={navigate}
+      header={<Logo />}
+    />
+  }
+  topbar={
+    <TigerTopBar title={pageTitle} actions={<UserMenu />} />
   }
 >
-  <p>¿Estás seguro de que deseas eliminar este registro?</p>
-</TigerModal>
+  <Outlet />
+</TigerDashboardLayout>
+```
+
+| Prop | Tipo | Descripción |
+|------|------|-------------|
+| `sidebar` | `ReactNode` | Navegación lateral (requerido) |
+| `topbar` | `ReactNode` | Encabezado (requerido) |
+| `children` | `ReactNode` | Contenido de la página (requerido) |
+| `className` | `string` | Clases CSS adicionales |
+
+---
+
+## 🎨 Crear un tema personalizado
+
+Cada tema implementa la interfaz `ThemeDefinition`. Los tamaños de cada componente definen sus propiedades de forma independiente para sobreescritura granular.
+
+```ts
+import type { ThemeDefinition } from '@jonapin006/tiger';
+import { TypographySize, ThemeMode } from '@jonapin006/tiger';
+
+export const myTheme: ThemeDefinition = {
+  name: 'Mi Tema',
+  subName: '',
+  pageTitle: 'Mi App',
+  websiteUrl: 'https://miapp.com',
+  defaultMode: ThemeMode.Light,
+  geometry: {
+    typography: {
+      xsmall: 'text-[10px] font-medium',
+      small:  'text-[12px] font-medium',
+      medium: 'text-[14px] font-semibold',
+      large:  'text-[18px] font-bold',
+      xlarge: 'text-[32px] font-black',
+      weights: {
+        bold:     'font-black',
+        semibold: 'font-semibold',
+        normal:   'font-medium',
+      },
+      styles: {
+        italic:        'italic',
+        normal:        '',
+        underline:     'underline',
+        strikethrough: 'line-through',
+      },
+    },
+    buttons: {
+      small:  { height: 'h-8',  padding: 'px-4', corner: 'rounded-md',  typography: TypographySize.Small },
+      medium: { height: 'h-10', padding: 'px-5', corner: 'rounded-lg',  typography: TypographySize.Medium },
+      large:  { height: 'h-12', padding: 'px-6', corner: 'rounded-xl',  typography: TypographySize.Large },
+      xlarge: { height: 'h-14', padding: 'px-8', corner: 'rounded-2xl', typography: TypographySize.Xlarge },
+      none:   { height: 'h-0 overflow-hidden', padding: 'px-0', corner: 'rounded-none', typography: TypographySize.Small },
+      baseTypography: 'text-inherit leading-none font-bold whitespace-nowrap',
+      baseStyles: 'transition-all duration-300 active:scale-95 disabled:opacity-50 inline-flex items-center justify-center shrink-0',
+      layout: {
+        container: 'inline-flex items-center justify-center gap-2',
+        icon:      'w-[1.2em] h-[1.2em] shrink-0',
+        fullWidth: 'w-full',
+      },
+    },
+    // ... resto de la geometría
+  },
+  modes: {
+    light: { /* ThemeModeConfig */ },
+    dark:  { /* ThemeModeConfig */ },
+  },
+};
 ```
 
 ---