siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Switch/Switch.tsx

@@ -1,246 +1,246 @@
-import { forwardRef } from 'react';
-import type { SwitchProps } from './Switch.types';
-
-/**
- * Switch - Componente de switch del sistema de diseño Siesa
- *
- * Campo de activación/desactivación con soporte para:
- * - Estados: default, hover, focus, disabled
- * - On, off
- * - Label y description opcionales
- * - Posición del label: leading (izquierda) o trailing (derecha)
- * - Animación suave de transición
- * - Dark mode completo
- * - Accesibilidad completa
- *
- * 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
- * - Focus ring con shadow especial según Figma
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA labels
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * // Label a la izquierda (default)
- * <Switch
- *   label="Permitir inserción"
- *   description="Permite que otros inserten los detalles de tu evento."
- *   checked={true}
- *   onChange={(e) => console.log(e.target.checked)}
- * />
- *
- * // Label a la derecha
- * <Switch
- *   label="Activar notificaciones"
- *   labelPosition="trailing"
- *   checked={false}
- *   onChange={(e) => console.log(e.target.checked)}
- * />
- * ```
- */
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  (
-    {
-      label,
-      description,
-      labelPosition = 'leading',
-      checked = false,
-      disabled = false,
-      className = '',
-      id,
-      onChange,
-      ariaLabel,
-      ...props
-    },
-    ref
-  ) => {
-    // Generar ID único si no se proporciona
-    const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;
-
-    // ===== CLASES BASE DEL TRACK =====
-    const baseTrackClasses = `
-      w-8
-      h-5
-      rounded-xl
-      border
-      overflow-hidden
-      relative
-      transition-all
-      duration-200
-    `;
-
-    // ===== CLASES DE ESTADO DEL TRACK =====
-    const getTrackStateClasses = () => {
-      if (disabled) {
-        return checked
-          ? `
-            bg-primary-custom-600
-            border-primary-inverse-border
-            opacity-50
-            cursor-not-allowed
-            dark:bg-primary-custom-600
-            dark:border-primary-inverse-border
-          `
-          : `
-            bg-[#fafafa]
-            border-border-primary
-            opacity-50
-            cursor-not-allowed
-            dark:bg-dark-bg-primary
-            dark:border-dark-border-primary
-          `;
-      }
-
-      return checked
-        ? `
-          bg-primary-custom-600
-          border-primary-inverse-border
-          cursor-pointer
-          peer-hover:border-[#307cc5]
-          peer-focus:shadow-lg
-          dark:bg-primary-custom-600
-          dark:border-primary-inverse-border
-          dark:peer-hover:border-[#307cc5]
-          dark:peer-focus:shadow-lg
-        `
-        : `
-          bg-[#fafafa]
-          border-border-primary
-          cursor-pointer
-          peer-hover:border-[#b6b6b9]
-          peer-focus:shadow-lg
-          dark:bg-dark-bg-primary
-          dark:border-dark-border-primary
-          dark:peer-hover:border-[#b6b6b9]
-          dark:peer-focus:shadow-lg
-        `;
-    };
-
-    // ===== CLASES DEL BOTÓN (CÍRCULO) =====
-    const getButtonClasses = () => {
-      const baseButtonClasses = `
-        absolute
-        w-4
-        h-4
-        bg-white
-        rounded-[10px]
-        border
-        top-1/2
-        -translate-y-1/2
-        transition-all
-        duration-200
-      `;
-
-      // Posición: OFF = left-px (1px), ON = left-[13px]
-      const positionClass = checked ? 'left-[13px]' : 'left-px';
-
-      if (disabled) {
-        const borderClass = checked
-          ? 'border-primary-inverse-border dark:border-primary-inverse-border'
-          : 'border-border-primary dark:border-dark-border-primary';
-        return `${baseButtonClasses} ${positionClass} ${borderClass}`;
-      }
-
-      const borderClass = checked
-        ? `
-          border-primary-inverse-border
-          peer-hover:border-[#307cc5]
-          dark:border-primary-inverse-border
-          dark:peer-hover:border-[#307cc5]
-        `
-        : `
-          border-border-primary
-          peer-hover:border-[#b6b6b9]
-          dark:border-dark-border-primary
-          dark:peer-hover:border-[#b6b6b9]
-        `;
-
-      return `${baseButtonClasses} ${positionClass} ${borderClass}`;
-    };
-
-    // ===== COMBINAR CLASES =====
-    const trackClasses = [
-      baseTrackClasses,
-      getTrackStateClasses(),
-    ]
-      .join(' ')
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    const buttonClasses = getButtonClasses()
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    // ===== COMPONENTES REUTILIZABLES =====
-    const LabelContent = (label || description) ? (
-      <label
-        htmlFor={switchId}
-        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>
-    ) : null;
-
-    const SwitchInput = (
-      <div className="flex items-center justify-center shrink-0">
-        {/* Native Input (hidden but accessible) */}
-        <input
-          ref={ref}
-          type="checkbox"
-          id={switchId}
-          checked={checked}
-          disabled={disabled}
-          onChange={onChange}
-          className="peer sr-only"
-          aria-label={ariaLabel || label}
-          {...props}
-        />
-
-        {/* Custom Switch Visual */}
-        <label
-          htmlFor={switchId}
-          className={trackClasses}
-          aria-hidden="true"
-        >
-          {/* Button (sliding circle) */}
-          <div className={buttonClasses} />
-        </label>
-      </div>
-    );
-
-    return (
-      <div className={`flex gap-2 items-center w-[344px] ${className}`}>
-        {labelPosition === 'leading' ? (
-          <>
-            {LabelContent}
-            {SwitchInput}
-          </>
-        ) : (
-          <>
-            {SwitchInput}
-            {LabelContent}
-          </>
-        )}
-      </div>
-    );
-  }
-);
-
-Switch.displayName = 'Switch';
+import { forwardRef } from 'react';
+import type { SwitchProps } from './Switch.types';
+
+/**
+ * Switch - Componente de switch del sistema de diseño Siesa
+ *
+ * Campo de activación/desactivación con soporte para:
+ * - Estados: default, hover, focus, disabled
+ * - On, off
+ * - Label y description opcionales
+ * - Posición del label: leading (izquierda) o trailing (derecha)
+ * - Animación suave de transición
+ * - Dark mode completo
+ * - Accesibilidad completa
+ *
+ * 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
+ * - Focus ring con shadow especial según Figma
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Label a la izquierda (default)
+ * <Switch
+ *   label="Permitir inserción"
+ *   description="Permite que otros inserten los detalles de tu evento."
+ *   checked={true}
+ *   onChange={(e) => console.log(e.target.checked)}
+ * />
+ *
+ * // Label a la derecha
+ * <Switch
+ *   label="Activar notificaciones"
+ *   labelPosition="trailing"
+ *   checked={false}
+ *   onChange={(e) => console.log(e.target.checked)}
+ * />
+ * ```
+ */
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  (
+    {
+      label,
+      description,
+      labelPosition = 'leading',
+      checked = false,
+      disabled = false,
+      className = '',
+      id,
+      onChange,
+      ariaLabel,
+      ...props
+    },
+    ref
+  ) => {
+    // Generar ID único si no se proporciona
+    const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;
+
+    // ===== CLASES BASE DEL TRACK =====
+    const baseTrackClasses = `
+      w-8
+      h-5
+      rounded-xl
+      border
+      overflow-hidden
+      relative
+      transition-all
+      duration-200
+    `;
+
+    // ===== CLASES DE ESTADO DEL TRACK =====
+    const getTrackStateClasses = () => {
+      if (disabled) {
+        return checked
+          ? `
+            bg-primary-custom-600
+            border-primary-inverse-border
+            opacity-50
+            cursor-not-allowed
+            dark:bg-primary-custom-600
+            dark:border-primary-inverse-border
+          `
+          : `
+            bg-[#fafafa]
+            border-border-primary
+            opacity-50
+            cursor-not-allowed
+            dark:bg-dark-bg-primary
+            dark:border-dark-border-primary
+          `;
+      }
+
+      return checked
+        ? `
+          bg-primary-custom-600
+          border-primary-inverse-border
+          cursor-pointer
+          peer-hover:border-[#307cc5]
+          peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
+          dark:bg-primary-custom-600
+          dark:border-primary-inverse-border
+          dark:peer-hover:border-[#307cc5]
+          dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
+        `
+        : `
+          bg-[#fafafa]
+          border-border-primary
+          cursor-pointer
+          peer-hover:border-[#b6b6b9]
+          peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
+          dark:bg-dark-bg-primary
+          dark:border-dark-border-primary
+          dark:peer-hover:border-[#b6b6b9]
+          dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
+        `;
+    };
+
+    // ===== CLASES DEL BOTÓN (CÍRCULO) =====
+    const getButtonClasses = () => {
+      const baseButtonClasses = `
+        absolute
+        w-4
+        h-4
+        bg-white
+        rounded-[10px]
+        border
+        top-1/2
+        -translate-y-1/2
+        transition-all
+        duration-200
+      `;
+
+      // Posición: OFF = left-px (1px), ON = left-[13px]
+      const positionClass = checked ? 'left-[13px]' : 'left-px';
+
+      if (disabled) {
+        const borderClass = checked
+          ? 'border-primary-inverse-border dark:border-primary-inverse-border'
+          : 'border-border-primary dark:border-dark-border-primary';
+        return `${baseButtonClasses} ${positionClass} ${borderClass}`;
+      }
+
+      const borderClass = checked
+        ? `
+          border-primary-inverse-border
+          peer-hover:border-[#307cc5]
+          dark:border-primary-inverse-border
+          dark:peer-hover:border-[#307cc5]
+        `
+        : `
+          border-border-primary
+          peer-hover:border-[#b6b6b9]
+          dark:border-dark-border-primary
+          dark:peer-hover:border-[#b6b6b9]
+        `;
+
+      return `${baseButtonClasses} ${positionClass} ${borderClass}`;
+    };
+
+    // ===== COMBINAR CLASES =====
+    const trackClasses = [
+      baseTrackClasses,
+      getTrackStateClasses(),
+    ]
+      .join(' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    const buttonClasses = getButtonClasses()
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    // ===== COMPONENTES REUTILIZABLES =====
+    const LabelContent = (label || description) ? (
+      <label
+        htmlFor={switchId}
+        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>
+    ) : null;
+
+    const SwitchInput = (
+      <div className="flex items-center justify-center shrink-0">
+        {/* Native Input (hidden but accessible) */}
+        <input
+          ref={ref}
+          type="checkbox"
+          id={switchId}
+          checked={checked}
+          disabled={disabled}
+          onChange={onChange}
+          className="peer sr-only"
+          aria-label={ariaLabel || label}
+          {...props}
+        />
+
+        {/* Custom Switch Visual */}
+        <label
+          htmlFor={switchId}
+          className={trackClasses}
+          aria-hidden="true"
+        >
+          {/* Button (sliding circle) */}
+          <div className={buttonClasses} />
+        </label>
+      </div>
+    );
+
+    return (
+      <div className={`flex gap-2 items-center w-[344px] ${className}`}>
+        {labelPosition === 'leading' ? (
+          <>
+            {LabelContent}
+            {SwitchInput}
+          </>
+        ) : (
+          <>
+            {SwitchInput}
+            {LabelContent}
+          </>
+        )}
+      </div>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';

package/src/components/Switch/Switch.types.ts

@@ -1,67 +1,67 @@
-import type { InputHTMLAttributes } from 'react';
-
-/**
- * Estados visuales del Switch
- */
-export type SwitchState = 'default' | 'hover' | 'focus' | 'disabled';
-
-/**
- * Posición del label respecto al switch
- * - `leading`: Label a la izquierda, switch a la derecha
- * - `trailing`: Switch a la izquierda, label a la derecha
- */
-export type LabelPosition = 'leading' | 'trailing';
-
-/**
- * Props del componente Switch
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- */
-export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-  /**
-   * Etiqueta del switch
-   */
-  label?: string;
-
-  /**
-   * Descripción debajo del label
-   */
-  description?: string;
-
-  /**
-   * Posición del label respecto al switch
-   * - `leading`: Label a la izquierda, switch a la derecha (default)
-   * - `trailing`: Switch a la izquierda, label a la derecha
-   * @default 'leading'
-   */
-  labelPosition?: LabelPosition;
-
-  /**
-   * Si el switch está activado
-   * @default false
-   */
-  checked?: boolean;
-
-  /**
-   * Si el switch está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-
-  /**
-   * Callback cuando el estado del switch cambia
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-
-  /**
-   * Label para accesibilidad (ARIA)
-   * Si no se proporciona, se usa el valor de `label`
-   */
-  ariaLabel?: string;
-}
+import type { InputHTMLAttributes } from 'react';
+
+/**
+ * Estados visuales del Switch
+ */
+export type SwitchState = 'default' | 'hover' | 'focus' | 'disabled';
+
+/**
+ * Posición del label respecto al switch
+ * - `leading`: Label a la izquierda, switch a la derecha
+ * - `trailing`: Switch a la izquierda, label a la derecha
+ */
+export type LabelPosition = 'leading' | 'trailing';
+
+/**
+ * Props del componente Switch
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ */
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  /**
+   * Etiqueta del switch
+   */
+  label?: string;
+
+  /**
+   * Descripción debajo del label
+   */
+  description?: string;
+
+  /**
+   * Posición del label respecto al switch
+   * - `leading`: Label a la izquierda, switch a la derecha (default)
+   * - `trailing`: Switch a la izquierda, label a la derecha
+   * @default 'leading'
+   */
+  labelPosition?: LabelPosition;
+
+  /**
+   * Si el switch está activado
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Si el switch está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Callback cuando el estado del switch cambia
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   * Label para accesibilidad (ARIA)
+   * Si no se proporciona, se usa el valor de `label`
+   */
+  ariaLabel?: string;
+}