alexui 1.0.0

package/components/Popover.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface PopoverProps {
+  trigger: React.ReactNode;
+  content: React.ReactNode;
+  placement?: PopoverPlacement;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  closeOnClickOutside?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+const placementClasses: Record<PopoverPlacement, string> = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+};
+
+export const Popover: React.FC<PopoverProps> = ({
+  trigger,
+  content,
+  placement = 'bottom',
+  isOpen: controlledOpen,
+  onOpenChange,
+  closeOnClickOutside = true,
+  disabled = false,
+  className = ''
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const setOpen = (open: boolean) => {
+    if (disabled) return;
+    if (!isControlled) setInternalOpen(open);
+    onOpenChange?.(open);
+  };
+
+  useEffect(() => {
+    if (!isOpen || !closeOnClickOutside) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, closeOnClickOutside]);
+
+  const animationVariants = {
+    hidden: { opacity: 0, scale: 0.92, y: placement === 'top' ? 6 : placement === 'bottom' ? -6 : 0 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      y: 0,
+      transition: { type: 'spring' as const, stiffness: 400, damping: 26 }
+    },
+    exit: { opacity: 0, scale: 0.92, transition: { duration: 0.12 } }
+  };
+
+  return (
+    <div ref={containerRef} className={`relative inline-block ${className}`}>
+      <div onClick={() => setOpen(!isOpen)} className={disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer'}>
+        {trigger}
+      </div>
+
+      <AnimatePresence>
+        {isOpen && !disabled && (
+          <motion.div
+            variants={animationVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            className={`absolute z-50 min-w-[200px] p-4 glass rounded-2xl border border-border-app shadow-xl ${placementClasses[placement]}`}
+          >
+            {content}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

package/components/PricingTable.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Check, Sparkles } from 'lucide-react';
+import { GlassCard } from './GlassCard';
+import { GlassButton } from './GlassButton';
+import { Badge } from './Badge';
+
+export interface PricingPlan {
+  id: string;
+  name: string;
+  price: string;
+  period?: string;
+  description: string;
+  features: string[];
+  highlighted?: boolean;
+  ctaLabel?: string;
+}
+
+export interface PricingTableProps {
+  plans?: PricingPlan[];
+  onSelectPlan?: (planId: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+const DEFAULT_PLANS: PricingPlan[] = [
+  {
+    id: 'free',
+    name: 'Starter',
+    price: '$0',
+    period: '/mes',
+    description: 'Para explorar el catálogo y copiar componentes.',
+    features: ['10 componentes/mes', 'Docs estáticas', 'Tema default'],
+    ctaLabel: 'Empezar gratis',
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    price: '$29',
+    period: '/mes',
+    description: 'Para equipos que construyen productos con AlexUI.',
+    features: ['Catálogo completo', 'CLI alexui', 'Prompts IA', 'Temas custom'],
+    highlighted: true,
+    ctaLabel: 'Elegir Pro',
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    price: 'Custom',
+    description: 'Soporte dedicado y componentes a medida.',
+    features: ['SLA prioritario', 'Bloques exclusivos', 'Onboarding', 'SSO'],
+    ctaLabel: 'Contactar ventas',
+  },
+];
+
+export const PricingTable: React.FC<PricingTableProps> = ({
+  plans = DEFAULT_PLANS,
+  onSelectPlan,
+  disabled = false,
+  className = ''
+}) => (
+  <div className={`w-full grid grid-cols-1 md:grid-cols-3 gap-4 ${className}`}>
+    {plans.map((plan, index) => (
+      <motion.div
+        key={plan.id}
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: index * 0.06 }}
+        className={plan.highlighted ? 'md:-mt-2 md:mb-2' : ''}
+      >
+        <GlassCard
+          variant={plan.highlighted ? 'elevated' : 'default'}
+          padding="lg"
+          hoverable={!plan.highlighted}
+          className={`h-full flex flex-col ${plan.highlighted ? 'ring-2 ring-accent/40' : ''}`}
+          headerAction={
+            plan.highlighted ? (
+              <Badge variant="accent" size="sm" dot pulse>
+                Popular
+              </Badge>
+            ) : undefined
+          }
+          title={plan.name}
+          description={plan.description}
+          footer={
+            <GlassButton
+              variant={plan.highlighted ? 'primary' : 'secondary'}
+              className="w-full"
+              disabled={disabled}
+              leftIcon={plan.highlighted ? <Sparkles className="w-4 h-4" /> : undefined}
+              onClick={() => onSelectPlan?.(plan.id)}
+            >
+              {plan.ctaLabel ?? 'Seleccionar'}
+            </GlassButton>
+          }
+        >
+          <div className="flex items-baseline gap-1 mb-4">
+            <span className="text-3xl font-extrabold text-text-main font-display">{plan.price}</span>
+            {plan.period && <span className="text-xs text-text-muted">{plan.period}</span>}
+          </div>
+          <ul className="flex flex-col gap-2.5">
+            {plan.features.map((feature) => (
+              <li key={feature} className="flex items-start gap-2 text-sm text-text-muted">
+                <Check className="w-4 h-4 text-accent flex-shrink-0 mt-0.5" />
+                <span>{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </GlassCard>
+      </motion.div>
+    ))}
+  </div>
+);

package/components/ProgressBar.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export interface ProgressBarProps {
+  value?: number;
+  max?: number;
+  showValue?: boolean;
+  label?: string;
+  striped?: boolean;
+  indeterminate?: boolean;
+  glow?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'accent' | 'success' | 'warning' | 'danger' | 'info';
+  disabled?: boolean;
+  className?: string;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  value = 0,
+  max = 100,
+  showValue = true,
+  label,
+  striped = false,
+  indeterminate = false,
+  glow = true,
+  size = 'md',
+  variant = 'accent',
+  disabled = false,
+  className = ''
+}) => {
+  const percentage = indeterminate ? 100 : Math.min(100, Math.max(0, (value / max) * 100));
+
+  const sizeClasses = {
+    sm: 'h-1.5 text-[9px]',
+    md: 'h-3 text-[10px]',
+    lg: 'h-5 text-xs'
+  };
+
+  const variantStyles = {
+    accent: {
+      bg: 'bg-accent',
+      text: 'text-accent',
+      glow: 'shadow-[0_0_12px_var(--color-accent)]',
+      border: 'border-accent/20'
+    },
+    success: {
+      bg: 'bg-green-500',
+      text: 'text-green-500',
+      glow: 'shadow-[0_0_12px_rgba(34,197,94,0.5)]',
+      border: 'border-green-500/20'
+    },
+    warning: {
+      bg: 'bg-yellow-500',
+      text: 'text-yellow-500',
+      glow: 'shadow-[0_0_12px_rgba(234,179,8,0.5)]',
+      border: 'border-yellow-500/20'
+    },
+    danger: {
+      bg: 'bg-red-500',
+      text: 'text-red-500',
+      glow: 'shadow-[0_0_12px_rgba(239,68,68,0.5)]',
+      border: 'border-red-500/20'
+    },
+    info: {
+      bg: 'bg-blue-500',
+      text: 'text-blue-500',
+      glow: 'shadow-[0_0_12px_rgba(59,130,246,0.5)]',
+      border: 'border-blue-500/20'
+    }
+  };
+
+  const currentStyle = variantStyles[variant];
+
+  return (
+    <div className={`w-full flex flex-col gap-1.5 select-none ${
+      disabled ? 'opacity-40 cursor-not-allowed pointer-events-none' : ''
+    } ${className}`}>
+      
+      {/* Top Labels */}
+      {(label || (showValue && !indeterminate)) && (
+        <div className="flex items-center justify-between px-1">
+          {label && (
+            <span className="text-xs font-bold text-text-main flex items-center gap-1.5">
+              <span className={`w-1.5 h-1.5 rounded-full ${currentStyle.bg}`} />
+              {label}
+            </span>
+          )}
+          {showValue && !indeterminate && (
+            <span className={`text-[10px] font-black font-mono tracking-wider ${currentStyle.text}`}>
+              {Math.round(percentage)}%
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Progress Track Container */}
+      <div className={`w-full bg-bg-card/45 border border-border-app/40 rounded-full relative overflow-hidden p-[2px] ${
+        sizeClasses[size]
+      } ${currentStyle.border}`}>
+        
+        {/* Animated Bar Fill */}
+        <motion.div
+          initial={{ width: 0 }}
+          animate={
+            indeterminate 
+              ? { left: ['-100%', '100%'], width: '40%' }
+              : { width: `${percentage}%` }
+          }
+          transition={
+            indeterminate 
+              ? { repeat: Infinity, duration: 1.5, ease: 'easeInOut' }
+              : { type: 'spring', stiffness: 100, damping: 15 }
+          }
+          className={`h-full rounded-full relative overflow-hidden transition-all z-10 ${
+            currentStyle.bg
+          } ${glow && !disabled ? currentStyle.glow : ''} ${
+            indeterminate ? 'absolute top-[2px] bottom-[2px]' : 'w-full'
+          }`}
+        >
+          {/* Animated Glow Flow overlay */}
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/25 to-transparent -translate-x-full animate-[shimmer_2s_infinite]" />
+
+          {/* Striped Background Style */}
+          {striped && (
+            <div 
+              className="absolute inset-0 opacity-15"
+              style={{
+                backgroundImage: 'linear-gradient(45deg, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent)',
+                backgroundSize: '16px 16px',
+                animation: 'progress-bar-stripes 1s linear infinite'
+              }}
+            />
+          )}
+        </motion.div>
+      </div>
+
+      {/* CSS Keyframes injected inline if not globally specified */}
+      <style>{`
+        @keyframes progress-bar-stripes {
+          from { background-position: 16px 0; }
+          to { background-position: 0 0; }
+        }
+        @keyframes shimmer {
+          100% {
+            transform: translateX(100%);
+          }
+        }
+      `}</style>
+
+    </div>
+  );
+};

package/components/RadioButton.tsx

@@ -0,0 +1,211 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+// V2.0 Radio components - triggered recompile
+// 1. CLASSIC RADIO BUTTON COMPONENT
+export interface RadioButtonProps {
+  checked: boolean;
+  onChange: () => void;
+  label?: string;
+  disabled?: boolean;
+  isInvalid?: boolean;
+  className?: string;
+  id?: string;
+  name?: string;
+}
+
+export const RadioButton: React.FC<RadioButtonProps> = ({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  isInvalid = false,
+  className = '',
+  id
+}) => {
+  const radioId = id || `radio-${Math.random().toString(36).substring(2, 9)}`;
+
+  const getBorderColor = () => {
+    if (isInvalid) return 'border-error';
+    if (checked && !disabled) return 'border-accent';
+    return 'border-border-app hover:border-text-muted/50';
+  };
+
+  return (
+    <div className={`flex items-center gap-3 select-none ${className}`}>
+      <button
+        id={radioId}
+        type="button"
+        onClick={onChange}
+        disabled={disabled}
+        className={`w-5.5 h-5.5 rounded-full border flex items-center justify-center transition-all duration-200 focus:outline-hidden ${getBorderColor()} ${
+          disabled ? 'opacity-40 cursor-not-allowed bg-bg-app/10' : 'cursor-pointer'
+        }`}
+        style={{
+          boxShadow: checked && !disabled && !isInvalid
+            ? '0 0 8px var(--color-accent-glow)'
+            : isInvalid
+            ? '0 0 8px var(--color-error-glow)'
+            : 'none'
+        }}
+        role="radio"
+        aria-checked={checked}
+      >
+        {checked && (
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ type: 'spring', stiffness: 500, damping: 20 }}
+            className={`w-2.5 h-2.5 rounded-full ${isInvalid ? 'bg-error' : 'bg-accent'}`}
+            style={{ backgroundColor: disabled ? 'var(--color-text-muted)' : undefined }}
+          />
+        )}
+      </button>
+
+      {label && (
+        <label
+          htmlFor={radioId}
+          onClick={onChange}
+          className={`text-sm font-medium ${
+            disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer text-text-main'
+          } ${isInvalid ? 'text-error' : ''}`}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+// 2. RADIO GROUP COMPONENT (Includes layoutId animation gliding between selections)
+export interface RadioOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps {
+  options: RadioOption[];
+  value: string;
+  onChange: (value: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  disabled?: boolean;
+  name?: string;
+}
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  options,
+  value,
+  onChange,
+  orientation = 'horizontal',
+  className = '',
+  disabled = false,
+  name
+}) => {
+  const groupName = name || `radiogroup-${Math.random().toString(36).substring(2, 9)}`;
+
+  return (
+    <div
+      className={`flex ${
+        orientation === 'horizontal' ? 'flex-row flex-wrap gap-5' : 'flex-col gap-3.5'
+      } ${className}`}
+      role="radiogroup"
+    >
+      {options.map((opt) => (
+        <RadioButton
+          key={opt.value}
+          checked={value === opt.value}
+          onChange={() => !disabled && !opt.disabled && onChange(opt.value)}
+          label={opt.label}
+          disabled={disabled || opt.disabled}
+          name={groupName}
+        />
+      ))}
+    </div>
+  );
+};
+
+// 3. PREMIUM GLASSMORPHIC RADIO CARDS (Selectable cards list)
+export interface RadioCardOption {
+  value: string;
+  title: string;
+  description: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface RadioCardGroupProps {
+  options: RadioCardOption[];
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const RadioCardGroup: React.FC<RadioCardGroupProps> = ({
+  options,
+  value,
+  onChange,
+  className = '',
+  disabled = false
+}) => {
+  return (
+    <div className={`grid grid-cols-1 md:grid-cols-2 gap-4 w-full ${className}`}>
+      {options.map((opt) => {
+        const isSelected = value === opt.value;
+        const cardDisabled = disabled || opt.disabled;
+
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => !cardDisabled && onChange(opt.value)}
+            disabled={cardDisabled}
+            className={`relative p-5 rounded-2xl border text-left flex items-start gap-4 transition-all duration-300 focus:outline-hidden ${
+              isSelected && !cardDisabled
+                ? 'bg-accent/5 border-accent shadow-md'
+                : 'bg-bg-card/40 border-border-app hover:border-border-app/80'
+            } ${cardDisabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
+            style={{
+              boxShadow: isSelected && !cardDisabled
+                ? '0 0 16px var(--color-accent-glow)'
+                : 'none'
+            }}
+          >
+            {/* selection indicator circle */}
+            <div className={`w-5 h-5 rounded-full border flex items-center justify-center flex-shrink-0 mt-0.5 transition-colors ${
+              isSelected && !cardDisabled ? 'border-accent' : 'border-border-app'
+            }`}>
+              {isSelected && (
+                <motion.div
+                  layoutId={`active-indicator-${opt.value}`}
+                  className="w-2.5 h-2.5 rounded-full bg-accent"
+                />
+              )}
+            </div>
+
+            {/* Optional icon */}
+            {opt.icon && (
+              <div className={`p-2 rounded-xl flex-shrink-0 flex items-center justify-center transition-colors ${
+                isSelected && !cardDisabled ? 'bg-accent/10 text-accent' : 'bg-bg-app text-text-muted'
+              }`}>
+                {opt.icon}
+              </div>
+            )}
+
+            {/* Title & Description */}
+            <div className="flex-1 flex flex-col gap-1 pr-2">
+              <span className="text-sm font-extrabold text-text-main leading-none">
+                {opt.title}
+              </span>
+              <span className="text-xs text-text-muted leading-normal">
+                {opt.description}
+              </span>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/components/Rating.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Star } from 'lucide-react';
+
+export interface RatingProps {
+  value?: number;
+  onChange?: (value: number) => void;
+  max?: number;
+  size?: 'sm' | 'md' | 'lg';
+  readOnly?: boolean;
+  showValue?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+const sizeMap = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8'
+};
+
+export const Rating: React.FC<RatingProps> = ({
+  value = 0,
+  onChange,
+  max = 5,
+  size = 'md',
+  readOnly = false,
+  showValue = false,
+  disabled = false,
+  className = ''
+}) => {
+  const [hoverValue, setHoverValue] = useState<number | null>(null);
+  const displayValue = hoverValue ?? value;
+  const isInteractive = !readOnly && !disabled && !!onChange;
+
+  return (
+    <div className={`inline-flex flex-col gap-1.5 select-none ${disabled ? 'opacity-40 cursor-not-allowed' : ''} ${className}`}>
+      <div
+        className="inline-flex items-center gap-1"
+        onMouseLeave={() => isInteractive && setHoverValue(null)}
+        role={isInteractive ? 'slider' : undefined}
+        aria-valuenow={value}
+        aria-valuemin={0}
+        aria-valuemax={max}
+      >
+        {Array.from({ length: max }, (_, i) => {
+          const starValue = i + 1;
+          const isFilled = starValue <= displayValue;
+
+          return (
+            <motion.button
+              key={starValue}
+              type="button"
+              disabled={!isInteractive}
+              onClick={() => onChange?.(starValue)}
+              onMouseEnter={() => isInteractive && setHoverValue(starValue)}
+              whileHover={isInteractive ? { scale: 1.15, rotate: -8 } : undefined}
+              whileTap={isInteractive ? { scale: 0.9 } : undefined}
+              transition={{ type: 'spring' as const, stiffness: 500, damping: 22 }}
+              className={`relative p-0.5 ${isInteractive ? 'cursor-pointer' : 'cursor-default'}`}
+              aria-label={`${starValue} de ${max} estrellas`}
+            >
+              <Star
+                className={`${sizeMap[size]} transition-colors duration-200 ${
+                  isFilled
+                    ? 'text-yellow-400 fill-yellow-400 drop-shadow-[0_0_6px_rgba(250,204,21,0.5)]'
+                    : 'text-border-app fill-transparent'
+                }`}
+              />
+            </motion.button>
+          );
+        })}
+      </div>
+
+      {showValue && (
+        <span className="text-[10px] font-bold text-text-muted font-mono">
+          {value.toFixed(1)} / {max}
+        </span>
+      )}
+    </div>
+  );
+};