siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Radio/Radio.tsx

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

package/src/components/Radio/Radio.types.ts

@@ -1,122 +1,122 @@
-import type { InputHTMLAttributes } from 'react';
-
-/**
- * Estados visuales del Radio Button
- *
- * @see Radio.tsx - Implementación del componente
- */
-export type RadioState = 'default' | 'hover' | 'focus' | 'disabled';
-
-/**
- * Props del componente Radio
- *
- * Extiende las props nativas de HTMLInputElement excepto 'type' y 'size'
- * que están manejados internamente por el componente.
- *
- * @see docs/colors.md - Sistema de colores para estados
- * @see docs/typography.md - Tipografía para labels y descriptions
- * @see docs/spacing.md - Espaciado entre elementos
- *
- * @example
- * ```tsx
- * // Radio simple
- * <Radio
- *   label="Accept terms"
- *   value="accept"
- *   name="terms"
- *   checked={accepted}
- *   onChange={(e) => setAccepted(e.target.checked)}
- * />
- *
- * // Radio con description
- * <Radio
- *   label="Allow tickets to be resold"
- *   description="Customers can resell or transfer their tickets"
- *   value="resell"
- *   name="ticketOptions"
- *   checked={resellAllowed}
- *   onChange={(e) => setResellAllowed(e.target.checked)}
- * />
- *
- * // Radio disabled
- * <Radio
- *   label="Premium feature"
- *   description="Upgrade to access this feature"
- *   disabled
- *   value="premium"
- *   name="features"
- * />
- * ```
- */
-export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-  /**
-   * Etiqueta del radio button
-   *
-   * Se muestra con tipografía Label Small (14px Bold) según sistema de diseño.
-   *
-   * @see docs/typography.md - Label Small (text-sm font-bold)
-   */
-  label?: string;
-
-  /**
-   * Descripción debajo del label
-   *
-   * Se muestra con tipografía Paragraph Small (14px Regular) según sistema de diseño.
-   *
-   * @see docs/typography.md - Paragraph Small (text-sm font-normal)
-   */
-  description?: string;
-
-  /**
-   * Si el radio está seleccionado
-   *
-   * Controla el estado checked del radio button. En grupos de radio buttons,
-   * solo uno puede estar checked a la vez.
-   *
-   * @default false
-   */
-  checked?: boolean;
-
-  /**
-   * Valor del radio button (requerido para grupos)
-   *
-   * Identifica el valor único de este radio button dentro de un grupo.
-   * Es esencial para manejar la selección en grupos de radio buttons.
-   */
-  value?: string | number;
-
-  /**
-   * Nombre del grupo de radio buttons
-   *
-   * Agrupa múltiples radio buttons para permitir selección única.
-   * Todos los radios con el mismo `name` pertenecen al mismo grupo.
-   */
-  name?: string;
-
-  /**
-   * Clases CSS adicionales
-   *
-   * Permite extender los estilos del componente con clases de Tailwind CSS
-   * o clases personalizadas.
-   */
-  className?: string;
-
-  /**
-   * Callback cuando el estado del radio cambia
-   *
-   * Se ejecuta cuando el usuario selecciona o deselecciona el radio button.
-   *
-   * @param event - Evento de cambio del input nativo
-   *
-   * @example
-   * ```tsx
-   * <Radio
-   *   onChange={(e) => {
-   *     console.log('Checked:', e.target.checked);
-   *     console.log('Value:', e.target.value);
-   *   }}
-   * />
-   * ```
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
+import type { InputHTMLAttributes } from 'react';
+
+/**
+ * Estados visuales del Radio Button
+ *
+ * @see Radio.tsx - Implementación del componente
+ */
+export type RadioState = 'default' | 'hover' | 'focus' | 'disabled';
+
+/**
+ * Props del componente Radio
+ *
+ * Extiende las props nativas de HTMLInputElement excepto 'type' y 'size'
+ * que están manejados internamente por el componente.
+ *
+ * @see docs/colors.md - Sistema de colores para estados
+ * @see docs/typography.md - Tipografía para labels y descriptions
+ * @see docs/spacing.md - Espaciado entre elementos
+ *
+ * @example
+ * ```tsx
+ * // Radio simple
+ * <Radio
+ *   label="Accept terms"
+ *   value="accept"
+ *   name="terms"
+ *   checked={accepted}
+ *   onChange={(e) => setAccepted(e.target.checked)}
+ * />
+ *
+ * // Radio con description
+ * <Radio
+ *   label="Allow tickets to be resold"
+ *   description="Customers can resell or transfer their tickets"
+ *   value="resell"
+ *   name="ticketOptions"
+ *   checked={resellAllowed}
+ *   onChange={(e) => setResellAllowed(e.target.checked)}
+ * />
+ *
+ * // Radio disabled
+ * <Radio
+ *   label="Premium feature"
+ *   description="Upgrade to access this feature"
+ *   disabled
+ *   value="premium"
+ *   name="features"
+ * />
+ * ```
+ */
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  /**
+   * Etiqueta del radio button
+   *
+   * Se muestra con tipografía Label Small (14px Bold) según sistema de diseño.
+   *
+   * @see docs/typography.md - Label Small (text-sm font-bold)
+   */
+  label?: string;
+
+  /**
+   * Descripción debajo del label
+   *
+   * Se muestra con tipografía Paragraph Small (14px Regular) según sistema de diseño.
+   *
+   * @see docs/typography.md - Paragraph Small (text-sm font-normal)
+   */
+  description?: string;
+
+  /**
+   * Si el radio está seleccionado
+   *
+   * Controla el estado checked del radio button. En grupos de radio buttons,
+   * solo uno puede estar checked a la vez.
+   *
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Valor del radio button (requerido para grupos)
+   *
+   * Identifica el valor único de este radio button dentro de un grupo.
+   * Es esencial para manejar la selección en grupos de radio buttons.
+   */
+  value?: string | number;
+
+  /**
+   * Nombre del grupo de radio buttons
+   *
+   * Agrupa múltiples radio buttons para permitir selección única.
+   * Todos los radios con el mismo `name` pertenecen al mismo grupo.
+   */
+  name?: string;
+
+  /**
+   * Clases CSS adicionales
+   *
+   * Permite extender los estilos del componente con clases de Tailwind CSS
+   * o clases personalizadas.
+   */
+  className?: string;
+
+  /**
+   * Callback cuando el estado del radio cambia
+   *
+   * Se ejecuta cuando el usuario selecciona o deselecciona el radio button.
+   *
+   * @param event - Evento de cambio del input nativo
+   *
+   * @example
+   * ```tsx
+   * <Radio
+   *   onChange={(e) => {
+   *     console.log('Checked:', e.target.checked);
+   *     console.log('Value:', e.target.value);
+   *   }}
+   * />
+   * ```
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}