alexui 1.0.0

package/components/CommandMenu.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Search, Command } from 'lucide-react';
+
+export interface CommandItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  group?: string;
+}
+
+export interface CommandMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+  commands: CommandItem[];
+  onSelect: (id: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export const CommandMenu: React.FC<CommandMenuProps> = ({
+  isOpen,
+  onClose,
+  commands,
+  onSelect,
+  placeholder = "Escribe un comando o busca...",
+  disabled = false
+}) => {
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  
+  // Filter commands based on query
+  const filteredCommands = commands.filter(cmd => 
+    cmd.label.toLowerCase().includes(query.toLowerCase()) || 
+    (cmd.group && cmd.group.toLowerCase().includes(query.toLowerCase()))
+  );
+
+  // Groups for rendering
+  const groups = Array.from(new Set(filteredCommands.map(c => c.group || 'General')));
+
+  // Reset state when opened
+  useEffect(() => {
+    if (isOpen) {
+      setQuery('');
+      setActiveIndex(0);
+      // Small delay to allow animation to start before focusing
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [isOpen]);
+
+  // Handle Keyboard Navigation
+  useEffect(() => {
+    if (!isOpen || disabled) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveIndex(prev => (prev < filteredCommands.length - 1 ? prev + 1 : prev));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveIndex(prev => (prev > 0 ? prev - 1 : prev));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (filteredCommands[activeIndex]) {
+          onSelect(filteredCommands[activeIndex].id);
+          onClose();
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, filteredCommands, activeIndex, onSelect, onClose, disabled]);
+
+  // Global Ctrl+K / Cmd+K listener to open (handled by parent usually, but we can prevent default here just in case)
+  // Actually, parent should handle it.
+
+  if (disabled) return null;
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh]">
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-0 bg-black/40 backdrop-blur-sm"
+            onClick={onClose}
+          />
+
+          {/* Modal */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: -20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: -20 }}
+            transition={{ duration: 0.2, ease: "easeOut" }}
+            className="relative w-full max-w-xl bg-bg-card/90 backdrop-blur-xl border border-border-app rounded-2xl shadow-2xl overflow-hidden flex flex-col"
+          >
+            {/* Header / Input */}
+            <div className="flex items-center px-4 py-3 border-b border-border-app gap-3">
+              <Search className="w-5 h-5 text-text-muted" />
+              <input
+                ref={inputRef}
+                type="text"
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value);
+                  setActiveIndex(0);
+                }}
+                placeholder={placeholder}
+                className="flex-1 bg-transparent border-none outline-none text-text-main placeholder:text-text-muted/50 font-medium text-lg"
+              />
+              <div className="flex items-center gap-1 text-[10px] text-text-muted font-bold bg-bg-app px-2 py-1 rounded-md border border-border-app">
+                <Command className="w-3 h-3" />
+                <span>K</span>
+              </div>
+            </div>
+
+            {/* List */}
+            <div className="max-h-[60vh] overflow-y-auto p-2 scrollbar-thin">
+              {filteredCommands.length === 0 ? (
+                <div className="py-8 text-center text-text-muted text-sm">
+                  No se encontraron resultados para "{query}"
+                </div>
+              ) : (
+                groups.map(group => {
+                  const groupCommands = filteredCommands.filter(c => (c.group || 'General') === group);
+                  if (groupCommands.length === 0) return null;
+
+                  return (
+                    <div key={group} className="mb-2 last:mb-0">
+                      <div className="px-3 py-2 text-xs font-bold text-text-muted uppercase tracking-wider">
+                        {group}
+                      </div>
+                      <div className="flex flex-col gap-1">
+                        {groupCommands.map((cmd) => {
+                          const globalIndex = filteredCommands.findIndex(c => c.id === cmd.id);
+                          const isActive = globalIndex === activeIndex;
+
+                          return (
+                            <div
+                              key={cmd.id}
+                              onMouseEnter={() => setActiveIndex(globalIndex)}
+                              onClick={() => {
+                                onSelect(cmd.id);
+                                onClose();
+                              }}
+                              className={`flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer transition-colors duration-150 ${
+                                isActive 
+                                  ? 'bg-accent/10 text-accent' 
+                                  : 'text-text-main hover:bg-bg-app'
+                              }`}
+                            >
+                              <div className={`flex items-center justify-center w-8 h-8 rounded-lg ${isActive ? 'bg-accent/20' : 'bg-bg-app border border-border-app'}`}>
+                                {cmd.icon ? cmd.icon : <Command className="w-4 h-4" />}
+                              </div>
+                              <span className="font-medium text-sm flex-1">{cmd.label}</span>
+                              {isActive && (
+                                <span className="text-[10px] uppercase font-bold text-accent">Enter ↵</span>
+                              )}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  );
+                })
+              )}
+            </div>
+            
+            {/* Footer */}
+            <div className="px-4 py-2 border-t border-border-app bg-bg-app/50 flex items-center justify-between text-[10px] text-text-muted">
+              <div className="flex gap-4">
+                <span className="flex items-center gap-1">↑↓ Navegar</span>
+                <span className="flex items-center gap-1">↵ Seleccionar</span>
+                <span className="flex items-center gap-1">Esc Cerrar</span>
+              </div>
+              <span className="font-mono opacity-50">AlexUI</span>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};

package/components/ConfirmDialog.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { AlertTriangle, Info, Trash2, X } from 'lucide-react';
+
+export type ConfirmVariant = 'danger' | 'warning' | 'info';
+
+export interface ConfirmDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: React.ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: ConfirmVariant;
+  loading?: boolean;
+  className?: string;
+}
+
+const variantConfig: Record<ConfirmVariant, { icon: React.ReactNode; accent: string; button: string }> = {
+  danger: {
+    icon: <Trash2 className="w-6 h-6" />,
+    accent: 'text-red-500 bg-red-500/10 border-red-500/25',
+    button: 'bg-red-500 hover:bg-red-600 text-white border-red-500/30'
+  },
+  warning: {
+    icon: <AlertTriangle className="w-6 h-6" />,
+    accent: 'text-yellow-500 bg-yellow-500/10 border-yellow-500/25',
+    button: 'bg-yellow-500 hover:bg-yellow-600 text-white border-yellow-500/30'
+  },
+  info: {
+    icon: <Info className="w-6 h-6" />,
+    accent: 'text-accent bg-accent/10 border-accent/25',
+    button: 'bg-accent hover:bg-accent-hover text-white border-accent/30'
+  }
+};
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel = 'Confirmar',
+  cancelLabel = 'Cancelar',
+  variant = 'danger',
+  loading = false,
+  className = ''
+}) => {
+  const config = variantConfig[variant];
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) 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-[110] flex items-center justify-center p-4">
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/40 backdrop-blur-md"
+            onClick={onClose}
+          />
+
+          <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 z-10 w-full max-w-md rounded-2xl glass bg-bg-card/90 shadow-2xl border border-border-app p-6 flex flex-col gap-5 ${className}`}
+            role="alertdialog"
+            aria-modal="true"
+          >
+            <button
+              type="button"
+              onClick={onClose}
+              className="absolute top-4 right-4 p-1.5 rounded-lg text-text-muted hover:text-text-main hover:bg-bg-app transition-colors cursor-pointer"
+              aria-label="Cerrar"
+            >
+              <X className="w-4 h-4" />
+            </button>
+
+            <div className="flex items-start gap-4">
+              <div className={`p-3 rounded-xl border flex-shrink-0 ${config.accent}`}>
+                {config.icon}
+              </div>
+              <div className="flex flex-col gap-2 pr-6">
+                <h3 className="font-extrabold text-lg text-text-main font-display leading-tight">
+                  {title}
+                </h3>
+                <div className="text-sm text-text-muted leading-relaxed">
+                  {message}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end gap-3 pt-2 border-t border-border-app/50">
+              <button
+                type="button"
+                onClick={onClose}
+                disabled={loading}
+                className="px-4 py-2 rounded-xl text-sm font-bold text-text-muted hover:text-text-main hover:bg-bg-app border border-border-app transition-colors cursor-pointer disabled:opacity-50"
+              >
+                {cancelLabel}
+              </button>
+              <button
+                type="button"
+                onClick={onConfirm}
+                disabled={loading}
+                className={`px-5 py-2 rounded-xl text-sm font-bold border transition-colors cursor-pointer disabled:opacity-50 ${config.button}`}
+              >
+                {loading ? 'Procesando...' : confirmLabel}
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+};

package/components/ContextMenu.tsx

@@ -0,0 +1,192 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+
+export interface ContextMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  danger?: boolean;
+  disabled?: boolean;
+  divider?: boolean;
+  subItems?: ContextMenuItem[];
+}
+
+export interface ContextMenuProps {
+  children: React.ReactNode;
+  items: ContextMenuItem[];
+  onAction: (id: string) => void;
+  disabled?: boolean;
+}
+
+export const ContextMenu: React.FC<ContextMenuProps> = ({
+  children,
+  items,
+  onAction,
+  disabled = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
+  const [mounted, setMounted] = useState(false);
+  
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    
+    // Calculate position to prevent overflowing screen
+    const x = e.clientX;
+    const y = e.clientY;
+    
+    setPosition({ x, y });
+    setIsOpen(true);
+    setActiveSubMenu(null);
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false);
+    };
+
+    // Close on scroll or resize
+    const handleScrollOrResize = () => setIsOpen(false);
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    window.addEventListener('scroll', handleScrollOrResize, { capture: true });
+    window.addEventListener('resize', handleScrollOrResize);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+      window.removeEventListener('scroll', handleScrollOrResize, { capture: true });
+      window.removeEventListener('resize', handleScrollOrResize);
+    };
+  }, [isOpen]);
+
+  // Adjust position if it overflows the viewport
+  useEffect(() => {
+    if (isOpen && menuRef.current) {
+      const rect = menuRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let newX = position.x;
+      let newY = position.y;
+
+      if (position.x + rect.width > viewportWidth) {
+        newX = viewportWidth - rect.width - 10;
+      }
+      if (position.y + rect.height > viewportHeight) {
+        newY = viewportHeight - rect.height - 10;
+      }
+
+      if (newX !== position.x || newY !== position.y) {
+        setPosition({ x: newX, y: newY });
+      }
+    }
+  }, [isOpen, position]);
+
+  const renderItems = (itemsList: ContextMenuItem[]) => {
+    return itemsList.map((item, idx) => {
+      if (item.divider) {
+        return <div key={`div-${idx}`} className="my-1 h-px bg-border-app/50 w-full" />;
+      }
+
+      const hasSubItems = item.subItems && item.subItems.length > 0;
+      const isSubOpen = activeSubMenu === item.id;
+
+      return (
+        <div 
+          key={item.id}
+          className="relative"
+          onMouseEnter={() => hasSubItems && setActiveSubMenu(item.id)}
+          onMouseLeave={() => hasSubItems && setActiveSubMenu(null)}
+        >
+          <button
+            disabled={item.disabled}
+            onClick={(e) => {
+              if (hasSubItems) return;
+              e.stopPropagation();
+              onAction(item.id);
+              setIsOpen(false);
+            }}
+            className={`w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg transition-colors ${
+              item.disabled 
+                ? 'opacity-50 cursor-not-allowed text-text-muted'
+                : item.danger
+                  ? 'text-red-400 hover:bg-red-400/10'
+                  : 'text-text-main hover:bg-accent/10 hover:text-accent'
+            } ${isSubOpen && !item.disabled ? 'bg-bg-app' : ''}`}
+          >
+            <div className="flex items-center gap-2">
+              {item.icon && <span className="w-4 h-4 flex items-center justify-center opacity-70">{item.icon}</span>}
+              <span>{item.label}</span>
+            </div>
+            {item.shortcut && (
+              <span className="text-[10px] text-text-muted font-mono tracking-widest opacity-60">
+                {item.shortcut}
+              </span>
+            )}
+            {hasSubItems && <ChevronRight className="w-4 h-4 opacity-50" />}
+          </button>
+
+          {/* Submenu rendering */}
+          {hasSubItems && isSubOpen && !item.disabled && (
+            <div className="absolute top-0 left-[calc(100%+4px)] min-w-[180px] p-1.5 glass bg-bg-card/95 border border-border-app rounded-xl shadow-xl z-50 animate-in fade-in zoom-in-95 duration-100">
+              {renderItems(item.subItems!)}
+            </div>
+          )}
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div className="relative inline-block w-full h-full" onContextMenu={handleContextMenu}>
+      {children}
+
+      {/* We use standard relative/absolute portals, but since this is inline, we use fixed position overlay for the menu */}
+      {mounted && createPortal(
+        <AnimatePresence>
+          {isOpen && !disabled && (
+            <div className="fixed inset-0 z-[999] pointer-events-none">
+            <motion.div
+              ref={menuRef}
+              initial={{ opacity: 0, scale: 0.95, filter: 'blur(4px)' }}
+              animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
+              exit={{ opacity: 0, scale: 0.95, filter: 'blur(4px)' }}
+              transition={{ duration: 0.15, ease: "easeOut" }}
+              className="absolute min-w-[220px] p-1.5 glass bg-bg-card/90 backdrop-blur-2xl border border-border-app shadow-[0_10px_40px_-10px_rgba(0,0,0,0.5)] rounded-xl pointer-events-auto flex flex-col"
+              style={{
+                left: `${position.x}px`,
+                top: `${position.y}px`,
+              }}
+            >
+              {renderItems(items)}
+            </motion.div>
+            </div>
+          )}
+        </AnimatePresence>,
+        document.body
+      )}
+    </div>
+  );
+};

package/components/DashboardLayout.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Users, Download, Layers, TrendingUp } from 'lucide-react';
+import { GlassCard } from './GlassCard';
+import { ChartShowcase } from './ChartShowcase';
+import { ActionTable, type TableRowData } from './ActionTable';
+import { Badge } from './Badge';
+import { Skeleton } from './Skeleton';
+
+export interface DashboardStat {
+  id: string;
+  label: string;
+  value: string;
+  change?: string;
+  icon?: React.ReactNode;
+}
+
+export interface DashboardLayoutProps {
+  title?: string;
+  subtitle?: string;
+  stats?: DashboardStat[];
+  tableData?: TableRowData[];
+  onTableAction?: (action: string, row: TableRowData) => void;
+  isLoading?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+const DEFAULT_STATS: DashboardStat[] = [
+  { id: 'users', label: 'Usuarios activos', value: '2.4k', change: '+12%', icon: <Users className="w-4 h-4" /> },
+  { id: 'downloads', label: 'Descargas CLI', value: '18.2k', change: '+8%', icon: <Download className="w-4 h-4" /> },
+  { id: 'components', label: 'Componentes', value: '86', change: 'V3.5', icon: <Layers className="w-4 h-4" /> },
+  { id: 'growth', label: 'Crecimiento', value: '34%', change: '+4%', icon: <TrendingUp className="w-4 h-4" /> },
+];
+
+const DEFAULT_TABLE: TableRowData[] = [
+  { id: 1, name: 'Alexis Jardin', email: 'alex@alexui.dev', role: 'Admin', status: 'Active' },
+  { id: 2, name: 'Sofía López', email: 'sofia@alexui.dev', role: 'Editor', status: 'Active' },
+  { id: 3, name: 'Mateo Díaz', email: 'mateo@alexui.dev', role: 'Viewer', status: 'Pending' },
+  { id: 4, name: 'Lucía Vega', email: 'lucia@alexui.dev', role: 'Editor', status: 'Inactive' },
+];
+
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
+  title = 'Panel de control',
+  subtitle = 'Resumen de actividad y métricas del catálogo',
+  stats = DEFAULT_STATS,
+  tableData = DEFAULT_TABLE,
+  onTableAction,
+  isLoading = false,
+  disabled = false,
+  className = ''
+}) => {
+  if (isLoading) {
+    return (
+      <div className={`w-full flex flex-col gap-4 ${className}`}>
+        <Skeleton variant="text" className="w-48 h-6" />
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} variant="rect" className="h-24 rounded-2xl" />
+          ))}
+        </div>
+        <Skeleton variant="rect" className="h-48 rounded-2xl" />
+        <Skeleton variant="rect" className="h-40 rounded-2xl" />
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      className={`w-full flex flex-col gap-5 ${className}`}
+    >
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-extrabold text-text-main font-display">{title}</h2>
+        <p className="text-xs text-text-muted">{subtitle}</p>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+        {stats.map((stat, index) => (
+          <motion.div
+            key={stat.id}
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.05 }}
+          >
+            <GlassCard padding="sm" hoverable className="h-full">
+              <div className="flex items-start justify-between gap-2">
+                <div className="p-2 rounded-xl bg-accent/10 text-accent">
+                  {stat.icon}
+                </div>
+                {stat.change && (
+                  <Badge variant="success" size="sm">{stat.change}</Badge>
+                )}
+              </div>
+              <p className="text-xl font-extrabold text-text-main font-display mt-3">{stat.value}</p>
+              <p className="text-[10px] text-text-muted font-medium mt-0.5">{stat.label}</p>
+            </GlassCard>
+          </motion.div>
+        ))}
+      </div>
+
+      <ChartShowcase type="bar" className="!p-4" />
+
+      <ActionTable
+        data={tableData}
+        onAction={onTableAction}
+        showPagination={false}
+        itemsPerPage={4}
+        disabled={disabled}
+      />
+    </motion.div>
+  );
+};