siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,950 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactElement } from 'react';
+import { Button } from './Button';
+import { PlusIcon, ChevronDownIcon, ArrowRightIcon, CheckIcon, XIcon } from './icons';
+
+/**
+ * Button - Componente de botón del sistema de diseño Siesa
+ *
+ * Sistema completo de botones implementado pixel-perfect según Figma (node 4001-17240).
+ *
+ * **Variantes (type):**
+ * - **Default**: Botón primario con fondo #0e79fd, borde #3c9bf6, shadow-button-inset
+ * - **Outline**: Botón secundario con borde #93d1fd, shadow-sm
+ * - **Plain**: Botón terciario sin borde, hover overlay sutil
+ *
+ * **Tamaños (size):**
+ * - **xs** (24px): Inline actions, espacios compactos
+ * - **sm** (28px): Barras de herramientas
+ * - **base** (32px): Uso general (default)
+ * - **l** (36px): Botones destacados, CTAs
+ * - **xl** (40px): Heroes, landing pages
+ *
+ * **Estados:**
+ * - Default, Hover, Focus (ring 4px #60b6fa), Active (scale-95), Disabled (opacity 50%)
+ *
+ * **Características:**
+ * - Soporte para iconos 16x16px (leftIcon, rightIcon)
+ * - Modo icon-only (cuadrado perfecto)
+ * - Badges de notificación (dot o contador)
+ * - Colores consistentes en light/dark mode según Figma
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240
+ */
+const meta = {
+  title: 'Siesa UI Kit/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Botones interactivos con variantes de tipo (Default, Outline, Plain), múltiples tamaños y soporte completo para iconos. Diseñado para mantener consistencia visual y funcional en toda la aplicación.',
+      },
+    },
+    // Backgrounds addon para probar en diferentes fondos
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'gray', value: '#f3f4f6' },
+        { name: 'dark', value: '#1f2937' },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['default', 'outline', 'plain'],
+      description: 'Tipo visual del botón que determina su jerarquía y uso',
+      table: {
+        type: { summary: "'default' | 'outline' | 'plain'" },
+        defaultValue: { summary: 'default' },
+        category: 'Apariencia',
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'base', 'l', 'xl'],
+      description: 'Tamaño del botón (altura en píxeles)',
+      table: {
+        type: { summary: "'xs' | 'sm' | 'base' | 'l' | 'xl'" },
+        defaultValue: { summary: 'base' },
+        category: 'Apariencia',
+      },
+    },
+    iconOnly: {
+      control: 'boolean',
+      description: 'Si es true, el botón solo muestra el icono (sin texto). El botón se vuelve cuadrado.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Diseño',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el botón, haciéndolo no interactivo y reduciendo su opacidad',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Si el botón ocupa todo el ancho disponible de su contenedor',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Diseño',
+      },
+    },
+    children: {
+      control: 'text',
+      description: 'Contenido del botón (texto o elementos React)',
+      table: {
+        type: { summary: 'ReactNode' },
+        category: 'Contenido',
+      },
+    },
+    leftIcon: {
+      description: 'Icono a mostrar a la izquierda del texto (ReactElement)',
+      table: {
+        type: { summary: 'ReactElement' },
+        category: 'Contenido',
+      },
+      control: false,
+    },
+    rightIcon: {
+      description: 'Icono a mostrar a la derecha del texto (ReactElement)',
+      table: {
+        type: { summary: 'ReactElement' },
+        category: 'Contenido',
+      },
+      control: false,
+    },
+    onClick: {
+      description: 'Función callback ejecutada al hacer click',
+      table: {
+        type: { summary: '() => void' },
+        category: 'Eventos',
+      },
+      action: 'clicked',
+    },
+    className: {
+      description: 'Clases CSS adicionales para personalización',
+      table: {
+        type: { summary: 'string' },
+        category: 'Estilo',
+      },
+      control: 'text',
+    },
+    badge: {
+      control: 'boolean',
+      description: 'Muestra un badge de notificación (dot) en la esquina superior derecha',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Contenido',
+      },
+    },
+    badgeCount: {
+      control: 'number',
+      description: 'Número a mostrar en el badge. Si se proporciona, reemplaza el dot con un contador',
+      table: {
+        type: { summary: 'number' },
+        category: 'Contenido',
+      },
+    },
+    badgeColor: {
+      control: 'select',
+      options: ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'zinc', 'primary', 'secondary', 'tertiary'],
+      description: 'Color del badge de notificación',
+      table: {
+        type: { summary: 'BadgeColor' },
+        defaultValue: { summary: 'red' },
+        category: 'Apariencia',
+      },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Helper: Mapping de iconos disponibles
+const iconMap: Record<string, ReactElement | undefined> = {
+  none: undefined,
+  plus: <PlusIcon />,
+  check: <CheckIcon />,
+  x: <XIcon />,
+  arrow: <ArrowRightIcon />,
+  chevron: <ChevronDownIcon />,
+};
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con todas las props del Button en tiempo real.
+ * Cambia tipo, tamaño, estado, iconos y más para ver cómo se comporta el componente.
+ *
+ * **Controles disponibles:**
+ * - **Type**: Cambia entre default, outline y plain
+ * - **Size**: Ajusta el tamaño del botón
+ * - **Left Icon/Right Icon**: Selecciona iconos para cada lado
+ * - **Icon Only**: Convierte el botón en solo icono (cuadrado)
+ * - **Disabled**: Deshabilita la interacción
+ * - **Full Width**: Expande el botón a todo el ancho
+ * - **Background**: Cambia el fondo para ver contraste (toolbar arriba)
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    type: 'default',
+    size: 'base',
+    children: 'Texto del Botón',
+    iconOnly: false,
+    disabled: false,
+    fullWidth: false,
+  },
+  argTypes: {
+    leftIconSelect: {
+      control: 'select',
+      options: ['none', 'plus', 'check', 'x', 'arrow', 'chevron'],
+      description: 'Selecciona el icono izquierdo',
+      table: { category: 'Contenido' },
+    },
+    rightIconSelect: {
+      control: 'select',
+      options: ['none', 'plus', 'check', 'x', 'arrow', 'chevron'],
+      description: 'Selecciona el icono derecho',
+      table: { category: 'Contenido' },
+    },
+  },
+  render: (args) => {
+    const leftIconSelect = (args as any).leftIconSelect || 'plus';
+    const rightIconSelect = (args as any).rightIconSelect || 'chevron';
+
+    return (
+      <div className="space-y-6">
+        <Button
+          {...args}
+          leftIcon={iconMap[leftIconSelect]}
+          rightIcon={iconMap[rightIconSelect]}
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 2. TODAS LAS VARIANTES PRINCIPALES
+// ============================================
+
+/**
+ * Todas las Variantes Principales
+ *
+ * Vista rápida de las combinaciones más comunes de tipos y tamaños.
+ * Perfecto para tener una visión general del sistema de botones.
+ */
+export const AllVariants: Story = {
+  name: 'Todas las Variantes Principales',
+  render: () => (
+    <div className="space-y-6">
+      {/* Default Type */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Default (Primario)</h3>
+        <div className="flex flex-wrap gap-3 items-center">
+          <Button type="default" size="xs">Extra Pequeño</Button>
+          <Button type="default" size="sm">Pequeño</Button>
+          <Button type="default" size="base">Base</Button>
+          <Button type="default" size="l">Grande</Button>
+          <Button type="default" size="xl">Extra Grande</Button>
+        </div>
+        <div className="flex flex-wrap gap-3 items-center mt-3">
+          <Button type="default" size="xs" leftIcon={<PlusIcon />}>Con Ícono</Button>
+          <Button type="default" size="sm" leftIcon={<PlusIcon />}>Con Ícono</Button>
+          <Button type="default" size="base" leftIcon={<CheckIcon />}>Con Ícono</Button>
+          <Button type="default" size="l" leftIcon={<CheckIcon />}>Con Ícono</Button>
+          <Button type="default" size="xl" leftIcon={<CheckIcon />}>Con Ícono</Button>
+        </div>
+        <div className="flex flex-wrap gap-3 items-center mt-3">
+          <Button type="default" size="xs" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="sm" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="base" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="l" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="xl" iconOnly leftIcon={<PlusIcon />} />
+        </div>
+      </div>
+
+      {/* Outline Type */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Outline (Secundario)</h3>
+        <div className="flex flex-wrap gap-3 items-center">
+          <Button type="outline" size="xs">Extra Pequeño</Button>
+          <Button type="outline" size="sm">Pequeño</Button>
+          <Button type="outline" size="base">Base</Button>
+          <Button type="outline" size="l">Grande</Button>
+          <Button type="outline" size="xl">Extra Grande</Button>
+        </div>
+        <div className="flex flex-wrap gap-3 items-center mt-3">
+          <Button type="outline" size="xs" leftIcon={<PlusIcon />}>Con Ícono</Button>
+          <Button type="outline" size="sm" leftIcon={<PlusIcon />}>Con Ícono</Button>
+          <Button type="outline" size="base" leftIcon={<PlusIcon />}>Con Ícono</Button>
+          <Button type="outline" size="l" leftIcon={<PlusIcon />}>Con Ícono</Button>
+          <Button type="outline" size="xl" leftIcon={<PlusIcon />}>Con Ícono</Button>
+        </div>
+        <div className="flex flex-wrap gap-3 items-center mt-3">
+          <Button type="outline" size="xs" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" size="sm" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" size="base" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" size="l" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" size="xl" iconOnly leftIcon={<PlusIcon />} />
+        </div>
+      </div>
+
+      {/* Plain Type */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Plain (Terciario)</h3>
+        <div className="flex flex-wrap gap-3 items-center">
+          <Button type="plain" size="xs">Extra Pequeño</Button>
+          <Button type="plain" size="sm">Pequeño</Button>
+          <Button type="plain" size="base">Base</Button>
+          <Button type="plain" size="l">Grande</Button>
+          <Button type="plain" size="xl">Extra Grande</Button>
+        </div>
+        <div className="flex flex-wrap gap-3 items-center mt-3">
+          <Button type="plain" size="xs" leftIcon={<PlusIcon />}>Con Ícono</Button>
+          <Button type="plain" size="sm" leftIcon={<PlusIcon />}>Con Ícono</Button>
+          <Button type="plain" size="base" leftIcon={<PlusIcon />}>Con Ícono</Button>
+          <Button type="plain" size="l" leftIcon={<PlusIcon />}>Con Ícono</Button>
+          <Button type="plain" size="xl" leftIcon={<PlusIcon />}>Con Ícono</Button>
+        </div>
+        <div className="flex flex-wrap gap-3 items-center mt-3">
+          <Button type="plain" size="xs" iconOnly leftIcon={<XIcon />} />
+          <Button type="plain" size="sm" iconOnly leftIcon={<XIcon />} />
+          <Button type="plain" size="base" iconOnly leftIcon={<XIcon />} />
+          <Button type="plain" size="l" iconOnly leftIcon={<XIcon />} />
+          <Button type="plain" size="xl" iconOnly leftIcon={<XIcon />} />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. TIPOS Y ESTADOS
+// ============================================
+
+/**
+ * Tipos y Estados
+ *
+ * Compara los 3 tipos de botones (Default, Outline, Plain) en diferentes estados.
+ * Útil para entender cómo se comporta visualmente cada tipo.
+ */
+export const TypesAndStates: Story = {
+  name: 'Tipos y Estados',
+  render: () => (
+    <div className="space-y-6">
+      {/* Estado Normal */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estado Normal</h3>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="default">Default</Button>
+          <Button type="outline">Outline</Button>
+          <Button type="plain">Plain</Button>
+        </div>
+      </div>
+
+      {/* Con Iconos */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Íconos</h3>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="default" leftIcon={<CheckIcon />}>Guardar</Button>
+          <Button type="outline" leftIcon={<XIcon />}>Cancelar</Button>
+          <Button type="plain" leftIcon={<ArrowRightIcon />}>Siguiente</Button>
+        </div>
+      </div>
+
+      {/* Solo Iconos */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Solo Íconos</h3>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="default" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="plain" iconOnly leftIcon={<XIcon />} />
+        </div>
+      </div>
+
+      {/* Estado Disabled */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estado Deshabilitado</h3>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="default" disabled>Por Defecto</Button>
+          <Button type="outline" disabled>Outline</Button>
+          <Button type="plain" disabled>Plain</Button>
+        </div>
+      </div>
+
+      {/* Con Focus Ring (simulado) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Foco (presiona Tab)</h3>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="default">Por Defecto</Button>
+          <Button type="outline">Outline</Button>
+          <Button type="plain">Plain</Button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          💡 Presiona Tab para navegar y ver el anillo de foco en cada botón
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. COMPARACIÓN DE TAMAÑOS
+// ============================================
+
+/**
+ * Comparación de Tamaños
+ *
+ * Visualiza todos los tamaños disponibles (xs, sm, base, l, xl) lado a lado.
+ * Útil para elegir el tamaño apropiado según el contexto.
+ */
+export const SizeComparison: Story = {
+  name: 'Comparación de Tamaños',
+  render: () => (
+    <div className="space-y-6">
+      {/* Con Texto */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Texto</h3>
+        <div className="flex gap-4 items-end flex-wrap">
+          <div className="text-center">
+            <Button size="xs">XS - 24px</Button>
+            <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Extra Pequeño</p>
+          </div>
+          <div className="text-center">
+            <Button size="sm">SM - 28px</Button>
+            <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Pequeño</p>
+          </div>
+          <div className="text-center">
+            <Button size="base">Base - 32px</Button>
+            <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Base (por defecto)</p>
+          </div>
+          <div className="text-center">
+            <Button size="l">L - 36px</Button>
+            <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Grande</p>
+          </div>
+          <div className="text-center">
+            <Button size="xl">XL - 40px</Button>
+            <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Extra Grande</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Con Iconos */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Iconos</h3>
+        <div className="flex gap-4 items-end flex-wrap">
+          <Button size="xs" leftIcon={<CheckIcon />}>Guardar</Button>
+          <Button size="sm" leftIcon={<CheckIcon />}>Guardar</Button>
+          <Button size="base" leftIcon={<CheckIcon />}>Guardar</Button>
+          <Button size="l" leftIcon={<CheckIcon />}>Guardar</Button>
+          <Button size="xl" leftIcon={<CheckIcon />}>Guardar</Button>
+        </div>
+      </div>
+
+      {/* Solo Iconos (Cuadrados) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Solo Iconos (Cuadrados Perfectos)</h3>
+        <div className="flex gap-4 items-end flex-wrap">
+          <div className="text-center">
+            <Button size="xs" iconOnly leftIcon={<PlusIcon />} />
+            <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">24×24px</p>
+          </div>
+          <div className="text-center">
+            <Button size="sm" iconOnly leftIcon={<PlusIcon />} />
+            <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">28×28px</p>
+          </div>
+          <div className="text-center">
+            <Button size="base" iconOnly leftIcon={<PlusIcon />} />
+            <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">32×32px</p>
+          </div>
+          <div className="text-center">
+            <Button size="l" iconOnly leftIcon={<PlusIcon />} />
+            <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">36×36px</p>
+          </div>
+          <div className="text-center">
+            <Button size="xl" iconOnly leftIcon={<PlusIcon />} />
+            <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">40×40px</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. BOTONES CON ICONOS
+// ============================================
+
+/**
+ * Botones con Iconos
+ *
+ * Ejemplos de cómo usar iconos con botones: izquierda, derecha, o ambos lados.
+ * Los iconos ayudan a comunicar la acción del botón visualmente.
+ */
+export const WithIcons: Story = {
+  name: 'Botones con Iconos',
+  render: () => (
+    <div className="space-y-6">
+      {/* Icono Izquierdo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Ícono a la Izquierda</h3>
+        <div className="flex gap-3 items-center flex-wrap">
+          <Button type="default" leftIcon={<PlusIcon />}>Agregar</Button>
+          <Button type="outline" leftIcon={<CheckIcon />}>Confirmar</Button>
+          <Button type="plain" leftIcon={<XIcon />}>Cerrar</Button>
+        </div>
+      </div>
+
+      {/* Icono Derecho */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Ícono a la Derecha</h3>
+        <div className="flex gap-3 items-center flex-wrap">
+          <Button type="default" rightIcon={<ArrowRightIcon />}>Siguiente</Button>
+          <Button type="outline" rightIcon={<ChevronDownIcon />}>Menú</Button>
+          <Button type="plain" rightIcon={<ArrowRightIcon />}>Ver más</Button>
+        </div>
+      </div>
+
+      {/* Ambos Lados */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Íconos en Ambos Lados</h3>
+        <div className="flex gap-3 items-center flex-wrap">
+          <Button type="default" leftIcon={<CheckIcon />} rightIcon={<ArrowRightIcon />}>
+            Continuar
+          </Button>
+          <Button type="outline" leftIcon={<PlusIcon />} rightIcon={<ChevronDownIcon />}>
+            Agregar más
+          </Button>
+        </div>
+      </div>
+
+      {/* Diferentes Tamaños */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Diferentes Tamaños con Íconos</h3>
+        <div className="flex gap-3 items-end flex-wrap">
+          <Button size="xs" leftIcon={<CheckIcon />}>XS</Button>
+          <Button size="sm" leftIcon={<CheckIcon />}>SM</Button>
+          <Button size="base" leftIcon={<CheckIcon />}>Base</Button>
+          <Button size="l" leftIcon={<CheckIcon />}>Grande</Button>
+          <Button size="xl" leftIcon={<CheckIcon />}>XL</Button>
+        </div>
+      </div>
+
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <p className="text-xs text-gray-600 dark:text-gray-300">
+          <strong>💡 Guía de Íconos:</strong>
+          <br />• Usa íconos a la <strong>izquierda</strong> para acciones (agregar, guardar, eliminar)
+          <br />• Usa íconos a la <strong>derecha</strong> para navegación (siguiente, expandir)
+          <br />• Los íconos deben ser claros y relacionados con la acción
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. BOTONES SOLO ICONO
+// ============================================
+
+/**
+ * Botones Solo Icono
+ *
+ * Botones compactos que solo muestran un icono, perfectos para barras de herramientas,
+ * headers, o cuando el espacio es limitado. Son cuadrados perfectos.
+ */
+export const IconOnly: Story = {
+  name: 'Botones Solo Icono',
+  render: () => (
+    <div className="space-y-6">
+      {/* Por Tipo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Por Tipo</h3>
+        <div className="flex gap-3 items-center flex-wrap">
+          <Button type="default" size="base" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" size="base" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="plain" size="base" iconOnly leftIcon={<XIcon />} />
+        </div>
+      </div>
+
+      {/* Por Tamaño */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Por Tamaño (Cuadrados Perfectos)</h3>
+        <div className="flex gap-3 items-end flex-wrap">
+          <Button type="default" size="xs" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="sm" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="base" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="l" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="xl" iconOnly leftIcon={<PlusIcon />} />
+        </div>
+      </div>
+
+      {/* Diferentes Iconos */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Diferentes Íconos</h3>
+        <div className="flex gap-3 items-center flex-wrap">
+          <Button type="outline" size="base" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" size="base" iconOnly leftIcon={<CheckIcon />} />
+          <Button type="outline" size="base" iconOnly leftIcon={<XIcon />} />
+          <Button type="outline" size="base" iconOnly leftIcon={<ArrowRightIcon />} />
+          <Button type="outline" size="base" iconOnly leftIcon={<ChevronDownIcon />} />
+        </div>
+      </div>
+
+      {/* En Grupo (Toolbar) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">En Grupo (Barra de Herramientas)</h3>
+        <div className="flex gap-1 items-center border border-gray-200 dark:border-gray-700 rounded-lg p-1 inline-flex">
+          <Button type="plain" size="sm" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="plain" size="sm" iconOnly leftIcon={<CheckIcon />} />
+          <Button type="plain" size="sm" iconOnly leftIcon={<XIcon />} />
+          <div className="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1" />
+          <Button type="plain" size="sm" iconOnly leftIcon={<ArrowRightIcon />} />
+        </div>
+      </div>
+
+      {/* Disabled */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estado Deshabilitado</h3>
+        <div className="flex gap-3 items-center flex-wrap">
+          <Button type="default" size="base" iconOnly leftIcon={<PlusIcon />} disabled />
+          <Button type="outline" size="base" iconOnly leftIcon={<PlusIcon />} disabled />
+          <Button type="plain" size="base" iconOnly leftIcon={<XIcon />} disabled />
+        </div>
+      </div>
+
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <p className="text-xs text-gray-600 dark:text-gray-300">
+          <strong>💡 Cuándo usar Solo Ícono:</strong>
+          <br />• Barras de herramientas
+          <br />• Botones de cierre en modales/diálogos
+          <br />• Acciones rápidas en tablas/listas
+          <br />• Cuando el espacio es limitado
+          <br />• Asegúrate de que el ícono sea claro y reconocible
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 7. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar los botones en situaciones reales:
+ * formularios, dialogs, acciones, navegación, etc.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  render: () => (
+    <div className="space-y-6">
+      {/* Formulario */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Botones de Formulario</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+          <div className="space-y-4 mb-6">
+            <input type="text" placeholder="Nombre" className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" />
+            <input type="email" placeholder="Email" className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" />
+          </div>
+          <div className="flex gap-3 justify-end">
+            <Button type="outline">Cancelar</Button>
+            <Button type="default" leftIcon={<CheckIcon />}>Guardar</Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Modal/Dialog */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Dialog/Modal</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg max-w-md">
+          <div className="flex items-start justify-between mb-4">
+            <h4 className="text-lg font-bold dark:text-white">Confirmar Acción</h4>
+            <Button type="plain" size="sm" iconOnly leftIcon={<XIcon />} />
+          </div>
+          <p className="text-sm text-gray-600 dark:text-gray-300 mb-6">
+            ¿Estás seguro de que deseas eliminar este elemento? Esta acción no se puede deshacer.
+          </p>
+          <div className="flex gap-3 justify-end">
+            <Button type="outline">Cancelar</Button>
+            <Button type="default">Confirmar</Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Acciones de Tabla */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Acciones en Tabla</h3>
+        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-800">
+              <tr>
+                <th className="px-4 py-2 text-left text-xs font-bold dark:text-white">Nombre</th>
+                <th className="px-4 py-2 text-left text-xs font-bold dark:text-white">Email</th>
+                <th className="px-4 py-2 text-right text-xs font-bold dark:text-white">Acciones</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="border-t dark:border-gray-700">
+                <td className="px-4 py-2 text-sm dark:text-gray-300">Juan Pérez</td>
+                <td className="px-4 py-2 text-sm dark:text-gray-300">juan@example.com</td>
+                <td className="px-4 py-2 text-right">
+                  <div className="flex gap-1 justify-end">
+                    <Button type="plain" size="sm" iconOnly leftIcon={<CheckIcon />} />
+                    <Button type="plain" size="sm" iconOnly leftIcon={<XIcon />} />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Navegación */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Navegación/Paginación</h3>
+        <div className="flex gap-2 items-center">
+          <Button type="outline" size="sm">Anterior</Button>
+          <div className="flex gap-1">
+            <Button type="default" size="sm">1</Button>
+            <Button type="outline" size="sm">2</Button>
+            <Button type="outline" size="sm">3</Button>
+            <Button type="outline" size="sm">4</Button>
+          </div>
+          <Button type="outline" size="sm" rightIcon={<ArrowRightIcon />}>Siguiente</Button>
+        </div>
+      </div>
+
+      {/* Botones de Acción Múltiple */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Acciones Múltiples</h3>
+        <div className="flex gap-3 flex-wrap">
+          <Button type="default" leftIcon={<PlusIcon />}>Nuevo</Button>
+          <Button type="outline" leftIcon={<ArrowRightIcon />}>Exportar</Button>
+          <Button type="outline">Importar</Button>
+          <Button type="plain">Configuración</Button>
+        </div>
+      </div>
+
+      {/* Full Width */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Full Width (en móvil)</h3>
+        <div className="max-w-sm space-y-2">
+          <Button type="default" fullWidth leftIcon={<CheckIcon />}>
+            Guardar Cambios
+          </Button>
+          <Button type="outline" fullWidth>
+            Cancelar
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 7. BOTONES CON BADGES
+// ============================================
+
+/**
+ * Botones con Badges de Notificación
+ *
+ * Los badges permiten mostrar notificaciones o contadores sobre los botones.
+ * Pueden ser simples dots (puntos) o contadores numéricos.
+ */
+export const ConBadges: Story = {
+  render: () => (
+    <div className="space-y-12 p-6">
+      {/* Badge Dot (Simple) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Badge Dot - Notificación Simple
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <Button type="default" size="sm" badge>
+            Notificaciones
+          </Button>
+          <Button type="default" size="base" badge leftIcon={<PlusIcon />}>
+            Mensajes
+          </Button>
+          <Button type="outline" size="base" badge>
+            Alertas
+          </Button>
+          <Button type="plain" size="base" badge>
+            Actualizaciones
+          </Button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Badge simple (dot) para indicar la presencia de notificaciones sin mostrar cantidad
+        </p>
+      </div>
+
+      {/* Badge con Contador */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Badge Contador - Con Número
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <Button type="default" size="sm" badgeCount={3}>
+            Notificaciones
+          </Button>
+          <Button type="default" size="base" badgeCount={12} leftIcon={<PlusIcon />}>
+            Mensajes
+          </Button>
+          <Button type="outline" size="base" badgeCount={99}>
+            Alertas
+          </Button>
+          <Button type="plain" size="base" badgeCount={150}>
+            Actualizaciones
+          </Button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Badge con contador numérico. Los números mayores a 99 se muestran como &quot;99+&quot;
+        </p>
+      </div>
+
+      {/* Badges en Botones de Solo Icono */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Badges en Botones Solo Icono
+        </h3>
+        <div className="flex flex-wrap gap-3 items-center">
+          <Button type="default" size="xs" iconOnly leftIcon={<PlusIcon />} badge ariaLabel="Notificaciones" />
+          <Button type="default" size="sm" iconOnly leftIcon={<PlusIcon />} badgeCount={5} ariaLabel="5 mensajes" />
+          <Button type="default" size="base" iconOnly leftIcon={<PlusIcon />} badgeCount={12} ariaLabel="12 notificaciones" />
+          <Button type="outline" size="l" iconOnly leftIcon={<PlusIcon />} badge ariaLabel="Notificaciones" />
+          <Button type="plain" size="xl" iconOnly leftIcon={<PlusIcon />} badgeCount={3} ariaLabel="3 alertas" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Los badges funcionan perfectamente con botones de solo icono en todos los tamaños
+        </p>
+      </div>
+
+      {/* Colores de Badge */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Colores de Badge
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <Button type="default" badgeCount={5} badgeColor="red">
+            Errores
+          </Button>
+          <Button type="default" badgeCount={3} badgeColor="orange">
+            Advertencias
+          </Button>
+          <Button type="default" badgeCount={12} badgeColor="blue">
+            Info
+          </Button>
+          <Button type="default" badgeCount={7} badgeColor="green">
+            Completados
+          </Button>
+          <Button type="default" badgeCount={2} badgeColor="purple">
+            Nuevos
+          </Button>
+          <Button type="default" badgeCount={15} badgeColor="primary">
+            Mensajes
+          </Button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Los badges soportan todos los colores del sistema de diseño
+        </p>
+      </div>
+
+      {/* Todos los Tamaños con Badge */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Badges en Todos los Tamaños
+        </h3>
+        <div className="flex flex-wrap gap-3 items-end">
+          <Button type="default" size="xs" badgeCount={1}>
+            XS
+          </Button>
+          <Button type="default" size="sm" badgeCount={5}>
+            Small
+          </Button>
+          <Button type="default" size="base" badgeCount={12}>
+            Base
+          </Button>
+          <Button type="default" size="l" badgeCount={25}>
+            Large
+          </Button>
+          <Button type="default" size="xl" badgeCount={99}>
+            Extra Large
+          </Button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          El badge se adapta correctamente a todos los tamaños de botón
+        </p>
+      </div>
+
+      {/* Casos de Uso Comunes */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Casos de Uso Comunes
+        </h3>
+        <div className="space-y-4">
+          {/* Header de App */}
+          <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between">
+              <h4 className="text-sm font-semibold text-gray-700 dark:text-white">Header de Aplicación</h4>
+              <div className="flex gap-2">
+                <Button type="plain" size="sm" iconOnly leftIcon={<PlusIcon />} badgeCount={3} ariaLabel="3 notificaciones" />
+                <Button type="plain" size="sm" iconOnly leftIcon={<PlusIcon />} badgeCount={12} ariaLabel="12 mensajes" />
+                <Button type="plain" size="sm" iconOnly leftIcon={<PlusIcon />} badge ariaLabel="Alertas" />
+              </div>
+            </div>
+          </div>
+
+          {/* Menú de Navegación */}
+          <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+            <h4 className="text-sm font-semibold text-gray-700 dark:text-white mb-3">Menú de Navegación</h4>
+            <div className="space-y-2">
+              <Button type="plain" size="sm" badgeCount={5} badgeColor="red" fullWidth className="justify-start">
+                Notificaciones
+              </Button>
+              <Button type="plain" size="sm" badgeCount={12} badgeColor="blue" fullWidth className="justify-start">
+                Mensajes
+              </Button>
+              <Button type="plain" size="sm" badge badgeColor="green" fullWidth className="justify-start">
+                Tareas
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Tips */}
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <p className="text-xs text-gray-600 dark:text-gray-300">
+          <strong>💡 Consejos de Uso:</strong>
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">badge</code> para notificaciones simples (solo presencia)
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">badgeCount</code> para mostrar cantidad exacta
+          <br />• El color <code className="px-1 bg-white dark:bg-gray-700">red</code> es el predeterminado para alertas/errores
+          <br />• Los números mayores a 99 se muestran automáticamente como &quot;99+&quot;
+          <br />• Funciona con todos los tipos de botón: default, outline y plain
+          <br />• Los badges son accesibles con aria-label automático
+        </p>
+      </div>
+    </div>
+  ),
+};