alexui 1.0.0

package/components/CascadeSelect.tsx

@@ -0,0 +1,232 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronRight, ChevronDown, Loader2 } from 'lucide-react';
+
+export interface CascadeOption {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  description?: string;
+  children?: CascadeOption[];
+}
+
+export interface CascadeSelectProps {
+  options: CascadeOption[];
+  value: string[]; // array representing selected path, e.g. ['arg', 'ba', 'caba']
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const CascadeSelect: React.FC<CascadeSelectProps> = ({
+  options,
+  value,
+  onChange,
+  placeholder = 'Selecciona una categoría...',
+  label,
+  disabled = false,
+  className = ''
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activePath, setActivePath] = useState<string[]>([]);
+  const [loadingColumn, setLoadingColumn] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close 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);
+  }, []);
+
+  // Sync activePath with value when opening
+  useEffect(() => {
+    if (isOpen) {
+      setActivePath(value);
+    }
+  }, [isOpen, value]);
+
+  // Compute options for each active column level
+  const columns = useMemo(() => {
+    const list: CascadeOption[][] = [options];
+    
+    for (let i = 0; i < activePath.length; i++) {
+      const parentVal = activePath[i];
+      const activeOptions = list[i];
+      const matched = activeOptions?.find((opt) => opt.value === parentVal);
+      
+      if (matched && matched.children && matched.children.length > 0) {
+        list.push(matched.children);
+      } else {
+        break;
+      }
+    }
+    
+    return list;
+  }, [options, activePath]);
+
+  const handleOptionClick = (option: CascadeOption, levelIndex: number) => {
+    if (disabled) return;
+    
+    const nextPath = [...activePath.slice(0, levelIndex), option.value];
+    setActivePath(nextPath);
+
+    if (option.children && option.children.length > 0) {
+      // Simulate loading state for next level column
+      setLoadingColumn(levelIndex + 1);
+      setTimeout(() => {
+        setLoadingColumn(null);
+      }, 500);
+    } else {
+      // Leaf option selected, submit selections
+      onChange(nextPath);
+      setIsOpen(false);
+    }
+  };
+
+  // Get selected leaf option to access its icon
+  const selectedLeafOption = useMemo(() => {
+    if (value.length === 0) return null;
+    let currentOptions = options;
+    let match: CascadeOption | null = null;
+    
+    for (const val of value) {
+      const found = currentOptions?.find((opt) => opt.value === val);
+      if (found) {
+        match = found;
+        currentOptions = found.children || [];
+      } else {
+        break;
+      }
+    }
+    return match;
+  }, [options, value]);
+
+  // Get displayed text representation
+  const displayText = useMemo(() => {
+    return selectedLeafOption ? selectedLeafOption.label : '';
+  }, [selectedLeafOption]);
+
+  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>
+      )}
+
+      {/* Select Box Trigger */}
+      <div className="relative rounded-xl overflow-visible transition-all duration-300">
+        
+        {/* Glow border ring */}
+        <motion.div
+          animate={{
+            opacity: isOpen ? 1 : 0,
+            scale: isOpen ? 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]"
+        />
+
+        <div
+          onClick={() => !disabled && setIsOpen(!isOpen)}
+          className={`w-full relative bg-bg-card/60 border rounded-xl z-10 p-3 min-h-[48px] flex items-center justify-between gap-3 transition-colors duration-300 select-none ${
+            isOpen ? 'border-transparent' : 'border-border-app'
+          } ${disabled ? 'opacity-40 cursor-not-allowed bg-bg-app/10' : 'cursor-pointer'}`}
+          style={{
+            boxShadow: isOpen && !disabled ? '0 0 10px var(--color-accent-glow)' : 'none'
+          }}
+        >
+          <div className="flex items-center gap-2 pl-1 truncate">
+            {selectedLeafOption?.icon && (
+              <span className="flex-shrink-0 text-sm select-none">{selectedLeafOption.icon}</span>
+            )}
+            <span className={`text-sm font-medium truncate ${
+              displayText ? 'text-text-main font-bold' : 'text-text-muted/60'
+            }`}>
+              {displayText || placeholder}
+            </span>
+          </div>
+
+          <motion.div
+            animate={{ rotate: isOpen ? 180 : 0 }}
+            className="text-text-muted pr-1"
+          >
+            <ChevronDown className="w-4 h-4" />
+          </motion.div>
+        </div>
+
+        {/* Cascading Columns Popover Panel */}
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              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 mt-1 glass bg-bg-card rounded-2xl shadow-2xl p-2 z-50 border border-border-app/50 flex gap-1 max-h-80 overflow-visible min-w-[280px] max-w-full"
+            >
+              {columns.map((levelOptions, idx) => {
+                const isLoading = loadingColumn === idx;
+                const activeVal = activePath[idx];
+
+                return (
+                  <div
+                    key={idx}
+                    className="flex flex-col gap-1 w-48 border-r border-border-app/30 last:border-0 pr-1 last:pr-0 overflow-y-auto max-h-72 min-h-[160px]"
+                  >
+                    {isLoading ? (
+                      <div className="flex-1 flex items-center justify-center p-6 text-accent">
+                        <Loader2 className="w-5 h-5 animate-spin" />
+                      </div>
+                    ) : (
+                      levelOptions.map((opt) => {
+                        const isSelected = activeVal === opt.value;
+                        const hasChildren = opt.children && opt.children.length > 0;
+
+                        return (
+                          <button
+                            key={opt.value}
+                            type="button"
+                            onClick={() => handleOptionClick(opt, idx)}
+                            className={`w-full px-3 py-2 rounded-xl text-xs font-semibold flex items-center justify-between transition-colors duration-200 cursor-pointer ${
+                              isSelected
+                                ? 'bg-accent/15 text-accent font-bold'
+                                : 'text-text-main hover:bg-bg-app'
+                            }`}
+                          >
+                            <div className="flex items-center gap-2.5 min-w-0">
+                              {opt.icon && <span className="flex-shrink-0">{opt.icon}</span>}
+                              <div className="flex flex-col items-start min-w-0">
+                                <span className="truncate w-full text-left">{opt.label}</span>
+                                {opt.description && (
+                                  <span className="text-[9px] text-text-muted truncate w-full text-left font-normal mt-0.5">
+                                    {opt.description}
+                                  </span>
+                                )}
+                              </div>
+                            </div>
+                            {hasChildren && (
+                              <ChevronRight className="w-3.5 h-3.5 text-text-muted/70 flex-shrink-0" />
+                            )}
+                          </button>
+                        );
+                      })
+                    )}
+                  </div>
+                );
+              })}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+      </div>
+    </div>
+  );
+};