alexui 1.0.0

package/components/LoaderCollection.tsx

@@ -0,0 +1,368 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface BaseLoaderProps {
+  color?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+// Helper to resolve sizes
+const getPixelSize = (size: 'sm' | 'md' | 'lg', sm: number, md: number, lg: number) => {
+  if (size === 'sm') return sm;
+  if (size === 'lg') return lg;
+  return md;
+};
+
+// 1. PulseBars: Soundwave-like pulsing vertical bars
+export const PulseBars: React.FC<BaseLoaderProps> = ({
+  color = 'var(--color-accent)',
+  size = 'md',
+  className = ''
+}) => {
+  const height = getPixelSize(size, 20, 36, 52);
+  const width = getPixelSize(size, 3, 5, 7);
+  const gap = getPixelSize(size, 3, 4, 6);
+
+  const containerVariants = {
+    animate: {
+      transition: {
+        staggerChildren: 0.1,
+      }
+    }
+  };
+
+  const barVariants = {
+    initial: { scaleY: 0.3 },
+    animate: {
+      scaleY: [0.3, 1, 0.3],
+      transition: {
+        duration: 0.8,
+        repeat: Infinity,
+        ease: 'easeInOut' as const
+      }
+    }
+  };
+
+  return (
+    <motion.div
+      variants={containerVariants}
+      initial="initial"
+      animate="animate"
+      className={`flex items-center justify-center ${className}`}
+      style={{ height, gap }}
+    >
+      {[...Array(5)].map((_, i) => (
+        <motion.div
+          key={i}
+          variants={barVariants}
+          className="rounded-full origin-center"
+          style={{
+            backgroundColor: color,
+            width,
+            height: '100%',
+            boxShadow: `0 0 10px ${color}50`
+          }}
+        />
+      ))}
+    </motion.div>
+  );
+};
+
+// 2. BouncingDots: Classic sequential bouncing spheres
+export const BouncingDots: React.FC<BaseLoaderProps> = ({
+  color = 'var(--color-accent)',
+  size = 'md',
+  className = ''
+}) => {
+  const dotSize = getPixelSize(size, 8, 12, 16);
+  const gap = getPixelSize(size, 4, 6, 8);
+
+  const containerVariants = {
+    animate: {
+      transition: {
+        staggerChildren: 0.15,
+      }
+    }
+  };
+
+  const dotVariants = {
+    initial: { y: 0 },
+    animate: {
+      y: [0, -12, 0],
+      transition: {
+        duration: 0.6,
+        repeat: Infinity,
+        ease: 'easeInOut' as const
+      }
+    }
+  };
+
+  return (
+    <motion.div
+      variants={containerVariants}
+      initial="initial"
+      animate="animate"
+      className={`flex items-center justify-center ${className}`}
+      style={{ gap, height: dotSize + 16 }}
+    >
+      {[...Array(3)].map((_, i) => (
+        <motion.div
+          key={i}
+          variants={dotVariants}
+          className="rounded-full"
+          style={{
+            backgroundColor: color,
+            width: dotSize,
+            height: dotSize,
+            boxShadow: `0 0 10px ${color}50`
+          }}
+        />
+      ))}
+    </motion.div>
+  );
+};
+
+// 3. ElasticGrid: 3x3 staggered grid scaling
+export const ElasticGrid: React.FC<BaseLoaderProps> = ({
+  color = 'var(--color-accent)',
+  size = 'md',
+  className = ''
+}) => {
+  const dotSize = getPixelSize(size, 6, 10, 14);
+  const gap = getPixelSize(size, 4, 6, 8);
+  const gridWidth = dotSize * 3 + gap * 2;
+
+  const dotVariants = (index: number) => ({
+    animate: {
+      scale: [0.4, 1, 0.4],
+      opacity: [0.3, 1, 0.3],
+      transition: {
+        duration: 1.2,
+        repeat: Infinity,
+        ease: 'easeInOut' as const,
+        delay: (index % 3 + Math.floor(index / 3)) * 0.15
+      }
+    }
+  });
+
+  return (
+    <div
+      className={`grid grid-cols-3 justify-center items-center ${className}`}
+      style={{ gap, width: gridWidth, height: gridWidth }}
+    >
+      {[...Array(9)].map((_, i) => (
+        <motion.div
+          key={i}
+          animate="animate"
+          variants={dotVariants(i)}
+          className="rounded-full"
+          style={{
+            backgroundColor: color,
+            width: dotSize,
+            height: dotSize,
+            boxShadow: `0 0 8px ${color}40`
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+// 4. ConcentricCircles: Rings rotating in opposite directions
+export const ConcentricCircles: React.FC<BaseLoaderProps> = ({
+  color = 'var(--color-accent)',
+  size = 'md',
+  className = ''
+}) => {
+  const outerSize = getPixelSize(size, 28, 48, 68);
+  const midSize = outerSize * 0.65;
+  const innerSize = outerSize * 0.35;
+
+  return (
+    <div
+      className={`relative flex items-center justify-center ${className}`}
+      style={{ width: outerSize, height: outerSize }}
+    >
+      {/* Outer Ring */}
+      <motion.div
+        animate={{ rotate: 360 }}
+        transition={{ duration: 1.8, repeat: Infinity, ease: 'linear' }}
+        className="absolute rounded-full border-2 border-transparent border-t-accent"
+        style={{
+          width: '100%',
+          height: '100%',
+          borderColor: `${color} 2px`,
+          borderStyle: 'solid',
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+      {/* Middle Ring */}
+      <motion.div
+        animate={{ rotate: -360 }}
+        transition={{ duration: 1.2, repeat: Infinity, ease: 'linear' }}
+        className="absolute rounded-full border-2 border-transparent"
+        style={{
+          width: midSize,
+          height: midSize,
+          borderColor: `${color}40 2px`,
+          borderStyle: 'solid',
+          borderTopColor: color,
+          borderBottomColor: color,
+        }}
+      />
+      {/* Inner Dot */}
+      <motion.div
+        animate={{ scale: [0.8, 1.2, 0.8] }}
+        transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
+        className="absolute rounded-full"
+        style={{
+          width: innerSize,
+          height: innerSize,
+          backgroundColor: color,
+          boxShadow: `0 0 12px ${color}`
+        }}
+      />
+    </div>
+  );
+};
+
+// 5. MeshSpinner: orbital nodes rotating in a ring
+export const MeshSpinner: React.FC<BaseLoaderProps> = ({
+  color = 'var(--color-accent)',
+  size = 'md',
+  className = ''
+}) => {
+  const containerSize = getPixelSize(size, 32, 54, 76);
+  const nodeSize = getPixelSize(size, 5, 8, 11);
+
+  return (
+    <div
+      className={`relative flex items-center justify-center ${className}`}
+      style={{ width: containerSize, height: containerSize }}
+    >
+      <motion.div
+        animate={{ rotate: 360 }}
+        transition={{ duration: 1.5, repeat: Infinity, ease: 'linear' }}
+        className="relative w-full h-full"
+      >
+        {[...Array(6)].map((_, i) => {
+          const angle = (i * 360) / 6;
+          const radius = (containerSize - nodeSize) / 2;
+          const x = radius * Math.cos((angle * Math.PI) / 180);
+          const y = radius * Math.sin((angle * Math.PI) / 180);
+
+          return (
+            <motion.div
+              key={i}
+              animate={{
+                scale: [0.5, 1.1, 0.5],
+                opacity: [0.4, 1, 0.4]
+              }}
+              transition={{
+                duration: 1.2,
+                repeat: Infinity,
+                delay: i * 0.12,
+                ease: 'easeInOut' as const
+              }}
+              className="absolute rounded-full"
+              style={{
+                backgroundColor: color,
+                width: nodeSize,
+                height: nodeSize,
+                left: `calc(50% - ${nodeSize / 2}px + ${x}px)`,
+                top: `calc(50% - ${nodeSize / 2}px + ${y}px)`,
+                boxShadow: `0 0 10px ${color}`
+              }}
+            />
+          );
+        })}
+      </motion.div>
+    </div>
+  );
+};
+
+// 6. InfinityLoop: Animated infinity SVG loop
+export const InfinityLoop: React.FC<BaseLoaderProps> = ({
+  color = 'var(--color-accent)',
+  size = 'md',
+  className = ''
+}) => {
+  const width = getPixelSize(size, 48, 80, 112);
+  const height = width / 2;
+
+  return (
+    <div
+      className={`flex items-center justify-center ${className}`}
+      style={{ width, height }}
+    >
+      <svg
+        viewBox="0 0 100 50"
+        className="w-full h-full overflow-visible"
+      >
+        {/* Draw Infinity Path Background */}
+        <path
+          d="M 30,25 C 15,5 5,17 5,25 C 5,33 15,45 30,25 C 45,5 55,5 70,25 C 85,45 95,33 95,25 C 95,17 85,5 70,25 C 55,45 45,45 30,25 Z"
+          fill="none"
+          stroke={`${color}20`}
+          strokeWidth="3.5"
+          strokeLinecap="round"
+        />
+
+        {/* Animated Moving Path Overlay */}
+        <motion.path
+          d="M 30,25 C 15,5 5,17 5,25 C 5,33 15,45 30,25 C 45,5 55,5 70,25 C 85,45 95,33 95,25 C 95,17 85,5 70,25 C 55,45 45,45 30,25 Z"
+          fill="none"
+          stroke={color}
+          strokeWidth="3.5"
+          strokeLinecap="round"
+          strokeDasharray="20, 100"
+          animate={{
+            strokeDashoffset: [0, -120]
+          }}
+          transition={{
+            duration: 1.6,
+            repeat: Infinity,
+            ease: 'linear'
+          }}
+          style={{
+            filter: `drop-shadow(0 0 6px ${color})`
+          }}
+        />
+      </svg>
+    </div>
+  );
+};
+
+// Collection Wrapper component to showcase or render dynamic types
+export interface LoaderCollectionProps {
+  type?: 'pulse' | 'bounce' | 'grid' | 'concentric' | 'mesh' | 'infinity';
+  color?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export const LoaderCollection: React.FC<LoaderCollectionProps> = ({
+  type = 'pulse',
+  color,
+  size,
+  className
+}) => {
+  switch (type) {
+    case 'bounce':
+      return <BouncingDots color={color} size={size} className={className} />;
+    case 'grid':
+      return <ElasticGrid color={color} size={size} className={className} />;
+    case 'concentric':
+      return <ConcentricCircles color={color} size={size} className={className} />;
+    case 'mesh':
+      return <MeshSpinner color={color} size={size} className={className} />;
+    case 'infinity':
+      return <InfinityLoop color={color} size={size} className={className} />;
+    case 'pulse':
+    default:
+      return <PulseBars color={color} size={size} className={className} />;
+  }
+};

package/components/LoginForm.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { GlowInput } from './GlowInput';
+import { MorphingSwitch } from './MorphingSwitch';
+import { MagneticButton } from './MagneticButton';
+import { Sparkles } from 'lucide-react';
+import { Skeleton } from './Skeleton';
+
+export interface LoginFormProps {
+  onSubmit?: (data: { email: string; pass: string; remember: boolean }) => void;
+  className?: string;
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export const LoginForm: React.FC<LoginFormProps> = ({ 
+  onSubmit, 
+  className = '', 
+  isLoading = false,
+  disabled = false
+}) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [remember, setRemember] = useState(false);
+  const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
+
+  const validate = () => {
+    const nextErrors: { email?: string; password?: string } = {};
+    if (!email) {
+      nextErrors.email = 'El correo es obligatorio';
+    } else if (!email.includes('@')) {
+      nextErrors.email = 'Correo electrónico no válido';
+    }
+    
+    if (!password) {
+      nextErrors.password = 'La contraseña es obligatoria';
+    } else if (password.length < 6) {
+      nextErrors.password = 'Debe contener al menos 6 caracteres';
+    }
+
+    setErrors(nextErrors);
+    return Object.keys(nextErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (disabled) return;
+    if (validate() && onSubmit) {
+      onSubmit({ email, pass: password, remember });
+    }
+  };
+
+  // Staggered layout animations
+  const formContainerVariants = {
+    hidden: { opacity: 0, scale: 0.95, y: 15 },
+    show: {
+      opacity: 1,
+      scale: 1,
+      y: 0,
+      transition: {
+        type: 'spring' as const,
+        stiffness: 300,
+        damping: 25,
+        staggerChildren: 0.08,
+        delayChildren: 0.1
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    show: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 300, damping: 25 } }
+  };
+
+  return (
+    <motion.div
+      variants={formContainerVariants}
+      initial="hidden"
+      animate="show"
+      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-6">
+          <div className="text-center flex flex-col items-center gap-1">
+            <Skeleton variant="circle" className="w-10 h-10 mb-2" />
+            <Skeleton variant="text" className="w-32 h-5 mb-1 animate-pulse" />
+            <Skeleton variant="text" className="w-48 h-3 animate-pulse" />
+          </div>
+          <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-2">
+              <Skeleton variant="text" className="w-24 h-3 animate-pulse" />
+              <Skeleton variant="rect" className="w-full h-11" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Skeleton variant="text" className="w-20 h-3 animate-pulse" />
+              <Skeleton variant="rect" className="w-full h-11" />
+            </div>
+          </div>
+          <div className="flex items-center justify-between text-xs">
+            <div className="flex items-center gap-2">
+              <Skeleton variant="rect" className="w-10 h-6 rounded-full" />
+              <Skeleton variant="text" className="w-16 h-3 animate-pulse" />
+            </div>
+            <Skeleton variant="text" className="w-28 h-3 animate-pulse" />
+          </div>
+          <Skeleton variant="rect" className="w-full h-12 mt-2" />
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+          
+          {/* Title Group */}
+          <motion.div variants={itemVariants} 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">
+              <Sparkles className="w-5 h-5 animate-pulse" />
+            </div>
+            <h2 className="text-2xl font-extrabold tracking-tight text-text-main font-display">
+              ¡Te damos la bienvenida!
+            </h2>
+            <p className="text-xs text-text-muted">
+              Ingresá tus credenciales para acceder a tu panel
+            </p>
+          </motion.div>
+
+          {/* Inputs */}
+          <div className="flex flex-col gap-4">
+            <motion.div variants={itemVariants}>
+              <GlowInput
+                label="Correo Electrónico"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                error={errors.email}
+                placeholder="ejemplo@correo.com"
+                disabled={disabled}
+              />
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+              <GlowInput
+                label="Contraseña"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                error={errors.password}
+                placeholder="••••••••"
+                disabled={disabled}
+              />
+            </motion.div>
+          </div>
+
+          {/* Remember / Forget Password settings */}
+          <motion.div 
+            variants={itemVariants}
+            className="flex items-center justify-between text-xs"
+          >
+            <div className="flex items-center gap-2">
+              <MorphingSwitch
+                checked={remember}
+                onChange={setRemember}
+                disabled={disabled}
+              />
+              <span className="font-semibold text-text-muted select-none">Recordarme</span>
+            </div>
+            
+            <a 
+              href="#" 
+              onClick={(e) => disabled && e.preventDefault()}
+              className={`font-bold text-accent transition-colors ${
+                disabled ? 'opacity-40 cursor-not-allowed text-text-muted' : 'hover:text-accent-hover'
+              }`}
+            >
+              ¿Olvidaste tu contraseña?
+            </a>
+          </motion.div>
+
+          {/* Submit button */}
+          <motion.div variants={itemVariants} className="w-full flex justify-center mt-2">
+            <MagneticButton
+              type="submit"
+              className="w-full py-3.5"
+              range={60}
+              disabled={disabled || isLoading}
+            >
+              Iniciar Sesión
+            </MagneticButton>
+          </motion.div>
+
+        </form>
+      )}
+    </motion.div>
+  );
+};

package/components/MagneticButton.tsx

@@ -0,0 +1,101 @@
+import React, { useRef } from 'react';
+import { motion, useMotionValue, useSpring } from 'framer-motion';
+
+type MotionSafeButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' | 'onDrag' | 'onDragEnd' | 'onDragStart'
+>;
+
+export interface MagneticButtonProps extends MotionSafeButtonProps {
+  children: React.ReactNode;
+  className?: string;
+  range?: number; // Mouse distance range where magnetic effect activates
+}
+
+export const MagneticButton: React.FC<MagneticButtonProps> = ({
+  children,
+  className = '',
+  range = 60,
+  ...props
+}) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  
+  // Motion values for button container movement
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  
+  // Motion values for internal text movement (parallax)
+  const textX = useMotionValue(0);
+  const textY = useMotionValue(0);
+
+  // Smooth springs for button
+  const springX = useSpring(x, { stiffness: 80, damping: 15, mass: 0.8 });
+  const springY = useSpring(y, { stiffness: 80, damping: 15, mass: 0.8 });
+
+  // Smooth springs for text
+  const textSpringX = useSpring(textX, { stiffness: 120, damping: 15, mass: 0.6 });
+  const textSpringY = useSpring(textY, { stiffness: 120, damping: 15, mass: 0.6 });
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!buttonRef.current || props.disabled) return;
+
+    const { clientX, clientY } = e;
+    const { left, top, width, height } = buttonRef.current.getBoundingClientRect();
+    
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+    
+    const distanceX = clientX - centerX;
+    const distanceY = clientY - centerY;
+    const distance = Math.hypot(distanceX, distanceY);
+
+    if (distance < range) {
+      // Calculate pull strength based on distance (closer = stronger pull)
+      const pull = 0.4;
+      x.set(distanceX * pull);
+      y.set(distanceY * pull);
+      
+      // Text moves a bit less for parallax depth
+      textX.set(distanceX * 0.2);
+      textY.set(distanceY * 0.2);
+    } else {
+      handleMouseLeave();
+    }
+  };
+
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+    textX.set(0);
+    textY.set(0);
+  };
+
+  return (
+    <motion.button
+      ref={buttonRef}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        x: springX,
+        y: springY,
+      }}
+      className={`relative inline-flex items-center justify-center rounded-xl bg-accent px-6 py-3 font-semibold text-white shadow-md transition-colors select-none ${
+        props.disabled 
+          ? 'opacity-40 cursor-not-allowed bg-accent/60' 
+          : 'hover:bg-accent-hover active:scale-95 cursor-pointer'
+      } ${className}`}
+      {...props}
+    >
+      <motion.span
+        style={{
+          x: textSpringX,
+          y: textSpringY,
+          display: 'block',
+        }}
+        className="pointer-events-none"
+      >
+        {children}
+      </motion.span>
+    </motion.button>
+  );
+};