alexui 1.0.0

package/components/GlowSelect.tsx

@@ -0,0 +1,203 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronDown } from 'lucide-react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface GlowSelectProps {
+  label?: string;
+  options: SelectOption[];
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+  error?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const GlowSelect: React.FC<GlowSelectProps> = ({
+  label,
+  options,
+  value,
+  onChange,
+  className = '',
+  error,
+  disabled = false,
+  placeholder = 'Seleccionar...',
+  size = 'md'
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  // Close dropdown when clicking 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);
+  }, []);
+
+  const handleSelect = (val: string) => {
+    if (disabled) return;
+    onChange(val);
+    setIsOpen(false);
+  };
+
+  const hasFloatingLabel = !!label && size !== 'sm';
+  const isActive = isOpen || (value && value.length > 0);
+
+  return (
+    <div ref={containerRef} className={`relative w-full flex flex-col gap-1.5 ${className}`}>
+      
+      {/* External label for size === 'sm' */}
+      {label && !hasFloatingLabel && (
+        <span className="text-[10px] font-bold text-text-muted uppercase tracking-wider px-1">
+          {label}
+        </span>
+      )}
+
+      {/* Selector Wrapper with glow boundary */}
+      <div className="relative rounded-xl overflow-visible transition-all duration-300">
+        
+        {/* Animated Glow Border background */}
+        <motion.div
+          animate={{
+            opacity: isOpen && !disabled ? 1 : 0,
+            scale: isOpen && !disabled ? 1 : 0.95,
+          }}
+          transition={{ duration: 0.3 }}
+          className={`absolute -inset-[1px] bg-gradient-to-r from-accent to-pink-500 pointer-events-none z-0 blur-[2px] ${
+            size === 'lg' ? 'rounded-2xl' : 'rounded-xl'
+          }`}
+        />
+
+        {/* Selected trigger element */}
+        <button
+          type="button"
+          onClick={() => {
+            if (!disabled) setIsOpen(!isOpen);
+          }}
+          disabled={disabled}
+          className={`w-full relative bg-bg-card/60 border border-border-app z-10 text-left text-text-main focus:outline-hidden flex items-center justify-between transition-colors duration-300 ${
+            hasFloatingLabel 
+              ? 'pb-2 pt-7 px-4 text-sm rounded-xl h-14' 
+              : size === 'sm'
+              ? 'py-1.5 px-3 text-xs rounded-xl h-9'
+              : size === 'lg'
+              ? 'py-3.5 px-5 text-base rounded-2xl h-[52px]'
+              : 'py-2.5 px-4 text-sm rounded-xl h-[44px]'
+          } ${
+            disabled ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' : 'cursor-pointer'
+          }`}
+          style={{
+            boxShadow: isOpen && !disabled ? '0 0 10px var(--color-accent-glow)' : 'none'
+          }}
+        >
+          {/* Label (Floating only) */}
+          {hasFloatingLabel && (
+            <motion.span
+              initial={{ y: 0, scale: 1 }}
+              animate={{
+                y: isActive ? 4 : 14,
+                scale: isActive ? 0.75 : 1,
+                color: isOpen && !disabled 
+                  ? 'var(--color-accent)' 
+                  : 'var(--color-text-muted)'
+              }}
+              transition={{ type: 'spring', stiffness: 200, damping: 20 }}
+              className="absolute left-4 top-0 origin-top-left pointer-events-none font-medium text-xs"
+            >
+              {label}
+            </motion.span>
+          )}
+
+          {/* Option text */}
+          <span className={`block truncate ${!selectedOption ? 'text-text-muted/60 font-normal' : 'font-medium'}`}>
+            {selectedOption ? selectedOption.label : placeholder}
+          </span>
+
+          {/* Chevron */}
+          <motion.div
+            animate={{ rotate: isOpen ? 180 : 0 }}
+            transition={{ duration: 0.2 }}
+            className="text-text-muted flex items-center justify-center"
+          >
+            <ChevronDown className={size === 'sm' ? 'w-4 h-4' : 'w-5 h-5'} />
+          </motion.div>
+        </button>
+
+        {/* Animated Custom Options List */}
+        <AnimatePresence>
+          {isOpen && (
+            <motion.ul
+              initial={{ opacity: 0, y: 10, scale: 0.95 }}
+              animate={{ 
+                opacity: 1, 
+                y: 4, 
+                scale: 1,
+                transition: { type: 'spring', stiffness: 350, damping: 25 }
+              }}
+              exit={{ 
+                opacity: 0, 
+                y: 10, 
+                scale: 0.95,
+                transition: { duration: 0.15 }
+              }}
+              className={`absolute left-0 w-full glass bg-bg-card rounded-xl shadow-2xl z-50 overflow-y-auto focus:outline-hidden border border-border-app/50 ${
+                size === 'sm' ? 'py-1 max-h-48' : size === 'lg' ? 'py-2 max-h-72' : 'py-1.5 max-h-60'
+              }`}
+              style={{
+                top: 'calc(100% + 4px)'
+              }}
+            >
+              {options.map((opt) => {
+                const isSelected = opt.value === value;
+                return (
+                  <li
+                    key={opt.value}
+                    onClick={() => handleSelect(opt.value)}
+                    className={`cursor-pointer select-none transition-colors duration-200 flex items-center justify-between ${
+                      size === 'sm' 
+                        ? 'px-3 py-1.5 text-xs' 
+                        : size === 'lg' 
+                        ? 'px-5 py-3 text-base' 
+                        : 'px-4 py-2.5 text-sm'
+                    } ${
+                      isSelected 
+                        ? 'bg-accent/10 text-accent font-bold' 
+                        : 'text-text-main hover:bg-bg-app'
+                    }`}
+                  >
+                    <span>{opt.label}</span>
+                    {isSelected && <motion.span layoutId={`activeSelectOptionTick-${label || placeholder || 'select'}`}>✓</motion.span>}
+                  </li>
+                );
+              })}
+            </motion.ul>
+          )}
+        </AnimatePresence>
+      </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>
+  );
+};
+

