alexui 1.0.0

package/README.md

@@ -0,0 +1,57 @@
+# alexui CLI
+
+**AlexUI by Alexis Jardin** — instalá componentes glassmorphic en tu proyecto React (estilo shadcn: copiás el código fuente).
+
+## Requisitos
+
+- Node.js 18+
+- Proyecto React con Tailwind CSS v4
+
+## Instalación
+
+```bash
+npx alexui@latest init
+npx alexui@latest add dock
+```
+
+O global:
+
+```bash
+npm install -g alexui
+alexui tui
+```
+
+## Comandos
+
+| Comando | Descripción |
+|---------|-------------|
+| `alexui init` | Crea `alexui.json` y opcionalmente el CSS de tema |
+| `alexui add <id>` | Copia componente(s) y dependencias internas |
+| `alexui list` | Lista los 86 componentes del registry |
+| `alexui tui` | Modo interactivo con @clack/prompts |
+
+### Proyecto externo
+
+```bash
+alexui --cwd ../mi-app add loginform
+```
+
+## Configuración (`alexui.json`)
+
+```json
+{
+  "componentDir": "src/components/ui",
+  "tailwindCss": "src/index.css"
+}
+```
+
+## Catálogo y documentación
+
+- Sitio: [alexui.dev](https://alexui.dev) *(actualizar cuando esté en producción)*
+- Preview en vivo, docs y prompts IA por componente
+
+## Licencia
+
+MIT — © 2026 Alexis Jardin. Los componentes copiados a tu proyecto son tuyos para modificar.
+
+Templates Pro y licencias comerciales: ver sitio AlexUI Pro (próximamente).

package/components/ActionTable.tsx

@@ -0,0 +1,307 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { MoreHorizontal, ArrowUpDown, Edit2, Trash2, Eye } from 'lucide-react';
+import { Skeleton } from './Skeleton';
+import { TableControls } from './TableControls';
+import { TablePagination } from './TablePagination';
+
+export interface TableRowData {
+  id: string | number;
+  name: string;
+  email: string;
+  role: string;
+  status: 'Active' | 'Inactive' | 'Pending';
+  avatarUrl?: string;
+}
+
+export interface ActionTableProps {
+  data: TableRowData[];
+  onAction?: (action: string, row: TableRowData) => void;
+  className?: string;
+  isLoading?: boolean;
+  showControls?: boolean;
+  showPagination?: boolean;
+  itemsPerPage?: number;
+  disabled?: boolean;
+}
+
+export const ActionTable: React.FC<ActionTableProps> = ({
+  data,
+  onAction,
+  className = '',
+  isLoading = false,
+  showControls = true,
+  showPagination = true,
+  itemsPerPage = 4,
+  disabled = false
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('All');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [sortField, setSortField] = useState<keyof TableRowData | null>(null);
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [activeDropdownId, setActiveDropdownId] = useState<string | number | null>(null);
+
+  // Reset page when search or filter changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchTerm, statusFilter]);
+
+  // Sort handler
+  const handleSort = (field: keyof TableRowData) => {
+    let direction: 'asc' | 'desc' = 'asc';
+    if (sortField === field && sortDirection === 'asc') {
+      direction = 'desc';
+    }
+    setSortField(field);
+    setSortDirection(direction);
+  };
+
+  const toggleDropdown = (id: string | number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setActiveDropdownId((prev) => (prev === id ? null : id));
+  };
+
+  // Close dropdowns on body click
+  useEffect(() => {
+    const closeAll = () => setActiveDropdownId(null);
+    document.addEventListener('click', closeAll);
+    return () => document.removeEventListener('click', closeAll);
+  }, []);
+
+  // Filter and Sort Data
+  const processedData = useMemo(() => {
+    let result = [...data];
+
+    // 1. Search Filter
+    if (searchTerm) {
+      const query = searchTerm.toLowerCase();
+      result = result.filter(
+        (row) =>
+          row.name.toLowerCase().includes(query) ||
+          row.email.toLowerCase().includes(query) ||
+          row.role.toLowerCase().includes(query)
+      );
+    }
+
+    // 2. Status Filter
+    if (statusFilter !== 'All') {
+      result = result.filter((row) => row.status === statusFilter);
+    }
+
+    // 3. Sorting
+    if (sortField) {
+      result.sort((a, b) => {
+        const aVal = String(a[sortField] || '').toLowerCase();
+        const bVal = String(b[sortField] || '').toLowerCase();
+
+        if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
+        if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+
+    return result;
+  }, [data, searchTerm, statusFilter, sortField, sortDirection]);
+
+  // Paginate Data
+  const totalPages = Math.ceil(processedData.length / itemsPerPage);
+  const paginatedData = useMemo(() => {
+    if (!showPagination) return processedData;
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    return processedData.slice(startIndex, startIndex + itemsPerPage);
+  }, [processedData, currentPage, itemsPerPage, showPagination]);
+
+  // Animation constants
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: { staggerChildren: 0.04 }
+    }
+  };
+
+  const rowVariants = {
+    hidden: { opacity: 0, y: 8 },
+    show: { opacity: 1, y: 0 }
+  };
+
+  return (
+    <div className={`w-full flex flex-col gap-4 overflow-visible ${className}`}>
+      
+      {/* Search & Filter Controls */}
+      {showControls && (
+        <TableControls
+          searchTerm={searchTerm}
+          onSearchChange={setSearchTerm}
+          statusFilter={statusFilter}
+          onStatusFilterChange={setStatusFilter}
+          disabled={disabled || isLoading}
+        />
+      )}
+
+      {/* Main Table Container */}
+      <div className="w-full overflow-visible rounded-2xl glass border border-border-app bg-bg-card/90 shadow-md relative z-10">
+        <div className="w-full overflow-x-auto relative">
+          <table className="w-full border-collapse text-left text-sm text-text-muted">
+            <thead>
+              <tr className="border-b border-border-app/50 text-xs font-semibold uppercase tracking-wider text-text-muted bg-bg-app/30">
+                <th className="p-4 cursor-pointer select-none hover:text-text-main" onClick={() => handleSort('name')}>
+                  <span className="flex items-center gap-1.5">
+                    Nombre <ArrowUpDown className="w-3.5 h-3.5" />
+                  </span>
+                </th>
+                <th className="p-4">Email</th>
+                <th className="p-4 cursor-pointer select-none hover:text-text-main" onClick={() => handleSort('role')}>
+                  <span className="flex items-center gap-1.5">
+                    Rol <ArrowUpDown className="w-3.5 h-3.5" />
+                  </span>
+                </th>
+                <th className="p-4 cursor-pointer select-none hover:text-text-main" onClick={() => handleSort('status')}>
+                  <span className="flex items-center gap-1.5">
+                    Estado <ArrowUpDown className="w-3.5 h-3.5" />
+                  </span>
+                </th>
+                <th className="p-4 text-right">Acciones</th>
+              </tr>
+            </thead>
+
+            {/* Staggered Rows */}
+            <motion.tbody
+              key={`${currentPage}-${statusFilter}-${searchTerm}`}
+              variants={containerVariants}
+              initial="hidden"
+              animate="show"
+              className="divide-y divide-border-app/30 overflow-visible"
+            >
+              {isLoading ? (
+                Array(itemsPerPage).fill(0).map((_, idx) => (
+                  <tr key={idx} className="border-b border-border-app/30 bg-bg-card/10">
+                    <td className="p-4 flex items-center gap-3">
+                      <Skeleton variant="circle" className="w-10 h-10 flex-shrink-0" />
+                      <Skeleton variant="text" className="w-24 h-4" />
+                    </td>
+                    <td className="p-4">
+                      <Skeleton variant="text" className="w-32 h-3" />
+                    </td>
+                    <td className="p-4">
+                      <Skeleton variant="text" className="w-20 h-4" />
+                    </td>
+                    <td className="p-4">
+                      <Skeleton variant="text" className="w-16 h-5 rounded-full" />
+                    </td>
+                    <td className="p-4 text-right">
+                      <Skeleton variant="circle" className="w-6 h-6 inline-block" />
+                    </td>
+                  </tr>
+                ))
+              ) : paginatedData.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="p-8 text-center text-xs font-bold text-text-muted italic">
+                    No se encontraron registros que coincidan con la búsqueda
+                  </td>
+                </tr>
+              ) : (
+                paginatedData.map((row) => (
+                  <motion.tr
+                    key={row.id}
+                    variants={rowVariants}
+                    className="hover:bg-bg-app hover:text-text-main transition-colors duration-200 group relative overflow-visible"
+                  >
+                    {/* Name & larger avatar preview */}
+                    <td className="p-4 font-bold text-text-main flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-full border border-border-app/40 overflow-hidden bg-accent/10 flex-shrink-0 flex items-center justify-center shadow-xs">
+                        {row.avatarUrl ? (
+                          <img src={row.avatarUrl} alt={row.name} className="w-full h-full object-cover" />
+                        ) : (
+                          <span className="text-xs font-bold text-accent">
+                            {row.name.charAt(0)}
+                          </span>
+                        )}
+                      </div>
+                      <span>{row.name}</span>
+                    </td>
+
+                    <td className="p-4 font-mono text-xs">{row.email}</td>
+                    <td className="p-4 text-xs font-semibold">{row.role}</td>
+                    
+                    {/* Status indicator badges */}
+                    <td className="p-4">
+                      <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-semibold ${
+                        row.status === 'Active' 
+                          ? 'bg-emerald-500/10 text-emerald-600 border border-emerald-500/20'
+                          : row.status === 'Inactive'
+                          ? 'bg-red-500/10 text-red-600 border border-red-500/20'
+                          : 'bg-amber-500/10 text-amber-600 border border-amber-500/20'
+                      }`}>
+                        <span className={`w-1.5 h-1.5 rounded-full ${
+                          row.status === 'Active' ? 'bg-emerald-500' : row.status === 'Inactive' ? 'bg-red-500' : 'bg-amber-500'
+                        }`} />
+                        {row.status}
+                      </span>
+                    </td>
+
+                    {/* Dropdown Action button */}
+                    <td className="p-4 text-right relative overflow-visible">
+                      <button
+                        onClick={(e) => toggleDropdown(row.id, e)}
+                        className="p-1 rounded-lg hover:bg-bg-app border border-transparent hover:border-border-app transition-colors text-text-muted hover:text-text-main cursor-pointer"
+                      >
+                        <MoreHorizontal className="w-4 h-4" />
+                      </button>
+
+                      {/* Actions Dropdown */}
+                      <AnimatePresence>
+                        {activeDropdownId === row.id && (
+                          <motion.div
+                            initial={{ opacity: 0, scale: 0.9, y: 5 }}
+                            animate={{ opacity: 1, scale: 1, y: 0 }}
+                            exit={{ opacity: 0, scale: 0.9, y: 5, transition: { duration: 0.1 } }}
+                            className="absolute right-4 mt-2 w-36 glass bg-bg-card rounded-xl border border-border-app shadow-2xl p-1 z-50 text-left"
+                          >
+                            <button
+                              onClick={() => onAction && onAction('view', row)}
+                              className="w-full px-3 py-2 text-xs font-bold text-text-main hover:bg-accent/10 hover:text-accent rounded-lg flex items-center gap-2 cursor-pointer transition-colors duration-150"
+                            >
+                              <Eye className="w-3.5 h-3.5 text-accent" />
+                              <span>Ver Detalles</span>
+                            </button>
+                            <button
+                              onClick={() => onAction && onAction('edit', row)}
+                              className="w-full px-3 py-2 text-xs font-bold text-text-main hover:bg-accent/10 hover:text-accent rounded-lg flex items-center gap-2 cursor-pointer transition-colors duration-150"
+                            >
+                              <Edit2 className="w-3.5 h-3.5 text-warning" />
+                              <span>Editar</span>
+                            </button>
+                            <div className="h-[1px] bg-border-app/50 my-1" />
+                            <button
+                              onClick={() => onAction && onAction('delete', row)}
+                              className="w-full px-3 py-2 text-xs font-bold text-red-500 hover:bg-red-500/10 hover:text-red-500 rounded-lg flex items-center gap-2 cursor-pointer transition-colors duration-150"
+                            >
+                              <Trash2 className="w-3.5 h-3.5" />
+                              <span>Eliminar</span>
+                            </button>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </td>
+                  </motion.tr>
+                ))
+              )}
+            </motion.tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Pagination Controls */}
+      {showPagination && (
+        <TablePagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+        />
+      )}
+
+    </div>
+  );
+};

package/components/AlertBanner.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { AlertCircle, CheckCircle, Info, AlertTriangle, X } from 'lucide-react';
+
+export type AlertVariant = 'success' | 'info' | 'warning' | 'danger';
+
+export interface AlertBannerProps {
+  title?: string;
+  children: React.ReactNode;
+  variant?: AlertVariant;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+const variantConfig: Record<AlertVariant, { bg: string; border: string; text: string; icon: React.ReactNode }> = {
+  success: {
+    bg: 'bg-green-500/10',
+    border: 'border-green-500/25',
+    text: 'text-green-600 dark:text-green-400',
+    icon: <CheckCircle className="w-5 h-5" />
+  },
+  info: {
+    bg: 'bg-blue-500/10',
+    border: 'border-blue-500/25',
+    text: 'text-blue-600 dark:text-blue-400',
+    icon: <Info className="w-5 h-5" />
+  },
+  warning: {
+    bg: 'bg-yellow-500/10',
+    border: 'border-yellow-500/25',
+    text: 'text-yellow-600 dark:text-yellow-400',
+    icon: <AlertTriangle className="w-5 h-5" />
+  },
+  danger: {
+    bg: 'bg-red-500/10',
+    border: 'border-red-500/25',
+    text: 'text-red-600 dark:text-red-400',
+    icon: <AlertCircle className="w-5 h-5" />
+  }
+};
+
+export const AlertBanner: React.FC<AlertBannerProps> = ({
+  title,
+  children,
+  variant = 'info',
+  dismissible = false,
+  onDismiss,
+  icon,
+  className = ''
+}) => {
+  const config = variantConfig[variant];
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -8, scale: 0.98 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: -8, scale: 0.98 }}
+      transition={{ type: 'spring' as const, stiffness: 350, damping: 26 }}
+      className={`relative flex gap-3 p-4 rounded-2xl border backdrop-blur-sm ${config.bg} ${config.border} ${className}`}
+      role="alert"
+    >
+      <div className={`flex-shrink-0 mt-0.5 ${config.text}`}>
+        {icon || config.icon}
+      </div>
+
+      <div className="flex-1 min-w-0">
+        {title && (
+          <h4 className={`font-extrabold text-sm mb-1 font-display ${config.text}`}>
+            {title}
+          </h4>
+        )}
+        <div className="text-sm text-text-main leading-relaxed">
+          {children}
+        </div>
+      </div>
+
+      {dismissible && onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="flex-shrink-0 p-1 rounded-lg text-text-muted hover:text-text-main hover:bg-bg-app/60 transition-colors cursor-pointer"
+          aria-label="Cerrar alerta"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </motion.div>
+  );
+};
+
+export interface AlertStackProps {
+  alerts: Array<{
+    id: string;
+    title?: string;
+    message: string;
+    variant?: AlertVariant;
+  }>;
+  onDismiss?: (id: string) => void;
+  className?: string;
+}
+
+export const AlertStack: React.FC<AlertStackProps> = ({
+  alerts,
+  onDismiss,
+  className = ''
+}) => (
+  <div className={`flex flex-col gap-3 w-full ${className}`}>
+    <AnimatePresence mode="popLayout">
+      {alerts.map((alert) => (
+        <AlertBanner
+          key={alert.id}
+          title={alert.title}
+          variant={alert.variant}
+          dismissible={!!onDismiss}
+          onDismiss={() => onDismiss?.(alert.id)}
+        >
+          {alert.message}
+        </AlertBanner>
+      ))}
+    </AnimatePresence>
+  </div>
+);

package/components/AnimatedAccordion.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronDown } from 'lucide-react';
+
+export interface AccordionItem {
+  id: string | number;
+  title: string;
+  content: React.ReactNode;
+}
+
+export interface AnimatedAccordionProps {
+  items: AccordionItem[];
+  allowMultiple?: boolean;
+  className?: string;
+}
+
+export const AnimatedAccordion: React.FC<AnimatedAccordionProps> = ({
+  items,
+  allowMultiple = false,
+  className = ''
+}) => {
+  const [openIds, setOpenIds] = useState<Set<string | number>>(new Set());
+
+  const handleToggle = (id: string | number) => {
+    const nextOpen = new Set(openIds);
+    if (nextOpen.has(id)) {
+      nextOpen.delete(id);
+    } else {
+      if (!allowMultiple) {
+        nextOpen.clear();
+      }
+      nextOpen.add(id);
+    }
+    setOpenIds(nextOpen);
+  };
+
+  return (
+    <div className={`flex flex-col gap-3 w-full ${className}`}>
+      {items.map((item) => {
+        const isOpen = openIds.has(item.id);
+        return (
+          <div
+            key={item.id}
+            className="border border-border-app rounded-2xl overflow-hidden bg-bg-card transition-all duration-300 shadow-sm"
+          >
+            {/* Accordion Header */}
+            <button
+              onClick={() => handleToggle(item.id)}
+              className="w-full flex items-center justify-between p-5 text-left font-bold text-text-main hover:bg-bg-app/50 transition-colors duration-200 cursor-pointer"
+            >
+              <span>{item.title}</span>
+              <motion.div
+                animate={{ rotate: isOpen ? 180 : 0 }}
+                transition={{ duration: 0.2 }}
+                className="text-text-muted"
+              >
+                <ChevronDown className="w-5 h-5" />
+              </motion.div>
+            </button>
+
+            {/* Accordion Content wrapper */}
+            <AnimatePresence initial={false}>
+              {isOpen && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ 
+                    height: 'auto', 
+                    opacity: 1,
+                    transition: {
+                      height: { type: 'spring', stiffness: 300, damping: 25 },
+                      opacity: { duration: 0.2, delay: 0.05 }
+                    } 
+                  }}
+                  exit={{ 
+                    height: 0, 
+                    opacity: 0,
+                    transition: {
+                      height: { type: 'spring', stiffness: 300, damping: 25 },
+                      opacity: { duration: 0.15 }
+                    }
+                  }}
+                  className="overflow-hidden"
+                >
+                  <div className="p-5 pt-0 text-sm text-text-muted border-t border-border-app/50 leading-relaxed">
+                    {item.content}
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        );
+      })}
+    </div>
+  );
+};