alexui 1.0.0

package/components/Checkbox.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+// 1. INDIVIDUAL CHECKBOX COMPONENT
+export interface CheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  isInvalid?: boolean;
+  className?: string;
+  id?: string;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  isInvalid = false,
+  className = '',
+  id
+}) => {
+  const checkboxId = id || `check-${Math.random().toString(36).substring(2, 9)}`;
+
+  const handleToggle = () => {
+    if (disabled) return;
+    onChange(!checked);
+  };
+
+  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={checkboxId}
+        type="button"
+        onClick={handleToggle}
+        disabled={disabled}
+        className={`w-5.5 h-5.5 rounded-md 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',
+          backgroundColor: checked && !disabled && !isInvalid
+            ? 'var(--color-accent)'
+            : 'transparent'
+        }}
+        role="checkbox"
+        aria-checked={checked}
+      >
+        <AnimatePresence mode="wait">
+          {checked && (
+            <motion.svg
+              initial={{ scale: 0.6, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.6, opacity: 0 }}
+              transition={{ type: 'spring', stiffness: 500, damping: 25 }}
+              className="w-3.5 h-3.5 text-white stroke-2"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <motion.path
+                initial={{ pathLength: 0 }}
+                animate={{ pathLength: 1 }}
+                transition={{ duration: 0.2 }}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M5 13l4 4L19 7"
+              />
+            </motion.svg>
+          )}
+        </AnimatePresence>
+      </button>
+
+      {label && (
+        <label
+          htmlFor={checkboxId}
+          onClick={handleToggle}
+          className={`text-sm font-medium ${
+            disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer text-text-main'
+          } ${isInvalid ? 'text-error' : ''}`}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+// 2. CHECKBOX GROUP COMPONENT
+export interface CheckboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface CheckboxGroupProps {
+  options: CheckboxOption[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  disabled?: boolean;
+}
+
+export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
+  options,
+  value,
+  onChange,
+  orientation = 'horizontal',
+  className = '',
+  disabled = false
+}) => {
+  const handleOptionChange = (optionValue: string, checked: boolean) => {
+    if (disabled) return;
+    if (checked) {
+      onChange([...value, optionValue]);
+    } else {
+      onChange(value.filter((val) => val !== optionValue));
+    }
+  };
+
+  return (
+    <div
+      className={`flex ${
+        orientation === 'horizontal' ? 'flex-row flex-wrap gap-5' : 'flex-col gap-3.5'
+      } ${className}`}
+    >
+      {options.map((opt) => (
+        <Checkbox
+          key={opt.value}
+          checked={value.includes(opt.value)}
+          onChange={(checked) => handleOptionChange(opt.value, checked)}
+          label={opt.label}
+          disabled={disabled || opt.disabled}
+        />
+      ))}
+    </div>
+  );
+};
+
+// 3. INTERACTIVE CHECKLIST COMPONENT (Todo item lists)
+export interface ChecklistItem {
+  id: string | number;
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+}
+
+export interface ChecklistProps {
+  items: ChecklistItem[];
+  onChange: (items: ChecklistItem[]) => void;
+  className?: string;
+}
+
+export const Checklist: React.FC<ChecklistProps> = ({
+  items,
+  onChange,
+  className = ''
+}) => {
+  const handleItemToggle = (itemId: string | number) => {
+    const nextItems = items.map((item) => {
+      if (item.id === itemId) {
+        return { ...item, checked: !item.checked };
+      }
+      return item;
+    });
+    onChange(nextItems);
+  };
+
+  return (
+    <div className={`flex flex-col gap-2 bg-bg-card/40 border border-border-app/40 rounded-2xl p-4 w-full ${className}`}>
+      {items.map((item) => (
+        <div
+          key={item.id}
+          className={`flex items-center justify-between p-2.5 rounded-xl border border-transparent transition-all duration-300 ${
+            item.checked 
+              ? 'bg-accent/5 border-accent/10' 
+              : 'hover:bg-bg-app/40'
+          } ${item.disabled ? 'opacity-40 cursor-not-allowed' : ''}`}
+        >
+          <Checkbox
+            checked={item.checked}
+            onChange={() => handleItemToggle(item.id)}
+            label={item.label}
+            disabled={item.disabled}
+            className="flex-1"
+          />
+          {item.checked && (
+            <motion.span
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              className="text-[10px] bg-accent/20 border border-accent/20 px-2 py-0.5 rounded-full text-accent font-bold font-mono"
+            >
+              Completado
+            </motion.span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

package/components/ChipsInput.tsx

@@ -0,0 +1,152 @@
+import React, { useState, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+
+export interface ChipsInputProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  label?: string;
+  disabled?: boolean;
+  isInvalid?: boolean;
+  separator?: ','; // support comma as separator
+  blacklist?: string[]; // block certain values
+  className?: string;
+}
+
+export const ChipsInput: React.FC<ChipsInputProps> = ({
+  value,
+  onChange,
+  placeholder = 'Escribe y presiona Enter...',
+  label,
+  disabled = false,
+  isInvalid = false,
+  separator = ',',
+  blacklist = [],
+  className = ''
+}) => {
+  const [inputValue, setInputValue] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const addChip = (text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+
+    // Check duplicate
+    if (value.includes(trimmed)) return;
+
+    // Check blacklist / key blocking filter
+    if (blacklist.includes(trimmed.toLowerCase())) return;
+
+    onChange([...value, trimmed]);
+    setInputValue('');
+  };
+
+  const removeChip = (indexToRemove: number) => {
+    onChange(value.filter((_, idx) => idx !== indexToRemove));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      addChip(inputValue);
+    } else if (e.key === 'Backspace' && inputValue === '' && value.length > 0) {
+      removeChip(value.length - 1);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+
+    if (separator === ',' && val.endsWith(',')) {
+      addChip(val.slice(0, -1));
+    } else {
+      setInputValue(val);
+    }
+  };
+
+  return (
+    <div className={`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 container 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.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]"
+        />
+
+        {/* Chips Area Container */}
+        <div 
+          onClick={() => !disabled && inputRef.current?.focus()}
+          className={`relative bg-bg-card/60 border rounded-xl z-10 p-2 flex flex-wrap gap-2 items-center transition-all duration-300 ${
+            isFocused && !disabled ? 'border-transparent' : 'border-border-app'
+          } ${disabled ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' : 'cursor-text'}`}
+          style={{
+            boxShadow: isFocused && !disabled && !isInvalid
+              ? '0 0 10px var(--color-accent-glow)'
+              : isInvalid
+              ? '0 0 10px var(--color-error-glow)'
+              : 'none'
+          }}
+        >
+          {/* Render Chips List */}
+          <AnimatePresence>
+            {value.map((chip, idx) => (
+              <motion.div
+                key={chip}
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0.8, opacity: 0 }}
+                transition={{ type: 'spring', stiffness: 500, damping: 25 }}
+                className="flex items-center gap-1 bg-accent/10 border border-accent/20 px-2.5 py-1 rounded-lg text-xs font-semibold text-accent"
+              >
+                <span>{chip}</span>
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (!disabled) removeChip(idx);
+                  }}
+                  disabled={disabled}
+                  className={`p-0.5 rounded-md hover:bg-accent/20 transition-colors focus:outline-hidden ${
+                    disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+                  }`}
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              </motion.div>
+            ))}
+          </AnimatePresence>
+
+          {/* Typing input field */}
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            disabled={disabled}
+            placeholder={value.length === 0 ? placeholder : ''}
+            className={`flex-1 min-w-[120px] bg-transparent py-1 px-2 text-sm text-text-main placeholder-text-muted/50 focus:outline-hidden ${
+              disabled ? 'cursor-not-allowed' : ''
+            }`}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/components/CircularKnob.tsx

