alexui 1.0.0

package/components/Collapsible.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronDown } from 'lucide-react';
+
+export interface CollapsibleProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const Collapsible: React.FC<CollapsibleProps> = ({
+  trigger,
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  disabled = false,
+  className = ''
+}) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const setOpen = (next: boolean) => {
+    if (disabled) return;
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  return (
+    <div className={`w-full ${className}`}>
+      <button
+        type="button"
+        onClick={() => setOpen(!isOpen)}
+        disabled={disabled}
+        aria-expanded={isOpen}
+        className={`w-full flex items-center justify-between gap-3 text-left transition-colors rounded-xl ${
+          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-bg-app/40'
+        }`}
+      >
+        <span className="flex-1 min-w-0">{trigger}</span>
+        <motion.span
+          animate={{ rotate: isOpen ? 180 : 0 }}
+          transition={{ type: 'spring', stiffness: 350, damping: 24 }}
+          className="text-text-muted flex-shrink-0"
+        >
+          <ChevronDown className="w-4 h-4" />
+        </motion.span>
+      </button>
+
+      <AnimatePresence initial={false}>
+        {isOpen && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ type: 'spring', stiffness: 380, damping: 30 }}
+            className="overflow-hidden"
+          >
+            <div className="pt-3 text-sm text-text-muted leading-relaxed">
+              {children}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

package/components/ColorThemeManager.tsx

@@ -0,0 +1,458 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Sparkles, Download, RotateCcw, Check, Palette } from 'lucide-react';
+
+export interface ColorPalette {
+  accent: string;
+  success: string;
+  warning: string;
+  error: string;
+  info: string;
+}
+
+export interface ColorTheme {
+  id: string;
+  name: string;
+  light: ColorPalette;
+  dark: ColorPalette;
+}
+
+// 10 Curated Premium Themes
+export const PRESETS_THEMES: ColorTheme[] = [
+  {
+    id: 'default',
+    name: 'Default Indigo',
+    light: { accent: '#6366f1', success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' },
+    dark: { accent: '#818cf8', success: '#34d399', warning: '#fbbf24', error: '#f87171', info: '#60a5fa' }
+  },
+  {
+    id: 'emerald',
+    name: 'Emerald Forest',
+    light: { accent: '#059669', success: '#10b981', warning: '#d97706', error: '#dc2626', info: '#2563eb' },
+    dark: { accent: '#34d399', success: '#34d399', warning: '#fbbf24', error: '#f87171', info: '#60a5fa' }
+  },
+  {
+    id: 'cyberpunk',
+    name: 'Cyberpunk Pink',
+    light: { accent: '#db2777', success: '#10b981', warning: '#ea580c', error: '#dc2626', info: '#8b5cf6' },
+    dark: { accent: '#f472b6', success: '#34d399', warning: '#fbbf24', error: '#f87171', info: '#c084fc' }
+  },
+  {
+    id: 'ocean',
+    name: 'Ocean Blue',
+    light: { accent: '#2563eb', success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#0ea5e9' },
+    dark: { accent: '#60a5fa', success: '#34d399', warning: '#fbbf24', error: '#f87171', info: '#38bdf8' }
+  },
+  {
+    id: 'sunset',
+    name: 'Sunset Amber',
+    light: { accent: '#ea580c', success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' },
+    dark: { accent: '#fb923c', success: '#34d399', warning: '#fbbf24', error: '#f87171', info: '#60a5fa' }
+  },
+  {
+    id: 'violet',
+    name: 'Midnight Violet',
+    light: { accent: '#7c3aed', success: '#059669', warning: '#ea580c', error: '#dc2626', info: '#2563eb' },
+    dark: { accent: '#a78bfa', success: '#34d399', warning: '#fb923c', error: '#f87171', info: '#60a5fa' }
+  },
+  {
+    id: 'teal',
+    name: 'Teal Breeze',
+    light: { accent: '#0d9488', success: '#10b981', warning: '#d97706', error: '#e11d48', info: '#0284c7' },
+    dark: { accent: '#2dd4bf', success: '#34d399', warning: '#fbbf24', error: '#fda4af', info: '#38bdf8' }
+  },
+  {
+    id: 'crimson',
+    name: 'Crimson Blood',
+    light: { accent: '#dc2626', success: '#10b981', warning: '#d97706', error: '#b91c1c', info: '#2563eb' },
+    dark: { accent: '#f87171', success: '#34d399', warning: '#fbbf24', error: '#ef4444', info: '#60a5fa' }
+  },
+  {
+    id: 'neon',
+    name: 'Glow Neon',
+    light: { accent: '#65a30d', success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' },
+    dark: { accent: '#a3e635', success: '#34d399', warning: '#fbbf24', error: '#f87171', info: '#60a5fa' }
+  },
+  {
+    id: 'slate',
+    name: 'Monochrome Slate',
+    light: { accent: '#475569', success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' },
+    dark: { accent: '#94a3b8', success: '#34d399', warning: '#fbbf24', error: '#f87171', info: '#60a5fa' }
+  }
+];
+
+// Helper functions for dynamic theme calculations
+const darkenHex = (hex: string, percent: number) => {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const amt = Math.round(2.55 * percent);
+  const R = (num >> 16) - amt;
+  const G = (num >> 8 & 0x00FF) - amt;
+  const B = (num & 0x0000FF) - amt;
+  return "#" + (0x1000000 + (R < 255 ? R < 0 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 0 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 0 ? 0 : B : 255)).toString(16).slice(1);
+};
+
+const hexToRgba = (hex: string, alpha: number) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+export interface ColorThemeManagerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedThemeId: string;
+  setSelectedThemeId: (id: string) => void;
+  onThemeChange?: () => void;
+}
+
+export const ColorThemeManager: React.FC<ColorThemeManagerProps> = ({ 
+  isOpen, 
+  onClose,
+  selectedThemeId,
+  setSelectedThemeId,
+  onThemeChange,
+}) => {
+  const [customColors, setCustomColors] = useState<ColorPalette>({
+    accent: '#6366f1',
+    success: '#10b981',
+    warning: '#f59e0b',
+    error: '#ef4444',
+    info: '#3b82f6'
+  });
+
+  // Track if current browser dark mode is active
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    // Initial load
+    const storedTheme = localStorage.getItem('alexui-theme-id') || 'default';
+    setSelectedThemeId(storedTheme);
+
+    const storedCustom = localStorage.getItem('alexui-custom-colors');
+    if (storedCustom) {
+      try {
+        setCustomColors(JSON.parse(storedCustom));
+      } catch (e) {
+        console.error(e);
+      }
+    }
+
+    const checkDarkMode = () => {
+      setIsDark(document.documentElement.classList.contains('dark'));
+    };
+
+    checkDarkMode();
+    
+    // Listen for theme changes from switcher
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    
+    return () => observer.disconnect();
+  }, []);
+
+  const applyColors = useCallback((palette: ColorPalette) => {
+    const root = document.documentElement;
+    root.style.setProperty('--color-accent', palette.accent);
+    root.style.setProperty('--color-accent-hover', darkenHex(palette.accent, 10));
+    root.style.setProperty('--color-accent-glow', hexToRgba(palette.accent, 0.18));
+    root.style.setProperty('--color-success', palette.success);
+    root.style.setProperty('--color-error', palette.error);
+    root.style.setProperty('--color-warning', palette.warning);
+    root.style.setProperty('--color-info', palette.info);
+  }, []);
+
+  const onThemeChangeRef = useRef(onThemeChange);
+  useEffect(() => {
+    onThemeChangeRef.current = onThemeChange;
+  }, [onThemeChange]);
+
+  // Update styles when theme, mode, or custom color changes
+  useEffect(() => {
+    if (selectedThemeId === 'custom') {
+      applyColors(customColors);
+      localStorage.setItem('alexui-theme-id', 'custom');
+      localStorage.setItem('alexui-custom-colors', JSON.stringify(customColors));
+    } else {
+      const theme = PRESETS_THEMES.find(t => t.id === selectedThemeId) || PRESETS_THEMES[0];
+      const palette = isDark ? theme.dark : theme.light;
+      applyColors(palette);
+      localStorage.setItem('alexui-theme-id', selectedThemeId);
+    }
+    onThemeChangeRef.current?.();
+  }, [selectedThemeId, customColors, isDark, applyColors]);
+
+  const handleCustomColorChange = (key: keyof ColorPalette, value: string) => {
+    setCustomColors(prev => ({ ...prev, [key]: value }));
+    setSelectedThemeId('custom');
+  };
+
+  const handleResetCustom = () => {
+    const defaultCustom = {
+      accent: '#6366f1',
+      success: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      info: '#3b82f6'
+    };
+    setCustomColors(defaultCustom);
+    setSelectedThemeId('default');
+    localStorage.removeItem('alexui-custom-colors');
+  };
+
+  const handleDownloadCSS = () => {
+    const activePalette = selectedThemeId === 'custom' 
+      ? customColors 
+      : (isDark 
+          ? (PRESETS_THEMES.find(t => t.id === selectedThemeId)?.dark || PRESETS_THEMES[0].dark) 
+          : (PRESETS_THEMES.find(t => t.id === selectedThemeId)?.light || PRESETS_THEMES[0].light)
+        );
+
+    const cssContent = `:root {
+  --color-accent: ${activePalette.accent};
+  --color-accent-hover: ${darkenHex(activePalette.accent, 10)};
+  --color-accent-glow: ${hexToRgba(activePalette.accent, 0.18)};
+  --color-success: ${activePalette.success};
+  --color-error: ${activePalette.error};
+  --color-warning: ${activePalette.warning};
+  --color-info: ${activePalette.info};
+}`;
+
+    const blob = new Blob([cssContent], { type: 'text/css' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `alexui-theme-${selectedThemeId}.css`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  // Close on Escape key press
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = 'hidden';
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [isOpen, onClose]);
+
+  if (typeof document === 'undefined') return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          
+          {/* Backdrop blur layer */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={onClose}
+            className="fixed inset-0 bg-black/40 backdrop-blur-md cursor-pointer"
+          />
+
+          {/* Modal Container */}
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0, y: 15 }}
+            animate={{ 
+              scale: 1, 
+              opacity: 1, 
+              y: 0,
+              transition: { type: 'spring', stiffness: 350, damping: 25 }
+            }}
+            exit={{ 
+              scale: 0.95, 
+              opacity: 0, 
+              y: 15,
+              transition: { duration: 0.2 }
+            }}
+            className="relative w-full max-w-2xl rounded-2xl glass bg-bg-card/90 shadow-2xl border border-border-app z-10 overflow-hidden flex flex-col max-h-[90vh]"
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between p-5 border-b border-border-app/50">
+              <div className="flex items-center gap-2 text-accent">
+                <Palette className="w-5 h-5" />
+                <h3 className="font-extrabold text-lg text-text-main font-display">
+                  Personalizar Temas de Color
+                </h3>
+              </div>
+              <button
+                onClick={onClose}
+                className="p-1 rounded-lg hover:bg-bg-app text-text-muted hover:text-text-main transition-colors cursor-pointer"
+                aria-label="Cerrar personalizador"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Scrollable Content */}
+            <div className="p-6 overflow-y-auto flex flex-col gap-6">
+              
+              {/* Presets Grid */}
+              <div>
+                <h4 className="text-xs font-bold uppercase tracking-wider text-text-muted mb-3 font-display">
+                  Temas Predefinidos (10 Paletas Premium)
+                </h4>
+                <div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
+                  {PRESETS_THEMES.map((theme) => {
+                    const palette = isDark ? theme.dark : theme.light;
+                    const isSelected = selectedThemeId === theme.id;
+                    return (
+                      <button
+                        key={theme.id}
+                        onClick={() => setSelectedThemeId(theme.id)}
+                        className={`p-3 rounded-xl bg-bg-app border text-left flex flex-col gap-2 items-center justify-center transition-all duration-300 cursor-pointer ${
+                          isSelected
+                            ? 'border-accent ring-2 ring-accent/20 bg-accent/5'
+                            : 'border-border-app hover:border-border-app/80 hover:bg-bg-card'
+                        }`}
+                      >
+                        <span className="text-[10px] font-bold text-text-main truncate w-full text-center">
+                          {theme.name}
+                        </span>
+                        {/* Color preview circles */}
+                        <div className="flex gap-0.5 items-center justify-center">
+                          <div className="w-3.5 h-3.5 rounded-full border border-black/10" style={{ backgroundColor: palette.accent }} title="Acento" />
+                          <div className="w-2.5 h-2.5 rounded-full border border-black/10" style={{ backgroundColor: palette.success }} title="Éxito" />
+                          <div className="w-2.5 h-2.5 rounded-full border border-black/10" style={{ backgroundColor: palette.error }} title="Error" />
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Custom Theme Editor */}
+              <div className="border-t border-border-app/50 pt-5">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center gap-2">
+                    <Sparkles className="w-4 h-4 text-accent animate-pulse" />
+                    <h4 className="text-xs font-bold uppercase tracking-wider text-text-muted font-display">
+                      Creador de Tema Customizado (En Tiempo Real)
+                    </h4>
+                  </div>
+                  {selectedThemeId === 'custom' && (
+                    <button
+                      onClick={handleResetCustom}
+                      className="flex items-center gap-1 text-[10px] font-bold text-red-500 hover:text-red-600 transition-colors cursor-pointer"
+                    >
+                      <RotateCcw className="w-3.5 h-3.5" />
+                      <span>Reiniciar</span>
+                    </button>
+                  )}
+                </div>
+
+                <div className="bg-bg-app/40 rounded-2xl p-4 border border-border-app/40 grid grid-cols-1 sm:grid-cols-5 gap-4">
+                  {/* Accent Color */}
+                  <div className="flex flex-col items-center gap-2">
+                    <span className="text-[10px] font-bold text-text-muted font-mono">Acento</span>
+                    <label className="relative w-12 h-12 rounded-full border-2 border-border-app cursor-pointer overflow-hidden shadow-sm hover:scale-105 transition-transform flex items-center justify-center" style={{ backgroundColor: customColors.accent }}>
+                      <input 
+                        type="color" 
+                        value={customColors.accent} 
+                        onChange={(e) => handleCustomColorChange('accent', e.target.value)}
+                        className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
+                      />
+                      {selectedThemeId === 'custom' && <Check className="w-4 h-4 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" />}
+                    </label>
+                    <span className="text-[10px] font-mono font-medium text-text-main uppercase">{customColors.accent}</span>
+                  </div>
+
+                  {/* Success Color */}
+                  <div className="flex flex-col items-center gap-2">
+                    <span className="text-[10px] font-bold text-text-muted font-mono">Éxito</span>
+                    <label className="relative w-12 h-12 rounded-full border-2 border-border-app cursor-pointer overflow-hidden shadow-sm hover:scale-105 transition-transform flex items-center justify-center" style={{ backgroundColor: customColors.success }}>
+                      <input 
+                        type="color" 
+                        value={customColors.success} 
+                        onChange={(e) => handleCustomColorChange('success', e.target.value)}
+                        className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
+                      />
+                      {selectedThemeId === 'custom' && <Check className="w-4 h-4 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" />}
+                    </label>
+                    <span className="text-[10px] font-mono font-medium text-text-main uppercase">{customColors.success}</span>
+                  </div>
+
+                  {/* Warning Color */}
+                  <div className="flex flex-col items-center gap-2">
+                    <span className="text-[10px] font-bold text-text-muted font-mono">Advertencia</span>
+                    <label className="relative w-12 h-12 rounded-full border-2 border-border-app cursor-pointer overflow-hidden shadow-sm hover:scale-105 transition-transform flex items-center justify-center" style={{ backgroundColor: customColors.warning }}>
+                      <input 
+                        type="color" 
+                        value={customColors.warning} 
+                        onChange={(e) => handleCustomColorChange('warning', e.target.value)}
+                        className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
+                      />
+                      {selectedThemeId === 'custom' && <Check className="w-4 h-4 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" />}
+                    </label>
+                    <span className="text-[10px] font-mono font-medium text-text-main uppercase">{customColors.warning}</span>
+                  </div>
+
+                  {/* Error Color */}
+                  <div className="flex flex-col items-center gap-2">
+                    <span className="text-[10px] font-bold text-text-muted font-mono">Error</span>
+                    <label className="relative w-12 h-12 rounded-full border-2 border-border-app cursor-pointer overflow-hidden shadow-sm hover:scale-105 transition-transform flex items-center justify-center" style={{ backgroundColor: customColors.error }}>
+                      <input 
+                        type="color" 
+                        value={customColors.error} 
+                        onChange={(e) => handleCustomColorChange('error', e.target.value)}
+                        className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
+                      />
+                      {selectedThemeId === 'custom' && <Check className="w-4 h-4 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" />}
+                    </label>
+                    <span className="text-[10px] font-mono font-medium text-text-main uppercase">{customColors.error}</span>
+                  </div>
+
+                  {/* Info Color */}
+                  <div className="flex flex-col items-center gap-2">
+                    <span className="text-[10px] font-bold text-text-muted font-mono">Información</span>
+                    <label className="relative w-12 h-12 rounded-full border-2 border-border-app cursor-pointer overflow-hidden shadow-sm hover:scale-105 transition-transform flex items-center justify-center" style={{ backgroundColor: customColors.info }}>
+                      <input 
+                        type="color" 
+                        value={customColors.info} 
+                        onChange={(e) => handleCustomColorChange('info', e.target.value)}
+                        className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
+                      />
+                      {selectedThemeId === 'custom' && <Check className="w-4 h-4 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" />}
+                    </label>
+                    <span className="text-[10px] font-mono font-medium text-text-main uppercase">{customColors.info}</span>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+
+            {/* Footer */}
+            <div className="p-5 border-t border-border-app/50 bg-bg-app/20 flex justify-between gap-3">
+              <button
+                onClick={handleDownloadCSS}
+                className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-app bg-bg-card hover:border-accent text-xs font-semibold hover:text-accent transition-all cursor-pointer"
+              >
+                <Download className="w-4 h-4" />
+                <span>Descargar CSS del Tema</span>
+              </button>
+              
+              <button
+                onClick={onClose}
+                className="px-5 py-2.5 rounded-xl bg-accent hover:bg-accent-hover text-white text-xs font-bold transition-all cursor-pointer shadow-md"
+              >
+                Listo, aplicar
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+};