alexui 1.0.0

package/components/ForgotPassword.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { KeyRound, ArrowLeft, CheckCircle } from 'lucide-react';
+import { GlowInput } from './GlowInput';
+import { MagneticButton } from './MagneticButton';
+import { Skeleton } from './Skeleton';
+
+export interface ForgotPasswordProps {
+  onSubmit?: (email: string) => void;
+  onBackToLogin?: () => void;
+  className?: string;
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export const ForgotPassword: React.FC<ForgotPasswordProps> = ({
+  onSubmit,
+  onBackToLogin,
+  className = '',
+  isLoading = false,
+  disabled = false
+}) => {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState<string | undefined>();
+  const [sent, setSent] = useState(false);
+
+  const validate = () => {
+    if (!email) {
+      setError('El correo es obligatorio');
+      return false;
+    }
+    if (!email.includes('@')) {
+      setError('Correo electrónico no válido');
+      return false;
+    }
+    setError(undefined);
+    return true;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (disabled || !validate()) return;
+    onSubmit?.(email);
+    setSent(true);
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95, y: 12 }}
+      animate={{ opacity: 1, scale: 1, y: 0 }}
+      transition={{ type: 'spring', stiffness: 300, damping: 26 }}
+      className={`w-full max-w-md glass rounded-3xl p-8 bg-bg-card/70 border border-border-app shadow-2xl ${className}`}
+    >
+      {isLoading ? (
+        <div className="flex flex-col gap-5">
+          <Skeleton variant="circle" className="w-10 h-10 mx-auto" />
+          <Skeleton variant="text" className="w-48 h-5 mx-auto" />
+          <Skeleton variant="rect" className="w-full h-11" />
+          <Skeleton variant="rect" className="w-full h-12" />
+        </div>
+      ) : (
+        <AnimatePresence mode="wait">
+          {sent ? (
+            <motion.div
+              key="success"
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -8 }}
+              className="flex flex-col items-center gap-4 text-center"
+            >
+              <div className="w-12 h-12 rounded-2xl bg-green-500/15 border border-green-500/25 text-green-500 flex items-center justify-center">
+                <CheckCircle className="w-6 h-6" />
+              </div>
+              <h2 className="text-xl font-extrabold text-text-main font-display">Revisá tu correo</h2>
+              <p className="text-sm text-text-muted leading-relaxed">
+                Enviamos un enlace de recuperación a <span className="text-text-main font-semibold">{email}</span>.
+              </p>
+              <button
+                type="button"
+                onClick={onBackToLogin}
+                className="mt-2 text-sm font-bold text-accent hover:text-accent-hover transition-colors flex items-center gap-1.5"
+              >
+                <ArrowLeft className="w-4 h-4" />
+                Volver al login
+              </button>
+            </motion.div>
+          ) : (
+            <motion.form
+              key="form"
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -8 }}
+              onSubmit={handleSubmit}
+              className="flex flex-col gap-5"
+            >
+              <div className="text-center flex flex-col items-center gap-1">
+                <div className="w-10 h-10 rounded-2xl bg-accent/15 border border-accent/20 flex items-center justify-center text-accent mb-2">
+                  <KeyRound className="w-5 h-5" />
+                </div>
+                <h2 className="text-2xl font-extrabold tracking-tight text-text-main font-display">
+                  ¿Olvidaste tu contraseña?
+                </h2>
+                <p className="text-xs text-text-muted max-w-xs">
+                  Ingresá tu email y te enviaremos instrucciones para restablecerla.
+                </p>
+              </div>
+
+              <GlowInput
+                label="Correo electrónico"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                error={error}
+                placeholder="alex@ejemplo.com"
+                disabled={disabled}
+              />
+
+              <MagneticButton type="submit" className="w-full py-3.5" range={60} disabled={disabled || isLoading}>
+                Enviar enlace
+              </MagneticButton>
+
+              <button
+                type="button"
+                onClick={onBackToLogin}
+                disabled={disabled}
+                className="text-xs font-bold text-text-muted hover:text-accent transition-colors flex items-center justify-center gap-1.5 disabled:opacity-40"
+              >
+                <ArrowLeft className="w-3.5 h-3.5" />
+                Volver al login
+              </button>
+            </motion.form>
+          )}
+        </AnimatePresence>
+      )}
+    </motion.div>
+  );
+};

