alexui 1.0.0

package/components/ImageLightbox.tsx

@@ -0,0 +1,259 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence, useMotionValue, useTransform, animate } from 'framer-motion';
+import { X, ChevronLeft, ChevronRight, Maximize2 } from 'lucide-react';
+import { Skeleton } from './Skeleton';
+
+export interface GalleryImage {
+  src: string;
+  alt: string;
+  caption?: string;
+}
+
+export interface ImageLightboxProps {
+  images: GalleryImage[];
+  className?: string;
+  isLoading?: boolean;
+}
+
+export const ImageLightbox: React.FC<ImageLightboxProps> = ({ images, className = '', isLoading = false }) => {
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 800);
+  const dragX = useMotionValue(0);
+
+  // Measure container width for slide translations
+  useEffect(() => {
+    if (selectedIndex === null || !containerRef.current) return;
+    const measure = () => {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.offsetWidth);
+      }
+    };
+    measure();
+    window.addEventListener('resize', measure);
+    return () => window.removeEventListener('resize', measure);
+  }, [selectedIndex]);
+
+  const handleOpen = (idx: number) => {
+    setSelectedIndex(idx);
+    dragX.set(0);
+  };
+
+  const handleClose = () => {
+    setSelectedIndex(null);
+  };
+
+  const prevIndex = selectedIndex !== null ? (selectedIndex > 0 ? selectedIndex - 1 : images.length - 1) : 0;
+  const nextIndex = selectedIndex !== null ? (selectedIndex < images.length - 1 ? selectedIndex + 1 : 0) : 0;
+
+  const currentX = dragX;
+  const prevX = useTransform(dragX, (val) => val - containerWidth);
+  const nextX = useTransform(dragX, (val) => val + containerWidth);
+
+  const handlePrev = useCallback((e?: React.MouseEvent) => {
+    if (e) e.stopPropagation();
+    if (selectedIndex === null) return;
+    
+    // Slide right to show previous image
+    animate(dragX, containerWidth, { type: 'spring', stiffness: 300, damping: 30 }).then(() => {
+      setSelectedIndex((prev) => (prev !== null && prev > 0 ? prev - 1 : images.length - 1));
+      dragX.set(0);
+    });
+  }, [selectedIndex, containerWidth, images.length, dragX]);
+
+  const handleNext = useCallback((e?: React.MouseEvent) => {
+    if (e) e.stopPropagation();
+    if (selectedIndex === null) return;
+
+    // Slide left to show next image
+    animate(dragX, -containerWidth, { type: 'spring', stiffness: 300, damping: 30 }).then(() => {
+      setSelectedIndex((prev) => (prev !== null && prev < images.length - 1 ? prev + 1 : 0));
+      dragX.set(0);
+    });
+  }, [selectedIndex, containerWidth, images.length, dragX]);
+
+  // Keyboard navigation support
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (selectedIndex === null) return;
+      if (e.key === 'ArrowRight') handleNext();
+      if (e.key === 'ArrowLeft') handlePrev();
+      if (e.key === 'Escape') handleClose();
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    if (selectedIndex !== null) {
+      document.body.style.overflow = 'hidden';
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [selectedIndex, handleNext, handlePrev]);
+
+  return (
+    <div className={`w-full ${className}`}>
+      
+      {/* Photo grid */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+        {isLoading ? (
+          Array(4).fill(0).map((_, idx) => (
+            <Skeleton
+              key={idx}
+              variant="rect"
+              className="w-full aspect-square rounded-2xl border border-border-app"
+            />
+          ))
+        ) : (
+          images.map((img, idx) => (
+            <div
+              key={idx}
+              onClick={() => handleOpen(idx)}
+              className="group relative aspect-square rounded-2xl overflow-hidden bg-bg-card border border-border-app cursor-pointer shadow-sm hover:shadow-md transition-all duration-300"
+            >
+              <img
+                src={img.src}
+                alt={img.alt}
+                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-108"
+                loading="lazy"
+              />
+              {/* Hover overlay */}
+              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                <div className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white border border-white/20">
+                  <Maximize2 className="w-5 h-5" />
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Lightbox full-screen Overlay */}
+      {typeof document !== 'undefined' && createPortal(
+        <AnimatePresence>
+          {selectedIndex !== null && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center p-4 select-none">
+              
+              {/* Backdrop Blur overlay */}
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                onClick={handleClose}
+                className="fixed inset-0 bg-black/90 backdrop-blur-md cursor-pointer"
+              />
+
+              {/* Upper Action Controls */}
+              <div className="absolute top-6 left-6 right-6 z-10 flex items-center justify-between text-white pointer-events-none">
+                <span className="text-sm font-semibold tracking-wider font-mono">
+                  {selectedIndex + 1} / {images.length}
+                </span>
+                <button
+                  onClick={handleClose}
+                  className="pointer-events-auto p-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-white transition-colors cursor-pointer"
+                  aria-label="Cerrar galería"
+                >
+                  <X className="w-6 h-6" />
+                </button>
+              </div>
+
+              {/* Previous Arrow Button */}
+              <button
+                onClick={handlePrev}
+                className="absolute left-6 z-10 p-3 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-white transition-colors cursor-pointer"
+                aria-label="Imagen anterior"
+              >
+                <ChevronLeft className="w-6 h-6" />
+              </button>
+
+              {/* Slider container zoom wrapper */}
+              <motion.div 
+                initial={{ scale: 0.92, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0.92, opacity: 0 }}
+                transition={{ type: 'spring', stiffness: 350, damping: 26 }}
+                ref={containerRef}
+                className="relative max-w-5xl max-h-[80vh] aspect-auto w-full h-full flex items-center justify-center z-10 overflow-hidden pointer-events-auto"
+              >
+                {/* Previous Slide */}
+                <motion.div
+                  style={{ x: prevX }}
+                  className="absolute inset-0 w-full h-full flex flex-col items-center justify-center p-4 select-none pointer-events-none"
+                >
+                  <img
+                    src={images[prevIndex].src}
+                    alt={images[prevIndex].alt}
+                    className="max-w-full max-h-[70vh] object-contain rounded-xl shadow-2xl"
+                  />
+                  {images[prevIndex].caption && (
+                    <span className="mt-4 text-sm font-semibold text-white/80 drop-shadow-md text-center max-w-lg">
+                      {images[prevIndex].caption}
+                    </span>
+                  )}
+                </motion.div>
+
+                {/* Current Slide */}
+                <motion.div
+                  style={{ x: currentX }}
+                  drag="x"
+                  dragConstraints={{ left: 0, right: 0 }}
+                  dragElastic={0.6}
+                  onDragEnd={(_, info) => {
+                    const threshold = containerWidth * 0.2; // 20% of width is enough to swipe
+                    if (info.offset.x < -threshold) {
+                      handleNext();
+                    } else if (info.offset.x > threshold) {
+                      handlePrev();
+                    } else {
+                      animate(dragX, 0, { type: 'spring', stiffness: 300, damping: 30 });
+                    }
+                  }}
+                  className="absolute inset-0 w-full h-full flex flex-col items-center justify-center p-4 select-none cursor-grab active:cursor-grabbing z-20"
+                >
+                  <img
+                    src={images[selectedIndex].src}
+                    alt={images[selectedIndex].alt}
+                    className="max-w-full max-h-[70vh] object-contain rounded-xl shadow-2xl pointer-events-none"
+                  />
+                  {images[selectedIndex].caption && (
+                    <span className="mt-4 text-sm font-semibold text-white/80 drop-shadow-md text-center max-w-lg">
+                      {images[selectedIndex].caption}
+                    </span>
+                  )}
+                </motion.div>
+
+                {/* Next Slide */}
+                <motion.div
+                  style={{ x: nextX }}
+                  className="absolute inset-0 w-full h-full flex flex-col items-center justify-center p-4 select-none pointer-events-none"
+                >
+                  <img
+                    src={images[nextIndex].src}
+                    alt={images[nextIndex].alt}
+                    className="max-w-full max-h-[70vh] object-contain rounded-xl shadow-2xl"
+                  />
+                  {images[nextIndex].caption && (
+                    <span className="mt-4 text-sm font-semibold text-white/80 drop-shadow-md text-center max-w-lg">
+                      {images[nextIndex].caption}
+                    </span>
+                  )}
+                </motion.div>
+              </motion.div>
+
+              {/* Next Arrow Button */}
+              <button
+                onClick={handleNext}
+                className="absolute right-6 z-10 p-3 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-white transition-colors cursor-pointer"
+                aria-label="Siguiente imagen"
+              >
+                <ChevronRight className="w-6 h-6" />
+              </button>
+            </div>
+          )}
+        </AnimatePresence>,
+        document.body
+      )}
+    </div>
+  );
+};

package/components/InputGroup.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+
+// 1. INPUT GROUP ADDON / TEXT COMPONENT
+export interface InputGroupTextProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const InputGroupText: React.FC<InputGroupTextProps> = ({ children, className = '' }) => {
+  return (
+    <div className={`input-group-text px-4 py-3 flex items-center justify-center bg-bg-app/50 border border-border-app text-xs font-bold text-text-muted select-none whitespace-nowrap ${className}`}>
+      {children}
+    </div>
+  );
+};
+
+// 2. MAIN INPUT GROUP CONTAINER
+export interface InputGroupProps {
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const InputGroup: React.FC<InputGroupProps> = ({ children, className = '', disabled = false }) => {
+  return (
+    <div className={`input-group-container flex items-stretch w-full relative ${
+      disabled ? 'opacity-40 cursor-not-allowed select-none' : ''
+    } ${className}`}>
+      
+      {/* Dynamic inline styles to target complex nested components cleanly */}
+      <style>{`
+        .input-group-container > * {
+          flex: 1;
+        }
+        .input-group-container > .input-group-text,
+        .input-group-container > button,
+        .input-group-container > div > button {
+          flex: 0 0 auto;
+        }
+        /* First element rounding adjustments */
+        .input-group-container > *:first-child,
+        .input-group-container > *:first-child * {
+          border-top-right-radius: 0px !important;
+          border-bottom-right-radius: 0px !important;
+        }
+        /* Last element rounding adjustments */
+        .input-group-container > *:last-child,
+        .input-group-container > *:last-child * {
+          border-top-left-radius: 0px !important;
+          border-bottom-left-radius: 0px !important;
+        }
+        /* Middle elements rounding adjustments */
+        .input-group-container > *:not(:first-child):not(:last-child),
+        .input-group-container > *:not(:first-child):not(:last-child) * {
+          border-radius: 0px !important;
+        }
+        /* Overlap duplicate borders smoothly */
+        .input-group-container > *:not(:first-child) {
+          margin-left: -1px;
+        }
+        /* Ensure inputs take full height within wrappers */
+        .input-group-container > * > div {
+          height: 100%;
+        }
+      `}</style>
+
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child;
+
+        // Propagate disabled property to children
+        return React.cloneElement(child as React.ReactElement<{ disabled?: boolean }>, {
+          disabled: (child as React.ReactElement<{ disabled?: boolean }>).props.disabled !== undefined
+            ? (child as React.ReactElement<{ disabled?: boolean }>).props.disabled
+            : disabled
+        });
+      })}
+    </div>
+  );
+};
+
+// 3. ICON FIELD CONTAINER (To place icons absolute-positioned inside inputs)
+export type IconFieldPosition = 'left' | 'right';
+
+export interface IconFieldProps {
+  icon: React.ReactNode;
+  iconPosition?: IconFieldPosition;
+  children: React.ReactElement; // Must be a single input element
+  className?: string;
+}
+
+export const IconField: React.FC<IconFieldProps> = ({
+  icon,
+  iconPosition = 'left',
+  children,
+  className = ''
+}) => {
+  const isLeft = iconPosition === 'left';
+
+  return (
+    <div className={`relative w-full ${className}`}>
+      {/* Icon Wrapper */}
+      <div 
+        className={`absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-text-muted/70 z-20 pointer-events-none ${
+          isLeft ? 'left-4' : 'right-4'
+        }`}
+      >
+        {icon}
+      </div>
+
+      {/* Clone Input to inject correct padding */}
+      {React.cloneElement(children as React.ReactElement<{ className?: string }>, {
+        className: `${(children as React.ReactElement<{ className?: string }>).props.className || ''} ${
+          isLeft ? '!pl-10.5' : '!pr-10.5'
+        }`.trim()
+      })}
+    </div>
+  );
+};

