alexui 1.0.0

package/components/Autocomplete.tsx

@@ -0,0 +1,144 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export interface AutocompleteProps {
+  value: string;
+  onChange: (value: string) => void;
+  suggestions: string[];
+  placeholder?: string;
+  label?: string;
+  disabled?: boolean;
+  isInvalid?: boolean;
+  className?: string;
+}
+
+export const Autocomplete: React.FC<AutocompleteProps> = ({
+  value,
+  onChange,
+  suggestions,
+  placeholder = 'Escribe para autocompletar...',
+  label,
+  disabled = false,
+  isInvalid = false,
+  className = ''
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close suggestions 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);
+  }, []);
+
+  // Filter suggestions reactively in real time
+  const filteredSuggestions = useMemo(() => {
+    if (!value) return [];
+    const query = value.toLowerCase().trim();
+    if (query.length === 0) return [];
+    
+    return suggestions.filter(
+      (s) => s.toLowerCase().includes(query) && s.toLowerCase() !== query
+    );
+  }, [value, suggestions]);
+
+  // Handle suggestion selection
+  const handleSelect = (suggestion: string) => {
+    onChange(suggestion);
+    setIsOpen(false);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    onChange(val);
+    setIsOpen(true);
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    setIsOpen(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
+  return (
+    <div ref={containerRef} className={`relative w-full flex flex-col gap-1.5 ${className}`}>
+      {label && (
+        <span className="text-xs font-bold text-text-muted uppercase tracking-wider px-1">
+          {label}
+        </span>
+      )}
+
+      {/* Input Outer wrapper */}
+      <div className="relative rounded-xl overflow-visible transition-all duration-300">
+        
+        {/* Glow border ring */}
+        <motion.div
+          animate={{
+            opacity: isFocused && !disabled ? 1 : 0,
+            scale: isFocused && !disabled ? 1 : 0.98,
+          }}
+          transition={{ duration: 0.25 }}
+          className="absolute -inset-[1px] bg-gradient-to-r from-accent to-pink-500 rounded-xl pointer-events-none z-0 blur-[1px]"
+        />
+
+        {/* Input container */}
+        <div className={`relative bg-bg-card/60 border rounded-xl z-10 flex items-center transition-colors duration-300 ${
+          isFocused && !disabled ? 'border-transparent' : 'border-border-app'
+        } ${disabled ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' : ''}`}>
+          
+          <input
+            type="text"
+            value={value}
+            onChange={handleInputChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            placeholder={placeholder}
+            className={`w-full bg-transparent py-3 px-4 text-sm text-text-main placeholder-text-muted/50 focus:outline-hidden z-10 relative ${
+              disabled ? 'cursor-not-allowed' : ''
+            }`}
+            style={{
+              boxShadow: isFocused && !disabled && !isInvalid
+                ? '0 0 10px var(--color-accent-glow)'
+                : isInvalid
+                ? '0 0 10px var(--color-error-glow)'
+                : 'none'
+            }}
+          />
+        </div>
+
+        {/* Suggestions Popover panel */}
+        <AnimatePresence>
+          {isOpen && filteredSuggestions.length > 0 && !disabled && (
+            <motion.ul
+              initial={{ opacity: 0, y: 10, scale: 0.95 }}
+              animate={{ opacity: 1, y: 4, scale: 1 }}
+              exit={{ opacity: 0, y: 10, scale: 0.95 }}
+              transition={{ type: 'spring', stiffness: 350, damping: 25 }}
+              className="absolute left-0 w-full glass bg-bg-card rounded-xl shadow-2xl py-1.5 z-50 border border-border-app/50 max-h-48 overflow-y-auto"
+            >
+              {filteredSuggestions.map((suggestion, idx) => (
+                <li
+                  key={idx}
+                  onClick={() => handleSelect(suggestion)}
+                  className="px-4 py-2.5 text-xs font-semibold text-text-main hover:bg-accent/10 hover:text-accent transition-colors duration-200 cursor-pointer"
+                >
+                  {suggestion}
+                </li>
+              ))}
+            </motion.ul>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};

package/components/Avatar.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+
+export interface AvatarProps {
+  src?: string;
+  alt?: string;
+  name?: string;
+  size?: AvatarSize;
+  status?: AvatarStatus;
+  showStatus?: boolean;
+  ring?: boolean;
+  className?: string;
+}
+
+const sizeMap: Record<AvatarSize, { container: string; text: string; status: string }> = {
+  xs: { container: 'w-7 h-7', text: 'text-[9px]', status: 'w-2 h-2 border' },
+  sm: { container: 'w-9 h-9', text: 'text-[10px]', status: 'w-2.5 h-2.5 border-2' },
+  md: { container: 'w-12 h-12', text: 'text-xs', status: 'w-3 h-3 border-2' },
+  lg: { container: 'w-16 h-16', text: 'text-sm', status: 'w-3.5 h-3.5 border-2' },
+  xl: { container: 'w-24 h-24', text: 'text-lg', status: 'w-4 h-4 border-2' }
+};
+
+const statusColors: Record<AvatarStatus, string> = {
+  online: 'bg-green-500',
+  offline: 'bg-text-muted',
+  busy: 'bg-red-500',
+  away: 'bg-yellow-500'
+};
+
+const getInitials = (name?: string) => {
+  if (!name) return '?';
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+};
+
+export const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt,
+  name,
+  size = 'md',
+  status = 'online',
+  showStatus = false,
+  ring = false,
+  className = ''
+}) => {
+  const [hasError, setHasError] = useState(false);
+  const styles = sizeMap[size];
+  const showImage = src && !hasError;
+
+  return (
+    <motion.div
+      whileHover={{ scale: 1.04 }}
+      transition={{ type: 'spring' as const, stiffness: 400, damping: 20 }}
+      className={`relative inline-flex flex-shrink-0 ${className}`}
+    >
+      <div
+        className={`${styles.container} rounded-full overflow-hidden flex items-center justify-center font-extrabold font-display select-none ${
+          ring ? 'ring-2 ring-accent/40 ring-offset-2 ring-offset-bg-app' : ''
+        } ${showImage ? 'bg-bg-app' : 'bg-accent/15 text-accent border border-accent/20'}`}
+      >
+        {showImage ? (
+          <img
+            src={src}
+            alt={alt || name || 'Avatar'}
+            className="w-full h-full object-cover"
+            onError={() => setHasError(true)}
+          />
+        ) : (
+          <span className={styles.text}>{getInitials(name || alt)}</span>
+        )}
+      </div>
+
+      {showStatus && (
+        <span
+          className={`absolute bottom-0 right-0 rounded-full border-bg-card ${styles.status} ${statusColors[status]}`}
+          title={status}
+        />
+      )}
+    </motion.div>
+  );
+};
+
+export interface AvatarGroupProps {
+  avatars: Array<Pick<AvatarProps, 'src' | 'name' | 'alt'>>;
+  max?: number;
+  size?: AvatarSize;
+  className?: string;
+}
+
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({
+  avatars,
+  max = 4,
+  size = 'sm',
+  className = ''
+}) => {
+  const visible = avatars.slice(0, max);
+  const overflow = avatars.length - max;
+
+  return (
+    <div className={`flex items-center ${className}`}>
+      {visible.map((avatar, index) => (
+        <div
+          key={`${avatar.name || avatar.alt || index}-${index}`}
+          className={index > 0 ? '-ml-3' : ''}
+          style={{ zIndex: visible.length - index }}
+        >
+          <Avatar {...avatar} size={size} ring />
+        </div>
+      ))}
+      {overflow > 0 && (
+        <div className="-ml-3 z-0">
+          <div className={`${sizeMap[size].container} rounded-full bg-bg-card border border-border-app flex items-center justify-center text-[10px] font-bold text-text-muted`}>
+            +{overflow}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/components/Badge.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export type BadgeVariant = 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+
+export interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  dot?: boolean;
+  pulse?: boolean;
+  className?: string;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  accent: 'bg-accent/15 text-accent border-accent/25',
+  success: 'bg-green-500/15 text-green-500 border-green-500/25',
+  warning: 'bg-yellow-500/15 text-yellow-500 border-yellow-500/25',
+  danger: 'bg-red-500/15 text-red-500 border-red-500/25',
+  info: 'bg-blue-500/15 text-blue-500 border-blue-500/25',
+  neutral: 'bg-bg-app text-text-muted border-border-app'
+};
+
+const sizeStyles: Record<BadgeSize, string> = {
+  sm: 'text-[9px] px-2 py-0.5 gap-1',
+  md: 'text-[10px] px-2.5 py-1 gap-1.5',
+  lg: 'text-xs px-3 py-1.5 gap-2'
+};
+
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant = 'accent',
+  size = 'md',
+  dot = false,
+  pulse = false,
+  className = ''
+}) => {
+  return (
+    <motion.span
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ type: 'spring' as const, stiffness: 400, damping: 24 }}
+      className={`inline-flex items-center font-extrabold uppercase tracking-wider rounded-full border whitespace-nowrap ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
+    >
+      {dot && (
+        <span className="relative flex h-2 w-2">
+          {pulse && (
+            <span className={`absolute inline-flex h-full w-full rounded-full opacity-60 animate-ping ${
+              variant === 'accent' ? 'bg-accent' :
+              variant === 'success' ? 'bg-green-500' :
+              variant === 'warning' ? 'bg-yellow-500' :
+              variant === 'danger' ? 'bg-red-500' :
+              variant === 'info' ? 'bg-blue-500' : 'bg-text-muted'
+            }`} />
+          )}
+          <span className={`relative inline-flex rounded-full h-2 w-2 ${
+            variant === 'accent' ? 'bg-accent' :
+            variant === 'success' ? 'bg-green-500' :
+            variant === 'warning' ? 'bg-yellow-500' :
+            variant === 'danger' ? 'bg-red-500' :
+            variant === 'info' ? 'bg-blue-500' : 'bg-text-muted'
+          }`} />
+        </span>
+      )}
+      {children}
+    </motion.span>
+  );
+};
+
+export interface BadgeGroupProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const BadgeGroup: React.FC<BadgeGroupProps> = ({ children, className = '' }) => (
+  <div className={`flex flex-wrap items-center gap-2 ${className}`}>
+    {children}
+  </div>
+);

package/components/Breadcrumb.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ChevronRight, Home } from 'lucide-react';
+
+export interface BreadcrumbItem {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  onNavigate?: (id: string) => void;
+  showHome?: boolean;
+  separator?: React.ReactNode;
+  className?: string;
+}
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  onNavigate,
+  showHome = true,
+  separator,
+  className = ''
+}) => {
+  const Sep = separator ?? <ChevronRight className="w-3.5 h-3.5 text-text-muted/50 flex-shrink-0" />;
+
+  return (
+    <nav aria-label="Breadcrumb" className={`flex items-center flex-wrap gap-1.5 text-sm ${className}`}>
+      {showHome && (
+        <>
+          <button
+            type="button"
+            onClick={() => onNavigate?.('home')}
+            className="inline-flex items-center gap-1 text-text-muted hover:text-accent transition-colors cursor-pointer"
+          >
+            <Home className="w-3.5 h-3.5" />
+            <span className="font-semibold">Inicio</span>
+          </button>
+          {items.length > 0 && Sep}
+        </>
+      )}
+
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+
+        return (
+          <React.Fragment key={item.id}>
+            {isLast ? (
+              <motion.span
+                layoutId="breadcrumb-active"
+                className="inline-flex items-center gap-1.5 font-extrabold text-accent font-display"
+              >
+                {item.icon}
+                {item.label}
+              </motion.span>
+            ) : (
+              <button
+                type="button"
+                onClick={() => onNavigate?.(item.id)}
+                className="inline-flex items-center gap-1.5 text-text-muted hover:text-text-main font-semibold transition-colors cursor-pointer"
+              >
+                {item.icon}
+                {item.label}
+              </button>
+            )}
+            {!isLast && Sep}
+          </React.Fragment>
+        );
+      })}
+    </nav>
+  );
+};