package/components/FormField.tsx

@@ -0,0 +1,81 @@
+import React, { useId } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  required?: boolean;
+  hint?: string;
+}
+
+export const Label: React.FC<LabelProps> = ({
+  children,
+  required = false,
+  hint,
+  className = '',
+  ...props
+}) => (
+  <label
+    className={`flex flex-col gap-0.5 text-sm font-bold text-text-main ${className}`}
+    {...props}
+  >
+    <span className="inline-flex items-center gap-1">
+      {children}
+      {required && <span className="text-red-400" aria-hidden>*</span>}
+    </span>
+    {hint && <span className="text-[11px] font-medium text-text-muted">{hint}</span>}
+  </label>
+);
+
+export interface FormFieldProps {
+  label: string;
+  htmlFor?: string;
+  children: React.ReactNode;
+  description?: string;
+  error?: string;
+  required?: boolean;
+  className?: string;
+}
+
+export const FormField: React.FC<FormFieldProps> = ({
+  label,
+  htmlFor,
+  children,
+  description,
+  error,
+  required = false,
+  className = ''
+}) => {
+  const autoId = useId();
+  const fieldId = htmlFor ?? autoId;
+
+  return (
+    <div className={`flex flex-col gap-2 w-full ${className}`}>
+      <Label htmlFor={fieldId} required={required}>
+        {label}
+      </Label>
+
+      {description && (
+        <p className="text-xs text-text-muted -mt-1">{description}</p>
+      )}
+
+      <div className="w-full">
+        {React.isValidElement(children)
+          ? React.cloneElement(children as React.ReactElement<{ id?: string }>, { id: fieldId })
+          : children}
+      </div>
+
+      <AnimatePresence>
+        {error && (
+          <motion.p
+            initial={{ opacity: 0, y: -4 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -4 }}
+            className="text-xs text-red-400 font-semibold px-1"
+            role="alert"
+          >
+            {error}
+          </motion.p>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

package/components/GlassButton.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+type MotionSafeButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' | 'onDrag' | 'onDragEnd' | 'onDragStart'
+>;
+
+export interface GlassButtonProps extends MotionSafeButtonProps {
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const GlassButton: React.FC<GlassButtonProps> = ({
+  variant = 'secondary',
+  size = 'md',
+  leftIcon,
+  rightIcon,
+  children,
+  className = '',
+  disabled,
+  ...props
+}) => {
+  
+  // Custom theme-aligned class mapping
+  const variantStyles = {
+    primary: 'bg-accent text-white hover:enabled:bg-accent-hover border-accent/20 shadow-[0_4px_12px_rgba(var(--color-accent),0.2)]',
+    secondary: 'glass bg-bg-card/50 text-text-main border-border-app hover:enabled:border-accent hover:enabled:text-accent shadow-xs',
+    ghost: 'bg-transparent text-text-muted hover:enabled:text-text-main hover:enabled:bg-bg-app border-transparent'
+  };
+
+  const sizeStyles = {
+    sm: 'px-3 py-1.5 text-xs rounded-lg gap-1.5',
+    md: 'px-5 py-2.5 text-sm rounded-xl gap-2',
+    lg: 'px-7 py-3.5 text-base rounded-2xl gap-2.5'
+  };
+
+  return (
+    <motion.button
+      whileTap={disabled ? undefined : { scale: 0.96 }}
+      transition={{ type: 'spring', stiffness: 500, damping: 20 }}
+      className={`inline-flex items-center justify-center font-bold tracking-wide transition-colors duration-300 border focus:outline-hidden ${
+        disabled ? 'opacity-40 cursor-not-allowed select-none' : 'cursor-pointer'
+      } ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
+      disabled={disabled}
+      {...props}
+    >
+      {leftIcon && <span className="flex-shrink-0">{leftIcon}</span>}
+      <span>{children}</span>
+      {rightIcon && <span className="flex-shrink-0">{rightIcon}</span>}
+    </motion.button>
+  );
+};

package/components/GlassCard.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export type GlassCardVariant = 'default' | 'elevated' | 'outline' | 'ghost';
+export type GlassCardPadding = 'none' | 'sm' | 'md' | 'lg';
+
+export interface GlassCardProps {
+  children: React.ReactNode;
+  title?: string;
+  description?: string;
+  footer?: React.ReactNode;
+  headerAction?: React.ReactNode;
+  variant?: GlassCardVariant;
+  padding?: GlassCardPadding;
+  hoverable?: boolean;
+  className?: string;
+}
+
+const variantStyles: Record<GlassCardVariant, string> = {
+  default: 'glass bg-bg-card/80 border-border-app shadow-sm',
+  elevated: 'glass bg-bg-card/90 border-border-app shadow-lg shadow-black/10',
+  outline: 'bg-transparent border-border-app',
+  ghost: 'bg-bg-app/40 border-transparent'
+};
+
+const paddingStyles: Record<GlassCardPadding, string> = {
+  none: '',
+  sm: 'p-4',
+  md: 'p-5',
+  lg: 'p-6'
+};
+
+export const GlassCard: React.FC<GlassCardProps> = ({
+  children,
+  title,
+  description,
+  footer,
+  headerAction,
+  variant = 'default',
+  padding = 'md',
+  hoverable = false,
+  className = ''
+}) => {
+  const hasHeader = Boolean(title || description || headerAction);
+  const bodyPadding = hasHeader || footer ? '' : paddingStyles[padding];
+
+  return (
+    <motion.div
+      whileHover={hoverable ? { y: -2, scale: 1.01 } : undefined}
+      transition={{ type: 'spring', stiffness: 400, damping: 28 }}
+      className={`rounded-2xl border flex flex-col overflow-hidden ${variantStyles[variant]} ${className}`}
+    >
+      {hasHeader && (
+        <div className={`flex items-start justify-between gap-3 border-b border-border-app/50 ${paddingStyles[padding]} pb-4`}>
+          <div className="flex flex-col gap-1 min-w-0">
+            {title && (
+              <h3 className="font-extrabold text-text-main font-display leading-tight truncate">
+                {title}
+              </h3>
+            )}
+            {description && (
+              <p className="text-xs text-text-muted leading-relaxed">
+                {description}
+              </p>
+            )}
+          </div>
+          {headerAction && <div className="flex-shrink-0">{headerAction}</div>}
+        </div>
+      )}
+
+      <div className={`flex-1 ${bodyPadding || (hasHeader || footer ? `${paddingStyles[padding]} pt-4` : '')}`}>
+        {children}
+      </div>
+
+      {footer && (
+        <div className={`border-t border-border-app/50 bg-bg-app/20 ${paddingStyles[padding]} pt-4`}>
+          {footer}
+        </div>
+      )}
+    </motion.div>
+  );
+};

package/components/GlassInput.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+
+export interface GlassInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export const GlassInput: React.FC<GlassInputProps> = ({
+  error,
+  leftIcon,
+  rightIcon,
+  id,
+  onFocus,
+  onBlur,
+  className = '',
+  disabled,
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    setIsFocused(true);
+    if (onFocus) onFocus(e);
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocused(false);
+    if (onBlur) onBlur(e);
+  };
+
+  return (
+    <div className={`relative w-full flex flex-col gap-1.5 ${className}`}>
+      
+      {/* Input Outer Wrapper */}
+      <div className="relative rounded-xl overflow-hidden transition-all duration-300">
+        
+        {/* Focus Glow border ring */}
+        <motion.div
+          animate={{
+            opacity: isFocused && !disabled ? 1 : 0,
+            scale: isFocused && !disabled ? 1 : 0.96,
+          }}
+          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]"
+        />
+
+        {/* Input container */}
+        <div className={`relative bg-bg-card/60 border rounded-xl z-10 flex items-center transition-colors duration-300 ${
+          isFocused && !disabled ? 'border-transparent' : 'border-border-app'
+        } ${disabled ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' : ''}`}>
+          
+          {/* Left Icon */}
+          {leftIcon && (
+            <div className="pl-4 flex items-center justify-center text-text-muted/70">
+              {leftIcon}
+            </div>
+          )}
+
+          {/* Actual input element */}
+          <input
+            id={inputId}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            className={`w-full bg-transparent py-3 text-sm text-text-main placeholder-text-muted/50 focus:outline-hidden z-10 relative ${
+              leftIcon ? 'pl-2.5' : 'pl-4'
+            } ${rightIcon ? 'pr-2.5' : 'pr-4'} ${disabled ? 'cursor-not-allowed' : ''}`}
+            {...props}
+          />
+
+          {/* Right Icon */}
+          {rightIcon && (
+            <div className="pr-4 flex items-center justify-center text-text-muted/70">
+              {rightIcon}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Error validation label */}
+      {error && (
+        <motion.span
+          initial={{ opacity: 0, y: -4 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-xs text-red-500 font-semibold px-2"
+        >
+          {error}
+        </motion.span>
+      )}
+    </div>
+  );
+};

package/components/GlassmorphicModal.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+
+export interface GlassmorphicModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+export const GlassmorphicModal: React.FC<GlassmorphicModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  className = ''
+}) => {
+  
+  // 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'; // Lock body scroll
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = ''; // Unlock scroll
+    };
+  }, [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 }}
+            className="fixed inset-0 bg-black/40 backdrop-blur-md"
+          />
+
+          {/* 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-lg rounded-2xl glass bg-bg-card/90 shadow-2xl border border-border-app z-10 overflow-hidden flex flex-col ${className}`}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between p-5 border-b border-border-app/50">
+              <h3 className="font-extrabold text-lg text-text-main">
+                {title}
+              </h3>
+              <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 modal"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="p-6 overflow-y-auto max-h-[60vh] text-sm text-text-muted leading-relaxed">
+              {children}
+            </div>
+
+            {/* Footer */}
+            {footer && (
+              <div className="p-5 border-t border-border-app/50 bg-bg-app/20 flex justify-end gap-3">
+                {footer}
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+};

package/components/GlowInput.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+
+export interface GlowInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  error?: string;
+}
+
+export const GlowInput: React.FC<GlowInputProps> = ({
+  label,
+  error,
+  id,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  className = '',
+  disabled,
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [hasText, setHasText] = useState(false);
+
+  const inputId = id || (label ? `input-${label.toLowerCase().replace(/\s+/g, '-')}` : 'glow-input');
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    setIsFocused(true);
+    if (onFocus) onFocus(e);
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocused(false);
+    setHasText(e.target.value.length > 0);
+    if (onBlur) onBlur(e);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    setHasText(e.target.value.length > 0);
+    if (onChange) onChange(e);
+  };
+
+  const isActive = isFocused || hasText || (value && String(value).length > 0) || !!props.placeholder;
+
+  return (
+    <div className={`relative w-full flex flex-col gap-1.5 ${className}`}>
+      
+      {/* Input wrapper with border glow container */}
+      <div className="relative rounded-xl overflow-hidden transition-all duration-300">
+        
+        {/* Animated Glow Border background */}
+        <motion.div
+          animate={{
+            opacity: isFocused && !disabled ? 1 : 0,
+            scale: isFocused && !disabled ? 1 : 0.95,
+          }}
+          transition={{ duration: 0.3 }}
+          className="absolute -inset-[1px] bg-gradient-to-r from-accent to-pink-500 rounded-xl pointer-events-none z-0 blur-[2px]"
+        />
+
+        {/* Input content holder */}
+        <div className={`relative bg-bg-card border border-border-app rounded-xl z-10 transition-colors duration-300 ${
+          disabled ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' : ''
+        }`}>
+          
+          {/* Floating Label */}
+          <motion.label
+            htmlFor={inputId}
+            initial={{ y: 14, scale: 1 }}
+            animate={{
+              y: isActive ? 4 : 14,
+              scale: isActive ? 0.75 : 1,
+              color: isFocused && !disabled 
+                ? 'var(--color-accent)' 
+                : 'var(--color-text-muted)'
+            }}
+            transition={{ type: 'spring', stiffness: 200, damping: 20 }}
+            className="absolute left-4 origin-top-left pointer-events-none select-none text-sm z-20 font-medium"
+          >
+            {label}
+          </motion.label>
+
+          <input
+            id={inputId}
+            value={value}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            className={`w-full bg-transparent px-4 pb-2 pt-7 text-sm text-text-main focus:outline-hidden z-10 relative ${
+              disabled ? 'cursor-not-allowed' : ''
+            }`}
+            {...props}
+          />
+        </div>
+      </div>
+
+      {/* Error message */}
+      {error && (
+        <motion.span
+          initial={{ opacity: 0, y: -5 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-xs text-red-500 font-medium px-2"
+        >
+          {error}
+        </motion.span>
+      )}
+    </div>
+  );
+};