siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Quantity/Quantity.stories.tsx

@@ -1,457 +1,457 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Quantity } from './Quantity';
-import { useState } from 'react';
-
-/**
- * Quantity - Componente de cantidad del sistema de diseño Siesa
- *
- * Sistema completo para seleccionar cantidades numéricas con soporte para:
- * - **Botones de incremento/decremento**: Plus y minus icons
- * - **Restricciones**: Valores mínimo y máximo
- * - **Label opcional**: Con link opcional a la derecha
- * - **Helper text**: Texto de ayuda opcional
- * - **Estado de error**: Validación visual
- * - **Estado deshabilitado**: Interacción bloqueada
- * - **Dark mode**: Adaptación completa al tema oscuro
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- */
-const meta = {
-  title: 'Siesa UI Kit/Quantity',
-  component: Quantity,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Componente para seleccionar cantidades numéricas con botones de incremento y decremento. Ideal para selección de productos, ajuste de parámetros numéricos, etc.',
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'gray', value: '#f3f4f6' },
-        { name: 'dark', value: '#1f2937' },
-      ],
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    value: {
-      control: 'number',
-      description: 'Valor actual (controlado)',
-      table: {
-        type: { summary: 'number' },
-        category: 'State',
-      },
-    },
-    defaultValue: {
-      control: 'number',
-      description: 'Valor por defecto (no controlado)',
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' },
-        category: 'State',
-      },
-    },
-    min: {
-      control: 'number',
-      description: 'Valor mínimo permitido',
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' },
-        category: 'Validation',
-      },
-    },
-    max: {
-      control: 'number',
-      description: 'Valor máximo permitido',
-      table: {
-        type: { summary: 'number' },
-        category: 'Validation',
-      },
-    },
-    label: {
-      control: 'text',
-      description: 'Label opcional',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    linkText: {
-      control: 'text',
-      description: 'Texto del link opcional (aparece a la derecha del label)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    helperText: {
-      control: 'text',
-      description: 'Texto de ayuda opcional',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    error: {
-      control: 'boolean',
-      description: 'Estado de error',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'State',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Estado deshabilitado',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'State',
-      },
-    },
-    onChange: {
-      action: 'changed',
-      description: 'Callback cuando el valor cambia',
-      table: {
-        type: { summary: '(value: number) => void' },
-        category: 'Events',
-      },
-    },
-    onLinkClick: {
-      action: 'link clicked',
-      description: 'Callback cuando se hace click en el link',
-      table: {
-        type: { summary: '() => void' },
-        category: 'Events',
-      },
-    },
-  },
-} satisfies Meta<typeof Quantity>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con el Quantity en tiempo real.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    label: 'Cantidad',
-    defaultValue: 0,
-    min: 0,
-    max: 10,
-    helperText: 'Selecciona una cantidad entre 0 y 10',
-  },
-};
-
-// ============================================
-// 2. VARIANTES BÁSICAS
-// ============================================
-
-/**
- * Variantes Básicas
- *
- * Vista de las variantes básicas del Quantity según Figma.
- */
-export const VariantesBasicas: Story = {
-  name: 'Variantes Básicas',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Sin label */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Label</h3>
-        <Quantity defaultValue={0} />
-      </div>
-
-      {/* Con label */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label</h3>
-        <Quantity label="Cantidad" defaultValue={5} />
-      </div>
-
-      {/* Con label y helper text */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label y Helper Text</h3>
-        <Quantity
-          label="Cantidad"
-          helperText="Selecciona la cantidad deseada"
-          defaultValue={3}
-        />
-      </div>
-
-      {/* Con label, helper text y link */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label, Helper Text y Link</h3>
-        <Quantity
-          label="Cantidad"
-          linkText="Limpiar"
-          helperText="Selecciona la cantidad deseada"
-          defaultValue={8}
-          onLinkClick={() => console.log('Link clicked')}
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. ESTADOS
-// ============================================
-
-/**
- * Estados
- *
- * Vista de todos los estados posibles del Quantity.
- */
-export const Estados: Story = {
-  name: 'Estados',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Default (vacío) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Default (Vacío)</h3>
-        <Quantity label="Cantidad" defaultValue={0} helperText="Valor inicial en 0" />
-      </div>
-
-      {/* Filled (con valor) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Filled (Con Valor)</h3>
-        <Quantity label="Cantidad" defaultValue={5} helperText="Valor actual: 5" />
-      </div>
-
-      {/* Error */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Error</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={15}
-          max={10}
-          error
-          helperText="El valor no puede ser mayor a 10"
-        />
-      </div>
-
-      {/* Disabled */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Disabled</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={3}
-          disabled
-          helperText="Campo deshabilitado"
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CON RESTRICCIONES MIN/MAX
-// ============================================
-
-/**
- * Con Restricciones Min/Max
- *
- * Ejemplos de Quantity con valores mínimo y máximo.
- */
-export const ConMinMax: Story = {
-  name: 'Con Min/Max',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Solo mínimo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Solo Mínimo (min=0)</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={0}
-          min={0}
-          helperText="No puede ser menor a 0"
-        />
-      </div>
-
-      {/* Solo máximo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Solo Máximo (max=10)</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={10}
-          max={10}
-          helperText="No puede ser mayor a 10"
-        />
-      </div>
-
-      {/* Mínimo y máximo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Min y Max (1-5)</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={3}
-          min={1}
-          max={5}
-          helperText="Valor entre 1 y 5"
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. INTERACTIVO (CONTROLADO)
-// ============================================
-
-/**
- * Interactivo (Controlado)
- *
- * Ejemplo de Quantity controlado con estado externo.
- */
-export const Controlado: Story = {
-  name: 'Controlado',
-  args: {
-    label: '',
-  },
-  render: () => {
-    const ControlledQuantity = () => {
-      const [value, setValue] = useState(0);
-
-      return (
-        <div className="space-y-4">
-          <Quantity
-            label="Cantidad de productos"
-            value={value}
-            onChange={setValue}
-            min={0}
-            max={10}
-            helperText={`Has seleccionado ${value} producto${value !== 1 ? 's' : ''}`}
-          />
-          <div className="flex gap-2">
-            <button
-              onClick={() => setValue(0)}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              Reset
-            </button>
-            <button
-              onClick={() => setValue(5)}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              Set to 5
-            </button>
-            <button
-              onClick={() => setValue(10)}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              Set to Max
-            </button>
-          </div>
-        </div>
-      );
-    };
-
-    return <ControlledQuantity />;
-  },
-};
-
-// ============================================
-// 6. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar Quantity en situaciones reales.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Carrito de compras */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Carrito de Compras</h3>
-        <Quantity
-          label="Cantidad"
-          linkText="Eliminar"
-          defaultValue={1}
-          min={1}
-          max={99}
-          helperText="Máximo 99 unidades por producto"
-          onLinkClick={() => console.log('Remove from cart')}
-        />
-      </div>
-
-      {/* Selector de personas */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Selector de Personas</h3>
-        <Quantity
-          label="Número de personas"
-          defaultValue={2}
-          min={1}
-          max={10}
-          helperText="Selecciona cuántas personas asistirán"
-        />
-      </div>
-
-      {/* Ajuste de parámetros */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Ajuste de Parámetros</h3>
-        <Quantity
-          label="Tiempo de espera (minutos)"
-          linkText="Restablecer"
-          defaultValue={5}
-          min={0}
-          max={60}
-          helperText="Configura el tiempo de espera en minutos"
-          onLinkClick={() => console.log('Reset to default')}
-        />
-      </div>
-
-      {/* Stock disponible */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Stock Disponible</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={3}
-          min={1}
-          max={5}
-          helperText="Solo quedan 5 unidades disponibles"
-        />
-      </div>
-
-      {/* Producto agotado */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Producto Agotado</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={0}
-          disabled
-          helperText="Producto temporalmente agotado"
-        />
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Quantity } from './Quantity';
+import { useState } from 'react';
+
+/**
+ * Quantity - Componente de cantidad del sistema de diseño Siesa
+ *
+ * Sistema completo para seleccionar cantidades numéricas con soporte para:
+ * - **Botones de incremento/decremento**: Plus y minus icons
+ * - **Restricciones**: Valores mínimo y máximo
+ * - **Label opcional**: Con link opcional a la derecha
+ * - **Helper text**: Texto de ayuda opcional
+ * - **Estado de error**: Validación visual
+ * - **Estado deshabilitado**: Interacción bloqueada
+ * - **Dark mode**: Adaptación completa al tema oscuro
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ */
+const meta = {
+  title: 'Siesa UI Kit/Quantity',
+  component: Quantity,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente para seleccionar cantidades numéricas con botones de incremento y decremento. Ideal para selección de productos, ajuste de parámetros numéricos, etc.',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'gray', value: '#f3f4f6' },
+        { name: 'dark', value: '#1f2937' },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'number',
+      description: 'Valor actual (controlado)',
+      table: {
+        type: { summary: 'number' },
+        category: 'State',
+      },
+    },
+    defaultValue: {
+      control: 'number',
+      description: 'Valor por defecto (no controlado)',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+        category: 'State',
+      },
+    },
+    min: {
+      control: 'number',
+      description: 'Valor mínimo permitido',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+        category: 'Validation',
+      },
+    },
+    max: {
+      control: 'number',
+      description: 'Valor máximo permitido',
+      table: {
+        type: { summary: 'number' },
+        category: 'Validation',
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Label opcional',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    linkText: {
+      control: 'text',
+      description: 'Texto del link opcional (aparece a la derecha del label)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    helperText: {
+      control: 'text',
+      description: 'Texto de ayuda opcional',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    error: {
+      control: 'boolean',
+      description: 'Estado de error',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'State',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Estado deshabilitado',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'State',
+      },
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback cuando el valor cambia',
+      table: {
+        type: { summary: '(value: number) => void' },
+        category: 'Events',
+      },
+    },
+    onLinkClick: {
+      action: 'link clicked',
+      description: 'Callback cuando se hace click en el link',
+      table: {
+        type: { summary: '() => void' },
+        category: 'Events',
+      },
+    },
+  },
+} satisfies Meta<typeof Quantity>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con el Quantity en tiempo real.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    label: 'Cantidad',
+    defaultValue: 0,
+    min: 0,
+    max: 10,
+    helperText: 'Selecciona una cantidad entre 0 y 10',
+  },
+};
+
+// ============================================
+// 2. VARIANTES BÁSICAS
+// ============================================
+
+/**
+ * Variantes Básicas
+ *
+ * Vista de las variantes básicas del Quantity según Figma.
+ */
+export const VariantesBasicas: Story = {
+  name: 'Variantes Básicas',
+  args: {
+    label: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* Sin label */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Label</h3>
+        <Quantity defaultValue={0} />
+      </div>
+
+      {/* Con label */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label</h3>
+        <Quantity label="Cantidad" defaultValue={5} />
+      </div>
+
+      {/* Con label y helper text */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label y Helper Text</h3>
+        <Quantity
+          label="Cantidad"
+          helperText="Selecciona la cantidad deseada"
+          defaultValue={3}
+        />
+      </div>
+
+      {/* Con label, helper text y link */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label, Helper Text y Link</h3>
+        <Quantity
+          label="Cantidad"
+          linkText="Limpiar"
+          helperText="Selecciona la cantidad deseada"
+          defaultValue={8}
+          onLinkClick={() => console.log('Link clicked')}
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. ESTADOS
+// ============================================
+
+/**
+ * Estados
+ *
+ * Vista de todos los estados posibles del Quantity.
+ */
+export const Estados: Story = {
+  name: 'Estados',
+  args: {
+    label: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* Default (vacío) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Default (Vacío)</h3>
+        <Quantity label="Cantidad" defaultValue={0} helperText="Valor inicial en 0" />
+      </div>
+
+      {/* Filled (con valor) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Filled (Con Valor)</h3>
+        <Quantity label="Cantidad" defaultValue={5} helperText="Valor actual: 5" />
+      </div>
+
+      {/* Error */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Error</h3>
+        <Quantity
+          label="Cantidad"
+          defaultValue={15}
+          max={10}
+          error
+          helperText="El valor no puede ser mayor a 10"
+        />
+      </div>
+
+      {/* Disabled */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Disabled</h3>
+        <Quantity
+          label="Cantidad"
+          defaultValue={3}
+          disabled
+          helperText="Campo deshabilitado"
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. CON RESTRICCIONES MIN/MAX
+// ============================================
+
+/**
+ * Con Restricciones Min/Max
+ *
+ * Ejemplos de Quantity con valores mínimo y máximo.
+ */
+export const ConMinMax: Story = {
+  name: 'Con Min/Max',
+  args: {
+    label: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* Solo mínimo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Solo Mínimo (min=0)</h3>
+        <Quantity
+          label="Cantidad"
+          defaultValue={0}
+          min={0}
+          helperText="No puede ser menor a 0"
+        />
+      </div>
+
+      {/* Solo máximo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Solo Máximo (max=10)</h3>
+        <Quantity
+          label="Cantidad"
+          defaultValue={10}
+          max={10}
+          helperText="No puede ser mayor a 10"
+        />
+      </div>
+
+      {/* Mínimo y máximo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Min y Max (1-5)</h3>
+        <Quantity
+          label="Cantidad"
+          defaultValue={3}
+          min={1}
+          max={5}
+          helperText="Valor entre 1 y 5"
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. INTERACTIVO (CONTROLADO)
+// ============================================
+
+/**
+ * Interactivo (Controlado)
+ *
+ * Ejemplo de Quantity controlado con estado externo.
+ */
+export const Controlado: Story = {
+  name: 'Controlado',
+  args: {
+    label: '',
+  },
+  render: () => {
+    const ControlledQuantity = () => {
+      const [value, setValue] = useState(0);
+
+      return (
+        <div className="space-y-4">
+          <Quantity
+            label="Cantidad de productos"
+            value={value}
+            onChange={setValue}
+            min={0}
+            max={10}
+            helperText={`Has seleccionado ${value} producto${value !== 1 ? 's' : ''}`}
+          />
+          <div className="flex gap-2">
+            <button
+              onClick={() => setValue(0)}
+              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+            >
+              Reset
+            </button>
+            <button
+              onClick={() => setValue(5)}
+              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+            >
+              Set to 5
+            </button>
+            <button
+              onClick={() => setValue(10)}
+              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+            >
+              Set to Max
+            </button>
+          </div>
+        </div>
+      );
+    };
+
+    return <ControlledQuantity />;
+  },
+};
+
+// ============================================
+// 6. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar Quantity en situaciones reales.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  args: {
+    label: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* Carrito de compras */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Carrito de Compras</h3>
+        <Quantity
+          label="Cantidad"
+          linkText="Eliminar"
+          defaultValue={1}
+          min={1}
+          max={99}
+          helperText="Máximo 99 unidades por producto"
+          onLinkClick={() => console.log('Remove from cart')}
+        />
+      </div>
+
+      {/* Selector de personas */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Selector de Personas</h3>
+        <Quantity
+          label="Número de personas"
+          defaultValue={2}
+          min={1}
+          max={10}
+          helperText="Selecciona cuántas personas asistirán"
+        />
+      </div>
+
+      {/* Ajuste de parámetros */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Ajuste de Parámetros</h3>
+        <Quantity
+          label="Tiempo de espera (minutos)"
+          linkText="Restablecer"
+          defaultValue={5}
+          min={0}
+          max={60}
+          helperText="Configura el tiempo de espera en minutos"
+          onLinkClick={() => console.log('Reset to default')}
+        />
+      </div>
+
+      {/* Stock disponible */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Stock Disponible</h3>
+        <Quantity
+          label="Cantidad"
+          defaultValue={3}
+          min={1}
+          max={5}
+          helperText="Solo quedan 5 unidades disponibles"
+        />
+      </div>
+
+      {/* Producto agotado */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Producto Agotado</h3>
+        <Quantity
+          label="Cantidad"
+          defaultValue={0}
+          disabled
+          helperText="Producto temporalmente agotado"
+        />
+      </div>
+    </div>
+  ),
+};