siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSLocationButton/POSLocationButton.stories.tsx

@@ -1,531 +1,531 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { POSLocationButton } from './POSLocationButton';
-
-const meta = {
-  title: 'Siesa UI Kit/POSLocationButton',
-  component: POSLocationButton,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Botón especializado para punto de venta (POS) que muestra el estado de disponibilidad de una ubicación física (mesa, salón, terraza, etc.) con indicadores visuales claros.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    locationName: {
-      control: 'text',
-      description: 'Nombre de la ubicación (ej: "Antejardín", "Terraza")',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    status: {
-      control: 'select',
-      options: ['available', 'occupied', 'reserved', 'outOfService'],
-      description: 'Estado de disponibilidad de la ubicación',
-      table: {
-        type: { summary: 'POSLocationStatus' },
-        category: 'Apariencia',
-        defaultValue: { summary: 'available' },
-      },
-    },
-    state: {
-      control: 'select',
-      options: ['enabled', 'actived'],
-      description: 'Estado visual del botón (enabled = normal, actived = seleccionado)',
-      table: {
-        type: { summary: 'POSLocationState' },
-        category: 'Estado',
-        defaultValue: { summary: 'enabled' },
-      },
-    },
-    capacity: {
-      control: 'object',
-      description: 'Información de capacidad (mesas ocupadas/total)',
-      table: {
-        type: { summary: 'POSLocationCapacity' },
-        category: 'Contenido',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Si el botón está deshabilitado',
-      table: {
-        type: { summary: 'boolean' },
-        category: 'Estado',
-        defaultValue: { summary: 'false' },
-      },
-    },
-    onClick: {
-      action: 'clicked',
-      description: 'Función a ejecutar al hacer clic',
-      table: {
-        type: { summary: '(event: MouseEvent<HTMLButtonElement>) => void' },
-        category: 'Comportamiento',
-      },
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Si el botón ocupa todo el ancho del contenedor padre',
-      table: {
-        type: { summary: 'boolean' },
-        category: 'Apariencia',
-        defaultValue: { summary: 'true' },
-      },
-    },
-  },
-} satisfies Meta<typeof POSLocationButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    locationName: 'Antejardín',
-    status: 'available',
-    state: 'enabled',
-    capacity: { current: 1, total: 8 },
-    disabled: false,
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-export const TodosLosEstados: Story = {
-  args: {
-    locationName: 'Antejardín',
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Available */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Disponible (Available)
-        </h3>
-        <div className="flex flex-wrap gap-3">
-          <POSLocationButton
-            locationName="Antejardín"
-            status="available"
-            capacity={{ current: 1, total: 8 }}
-          />
-          <POSLocationButton
-            locationName="Antejardín"
-            status="available"
-            state="actived"
-            capacity={{ current: 1, total: 8 }}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Izquierda: Enabled | Derecha: Actived (seleccionado)
-        </p>
-      </div>
-
-      {/* Occupied */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Ocupada (Occupied)
-        </h3>
-        <div className="flex flex-wrap gap-3">
-          <POSLocationButton
-            locationName="Antejardín"
-            status="occupied"
-            capacity={{ current: 1, total: 8 }}
-          />
-          <POSLocationButton
-            locationName="Antejardín"
-            status="occupied"
-            state="actived"
-            capacity={{ current: 1, total: 8 }}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Izquierda: Enabled | Derecha: Actived (seleccionado)
-        </p>
-      </div>
-
-      {/* Reserved */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Reservada (Reserved)
-        </h3>
-        <div className="flex flex-wrap gap-3">
-          <POSLocationButton
-            locationName="Antejardín"
-            status="reserved"
-            capacity={{ current: 1, total: 8 }}
-          />
-          <POSLocationButton
-            locationName="Antejardín"
-            status="reserved"
-            state="actived"
-            capacity={{ current: 1, total: 8 }}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Izquierda: Enabled | Derecha: Actived (seleccionado)
-        </p>
-      </div>
-
-      {/* Out of Service */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Fuera de Servicio (Out of Service)
-        </h3>
-        <div className="flex flex-wrap gap-3">
-          <POSLocationButton
-            locationName="Antejardín"
-            status="outOfService"
-            capacity={{ current: 1, total: 8 }}
-          />
-          <POSLocationButton
-            locationName="Antejardín"
-            status="outOfService"
-            state="actived"
-            capacity={{ current: 1, total: 8 }}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Izquierda: Enabled | Derecha: Actived (seleccionado)
-        </p>
-      </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-content-primary dark:text-dark-content-primary">
-          <strong>💡 Consejos:</strong>
-          <br />• <code className="px-1 bg-white dark:bg-gray-700">
-            available
-          </code>: Ubicación disponible para asignar
-          <br />• <code className="px-1 bg-white dark:bg-gray-700">
-            occupied
-          </code>: Ubicación actualmente en uso
-          <br />• <code className="px-1 bg-white dark:bg-gray-700">
-            reserved
-          </code>: Ubicación reservada para uso futuro
-          <br />• <code className="px-1 bg-white dark:bg-gray-700">
-            outOfService
-          </code>: Ubicación fuera de servicio temporalmente
-          <br />• <code className="px-1 bg-white dark:bg-gray-700">
-            actived
-          </code>: Estado visual cuando la ubicación está seleccionada en la
-          interfaz
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. EJEMPLOS DE USO
-// ============================================
-export const EjemplosDeUso: Story = {
-  args: {
-    locationName: 'Antejardín',
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Caso 1: Dashboard de Restaurante */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Dashboard de Restaurante
-        </h3>
-        <div className="grid grid-cols-2 gap-3 max-w-[400px]">
-          <POSLocationButton
-            locationName="Antejardín"
-            status="available"
-            capacity={{ current: 1, total: 8 }}
-          />
-          <POSLocationButton
-            locationName="Terraza"
-            status="occupied"
-            capacity={{ current: 5, total: 8 }}
-          />
-          <POSLocationButton
-            locationName="Salón Principal"
-            status="reserved"
-            capacity={{ current: 3, total: 12 }}
-          />
-          <POSLocationButton
-            locationName="Bar"
-            status="outOfService"
-            disabled
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Vista típica de un sistema POS mostrando el estado de diferentes áreas
-        </p>
-      </div>
-
-      {/* Caso 2: Selección Activa */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Ubicación Seleccionada
-        </h3>
-        <div className="flex gap-3">
-          <POSLocationButton
-            locationName="Terraza"
-            status="available"
-            capacity={{ current: 2, total: 10 }}
-          />
-          <POSLocationButton
-            locationName="Salón VIP"
-            status="available"
-            state="actived"
-            capacity={{ current: 1, total: 6 }}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          El estado <code className="px-1 bg-white dark:bg-gray-700">actived</code>{' '}
-          indica que la ubicación está seleccionada actualmente
-        </p>
-      </div>
-
-      {/* Caso 3: Sin Información de Capacidad */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Sin Información de Capacidad
-        </h3>
-        <div className="flex gap-3">
-          <POSLocationButton locationName="Área de Espera" status="available" />
-          <POSLocationButton locationName="Zona Exterior" status="occupied" />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Si no se proporciona capacidad, solo se muestra el nombre y el estado
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. ESTADOS INTERACTIVOS
-// ============================================
-export const EstadosInteractivos: Story = {
-  args: {
-    locationName: 'Antejardín',
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Normal */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estado Normal
-        </h3>
-        <POSLocationButton
-          locationName="Terraza"
-          status="available"
-          capacity={{ current: 2, total: 10 }}
-        />
-      </div>
-
-      {/* Hover */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Hover
-        </h3>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mb-2">
-          Pasa el mouse sobre el botón para ver el efecto de sombra
-        </p>
-        <POSLocationButton
-          locationName="Salón Principal"
-          status="occupied"
-          capacity={{ current: 7, total: 12 }}
-        />
-      </div>
-
-      {/* Disabled */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Deshabilitado
-        </h3>
-        <POSLocationButton
-          locationName="Bar"
-          status="outOfService"
-          capacity={{ current: 0, total: 4 }}
-          disabled
-        />
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          El botón deshabilitado tiene opacidad reducida y no es clickeable
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. ANCHO FLEXIBLE VS FIJO
-// ============================================
-export const AnchoFlexible: Story = {
-  args: {
-    locationName: 'Antejardín',
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Full Width (default) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Ancho Completo (fullWidth=true) - Por defecto
-        </h3>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mb-2">
-          El botón ocupa todo el ancho disponible del contenedor padre
-        </p>
-        <div className="w-[245px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg">
-          <p className="text-xs text-content-tertiary mb-2">Contenedor de 245px:</p>
-          <POSLocationButton
-            locationName="Antejardín"
-            status="available"
-            capacity={{ current: 1, total: 8 }}
-            fullWidth={true}
-          />
-        </div>
-        <div className="w-[300px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg mt-4">
-          <p className="text-xs text-content-tertiary mb-2">Contenedor de 300px:</p>
-          <POSLocationButton
-            locationName="Terraza"
-            status="occupied"
-            capacity={{ current: 5, total: 8 }}
-            fullWidth={true}
-          />
-        </div>
-      </div>
-
-      {/* Fixed Width */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Ancho Fijo (fullWidth=false)
-        </h3>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mb-2">
-          El botón tiene un ancho fijo de 189px independiente del contenedor
-        </p>
-        <div className="w-[400px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg">
-          <p className="text-xs text-content-tertiary mb-2">Contenedor de 400px:</p>
-          <POSLocationButton
-            locationName="Salón VIP"
-            status="reserved"
-            capacity={{ current: 2, total: 6 }}
-            fullWidth={false}
-          />
-        </div>
-      </div>
-
-      {/* Comparación lado a lado */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Comparación: Full Width vs Fixed Width
-        </h3>
-        <div className="flex gap-4">
-          <div className="w-[200px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg">
-            <p className="text-xs text-content-tertiary mb-2">fullWidth=true</p>
-            <POSLocationButton
-              locationName="Antejardín"
-              status="available"
-              capacity={{ current: 1, total: 8 }}
-              fullWidth={true}
-            />
-          </div>
-          <div className="w-[200px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg">
-            <p className="text-xs text-content-tertiary mb-2">fullWidth=false</p>
-            <POSLocationButton
-              locationName="Antejardín"
-              status="available"
-              capacity={{ current: 1, total: 8 }}
-              fullWidth={false}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Uso en Sidebar */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Uso típico en Sidebar (245px)
-        </h3>
-        <div className="w-[245px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg flex flex-col gap-2">
-          <p className="text-xs font-bold text-content-primary dark:text-dark-content-primary mb-2">
-            Salones
-          </p>
-          <POSLocationButton
-            locationName="Antejardín"
-            status="available"
-            state="actived"
-            capacity={{ current: 1, total: 8 }}
-          />
-          <POSLocationButton
-            locationName="Terraza"
-            status="occupied"
-            capacity={{ current: 5, total: 8 }}
-          />
-          <POSLocationButton
-            locationName="Salón VIP"
-            status="reserved"
-            capacity={{ current: 2, total: 6 }}
-          />
-          <POSLocationButton
-            locationName="Bar"
-            status="outOfService"
-            capacity={{ current: 0, total: 4 }}
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. VARIANTES DE NOMBRES
-// ============================================
-export const VariantesDeNombres: Story = {
-  args: {
-    locationName: 'Antejardín',
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-        Diferentes Nombres de Ubicación
-      </h3>
-      <div className="grid grid-cols-2 gap-3 max-w-[400px]">
-        <POSLocationButton
-          locationName="Antejardín"
-          status="available"
-          capacity={{ current: 1, total: 8 }}
-        />
-        <POSLocationButton
-          locationName="Terraza Norte"
-          status="available"
-          capacity={{ current: 3, total: 10 }}
-        />
-        <POSLocationButton
-          locationName="Salón VIP"
-          status="reserved"
-          capacity={{ current: 2, total: 6 }}
-        />
-        <POSLocationButton
-          locationName="Patio Interior"
-          status="occupied"
-          capacity={{ current: 5, total: 8 }}
-        />
-        <POSLocationButton
-          locationName="Bar Principal"
-          status="available"
-          capacity={{ current: 4, total: 12 }}
-        />
-        <POSLocationButton
-          locationName="Área Lounge"
-          status="reserved"
-          capacity={{ current: 2, total: 8 }}
-        />
-      </div>
-      <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-        El componente se adapta a nombres de ubicación de diferentes longitudes
-      </p>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { POSLocationButton } from './POSLocationButton';
+
+const meta = {
+  title: 'Siesa UI Kit/POSLocationButton',
+  component: POSLocationButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Botón especializado para punto de venta (POS) que muestra el estado de disponibilidad de una ubicación física (mesa, salón, terraza, etc.) con indicadores visuales claros.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    locationName: {
+      control: 'text',
+      description: 'Nombre de la ubicación (ej: "Antejardín", "Terraza")',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    status: {
+      control: 'select',
+      options: ['available', 'occupied', 'reserved', 'outOfService'],
+      description: 'Estado de disponibilidad de la ubicación',
+      table: {
+        type: { summary: 'POSLocationStatus' },
+        category: 'Apariencia',
+        defaultValue: { summary: 'available' },
+      },
+    },
+    state: {
+      control: 'select',
+      options: ['enabled', 'actived'],
+      description: 'Estado visual del botón (enabled = normal, actived = seleccionado)',
+      table: {
+        type: { summary: 'POSLocationState' },
+        category: 'Estado',
+        defaultValue: { summary: 'enabled' },
+      },
+    },
+    capacity: {
+      control: 'object',
+      description: 'Información de capacidad (mesas ocupadas/total)',
+      table: {
+        type: { summary: 'POSLocationCapacity' },
+        category: 'Contenido',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si el botón está deshabilitado',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'Estado',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Función a ejecutar al hacer clic',
+      table: {
+        type: { summary: '(event: MouseEvent<HTMLButtonElement>) => void' },
+        category: 'Comportamiento',
+      },
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Si el botón ocupa todo el ancho del contenedor padre',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'Apariencia',
+        defaultValue: { summary: 'true' },
+      },
+    },
+  },
+} satisfies Meta<typeof POSLocationButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    locationName: 'Antejardín',
+    status: 'available',
+    state: 'enabled',
+    capacity: { current: 1, total: 8 },
+    disabled: false,
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+export const TodosLosEstados: Story = {
+  args: {
+    locationName: 'Antejardín',
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Available */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Disponible (Available)
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <POSLocationButton
+            locationName="Antejardín"
+            status="available"
+            capacity={{ current: 1, total: 8 }}
+          />
+          <POSLocationButton
+            locationName="Antejardín"
+            status="available"
+            state="actived"
+            capacity={{ current: 1, total: 8 }}
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Izquierda: Enabled | Derecha: Actived (seleccionado)
+        </p>
+      </div>
+
+      {/* Occupied */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Ocupada (Occupied)
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <POSLocationButton
+            locationName="Antejardín"
+            status="occupied"
+            capacity={{ current: 1, total: 8 }}
+          />
+          <POSLocationButton
+            locationName="Antejardín"
+            status="occupied"
+            state="actived"
+            capacity={{ current: 1, total: 8 }}
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Izquierda: Enabled | Derecha: Actived (seleccionado)
+        </p>
+      </div>
+
+      {/* Reserved */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Reservada (Reserved)
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <POSLocationButton
+            locationName="Antejardín"
+            status="reserved"
+            capacity={{ current: 1, total: 8 }}
+          />
+          <POSLocationButton
+            locationName="Antejardín"
+            status="reserved"
+            state="actived"
+            capacity={{ current: 1, total: 8 }}
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Izquierda: Enabled | Derecha: Actived (seleccionado)
+        </p>
+      </div>
+
+      {/* Out of Service */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Fuera de Servicio (Out of Service)
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <POSLocationButton
+            locationName="Antejardín"
+            status="outOfService"
+            capacity={{ current: 1, total: 8 }}
+          />
+          <POSLocationButton
+            locationName="Antejardín"
+            status="outOfService"
+            state="actived"
+            capacity={{ current: 1, total: 8 }}
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Izquierda: Enabled | Derecha: Actived (seleccionado)
+        </p>
+      </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-content-primary dark:text-dark-content-primary">
+          <strong>💡 Consejos:</strong>
+          <br />• <code className="px-1 bg-white dark:bg-gray-700">
+            available
+          </code>: Ubicación disponible para asignar
+          <br />• <code className="px-1 bg-white dark:bg-gray-700">
+            occupied
+          </code>: Ubicación actualmente en uso
+          <br />• <code className="px-1 bg-white dark:bg-gray-700">
+            reserved
+          </code>: Ubicación reservada para uso futuro
+          <br />• <code className="px-1 bg-white dark:bg-gray-700">
+            outOfService
+          </code>: Ubicación fuera de servicio temporalmente
+          <br />• <code className="px-1 bg-white dark:bg-gray-700">
+            actived
+          </code>: Estado visual cuando la ubicación está seleccionada en la
+          interfaz
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. EJEMPLOS DE USO
+// ============================================
+export const EjemplosDeUso: Story = {
+  args: {
+    locationName: 'Antejardín',
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Caso 1: Dashboard de Restaurante */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Dashboard de Restaurante
+        </h3>
+        <div className="grid grid-cols-2 gap-3 max-w-[400px]">
+          <POSLocationButton
+            locationName="Antejardín"
+            status="available"
+            capacity={{ current: 1, total: 8 }}
+          />
+          <POSLocationButton
+            locationName="Terraza"
+            status="occupied"
+            capacity={{ current: 5, total: 8 }}
+          />
+          <POSLocationButton
+            locationName="Salón Principal"
+            status="reserved"
+            capacity={{ current: 3, total: 12 }}
+          />
+          <POSLocationButton
+            locationName="Bar"
+            status="outOfService"
+            disabled
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Vista típica de un sistema POS mostrando el estado de diferentes áreas
+        </p>
+      </div>
+
+      {/* Caso 2: Selección Activa */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Ubicación Seleccionada
+        </h3>
+        <div className="flex gap-3">
+          <POSLocationButton
+            locationName="Terraza"
+            status="available"
+            capacity={{ current: 2, total: 10 }}
+          />
+          <POSLocationButton
+            locationName="Salón VIP"
+            status="available"
+            state="actived"
+            capacity={{ current: 1, total: 6 }}
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          El estado <code className="px-1 bg-white dark:bg-gray-700">actived</code>{' '}
+          indica que la ubicación está seleccionada actualmente
+        </p>
+      </div>
+
+      {/* Caso 3: Sin Información de Capacidad */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Sin Información de Capacidad
+        </h3>
+        <div className="flex gap-3">
+          <POSLocationButton locationName="Área de Espera" status="available" />
+          <POSLocationButton locationName="Zona Exterior" status="occupied" />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Si no se proporciona capacidad, solo se muestra el nombre y el estado
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. ESTADOS INTERACTIVOS
+// ============================================
+export const EstadosInteractivos: Story = {
+  args: {
+    locationName: 'Antejardín',
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Normal */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Estado Normal
+        </h3>
+        <POSLocationButton
+          locationName="Terraza"
+          status="available"
+          capacity={{ current: 2, total: 10 }}
+        />
+      </div>
+
+      {/* Hover */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Hover
+        </h3>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mb-2">
+          Pasa el mouse sobre el botón para ver el efecto de sombra
+        </p>
+        <POSLocationButton
+          locationName="Salón Principal"
+          status="occupied"
+          capacity={{ current: 7, total: 12 }}
+        />
+      </div>
+
+      {/* Disabled */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Deshabilitado
+        </h3>
+        <POSLocationButton
+          locationName="Bar"
+          status="outOfService"
+          capacity={{ current: 0, total: 4 }}
+          disabled
+        />
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          El botón deshabilitado tiene opacidad reducida y no es clickeable
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. ANCHO FLEXIBLE VS FIJO
+// ============================================
+export const AnchoFlexible: Story = {
+  args: {
+    locationName: 'Antejardín',
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Full Width (default) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Ancho Completo (fullWidth=true) - Por defecto
+        </h3>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mb-2">
+          El botón ocupa todo el ancho disponible del contenedor padre
+        </p>
+        <div className="w-[245px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg">
+          <p className="text-xs text-content-tertiary mb-2">Contenedor de 245px:</p>
+          <POSLocationButton
+            locationName="Antejardín"
+            status="available"
+            capacity={{ current: 1, total: 8 }}
+            fullWidth={true}
+          />
+        </div>
+        <div className="w-[300px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg mt-4">
+          <p className="text-xs text-content-tertiary mb-2">Contenedor de 300px:</p>
+          <POSLocationButton
+            locationName="Terraza"
+            status="occupied"
+            capacity={{ current: 5, total: 8 }}
+            fullWidth={true}
+          />
+        </div>
+      </div>
+
+      {/* Fixed Width */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Ancho Fijo (fullWidth=false)
+        </h3>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mb-2">
+          El botón tiene un ancho fijo de 189px independiente del contenedor
+        </p>
+        <div className="w-[400px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg">
+          <p className="text-xs text-content-tertiary mb-2">Contenedor de 400px:</p>
+          <POSLocationButton
+            locationName="Salón VIP"
+            status="reserved"
+            capacity={{ current: 2, total: 6 }}
+            fullWidth={false}
+          />
+        </div>
+      </div>
+
+      {/* Comparación lado a lado */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Comparación: Full Width vs Fixed Width
+        </h3>
+        <div className="flex gap-4">
+          <div className="w-[200px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg">
+            <p className="text-xs text-content-tertiary mb-2">fullWidth=true</p>
+            <POSLocationButton
+              locationName="Antejardín"
+              status="available"
+              capacity={{ current: 1, total: 8 }}
+              fullWidth={true}
+            />
+          </div>
+          <div className="w-[200px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg">
+            <p className="text-xs text-content-tertiary mb-2">fullWidth=false</p>
+            <POSLocationButton
+              locationName="Antejardín"
+              status="available"
+              capacity={{ current: 1, total: 8 }}
+              fullWidth={false}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Uso en Sidebar */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Uso típico en Sidebar (245px)
+        </h3>
+        <div className="w-[245px] bg-background-secondary dark:bg-dark-bg-secondary p-4 rounded-lg flex flex-col gap-2">
+          <p className="text-xs font-bold text-content-primary dark:text-dark-content-primary mb-2">
+            Salones
+          </p>
+          <POSLocationButton
+            locationName="Antejardín"
+            status="available"
+            state="actived"
+            capacity={{ current: 1, total: 8 }}
+          />
+          <POSLocationButton
+            locationName="Terraza"
+            status="occupied"
+            capacity={{ current: 5, total: 8 }}
+          />
+          <POSLocationButton
+            locationName="Salón VIP"
+            status="reserved"
+            capacity={{ current: 2, total: 6 }}
+          />
+          <POSLocationButton
+            locationName="Bar"
+            status="outOfService"
+            capacity={{ current: 0, total: 4 }}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. VARIANTES DE NOMBRES
+// ============================================
+export const VariantesDeNombres: Story = {
+  args: {
+    locationName: 'Antejardín',
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+        Diferentes Nombres de Ubicación
+      </h3>
+      <div className="grid grid-cols-2 gap-3 max-w-[400px]">
+        <POSLocationButton
+          locationName="Antejardín"
+          status="available"
+          capacity={{ current: 1, total: 8 }}
+        />
+        <POSLocationButton
+          locationName="Terraza Norte"
+          status="available"
+          capacity={{ current: 3, total: 10 }}
+        />
+        <POSLocationButton
+          locationName="Salón VIP"
+          status="reserved"
+          capacity={{ current: 2, total: 6 }}
+        />
+        <POSLocationButton
+          locationName="Patio Interior"
+          status="occupied"
+          capacity={{ current: 5, total: 8 }}
+        />
+        <POSLocationButton
+          locationName="Bar Principal"
+          status="available"
+          capacity={{ current: 4, total: 12 }}
+        />
+        <POSLocationButton
+          locationName="Área Lounge"
+          status="reserved"
+          capacity={{ current: 2, total: 8 }}
+        />
+      </div>
+      <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+        El componente se adapta a nombres de ubicación de diferentes longitudes
+      </p>
+    </div>
+  ),
+};