package/components/GlowTextArea.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+
+export interface GlowTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label: string;
+  error?: string;
+}
+
+export const GlowTextArea: React.FC<GlowTextAreaProps> = ({
+  label,
+  error,
+  id,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  className = '',
+  rows = 4,
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [hasText, setHasText] = useState(false);
+
+  const textareaId = id || (label ? `textarea-${label.toLowerCase().replace(/\s+/g, '-')}` : 'glow-textarea');
+
+  const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    setIsFocused(true);
+    if (onFocus) onFocus(e);
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    setIsFocused(false);
+    setHasText(e.target.value.length > 0);
+    if (onBlur) onBlur(e);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    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}`}>
+      
+      {/* 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 ? 1 : 0,
+            scale: isFocused ? 1 : 0.98,
+          }}
+          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]"
+        />
+
+        {/* Textarea container holder */}
+        <div className="relative bg-bg-card border border-border-app rounded-xl z-10 transition-colors duration-300">
+          
+          {/* Floating Label */}
+          <motion.label
+            htmlFor={textareaId}
+            initial={{ y: 14, scale: 1 }}
+            animate={{
+              y: isActive ? 4 : 14,
+              scale: isActive ? 0.75 : 1,
+              color: isFocused 
+                ? '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>
+
+          <textarea
+            id={textareaId}
+            value={value}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            rows={rows}
+            className="w-full bg-transparent px-4 pb-2.5 pt-7 text-sm text-text-main focus:outline-hidden z-10 relative resize-y min-h-[100px]"
+            {...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>
+  );
+};

package/components/HorizontalTimeline.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export interface TimelineItem {
+  id: string | number;
+  date: string;
+  title: string;
+  description: string;
+}
+
+export interface HorizontalTimelineProps {
+  items: TimelineItem[];
+  activeId: string | number;
+  onChange: (id: string | number) => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const HorizontalTimeline: React.FC<HorizontalTimelineProps> = ({
+  items,
+  activeId,
+  onChange,
+  className = '',
+  disabled = false
+}) => {
+  const activeIdx = items.findIndex((item) => item.id === activeId);
+  const percentage = items.length > 1 ? (activeIdx / (items.length - 1)) * 100 : 0;
+
+  const currentItem = items[activeIdx] || items[0];
+
+  return (
+    <div className={`w-full flex flex-col gap-8 select-none ${
+      disabled ? 'opacity-40 cursor-not-allowed' : ''
+    } ${className}`}>
+      
+      {/* Horizontal Line and Nodes Container */}
+      <div className="relative py-6 flex items-center justify-between w-full px-6">
+        
+        {/* Background Track Line */}
+        <div className="absolute left-6 right-6 h-1 bg-border-app/40 rounded-full z-0 pointer-events-none" />
+
+        {/* Active Progress Fill Line container */}
+        <div className="absolute left-6 right-6 h-1 z-10 pointer-events-none">
+          <motion.div
+            initial={{ width: 0 }}
+            animate={{ width: `${percentage}%` }}
+            transition={{ type: 'spring', stiffness: 260, damping: 26 }}
+            className="h-full bg-accent rounded-full origin-left"
+          />
+        </div>
+ 
+        {/* Milestone Nodes */}
+        {items.map((item, idx) => {
+          const isSelected = item.id === activeId;
+          const isPassed = idx <= activeIdx;
+ 
+          return (
+            <div
+              key={item.id}
+              className="relative z-20 flex flex-col items-center"
+              style={{
+                left: items.length > 1 ? undefined : '50%'
+              }}
+            >
+              {/* Node Button */}
+              <button
+                type="button"
+                onClick={() => !disabled && onChange(item.id)}
+                disabled={disabled}
+                className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-300 focus:outline-hidden ${
+                  isSelected
+                    ? 'border-accent bg-bg-card shadow-[0_0_12px_var(--color-accent)] scale-110'
+                    : isPassed
+                    ? 'border-accent bg-accent text-white scale-100'
+                    : 'border-border-app bg-bg-card hover:border-text-muted text-text-muted scale-95'
+                } ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+              >
+                {/* Node center dot */}
+                <div className={`w-2.5 h-2.5 rounded-full transition-transform ${
+                  isSelected ? 'bg-accent' : isPassed ? 'bg-white scale-0' : 'bg-transparent'
+                }`} />
+              </button>
+
+              {/* Node Date Label */}
+              <span className={`absolute top-full mt-2.5 text-[10px] font-extrabold uppercase tracking-wider font-mono whitespace-nowrap transition-colors duration-300 ${
+                isSelected ? 'text-accent' : 'text-text-muted/80'
+              }`}>
+                {item.date}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Selected Milestone Details display card */}
+      <div className="min-h-[100px] mt-2 w-full">
+        <AnimatePresence mode="wait">
+          {currentItem && (
+            <motion.div
+              key={currentItem.id}
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -12 }}
+              transition={{ duration: 0.25 }}
+              className="glass border border-border-app/40 rounded-2xl p-5 shadow-sm"
+            >
+              <h3 className="text-sm font-extrabold text-text-main font-display mb-1 flex items-center gap-2">
+                <span className="w-1.5 h-3.5 bg-accent rounded-full inline-block" />
+                {currentItem.title}
+              </h3>
+              <p className="text-xs text-text-muted leading-relaxed">
+                {currentItem.description}
+              </p>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+    </div>
+  );
+};

package/components/HoverCard.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export interface HoverCardProps {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  openDelay?: number;
+  closeDelay?: number;
+  placement?: 'top' | 'bottom';
+  className?: string;
+  disabled?: boolean;
+}
+
+export const HoverCard: React.FC<HoverCardProps> = ({
+  children,
+  content,
+  openDelay = 300,
+  closeDelay = 200,
+  placement = 'bottom',
+  className = '',
+  disabled = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const enterTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const leaveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    enterTimeoutRef.current = setTimeout(() => {
+      setIsOpen(true);
+    }, openDelay);
+  };
+
+  const handleMouseLeave = () => {
+    if (disabled) return;
+    if (enterTimeoutRef.current) clearTimeout(enterTimeoutRef.current);
+    leaveTimeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, closeDelay);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (enterTimeoutRef.current) clearTimeout(enterTimeoutRef.current);
+      if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    };
+  }, []);
+
+  const animationVariants = {
+    hidden: { 
+      opacity: 0, 
+      y: placement === 'top' ? 10 : -10, 
+      scale: 0.95 
+    },
+    visible: { 
+      opacity: 1, 
+      y: 0, 
+      scale: 1,
+      transition: { type: 'spring' as const, damping: 20, stiffness: 300 }
+    },
+    exit: { 
+      opacity: 0, 
+      y: placement === 'top' ? 10 : -10, 
+      scale: 0.95,
+      transition: { duration: 0.15 }
+    }
+  };
+
+  return (
+    <div 
+      className="relative inline-block"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Trigger */}
+      <div className="cursor-pointer">
+        {children}
+      </div>
+
+      {/* Card Content */}
+      <AnimatePresence>
+        {isOpen && !disabled && (
+          <motion.div
+            variants={animationVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            className={`absolute z-50 min-w-[280px] p-4 glass rounded-2xl border border-border-app shadow-xl ${placement === 'top' ? 'mb-2' : 'mt-2'} ${className}`}
+            style={{
+              [placement === 'top' ? 'bottom' : 'top']: '100%',
+              left: '50%',
+              transform: 'translateX(-50%)'
+            }}
+            // Keep open if user hovers the card itself
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            {content}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};