siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Radio/Radio.stories.tsx

@@ -1,523 +1,523 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Radio } from './Radio';
-import { useState } from 'react';
-
-/**
- * Radio - Componente de radio button del sistema de diseño Siesa
- *
- * Sistema completo de radio buttons con soporte para:
- * - **Estados**: Default, Hover, Focus, Disabled
- * - **Selección**: Unchecked, Checked
- * - **Label y Description**: Etiquetas con descripción opcional
- * - **Accesibilidad**: Completa con keyboard navigation
- * - **Dark mode**: Adaptación completa al tema oscuro
- */
-const meta = {
-  title: 'Siesa UI Kit/Radio',
-  component: Radio,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Campos de selección única con soporte para múltiples estados y opciones de etiquetado. Diseñado para mantener consistencia visual y funcional en toda la aplicación.',
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'gray', value: '#f3f4f6' },
-        { name: 'dark', value: '#1f2937' },
-      ],
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Etiqueta del radio button',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    description: {
-      control: 'text',
-      description: 'Descripción debajo del label',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    checked: {
-      control: 'boolean',
-      description: 'Si el radio está seleccionado',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'State',
-      },
-    },
-    value: {
-      control: 'text',
-      description: 'Valor del radio button',
-      table: {
-        type: { summary: 'string | number' },
-        category: 'Data',
-      },
-    },
-    name: {
-      control: 'text',
-      description: 'Nombre del grupo de radio buttons',
-      table: {
-        type: { summary: 'string' },
-        category: 'Data',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el radio button',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'State',
-      },
-    },
-  },
-} satisfies Meta<typeof Radio>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con todas las props del Radio en tiempo real.
- * Cambia el estado, textos y más para ver cómo se comporta el componente.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    label: 'Permitir reventa de boletos',
-    description: 'Los clientes pueden revender o transferir sus boletos si no pueden asistir al evento.',
-    checked: false,
-    disabled: false,
-    value: 'resell',
-    name: 'ticketOptions',
-  },
-  render: (args) => {
-    const [selected, setSelected] = useState(args.checked);
-
-    return (
-      <Radio
-        {...args}
-        checked={selected}
-        onChange={(e) => setSelected(e.target.checked)}
-      />
-    );
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-
-/**
- * Todos los Estados
- *
- * Vista rápida de todos los estados del Radio: default, hover, focus, disabled.
- * Muestra estados checked y unchecked para cada uno.
- */
-export const AllStates: Story = {
-  name: 'Todos los Estados',
-  render: () => (
-    <div className="space-y-6">
-      {/* Unchecked States */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados Sin Marcar</h3>
-        <div className="space-y-3">
-          <Radio label="Por Defecto" description="Radio sin marcar en estado por defecto" name="unchecked" value="default" />
-          <Radio label="Hover" description="Pasa el mouse sobre el radio para ver el estado" name="unchecked" value="hover" />
-          <Radio label="Foco" description="Haz clic para enfocar (intenta presionar Tab)" name="unchecked" value="focus" />
-          <Radio label="Deshabilitado" description="Radio deshabilitado sin marcar" name="unchecked" value="disabled" disabled />
-        </div>
-      </div>
-
-      {/* Checked States */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados Marcados</h3>
-        <div className="space-y-3">
-          <Radio
-            label="Por Defecto"
-            description="Radio marcado en estado por defecto"
-            name="checked"
-            value="default"
-            checked
-            onChange={() => {}}
-          />
-          <Radio
-            label="Hover"
-            description="Pasa el mouse sobre el radio para ver el estado"
-            name="checked"
-            value="hover"
-            checked
-            onChange={() => {}}
-          />
-          <Radio
-            label="Seleccionado"
-            description="Radio seleccionado"
-            name="checked"
-            value="selected"
-            checked
-            onChange={() => {}}
-          />
-          <Radio
-            label="Deshabilitado"
-            description="Radio marcado deshabilitado"
-            name="checked"
-            value="disabled"
-            checked
-            disabled
-            onChange={() => {}}
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CON Y SIN LABELS
-// ============================================
-
-/**
- * Con y Sin Labels
- *
- * Ejemplos de radio buttons con diferentes combinaciones de label y description.
- */
-export const ConEtiquetas: Story = {
-  name: 'Con y Sin Etiquetas',
-  render: () => (
-    <div className="space-y-6">
-      {/* Sin Label ni Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Label ni Description</h3>
-        <Radio name="noLabel" value="option1" />
-      </div>
-
-      {/* Solo Label */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Solo Label</h3>
-        <Radio label="Aceptar términos y condiciones" name="onlyLabel" value="accept" />
-      </div>
-
-      {/* Label + Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Label + Description</h3>
-        <Radio
-          label="Permitir reventa de boletos"
-          description="Los clientes pueden revender o transferir sus boletos."
-          name="withDescription"
-          value="resell"
-        />
-      </div>
-
-      {/* Label Largo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Texto Largo</h3>
-        <Radio
-          label="Enviarme correos promocionales y actualizaciones"
-          description="Puedes darte de baja en cualquier momento. Nunca compartiremos tu correo electrónico con terceros."
-          name="longText"
-          value="emails"
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. RADIO GROUPS
-// ============================================
-
-/**
- * Radio Groups
- *
- * Ejemplos de grupos de radio buttons relacionados. Los radio buttons permiten
- * seleccionar solo una opción por grupo.
- */
-export const RadioGroups: Story = {
-  name: 'Grupos de Radio',
-  render: () => {
-    const [paymentMethod, setPaymentMethod] = useState('card');
-    const [notificationPreference, setNotificationPreference] = useState('all');
-    const [deliveryOption, setDeliveryOption] = useState('standard');
-
-    return (
-      <div className="space-y-6">
-        {/* Payment Method */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Método de Pago
-          </h3>
-          <div className="space-y-2">
-            <Radio
-              label="Tarjeta de Crédito"
-              description="Paga con tarjeta de crédito o débito"
-              name="payment"
-              value="card"
-              checked={paymentMethod === 'card'}
-              onChange={(e) => e.target.checked && setPaymentMethod('card')}
-            />
-            <Radio
-              label="PayPal"
-              description="Paga con tu cuenta de PayPal"
-              name="payment"
-              value="paypal"
-              checked={paymentMethod === 'paypal'}
-              onChange={(e) => e.target.checked && setPaymentMethod('paypal')}
-            />
-            <Radio
-              label="Transferencia Bancaria"
-              description="Transferencia bancaria directa"
-              name="payment"
-              value="transfer"
-              checked={paymentMethod === 'transfer'}
-              onChange={(e) => e.target.checked && setPaymentMethod('transfer')}
-            />
-          </div>
-        </div>
-
-        {/* Notification Preferences */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Preferencias de Notificación
-          </h3>
-          <div className="space-y-2">
-            <Radio
-              label="Todas las notificaciones"
-              description="Recibir todas las notificaciones"
-              name="notifications"
-              value="all"
-              checked={notificationPreference === 'all'}
-              onChange={(e) => e.target.checked && setNotificationPreference('all')}
-            />
-            <Radio
-              label="Solo importantes"
-              description="Solo notificaciones críticas"
-              name="notifications"
-              value="important"
-              checked={notificationPreference === 'important'}
-              onChange={(e) => e.target.checked && setNotificationPreference('important')}
-            />
-            <Radio
-              label="Ninguna"
-              description="Desactivar todas las notificaciones"
-              name="notifications"
-              value="none"
-              checked={notificationPreference === 'none'}
-              onChange={(e) => e.target.checked && setNotificationPreference('none')}
-            />
-          </div>
-        </div>
-
-        {/* Delivery Options */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Opciones de Entrega
-          </h3>
-          <div className="space-y-2">
-            <Radio
-              label="Entrega Estándar (5-7 días)"
-              description="Envío gratis"
-              name="delivery"
-              value="standard"
-              checked={deliveryOption === 'standard'}
-              onChange={(e) => e.target.checked && setDeliveryOption('standard')}
-            />
-            <Radio
-              label="Entrega Express (2-3 días)"
-              description="Tarifa de envío $10"
-              name="delivery"
-              value="express"
-              checked={deliveryOption === 'express'}
-              onChange={(e) => e.target.checked && setDeliveryOption('express')}
-            />
-            <Radio
-              label="Entrega al Día Siguiente"
-              description="Tarifa de envío $20"
-              name="delivery"
-              value="nextday"
-              checked={deliveryOption === 'nextday'}
-              onChange={(e) => e.target.checked && setDeliveryOption('nextday')}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 5. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar los radio buttons en situaciones reales:
- * formularios, configuraciones, opciones de usuario, etc.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  render: () => {
-    const [accountType, setAccountType] = useState('personal');
-    const [privacy, setPrivacy] = useState('public');
-    const [ticketOption, setTicketOption] = useState('resell');
-
-    return (
-      <div className="space-y-6">
-        {/* Account Type Selection */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Selección de Tipo de Cuenta
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-gray-200 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">Elige tu Tipo de Cuenta</h4>
-            <div className="space-y-3">
-              <Radio
-                label="Cuenta Personal"
-                description="Para uso individual con funciones básicas"
-                name="accountType"
-                value="personal"
-                checked={accountType === 'personal'}
-                onChange={(e) => e.target.checked && setAccountType('personal')}
-              />
-              <Radio
-                label="Cuenta de Negocios"
-                description="Para equipos y organizaciones con funciones avanzadas"
-                name="accountType"
-                value="business"
-                checked={accountType === 'business'}
-                onChange={(e) => e.target.checked && setAccountType('business')}
-              />
-              <Radio
-                label="Cuenta Empresarial"
-                description="Soluciones personalizadas para grandes organizaciones"
-                name="accountType"
-                value="enterprise"
-                checked={accountType === 'enterprise'}
-                onChange={(e) => e.target.checked && setAccountType('enterprise')}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Privacy Settings */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Configuración de Privacidad</h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-gray-200 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">Visibilidad del Perfil</h4>
-            <div className="space-y-3">
-              <Radio
-                label="Público"
-                description="Cualquiera puede ver tu perfil"
-                name="privacy"
-                value="public"
-                checked={privacy === 'public'}
-                onChange={(e) => e.target.checked && setPrivacy('public')}
-              />
-              <Radio
-                label="Solo Amigos"
-                description="Solo tus amigos pueden ver tu perfil"
-                name="privacy"
-                value="friends"
-                checked={privacy === 'friends'}
-                onChange={(e) => e.target.checked && setPrivacy('friends')}
-              />
-              <Radio
-                label="Privado"
-                description="Solo tú puedes ver tu perfil"
-                name="privacy"
-                value="private"
-                checked={privacy === 'private'}
-                onChange={(e) => e.target.checked && setPrivacy('private')}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Event Ticket Options */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Opciones de Boletos de Evento
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-gray-200 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 Boletos</h4>
-            <div className="space-y-3">
-              <Radio
-                label="Permitir reventa de boletos"
-                description="Los clientes pueden revender o transferir sus boletos si no pueden asistir al evento."
-                name="ticketOption"
-                value="resell"
-                checked={ticketOption === 'resell'}
-                onChange={(e) => e.target.checked && setTicketOption('resell')}
-              />
-              <Radio
-                label="Boletos no transferibles"
-                description="Los boletos están vinculados al comprador original y no pueden ser transferidos."
-                name="ticketOption"
-                value="nontransferable"
-                checked={ticketOption === 'nontransferable'}
-                onChange={(e) => e.target.checked && setTicketOption('nontransferable')}
-              />
-              <Radio
-                label="Transferibles pero no revendibles"
-                description="Los boletos pueden transferirse a otra persona pero no pueden revenderse con fines de lucro."
-                name="ticketOption"
-                value="transferonly"
-                checked={ticketOption === 'transferonly'}
-                onChange={(e) => e.target.checked && setTicketOption('transferonly')}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Subscription Plan */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Plan de Suscripción
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-gray-200 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">Elige tu Plan</h4>
-            <div className="space-y-3">
-              <Radio
-                label="Plan Gratuito"
-                description="Funciones básicas para individuos"
-                name="plan"
-                value="free"
-              />
-              <Radio
-                label="Plan Pro - $19/mes"
-                description="Funciones avanzadas para profesionales"
-                name="plan"
-                value="pro"
-              />
-              <Radio
-                label="Plan de Equipo - $49/mes"
-                description="Herramientas de colaboración para equipos"
-                name="plan"
-                value="team"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Radio } from './Radio';
+import { useState } from 'react';
+
+/**
+ * Radio - Componente de radio button del sistema de diseño Siesa
+ *
+ * Sistema completo de radio buttons con soporte para:
+ * - **Estados**: Default, Hover, Focus, Disabled
+ * - **Selección**: Unchecked, Checked
+ * - **Label y Description**: Etiquetas con descripción opcional
+ * - **Accesibilidad**: Completa con keyboard navigation
+ * - **Dark mode**: Adaptación completa al tema oscuro
+ */
+const meta = {
+  title: 'Siesa UI Kit/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Campos de selección única con soporte para múltiples estados y opciones de etiquetado. Diseñado para mantener consistencia visual y funcional en toda la aplicación.',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'gray', value: '#f3f4f6' },
+        { name: 'dark', value: '#1f2937' },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Etiqueta del radio button',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    description: {
+      control: 'text',
+      description: 'Descripción debajo del label',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Si el radio está seleccionado',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'State',
+      },
+    },
+    value: {
+      control: 'text',
+      description: 'Valor del radio button',
+      table: {
+        type: { summary: 'string | number' },
+        category: 'Data',
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'Nombre del grupo de radio buttons',
+      table: {
+        type: { summary: 'string' },
+        category: 'Data',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el radio button',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'State',
+      },
+    },
+  },
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con todas las props del Radio en tiempo real.
+ * Cambia el estado, textos y más para ver cómo se comporta el componente.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    label: 'Permitir reventa de boletos',
+    description: 'Los clientes pueden revender o transferir sus boletos si no pueden asistir al evento.',
+    checked: false,
+    disabled: false,
+    value: 'resell',
+    name: 'ticketOptions',
+  },
+  render: (args) => {
+    const [selected, setSelected] = useState(args.checked);
+
+    return (
+      <Radio
+        {...args}
+        checked={selected}
+        onChange={(e) => setSelected(e.target.checked)}
+      />
+    );
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+
+/**
+ * Todos los Estados
+ *
+ * Vista rápida de todos los estados del Radio: default, hover, focus, disabled.
+ * Muestra estados checked y unchecked para cada uno.
+ */
+export const AllStates: Story = {
+  name: 'Todos los Estados',
+  render: () => (
+    <div className="space-y-6">
+      {/* Unchecked States */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados Sin Marcar</h3>
+        <div className="space-y-3">
+          <Radio label="Por Defecto" description="Radio sin marcar en estado por defecto" name="unchecked" value="default" />
+          <Radio label="Hover" description="Pasa el mouse sobre el radio para ver el estado" name="unchecked" value="hover" />
+          <Radio label="Foco" description="Haz clic para enfocar (intenta presionar Tab)" name="unchecked" value="focus" />
+          <Radio label="Deshabilitado" description="Radio deshabilitado sin marcar" name="unchecked" value="disabled" disabled />
+        </div>
+      </div>
+
+      {/* Checked States */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados Marcados</h3>
+        <div className="space-y-3">
+          <Radio
+            label="Por Defecto"
+            description="Radio marcado en estado por defecto"
+            name="checked"
+            value="default"
+            checked
+            onChange={() => {}}
+          />
+          <Radio
+            label="Hover"
+            description="Pasa el mouse sobre el radio para ver el estado"
+            name="checked"
+            value="hover"
+            checked
+            onChange={() => {}}
+          />
+          <Radio
+            label="Seleccionado"
+            description="Radio seleccionado"
+            name="checked"
+            value="selected"
+            checked
+            onChange={() => {}}
+          />
+          <Radio
+            label="Deshabilitado"
+            description="Radio marcado deshabilitado"
+            name="checked"
+            value="disabled"
+            checked
+            disabled
+            onChange={() => {}}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CON Y SIN LABELS
+// ============================================
+
+/**
+ * Con y Sin Labels
+ *
+ * Ejemplos de radio buttons con diferentes combinaciones de label y description.
+ */
+export const ConEtiquetas: Story = {
+  name: 'Con y Sin Etiquetas',
+  render: () => (
+    <div className="space-y-6">
+      {/* Sin Label ni Description */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Label ni Description</h3>
+        <Radio name="noLabel" value="option1" />
+      </div>
+
+      {/* Solo Label */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Solo Label</h3>
+        <Radio label="Aceptar términos y condiciones" name="onlyLabel" value="accept" />
+      </div>
+
+      {/* Label + Description */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Label + Description</h3>
+        <Radio
+          label="Permitir reventa de boletos"
+          description="Los clientes pueden revender o transferir sus boletos."
+          name="withDescription"
+          value="resell"
+        />
+      </div>
+
+      {/* Label Largo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Texto Largo</h3>
+        <Radio
+          label="Enviarme correos promocionales y actualizaciones"
+          description="Puedes darte de baja en cualquier momento. Nunca compartiremos tu correo electrónico con terceros."
+          name="longText"
+          value="emails"
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. RADIO GROUPS
+// ============================================
+
+/**
+ * Radio Groups
+ *
+ * Ejemplos de grupos de radio buttons relacionados. Los radio buttons permiten
+ * seleccionar solo una opción por grupo.
+ */
+export const RadioGroups: Story = {
+  name: 'Grupos de Radio',
+  render: () => {
+    const [paymentMethod, setPaymentMethod] = useState('card');
+    const [notificationPreference, setNotificationPreference] = useState('all');
+    const [deliveryOption, setDeliveryOption] = useState('standard');
+
+    return (
+      <div className="space-y-6">
+        {/* Payment Method */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Método de Pago
+          </h3>
+          <div className="space-y-2">
+            <Radio
+              label="Tarjeta de Crédito"
+              description="Paga con tarjeta de crédito o débito"
+              name="payment"
+              value="card"
+              checked={paymentMethod === 'card'}
+              onChange={(e) => e.target.checked && setPaymentMethod('card')}
+            />
+            <Radio
+              label="PayPal"
+              description="Paga con tu cuenta de PayPal"
+              name="payment"
+              value="paypal"
+              checked={paymentMethod === 'paypal'}
+              onChange={(e) => e.target.checked && setPaymentMethod('paypal')}
+            />
+            <Radio
+              label="Transferencia Bancaria"
+              description="Transferencia bancaria directa"
+              name="payment"
+              value="transfer"
+              checked={paymentMethod === 'transfer'}
+              onChange={(e) => e.target.checked && setPaymentMethod('transfer')}
+            />
+          </div>
+        </div>
+
+        {/* Notification Preferences */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Preferencias de Notificación
+          </h3>
+          <div className="space-y-2">
+            <Radio
+              label="Todas las notificaciones"
+              description="Recibir todas las notificaciones"
+              name="notifications"
+              value="all"
+              checked={notificationPreference === 'all'}
+              onChange={(e) => e.target.checked && setNotificationPreference('all')}
+            />
+            <Radio
+              label="Solo importantes"
+              description="Solo notificaciones críticas"
+              name="notifications"
+              value="important"
+              checked={notificationPreference === 'important'}
+              onChange={(e) => e.target.checked && setNotificationPreference('important')}
+            />
+            <Radio
+              label="Ninguna"
+              description="Desactivar todas las notificaciones"
+              name="notifications"
+              value="none"
+              checked={notificationPreference === 'none'}
+              onChange={(e) => e.target.checked && setNotificationPreference('none')}
+            />
+          </div>
+        </div>
+
+        {/* Delivery Options */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Opciones de Entrega
+          </h3>
+          <div className="space-y-2">
+            <Radio
+              label="Entrega Estándar (5-7 días)"
+              description="Envío gratis"
+              name="delivery"
+              value="standard"
+              checked={deliveryOption === 'standard'}
+              onChange={(e) => e.target.checked && setDeliveryOption('standard')}
+            />
+            <Radio
+              label="Entrega Express (2-3 días)"
+              description="Tarifa de envío $10"
+              name="delivery"
+              value="express"
+              checked={deliveryOption === 'express'}
+              onChange={(e) => e.target.checked && setDeliveryOption('express')}
+            />
+            <Radio
+              label="Entrega al Día Siguiente"
+              description="Tarifa de envío $20"
+              name="delivery"
+              value="nextday"
+              checked={deliveryOption === 'nextday'}
+              onChange={(e) => e.target.checked && setDeliveryOption('nextday')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 5. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar los radio buttons en situaciones reales:
+ * formularios, configuraciones, opciones de usuario, etc.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  render: () => {
+    const [accountType, setAccountType] = useState('personal');
+    const [privacy, setPrivacy] = useState('public');
+    const [ticketOption, setTicketOption] = useState('resell');
+
+    return (
+      <div className="space-y-6">
+        {/* Account Type Selection */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Selección de Tipo de Cuenta
+          </h3>
+          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-gray-200 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">Elige tu Tipo de Cuenta</h4>
+            <div className="space-y-3">
+              <Radio
+                label="Cuenta Personal"
+                description="Para uso individual con funciones básicas"
+                name="accountType"
+                value="personal"
+                checked={accountType === 'personal'}
+                onChange={(e) => e.target.checked && setAccountType('personal')}
+              />
+              <Radio
+                label="Cuenta de Negocios"
+                description="Para equipos y organizaciones con funciones avanzadas"
+                name="accountType"
+                value="business"
+                checked={accountType === 'business'}
+                onChange={(e) => e.target.checked && setAccountType('business')}
+              />
+              <Radio
+                label="Cuenta Empresarial"
+                description="Soluciones personalizadas para grandes organizaciones"
+                name="accountType"
+                value="enterprise"
+                checked={accountType === 'enterprise'}
+                onChange={(e) => e.target.checked && setAccountType('enterprise')}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Privacy Settings */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Configuración de Privacidad</h3>
+          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-gray-200 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">Visibilidad del Perfil</h4>
+            <div className="space-y-3">
+              <Radio
+                label="Público"
+                description="Cualquiera puede ver tu perfil"
+                name="privacy"
+                value="public"
+                checked={privacy === 'public'}
+                onChange={(e) => e.target.checked && setPrivacy('public')}
+              />
+              <Radio
+                label="Solo Amigos"
+                description="Solo tus amigos pueden ver tu perfil"
+                name="privacy"
+                value="friends"
+                checked={privacy === 'friends'}
+                onChange={(e) => e.target.checked && setPrivacy('friends')}
+              />
+              <Radio
+                label="Privado"
+                description="Solo tú puedes ver tu perfil"
+                name="privacy"
+                value="private"
+                checked={privacy === 'private'}
+                onChange={(e) => e.target.checked && setPrivacy('private')}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Event Ticket Options */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Opciones de Boletos de Evento
+          </h3>
+          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-gray-200 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 Boletos</h4>
+            <div className="space-y-3">
+              <Radio
+                label="Permitir reventa de boletos"
+                description="Los clientes pueden revender o transferir sus boletos si no pueden asistir al evento."
+                name="ticketOption"
+                value="resell"
+                checked={ticketOption === 'resell'}
+                onChange={(e) => e.target.checked && setTicketOption('resell')}
+              />
+              <Radio
+                label="Boletos no transferibles"
+                description="Los boletos están vinculados al comprador original y no pueden ser transferidos."
+                name="ticketOption"
+                value="nontransferable"
+                checked={ticketOption === 'nontransferable'}
+                onChange={(e) => e.target.checked && setTicketOption('nontransferable')}
+              />
+              <Radio
+                label="Transferibles pero no revendibles"
+                description="Los boletos pueden transferirse a otra persona pero no pueden revenderse con fines de lucro."
+                name="ticketOption"
+                value="transferonly"
+                checked={ticketOption === 'transferonly'}
+                onChange={(e) => e.target.checked && setTicketOption('transferonly')}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Subscription Plan */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Plan de Suscripción
+          </h3>
+          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-gray-200 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">Elige tu Plan</h4>
+            <div className="space-y-3">
+              <Radio
+                label="Plan Gratuito"
+                description="Funciones básicas para individuos"
+                name="plan"
+                value="free"
+              />
+              <Radio
+                label="Plan Pro - $19/mes"
+                description="Funciones avanzadas para profesionales"
+                name="plan"
+                value="pro"
+              />
+              <Radio
+                label="Plan de Equipo - $49/mes"
+                description="Herramientas de colaboración para equipos"
+                name="plan"
+                value="team"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};