siesa-ui-kit 1.0.3 → 1.0.5

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

@@ -0,0 +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>
+    );
+  },
+};

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,170 @@
+import { forwardRef } from 'react';
+import type { RadioProps } from './Radio.types';
+
+/**
+ * Radio - Componente de radio button del sistema de diseño Siesa
+ *
+ * Campo de selección única diseñado para cumplir con las especificaciones
+ * de Figma con soporte completo para dark mode y accesibilidad.
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con keyboard navigation y ARIA
+ * - Inner shadow en estado checked según especificaciones Figma
+ *
+ * Estados soportados:
+ * - Default, Hover, Focus, Disabled
+ * - Checked / Unchecked
+ * - Label y description opcionales
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Radio simple
+ * <Radio
+ *   label="Allow tickets to be resold"
+ *   description="Customers can resell or transfer their tickets"
+ *   value="resell"
+ *   name="ticketOptions"
+ *   checked={true}
+ *   onChange={(e) => console.log(e.target.checked)}
+ * />
+ *
+ * // Radio group
+ * <div>
+ *   <Radio label="Option 1" name="group" value="1" checked={selected === "1"} onChange={handleChange} />
+ *   <Radio label="Option 2" name="group" value="2" checked={selected === "2"} onChange={handleChange} />
+ * </div>
+ * ```
+ */
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      label,
+      description,
+      checked = false,
+      disabled = false,
+      className = '',
+      id,
+      onChange,
+      value,
+      name,
+      ...props
+    },
+    ref
+  ) => {
+    // Generar ID único si no se proporciona
+    const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+
+    // ===== CLASES BASE DEL RADIO BUTTON =====
+    const baseRadioClasses = `
+      w-4
+      h-4
+      rounded-full
+      border
+      border-border-primary
+      bg-bg-primary
+      transition-all
+      duration-150
+      flex
+      items-center
+      justify-center
+      dark:bg-dark-bg-primary
+      dark:border-dark-border-primary
+    `;
+
+    // ===== CLASES PARA ESTADOS INTERACTIVOS =====
+    const interactiveClasses = !disabled
+      ? `
+        peer-hover:border-primary-custom-600
+        peer-focus:ring-2
+        peer-focus:ring-primary-custom-400
+        peer-focus:border-primary-custom-600
+        dark:peer-hover:border-dark-border-custom
+        dark:peer-focus:ring-dark-border-custom
+        dark:peer-focus:border-dark-border-custom
+      `
+      : `
+        opacity-50
+        cursor-not-allowed
+      `;
+
+    // ===== CLASES PARA CHECKED STATE =====
+    // Según Figma: bg #0e79fd, border #3c9bf6, inner shadow
+    const checkedClasses = checked
+      ? `
+        !bg-primary-custom-600
+        !border-primary-inverse-border
+        shadow-[0px_2px_0px_0px_inset_rgba(255,255,255,0.15)]
+        dark:!bg-dark-bg-inverse
+        dark:!border-dark-bg-inverse
+      `
+      : '';
+
+    return (
+      <div className={`flex gap-3 items-start ${className}`}>
+        {/* Radio Input Container */}
+        <div className="flex items-center justify-center h-5 w-4 shrink-0">
+          {/* Native Input (hidden but accessible) */}
+          <input
+            ref={ref}
+            type="radio"
+            id={radioId}
+            checked={checked}
+            disabled={disabled}
+            onChange={onChange}
+            value={value}
+            name={name}
+            className="peer sr-only"
+            {...props}
+          />
+
+          {/* Custom Radio Visual */}
+          <label
+            htmlFor={radioId}
+            className={`
+              ${baseRadioClasses}
+              ${interactiveClasses}
+              ${checkedClasses}
+              ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+            `.trim().replace(/\s+/g, ' ')}
+          >
+            {/* Inner Circle (checked state) - 6px white dot según Figma */}
+            {checked && (
+              <div className="w-1.5 h-1.5 bg-white rounded-full dark:bg-dark-content-inverse" />
+            )}
+          </label>
+        </div>
+
+        {/* Label and Description */}
+        {(label || description) && (
+          <label
+            htmlFor={radioId}
+            className={`flex-1 flex flex-col gap-1 text-sm leading-5 ${
+              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+            }`}
+          >
+            {label && (
+              <span className="font-bold text-content-primary dark:text-dark-content-primary">
+                {label}
+              </span>
+            )}
+            {description && (
+              <span className="font-normal text-content-secondary dark:text-content-secondary">
+                {description}
+              </span>
+            )}
+          </label>
+        )}
+      </div>
+    );
+  }
+);
+
+Radio.displayName = 'Radio';