@jonapin006/tiger 1.0.34 → 1.0.35

package/README.md

@@ -107,12 +107,146 @@ La `TigerTopBar` está diseñada para ser 100% agnóstica a estilos de layout.
     description="Bienvenido al panel centralizado"
     actions={<MyActionsComponent />} 
 />
+
+---
+
+## 🎨 Catálogo de Componentes (Ejemplos)
+
+Tiger está diseñado para ser intuitivo. Aquí tienes cómo usar las piezas maestras de la librería.
+
+### 🏛️ 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 { TigerDashboardLayout, TigerSidebar, TigerTopBar } from '@jonapin006/tiger';
+
+// ... tu lógica de estado para el sidebar
+
+<TigerDashboardLayout 
+  sidebar={<TigerSidebar items={menuItems} activeId={active} />}
+  topbar={
+    <TigerTopBar 
+      title="Dashboard" 
+      description="Estado de tus operaciones" 
+      actions={<UserMenu />}
+    />
+  }
+>
+  {/* El contenido aquí tendrá scroll automático independiente */}
+  <div className="p-6">
+     <MyMainContent />
+  </div>
+</TigerDashboardLayout>
+```
+
+### 🔘 Botones e Iconos
+Tiger soporta iconos integrados en ambos lados, respetando el sistema de tamaños y espaciado temático de forma nativa.
+
+```tsx
+import { TigerButton, ComponentSize } from '@jonapin006/tiger';
+import { Plus, ArrowRight, Download, Send } from 'lucide-react';
+
+/* Ejemplos por tamaño */
+<TigerButton size={ComponentSize.Small} iconLeft={Plus}>
+  Nuevo
+</TigerButton>
+
+<TigerButton size={ComponentSize.Medium} iconRight={ArrowRight}>
+  Continuar
+</TigerButton>
+
+<TigerButton size={ComponentSize.Large} iconLeft={Download} iconRight={Send}>
+  Doble Icono
+</TigerButton>
+
+<TigerButton size={ComponentSize.Xlarge} iconLeft={Plus} iconRight={ArrowRight}>
+  Boton Hero
+</TigerButton>
+```
+
+### ✍️ Inputs y Switch
+Todos los inputs consumen el sistema de tamaños (Size System) de Tiger.
+
+```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>
+```
+
+### 📊 Tablas de Datos
+La `TigerTable` es premium por defecto, con soporte para estados de carga, filas vacías y estilos de celdas temáticos.
+
+```tsx
+import { TigerTable } from '@jonapin006/tiger';
+
+const columns = [
+  { key: 'name', header: 'Nombre' },
+  { key: 'status', header: 'Estado', render: (val) => <TigerBadge status={val} /> },
+  { key: 'amount', header: 'Monto', align: 'right' }
+];
+
+<TigerTable 
+  columns={columns} 
+  data={myRecords} 
+  loading={isLoading}
+/>
+```
+
+### 📦 Cards y Badges
+Úsalos para agrupar información con elevaciones temáticas.
+
+```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>
+```
+
+### 🔔 Modales y Feedback
+Gestiona overlays con transiciones suaves y fondos desenfocados (glassmorphism).
+
+```tsx
+import { TigerModal, TigerButton } from '@jonapin006/tiger';
+
+<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>
+  }
+>
+  <p>¿Estás seguro de que deseas eliminar este registro?</p>
+</TigerModal>
 ```
 
 ---
 
 ## 🏗️ Excelencia Arquitectónica
 
+-   **Zero-Override Architecture**: Ningún componente de Tiger tiene clases de estilo hardcoded que necesiten ser "pisadas". El componente es una estructura pura que se viste con los tokens del tema activo.
 -   **Clean Architecture**: Separación estricta entre **Domain** (Tipos/Enums), **Application** (Theme Context), **Infrastructure** (Temas Físicos) y **Presentation** (UI Components).
 -   **SOLID Principles**: Componentes desacoplados, abiertos a extensión pero cerrados a modificación, cumpliendo con responsabilidad única (SRP).
 -   **Scale System**: Sistema de 4 niveles de tamaño (**S, M, L, XL**) que sincroniza espaciado, tipografía y elevación en toda la librería.

package/dist/index.d.ts

@@ -13,6 +13,8 @@ export declare interface BaseComponentProps {
 declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: TigerButtonVariant;
     size?: Exclude<ComponentSize, ComponentSize.Xsmall>;
+    iconLeft?: default_2.ElementType;
+    iconRight?: default_2.ElementType;
 }
 
 declare interface CardProps extends SizedComponentProps {
@@ -113,6 +115,10 @@ export declare interface ThemeGeometryConfig {
         };
         baseTypography: string;
         baseStyles: string;
+        layout: {
+            container: string;
+            icon: string;
+        };
     });
     iconButtons: Record<Exclude<ComponentSize, ComponentSize.Xsmall>, {
         size: string;
@@ -876,7 +882,7 @@ declare interface TigerTbodyProps extends BaseComponentProps {
 
 export declare const TigerTd: default_2.FC<TigerTdProps>;
 
-declare interface TigerTdProps extends BaseComponentProps {
+declare interface TigerTdProps extends default_2.TdHTMLAttributes<HTMLTableCellElement> {
     size?: Exclude<ComponentSize, ComponentSize.Xsmall>;
 }
 
@@ -888,7 +894,7 @@ declare interface TigerTheadProps extends BaseComponentProps {
     size?: Exclude<ComponentSize, ComponentSize.Xsmall>;
 }
 
-declare interface TigerThProps extends BaseComponentProps {
+declare interface TigerThProps extends default_2.ThHTMLAttributes<HTMLTableHeaderCellElement> {
     size?: Exclude<ComponentSize, ComponentSize.Xsmall>;
 }