npm - siesa-ui-kit - Versions diffs - 1.0.5 → 1.0.7 - Mend

siesa-ui-kit 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (462) hide show

package/docs/dark-mode-guide.md DELETED Viewed

@@ -1,1426 +0,0 @@
-# Guía de Dark Mode - Siesa UI Kit
-## 📋 Tabla de Contenidos
-1. [Introducción](#introducción)
-2. [Configuración en Siesa UI Kit](#configuración-en-siesa-ui-kit)
-3. [Uso del Modificador dark:](#uso-del-modificador-dark)
-4. [Implementación con JavaScript](#implementación-con-javascript)
-5. [Tokens de Color](#tokens-de-color)
-6. [Ejemplos Prácticos](#ejemplos-prácticos)
-7. [Mejores Prácticas](#mejores-prácticas)
-8. [Storybook y Dark Mode](#storybook-y-dark-mode)
-9. [Recursos Adicionales](#recursos-adicionales)
----
-## Introducción
-Tailwind CSS proporciona soporte nativo para dark mode a través del modificador `dark:`, permitiendo crear interfaces que se adaptan automáticamente a las preferencias del usuario. Siesa UI Kit utiliza el sistema de dark mode basado en clases para ofrecer control total sobre el cambio de tema.
-### ¿Qué es Dark Mode?
-Dark mode es una interfaz alternativa que usa colores oscuros en lugar de claros, ofreciendo beneficios como:
-- **Reducción de fatiga visual** en ambientes con poca luz
-- **Ahorro de energía** en pantallas OLED/AMOLED
-- **Preferencia estética** de muchos usuarios
-- **Accesibilidad mejorada** para usuarios sensibles a la luz
-### Estrategias de Dark Mode en Tailwind
-Tailwind CSS soporta dos estrategias principales:
-1. **Media Query (`prefers-color-scheme`)**: Automática basada en configuración del sistema
-2. **Class-based (`.dark`)**: Manual con control total mediante clases CSS
-**Siesa UI Kit usa la estrategia class-based** para mayor control y flexibilidad.
----
-## Configuración en Siesa UI Kit
-### tailwind.config.js
-El proyecto ya está configurado para usar dark mode basado en clases:
-```javascript
-// tailwind.config.js
-module.exports = {
-  darkMode: 'class', // ✅ Habilitado con estrategia de clase
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        // Colores que se adaptan a dark mode
-        'content-primary': '#18181b',
-        'dark-content-primary': '#ffffff',
-        'bg-primary': '#ffffff',
-        'dark-bg-primary': '#112d57',
-        // ... más colores
-      }
-    }
-  }
-}
-```
-### ¿Qué hace `darkMode: 'class'`?
-Con esta configuración, el modificador `dark:` se activa cuando un elemento ancestro (típicamente `<html>` o `<body>`) tiene la clase `dark`:
-```html
-<!-- Dark mode ACTIVADO -->
-<html class="dark">
-  <body>
-    <!-- Los estilos dark: se aplicarán aquí -->
-  </body>
-</html>
-<!-- Dark mode DESACTIVADO -->
-<html>
-  <body>
-    <!-- Los estilos dark: NO se aplicarán -->
-  </body>
-</html>
-```
-### Alternativa: Media Query (NO usado en Siesa UI Kit)
-Si se configurara como `darkMode: 'media'`, los estilos se aplicarían automáticamente según la preferencia del sistema operativo:
-```javascript
-// NO usado en Siesa UI Kit
-darkMode: 'media', // Usa prefers-color-scheme automáticamente
-```
----
-## Uso del Modificador dark:
-### Sintaxis Básica
-El modificador `dark:` se aplica como prefijo a cualquier utilidad de Tailwind:
-```tsx
-<div className="bg-white dark:bg-gray-900 text-black dark:text-white">
-  Este elemento cambia según el modo
-</div>
-```
-### Anatomía del Modificador
-```
-dark:bg-gray-900
-│    └─ Utilidad normal de Tailwind
-└─ Modificador que activa en dark mode
-```
-El modificador `dark:` funciona con **cualquier utilidad** de Tailwind:
-```tsx
-// Colores
-<div className="bg-white dark:bg-black">
-<p className="text-gray-900 dark:text-white">
-// Borders
-<div className="border-gray-200 dark:border-gray-800">
-// Shadows
-<div className="shadow-md dark:shadow-xl">
-// Opacidad
-<div className="opacity-100 dark:opacity-80">
-// Y mucho más...
-```
-### Combinación con Otros Modificadores
-Puedes combinar `dark:` con otros modificadores de Tailwind:
-```tsx
-// dark: + hover:
-<button className="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
-  Button con hover en ambos modos
-</button>
-// dark: + focus:
-<input className="border-gray-300 focus:border-blue-500 dark:border-gray-700 dark:focus:border-blue-400" />
-// dark: + responsive
-<div className="bg-white md:bg-gray-100 dark:bg-gray-900 dark:md:bg-black">
-  Responsive + dark mode
-</div>
-// dark: + group-hover:
-<div className="group">
-  <p className="text-gray-500 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white">
-    Text con group hover
-  </p>
-</div>
-```
-### Orden de Modificadores
-El orden importa cuando combinas múltiples modificadores:
-```tsx
-// ✅ CORRECTO - Modificador responsive primero, luego dark, luego estado
-<button className="md:bg-blue-500 md:dark:bg-blue-700 md:dark:hover:bg-blue-800">
-// ❌ INCORRECTO - Orden inconsistente
-<button className="dark:md:hover:bg-blue-800">
-```
-**Regla general**: `{responsive}:{dark}:{state}:{utility}`
-Ejemplos:
-```tsx
-sm:dark:hover:bg-blue-500
-lg:dark:focus:text-white
-md:dark:group-hover:opacity-100
-```
----
-## Implementación con JavaScript
-### Toggle Básico de Dark Mode
-Implementación mínima para alternar entre modos:
-```tsx
-import { useEffect, useState } from 'react';
-export const DarkModeToggle = () => {
-  const [darkMode, setDarkMode] = useState(false);
-  // Activar/desactivar dark mode
-  const toggleDarkMode = () => {
-    setDarkMode(!darkMode);
-    if (!darkMode) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  };
-  return (
-    <button onClick={toggleDarkMode}>
-      {darkMode ? '☀️ Light' : '🌙 Dark'}
-    </button>
-  );
-};
-```
-### Toggle con Persistencia (Recomendado)
-Guardar la preferencia del usuario en `localStorage`:
-```tsx
-import { useEffect, useState } from 'react';
-export const DarkModeTogglePersistent = () => {
-  const [darkMode, setDarkMode] = useState(false);
-  // Leer preferencia guardada al cargar
-  useEffect(() => {
-    const savedTheme = localStorage.getItem('theme');
-    const isDark = savedTheme === 'dark';
-    setDarkMode(isDark);
-    if (isDark) {
-      document.documentElement.classList.add('dark');
-    }
-  }, []);
-  // Toggle con persistencia
-  const toggleDarkMode = () => {
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    if (newDarkMode) {
-      document.documentElement.classList.add('dark');
-      localStorage.setItem('theme', 'dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-      localStorage.setItem('theme', 'light');
-    }
-  };
-  return (
-    <button
-      onClick={toggleDarkMode}
-      className="p-2 rounded-md border border-border-primary dark:border-dark-border-primary hover:bg-background-secondary dark:hover:bg-dark-bg-primary transition-colors"
-      aria-label="Toggle dark mode"
-    >
-      {darkMode ? '☀️' : '🌙'}
-    </button>
-  );
-};
-```
-### Toggle con Sistema de Preferencias (Avanzado)
-Soporte completo para light, dark, y preferencia del sistema:
-```tsx
-import { useEffect, useState } from 'react';
-type Theme = 'light' | 'dark' | 'system';
-export const AdvancedDarkModeToggle = () => {
-  const [theme, setTheme] = useState<Theme>('system');
-  // Aplicar tema basado en preferencia
-  useEffect(() => {
-    const root = document.documentElement;
-    const savedTheme = localStorage.getItem('theme') as Theme | null;
-    if (savedTheme) {
-      setTheme(savedTheme);
-    }
-    const applyTheme = (currentTheme: Theme) => {
-      root.classList.remove('dark');
-      if (currentTheme === 'dark') {
-        root.classList.add('dark');
-      } else if (currentTheme === 'system') {
-        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        if (systemPrefersDark) {
-          root.classList.add('dark');
-        }
-      }
-    };
-    applyTheme(savedTheme || 'system');
-    // Escuchar cambios en preferencia del sistema
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const handleChange = () => {
-      if (theme === 'system') {
-        applyTheme('system');
-      }
-    };
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, [theme]);
-  // Cambiar tema
-  const changeTheme = (newTheme: Theme) => {
-    setTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
-    const root = document.documentElement;
-    root.classList.remove('dark');
-    if (newTheme === 'dark') {
-      root.classList.add('dark');
-    } else if (newTheme === 'system') {
-      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      if (systemPrefersDark) {
-        root.classList.add('dark');
-      }
-    }
-  };
-  return (
-    <div className="flex gap-2">
-      <button
-        onClick={() => changeTheme('light')}
-        className={`px-3 py-2 rounded-md ${
-          theme === 'light'
-            ? 'bg-primary-custom-600 text-white'
-            : 'bg-background-secondary dark:bg-dark-bg-primary'
-        }`}
-      >
-        ☀️ Light
-      </button>
-      <button
-        onClick={() => changeTheme('dark')}
-        className={`px-3 py-2 rounded-md ${
-          theme === 'dark'
-            ? 'bg-primary-custom-600 text-white'
-            : 'bg-background-secondary dark:bg-dark-bg-primary'
-        }`}
-      >
-        🌙 Dark
-      </button>
-      <button
-        onClick={() => changeTheme('system')}
-        className={`px-3 py-2 rounded-md ${
-          theme === 'system'
-            ? 'bg-primary-custom-600 text-white'
-            : 'bg-background-secondary dark:bg-dark-bg-primary'
-        }`}
-      >
-        💻 System
-      </button>
-    </div>
-  );
-};
-```
-### Prevenir Flash de Contenido (FOUC)
-Agregar script en el `<head>` del HTML para aplicar el tema antes de que React cargue:
-```html
-<!DOCTYPE html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Siesa UI Kit</title>
-  <!-- Script para prevenir flash de contenido -->
-  <script>
-    // Ejecuta ANTES de que la página renderice
-    (function() {
-      const theme = localStorage.getItem('theme');
-      if (theme === 'dark') {
-        document.documentElement.classList.add('dark');
-      } else if (theme === 'system' || !theme) {
-        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        if (systemPrefersDark) {
-          document.documentElement.classList.add('dark');
-        }
-      }
-    })();
-  </script>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-</html>
-```
-### Custom Hook para Dark Mode
-Crear un hook reutilizable:
-```tsx
-// hooks/useDarkMode.ts
-import { useEffect, useState } from 'react';
-export const useDarkMode = () => {
-  const [darkMode, setDarkMode] = useState(() => {
-    const saved = localStorage.getItem('theme');
-    return saved === 'dark';
-  });
-  useEffect(() => {
-    const root = document.documentElement;
-    if (darkMode) {
-      root.classList.add('dark');
-      localStorage.setItem('theme', 'dark');
-    } else {
-      root.classList.remove('dark');
-      localStorage.setItem('theme', 'light');
-    }
-  }, [darkMode]);
-  const toggle = () => setDarkMode(prev => !prev);
-  return { darkMode, toggle };
-};
-// Uso del hook
-export const MyComponent = () => {
-  const { darkMode, toggle } = useDarkMode();
-  return (
-    <button onClick={toggle}>
-      {darkMode ? 'Switch to Light' : 'Switch to Dark'}
-    </button>
-  );
-};
-```
----
-## Tokens de Color
-### Sistema de Colores Adaptativos
-Siesa UI Kit define tokens de color específicos para dark mode:
-```javascript
-// tailwind.config.js - Extracto de colores
-colors: {
-  // Light mode (por defecto)
-  'content-primary': '#18181b',
-  'content-secondary': '#a1a1aa',
-  'bg-primary': '#ffffff',
-  'border-primary': '#e4e4e7',
-  // Dark mode (con prefijo dark-)
-  'dark-content-primary': '#93d1fd',
-  'dark-bg-primary': '#112d57',
-  'dark-border-primary': '#71717a',
-  'dark-border-custom': '#0f6ae3',
-}
-```
-### Uso de Tokens
-```tsx
-// ✅ CORRECTO - Usando tokens del sistema
-<div className="bg-bg-primary dark:bg-dark-bg-primary">
-  <h1 className="text-content-primary dark:text-dark-content-primary">
-    Title
-  </h1>
-  <p className="text-content-secondary dark:text-content-secondary">
-    Content
-  </p>
-</div>
-// ❌ EVITAR - Colores hardcodeados
-<div className="bg-white dark:bg-gray-900">
-  <h1 className="text-black dark:text-white">
-    Title
-  </h1>
-</div>
-```
-### Tabla de Tokens Comunes
-| Uso | Light Mode | Dark Mode |
-|-----|------------|-----------|
-| **Texto Principal** | `text-content-primary` | `dark:text-dark-content-primary` |
-| **Texto Secundario** | `text-content-secondary` | `dark:text-content-secondary` |
-| **Fondo Principal** | `bg-bg-primary` | `dark:bg-dark-bg-primary` |
-| **Fondo Secundario** | `bg-background-secondary` | `dark:bg-dark-bg-primary` |
-| **Borde Principal** | `border-border-primary` | `dark:border-dark-border-primary` |
-| **Borde Custom** | `border-primary-custom-300` | `dark:border-dark-border-custom` |
-| **Botón Primary BG** | `bg-primary-custom-600` | `dark:bg-dark-bg-inverse` |
-| **Botón Primary Text** | `text-primary-inverse-content` | `dark:text-dark-content-inverse` |
----
-## Ejemplos Prácticos
-### 1. Card Básica con Dark Mode
-```tsx
-export const BasicCard = () => {
-  return (
-    <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-2xl shadow-base">
-      <h3 className="mb-2 text-content-primary dark:text-dark-content-primary font-bold text-lg">
-        Card Title
-      </h3>
-      <p className="mb-4 text-content-secondary dark:text-content-secondary">
-        This card adapts to dark mode automatically.
-      </p>
-      <button className="px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse rounded-md font-bold">
-        Action
-      </button>
-    </div>
-  );
-};
-```
-### 2. Formulario Adaptativo
-```tsx
-export const AdaptiveForm = () => {
-  return (
-    <form className="max-w-md mx-auto p-8 bg-white dark:bg-dark-bg-primary rounded-2xl border border-border-primary dark:border-dark-border-primary">
-      <h2 className="mb-6 text-content-primary dark:text-dark-content-primary font-bold text-2xl">
-        Sign In
-      </h2>
-      <div className="space-y-4">
-        <div>
-          <label className="block mb-2 text-content-primary dark:text-dark-content-primary font-bold text-sm">
-            Email
-          </label>
-          <input
-            type="email"
-            className="w-full px-3 py-2 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary text-content-primary dark:text-dark-content-primary rounded-md focus:border-primary-custom-400 dark:focus:border-dark-border-custom"
-            placeholder="you@example.com"
-          />
-        </div>
-        <div>
-          <label className="block mb-2 text-content-primary dark:text-dark-content-primary font-bold text-sm">
-            Password
-          </label>
-          <input
-            type="password"
-            className="w-full px-3 py-2 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary text-content-primary dark:text-dark-content-primary rounded-md focus:border-primary-custom-400 dark:focus:border-dark-border-custom"
-            placeholder="••••••••"
-          />
-        </div>
-        <button
-          type="submit"
-          className="w-full px-4 py-3 bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse rounded-md font-bold hover:bg-primary-custom-500 dark:hover:bg-dark-bg-inverse/90"
-        >
-          Sign In
-        </button>
-      </div>
-    </form>
-  );
-};
-```
-### 3. Navigation Bar con Toggle
-```tsx
-import { useDarkMode } from './hooks/useDarkMode';
-export const NavbarWithToggle = () => {
-  const { darkMode, toggle } = useDarkMode();
-  return (
-    <nav className="px-6 py-4 bg-white dark:bg-dark-bg-primary border-b border-border-primary dark:border-dark-border-primary">
-      <div className="container mx-auto flex items-center justify-between">
-        <div className="text-content-primary dark:text-dark-content-primary font-bold text-xl">
-          Siesa UI Kit
-        </div>
-        <ul className="flex items-center gap-6">
-          <li>
-            <a
-              href="#"
-              className="text-content-primary dark:text-dark-content-primary font-bold hover:text-primary-custom-600 dark:hover:text-dark-content-primary"
-            >
-              Home
-            </a>
-          </li>
-          <li>
-            <a
-              href="#"
-              className="text-content-primary dark:text-dark-content-primary font-bold hover:text-primary-custom-600 dark:hover:text-dark-content-primary"
-            >
-              Docs
-            </a>
-          </li>
-          <li>
-            <button
-              onClick={toggle}
-              className="p-2 rounded-md border border-border-primary dark:border-dark-border-primary hover:bg-background-secondary dark:hover:bg-dark-bg-primary"
-              aria-label="Toggle dark mode"
-            >
-              {darkMode ? '☀️' : '🌙'}
-            </button>
-          </li>
-        </ul>
-      </div>
-    </nav>
-  );
-};
-```
-### 4. Dashboard Completo
-```tsx
-export const DashboardWithDarkMode = () => {
-  return (
-    <div className="min-h-screen bg-background-secondary dark:bg-dark-bg-primary">
-      {/* Header */}
-      <header className="bg-white dark:bg-dark-bg-primary border-b border-border-primary dark:border-dark-border-primary px-6 py-4">
-        <h1 className="text-content-primary dark:text-dark-content-primary font-bold text-2xl">
-          Dashboard
-        </h1>
-      </header>
-      {/* Main Content */}
-      <main className="p-6">
-        <div className="grid grid-cols-3 gap-6">
-          {/* Stat Cards */}
-          {[1, 2, 3].map((i) => (
-            <div
-              key={i}
-              className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-2xl"
-            >
-              <p className="mb-2 text-content-secondary dark:text-content-secondary text-xs">
-                Metric {i}
-              </p>
-              <p className="text-content-primary dark:text-dark-content-primary font-bold text-3xl">
-                1,234
-              </p>
-            </div>
-          ))}
-        </div>
-      </main>
-    </div>
-  );
-};
-```
-### 5. Modal con Backdrop
-```tsx
-export const ModalWithDarkMode = ({ isOpen, onClose }) => {
-  if (!isOpen) return null;
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      {/* Backdrop */}
-      <div
-        onClick={onClose}
-        className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-lg"
-      />
-      {/* Modal */}
-      <div className="relative z-10 w-full max-w-md bg-white dark:bg-dark-bg-primary rounded-3xl border border-border-primary dark:border-dark-border-primary shadow-2xl">
-        <div className="p-6 border-b border-border-primary dark:border-dark-border-primary">
-          <h2 className="text-content-primary dark:text-dark-content-primary font-bold text-xl">
-            Modal Title
-          </h2>
-        </div>
-        <div className="p-6">
-          <p className="text-content-secondary dark:text-content-secondary">
-            Modal content that adapts to dark mode.
-          </p>
-        </div>
-        <div className="flex gap-3 justify-end p-6 border-t border-border-primary dark:border-dark-border-primary">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 border border-border-primary dark:border-dark-border-custom text-content-primary dark:text-dark-content-primary rounded-md font-bold"
-          >
-            Cancel
-          </button>
-          <button className="px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse rounded-md font-bold">
-            Confirm
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-```
----
-## Mejores Prácticas
-### 1. Usar Tokens del Sistema
-```tsx
-// ✅ CORRECTO
-<div className="bg-bg-primary dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary">
-// ❌ EVITAR
-<div className="bg-white dark:bg-gray-900 text-black dark:text-white">
-```
-### 2. Consistencia en Todos los Elementos
-```tsx
-// ✅ CORRECTO - Todos los elementos se adaptan
-<div className="bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary p-6">
-  <h3 className="text-content-primary dark:text-dark-content-primary">Title</h3>
-  <p className="text-content-secondary dark:text-content-secondary">Content</p>
-</div>
-// ❌ EVITAR - Inconsistente
-<div className="bg-white dark:bg-dark-bg-primary p-6">
-  <h3 className="text-black">Title</h3> {/* No se adapta */}
-  <p className="text-gray-500 dark:text-gray-400">Content</p>
-</div>
-```
-### 3. Hover y Focus States
-```tsx
-// ✅ CORRECTO - Estados interactivos en ambos modos
-<button className="bg-primary-custom-600 dark:bg-dark-bg-inverse hover:bg-primary-custom-500 dark:hover:bg-dark-bg-inverse/90 text-white">
-// ❌ EVITAR - Solo estados en light mode
-<button className="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700">
-```
-### 4. Prevenir Flash de Contenido
-```html
-<!-- ✅ CORRECTO - Script en <head> -->
-<head>
-  <script>
-    (function() {
-      const theme = localStorage.getItem('theme');
-      if (theme === 'dark') document.documentElement.classList.add('dark');
-    })();
-  </script>
-</head>
-<!-- ❌ EVITAR - Aplicar tema después de cargar React -->
-```
-### 5. Accesibilidad
-```tsx
-// ✅ CORRECTO - Botón accesible
-<button
-  onClick={toggleDarkMode}
-  aria-label="Toggle dark mode"
-  className="p-2 rounded-md"
->
-  {darkMode ? '☀️' : '🌙'}
-</button>
-// ❌ EVITAR - Sin aria-label
-<button onClick={toggleDarkMode}>
-  {darkMode ? '☀️' : '🌙'}
-</button>
-```
-### 6. Testear en Ambos Modos
-Siempre probar componentes en ambos modos:
-```tsx
-// Durante desarrollo, agregar toggle temporal
-<div className="fixed bottom-4 right-4 z-50">
-  <DarkModeToggle />
-</div>
-```
-### 7. Transiciones Suaves
-```tsx
-// ✅ CORRECTO - Transiciones suaves
-<div className="bg-white dark:bg-dark-bg-primary transition-colors duration-200">
-// Para transiciones globales, agregar en CSS
-html {
-  @apply transition-colors duration-200;
-}
-```
-### 8. Contraste Suficiente
-```tsx
-// ✅ CORRECTO - Buen contraste
-<div className="bg-white dark:bg-dark-bg-primary">
-  <p className="text-content-primary dark:text-dark-content-primary">
-    Legible en ambos modos
-  </p>
-</div>
-// ❌ EVITAR - Poco contraste
-<div className="bg-gray-100 dark:bg-gray-800">
-  <p className="text-gray-400 dark:text-gray-500">
-    Difícil de leer
-  </p>
-</div>
-```
-### 9. Opacidades Adaptativas
-```tsx
-// ✅ CORRECTO - Opacidades diferentes por modo
-<div className="bg-white/50 dark:bg-black/50">
-// Para glassmorphism
-<div className="backdrop-blur-md bg-white/30 dark:bg-white/10">
-```
-### 10. Documentar Decisiones
-```tsx
-// ✅ CORRECTO - Comentar decisiones de diseño
-<div className="
-  bg-background-secondary dark:bg-dark-bg-primary
-  // Fondo secundario para distinguir del contenido principal
-">
-```
----
-## Recursos Adicionales
-### Documentación Oficial
-- **Tailwind CSS Dark Mode**: https://tailwindcss.com/docs/dark-mode
-- **Tailwind CSS Colors**: https://tailwindcss.com/docs/customizing-colors
-### Archivos Relacionados del Proyecto
-- `tailwind.config.js` - Configuración de dark mode (tailwind.config.js:3)
-- `docs/colors.md` - Sistema de colores con dark mode
-- `docs/typography.md` - Tipografía adaptativa
-- `docs/border-radius.md` - Border radius con dark mode
-- `docs/shadows.md` - Sombras en dark mode
-- `docs/filters.md` - Filtros y glassmorphism
-- `docs/spacing.md` - Espaciado consistente
-### Herramientas Útiles
-- **Contrast Checker**: https://webaim.org/resources/contrastchecker/
-- **Dark Mode Toggle Package**: https://github.com/donavon/use-dark-mode
-- **System Theme Detection**: `window.matchMedia('(prefers-color-scheme: dark)')`
-### Checklist de Implementación
-Antes de lanzar dark mode en producción:
-- [ ] Configurar `darkMode: 'class'` en `tailwind.config.js`
-- [ ] Definir tokens de color para ambos modos
-- [ ] Implementar toggle con persistencia en localStorage
-- [ ] Agregar script en `<head>` para prevenir FOUC
-- [ ] Aplicar `dark:` a todos los componentes
-- [ ] Testear contraste en ambos modos
-- [ ] Verificar hover/focus states
-- [ ] Probar en diferentes navegadores
-- [ ] Validar accesibilidad (WCAG AA mínimo)
-- [ ] Documentar uso para el equipo
-### Ejemplo de Context para Dark Mode
-```tsx
-// contexts/ThemeContext.tsx
-import { createContext, useContext, useEffect, useState } from 'react';
-type ThemeContextType = {
-  darkMode: boolean;
-  toggle: () => void;
-};
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-export const ThemeProvider = ({ children }) => {
-  const [darkMode, setDarkMode] = useState(() => {
-    const saved = localStorage.getItem('theme');
-    return saved === 'dark';
-  });
-  useEffect(() => {
-    const root = document.documentElement;
-    if (darkMode) {
-      root.classList.add('dark');
-      localStorage.setItem('theme', 'dark');
-    } else {
-      root.classList.remove('dark');
-      localStorage.setItem('theme', 'light');
-    }
-  }, [darkMode]);
-  const toggle = () => setDarkMode(prev => !prev);
-  return (
-    <ThemeContext.Provider value={{ darkMode, toggle }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-export const useTheme = () => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within ThemeProvider');
-  }
-  return context;
-};
-// Uso en la app
-// main.tsx
-import { ThemeProvider } from './contexts/ThemeContext';
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <ThemeProvider>
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>
-);
-// En cualquier componente
-import { useTheme } from './contexts/ThemeContext';
-const MyComponent = () => {
-  const { darkMode, toggle } = useTheme();
-  return <button onClick={toggle}>Toggle</button>;
-};
-```
----
-## Storybook y Dark Mode
-### Introducción a Storybook con Dark Mode
-Cuando creas historias en Storybook (archivos `.stories.tsx`), es fundamental que todos los elementos de documentación, ejemplos y consejos sean visibles tanto en modo claro como oscuro. Esta sección proporciona patrones probados para adaptar tus stories al dark mode.
-### Elementos Comunes en Storybook
-#### 1. Títulos y Encabezados
-Los títulos de sección deben ser claramente visibles en ambos modos:
-```tsx
-// ✅ CORRECTO - Título visible en ambos modos
-<h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-  Default (Primario)
-</h3>
-// ✅ CORRECTO - Subtítulos con adaptación
-<h4 className="text-lg font-bold dark:text-white">
-  Confirmar Acción
-</h4>
-// ❌ EVITAR - Sin dark mode
-<h3 className="text-sm font-bold mb-4 text-gray-700">
-  Default (Primario)
-</h3>
-```
-**Patrón recomendado para títulos**:
-- Títulos principales: `text-gray-700 dark:text-white`
-- Subtítulos: `text-gray-600 dark:text-gray-200`
-#### 2. Textos de Ayuda y Descripciones
-Textos secundarios que acompañan los ejemplos:
-```tsx
-// ✅ CORRECTO - Textos de ayuda visibles
-<p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-  Extra Small
-</p>
-<p className="text-sm text-gray-600 dark:text-gray-300 mb-6">
-  ¿Estás seguro de que deseas eliminar este elemento?
-</p>
-// ❌ EVITAR - Sin adaptación
-<p className="text-xs text-gray-500 mt-2">
-  Extra Small
-</p>
-```
-**Patrones recomendados**:
-- Textos secundarios: `text-gray-500 dark:text-gray-300`
-- Textos terciarios: `text-gray-600 dark:text-gray-300`
-#### 3. Cajas de Consejos y Tips
-Las cajas informativas con fondos de color necesitan adaptación completa:
-```tsx
-// ✅ CORRECTO - Caja de consejo adaptativa
-<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-  <p className="text-xs text-gray-600 dark:text-gray-300">
-    <strong>💡 Guía de Iconos:</strong>
-    <br />• Usa iconos a la <strong>izquierda</strong> para acciones
-    <br />• Usa iconos a la <strong>derecha</strong> para navegación
-  </p>
-</div>
-// ❌ EVITAR - Fondo claro que se ve mal en dark mode
-<div className="mt-6 p-4 bg-blue-50 rounded-lg">
-  <p className="text-xs text-gray-600">
-    <strong>💡 Guía de Iconos:</strong>
-  </p>
-</div>
-```
-**Patrones recomendados para fondos informativos**:
-- Fondo azul: `bg-blue-50 dark:bg-blue-900/20`
-- Fondo amarillo: `bg-yellow-50 dark:bg-yellow-900/20`
-- Fondo verde: `bg-green-50 dark:bg-green-900/20`
-- Fondo rojo: `bg-red-50 dark:bg-red-900/20`
-**Nota**: El `/20` indica 20% de opacidad, creando un fondo sutil en dark mode.
-#### 4. Cards y Contenedores
-Cards de ejemplo que muestran casos de uso:
-```tsx
-// ✅ CORRECTO - Card adaptativa completa
-<div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
-  <h3 className="text-lg font-bold dark:text-white mb-4">
-    Título de la Card
-  </h3>
-  <p className="text-sm text-gray-600 dark:text-gray-300">
-    Contenido de ejemplo
-  </p>
-</div>
-// ❌ EVITAR - Solo adaptación parcial
-<div className="p-6 bg-white border border-gray-200 rounded-lg">
-  <h3 className="text-lg font-bold mb-4">Título</h3>
-  <p className="text-sm text-gray-600">Contenido</p>
-</div>
-```
-**Checklist para cards**:
-- [ ] Fondo: `bg-white dark:bg-gray-800`
-- [ ] Borde: `border-gray-200 dark:border-gray-700`
-- [ ] Texto principal: `dark:text-white`
-- [ ] Texto secundario: `dark:text-gray-300`
-#### 5. Formularios e Inputs
-Elementos de formulario en ejemplos de Storybook:
-```tsx
-// ✅ CORRECTO - Input completamente adaptativo
-<input
-  type="text"
-  placeholder="Nombre"
-  className="
-    w-full px-3 py-2 border rounded
-    dark:bg-gray-700
-    dark:border-gray-600
-    dark:text-white
-    dark:placeholder-gray-400
-  "
-/>
-// ❌ EVITAR - Input sin dark mode
-<input
-  type="text"
-  placeholder="Nombre"
-  className="w-full px-3 py-2 border rounded"
-/>
-```
-**Patrón completo para inputs**:
-```tsx
-className="
-  w-full px-3 py-2
-  bg-white dark:bg-gray-700
-  border border-gray-300 dark:border-gray-600
-  text-gray-900 dark:text-white
-  placeholder-gray-400 dark:placeholder-gray-400
-  rounded-md
-  focus:border-primary-custom-400 dark:focus:border-dark-border-custom
-"
-```
-#### 6. Tablas
-Tablas de ejemplo para mostrar casos de uso:
-```tsx
-// ✅ CORRECTO - Tabla adaptativa completa
-<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-  <table className="w-full">
-    <thead className="bg-gray-50 dark:bg-gray-800">
-      <tr>
-        <th className="px-4 py-2 text-left text-xs font-bold dark:text-white">
-          Nombre
-        </th>
-        <th className="px-4 py-2 text-left text-xs font-bold dark:text-white">
-          Email
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr className="border-t dark:border-gray-700">
-        <td className="px-4 py-2 text-sm dark:text-gray-300">
-          Juan Pérez
-        </td>
-        <td className="px-4 py-2 text-sm dark:text-gray-300">
-          juan@example.com
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-// ❌ EVITAR - Tabla sin adaptación
-<table className="w-full">
-  <thead className="bg-gray-50">
-    <tr>
-      <th className="px-4 py-2 text-left text-xs font-bold">Nombre</th>
-    </tr>
-  </thead>
-</table>
-```
-**Checklist para tablas**:
-- [ ] Contenedor: `border-gray-200 dark:border-gray-700`
-- [ ] Header: `bg-gray-50 dark:bg-gray-800`
-- [ ] Headers de columna: `dark:text-white`
-- [ ] Filas: `border-t dark:border-gray-700`
-- [ ] Celdas: `dark:text-gray-300`
-#### 7. Divisores y Separadores
-Líneas divisoras entre secciones:
-```tsx
-// ✅ CORRECTO - Divisor visible en ambos modos
-<div className="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1" />
-// Para líneas horizontales
-<hr className="border-gray-200 dark:border-gray-700" />
-// ❌ EVITAR - Divisor sin dark mode
-<div className="w-px h-6 bg-gray-200 mx-1" />
-```
-#### 8. Modales y Dialogs
-Ejemplos de modales en Storybook:
-```tsx
-// ✅ CORRECTO - Modal adaptativo completo
-<div className="p-6 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg max-w-md">
-  <div className="flex items-start justify-between mb-4">
-    <h4 className="text-lg font-bold dark:text-white">
-      Confirmar Acción
-    </h4>
-    <Button type="plain" size="sm" iconOnly leftIcon={<XIcon />} />
-  </div>
-  <p className="text-sm text-gray-600 dark:text-gray-300 mb-6">
-    ¿Estás seguro de que deseas eliminar este elemento?
-  </p>
-  <div className="flex gap-3 justify-end">
-    <Button type="outline">Cancelar</Button>
-    <Button type="default">Confirmar</Button>
-  </div>
-</div>
-```
-### Ejemplo Completo: Story con Dark Mode
-Aquí un ejemplo completo de una story adaptada:
-```tsx
-export const CompleteExample: Story = {
-  render: () => (
-    <div className="space-y-6">
-      {/* Sección con título */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Todas las Variantes
-        </h3>
-        <div className="flex gap-3 items-center">
-          <Button type="default">Default</Button>
-          <Button type="outline">Outline</Button>
-          <Button type="plain">Plain</Button>
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Tres tipos de botones disponibles
-        </p>
-      </div>
-      {/* Card de ejemplo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Ejemplo de Uso
-        </h3>
-        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
-          <div className="space-y-4 mb-6">
-            <input
-              type="text"
-              placeholder="Nombre"
-              className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400"
-            />
-          </div>
-          <div className="flex gap-3 justify-end">
-            <Button type="outline">Cancelar</Button>
-            <Button type="default">Guardar</Button>
-          </div>
-        </div>
-      </div>
-      {/* Caja de consejos */}
-      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-        <p className="text-xs text-gray-600 dark:text-gray-300">
-          <strong>💡 Consejo:</strong>
-          <br />• Siempre incluye dark mode en tus stories
-          <br />• Prueba con el toggle de Storybook
-          <br />• Verifica el contraste en ambos modos
-        </p>
-      </div>
-    </div>
-  ),
-};
-```
-### Patrones Reutilizables
-#### Patrón 1: Sección con Título y Contenido
-```tsx
-<div>
-  <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-    {título}
-  </h3>
-  <div className="[contenido]">
-    {/* Componentes aquí */}
-  </div>
-  <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-    {descripción}
-  </p>
-</div>
-```
-#### Patrón 2: Card de Ejemplo
-```tsx
-<div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
-  <h4 className="text-lg font-bold dark:text-white mb-4">
-    {título}
-  </h4>
-  <p className="text-sm text-gray-600 dark:text-gray-300 mb-6">
-    {contenido}
-  </p>
-  {/* Elementos interactivos */}
-</div>
-```
-#### Patrón 3: Caja de Consejos
-```tsx
-<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-  <p className="text-xs text-gray-600 dark:text-gray-300">
-    <strong>💡 {título}:</strong>
-    <br />• {punto 1}
-    <br />• {punto 2}
-    <br />• {punto 3}
-  </p>
-</div>
-```
-### Mejores Prácticas para Storybook
-#### 1. Consistencia en Todas las Stories
-```tsx
-// ✅ CORRECTO - Aplicar dark mode en todas las stories
-export const Story1: Story = {
-  render: () => (
-    <div>
-      <h3 className="text-gray-700 dark:text-white">Title</h3>
-      {/* Contenido adaptado */}
-    </div>
-  ),
-};
-export const Story2: Story = {
-  render: () => (
-    <div>
-      <h3 className="text-gray-700 dark:text-white">Title</h3>
-      {/* Contenido adaptado */}
-    </div>
-  ),
-};
-```
-#### 2. Usar el Toggle de Storybook
-Storybook incluye un addon para cambiar entre modos:
-- Busca el ícono del sol/luna en la barra de herramientas
-- Prueba cada story en ambos modos antes de hacer commit
-- Verifica que todos los textos sean legibles
-#### 3. Documentar Casos de Uso
-```tsx
-/**
- * Botones con Iconos
- *
- * Ejemplos de cómo usar iconos con botones.
- * NOTA: Todos los elementos están adaptados para dark mode.
- */
-export const WithIcons: Story = {
-  render: () => (
-    // Story content...
-  ),
-};
-```
-#### 4. Checklist para Cada Story
-Antes de completar una story, verifica:
-- [ ] Todos los `<h1>`, `<h2>`, `<h3>` tienen `dark:text-white`
-- [ ] Todos los `<p>` con texto secundario tienen `dark:text-gray-300`
-- [ ] Todas las cajas de fondo (`bg-*-50`) tienen `dark:bg-*-900/20`
-- [ ] Todas las cards tienen `dark:bg-gray-800`
-- [ ] Todos los bordes tienen `dark:border-gray-700`
-- [ ] Todos los inputs tienen adaptación completa
-- [ ] Todas las tablas tienen headers y celdas adaptadas
-- [ ] Se probó en ambos modos con el toggle de Storybook
-### Referencia Rápida de Clases
-| Elemento | Clase Light Mode | Clase Dark Mode |
-|----------|------------------|-----------------|
-| **Título Principal** | `text-gray-700` | `dark:text-white` |
-| **Texto Secundario** | `text-gray-500` | `dark:text-gray-300` |
-| **Texto Terciario** | `text-gray-600` | `dark:text-gray-300` |
-| **Fondo Card** | `bg-white` | `dark:bg-gray-800` |
-| **Borde Card** | `border-gray-200` | `dark:border-gray-700` |
-| **Fondo Tips Azul** | `bg-blue-50` | `dark:bg-blue-900/20` |
-| **Input Background** | `bg-white` | `dark:bg-gray-700` |
-| **Input Border** | `border-gray-300` | `dark:border-gray-600` |
-| **Input Text** | `text-gray-900` | `dark:text-white` |
-| **Placeholder** | `placeholder-gray-400` | `dark:placeholder-gray-400` |
-| **Table Header BG** | `bg-gray-50` | `dark:bg-gray-800` |
-| **Table Cell Text** | `text-gray-900` | `dark:text-gray-300` |
-| **Divisor** | `bg-gray-200` | `dark:bg-gray-700` |
-### Errores Comunes y Soluciones
-#### Error 1: Texto Invisible en Dark Mode
-```tsx
-// ❌ PROBLEMA
-<h3 className="text-gray-700">Title</h3>
-// ✅ SOLUCIÓN
-<h3 className="text-gray-700 dark:text-white">Title</h3>
-```
-#### Error 2: Caja de Fondo Clara Invisible
-```tsx
-// ❌ PROBLEMA
-<div className="bg-blue-50">
-  <p className="text-gray-600">Consejo</p>
-</div>
-// ✅ SOLUCIÓN
-<div className="bg-blue-50 dark:bg-blue-900/20">
-  <p className="text-gray-600 dark:text-gray-300">Consejo</p>
-</div>
-```
-#### Error 3: Bordes Invisibles
-```tsx
-// ❌ PROBLEMA
-<div className="border border-gray-200">
-// ✅ SOLUCIÓN
-<div className="border border-gray-200 dark:border-gray-700">
-```
-#### Error 4: Input sin Fondo
-```tsx
-// ❌ PROBLEMA - Input transparente en dark mode
-<input className="w-full px-3 py-2 border rounded" />
-// ✅ SOLUCIÓN - Fondo visible en ambos modos
-<input className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
-```
----
-**Última actualización**: 2025-11-11
-**Versión**: 1.0.0
-**Mantenedor**: Siesa UI Kit Team