siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSProductCard/POSProductCard.stories.tsx

@@ -1,642 +1,642 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { POSProductCard } from './POSProductCard';
-
-/**
- * POSProductCard es un componente de card especializado para sistemas de punto de venta (POS).
- * Muestra información de producto con imagen, nombre, precio y botón de agregar.
- *
- * Diseñado para catálogos de productos y selección rápida en terminales POS.
- *
- * **Características principales:**
- * - Soporte completo de dark mode pixel-perfect según Figma
- * - Reutiliza el componente Button del sistema (con dark mode invertido)
- * - Focus rings adaptativos para accesibilidad
- * - 3 estados: enabled, active, disabled
- *
- * **Colores Dark Mode del Card (según Figma):**
- * - Card enabled: fondo #18181b, texto #f4f4f5
- * - Card active: fondo #112d57, texto #93d1fd
- *
- * **Colores Dark Mode del Botón (según Figma):**
- * - Fondo: #bfe2fe (celeste claro, invertido)
- * - Texto: #0e79fd (azul, invertido)
- * - Borde: #93d1fd
- *
- * @see [Figma: POS Product Card](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336)
- * @see src/components/Button - Componente Button reutilizado (con dark mode)
- */
-const meta = {
-  title: 'Siesa UI Kit/POSProductCard',
-  component: POSProductCard,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Card de producto para sistemas POS. Muestra imagen, nombre, precio y botón de agregar con soporte completo de dark mode pixel-perfect. El botón reutiliza el componente Button del sistema.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    image: {
-      control: 'text',
-      description: 'URL de la imagen del producto',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    productName: {
-      control: 'text',
-      description: 'Nombre del producto',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    price: {
-      control: 'text',
-      description: 'Precio del producto formateado',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    buttonText: {
-      control: 'text',
-      description: 'Texto del botón de acción',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Agregar' },
-        category: 'Contenido',
-      },
-    },
-    active: {
-      control: 'boolean',
-      description: 'Estado activo/seleccionado del card',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Si el card está deshabilitado',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    onAddClick: {
-      action: 'onAddClick',
-      description: 'Handler cuando se hace clic en el botón Agregar',
-      table: {
-        type: { summary: '(event: MouseEvent) => void' },
-        category: 'Eventos',
-      },
-    },
-    onCardClick: {
-      action: 'onCardClick',
-      description: 'Handler cuando se hace clic en el card',
-      table: {
-        type: { summary: '(event: MouseEvent) => void' },
-        category: 'Eventos',
-      },
-    },
-    className: {
-      control: 'text',
-      description: 'Clases CSS adicionales',
-      table: {
-        type: { summary: 'string' },
-        category: 'Apariencia',
-      },
-    },
-    ariaLabel: {
-      control: 'text',
-      description: 'Label de accesibilidad',
-      table: {
-        type: { summary: 'string' },
-        category: 'Accesibilidad',
-      },
-    },
-  },
-} satisfies Meta<typeof POSProductCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Imagen de ejemplo (placeholder)
-const sampleImage = 'https://images.unsplash.com/photo-1592417817098-8fd3d9eb14a5?w=300&h=200&fit=crop';
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    image: sampleImage,
-    productName: 'Ensalada Caprese',
-    price: '$ 40.000',
-    buttonText: 'Agregar',
-    active: false,
-    disabled: false,
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-export const TodosLosEstados: Story = {
-  args: {
-    image: sampleImage,
-    productName: 'Ensalada Caprese',
-    price: '$ 40.000',
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Estado Enabled (Normal) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Estado Normal (Enabled)
-        </h3>
-        <div className="flex gap-4">
-          <POSProductCard
-            image={sampleImage}
-            productName="Ensalada Caprese"
-            price="$ 40.000"
-            onAddClick={() => console.log('Producto agregado')}
-          />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Estado por defecto con fondo blanco y texto negro
-        </p>
-      </div>
-
-      {/* Estado Activo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Estado Activo (Seleccionado)
-        </h3>
-        <div className="flex gap-4">
-          <POSProductCard
-            image={sampleImage}
-            productName="Ensalada Caprese"
-            price="$ 40.000"
-            active={true}
-            onAddClick={() => console.log('Producto agregado')}
-          />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Estado seleccionado con fondo azul claro y texto azul
-        </p>
-      </div>
-
-      {/* Estado Deshabilitado */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Estado Deshabilitado
-        </h3>
-        <div className="flex gap-4">
-          <POSProductCard
-            image={sampleImage}
-            productName="Ensalada Caprese"
-            price="$ 40.000"
-            disabled={true}
-          />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Estado deshabilitado con opacidad reducida
-        </p>
-      </div>
-
-      {/* Consejos */}
-      <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>Uso recomendado:</strong>
-          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">enabled</code> - Estado normal del producto
-          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">active</code> - Producto seleccionado o agregado al carrito
-          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">disabled</code> - Producto no disponible
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. COMPARACIÓN LADO A LADO
-// ============================================
-export const ComparacionEstados: Story = {
-  args: {
-    image: sampleImage,
-    productName: 'Ensalada Caprese',
-    price: '$ 40.000',
-  },
-  render: () => (
-    <div className="p-6">
-      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-        Comparación de Estados
-      </h3>
-      <div className="flex gap-4 flex-wrap">
-        <div className="text-center">
-          <POSProductCard
-            image={sampleImage}
-            productName="Ensalada Caprese"
-            price="$ 40.000"
-          />
-          <span className="text-xs text-gray-500 dark:text-gray-300 mt-2 block">Normal</span>
-        </div>
-        <div className="text-center">
-          <POSProductCard
-            image={sampleImage}
-            productName="Ensalada Caprese"
-            price="$ 40.000"
-            active={true}
-          />
-          <span className="text-xs text-gray-500 dark:text-gray-300 mt-2 block">Activo</span>
-        </div>
-        <div className="text-center">
-          <POSProductCard
-            image={sampleImage}
-            productName="Ensalada Caprese"
-            price="$ 40.000"
-            disabled={true}
-          />
-          <span className="text-xs text-gray-500 dark:text-gray-300 mt-2 block">Deshabilitado</span>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. GRID DE PRODUCTOS (EJEMPLO DE USO)
-// ============================================
-export const GridDeProductos: Story = {
-  args: {
-    image: sampleImage,
-    productName: 'Ensalada Caprese',
-    price: '$ 40.000',
-  },
-  render: () => {
-    const productos = [
-      { id: 1, name: 'Ensalada Caprese', price: '$ 40.000', active: false },
-      { id: 2, name: 'Pizza Margherita', price: '$ 35.000', active: true },
-      { id: 3, name: 'Pasta Alfredo', price: '$ 28.000', active: false },
-      { id: 4, name: 'Tiramisú', price: '$ 15.000', active: false },
-      { id: 5, name: 'Producto Agotado', price: '$ 22.000', disabled: true },
-      { id: 6, name: 'Risotto', price: '$ 32.000', active: false },
-    ];
-
-    return (
-      <div className="p-6">
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Catálogo de Productos (Ejemplo de Grid)
-        </h3>
-        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-          {productos.map((producto) => (
-            <POSProductCard
-              key={producto.id}
-              image={sampleImage}
-              productName={producto.name}
-              price={producto.price}
-              active={producto.active}
-              disabled={producto.disabled}
-              onAddClick={() => console.log(`Agregado: ${producto.name}`)}
-            />
-          ))}
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
-          Ejemplo de uso en un grid de catálogo de productos POS
-        </p>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 5. DIFERENTES PRECIOS
-// ============================================
-export const DiferentesPrecios: Story = {
-  args: {
-    image: sampleImage,
-    productName: 'Ensalada Caprese',
-    price: '$ 40.000',
-  },
-  render: () => (
-    <div className="p-6">
-      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-        Diferentes Formatos de Precio
-      </h3>
-      <div className="flex gap-4 flex-wrap">
-        <POSProductCard
-          image={sampleImage}
-          productName="Producto Económico"
-          price="$ 5.000"
-        />
-        <POSProductCard
-          image={sampleImage}
-          productName="Producto Medio"
-          price="$ 40.000"
-        />
-        <POSProductCard
-          image={sampleImage}
-          productName="Producto Premium"
-          price="$ 150.000"
-        />
-      </div>
-      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
-        El componente se adapta a diferentes longitudes de precio
-      </p>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. TEXTO PERSONALIZADO DEL BOTÓN
-// ============================================
-export const TextoPersonalizado: Story = {
-  args: {
-    image: sampleImage,
-    productName: 'Ensalada Caprese',
-    price: '$ 40.000',
-  },
-  render: () => (
-    <div className="p-6">
-      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-        Texto Personalizado del Botón
-      </h3>
-      <div className="flex gap-4 flex-wrap">
-        <POSProductCard
-          image={sampleImage}
-          productName="Ensalada Caprese"
-          price="$ 40.000"
-          buttonText="Agregar"
-        />
-        <POSProductCard
-          image={sampleImage}
-          productName="Pizza Especial"
-          price="$ 45.000"
-          buttonText="Pedir"
-        />
-        <POSProductCard
-          image={sampleImage}
-          productName="Combo Familiar"
-          price="$ 80.000"
-          buttonText="Seleccionar"
-        />
-      </div>
-      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
-        El texto del botón se puede personalizar según el contexto
-      </p>
-    </div>
-  ),
-};
-
-// ============================================
-// 7. NOMBRES LARGOS
-// ============================================
-export const NombresLargos: Story = {
-  args: {
-    image: sampleImage,
-    productName: 'Ensalada Caprese',
-    price: '$ 40.000',
-  },
-  render: () => (
-    <div className="p-6">
-      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-        Nombres de Producto Largos
-      </h3>
-      <div className="flex gap-4 flex-wrap">
-        <POSProductCard
-          image={sampleImage}
-          productName="Ensalada"
-          price="$ 25.000"
-        />
-        <POSProductCard
-          image={sampleImage}
-          productName="Ensalada Caprese Especial"
-          price="$ 40.000"
-        />
-        <POSProductCard
-          image={sampleImage}
-          productName="Ensalada Mediterránea con Aceitunas y Queso Feta"
-          price="$ 45.000"
-        />
-      </div>
-      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
-        El nombre del producto se adapta al espacio disponible
-      </p>
-    </div>
-  ),
-};
-
-// ============================================
-// 8. INTERACTIVIDAD
-// ============================================
-export const Interactividad: Story = {
-  args: {
-    image: sampleImage,
-    productName: 'Ensalada Caprese',
-    price: '$ 40.000',
-  },
-  render: () => (
-    <div className="p-6">
-      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-        Eventos de Interacción
-      </h3>
-      <div className="flex gap-4">
-        <POSProductCard
-          image={sampleImage}
-          productName="Producto Interactivo"
-          price="$ 40.000"
-          onCardClick={() => alert('Clic en el card')}
-          onAddClick={() => alert('Clic en el botón Agregar')}
-        />
-      </div>
-      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
-        Haz clic en el card o en el botón para ver los eventos
-      </p>
-
-      {/* Consejos */}
-      <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>Eventos disponibles:</strong>
-          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">onCardClick</code> - Se dispara al hacer clic en el card (no en el botón)
-          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">onAddClick</code> - Se dispara al hacer clic en el botón "Agregar"
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 9. LIGHT VS DARK MODE
-// ============================================
-export const LightVsDarkMode: Story = {
-  args: {
-    image: sampleImage,
-    productName: 'Ensalada Caprese',
-    price: '$ 40.000',
-  },
-  render: () => (
-    <div className="flex gap-8 p-6">
-      {/* Light Mode */}
-      <div className="p-6 bg-white rounded-2xl border border-gray-200">
-        <h3 className="text-sm font-bold mb-4 text-gray-700">
-          Light Mode
-        </h3>
-        <div className="space-y-4">
-          <div className="text-center">
-            <POSProductCard
-              image={sampleImage}
-              productName="Nombre producto"
-              price="$ 40.000"
-            />
-            <span className="text-xs text-gray-500 mt-2 block">Enabled</span>
-            <span className="text-xs text-gray-400 block">Card: #fff, Texto: #18181b</span>
-          </div>
-          <div className="text-center">
-            <POSProductCard
-              image={sampleImage}
-              productName="Nombre producto"
-              price="$ 40.000"
-              active={true}
-            />
-            <span className="text-xs text-gray-500 mt-2 block">Active</span>
-            <span className="text-xs text-gray-400 block">Card: #dbeefe, Texto: #0e79fd</span>
-          </div>
-        </div>
-        <div className="mt-4 p-3 bg-gray-50 rounded text-xs text-gray-600">
-          <strong>Botón Light:</strong><br />
-          Fondo: #0e79fd (azul)<br />
-          Texto: #eff8ff (blanco)
-        </div>
-      </div>
-
-      {/* Dark Mode */}
-      <div className="dark p-6 bg-zinc-900 rounded-2xl">
-        <h3 className="text-sm font-bold mb-4 text-white">
-          Dark Mode
-        </h3>
-        <div className="space-y-4">
-          <div className="text-center">
-            <POSProductCard
-              image={sampleImage}
-              productName="Nombre producto"
-              price="$ 40.000"
-            />
-            <span className="text-xs text-gray-300 mt-2 block">Enabled</span>
-            <span className="text-xs text-gray-500 block">Card: #18181b, Texto: #f4f4f5</span>
-          </div>
-          <div className="text-center">
-            <POSProductCard
-              image={sampleImage}
-              productName="Nombre producto"
-              price="$ 40.000"
-              active={true}
-            />
-            <span className="text-xs text-gray-300 mt-2 block">Active</span>
-            <span className="text-xs text-gray-500 block">Card: #112d57, Texto: #93d1fd</span>
-          </div>
-        </div>
-        <div className="mt-4 p-3 bg-zinc-800 rounded text-xs text-gray-300">
-          <strong>Botón Dark (invertido):</strong><br />
-          Fondo: #bfe2fe (celeste claro)<br />
-          Texto: #0e79fd (azul)
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 10. ESPECIFICACIONES DE FIGMA
-// ============================================
-export const EspecificacionesFigma: Story = {
-  args: {
-    image: sampleImage,
-    productName: 'Nombre producto',
-    price: '$ 40.000',
-  },
-  render: () => (
-    <div className="p-6">
-      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-        Especificaciones de Diseño (Figma)
-      </h3>
-
-      {/* Card con anotaciones */}
-      <div className="flex gap-8 items-start">
-        <div className="relative">
-          <POSProductCard
-            image={sampleImage}
-            productName="Nombre producto"
-            price="$ 40.000"
-          />
-          {/* Anotación de tamaño */}
-          <div className="absolute -right-20 top-0 text-xs text-gray-500">
-            <div className="border-l border-dashed border-gray-400 h-full absolute left-0" />
-            <span className="ml-2">170px</span>
-          </div>
-        </div>
-
-        {/* Tabla de especificaciones */}
-        <div className="text-xs text-gray-600 dark:text-gray-300 space-y-2">
-          <h4 className="font-bold text-sm mb-3">Especificaciones:</h4>
-          <table className="border-collapse">
-            <tbody>
-              <tr>
-                <td className="pr-4 py-1 font-medium">Tamaño:</td>
-                <td className="py-1">170 x 212px</td>
-              </tr>
-              <tr>
-                <td className="pr-4 py-1 font-medium">Padding:</td>
-                <td className="py-1">12px (p-3)</td>
-              </tr>
-              <tr>
-                <td className="pr-4 py-1 font-medium">Gap:</td>
-                <td className="py-1">8px (gap-2)</td>
-              </tr>
-              <tr>
-                <td className="pr-4 py-1 font-medium">Border Radius:</td>
-                <td className="py-1">8px (rounded-lg)</td>
-              </tr>
-              <tr>
-                <td className="pr-4 py-1 font-medium">Imagen:</td>
-                <td className="py-1">146 x 88px</td>
-              </tr>
-              <tr>
-                <td className="pr-4 py-1 font-medium">Nombre:</td>
-                <td className="py-1">Label Small (14px Bold)</td>
-              </tr>
-              <tr>
-                <td className="pr-4 py-1 font-medium">Precio:</td>
-                <td className="py-1">Heading Small (24px Bold, tracking-tighter)</td>
-              </tr>
-              <tr>
-                <td className="pr-4 py-1 font-medium">Botón:</td>
-                <td className="py-1">Button default size xs (reutilizado)</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Link a Figma */}
-      <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>Referencia de diseño:</strong>{' '}
-          <a
-            href="https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-600 dark:text-blue-400 underline"
-          >
-            Figma: POS Product Card
-          </a>
-        </p>
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { POSProductCard } from './POSProductCard';
+
+/**
+ * POSProductCard es un componente de card especializado para sistemas de punto de venta (POS).
+ * Muestra información de producto con imagen, nombre, precio y botón de agregar.
+ *
+ * Diseñado para catálogos de productos y selección rápida en terminales POS.
+ *
+ * **Características principales:**
+ * - Soporte completo de dark mode pixel-perfect según Figma
+ * - Reutiliza el componente Button del sistema (con dark mode invertido)
+ * - Focus rings adaptativos para accesibilidad
+ * - 3 estados: enabled, active, disabled
+ *
+ * **Colores Dark Mode del Card (según Figma):**
+ * - Card enabled: fondo #18181b, texto #f4f4f5
+ * - Card active: fondo #112d57, texto #93d1fd
+ *
+ * **Colores Dark Mode del Botón (según Figma):**
+ * - Fondo: #bfe2fe (celeste claro, invertido)
+ * - Texto: #0e79fd (azul, invertido)
+ * - Borde: #93d1fd
+ *
+ * @see [Figma: POS Product Card](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336)
+ * @see src/components/Button - Componente Button reutilizado (con dark mode)
+ */
+const meta = {
+  title: 'Siesa UI Kit/POSProductCard',
+  component: POSProductCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Card de producto para sistemas POS. Muestra imagen, nombre, precio y botón de agregar con soporte completo de dark mode pixel-perfect. El botón reutiliza el componente Button del sistema.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    image: {
+      control: 'text',
+      description: 'URL de la imagen del producto',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    productName: {
+      control: 'text',
+      description: 'Nombre del producto',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    price: {
+      control: 'text',
+      description: 'Precio del producto formateado',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    buttonText: {
+      control: 'text',
+      description: 'Texto del botón de acción',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Agregar' },
+        category: 'Contenido',
+      },
+    },
+    active: {
+      control: 'boolean',
+      description: 'Estado activo/seleccionado del card',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si el card está deshabilitado',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    onAddClick: {
+      action: 'onAddClick',
+      description: 'Handler cuando se hace clic en el botón Agregar',
+      table: {
+        type: { summary: '(event: MouseEvent) => void' },
+        category: 'Eventos',
+      },
+    },
+    onCardClick: {
+      action: 'onCardClick',
+      description: 'Handler cuando se hace clic en el card',
+      table: {
+        type: { summary: '(event: MouseEvent) => void' },
+        category: 'Eventos',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Clases CSS adicionales',
+      table: {
+        type: { summary: 'string' },
+        category: 'Apariencia',
+      },
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Label de accesibilidad',
+      table: {
+        type: { summary: 'string' },
+        category: 'Accesibilidad',
+      },
+    },
+  },
+} satisfies Meta<typeof POSProductCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Imagen de ejemplo (placeholder)
+const sampleImage = 'https://images.unsplash.com/photo-1592417817098-8fd3d9eb14a5?w=300&h=200&fit=crop';
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+    buttonText: 'Agregar',
+    active: false,
+    disabled: false,
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+export const TodosLosEstados: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Estado Enabled (Normal) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Estado Normal (Enabled)
+        </h3>
+        <div className="flex gap-4">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+            onAddClick={() => console.log('Producto agregado')}
+          />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Estado por defecto con fondo blanco y texto negro
+        </p>
+      </div>
+
+      {/* Estado Activo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Estado Activo (Seleccionado)
+        </h3>
+        <div className="flex gap-4">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+            active={true}
+            onAddClick={() => console.log('Producto agregado')}
+          />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Estado seleccionado con fondo azul claro y texto azul
+        </p>
+      </div>
+
+      {/* Estado Deshabilitado */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Estado Deshabilitado
+        </h3>
+        <div className="flex gap-4">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+            disabled={true}
+          />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Estado deshabilitado con opacidad reducida
+        </p>
+      </div>
+
+      {/* Consejos */}
+      <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>Uso recomendado:</strong>
+          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">enabled</code> - Estado normal del producto
+          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">active</code> - Producto seleccionado o agregado al carrito
+          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">disabled</code> - Producto no disponible
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. COMPARACIÓN LADO A LADO
+// ============================================
+export const ComparacionEstados: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Comparación de Estados
+      </h3>
+      <div className="flex gap-4 flex-wrap">
+        <div className="text-center">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+          />
+          <span className="text-xs text-gray-500 dark:text-gray-300 mt-2 block">Normal</span>
+        </div>
+        <div className="text-center">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+            active={true}
+          />
+          <span className="text-xs text-gray-500 dark:text-gray-300 mt-2 block">Activo</span>
+        </div>
+        <div className="text-center">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+            disabled={true}
+          />
+          <span className="text-xs text-gray-500 dark:text-gray-300 mt-2 block">Deshabilitado</span>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. GRID DE PRODUCTOS (EJEMPLO DE USO)
+// ============================================
+export const GridDeProductos: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => {
+    const productos = [
+      { id: 1, name: 'Ensalada Caprese', price: '$ 40.000', active: false },
+      { id: 2, name: 'Pizza Margherita', price: '$ 35.000', active: true },
+      { id: 3, name: 'Pasta Alfredo', price: '$ 28.000', active: false },
+      { id: 4, name: 'Tiramisú', price: '$ 15.000', active: false },
+      { id: 5, name: 'Producto Agotado', price: '$ 22.000', disabled: true },
+      { id: 6, name: 'Risotto', price: '$ 32.000', active: false },
+    ];
+
+    return (
+      <div className="p-6">
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Catálogo de Productos (Ejemplo de Grid)
+        </h3>
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+          {productos.map((producto) => (
+            <POSProductCard
+              key={producto.id}
+              image={sampleImage}
+              productName={producto.name}
+              price={producto.price}
+              active={producto.active}
+              disabled={producto.disabled}
+              onAddClick={() => console.log(`Agregado: ${producto.name}`)}
+            />
+          ))}
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+          Ejemplo de uso en un grid de catálogo de productos POS
+        </p>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 5. DIFERENTES PRECIOS
+// ============================================
+export const DiferentesPrecios: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Diferentes Formatos de Precio
+      </h3>
+      <div className="flex gap-4 flex-wrap">
+        <POSProductCard
+          image={sampleImage}
+          productName="Producto Económico"
+          price="$ 5.000"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Producto Medio"
+          price="$ 40.000"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Producto Premium"
+          price="$ 150.000"
+        />
+      </div>
+      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+        El componente se adapta a diferentes longitudes de precio
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. TEXTO PERSONALIZADO DEL BOTÓN
+// ============================================
+export const TextoPersonalizado: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Texto Personalizado del Botón
+      </h3>
+      <div className="flex gap-4 flex-wrap">
+        <POSProductCard
+          image={sampleImage}
+          productName="Ensalada Caprese"
+          price="$ 40.000"
+          buttonText="Agregar"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Pizza Especial"
+          price="$ 45.000"
+          buttonText="Pedir"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Combo Familiar"
+          price="$ 80.000"
+          buttonText="Seleccionar"
+        />
+      </div>
+      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+        El texto del botón se puede personalizar según el contexto
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 7. NOMBRES LARGOS
+// ============================================
+export const NombresLargos: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Nombres de Producto Largos
+      </h3>
+      <div className="flex gap-4 flex-wrap">
+        <POSProductCard
+          image={sampleImage}
+          productName="Ensalada"
+          price="$ 25.000"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Ensalada Caprese Especial"
+          price="$ 40.000"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Ensalada Mediterránea con Aceitunas y Queso Feta"
+          price="$ 45.000"
+        />
+      </div>
+      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+        El nombre del producto se adapta al espacio disponible
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 8. INTERACTIVIDAD
+// ============================================
+export const Interactividad: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Eventos de Interacción
+      </h3>
+      <div className="flex gap-4">
+        <POSProductCard
+          image={sampleImage}
+          productName="Producto Interactivo"
+          price="$ 40.000"
+          onCardClick={() => alert('Clic en el card')}
+          onAddClick={() => alert('Clic en el botón Agregar')}
+        />
+      </div>
+      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+        Haz clic en el card o en el botón para ver los eventos
+      </p>
+
+      {/* Consejos */}
+      <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>Eventos disponibles:</strong>
+          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">onCardClick</code> - Se dispara al hacer clic en el card (no en el botón)
+          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">onAddClick</code> - Se dispara al hacer clic en el botón "Agregar"
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 9. LIGHT VS DARK MODE
+// ============================================
+export const LightVsDarkMode: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="flex gap-8 p-6">
+      {/* Light Mode */}
+      <div className="p-6 bg-white rounded-2xl border border-gray-200">
+        <h3 className="text-sm font-bold mb-4 text-gray-700">
+          Light Mode
+        </h3>
+        <div className="space-y-4">
+          <div className="text-center">
+            <POSProductCard
+              image={sampleImage}
+              productName="Nombre producto"
+              price="$ 40.000"
+            />
+            <span className="text-xs text-gray-500 mt-2 block">Enabled</span>
+            <span className="text-xs text-gray-400 block">Card: #fff, Texto: #18181b</span>
+          </div>
+          <div className="text-center">
+            <POSProductCard
+              image={sampleImage}
+              productName="Nombre producto"
+              price="$ 40.000"
+              active={true}
+            />
+            <span className="text-xs text-gray-500 mt-2 block">Active</span>
+            <span className="text-xs text-gray-400 block">Card: #dbeefe, Texto: #0e79fd</span>
+          </div>
+        </div>
+        <div className="mt-4 p-3 bg-gray-50 rounded text-xs text-gray-600">
+          <strong>Botón Light:</strong><br />
+          Fondo: #0e79fd (azul)<br />
+          Texto: #eff8ff (blanco)
+        </div>
+      </div>
+
+      {/* Dark Mode */}
+      <div className="dark p-6 bg-zinc-900 rounded-2xl">
+        <h3 className="text-sm font-bold mb-4 text-white">
+          Dark Mode
+        </h3>
+        <div className="space-y-4">
+          <div className="text-center">
+            <POSProductCard
+              image={sampleImage}
+              productName="Nombre producto"
+              price="$ 40.000"
+            />
+            <span className="text-xs text-gray-300 mt-2 block">Enabled</span>
+            <span className="text-xs text-gray-500 block">Card: #18181b, Texto: #f4f4f5</span>
+          </div>
+          <div className="text-center">
+            <POSProductCard
+              image={sampleImage}
+              productName="Nombre producto"
+              price="$ 40.000"
+              active={true}
+            />
+            <span className="text-xs text-gray-300 mt-2 block">Active</span>
+            <span className="text-xs text-gray-500 block">Card: #112d57, Texto: #93d1fd</span>
+          </div>
+        </div>
+        <div className="mt-4 p-3 bg-zinc-800 rounded text-xs text-gray-300">
+          <strong>Botón Dark (invertido):</strong><br />
+          Fondo: #bfe2fe (celeste claro)<br />
+          Texto: #0e79fd (azul)
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 10. ESPECIFICACIONES DE FIGMA
+// ============================================
+export const EspecificacionesFigma: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Nombre producto',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Especificaciones de Diseño (Figma)
+      </h3>
+
+      {/* Card con anotaciones */}
+      <div className="flex gap-8 items-start">
+        <div className="relative">
+          <POSProductCard
+            image={sampleImage}
+            productName="Nombre producto"
+            price="$ 40.000"
+          />
+          {/* Anotación de tamaño */}
+          <div className="absolute -right-20 top-0 text-xs text-gray-500">
+            <div className="border-l border-dashed border-gray-400 h-full absolute left-0" />
+            <span className="ml-2">170px</span>
+          </div>
+        </div>
+
+        {/* Tabla de especificaciones */}
+        <div className="text-xs text-gray-600 dark:text-gray-300 space-y-2">
+          <h4 className="font-bold text-sm mb-3">Especificaciones:</h4>
+          <table className="border-collapse">
+            <tbody>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Tamaño:</td>
+                <td className="py-1">170 x 212px</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Padding:</td>
+                <td className="py-1">12px (p-3)</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Gap:</td>
+                <td className="py-1">8px (gap-2)</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Border Radius:</td>
+                <td className="py-1">8px (rounded-lg)</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Imagen:</td>
+                <td className="py-1">146 x 88px</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Nombre:</td>
+                <td className="py-1">Label Small (14px Bold)</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Precio:</td>
+                <td className="py-1">Heading Small (24px Bold, tracking-tighter)</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Botón:</td>
+                <td className="py-1">Button default size xs (reutilizado)</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Link a Figma */}
+      <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>Referencia de diseño:</strong>{' '}
+          <a
+            href="https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-600 dark:text-blue-400 underline"
+          >
+            Figma: POS Product Card
+          </a>
+        </p>
+      </div>
+    </div>
+  ),
+};