siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Switch/Switch.stories.tsx

@@ -1,550 +1,550 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Switch } from './Switch';
-import { useState, useEffect } from 'react';
-
-/**
- * Switch - Componente de switch del sistema de diseño Siesa
- *
- * Campo de activación/desactivación con soporte para múltiples estados
- * y opciones de etiquetado. Diseñado para mantener consistencia visual
- * y funcional en toda la aplicación.
- */
-const meta = {
-  title: 'Siesa UI Kit/Switch',
-  component: Switch,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Campos de activación/desactivación con soporte para múltiples estados y opciones de etiquetado.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Etiqueta del switch',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    description: {
-      control: 'text',
-      description: 'Descripción debajo del label',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    checked: {
-      control: 'boolean',
-      description: 'Si el switch está activado',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el switch',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    ariaLabel: {
-      control: 'text',
-      description: 'Label para accesibilidad (ARIA)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Accesibilidad',
-      },
-    },
-    labelPosition: {
-      control: 'radio',
-      options: ['leading', 'trailing'],
-      description: 'Posición del label respecto al switch',
-      table: {
-        type: { summary: "'leading' | 'trailing'" },
-        defaultValue: { summary: 'leading' },
-        category: 'Apariencia',
-      },
-    },
-  },
-} satisfies Meta<typeof Switch>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo - Usa los controles para experimentar con todas las props del Switch.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    label: 'Permitir inserción',
-    description: 'Permite que otros inserten los detalles de tu evento en su propio sitio.',
-    checked: false,
-    disabled: false,
-    labelPosition: 'leading',
-  },
-  render: (args) => {
-    const [checked, setChecked] = useState(args.checked);
-
-    // Sincronizar el estado local cuando cambian los args desde los controles
-    useEffect(() => {
-      setChecked(args.checked);
-    }, [args.checked]);
-
-    return (
-      <Switch
-        {...args}
-        checked={checked}
-        onChange={(e) => setChecked(e.target.checked)}
-      />
-    );
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-
-/**
- * Todos los Estados - Vista rápida de todos los estados del Switch.
- */
-export const TodosLosEstados: Story = {
-  name: 'Todos los Estados',
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Estados Apagado */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estados Apagado
-        </h3>
-        <div className="space-y-3">
-          <Switch label="Por Defecto" description="Switch en estado apagado por defecto" />
-          <Switch label="Hover" description="Pasa el mouse sobre el switch para ver el estado" />
-          <Switch label="Foco" description="Haz clic para enfocar (intenta presionar Tab)" />
-          <Switch label="Deshabilitado" description="Switch deshabilitado apagado" disabled />
-        </div>
-      </div>
-
-      {/* Estados Encendido */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estados Encendido
-        </h3>
-        <div className="space-y-3">
-          <Switch
-            label="Por Defecto"
-            description="Switch en estado encendido por defecto"
-            checked
-            onChange={() => {}}
-          />
-          <Switch
-            label="Hover"
-            description="Pasa el mouse sobre el switch para ver el estado"
-            checked
-            onChange={() => {}}
-          />
-          <Switch
-            label="Foco"
-            description="Haz clic para enfocar (intenta presionar Tab)"
-            checked
-            onChange={() => {}}
-          />
-          <Switch
-            label="Deshabilitado"
-            description="Switch deshabilitado encendido"
-            checked
-            disabled
-            onChange={() => {}}
-          />
-        </div>
-      </div>
-
-      {/* Tips */}
-      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-        <p className="text-xs text-content-secondary dark:text-content-secondary">
-          <strong className="text-content-primary dark:text-dark-content-primary">Consejo:</strong> Pasa el mouse sobre el switch o haz clic para ver los estados hover y focus.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. POSICIÓN DEL LABEL
-// ============================================
-
-/**
- * Posición del Label - El label puede estar a la izquierda (leading) o a la derecha (trailing) del switch.
- */
-export const PosicionDelLabel: Story = {
-  name: 'Posición del Label',
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Leading (Label a la izquierda) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Leading (Label a la Izquierda)
-        </h3>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mb-4">
-          El label se muestra a la izquierda y el switch a la derecha. Este es el valor por defecto.
-        </p>
-        <div className="space-y-3">
-          <Switch
-            label="Permitir inserción"
-            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-            labelPosition="leading"
-          />
-          <Switch
-            label="Permitir inserción"
-            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-            labelPosition="leading"
-            checked
-            onChange={() => {}}
-          />
-        </div>
-      </div>
-
-      {/* Trailing (Label a la derecha) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Trailing (Label a la Derecha)
-        </h3>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mb-4">
-          El switch se muestra a la izquierda y el label a la derecha.
-        </p>
-        <div className="space-y-3">
-          <Switch
-            label="Permitir inserción"
-            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-            labelPosition="trailing"
-          />
-          <Switch
-            label="Permitir inserción"
-            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-            labelPosition="trailing"
-            checked
-            onChange={() => {}}
-          />
-        </div>
-      </div>
-
-      {/* Solo Label (sin descripción) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Solo Label (sin descripción)
-        </h3>
-        <div className="space-y-3">
-          <Switch label="Activar notificaciones" labelPosition="leading" />
-          <Switch label="Activar notificaciones" labelPosition="trailing" />
-        </div>
-      </div>
-
-      {/* Tips */}
-      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-        <p className="text-xs text-content-secondary dark:text-content-secondary">
-          <strong className="text-content-primary dark:text-dark-content-primary">Consejo:</strong> Usa <code className="px-1 bg-white dark:bg-gray-700 rounded">leading</code> para formularios estándar y <code className="px-1 bg-white dark:bg-gray-700 rounded">trailing</code> para listas de configuración donde el switch debe destacar primero.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CON Y SIN LABELS
-// ============================================
-
-/**
- * Con y Sin Etiquetas - Ejemplos de switches con diferentes combinaciones de label y description.
- */
-export const ConYSinEtiquetas: Story = {
-  name: 'Con y Sin Etiquetas',
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Sin Label ni Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Sin Etiqueta ni Descripción
-        </h3>
-        <Switch ariaLabel="Interruptor sin etiqueta" />
-      </div>
-
-      {/* Solo Label */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Solo Etiqueta
-        </h3>
-        <Switch label="Activar notificaciones" />
-      </div>
-
-      {/* Label + Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Etiqueta + Descripción
-        </h3>
-        <Switch
-          label="Permitir inserción"
-          description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-        />
-      </div>
-
-      {/* Label Largo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Con Texto Largo
-        </h3>
-        <Switch
-          label="Enviarme correos promocionales y actualizaciones"
-          description="Puedes darte de baja en cualquier momento. Nunca compartiremos tu correo electrónico con terceros ni lo usaremos para ningún otro propósito."
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. GRUPOS DE SWITCHES
-// ============================================
-
-/**
- * Grupos de Switches - Ejemplos de grupos de switches relacionados para diferentes configuraciones.
- */
-export const GruposDeSwitches: Story = {
-  name: 'Grupos de Switches',
-  render: () => {
-    const [settings, setSettings] = useState({
-      embedding: true,
-      comments: false,
-      analytics: true,
-    });
-
-    return (
-      <div className="space-y-8 p-6">
-        {/* Configuración de Evento */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Configuración de Evento
-          </h3>
-          <div className="space-y-3">
-            <Switch
-              label="Permitir inserción"
-              description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-              checked={settings.embedding}
-              onChange={(e) => setSettings({ ...settings, embedding: e.target.checked })}
-            />
-            <Switch
-              label="Activar comentarios"
-              description="Permite que los asistentes dejen comentarios y retroalimentación en tu evento."
-              checked={settings.comments}
-              onChange={(e) => setSettings({ ...settings, comments: e.target.checked })}
-            />
-            <Switch
-              label="Rastrear análisis"
-              description="Recopilar datos de uso anónimos para mejorar tu experiencia de evento."
-              checked={settings.analytics}
-              onChange={(e) => setSettings({ ...settings, analytics: e.target.checked })}
-            />
-          </div>
-        </div>
-
-        {/* Preferencias de Notificación */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Preferencias de Notificación
-          </h3>
-          <div className="space-y-3">
-            <Switch label="Notificaciones por correo" />
-            <Switch label="Notificaciones push" />
-            <Switch label="Notificaciones SMS" />
-            <Switch label="Notificaciones de escritorio" />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 6. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales - Ejemplos prácticos de cómo usar los switches en situaciones reales.
- */
-export const CasosDeUsoReales: Story = {
-  name: 'Casos de Uso Reales',
-  render: () => {
-    const [accountSettings, setAccountSettings] = useState({
-      twoFactor: true,
-      emailNotifications: false,
-      publicProfile: true,
-    });
-
-    const [privacySettings, setPrivacySettings] = useState({
-      showEmail: false,
-      showPhone: false,
-      showActivity: true,
-    });
-
-    const [features, setFeatures] = useState({
-      darkMode: false,
-      autoSave: true,
-      spellCheck: true,
-    });
-
-    return (
-      <div className="space-y-8 p-6">
-        {/* Seguridad de la Cuenta */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Seguridad de la Cuenta
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
-              Configuración de Seguridad
-            </h4>
-            <div className="space-y-3">
-              <Switch
-                label="Autenticación de dos factores"
-                description="Agrega una capa extra de seguridad a tu cuenta"
-                checked={accountSettings.twoFactor}
-                onChange={(e) =>
-                  setAccountSettings({ ...accountSettings, twoFactor: e.target.checked })
-                }
-              />
-              <Switch
-                label="Notificaciones de inicio de sesión"
-                description="Recibe notificaciones cuando alguien inicie sesión en tu cuenta"
-                checked={accountSettings.emailNotifications}
-                onChange={(e) =>
-                  setAccountSettings({ ...accountSettings, emailNotifications: e.target.checked })
-                }
-              />
-              <Switch
-                label="Perfil público"
-                description="Haz que tu perfil sea visible para otros usuarios"
-                checked={accountSettings.publicProfile}
-                onChange={(e) =>
-                  setAccountSettings({ ...accountSettings, publicProfile: e.target.checked })
-                }
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Configuración de Privacidad */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Configuración de Privacidad
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
-              Qué pueden ver otros
-            </h4>
-            <div className="space-y-3">
-              <Switch
-                label="Mostrar dirección de correo"
-                description="Muestra tu correo en tu perfil público"
-                checked={privacySettings.showEmail}
-                onChange={(e) =>
-                  setPrivacySettings({ ...privacySettings, showEmail: e.target.checked })
-                }
-              />
-              <Switch
-                label="Mostrar número de teléfono"
-                description="Muestra tu número de teléfono en tu perfil público"
-                checked={privacySettings.showPhone}
-                onChange={(e) =>
-                  setPrivacySettings({ ...privacySettings, showPhone: e.target.checked })
-                }
-              />
-              <Switch
-                label="Mostrar estado de actividad"
-                description="Permite que otros vean cuando estás en línea"
-                checked={privacySettings.showActivity}
-                onChange={(e) =>
-                  setPrivacySettings({ ...privacySettings, showActivity: e.target.checked })
-                }
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Características del Editor */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Características del Editor
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
-              Preferencias del Editor
-            </h4>
-            <div className="space-y-3">
-              <Switch
-                label="Modo oscuro"
-                description="Usa el tema oscuro para el editor"
-                checked={features.darkMode}
-                onChange={(e) => setFeatures({ ...features, darkMode: e.target.checked })}
-              />
-              <Switch
-                label="Guardado automático"
-                description="Guarda tu trabajo automáticamente cada pocos segundos"
-                checked={features.autoSave}
-                onChange={(e) => setFeatures({ ...features, autoSave: e.target.checked })}
-              />
-              <Switch
-                label="Corrección ortográfica"
-                description="Verifica la ortografía mientras escribes"
-                checked={features.spellCheck}
-                onChange={(e) => setFeatures({ ...features, spellCheck: e.target.checked })}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Gestión de Eventos */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Gestión de Eventos
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
-              Opciones del Evento
-            </h4>
-            <div className="space-y-3">
-              <Switch
-                label="Permitir inserción"
-                description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-              />
-              <Switch
-                label="Activar comentarios"
-                description="Permite que los asistentes dejen comentarios en la página de tu evento."
-              />
-              <Switch
-                label="Recopilar confirmaciones"
-                description="Permite que las personas confirmen su asistencia a tu evento."
-              />
-              <Switch
-                label="Enviar recordatorios"
-                description="Envía automáticamente correos de recordatorio antes del evento."
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Switch } from './Switch';
+import { useState, useEffect } from 'react';
+
+/**
+ * Switch - Componente de switch del sistema de diseño Siesa
+ *
+ * Campo de activación/desactivación con soporte para múltiples estados
+ * y opciones de etiquetado. Diseñado para mantener consistencia visual
+ * y funcional en toda la aplicación.
+ */
+const meta = {
+  title: 'Siesa UI Kit/Switch',
+  component: Switch,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Campos de activación/desactivación con soporte para múltiples estados y opciones de etiquetado.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Etiqueta del switch',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    description: {
+      control: 'text',
+      description: 'Descripción debajo del label',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Si el switch está activado',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el switch',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Label para accesibilidad (ARIA)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Accesibilidad',
+      },
+    },
+    labelPosition: {
+      control: 'radio',
+      options: ['leading', 'trailing'],
+      description: 'Posición del label respecto al switch',
+      table: {
+        type: { summary: "'leading' | 'trailing'" },
+        defaultValue: { summary: 'leading' },
+        category: 'Apariencia',
+      },
+    },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo - Usa los controles para experimentar con todas las props del Switch.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    label: 'Permitir inserción',
+    description: 'Permite que otros inserten los detalles de tu evento en su propio sitio.',
+    checked: false,
+    disabled: false,
+    labelPosition: 'leading',
+  },
+  render: (args) => {
+    const [checked, setChecked] = useState(args.checked);
+
+    // Sincronizar el estado local cuando cambian los args desde los controles
+    useEffect(() => {
+      setChecked(args.checked);
+    }, [args.checked]);
+
+    return (
+      <Switch
+        {...args}
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+      />
+    );
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+
+/**
+ * Todos los Estados - Vista rápida de todos los estados del Switch.
+ */
+export const TodosLosEstados: Story = {
+  name: 'Todos los Estados',
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Estados Apagado */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Estados Apagado
+        </h3>
+        <div className="space-y-3">
+          <Switch label="Por Defecto" description="Switch en estado apagado por defecto" />
+          <Switch label="Hover" description="Pasa el mouse sobre el switch para ver el estado" />
+          <Switch label="Foco" description="Haz clic para enfocar (intenta presionar Tab)" />
+          <Switch label="Deshabilitado" description="Switch deshabilitado apagado" disabled />
+        </div>
+      </div>
+
+      {/* Estados Encendido */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Estados Encendido
+        </h3>
+        <div className="space-y-3">
+          <Switch
+            label="Por Defecto"
+            description="Switch en estado encendido por defecto"
+            checked
+            onChange={() => {}}
+          />
+          <Switch
+            label="Hover"
+            description="Pasa el mouse sobre el switch para ver el estado"
+            checked
+            onChange={() => {}}
+          />
+          <Switch
+            label="Foco"
+            description="Haz clic para enfocar (intenta presionar Tab)"
+            checked
+            onChange={() => {}}
+          />
+          <Switch
+            label="Deshabilitado"
+            description="Switch deshabilitado encendido"
+            checked
+            disabled
+            onChange={() => {}}
+          />
+        </div>
+      </div>
+
+      {/* Tips */}
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <p className="text-xs text-content-secondary dark:text-content-secondary">
+          <strong className="text-content-primary dark:text-dark-content-primary">Consejo:</strong> Pasa el mouse sobre el switch o haz clic para ver los estados hover y focus.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. POSICIÓN DEL LABEL
+// ============================================
+
+/**
+ * Posición del Label - El label puede estar a la izquierda (leading) o a la derecha (trailing) del switch.
+ */
+export const PosicionDelLabel: Story = {
+  name: 'Posición del Label',
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Leading (Label a la izquierda) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Leading (Label a la Izquierda)
+        </h3>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mb-4">
+          El label se muestra a la izquierda y el switch a la derecha. Este es el valor por defecto.
+        </p>
+        <div className="space-y-3">
+          <Switch
+            label="Permitir inserción"
+            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
+            labelPosition="leading"
+          />
+          <Switch
+            label="Permitir inserción"
+            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
+            labelPosition="leading"
+            checked
+            onChange={() => {}}
+          />
+        </div>
+      </div>
+
+      {/* Trailing (Label a la derecha) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Trailing (Label a la Derecha)
+        </h3>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mb-4">
+          El switch se muestra a la izquierda y el label a la derecha.
+        </p>
+        <div className="space-y-3">
+          <Switch
+            label="Permitir inserción"
+            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
+            labelPosition="trailing"
+          />
+          <Switch
+            label="Permitir inserción"
+            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
+            labelPosition="trailing"
+            checked
+            onChange={() => {}}
+          />
+        </div>
+      </div>
+
+      {/* Solo Label (sin descripción) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Solo Label (sin descripción)
+        </h3>
+        <div className="space-y-3">
+          <Switch label="Activar notificaciones" labelPosition="leading" />
+          <Switch label="Activar notificaciones" labelPosition="trailing" />
+        </div>
+      </div>
+
+      {/* Tips */}
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <p className="text-xs text-content-secondary dark:text-content-secondary">
+          <strong className="text-content-primary dark:text-dark-content-primary">Consejo:</strong> Usa <code className="px-1 bg-white dark:bg-gray-700 rounded">leading</code> para formularios estándar y <code className="px-1 bg-white dark:bg-gray-700 rounded">trailing</code> para listas de configuración donde el switch debe destacar primero.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. CON Y SIN LABELS
+// ============================================
+
+/**
+ * Con y Sin Etiquetas - Ejemplos de switches con diferentes combinaciones de label y description.
+ */
+export const ConYSinEtiquetas: Story = {
+  name: 'Con y Sin Etiquetas',
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Sin Label ni Description */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Sin Etiqueta ni Descripción
+        </h3>
+        <Switch ariaLabel="Interruptor sin etiqueta" />
+      </div>
+
+      {/* Solo Label */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Solo Etiqueta
+        </h3>
+        <Switch label="Activar notificaciones" />
+      </div>
+
+      {/* Label + Description */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Etiqueta + Descripción
+        </h3>
+        <Switch
+          label="Permitir inserción"
+          description="Permite que otros inserten los detalles de tu evento en su propio sitio."
+        />
+      </div>
+
+      {/* Label Largo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Con Texto Largo
+        </h3>
+        <Switch
+          label="Enviarme correos promocionales y actualizaciones"
+          description="Puedes darte de baja en cualquier momento. Nunca compartiremos tu correo electrónico con terceros ni lo usaremos para ningún otro propósito."
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. GRUPOS DE SWITCHES
+// ============================================
+
+/**
+ * Grupos de Switches - Ejemplos de grupos de switches relacionados para diferentes configuraciones.
+ */
+export const GruposDeSwitches: Story = {
+  name: 'Grupos de Switches',
+  render: () => {
+    const [settings, setSettings] = useState({
+      embedding: true,
+      comments: false,
+      analytics: true,
+    });
+
+    return (
+      <div className="space-y-8 p-6">
+        {/* Configuración de Evento */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+            Configuración de Evento
+          </h3>
+          <div className="space-y-3">
+            <Switch
+              label="Permitir inserción"
+              description="Permite que otros inserten los detalles de tu evento en su propio sitio."
+              checked={settings.embedding}
+              onChange={(e) => setSettings({ ...settings, embedding: e.target.checked })}
+            />
+            <Switch
+              label="Activar comentarios"
+              description="Permite que los asistentes dejen comentarios y retroalimentación en tu evento."
+              checked={settings.comments}
+              onChange={(e) => setSettings({ ...settings, comments: e.target.checked })}
+            />
+            <Switch
+              label="Rastrear análisis"
+              description="Recopilar datos de uso anónimos para mejorar tu experiencia de evento."
+              checked={settings.analytics}
+              onChange={(e) => setSettings({ ...settings, analytics: e.target.checked })}
+            />
+          </div>
+        </div>
+
+        {/* Preferencias de Notificación */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+            Preferencias de Notificación
+          </h3>
+          <div className="space-y-3">
+            <Switch label="Notificaciones por correo" />
+            <Switch label="Notificaciones push" />
+            <Switch label="Notificaciones SMS" />
+            <Switch label="Notificaciones de escritorio" />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 6. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales - Ejemplos prácticos de cómo usar los switches en situaciones reales.
+ */
+export const CasosDeUsoReales: Story = {
+  name: 'Casos de Uso Reales',
+  render: () => {
+    const [accountSettings, setAccountSettings] = useState({
+      twoFactor: true,
+      emailNotifications: false,
+      publicProfile: true,
+    });
+
+    const [privacySettings, setPrivacySettings] = useState({
+      showEmail: false,
+      showPhone: false,
+      showActivity: true,
+    });
+
+    const [features, setFeatures] = useState({
+      darkMode: false,
+      autoSave: true,
+      spellCheck: true,
+    });
+
+    return (
+      <div className="space-y-8 p-6">
+        {/* Seguridad de la Cuenta */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+            Seguridad de la Cuenta
+          </h3>
+          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
+            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
+              Configuración de Seguridad
+            </h4>
+            <div className="space-y-3">
+              <Switch
+                label="Autenticación de dos factores"
+                description="Agrega una capa extra de seguridad a tu cuenta"
+                checked={accountSettings.twoFactor}
+                onChange={(e) =>
+                  setAccountSettings({ ...accountSettings, twoFactor: e.target.checked })
+                }
+              />
+              <Switch
+                label="Notificaciones de inicio de sesión"
+                description="Recibe notificaciones cuando alguien inicie sesión en tu cuenta"
+                checked={accountSettings.emailNotifications}
+                onChange={(e) =>
+                  setAccountSettings({ ...accountSettings, emailNotifications: e.target.checked })
+                }
+              />
+              <Switch
+                label="Perfil público"
+                description="Haz que tu perfil sea visible para otros usuarios"
+                checked={accountSettings.publicProfile}
+                onChange={(e) =>
+                  setAccountSettings({ ...accountSettings, publicProfile: e.target.checked })
+                }
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Configuración de Privacidad */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+            Configuración de Privacidad
+          </h3>
+          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
+            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
+              Qué pueden ver otros
+            </h4>
+            <div className="space-y-3">
+              <Switch
+                label="Mostrar dirección de correo"
+                description="Muestra tu correo en tu perfil público"
+                checked={privacySettings.showEmail}
+                onChange={(e) =>
+                  setPrivacySettings({ ...privacySettings, showEmail: e.target.checked })
+                }
+              />
+              <Switch
+                label="Mostrar número de teléfono"
+                description="Muestra tu número de teléfono en tu perfil público"
+                checked={privacySettings.showPhone}
+                onChange={(e) =>
+                  setPrivacySettings({ ...privacySettings, showPhone: e.target.checked })
+                }
+              />
+              <Switch
+                label="Mostrar estado de actividad"
+                description="Permite que otros vean cuando estás en línea"
+                checked={privacySettings.showActivity}
+                onChange={(e) =>
+                  setPrivacySettings({ ...privacySettings, showActivity: e.target.checked })
+                }
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Características del Editor */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+            Características del Editor
+          </h3>
+          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
+            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
+              Preferencias del Editor
+            </h4>
+            <div className="space-y-3">
+              <Switch
+                label="Modo oscuro"
+                description="Usa el tema oscuro para el editor"
+                checked={features.darkMode}
+                onChange={(e) => setFeatures({ ...features, darkMode: e.target.checked })}
+              />
+              <Switch
+                label="Guardado automático"
+                description="Guarda tu trabajo automáticamente cada pocos segundos"
+                checked={features.autoSave}
+                onChange={(e) => setFeatures({ ...features, autoSave: e.target.checked })}
+              />
+              <Switch
+                label="Corrección ortográfica"
+                description="Verifica la ortografía mientras escribes"
+                checked={features.spellCheck}
+                onChange={(e) => setFeatures({ ...features, spellCheck: e.target.checked })}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Gestión de Eventos */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+            Gestión de Eventos
+          </h3>
+          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
+            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
+              Opciones del Evento
+            </h4>
+            <div className="space-y-3">
+              <Switch
+                label="Permitir inserción"
+                description="Permite que otros inserten los detalles de tu evento en su propio sitio."
+              />
+              <Switch
+                label="Activar comentarios"
+                description="Permite que los asistentes dejen comentarios en la página de tu evento."
+              />
+              <Switch
+                label="Recopilar confirmaciones"
+                description="Permite que las personas confirmen su asistencia a tu evento."
+              />
+              <Switch
+                label="Enviar recordatorios"
+                description="Envía automáticamente correos de recordatorio antes del evento."
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};