alexui 1.0.0

package/components/Calendar.tsx

@@ -0,0 +1,340 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronLeft, ChevronRight, X } from 'lucide-react';
+
+export interface CalendarProps {
+  value?: Date | null;
+  onChange?: (date: Date | null) => void;
+  selectsRange?: boolean;
+  startDate?: Date | null;
+  endDate?: Date | null;
+  onChangeRange?: (start: Date | null, end: Date | null) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  excludeDates?: Date[];
+  disabled?: boolean;
+  className?: string;
+}
+
+const WEEKDAYS = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
+const MONTHS = [
+  'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+  'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+];
+
+export const Calendar: React.FC<CalendarProps> = ({
+  value = null,
+  onChange,
+  selectsRange = false,
+  startDate = null,
+  endDate = null,
+  onChangeRange,
+  minDate,
+  maxDate,
+  excludeDates = [],
+  disabled = false,
+  className = ''
+}) => {
+  const [currentDate, setCurrentDate] = useState(() => {
+    if (selectsRange && startDate) return new Date(startDate);
+    if (value) return new Date(value);
+    return new Date();
+  });
+
+  const [viewMode, setViewMode] = useState<'days' | 'months' | 'years'>('days');
+
+  const currentYear = currentDate.getFullYear();
+  const currentMonth = currentDate.getMonth();
+
+  const handlePrevMonth = () => {
+    if (disabled) return;
+    setCurrentDate(new Date(currentYear, currentMonth - 1, 1));
+  };
+
+  const handleNextMonth = () => {
+    if (disabled) return;
+    setCurrentDate(new Date(currentYear, currentMonth + 1, 1));
+  };
+
+  const getDaysInMonth = (year: number, month: number) => {
+    return new Date(year, month + 1, 0).getDate();
+  };
+
+  const getFirstDayOfMonth = (year: number, month: number) => {
+    return new Date(year, month, 1).getDay();
+  };
+
+  const isDateBlocked = (date: Date) => {
+    if (minDate && new Date(date.getFullYear(), date.getMonth(), date.getDate()) < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
+    if (maxDate && new Date(date.getFullYear(), date.getMonth(), date.getDate()) > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
+    return excludeDates.some(
+      (d) => d.getDate() === date.getDate() &&
+             d.getMonth() === date.getMonth() &&
+             d.getFullYear() === date.getFullYear()
+    );
+  };
+
+  const isSameDay = (d1: Date | null, d2: Date | null) => {
+    if (!d1 || !d2) return false;
+    return d1.getDate() === d2.getDate() &&
+           d1.getMonth() === d2.getMonth() &&
+           d1.getFullYear() === d2.getFullYear();
+  };
+
+  const isBetweenDays = (date: Date, start: Date | null, end: Date | null) => {
+    if (!start || !end) return false;
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+    const s = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime();
+    const e = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime();
+    return d > s && d < e;
+  };
+
+  const handleDayClick = (day: number, isCurrentMonth: 'prev' | 'current' | 'next') => {
+    if (disabled) return;
+    
+    let clickedDate: Date;
+    if (isCurrentMonth === 'prev') {
+      clickedDate = new Date(currentYear, currentMonth - 1, day);
+    } else if (isCurrentMonth === 'next') {
+      clickedDate = new Date(currentYear, currentMonth + 1, day);
+    } else {
+      clickedDate = new Date(currentYear, currentMonth, day);
+    }
+
+    if (isDateBlocked(clickedDate)) return;
+
+    if (selectsRange) {
+      if (!startDate || (startDate && endDate)) {
+        if (onChangeRange) onChangeRange(clickedDate, null);
+      } else {
+        if (clickedDate < startDate) {
+          if (onChangeRange) onChangeRange(clickedDate, null);
+        } else {
+          if (onChangeRange) onChangeRange(startDate, clickedDate);
+        }
+      }
+    } else {
+      if (onChange) onChange(clickedDate);
+    }
+  };
+
+  // Generate 42 cells (6 rows * 7 days)
+  const renderCells = () => {
+    const firstDayIndex = getFirstDayOfMonth(currentYear, currentMonth);
+    const daysInCurrentMonth = getDaysInMonth(currentYear, currentMonth);
+    const daysInPrevMonth = getDaysInMonth(currentYear, currentMonth - 1);
+
+    const cells: React.ReactNode[] = [];
+
+    // Prev month days
+    for (let i = firstDayIndex - 1; i >= 0; i--) {
+      const day = daysInPrevMonth - i;
+      const date = new Date(currentYear, currentMonth - 1, day);
+      const blocked = isDateBlocked(date);
+      cells.push(
+        <button
+          key={`prev-${day}`}
+          onClick={() => handleDayClick(day, 'prev')}
+          disabled={blocked || disabled}
+          type="button"
+          className={`h-9 w-9 text-xs text-text-muted/40 font-medium rounded-lg hover:bg-white/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed`}
+        >
+          {day}
+        </button>
+      );
+    }
+
+    // Current month days
+    for (let day = 1; day <= daysInCurrentMonth; day++) {
+      const date = new Date(currentYear, currentMonth, day);
+      const isSelected = selectsRange 
+        ? isSameDay(date, startDate) || isSameDay(date, endDate)
+        : isSameDay(date, value);
+      const isInRange = selectsRange && isBetweenDays(date, startDate, endDate);
+      const isStart = selectsRange && isSameDay(date, startDate);
+      const isEnd = selectsRange && isSameDay(date, endDate);
+      const blocked = isDateBlocked(date);
+      const isToday = isSameDay(date, new Date());
+
+      cells.push(
+        <button
+          key={`curr-${day}`}
+          onClick={() => handleDayClick(day, 'current')}
+          disabled={blocked || disabled}
+          type="button"
+          className={`h-9 w-9 text-xs font-bold rounded-lg relative transition-all duration-200 cursor-pointer select-none disabled:opacity-25 disabled:cursor-not-allowed ${
+            isSelected 
+              ? 'bg-accent text-white shadow-[0_0_12px_var(--color-accent)]'
+              : isInRange
+              ? 'bg-accent/15 text-accent border border-accent/20 rounded-none first:rounded-l-lg last:rounded-r-lg'
+              : 'text-text-main hover:bg-white/5'
+          } ${isToday && !isSelected ? 'border border-accent/40 text-accent font-extrabold' : ''}`}
+        >
+          {day}
+          {isStart && endDate && (
+            <div className="absolute right-0 top-0 bottom-0 w-1/2 bg-accent/10 -z-10" />
+          )}
+          {isEnd && startDate && (
+            <div className="absolute left-0 top-0 bottom-0 w-1/2 bg-accent/10 -z-10" />
+          )}
+        </button>
+      );
+    }
+
+    // Next month days to complete 42 cells
+    const remainingCells = 42 - cells.length;
+    for (let day = 1; day <= remainingCells; day++) {
+      const date = new Date(currentYear, currentMonth + 1, day);
+      const blocked = isDateBlocked(date);
+      cells.push(
+        <button
+          key={`next-${day}`}
+          onClick={() => handleDayClick(day, 'next')}
+          disabled={blocked || disabled}
+          type="button"
+          className={`h-9 w-9 text-xs text-text-muted/40 font-medium rounded-lg hover:bg-white/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed`}
+        >
+          {day}
+        </button>
+      );
+    }
+
+    return cells;
+  };
+
+  const handleMonthSelect = (mIdx: number) => {
+    setCurrentDate(new Date(currentYear, mIdx, 1));
+    setViewMode('days');
+  };
+
+  const handleYearSelect = (year: number) => {
+    setCurrentDate(new Date(year, currentMonth, 1));
+    setViewMode('days');
+  };
+
+  const renderMonthGrid = () => {
+    return (
+      <div className="grid grid-cols-3 gap-2 py-4">
+        {MONTHS.map((m, idx) => (
+          <button
+            key={m}
+            type="button"
+            onClick={() => handleMonthSelect(idx)}
+            className={`py-3 text-xs font-bold rounded-xl hover:bg-white/5 transition-all text-text-main cursor-pointer ${
+              currentMonth === idx ? 'bg-accent/20 text-accent border border-accent/30' : ''
+            }`}
+          >
+            {m}
+          </button>
+        ))}
+      </div>
+    );
+  };
+
+  const renderYearGrid = () => {
+    const years: number[] = [];
+    const baseYear = Math.floor(currentYear / 12) * 12;
+    for (let i = -1; i < 11; i++) {
+      years.push(baseYear + i);
+    }
+
+    return (
+      <div className="grid grid-cols-3 gap-2 py-4">
+        {years.map((y) => (
+          <button
+            key={y}
+            type="button"
+            onClick={() => handleYearSelect(y)}
+            className={`py-3 text-xs font-bold rounded-xl hover:bg-white/5 transition-all text-text-main cursor-pointer ${
+              currentYear === y ? 'bg-accent/20 text-accent border border-accent/30' : ''
+            }`}
+          >
+            {y}
+          </button>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className={`p-4 bg-bg-card/40 border border-border-app/40 rounded-2xl w-[290px] select-none ${
+      disabled ? 'opacity-40 pointer-events-none' : ''
+    } ${className}`}>
+      
+      {/* Calendar Header */}
+      <div className="flex items-center justify-between pb-3 border-b border-border-app/30">
+        <div className="flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => setViewMode(viewMode === 'months' ? 'days' : 'months')}
+            className="text-xs font-black text-text-main hover:text-accent cursor-pointer transition-colors"
+          >
+            {MONTHS[currentMonth]}
+          </button>
+          <button
+            type="button"
+            onClick={() => setViewMode(viewMode === 'years' ? 'days' : 'years')}
+            className="text-xs font-mono font-bold text-text-muted hover:text-accent cursor-pointer transition-colors"
+          >
+            {currentYear}
+          </button>
+        </div>
+        
+        {viewMode === 'days' && (
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={handlePrevMonth}
+              className="p-1 rounded-lg hover:bg-white/5 text-text-muted hover:text-text-main transition-colors cursor-pointer"
+            >
+              <ChevronLeft size={16} />
+            </button>
+            <button
+              type="button"
+              onClick={handleNextMonth}
+              className="p-1 rounded-lg hover:bg-white/5 text-text-muted hover:text-text-main transition-colors cursor-pointer"
+            >
+              <ChevronRight size={16} />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Calendar Body */}
+      {viewMode === 'days' && (
+        <>
+          <div className="grid grid-cols-7 gap-1 text-center py-2">
+            {WEEKDAYS.map((day) => (
+              <span key={day} className="text-[10px] font-black uppercase text-text-muted/60 tracking-wider">
+                {day}
+              </span>
+            ))}
+          </div>
+          <div className="grid grid-cols-7 gap-1 text-center">
+            {renderCells()}
+          </div>
+        </>
+      )}
+
+      {viewMode === 'months' && renderMonthGrid()}
+      {viewMode === 'years' && renderYearGrid()}
+
+      {/* Clear/Reset Range support */}
+      {selectsRange && (startDate || endDate) && (
+        <div className="mt-3 pt-2 border-t border-border-app/30 flex justify-between items-center">
+          <span className="text-[9px] font-mono text-text-muted">
+            {startDate ? `${startDate.getDate()}/${startDate.getMonth() + 1}` : ''}
+            {endDate ? ` - ${endDate.getDate()}/${endDate.getMonth() + 1}` : ''}
+          </span>
+          <button
+            type="button"
+            onClick={() => onChangeRange && onChangeRange(null, null)}
+            className="text-[10px] font-bold text-red-500 hover:text-red-400 cursor-pointer transition-colors flex items-center gap-1"
+          >
+            <X size={10} /> Limpiar
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

package/components/Card3D.tsx

@@ -0,0 +1,117 @@
+import React, { useRef } from 'react';
+import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
+import { Skeleton } from './Skeleton';
+
+export interface Card3DProps {
+  children: React.ReactNode;
+  className?: string;
+  glowColor?: string; // e.g. "rgba(99,102,241,0.15)"
+  isLoading?: boolean;
+}
+
+export const Card3D: React.FC<Card3DProps> = ({ children, className = '', glowColor = 'rgba(99, 102, 241, 0.2)', isLoading = false }) => {
+  const cardRef = useRef<HTMLDivElement>(null);
+  
+  // Track relative cursor position inside the card (-0.5 to 0.5 range)
+  const rotateX = useMotionValue(0);
+  const rotateY = useMotionValue(0);
+  
+  // Spotlight position
+  const glowX = useMotionValue(0);
+  const glowY = useMotionValue(0);
+  const glowOpacity = useMotionValue(0);
+
+  // Smooth springs for tilt
+  const springX = useSpring(rotateX, { stiffness: 150, damping: 20 });
+  const springY = useSpring(rotateY, { stiffness: 150, damping: 20 });
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return;
+    
+    const rect = cardRef.current.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    
+    // Position of cursor relative to element
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    
+    // Convert to percentage offsets (-0.5 to 0.5)
+    const xPct = (mouseX / width) - 0.5;
+    const yPct = (mouseY / height) - 0.5;
+    
+    // Tilt limits: maximum rotate angle
+    rotateX.set(-yPct * 20); // Tilt up/down
+    rotateY.set(xPct * 20);  // Tilt left/right
+    
+    // Glow coordinates
+    glowX.set(mouseX);
+    glowY.set(mouseY);
+    glowOpacity.set(1);
+  };
+
+  const handleMouseLeave = () => {
+    rotateX.set(0);
+    rotateY.set(0);
+    glowOpacity.set(0);
+  };
+
+  return (
+    <div
+      style={{ perspective: 1000 }}
+      className="inline-block"
+    >
+      <motion.div
+        ref={cardRef}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          rotateX: springX,
+          rotateY: springY,
+          transformStyle: 'preserve-3d',
+        }}
+        className={`relative overflow-hidden rounded-2xl border border-border-app bg-bg-card p-6 shadow-lg transition-colors duration-300 select-none ${className}`}
+      >
+        {/* Dynamic Glow Layer */}
+        <motion.div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+            background: useTransform(
+              [glowX, glowY, glowOpacity],
+              ([x, y]) => `radial-gradient(400px circle at ${x}px ${y}px, ${glowColor}, transparent 80%)`
+            ),
+            opacity: glowOpacity,
+          }}
+          className="z-10 transition-opacity duration-300"
+        />
+        
+        {/* Card Contents (can utilize transformZ to lift objects) */}
+        <div style={{ transform: 'translateZ(30px)', transformStyle: 'preserve-3d' }} className="relative z-20 w-full h-full">
+          {isLoading ? (
+            <div className="flex flex-col h-full justify-between gap-4">
+              <div>
+                <div className="flex items-center justify-between mb-4">
+                  <Skeleton variant="text" className="w-16 h-3" />
+                  <Skeleton variant="circle" className="w-4 h-4" />
+                </div>
+                <Skeleton variant="text" className="w-3/4 h-5 mb-2" />
+                <Skeleton variant="text" className="w-1/2 h-3" />
+              </div>
+              <div className="flex items-center justify-between mt-4 border-t border-border-app/40 pt-3">
+                <Skeleton variant="text" className="w-12 h-3" />
+                <Skeleton variant="circle" className="w-6 h-6" />
+              </div>
+            </div>
+          ) : (
+            children
+          )}
+        </div>
+      </motion.div>
+    </div>
+  );
+};

package/components/Carousel3D.tsx

@@ -0,0 +1,193 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export interface Carousel3DProps {
+  items: React.ReactNode[];
+  autoPlay?: boolean;
+  interval?: number;
+  className?: string;
+  disabled?: boolean;
+}
+
+function getRelativeOffset(index: number, current: number, length: number): number {
+  let offset = index - current;
+  const half = Math.floor(length / 2);
+  if (offset > half) offset -= length;
+  if (offset < -half) offset += length;
+  return offset;
+}
+
+function getItemStyle(offset: number, length: number) {
+  const isCenter = offset === 0;
+  const absOffset = Math.abs(offset);
+
+  return {
+    zIndex: length - absOffset,
+    scale: isCenter ? 1 : Math.max(0.62, 1 - absOffset * 0.14),
+    opacity: isCenter ? 1 : Math.max(0.2, 0.85 - absOffset * 0.3),
+    x: `${offset * 42}%`,
+    rotateY: Math.max(-35, Math.min(35, offset * -28)),
+    translateZ: isCenter ? 0 : -70 - absOffset * 55,
+    filter: isCenter ? 'blur(0px)' : `blur(${Math.min(3, absOffset * 1.2)}px)`,
+  };
+}
+
+export const Carousel3D: React.FC<Carousel3DProps> = ({
+  items,
+  autoPlay = false,
+  interval = 4000,
+  className = '',
+  disabled = false,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const goNext = useCallback(() => {
+    if (disabled || items.length === 0) return;
+    setCurrentIndex((prev) => (prev + 1) % items.length);
+  }, [disabled, items.length]);
+
+  const goPrev = useCallback(() => {
+    if (disabled || items.length === 0) return;
+    setCurrentIndex((prev) => (prev - 1 + items.length) % items.length);
+  }, [disabled, items.length]);
+
+  useEffect(() => {
+    if (!autoPlay || disabled || items.length < 2) return;
+    const timer = window.setInterval(goNext, interval);
+    return () => window.clearInterval(timer);
+  }, [autoPlay, disabled, goNext, interval, items.length]);
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      goNext();
+    }
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      goPrev();
+    }
+  };
+
+  const itemStyles = useMemo(
+    () => items.map((_, index) => getItemStyle(getRelativeOffset(index, currentIndex, items.length), items.length)),
+    [items, currentIndex],
+  );
+
+  if (items.length === 0) {
+    return (
+      <div className={`flex items-center justify-center h-[400px] text-text-muted text-sm ${className}`}>
+        Sin elementos en el carrusel
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={handleKeyDown}
+      role="region"
+      aria-roledescription="carousel"
+      aria-label="Carrusel 3D"
+      className={`relative w-full max-w-4xl mx-auto h-[420px] flex flex-col items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded-2xl ${className}`}
+    >
+      <div className="relative w-full max-w-md h-[300px] flex items-center justify-center perspective-[1200px]">
+        <div className="relative w-full h-full transform-style-3d">
+          <AnimatePresence initial={false}>
+            {items.map((item, index) => {
+              const offset = getRelativeOffset(index, currentIndex, items.length);
+              const styles = itemStyles[index];
+              const isCenter = offset === 0;
+
+              return (
+                <motion.div
+                  key={index}
+                  className={`absolute inset-0 select-none ${disabled ? 'cursor-not-allowed' : isCenter ? 'cursor-grab active:cursor-grabbing' : 'cursor-pointer'}`}
+                  onClick={() => {
+                    if (disabled || isCenter) return;
+                    setCurrentIndex(index);
+                  }}
+                  drag={isCenter && !disabled ? 'x' : false}
+                  dragConstraints={{ left: 0, right: 0 }}
+                  dragElastic={0.15}
+                  onDragEnd={(_event, info) => {
+                    if (disabled) return;
+                    if (info.offset.x < -50) goNext();
+                    else if (info.offset.x > 50) goPrev();
+                  }}
+                  whileHover={!disabled && isCenter ? { scale: 1.02 } : undefined}
+                  animate={{
+                    x: styles.x,
+                    scale: styles.scale,
+                    opacity: styles.opacity,
+                    rotateY: styles.rotateY,
+                    z: styles.translateZ,
+                    zIndex: styles.zIndex,
+                    filter: styles.filter,
+                  }}
+                  transition={{ type: 'spring', stiffness: 260, damping: 28 }}
+                  style={{ transformStyle: 'preserve-3d' }}
+                >
+                  <div
+                    className="absolute -bottom-8 left-1/2 w-[80%] h-5 rounded-full bg-black/40 pointer-events-none"
+                    style={{
+                      opacity: isCenter ? 0.55 : Math.max(0.08, 0.5 - Math.abs(offset) * 0.15),
+                      transform: `translateX(-50%) scale(${isCenter ? 1 : 0.75 - Math.abs(offset) * 0.08})`,
+                      filter: `blur(${isCenter ? 8 : 5}px)`,
+                    }}
+                  />
+                  <div className="w-full h-full">{item}</div>
+                </motion.div>
+              );
+            })}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      <div className="absolute top-1/2 left-0 right-0 flex justify-between px-2 -translate-y-1/2 pointer-events-none z-50">
+        <button
+          type="button"
+          onClick={goPrev}
+          disabled={disabled}
+          aria-label="Anterior"
+          className="w-11 h-11 rounded-full glass bg-bg-card/60 border border-border-app flex items-center justify-center pointer-events-auto hover:bg-accent/20 hover:text-accent transition-colors disabled:opacity-40 shadow-lg"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+        <button
+          type="button"
+          onClick={goNext}
+          disabled={disabled}
+          aria-label="Siguiente"
+          className="w-11 h-11 rounded-full glass bg-bg-card/60 border border-border-app flex items-center justify-center pointer-events-auto hover:bg-accent/20 hover:text-accent transition-colors disabled:opacity-40 shadow-lg"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+      </div>
+
+      {items.length > 1 && (
+        <div className="flex gap-2 mt-4 z-50" role="tablist" aria-label="Slides">
+          {items.map((_, index) => (
+            <button
+              key={index}
+              type="button"
+              role="tab"
+              aria-selected={index === currentIndex}
+              aria-label={`Ir a slide ${index + 1}`}
+              disabled={disabled}
+              onClick={() => !disabled && setCurrentIndex(index)}
+              className={`h-2 rounded-full transition-all duration-300 ${
+                index === currentIndex
+                  ? 'w-6 bg-accent'
+                  : 'w-2 bg-border-app hover:bg-accent/50'
+              } disabled:opacity-40`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};