alexui 1.0.0

package/components/DropdownPlus.tsx

@@ -0,0 +1,304 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronDown, Search, X, Check } from 'lucide-react';
+
+export interface DropdownPlusOption {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface DropdownPlusGroup {
+  label: string;
+  options: DropdownPlusOption[];
+}
+
+export interface DropdownPlusProps {
+  options: (DropdownPlusOption | DropdownPlusGroup)[];
+  value: string | string[]; // string for single, string[] for multi
+  onChange: (value: any) => void;
+  label?: string;
+  isMulti?: boolean;
+  showSearch?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export const DropdownPlus: React.FC<DropdownPlusProps> = ({
+  options,
+  value,
+  onChange,
+  label,
+  isMulti = false,
+  showSearch = true,
+  disabled = false,
+  placeholder = 'Selecciona una opción...',
+  className = ''
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Normalize selected values to array
+  const selectedValues = useMemo((): string[] => {
+    if (isMulti) {
+      return Array.isArray(value) ? value : [];
+    }
+    return typeof value === 'string' && value ? [value] : [];
+  }, [value, isMulti]);
+
+  // Close dropdown on click outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Reset search when opening/closing
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchTerm('');
+    }
+  }, [isOpen]);
+
+  // Extract flat list of all options to map values to labels
+  const allFlatOptions = useMemo((): DropdownPlusOption[] => {
+    const flat: DropdownPlusOption[] = [];
+    options.forEach((opt) => {
+      if ('options' in opt) {
+        flat.push(...opt.options);
+      } else {
+        flat.push(opt);
+      }
+    });
+    return flat;
+  }, [options]);
+
+  const selectedOptions = useMemo(() => {
+    return allFlatOptions.filter((opt) => selectedValues.includes(opt.value));
+  }, [allFlatOptions, selectedValues]);
+
+  // Filter options based on search query
+  const filteredOptions = useMemo(() => {
+    if (!searchTerm) return options;
+
+    const query = searchTerm.toLowerCase();
+    return options.map((opt) => {
+      if ('options' in opt) {
+        const matchingSubOptions = opt.options.filter((sub) =>
+          sub.label.toLowerCase().includes(query)
+        );
+        if (matchingSubOptions.length > 0) {
+          return { ...opt, options: matchingSubOptions };
+        }
+        return null;
+      } else {
+        return opt.label.toLowerCase().includes(query) ? opt : null;
+      }
+    }).filter(Boolean) as (DropdownPlusOption | DropdownPlusGroup)[];
+  }, [options, searchTerm]);
+
+  const handleOptionClick = (optionVal: string) => {
+    if (isMulti) {
+      if (selectedValues.includes(optionVal)) {
+        onChange(selectedValues.filter((v) => v !== optionVal));
+      } else {
+        onChange([...selectedValues, optionVal]);
+      }
+    } else {
+      onChange(optionVal);
+      setIsOpen(false);
+    }
+  };
+
+  const removeValue = (e: React.MouseEvent, optionVal: string) => {
+    e.stopPropagation();
+    if (disabled) return;
+    onChange(selectedValues.filter((v) => v !== optionVal));
+  };
+
+  return (
+    <div ref={containerRef} className={`relative w-full flex flex-col gap-1.5 ${className}`}>
+      {label && (
+        <span className="text-xs font-bold text-text-muted uppercase tracking-wider px-1">
+          {label}
+        </span>
+      )}
+
+      {/* Dropdown Box wrapper */}
+      <div className="relative rounded-xl overflow-visible transition-all duration-300">
+        
+        {/* Glow border ring */}
+        <motion.div
+          animate={{
+            opacity: isOpen ? 1 : 0,
+            scale: isOpen ? 1 : 0.98,
+          }}
+          transition={{ duration: 0.25 }}
+          className="absolute -inset-[1px] bg-gradient-to-r from-accent to-pink-500 rounded-xl pointer-events-none z-0 blur-[1px]"
+        />
+
+        {/* Selected Trigger Button */}
+        <div
+          onClick={() => !disabled && setIsOpen(!isOpen)}
+          className={`w-full relative bg-bg-card/60 border rounded-xl z-10 p-3 min-h-[48px] flex items-center justify-between gap-3 transition-colors duration-300 select-none ${
+            isOpen ? 'border-transparent' : 'border-border-app'
+          } ${disabled ? 'opacity-40 cursor-not-allowed bg-bg-app/10' : 'cursor-pointer'}`}
+          style={{
+            boxShadow: isOpen && !disabled
+              ? '0 0 10px var(--color-accent-glow)'
+              : 'none'
+          }}
+        >
+          {/* Selected values display */}
+          <div className="flex-1 flex flex-wrap gap-1.5 items-center">
+            {selectedOptions.length === 0 ? (
+              <span className="text-sm text-text-muted/60 pl-1">{placeholder}</span>
+            ) : isMulti ? (
+              selectedOptions.map((opt) => (
+                <div
+                  key={opt.value}
+                  className="flex items-center gap-1.5 bg-accent/10 border border-accent/20 px-2 py-0.5 rounded-lg text-xs font-bold text-accent"
+                >
+                  {opt.icon && <span className="flex-shrink-0">{opt.icon}</span>}
+                  <span>{opt.label}</span>
+                  <button
+                    type="button"
+                    onClick={(e) => removeValue(e, opt.value)}
+                    disabled={disabled}
+                    className="p-0.5 rounded-md hover:bg-accent/20 text-accent transition-colors cursor-pointer"
+                  >
+                    <X className="w-2.5 h-2.5" />
+                  </button>
+                </div>
+              ))
+            ) : (
+              <div className="flex items-center gap-2 text-sm text-text-main pl-1 font-medium">
+                {selectedOptions[0].icon && <span className="flex-shrink-0">{selectedOptions[0].icon}</span>}
+                <span>{selectedOptions[0].label}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Chevron down arrow */}
+          <motion.div
+            animate={{ rotate: isOpen ? 180 : 0 }}
+            className="text-text-muted pr-1"
+          >
+            <ChevronDown className="w-4 h-4" />
+          </motion.div>
+        </div>
+
+        {/* Dropdown Options Box list */}
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              initial={{ opacity: 0, y: 10, scale: 0.95 }}
+              animate={{ opacity: 1, y: 4, scale: 1 }}
+              exit={{ opacity: 0, y: 10, scale: 0.95 }}
+              transition={{ type: 'spring', stiffness: 350, damping: 25 }}
+              className="absolute left-0 w-full glass bg-bg-card rounded-xl shadow-2xl p-2 z-50 border border-border-app/50 flex flex-col gap-2 max-h-72 overflow-visible"
+            >
+              {/* Optional Search field */}
+              {showSearch && (
+                <div className="relative flex items-center bg-bg-app/40 border border-border-app/40 rounded-lg overflow-hidden px-2.5 py-1.5">
+                  <Search className="w-3.5 h-3.5 text-text-muted/60 mr-2" />
+                  <input
+                    type="text"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    placeholder="Buscar..."
+                    className="w-full bg-transparent text-xs text-text-main focus:outline-hidden"
+                  />
+                  {searchTerm && (
+                    <button 
+                      onClick={() => setSearchTerm('')}
+                      className="text-text-muted hover:text-text-main cursor-pointer"
+                    >
+                      <X className="w-3.5 h-3.5" />
+                    </button>
+                  )}
+                </div>
+              )}
+
+              {/* Scrollable list options container */}
+              <div className="overflow-y-auto flex-1 max-h-56 flex flex-col gap-0.5">
+                {filteredOptions.length === 0 ? (
+                  <div className="px-3 py-4 text-center text-xs text-text-muted italic">
+                    Sin resultados
+                  </div>
+                ) : (
+                  filteredOptions.map((opt, groupIdx) => {
+                    if ('options' in opt) {
+                      // Rendering Category/Group Headers
+                      return (
+                        <div key={groupIdx} className="flex flex-col gap-0.5 mt-1.5 first:mt-0">
+                          {/* Group Label (Blocked, Not Selectable) */}
+                          <span className="px-3 py-1.5 text-[10px] font-extrabold text-text-muted uppercase tracking-widest bg-bg-app/20 rounded-md mb-0.5 select-none">
+                            {opt.label}
+                          </span>
+                          {/* Render Group Sub-items */}
+                          {opt.options.map((subOpt) => {
+                            const isSelected = selectedValues.includes(subOpt.value);
+                            return (
+                              <button
+                                key={subOpt.value}
+                                type="button"
+                                onClick={() => !subOpt.disabled && handleOptionClick(subOpt.value)}
+                                disabled={subOpt.disabled}
+                                className={`w-full px-5 py-2 rounded-lg text-xs font-semibold flex items-center justify-between transition-colors duration-200 ${
+                                  isSelected
+                                    ? 'bg-accent/10 text-accent'
+                                    : 'text-text-main hover:bg-bg-app'
+                                } ${subOpt.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
+                              >
+                                <div className="flex items-center gap-2">
+                                  {subOpt.icon && <span className="flex-shrink-0">{subOpt.icon}</span>}
+                                  <span>{subOpt.label}</span>
+                                </div>
+                                {isSelected && <Check className="w-3.5 h-3.5 text-accent stroke-[3]" />}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      );
+                    } else {
+                      // Rendering Flat list options
+                      const isSelected = selectedValues.includes(opt.value);
+                      return (
+                        <button
+                          key={opt.value}
+                          type="button"
+                          onClick={() => !opt.disabled && handleOptionClick(opt.value)}
+                          disabled={opt.disabled}
+                          className={`w-full px-3 py-2 rounded-lg text-xs font-semibold flex items-center justify-between transition-colors duration-200 ${
+                            isSelected
+                              ? 'bg-accent/10 text-accent'
+                              : 'text-text-main hover:bg-bg-app'
+                          } ${opt.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
+                        >
+                          <div className="flex items-center gap-2">
+                            {opt.icon && <span className="flex-shrink-0">{opt.icon}</span>}
+                            <span>{opt.label}</span>
+                          </div>
+                          {isSelected && <Check className="w-3.5 h-3.5 text-accent stroke-[3]" />}
+                        </button>
+                      );
+                    }
+                  })
+                )}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+      </div>
+    </div>
+  );
+};

package/components/EmptyState.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Inbox } from 'lucide-react';
+
+export interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  compact?: boolean;
+  className?: string;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  icon,
+  title,
+  description,
+  action,
+  compact = false,
+  className = ''
+}) => (
+  <motion.div
+    initial={{ opacity: 0, y: 8 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
+    className={`flex flex-col items-center justify-center text-center glass rounded-2xl border border-border-app border-dashed ${
+      compact ? 'p-6 gap-3' : 'p-10 gap-4'
+    } ${className}`}
+  >
+    <div className={`rounded-2xl bg-accent/10 border border-accent/20 text-accent flex items-center justify-center ${
+      compact ? 'w-12 h-12' : 'w-16 h-16'
+    }`}>
+      {icon ?? <Inbox className={compact ? 'w-6 h-6' : 'w-8 h-8'} />}
+    </div>
+
+    <div className="flex flex-col gap-1.5 max-w-sm">
+      <h3 className={`font-extrabold text-text-main font-display ${compact ? 'text-sm' : 'text-base'}`}>
+        {title}
+      </h3>
+      {description && (
+        <p className={`text-text-muted leading-relaxed ${compact ? 'text-xs' : 'text-sm'}`}>
+          {description}
+        </p>
+      )}
+    </div>
+
+    {action && <div className="pt-1">{action}</div>}
+  </motion.div>
+);

package/components/ErrorPage.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Home, ArrowLeft, AlertTriangle } from 'lucide-react';
+import { GlassButton } from './GlassButton';
+
+export interface ErrorPageProps {
+  code?: string | number;
+  title?: string;
+  description?: string;
+  onHome?: () => void;
+  onBack?: () => void;
+  showBack?: boolean;
+  className?: string;
+}
+
+export const ErrorPage: React.FC<ErrorPageProps> = ({
+  code = '404',
+  title = 'Página no encontrada',
+  description = 'La ruta que buscás no existe o fue movida. Volvé al inicio o explorá el catálogo.',
+  onHome,
+  onBack,
+  showBack = true,
+  className = ''
+}) => {
+  const isServerError = String(code).startsWith('5');
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.98 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ type: 'spring', stiffness: 280, damping: 26 }}
+      className={`w-full max-w-lg mx-auto flex flex-col items-center text-center gap-6 p-8 glass rounded-3xl border border-border-app border-dashed ${className}`}
+    >
+      <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border ${
+        isServerError
+          ? 'bg-red-500/10 border-red-500/25 text-red-400'
+          : 'bg-accent/10 border-accent/25 text-accent'
+      }`}>
+        <AlertTriangle className="w-7 h-7" />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <span className="text-6xl font-extrabold font-display bg-gradient-to-br from-accent via-violet-500 to-pink-500 bg-clip-text text-transparent leading-none">
+          {code}
+        </span>
+        <h1 className="text-xl font-extrabold text-text-main font-display mt-2">{title}</h1>
+        <p className="text-sm text-text-muted leading-relaxed max-w-sm">{description}</p>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-center gap-3 pt-2">
+        {showBack && (
+          <GlassButton variant="secondary" leftIcon={<ArrowLeft className="w-4 h-4" />} onClick={onBack}>
+            Volver
+          </GlassButton>
+        )}
+        <GlassButton variant="primary" leftIcon={<Home className="w-4 h-4" />} onClick={onHome}>
+          Ir al inicio
+        </GlassButton>
+      </div>
+    </motion.div>
+  );
+};

package/components/FileDropzone.tsx

@@ -0,0 +1,206 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { UploadCloud, X, Image as ImageIcon, FileText, Film, Music } from 'lucide-react';
+
+export interface FileDropzoneProps {
+  onFilesSelected?: (files: File[]) => void;
+  maxFiles?: number;
+  maxSizeMB?: number;
+  accept?: string;
+  disabled?: boolean;
+}
+
+export const FileDropzone: React.FC<FileDropzoneProps> = ({
+  onFilesSelected,
+  maxFiles = 5,
+  maxSizeMB = 10,
+  accept = "*",
+  disabled = false
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [files, setFiles] = useState<File[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) setIsDragging(true);
+  }, [disabled]);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+
+  const processFiles = (newFiles: FileList | File[]) => {
+    setError(null);
+    const validFiles: File[] = [];
+    const maxSizeBytes = maxSizeMB * 1024 * 1024;
+
+    Array.from(newFiles).forEach(file => {
+      if (file.size > maxSizeBytes) {
+        setError(`El archivo ${file.name} supera los ${maxSizeMB}MB permitidos.`);
+        return;
+      }
+      validFiles.push(file);
+    });
+
+    const updatedFiles = [...files, ...validFiles].slice(0, maxFiles);
+    setFiles(updatedFiles);
+    if (onFilesSelected) onFilesSelected(updatedFiles);
+  };
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (disabled) return;
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      processFiles(e.dataTransfer.files);
+    }
+  }, [disabled, files, maxFiles, maxSizeMB]);
+
+  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      processFiles(e.target.files);
+    }
+    // Reset input value so the same file can be selected again
+    if (inputRef.current) inputRef.current.value = '';
+  };
+
+  const removeFile = (indexToRemove: number) => {
+    const updatedFiles = files.filter((_, idx) => idx !== indexToRemove);
+    setFiles(updatedFiles);
+    if (onFilesSelected) onFilesSelected(updatedFiles);
+  };
+
+  const getFileIcon = (type: string) => {
+    if (type.startsWith('image/')) return <ImageIcon className="w-5 h-5 text-blue-400" />;
+    if (type.startsWith('video/')) return <Film className="w-5 h-5 text-purple-400" />;
+    if (type.startsWith('audio/')) return <Music className="w-5 h-5 text-pink-400" />;
+    return <FileText className="w-5 h-5 text-gray-400" />;
+  };
+
+  const formatSize = (bytes: number) => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  };
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {/* Dropzone Area */}
+      <motion.div
+        animate={{ scale: isDragging ? 1.02 : 1 }}
+        transition={{ type: 'spring', stiffness: 400, damping: 28 }}
+        className={`relative w-full p-8 rounded-2xl border-2 border-dashed glass flex flex-col items-center justify-center gap-3 transition-colors duration-200 ${
+          isDragging ? 'border-accent bg-accent/5' : 'border-border-app hover:border-accent/50 hover:bg-bg-app/50'
+        }`}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={() => !disabled && inputRef.current?.click()}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          multiple
+          accept={accept}
+          onChange={handleFileInput}
+          className="hidden"
+          disabled={disabled}
+        />
+        
+        <div className={`p-4 rounded-full ${isDragging ? 'bg-accent/20' : 'bg-bg-app border border-border-app'} transition-colors duration-300`}>
+          <UploadCloud className={`w-8 h-8 ${isDragging ? 'text-accent' : 'text-text-muted'}`} />
+        </div>
+        
+        <div className="text-center">
+          <p className="text-sm font-bold text-text-main">
+            {isDragging ? 'Soltá los archivos acá' : 'Arrastrá tus archivos o hacé click'}
+          </p>
+          <p className="text-xs text-text-muted mt-1">
+            Soporta hasta {maxFiles} archivos de {maxSizeMB}MB max.
+          </p>
+        </div>
+
+        {/* Glow effect when dragging */}
+        <AnimatePresence>
+          {isDragging && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0 rounded-2xl shadow-[0_0_30px_rgba(var(--color-accent-rgb),0.3)] pointer-events-none"
+            />
+          )}
+        </AnimatePresence>
+      </motion.div>
+
+      {/* Error Message */}
+      <AnimatePresence>
+        {error && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="text-xs text-red-400 font-medium"
+          >
+            {error}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* File List */}
+      <AnimatePresence>
+        {files.length > 0 && (
+          <motion.div 
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="flex flex-col gap-2"
+          >
+            {files.map((file, idx) => (
+              <motion.div
+                key={`${file.name}-${idx}`}
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ delay: idx * 0.05 }}
+                className="flex items-center gap-3 p-3 rounded-xl bg-bg-card border border-border-app group"
+              >
+                <div className="p-2 rounded-lg bg-bg-app">
+                  {getFileIcon(file.type)}
+                </div>
+                
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-text-main truncate">
+                    {file.name}
+                  </p>
+                  <p className="text-xs text-text-muted">
+                    {formatSize(file.size)}
+                  </p>
+                </div>
+
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeFile(idx);
+                  }}
+                  disabled={disabled}
+                  className="p-2 rounded-lg text-text-muted hover:text-red-400 hover:bg-red-400/10 transition-colors opacity-0 group-hover:opacity-100 disabled:opacity-0"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};