alexui 1.0.0

package/components/MultiSelect.tsx

@@ -0,0 +1,158 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronDown, Check, X } from 'lucide-react';
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface MultiSelectProps {
+  options: MultiSelectOption[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  max?: number;
+  className?: string;
+}
+
+export const MultiSelect: React.FC<MultiSelectProps> = ({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder = 'Seleccionar opciones...',
+  disabled = false,
+  max,
+  className = ''
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const selectedOptions = useMemo(
+    () => options.filter((opt) => value.includes(opt.value)),
+    [options, value]
+  );
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const toggleOption = (optionValue: string) => {
+    if (disabled) return;
+    const isSelected = value.includes(optionValue);
+    if (isSelected) {
+      onChange(value.filter((v) => v !== optionValue));
+      return;
+    }
+    if (max && value.length >= max) return;
+    onChange([...value, optionValue]);
+  };
+
+  const removeChip = (optionValue: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (disabled) return;
+    onChange(value.filter((v) => v !== optionValue));
+  };
+
+  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>
+      )}
+
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        className={`w-full min-h-11 rounded-xl border border-border-app bg-bg-card/60 px-3 py-2 text-left transition-all duration-300 flex items-center justify-between gap-2 ${
+          disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer hover:border-accent/50'
+        } ${isOpen ? 'border-accent shadow-[0_0_10px_var(--color-accent-glow)]' : ''}`}
+      >
+        <div className="flex flex-wrap items-center gap-1.5 flex-1 min-w-0">
+          {selectedOptions.length === 0 ? (
+            <span className="text-sm text-text-muted/70">{placeholder}</span>
+          ) : (
+            selectedOptions.map((opt) => (
+              <span
+                key={opt.value}
+                className="inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-accent/15 text-accent border border-accent/25 text-xs font-bold"
+              >
+                {opt.label}
+                {!disabled && (
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={(e) => removeChip(opt.value, e)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        removeChip(opt.value, e as unknown as React.MouseEvent);
+                      }
+                    }}
+                    className="hover:text-red-400 transition-colors cursor-pointer"
+                    aria-label={`Quitar ${opt.label}`}
+                  >
+                    <X className="w-3 h-3" />
+                  </span>
+                )}
+              </span>
+            ))
+          )}
+        </div>
+        <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>
+          <ChevronDown className="w-4 h-4 text-text-muted flex-shrink-0" />
+        </motion.div>
+      </button>
+
+      <AnimatePresence>
+        {isOpen && !disabled && (
+          <motion.ul
+            initial={{ opacity: 0, y: 8, scale: 0.98 }}
+            animate={{ opacity: 1, y: 4, scale: 1 }}
+            exit={{ opacity: 0, y: 8, scale: 0.98 }}
+            transition={{ duration: 0.15 }}
+            className="absolute left-0 right-0 top-full mt-1 z-50 glass bg-bg-card border border-border-app rounded-xl shadow-2xl py-1.5 max-h-56 overflow-y-auto"
+          >
+            {options.map((opt) => {
+              const isSelected = value.includes(opt.value);
+              const isMaxed = Boolean(max && value.length >= max && !isSelected);
+              return (
+                <li key={opt.value}>
+                  <button
+                    type="button"
+                    disabled={opt.disabled || isMaxed}
+                    onClick={() => toggleOption(opt.value)}
+                    className={`w-full px-3 py-2 text-sm flex items-center justify-between gap-2 transition-colors ${
+                      isSelected ? 'bg-accent/10 text-accent font-bold' : 'text-text-main hover:bg-bg-app'
+                    } ${opt.disabled || isMaxed ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
+                  >
+                    <span>{opt.label}</span>
+                    {isSelected && <Check className="w-4 h-4" />}
+                  </button>
+                </li>
+              );
+            })}
+          </motion.ul>
+        )}
+      </AnimatePresence>
+
+      {max && (
+        <p className="text-[10px] text-text-muted px-1">
+          {value.length}/{max} seleccionados
+        </p>
+      )}
+    </div>
+  );
+};

package/components/NumberInput.tsx

@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronUp, ChevronDown, Plus, Minus } from 'lucide-react';
+
+export interface NumberInputProps {
+  value: number | null;
+  onChange: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  mode?: 'decimal' | 'currency';
+  currency?: string; // e.g. 'ARS', 'USD', 'EUR'
+  prefix?: string;
+  suffix?: string;
+  showButtons?: boolean;
+  buttonLayout?: 'stacked' | 'horizontal';
+  integerOnly?: boolean;
+  maxFractionDigits?: number;
+  disabled?: boolean;
+  className?: string;
+  placeholder?: string;
+}
+
+export const NumberInput: React.FC<NumberInputProps> = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  mode = 'decimal',
+  currency = 'USD',
+  prefix,
+  suffix,
+  showButtons = true,
+  buttonLayout = 'stacked',
+  integerOnly = false,
+  maxFractionDigits = 2,
+  disabled = false,
+  className = '',
+  placeholder = '0'
+}) => {
+  const [displayValue, setDisplayValue] = useState('');
+
+  // Formatter configuration
+  const formatNumber = (val: number | null): string => {
+    if (val === null || isNaN(val)) return '';
+
+    if (mode === 'currency') {
+      return new Intl.NumberFormat('es-AR', {
+        style: 'currency',
+        currency: currency,
+        minimumFractionDigits: integerOnly ? 0 : 2,
+        maximumFractionDigits: integerOnly ? 0 : maxFractionDigits
+      }).format(val);
+    }
+
+    const formatted = new Intl.NumberFormat('es-AR', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: integerOnly ? 0 : maxFractionDigits
+    }).format(val);
+
+    const fullPrefix = prefix ? `${prefix} ` : '';
+    const fullSuffix = suffix ? ` ${suffix}` : '';
+    return `${fullPrefix}${formatted}${fullSuffix}`;
+  };
+
+  // Synchronize internal display when value prop changes
+  useEffect(() => {
+    setDisplayValue(formatNumber(value));
+  }, [value, mode, currency, prefix, suffix, integerOnly, maxFractionDigits]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let rawInput = e.target.value;
+    
+    // If empty, return null
+    if (rawInput === '') {
+      onChange(null);
+      setDisplayValue('');
+      return;
+    }
+
+    // Clean formatting characters to parse value
+    // es-AR uses dot for thousands and comma for decimal
+    // Convert to standard float representation (dot as decimal separator)
+    let cleaned = rawInput
+      .replace(new RegExp(`[^0-9\\,\\-]`, 'g'), '') // keep digits, minus, and comma
+      .replace(',', '.'); // convert comma to dot
+
+    let parsed = parseFloat(cleaned);
+    if (!isNaN(parsed)) {
+      if (integerOnly) parsed = Math.round(parsed);
+      onChange(parsed);
+      setDisplayValue(rawInput); // let user type naturally
+    }
+  };
+
+  const handleBlur = () => {
+    if (value === null) {
+      setDisplayValue('');
+      return;
+    }
+
+    // Enforce min/max boundaries on blur
+    let bounded = value;
+    if (min !== undefined && bounded < min) bounded = min;
+    if (max !== undefined && bounded > max) bounded = max;
+
+    onChange(bounded);
+    setDisplayValue(formatNumber(bounded));
+  };
+
+  const increment = () => {
+    if (disabled) return;
+    const current = value === null ? 0 : value;
+    let next = current + step;
+    if (max !== undefined && next > max) next = max;
+    onChange(next);
+  };
+
+  const decrement = () => {
+    if (disabled) return;
+    const current = value === null ? 0 : value;
+    let next = current - step;
+    if (min !== undefined && next < min) next = min;
+    onChange(next);
+  };
+
+  const isStacked = buttonLayout === 'stacked';
+
+  return (
+    <div className={`relative flex items-stretch bg-bg-card/60 border border-border-app rounded-xl overflow-hidden transition-all duration-300 focus-within:border-accent ${
+      disabled ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' : ''
+    } ${className}`}>
+      
+      {/* Horizontal Layout - Decrement Button on the Left */}
+      {showButtons && !isStacked && (
+        <button
+          type="button"
+          onClick={decrement}
+          disabled={disabled || (min !== undefined && value !== null && value <= min)}
+          className={`px-3 border-r border-border-app flex items-center justify-center text-text-muted hover:text-text-main hover:bg-bg-app/50 transition-colors focus:outline-hidden ${
+            disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+          }`}
+        >
+          <Minus className="w-3.5 h-3.5" />
+        </button>
+      )}
+
+      {/* Input element */}
+      <input
+        type="text"
+        value={displayValue}
+        onChange={handleInputChange}
+        onBlur={handleBlur}
+        disabled={disabled}
+        placeholder={placeholder}
+        className={`w-full bg-transparent py-3 px-4 text-sm text-text-main focus:outline-hidden ${
+          disabled ? 'cursor-not-allowed' : ''
+        } ${showButtons && isStacked ? 'pr-12' : ''}`}
+      />
+
+      {/* Horizontal Layout - Increment Button on the Right */}
+      {showButtons && !isStacked && (
+        <button
+          type="button"
+          onClick={increment}
+          disabled={disabled || (max !== undefined && value !== null && value >= max)}
+          className={`px-3 border-l border-border-app flex items-center justify-center text-text-muted hover:text-text-main hover:bg-bg-app/50 transition-colors focus:outline-hidden ${
+            disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+          }`}
+        >
+          <Plus className="w-3.5 h-3.5" />
+        </button>
+      )}
+
+      {/* Stacked Layout - Buttons Stacked on the Right edge */}
+      {showButtons && isStacked && (
+        <div className="absolute right-0 top-0 bottom-0 w-8 border-l border-border-app flex flex-col items-stretch z-20">
+          <button
+            type="button"
+            onClick={increment}
+            disabled={disabled || (max !== undefined && value !== null && value >= max)}
+            className={`flex-1 flex items-center justify-center text-text-muted hover:text-text-main hover:bg-bg-app/50 transition-colors border-b border-border-app focus:outline-hidden ${
+              disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+            }`}
+          >
+            <ChevronUp className="w-3.5 h-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={decrement}
+            disabled={disabled || (min !== undefined && value !== null && value <= min)}
+            className={`flex-1 flex items-center justify-center text-text-muted hover:text-text-main hover:bg-bg-app/50 transition-colors focus:outline-hidden ${
+              disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+            }`}
+          >
+            <ChevronDown className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      )}
+
+    </div>
+  );
+};

package/components/Panel.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronDown } from 'lucide-react';
+
+export interface PanelProps {
+  title: string;
+  children: React.ReactNode;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  defaultOpen?: boolean;
+  collapsible?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const Panel: React.FC<PanelProps> = ({
+  title,
+  children,
+  subtitle,
+  icon,
+  defaultOpen = true,
+  collapsible = true,
+  disabled = false,
+  className = ''
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const toggle = () => {
+    if (disabled || !collapsible) return;
+    setIsOpen((prev) => !prev);
+  };
+
+  return (
+    <div className={`glass rounded-2xl border border-border-app overflow-hidden ${disabled ? 'opacity-50' : ''} ${className}`}>
+      <button
+        type="button"
+        onClick={toggle}
+        disabled={disabled || !collapsible}
+        className={`w-full flex items-center justify-between gap-3 p-4 text-left transition-colors ${
+          collapsible && !disabled ? 'cursor-pointer hover:bg-bg-app/40' : 'cursor-default'
+        }`}
+      >
+        <div className="flex items-center gap-3 min-w-0">
+          {icon && (
+            <div className="p-2 rounded-xl bg-accent/10 text-accent flex-shrink-0">
+              {icon}
+            </div>
+          )}
+          <div className="flex flex-col min-w-0">
+            <span className="font-extrabold text-text-main font-display truncate">{title}</span>
+            {subtitle && <span className="text-xs text-text-muted truncate">{subtitle}</span>}
+          </div>
+        </div>
+        {collapsible && (
+          <motion.div
+            animate={{ rotate: isOpen ? 180 : 0 }}
+            transition={{ type: 'spring' as const, stiffness: 300, damping: 22 }}
+            className="text-text-muted flex-shrink-0"
+          >
+            <ChevronDown className="w-5 h-5" />
+          </motion.div>
+        )}
+      </button>
+
+      <AnimatePresence initial={false}>
+        {isOpen && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ type: 'spring' as const, stiffness: 300, damping: 28 }}
+            className="overflow-hidden"
+          >
+            <div className="px-4 pb-4 pt-0 border-t border-border-app/50">
+              <div className="pt-4 text-sm text-text-muted leading-relaxed">
+                {children}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export interface FieldsetProps {
+  legend: string;
+  children: React.ReactNode;
+  description?: string;
+  className?: string;
+}
+
+export const Fieldset: React.FC<FieldsetProps> = ({
+  legend,
+  children,
+  description,
+  className = ''
+}) => (
+  <fieldset className={`glass rounded-2xl border border-border-app p-5 flex flex-col gap-4 ${className}`}>
+    <legend className="px-2 text-sm font-extrabold text-accent font-display">{legend}</legend>
+    {description && <p className="text-xs text-text-muted -mt-2">{description}</p>}
+    {children}
+  </fieldset>
+);

package/components/PasswordInput.tsx

@@ -0,0 +1,203 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Eye, EyeOff, Check, X } from 'lucide-react';
+
+export interface PasswordInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  showStrength?: boolean;
+  showRequirements?: boolean;
+}
+
+export const PasswordInput: React.FC<PasswordInputProps> = ({
+  label = 'Contraseña',
+  error,
+  showStrength = true,
+  showRequirements = true,
+  className = '',
+  value = '',
+  onChange,
+  onFocus,
+  onBlur,
+  disabled = false,
+  ...props
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const valString = String(value);
+
+  // Requirements analysis
+  const requirements = [
+    { label: 'Al menos 8 caracteres', test: (val: string) => val.length >= 8 },
+    { label: 'Una mayúscula', test: (val: string) => /[A-Z]/.test(val) },
+    { label: 'Una minúscula', test: (val: string) => /[a-z]/.test(val) },
+    { label: 'Un número', test: (val: string) => /[0-9]/.test(val) },
+    { label: 'Un carácter especial (@, $, !, etc.)', test: (val: string) => /[^A-Za-z0-9]/.test(val) }
+  ];
+
+  // Calculate password strength rating (from 0 to 4)
+  const calculateStrength = (val: string): { score: number; text: string; color: string } => {
+    if (!val) return { score: 0, text: 'Vacía', color: 'bg-text-muted/30' };
+    
+    let passedTests = 0;
+    if (val.length >= 8) passedTests++;
+    if (/[A-Z]/.test(val) && /[a-z]/.test(val)) passedTests++;
+    if (/[0-9]/.test(val)) passedTests++;
+    if (/[^A-Za-z0-9]/.test(val)) passedTests++;
+
+    switch (passedTests) {
+      case 1:
+        return { score: 1, text: 'Débil', color: 'bg-error' };
+      case 2:
+        return { score: 2, text: 'Aceptable', color: 'bg-warning' };
+      case 3:
+        return { score: 3, text: 'Buena', color: 'bg-info' };
+      case 4:
+        return { score: 4, text: 'Fuerte', color: 'bg-success' };
+      default:
+        return { score: 0, text: 'Muy Débil', color: 'bg-error' };
+    }
+  };
+
+  const strength = calculateStrength(valString);
+
+  return (
+    <div className={`relative w-full flex flex-col gap-2 ${className}`}>
+      
+      {/* Input Outer Glow Wrapper */}
+      <div className="relative rounded-xl overflow-hidden transition-all duration-300">
+        
+        {/* Glow border ring */}
+        <motion.div
+          animate={{
+            opacity: isFocused && !disabled ? 1 : 0,
+            scale: isFocused && !disabled ? 1 : 0.95,
+          }}
+          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-[2px]"
+        />
+
+        {/* Input container */}
+        <div className={`relative bg-bg-card border border-border-app 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' : ''}`}>
+          
+          <div className="flex-1 relative">
+            {/* Floating Label */}
+            <motion.label
+              initial={{ y: 14, scale: 1 }}
+              animate={{
+                y: isFocused || valString.length > 0 || !!props.placeholder ? 4 : 14,
+                scale: isFocused || valString.length > 0 || !!props.placeholder ? 0.75 : 1,
+                color: isFocused && !disabled 
+                  ? 'var(--color-accent)' 
+                  : 'var(--color-text-muted)'
+              }}
+              transition={{ type: 'spring', stiffness: 200, damping: 20 }}
+              className="absolute left-4 origin-top-left pointer-events-none select-none text-sm z-20 font-medium"
+            >
+              {label}
+            </motion.label>
+
+            <input
+              type={showPassword ? 'text' : 'password'}
+              value={value}
+              onChange={onChange}
+              onFocus={(e) => {
+                setIsFocused(true);
+                if (onFocus) onFocus(e);
+              }}
+              onBlur={(e) => {
+                setIsFocused(false);
+                if (onBlur) onBlur(e);
+              }}
+              disabled={disabled}
+              className={`w-full bg-transparent px-4 pb-2 pt-7 text-sm text-text-main focus:outline-hidden z-10 relative ${
+                disabled ? 'cursor-not-allowed' : ''
+              }`}
+              {...props}
+            />
+          </div>
+
+          {/* Visibility toggle button */}
+          <button
+            type="button"
+            onClick={() => !disabled && setShowPassword(!showPassword)}
+            disabled={disabled}
+            className={`pr-4 flex items-center justify-center text-text-muted hover:text-text-main transition-colors focus:outline-hidden ${
+              disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+            }`}
+          >
+            {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Strength Indicator bars */}
+      {showStrength && valString.length > 0 && !disabled && (
+        <div className="flex flex-col gap-1.5 px-1 mt-0.5">
+          <div className="flex items-center justify-between text-[10px] font-bold text-text-muted uppercase">
+            <span>Fortaleza de clave</span>
+            <span style={{ color: `var(--color-${strength.score === 1 ? 'error' : strength.score === 2 ? 'warning' : strength.score === 3 ? 'info' : 'success'})` }}>
+              {strength.text}
+            </span>
+          </div>
+          <div className="grid grid-cols-4 gap-1.5 h-1.5 w-full rounded-full bg-bg-app border border-border-app/40 overflow-hidden">
+            {[1, 2, 3, 4].map((index) => (
+              <div
+                key={index}
+                className={`h-full transition-all duration-500 ${
+                  index <= strength.score ? strength.color : 'bg-transparent'
+                }`}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Password requirements list */}
+      {showRequirements && isFocused && !disabled && (
+        <motion.div
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          exit={{ opacity: 0, height: 0 }}
+          className="flex flex-col gap-1.5 bg-bg-card/40 border border-border-app/30 rounded-xl p-3.5 mt-1"
+        >
+          <span className="text-[10px] font-bold text-text-muted uppercase tracking-wider mb-0.5 font-display">
+            Requisitos de seguridad
+          </span>
+          <div className="flex flex-col gap-1">
+            {requirements.map((req, index) => {
+              const passed = req.test(valString);
+              return (
+                <div key={index} className="flex items-center gap-2 text-xs">
+                  {passed ? (
+                    <Check className="w-3.5 h-3.5 text-success stroke-[3]" />
+                  ) : (
+                    <X className="w-3.5 h-3.5 text-text-muted/40 stroke-[3]" />
+                  )}
+                  <span className={passed ? 'text-text-main font-medium' : 'text-text-muted'}>
+                    {req.label}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </motion.div>
+      )}
+
+      {/* Error message */}
+      {error && !isFocused && (
+        <motion.span
+          initial={{ opacity: 0, y: -4 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-xs text-red-500 font-semibold px-2"
+        >
+          {error}
+        </motion.span>
+      )}
+
+    </div>
+  );
+};