siesa-ui-kit 1.0.2 → 1.0.3

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

@@ -1,950 +0,0 @@
-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>
-  ),
-};