siesa-ui-kit 1.0.2 → 1.0.3

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

@@ -1,523 +0,0 @@
-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

@@ -1,170 +0,0 @@
-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';