alexui 1.0.0

package/components/DatePicker.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { Calendar, type CalendarProps } from './Calendar';
+
+export interface DatePickerProps extends Omit<CalendarProps, 'className'> {
+  placeholder?: string;
+  className?: string;
+  triggerClassName?: string;
+}
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  value = null,
+  onChange,
+  selectsRange = false,
+  startDate = null,
+  endDate = null,
+  onChangeRange,
+  placeholder = 'Seleccionar fecha',
+  disabled = false,
+  className = '',
+  triggerClassName = '',
+  ...calendarProps
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('mousedown', handleOutsideClick);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [isOpen]);
+
+  const formatDate = (date: Date) => {
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = date.getFullYear();
+    return `${day}/${month}/${year}`;
+  };
+
+  const getInputValue = () => {
+    if (selectsRange) {
+      if (startDate && endDate) {
+        return `${formatDate(startDate)} - ${formatDate(endDate)}`;
+      }
+      if (startDate) {
+        return `${formatDate(startDate)} - ...`;
+      }
+      return '';
+    }
+    return value ? formatDate(value) : '';
+  };
+
+  return (
+    <div ref={containerRef} className={`relative w-full min-w-[220px] ${className}`}>
+      <button
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`relative w-full flex items-center justify-between bg-bg-card border border-border-app rounded-xl px-4 py-3 text-sm text-left transition-all duration-300 hover:border-accent/50 ${
+          disabled ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' : 'cursor-pointer'
+        } ${isOpen ? 'border-accent shadow-[0_0_12px_var(--color-accent-glow)]' : ''} ${triggerClassName}`}
+      >
+        <span className={getInputValue() ? 'text-text-main font-semibold' : 'text-text-muted font-normal'}>
+          {getInputValue() || placeholder}
+        </span>
+        <CalendarIcon size={16} className="text-text-muted flex-shrink-0" />
+      </button>
+
+      <AnimatePresence>
+        {isOpen && !disabled && (
+          <motion.div
+            initial={{ opacity: 0, y: 8, scale: 0.95 }}
+            animate={{ opacity: 1, y: 4, scale: 1 }}
+            exit={{ opacity: 0, y: 8, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
+            className="absolute z-50 mt-1.5 left-0 shadow-xl rounded-2xl overflow-hidden glass border border-border-app/50"
+          >
+            <Calendar
+              value={value}
+              onChange={(date) => {
+                onChange?.(date);
+                setIsOpen(false);
+              }}
+              selectsRange={selectsRange}
+              startDate={startDate}
+              endDate={endDate}
+              onChangeRange={(start, end) => {
+                onChangeRange?.(start, end);
+                if (start && end) setIsOpen(false);
+              }}
+              disabled={disabled}
+              {...calendarProps}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

package/components/Divider.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export interface DividerProps {
+  orientation?: 'horizontal' | 'vertical';
+  label?: string;
+  variant?: 'solid' | 'dashed' | 'gradient';
+  className?: string;
+}
+
+export const Divider: React.FC<DividerProps> = ({
+  orientation = 'horizontal',
+  label,
+  variant = 'solid',
+  className = ''
+}) => {
+  const lineClass =
+    variant === 'dashed'
+      ? 'border-dashed border-border-app'
+      : variant === 'gradient'
+      ? 'bg-gradient-to-r from-transparent via-border-app to-transparent h-px border-0'
+      : 'bg-border-app';
+
+  if (orientation === 'vertical') {
+    return (
+      <motion.div
+        initial={{ scaleY: 0 }}
+        animate={{ scaleY: 1 }}
+        transition={{ type: 'spring' as const, stiffness: 300, damping: 24 }}
+        className={`w-px self-stretch min-h-[24px] ${variant === 'dashed' ? 'border-l border-border-app' : lineClass} ${className}`}
+        role="separator"
+        aria-orientation="vertical"
+      />
+    );
+  }
+
+  if (label) {
+    return (
+      <div className={`flex items-center gap-3 w-full ${className}`} role="separator">
+        <motion.div
+          initial={{ scaleX: 0 }}
+          animate={{ scaleX: 1 }}
+          className={`flex-1 h-px origin-left ${lineClass}`}
+        />
+        <span className="text-[10px] font-extrabold uppercase tracking-widest text-text-muted font-mono whitespace-nowrap">
+          {label}
+        </span>
+        <motion.div
+          initial={{ scaleX: 0 }}
+          animate={{ scaleX: 1 }}
+          className={`flex-1 h-px origin-right ${lineClass}`}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ scaleX: 0 }}
+      animate={{ scaleX: 1 }}
+      transition={{ type: 'spring' as const, stiffness: 300, damping: 24 }}
+      className={`w-full h-px origin-left ${lineClass} ${className}`}
+      role="separator"
+      aria-orientation="horizontal"
+    />
+  );
+};

package/components/Dock.tsx

@@ -0,0 +1,93 @@
+import React, { useRef } from 'react';
+import { motion, useMotionValue, useSpring, useTransform, MotionValue } from 'framer-motion';
+import { Skeleton } from './Skeleton';
+
+export interface DockProps {
+  items: {
+    icon: React.ReactNode;
+    label: string;
+    onClick?: () => void;
+  }[];
+  isLoading?: boolean;
+}
+
+export const Dock: React.FC<DockProps> = ({ items, isLoading = false }) => {
+  const mouseX = useMotionValue(Infinity);
+
+  if (isLoading) {
+    return (
+      <div
+        className="glass mx-auto flex h-16 items-center gap-4 rounded-2xl px-4 shadow-xl"
+        style={{ width: 'fit-content' }}
+      >
+        {Array(5).fill(0).map((_, idx) => (
+          <Skeleton key={idx} variant="circle" className="w-10 h-10" />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      onMouseMove={(e) => mouseX.set(e.pageX)}
+      onMouseLeave={() => mouseX.set(Infinity)}
+      className="glass mx-auto flex h-16 items-end gap-4 rounded-2xl px-4 pb-3 shadow-xl transition-all duration-300"
+      style={{ width: 'fit-content' }}
+    >
+      {items.map((item, idx) => (
+        <DockIcon key={idx} mouseX={mouseX} label={item.label} onClick={item.onClick}>
+          {item.icon}
+        </DockIcon>
+      ))}
+    </motion.div>
+  );
+};
+
+interface DockIconProps {
+  mouseX: MotionValue<number>;
+  label: string;
+  onClick?: () => void;
+  children: React.ReactNode;
+}
+
+const DockIcon: React.FC<DockIconProps> = ({ mouseX, label, onClick, children }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Calculate distance from mouse to icon center
+  const distance = useTransform(mouseX, (val) => {
+    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+    return val - bounds.x - bounds.width / 2;
+  });
+
+  // Scale calculations: closer to mouse = larger size
+  const widthTransform = useTransform(distance, [-150, 0, 150], [40, 72, 40]);
+  const heightTransform = useTransform(distance, [-150, 0, 150], [40, 72, 40]);
+
+  const width = useSpring(widthTransform, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+  const height = useSpring(heightTransform, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      style={{ width, height }}
+      onClick={onClick}
+      className="group relative flex cursor-pointer items-center justify-center rounded-full bg-bg-card border border-border-app text-text-main shadow-md hover:border-accent hover:shadow-[0_0_15px_rgba(99,102,241,0.3)] transition-colors duration-200"
+    >
+      {/* Tooltip */}
+      <span className="absolute -top-10 scale-0 rounded bg-text-main px-2 py-1 text-xs text-bg-app transition-all duration-200 group-hover:scale-100 shadow-md">
+        {label}
+      </span>
+      <div className="flex h-1/2 w-1/2 items-center justify-center">
+        {children}
+      </div>
+    </motion.div>
+  );
+};

package/components/DragDropLists.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export interface DragItem {
+  id: string;
+  title: string;
+  description?: string;
+  status: string; // the column/list identifier
+}
+
+export interface ColumnDefinition {
+  id: string;
+  title: string;
+  colorClass: string; // Tailwind colors like 'bg-accent/10 text-accent border-accent/20'
+  headerColor: string;
+}
+
+export interface DragDropListsProps {
+  initialItems: DragItem[];
+  columns: ColumnDefinition[];
+  onChange?: (items: DragItem[]) => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const DragDropLists: React.FC<DragDropListsProps> = ({
+  initialItems,
+  columns,
+  onChange,
+  className = '',
+  disabled = false
+}) => {
+  const [items, setItems] = useState<DragItem[]>(initialItems);
+  const [draggedId, setDraggedId] = useState<string | null>(null);
+  const [isOverColumn, setIsOverColumn] = useState<string | null>(null);
+
+  const handleDragStart = (e: React.DragEvent, id: string) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    setDraggedId(id);
+    e.dataTransfer.setData('text/plain', id);
+    // Visual drag feedback
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const handleDragOver = (e: React.DragEvent, columnId: string) => {
+    e.preventDefault();
+    if (disabled) return;
+    if (isOverColumn !== columnId) {
+      setIsOverColumn(columnId);
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    // Reset over column state when leaving
+    setIsOverColumn(null);
+  };
+
+  const handleDrop = (e: React.DragEvent, targetColumnId: string) => {
+    e.preventDefault();
+    setIsOverColumn(null);
+    if (disabled) return;
+
+    const id = e.dataTransfer.getData('text/plain') || draggedId;
+    if (!id) return;
+
+    const updatedItems = items.map((item) => {
+      if (item.id === id) {
+        return { ...item, status: targetColumnId };
+      }
+      return item;
+    });
+
+    setItems(updatedItems);
+    setDraggedId(null);
+    if (onChange) {
+      onChange(updatedItems);
+    }
+  };
+
+  const handleDragEnd = () => {
+    setDraggedId(null);
+    setIsOverColumn(null);
+  };
+
+  return (
+    <div className={`grid grid-cols-1 md:grid-cols-2 gap-6 w-full ${className}`}>
+      {columns.map((col) => {
+        const colItems = items.filter((item) => item.status === col.id);
+        const isTarget = isOverColumn === col.id;
+
+        return (
+          <div
+            key={col.id}
+            onDragOver={(e) => handleDragOver(e, col.id)}
+            onDragLeave={handleDragLeave}
+            onDrop={(e) => handleDrop(e, col.id)}
+            className={`flex flex-col h-[400px] rounded-2xl border transition-all duration-300 ${
+              isTarget 
+                ? 'bg-accent/5 border-accent shadow-[0_0_20px_rgba(var(--color-accent-rgb),0.08)] scale-[1.01]' 
+                : 'bg-bg-card border-border-app'
+            }`}
+          >
+            {/* Column Header */}
+            <div className="flex items-center justify-between p-4 border-b border-border-app">
+              <div className="flex items-center gap-2">
+                <span className={`w-2.5 h-2.5 rounded-full ${col.headerColor}`} />
+                <h3 className="font-bold text-text-main text-sm font-display">{col.title}</h3>
+              </div>
+              <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-bg-app border border-border-app text-text-muted">
+                {colItems.length}
+              </span>
+            </div>
+
+            {/* Column Body / Draggable Items Area */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-3 custom-scrollbar">
+              <AnimatePresence mode="popLayout">
+                {colItems.length === 0 ? (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 0.5 }}
+                    exit={{ opacity: 0 }}
+                    className="flex flex-col items-center justify-center h-full text-center text-text-muted text-xs border-2 border-dashed border-border-app/50 rounded-xl p-8"
+                  >
+                    Arrastrá un elemento acá
+                  </motion.div>
+                ) : (
+                  colItems.map((item) => (
+                    <motion.div
+                      layout
+                      key={item.id}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, scale: 0.95 }}
+                      transition={{ type: 'spring', stiffness: 350, damping: 30 }}
+                      draggable={!disabled}
+                      onDragStart={(e) => handleDragStart(e as unknown as React.DragEvent, item.id)}
+                      onDragEnd={handleDragEnd}
+                      className={`p-4 bg-bg-app rounded-xl border border-border-app shadow-sm select-none transition-all duration-200 ${
+                        disabled ? 'opacity-50 cursor-default' : 'cursor-grab active:cursor-grabbing hover:border-accent/30 hover:shadow-md'
+                      } ${draggedId === item.id ? 'opacity-30 border-dashed border-accent/40' : ''}`}
+                    >
+                      <h4 className="font-bold text-sm text-text-main">{item.title}</h4>
+                      {item.description && (
+                        <p className="text-xs text-text-muted mt-1 leading-relaxed">{item.description}</p>
+                      )}
+                    </motion.div>
+                  ))
+                )}
+              </AnimatePresence>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/components/Drawer.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+
+export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  position?: DrawerPosition;
+  title?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg' | 'full';
+  disabled?: boolean;
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+  isOpen,
+  onClose,
+  position = 'right',
+  title,
+  children,
+  footer,
+  className = '',
+  size = 'md',
+  disabled = false
+}) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Prevent scrolling on body when open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (isOpen) window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  if (disabled) return null;
+
+  // Size mapping (width for horizontal, height for vertical)
+  const sizeMap = {
+    sm: '300px',
+    md: '450px',
+    lg: '600px',
+    full: '100%'
+  };
+
+  const getPanelStyles = () => {
+    const baseStyles = "fixed bg-bg-card/90 backdrop-blur-2xl shadow-2xl flex flex-col z-[100] border-border-app";
+
+    switch (position) {
+      case 'left':
+        return `${baseStyles} top-0 left-0 h-full border-r`;
+      case 'right':
+        return `${baseStyles} top-0 right-0 h-full border-l`;
+      case 'top':
+        return `${baseStyles} top-0 left-0 w-full border-b rounded-b-3xl`;
+      case 'bottom':
+        return `${baseStyles} bottom-0 left-0 w-full border-t rounded-t-3xl`;
+    }
+  };
+
+  const getDimensionStyles = () => {
+    const dimension = sizeMap[size];
+    if (position === 'left' || position === 'right') return { width: dimension, maxWidth: '100vw' };
+    return { height: dimension, maxHeight: '90vh' };
+  };
+
+  const animationVariants = {
+    hidden: {
+      x: position === 'left' ? '-100%' : position === 'right' ? '100%' : 0,
+      y: position === 'top' ? '-100%' : position === 'bottom' ? '100%' : 0,
+    },
+    visible: {
+      x: 0,
+      y: 0,
+      transition: { type: 'spring' as const, damping: 25, stiffness: 200 }
+    },
+    exit: {
+      x: position === 'left' ? '-100%' : position === 'right' ? '100%' : 0,
+      y: position === 'top' ? '-100%' : position === 'bottom' ? '100%' : 0,
+      transition: { damping: 25, stiffness: 200 }
+    }
+  };
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-[999] flex">
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className="absolute inset-0 bg-black/40 backdrop-blur-sm"
+            onClick={onClose}
+          />
+
+          {/* Drawer Panel */}
+          <motion.div
+            variants={animationVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            className={`${getPanelStyles()} ${className}`}
+            style={getDimensionStyles()}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between p-5 border-b border-border-app">
+              <div className="font-bold text-lg text-text-main font-display">
+                {title}
+              </div>
+              <button
+                onClick={onClose}
+                className="p-2 rounded-xl text-text-muted hover:text-text-main hover:bg-bg-app transition-colors"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Content Area */}
+            <div className="flex-1 overflow-y-auto p-5 scrollbar-thin">
+              {children}
+            </div>
+
+            {/* Footer */}
+            {footer && (
+              <div className="p-5 border-t border-border-app bg-bg-app/30">
+                {footer}
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+};