@@ -0,0 +1,240 @@
+import React, { useRef, useState, useEffect } from 'react';
+
+export interface CircularKnobProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  size?: number;
+  unit?: string;
+  label?: string;
+  variant?: '360' | 'semicircle'; // 360 full range, semicircle 180 (or 270 standard knob)
+  disabled?: boolean;
+  className?: string;
+}
+
+export const CircularKnob: React.FC<CircularKnobProps> = ({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  size = 120,
+  unit = '%',
+  label = 'Volumen',
+  variant = 'semicircle',
+  disabled = false,
+  className = ''
+}) => {
+  const knobRef = useRef<SVGSVGElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  // Normalize value to percentage
+  const percentage = Math.min(Math.max((value - min) / (max - min), 0), 1);
+
+  // Knob configuration depending on variant
+  // 'semicircle' (standard knob) goes from -135deg to +135deg (total 270deg span, gap at the bottom)
+  // '360' goes from 0deg to 360deg (starting at top)
+  const startAngle = variant === 'semicircle' ? -135 : 0;
+  const endAngle = variant === 'semicircle' ? 135 : 360;
+  const totalAngleSpan = endAngle - startAngle;
+
+  const currentAngle = startAngle + percentage * totalAngleSpan;
+
+  const updateValueFromAngle = (clientX: number, clientY: number) => {
+    if (!knobRef.current) return;
+    const rect = knobRef.current.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+
+    const dx = clientX - cx;
+    const dy = clientY - cy;
+
+    // Angle in degrees from -180 to 180 where 0 is right, 90 is bottom, -90 is top
+    let angle = Math.atan2(dy, dx) * (180 / Math.PI);
+
+    // Normalize angle relative to the top (0 deg is top, clockwise positive)
+    let angleFromTop = angle + 90;
+    if (angleFromTop < -180) angleFromTop += 360;
+    if (angleFromTop > 180) angleFromTop -= 360;
+
+    let targetPercent = 0;
+    if (variant === 'semicircle') {
+      // Standard active zone: -135 to 135.
+      // Gap is at the bottom (between 135 and 225 relative to top, i.e., 135 to 180 and -180 to -135)
+      let targetAngle = angleFromTop;
+      if (targetAngle > 135) targetAngle = 135;
+      if (targetAngle < -135) targetAngle = -135;
+      
+      targetPercent = (targetAngle + 135) / 270;
+    } else {
+      // 360 mode: 0 to 360.
+      let angleFromTop360 = angle + 90;
+      if (angleFromTop360 < 0) angleFromTop360 += 360;
+      targetPercent = angleFromTop360 / 360;
+    }
+
+    const nextValue = min + targetPercent * (max - min);
+    onChange(Math.round(nextValue));
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (disabled) return;
+    setIsDragging(true);
+    updateValueFromAngle(e.clientX, e.clientY);
+  };
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    if (disabled) return;
+    setIsDragging(true);
+    updateValueFromAngle(e.touches[0].clientX, e.touches[0].clientY);
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging) return;
+      updateValueFromAngle(e.clientX, e.clientY);
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!isDragging) return;
+      // Prevent scrolling while dragging knob
+      if (e.cancelable) e.preventDefault();
+      updateValueFromAngle(e.touches[0].clientX, e.touches[0].clientY);
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      window.addEventListener('touchmove', handleTouchMove, { passive: false });
+      window.addEventListener('touchend', handleMouseUp);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      window.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('touchend', handleMouseUp);
+    };
+  }, [isDragging]);
+
+  // SVG parameters for progress arc
+  const radius = size * 0.4;
+  const strokeWidth = size * 0.07;
+  const center = size / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  // Semicircle stroke length adjustments
+  // If 270deg, length is 3/4 of circle
+  const arcLength = variant === 'semicircle' ? circumference * 0.75 : circumference;
+  const strokeDashoffset = arcLength - percentage * arcLength;
+  const strokeDasharray = `${arcLength} ${circumference}`;
+
+  // Rotate rotation mapping of progress bar
+  const arcRotation = variant === 'semicircle' ? 135 : -90;
+
+  return (
+    <div className={`flex flex-col items-center gap-2 select-none ${className}`}>
+      
+      {/* Knob SVG container */}
+      <div 
+        className={`relative ${
+          disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-grab'
+        } ${isDragging ? 'cursor-grabbing' : ''}`}
+        style={{ width: size, height: size }}
+      >
+        <svg
+          ref={knobRef}
+          width={size}
+          height={size}
+          onMouseDown={handleMouseDown}
+          onTouchStart={handleTouchStart}
+          className="w-full h-full overflow-visible"
+        >
+          {/* Subtle Outer Glow Ring on drag */}
+          {isDragging && !disabled && (
+            <circle
+              cx={center}
+              cy={center}
+              r={radius + strokeWidth / 2 + 4}
+              className="fill-none stroke-accent/5 stroke-2 blur-[2px]"
+            />
+          )}
+
+          {/* Background Arc Track */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            className="fill-none stroke-border-app/30"
+            strokeWidth={strokeWidth}
+            strokeDasharray={arcLength === circumference ? undefined : strokeDasharray}
+            style={{
+              transform: `rotate(${arcRotation}deg)`,
+              transformOrigin: '50% 50%',
+              strokeLinecap: 'round'
+            }}
+          />
+
+          {/* Glowing Active Progress Arc */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            className="fill-none stroke-accent transition-all duration-75"
+            strokeWidth={strokeWidth}
+            strokeDasharray={strokeDasharray}
+            strokeDashoffset={strokeDashoffset}
+            style={{
+              transform: `rotate(${arcRotation}deg)`,
+              transformOrigin: '50% 50%',
+              strokeLinecap: 'round',
+              filter: isDragging ? 'drop-shadow(0px 0px 4px var(--color-accent))' : 'none'
+            }}
+          />
+
+          {/* Inner Rotating Knob Dial Disc */}
+          <g 
+            style={{
+              transform: `rotate(${currentAngle}deg)`,
+              transformOrigin: '50% 50%'
+            }}
+            className="transition-transform duration-75"
+          >
+            <circle
+              cx={center}
+              cy={center}
+              r={radius - strokeWidth / 2 - 2}
+              className="fill-bg-card stroke-border-app/50"
+              strokeWidth="1"
+            />
+            {/* Indicator Dot on the dial edge */}
+            <circle
+              cx={center}
+              cy={center - radius + strokeWidth + 4}
+              r="3.5"
+              className="fill-accent"
+            />
+          </g>
+        </svg>
+
+        {/* Value Display in the center of the Knob */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+          <span className="text-sm font-extrabold text-text-main font-mono leading-none flex items-baseline">
+            {value}
+            <span className="text-[10px] text-text-muted font-bold ml-0.5">{unit}</span>
+          </span>
+          {label && (
+            <span className="text-[9px] font-bold text-text-muted/70 uppercase tracking-widest mt-1">
+              {label}
+            </span>
+          )}
+        </div>
+      </div>
+
+    </div>
+  );
+};

package/components/CodeVisualizer.tsx

@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+
+export interface CodeVisualizerProps {
+  code: string;
+  className?: string;
+}
+
+// Custom Lexer / Parser using regex to tokenize TypeScript/JSX code on the fly
+const highlightCode = (rawCode: string) => {
+  if (!rawCode) return '';
+
+  // Escape HTML entities to prevent unescaped injections
+  const escaped = rawCode
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  // Unified regular expression parser matching all core tokens sequentially:
+  // Group 1: Comments (line & block)
+  // Group 2: Strings (single, double, or backticks)
+  // Group 3: JavaScript/TypeScript Keywords
+  // Group 4: React / PascalCase Components (e.g., <Card3D / </Card3D)
+  // Group 5: HTML standard tags (e.g., <div / </div)
+  // Group 6: JSX Properties (e.g., isLoading= / onClick=)
+  // Group 7: Numeric values
+  const tokenRegex = /(\/\/.*|\/\*[\s\S]*?\*\/)|('(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"|`(?:\\.|[^`\\])*`)|(\b(?:export|import|const|let|var|function|return|if|else|switch|case|break|default|from|true|false|null|undefined|interface|type|extends|as|typeof|new|await|async|try|catch|finally|throw|class|implements|public|private|protected|readonly)\b)|(&lt;\/?[A-Z][a-zA-Z0-9_]*\b)|(&lt;\/?[a-z][a-zA-Z0-9_]*\b)|(\b[a-zA-Z0-9_]+(?=\s*=))|(\b\d+\b)/g;
+
+  return escaped.replace(tokenRegex, (match, comment, str, keyword, reactComp, htmlTag, jsxProp, num) => {
+    if (comment) {
+      return `<span class="text-text-muted/50 italic select-none">${match}</span>`;
+    }
+    if (str) {
+      return `<span class="text-amber-600 dark:text-amber-300 font-medium">${match}</span>`;
+    }
+    if (keyword) {
+      return `<span class="text-accent font-bold">${match}</span>`;
+    }
+    if (reactComp) {
+      return `<span class="text-pink-600 dark:text-pink-400 font-extrabold">${match}</span>`;
+    }
+    if (htmlTag) {
+      return `<span class="text-sky-600 dark:text-sky-400 font-bold">${match}</span>`;
+    }
+    if (jsxProp) {
+      return `<span class="text-purple-600 dark:text-purple-400 italic">${match}</span>`;
+    }
+    if (num) {
+      return `<span class="text-indigo-600 dark:text-indigo-400">${match}</span>`;
+    }
+    return match;
+  });
+};
+
+export const CodeVisualizer: React.FC<CodeVisualizerProps> = ({ code, className = '' }) => {
+  const highlightedHtml = useMemo(() => {
+    return highlightCode(code);
+  }, [code]);
+
+  return (
+    <pre className={`w-full h-full max-h-[500px] overflow-auto p-5 text-left font-mono text-xs text-text-main bg-bg-card/90 rounded-2xl leading-relaxed select-text border border-border-app/40 ${className}`}>
+      <code 
+        className="block whitespace-pre select-all"
+        dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+      />
+    </pre>
+  );
+};