package/components/InputOTP.tsx

@@ -0,0 +1,147 @@
+import React, { useRef, useEffect } from 'react';
+import { motion } from 'framer-motion';
+
+export interface InputOTPProps {
+  value: string;
+  onChange: (value: string) => void;
+  length?: 4 | 6;
+  disabled?: boolean;
+  isInvalid?: boolean;
+  className?: string;
+}
+
+export const InputOTP: React.FC<InputOTPProps> = ({
+  value,
+  onChange,
+  length = 6,
+  disabled = false,
+  isInvalid = false,
+  className = ''
+}) => {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const otpArray = value.split('').concat(Array(length).fill('')).slice(0, length);
+
+  // Focus the first empty input or the first one if empty
+  useEffect(() => {
+    if (inputRefs.current[0] && value.length === 0) {
+      // Don't auto-focus unless requested, just set up array sizes
+      inputRefs.current = inputRefs.current.slice(0, length);
+    }
+  }, [length, value]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, idx: number) => {
+    const val = e.target.value.replace(/\D/g, ''); // numbers only
+    if (!val) return;
+
+    const valChars = [...otpArray];
+    valChars[idx] = val.slice(-1); // keep only last character
+    const nextVal = valChars.slice(0, length).join('');
+    onChange(nextVal);
+
+    // Auto-focus next box
+    if (idx < length - 1) {
+      inputRefs.current[idx + 1]?.focus();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, idx: number) => {
+    if (e.key === 'Backspace') {
+      const valChars = [...otpArray];
+      
+      if (otpArray[idx] === '') {
+        // If current is empty, delete previous and focus it
+        if (idx > 0) {
+          valChars[idx - 1] = '';
+          onChange(valChars.slice(0, length).join(''));
+          inputRefs.current[idx - 1]?.focus();
+        }
+      } else {
+        // Delete current char
+        valChars[idx] = '';
+        onChange(valChars.slice(0, length).join(''));
+      }
+    } else if (e.key === 'ArrowLeft' && idx > 0) {
+      inputRefs.current[idx - 1]?.focus();
+    } else if (e.key === 'ArrowRight' && idx < length - 1) {
+      inputRefs.current[idx + 1]?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text')
+      .replace(/\D/g, '')
+      .slice(0, length);
+
+    if (pastedData) {
+      onChange(pastedData);
+      const focusIdx = Math.min(pastedData.length, length - 1);
+      inputRefs.current[focusIdx]?.focus();
+    }
+  };
+
+  return (
+    <div className={`flex flex-col gap-2.5 items-center ${className}`}>
+      <div className="flex gap-2.5 items-center justify-center">
+        {otpArray.map((char, idx) => {
+          const isFocused = document.activeElement === inputRefs.current[idx];
+
+          return (
+            <div key={idx} className="relative w-12 h-14 overflow-visible">
+              
+              {/* Focus Glow border ring */}
+              <motion.div
+                animate={{
+                  opacity: isFocused && !disabled ? 1 : 0,
+                  scale: isFocused && !disabled ? 1 : 0.95,
+                }}
+                className="absolute -inset-[1px] bg-gradient-to-r from-accent to-pink-500 rounded-xl pointer-events-none z-0 blur-[1px]"
+              />
+
+              <input
+                ref={(el) => { inputRefs.current[idx] = el; }}
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                maxLength={1}
+                value={char}
+                onChange={(e) => handleInputChange(e, idx)}
+                onKeyDown={(e) => handleKeyDown(e, idx)}
+                onPaste={handlePaste}
+                disabled={disabled}
+                className={`w-full h-full text-center text-lg font-extrabold text-text-main bg-bg-card border rounded-xl z-10 relative focus:outline-hidden transition-all ${
+                  isInvalid 
+                    ? 'border-error/60' 
+                    : isFocused 
+                    ? 'border-transparent' 
+                    : 'border-border-app/80'
+                } ${
+                  disabled 
+                    ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' 
+                    : 'cursor-text'
+                }`}
+                style={{
+                  boxShadow: isFocused && !disabled && !isInvalid
+                    ? '0 0 10px var(--color-accent-glow)'
+                    : isInvalid
+                    ? '0 0 10px var(--color-error-glow)'
+                    : 'none'
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {isInvalid && (
+        <motion.span
+          initial={{ opacity: 0, y: -4 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-[11px] text-red-500 font-semibold mt-1"
+        >
+          Código de verificación incorrecto
+        </motion.span>
+      )}
+    </div>
+  );
+};