alexui 1.0.0

package/components/SlidingTabs.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export interface TabItem {
+  id: string | number;
+  label: string;
+}
+
+export interface SlidingTabsProps {
+  tabs: TabItem[];
+  activeTab: string | number;
+  onChange: (id: string | number) => void;
+  className?: string;
+  pillColor?: string; // Optional background color override
+}
+
+export const SlidingTabs: React.FC<SlidingTabsProps> = ({
+  tabs,
+  activeTab,
+  onChange,
+  className = '',
+  pillColor = 'bg-accent'
+}) => {
+  return (
+    <div 
+      className={`inline-flex bg-bg-card/50 border border-border-app p-1 rounded-xl glass ${className}`}
+    >
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTab;
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            onClick={() => onChange(tab.id)}
+            className={`relative px-4 py-2 rounded-lg text-xs font-bold transition-colors duration-200 select-none cursor-pointer focus:outline-hidden ${
+              isActive ? 'text-white' : 'text-text-muted hover:text-text-main'
+            }`}
+          >
+            {/* Sliding Pill Background overlay */}
+            {isActive && (
+              <motion.div
+                layoutId="activeTabPill"
+                className={`absolute inset-0 rounded-lg -z-5 shadow-sm ${pillColor}`}
+                transition={{ type: 'spring', stiffness: 380, damping: 30 }}
+              />
+            )}
+            
+            <span className="relative z-10">{tab.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/components/SortableList.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Reorder, useDragControls } from 'framer-motion';
+import { GripVertical } from 'lucide-react';
+
+export interface SortableItem {
+  id: string;
+  [key: string]: any;
+}
+
+export interface SortableListProps<T extends SortableItem> {
+  items: T[];
+  onReorder: (newOrder: T[]) => void;
+  renderItem: (item: T, dragControls?: any) => React.ReactNode;
+  axis?: 'y' | 'x';
+  useDragHandle?: boolean;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const SortableList = <T extends SortableItem>({
+  items,
+  onReorder,
+  renderItem,
+  axis = 'y',
+  useDragHandle = false,
+  className = '',
+  disabled = false
+}: SortableListProps<T>) => {
+  return (
+    <Reorder.Group
+      axis={axis}
+      values={items}
+      onReorder={onReorder}
+      className={`flex ${axis === 'y' ? 'flex-col gap-2' : 'flex-row gap-4'} ${className}`}
+    >
+      {items.map((item) => (
+        <SortableListItem
+          key={item.id}
+          item={item}
+          renderItem={renderItem}
+          useDragHandle={useDragHandle}
+          disabled={disabled}
+        />
+      ))}
+    </Reorder.Group>
+  );
+};
+
+// Internal wrapper to properly use dragControls per item
+const SortableListItem = <T extends SortableItem>({
+  item,
+  renderItem,
+  useDragHandle,
+  disabled
+}: {
+  item: T;
+  renderItem: (item: T, dragControls?: any) => React.ReactNode;
+  useDragHandle: boolean;
+  disabled: boolean;
+}) => {
+  const controls = useDragControls();
+
+  return (
+    <Reorder.Item
+      value={item}
+      id={item.id}
+      dragListener={!disabled && !useDragHandle}
+      dragControls={controls}
+      className={`relative bg-bg-card rounded-xl border border-border-app overflow-hidden shadow-sm transition-shadow hover:shadow-md ${disabled ? 'opacity-50' : 'cursor-grab active:cursor-grabbing'}`}
+      whileDrag={{
+        scale: 1.02,
+        boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        zIndex: 50,
+      }}
+    >
+      <div className="flex items-center w-full h-full">
+        {useDragHandle && (
+          <div
+            className="p-3 cursor-grab active:cursor-grabbing hover:bg-bg-app flex items-center justify-center border-r border-border-app h-full text-text-muted"
+            onPointerDown={(e) => !disabled && controls.start(e)}
+          >
+            <GripVertical className="w-5 h-5" />
+          </div>
+        )}
+        <div className="flex-1 w-full h-full">
+          {renderItem(item, controls)}
+        </div>
+      </div>
+    </Reorder.Item>
+  );
+};

package/components/SpeedDial.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Plus, X } from 'lucide-react';
+
+export interface SpeedDialAction {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  onClick?: () => void;
+  colorClass?: string;
+}
+
+export interface SpeedDialProps {
+  actions: SpeedDialAction[];
+  direction?: 'up' | 'down' | 'left' | 'right';
+  disabled?: boolean;
+  className?: string;
+}
+
+const ACTION_GAP = 52;
+const FAB_SIZE = 56;
+
+const getActionStyle = (
+  direction: NonNullable<SpeedDialProps['direction']>,
+  index: number
+): React.CSSProperties => {
+  const offset = (index + 1) * ACTION_GAP;
+
+  switch (direction) {
+    case 'up':
+      return { bottom: FAB_SIZE + 8 + index * ACTION_GAP, left: '50%', transform: 'translateX(-50%)' };
+    case 'down':
+      return { top: FAB_SIZE + 8 + index * ACTION_GAP, left: '50%', transform: 'translateX(-50%)' };
+    case 'left':
+      return { right: FAB_SIZE + 8 + index * ACTION_GAP, top: '50%', transform: 'translateY(-50%)' };
+    case 'right':
+      return { left: FAB_SIZE + 8 + index * ACTION_GAP, top: '50%', transform: 'translateY(-50%)' };
+    default:
+      return { bottom: offset, left: '50%', transform: 'translateX(-50%)' };
+  }
+};
+
+const getReserveSpace = (
+  direction: NonNullable<SpeedDialProps['direction']>,
+  actionCount: number,
+  isOpen: boolean
+) => {
+  if (!isOpen || actionCount === 0) return {};
+
+  const space = actionCount * ACTION_GAP + 16;
+
+  switch (direction) {
+    case 'up':
+      return { paddingTop: space };
+    case 'down':
+      return { paddingBottom: space };
+    case 'left':
+      return { paddingRight: space };
+    case 'right':
+      return { paddingLeft: space };
+    default:
+      return {};
+  }
+};
+
+export const SpeedDial: React.FC<SpeedDialProps> = ({
+  actions,
+  direction = 'up',
+  disabled = false,
+  className = ''
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = () => {
+    if (disabled) return;
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleAction = (action: SpeedDialAction) => {
+    action.onClick?.();
+    setIsOpen(false);
+  };
+
+  return (
+    <div
+      className={`relative inline-flex items-center justify-center ${className}`}
+      style={getReserveSpace(direction, actions.length, isOpen && !disabled)}
+    >
+      <AnimatePresence>
+        {isOpen && !disabled && actions.map((action, index) => (
+          <motion.div
+            key={action.id}
+            initial={{ opacity: 0, scale: 0.6 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.6 }}
+            transition={{ duration: 0.16, ease: [0.16, 1, 0.3, 1], delay: index * 0.03 }}
+            className="absolute flex items-center gap-2"
+            style={{ ...getActionStyle(direction, index), zIndex: 10 }}
+          >
+            <span className="text-[10px] font-bold text-text-main bg-bg-card border border-border-app px-2 py-1 rounded-lg shadow-sm whitespace-nowrap">
+              {action.label}
+            </span>
+            <button
+              type="button"
+              onClick={() => handleAction(action)}
+              className={`w-11 h-11 rounded-full flex items-center justify-center border shadow-lg transition-transform hover:scale-110 cursor-pointer ${
+                action.colorClass ?? 'bg-bg-card text-accent border-accent/30'
+              }`}
+              aria-label={action.label}
+            >
+              {action.icon}
+            </button>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+
+      <motion.button
+        type="button"
+        disabled={disabled}
+        onClick={toggle}
+        whileTap={disabled ? undefined : { scale: 0.92 }}
+        animate={{ rotate: isOpen ? 45 : 0 }}
+        transition={{ duration: 0.18, ease: [0.16, 1, 0.3, 1] }}
+        className={`relative z-20 w-14 h-14 rounded-full bg-accent text-white flex items-center justify-center shadow-[0_0_20px_var(--color-accent-glow)] border border-accent/30 ${
+          disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer hover:bg-accent-hover'
+        }`}
+        aria-label={isOpen ? 'Cerrar menú' : 'Abrir menú de acciones'}
+        aria-expanded={isOpen}
+      >
+        {isOpen ? <X className="w-6 h-6" /> : <Plus className="w-6 h-6" />}
+      </motion.button>
+    </div>
+  );
+};

package/components/Spinner.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export interface SpinnerProps {
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+  color?: string; // Tailwind border color class
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({ 
+  className = '', 
+  size = 'md', 
+  color = 'border-accent'
+}) => {
+  const sizeClass = 
+    size === 'sm' 
+      ? 'w-5 h-5 border-2' 
+      : size === 'lg' 
+      ? 'w-12 h-12 border-4' 
+      : 'w-8 h-8 border-3';
+
+  return (
+    <div className={`relative flex items-center justify-center ${className}`}>
+      {/* Outer spinning ring */}
+      <motion.div
+        animate={{ rotate: 360 }}
+        transition={{
+          repeat: Infinity,
+          duration: 0.8,
+          ease: 'linear'
+        }}
+        className={`rounded-full border-t-transparent ${color} ${sizeClass}`}
+      />
+      {/* Central glow core */}
+      <div className={`absolute rounded-full bg-accent/10 filter blur-xs animate-pulse ${
+        size === 'sm' ? 'w-2 h-2' : size === 'lg' ? 'w-6 h-6' : 'w-4 h-4'
+      }`} />
+    </div>
+  );
+};

package/components/Stepper.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Check } from 'lucide-react';
+
+export interface StepItem {
+  id: string | number;
+  title: string;
+  description?: string;
+}
+
+export interface StepperProps {
+  steps: StepItem[];
+  currentStep: number;
+  onStepClick?: (index: number) => void;
+  direction?: 'horizontal' | 'vertical';
+  className?: string;
+  disabled?: boolean;
+}
+
+export const Stepper: React.FC<StepperProps> = ({
+  steps,
+  currentStep,
+  onStepClick,
+  direction = 'horizontal',
+  className = '',
+  disabled = false
+}) => {
+  const isHorizontal = direction === 'horizontal';
+
+  return (
+    <div className={`flex ${isHorizontal ? 'flex-row items-start' : 'flex-col'} w-full ${className}`}>
+      {steps.map((step, index) => {
+        const isCompleted = index < currentStep;
+        const isActive = index === currentStep;
+        const isLast = index === steps.length - 1;
+
+        return (
+          <div 
+            key={step.id} 
+            className={`relative flex ${isHorizontal ? 'flex-1 flex-col items-center' : 'flex-row items-start gap-4 mb-8 last:mb-0'}`}
+          >
+            {/* Step Circle & Line Container */}
+            <div className={`flex items-center ${isHorizontal ? 'w-full justify-center' : 'flex-col h-full'}`}>
+              
+              {/* Line connector (before circle) - Horizontal only needs right line, Vertical needs bottom line */}
+              {/* Actually, it's easier to attach the line to the circle pointing to the next one */}
+              <div className="relative flex items-center justify-center z-10">
+                <motion.button
+                  animate={{
+                    backgroundColor: isCompleted ? 'var(--color-accent)' : isActive ? 'var(--color-bg-app)' : 'var(--color-bg-app)',
+                    borderColor: (isCompleted || isActive) ? 'var(--color-accent)' : 'var(--color-border-app)',
+                    scale: isActive ? 1.1 : 1
+                  }}
+                  transition={{ duration: 0.3 }}
+                  disabled={disabled || !onStepClick}
+                  onClick={() => onStepClick && onStepClick(index)}
+                  className={`w-10 h-10 rounded-full border-2 flex items-center justify-center font-bold text-sm transition-shadow ${
+                    isActive ? 'shadow-[0_0_15px_rgba(var(--color-accent-rgb),0.5)] text-accent' : 
+                    isCompleted ? 'text-white' : 'text-text-muted'
+                  } ${(!disabled && onStepClick) ? 'cursor-pointer hover:scale-105' : 'cursor-default'}`}
+                >
+                  <AnimatePresence mode="wait">
+                    {isCompleted ? (
+                      <motion.div
+                        key="check"
+                        initial={{ scale: 0, opacity: 0 }}
+                        animate={{ scale: 1, opacity: 1 }}
+                        exit={{ scale: 0, opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                      >
+                        <Check className="w-5 h-5 text-bg-app" strokeWidth={3} />
+                      </motion.div>
+                    ) : (
+                      <motion.span
+                        key="number"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                      >
+                        {index + 1}
+                      </motion.span>
+                    )}
+                  </AnimatePresence>
+                </motion.button>
+              </div>
+
+              {/* Connecting Line */}
+              {!isLast && (
+                <div 
+                  className={`absolute -z-10 ${isHorizontal ? 'top-5 left-[50%] w-full h-1 -translate-y-1/2' : 'top-10 left-5 w-1 h-full -translate-x-1/2'} bg-bg-app overflow-hidden`}
+                >
+                  <motion.div
+                    className="absolute top-0 left-0 bg-accent w-full h-full"
+                    initial={{ scaleX: isHorizontal ? 0 : 1, scaleY: isHorizontal ? 1 : 0, originX: 0, originY: 0 }}
+                    animate={{ 
+                      scaleX: isHorizontal ? (isCompleted ? 1 : 0) : 1,
+                      scaleY: isHorizontal ? 1 : (isCompleted ? 1 : 0)
+                    }}
+                    transition={{ duration: 0.4, ease: "easeInOut" }}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Labels */}
+            <div className={`${isHorizontal ? 'text-center mt-4' : 'flex flex-col pt-2 pb-4'} z-10`}>
+              <motion.h4 
+                animate={{ color: isActive ? 'var(--color-text-main)' : isCompleted ? 'var(--color-text-main)' : 'var(--color-text-muted)' }}
+                className="font-bold text-sm font-display"
+              >
+                {step.title}
+              </motion.h4>
+              {step.description && (
+                <p className="text-xs text-text-muted mt-1 max-w-[150px]">
+                  {step.description}
+                </p>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/components/TabMenu.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export interface TabMenuItem {
+  id: string | number;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+export interface TabMenuProps {
+  items: TabMenuItem[];
+  activeId: string | number;
+  onChange: (id: string | number) => void;
+  variant?: 'pill' | 'underline';
+  className?: string;
+  disabled?: boolean;
+}
+
+export const TabMenu: React.FC<TabMenuProps> = ({
+  items,
+  activeId,
+  onChange,
+  variant = 'pill',
+  className = '',
+  disabled = false
+}) => {
+  const isPill = variant === 'pill';
+
+  return (
+    <div className={`flex items-center gap-1 bg-bg-card/40 border border-border-app/40 p-1.5 rounded-2xl w-fit ${
+      disabled ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' : ''
+    } ${className}`}>
+      {items.map((item) => {
+        const isActive = item.id === activeId;
+
+        return (
+          <button
+            key={item.id}
+            onClick={() => !disabled && onChange(item.id)}
+            disabled={disabled}
+            className={`relative flex items-center gap-2 px-4 py-2 text-xs font-bold transition-all duration-300 focus:outline-hidden rounded-xl ${
+              isActive 
+                ? 'text-accent' 
+                : 'text-text-muted hover:text-text-main'
+            } ${disabled ? 'cursor-not-allowed pointer-events-none' : 'cursor-pointer'}`}
+          >
+            {/* Sliding Pill Backdrop selection */}
+            {isActive && isPill && (
+              <motion.div
+                layoutId="tabmenu-active-pill"
+                className="absolute inset-0 bg-accent/10 border border-accent/15 rounded-xl -z-10"
+                transition={{ type: 'spring', stiffness: 380, damping: 26 }}
+              />
+            )}
+
+            {/* Sliding Underline Selection */}
+            {isActive && !isPill && (
+              <motion.div
+                layoutId="tabmenu-active-line"
+                className="absolute bottom-0 left-2 right-2 h-[2px] bg-accent rounded-full -z-10"
+                transition={{ type: 'spring', stiffness: 380, damping: 26 }}
+              />
+            )}
+
+            {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
+            <span>{item.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/components/TableControls.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Search } from 'lucide-react';
+import { GlowSelect } from './GlowSelect';
+
+export interface TableControlsProps {
+  searchTerm: string;
+  onSearchChange: (value: string) => void;
+  statusFilter: string;
+  onStatusFilterChange: (value: string) => void;
+  showStatusFilter?: boolean;
+  showSearch?: boolean;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const TableControls: React.FC<TableControlsProps> = ({
+  searchTerm,
+  onSearchChange,
+  statusFilter,
+  onStatusFilterChange,
+  showStatusFilter = true,
+  showSearch = true,
+  className = '',
+  disabled = false
+}) => {
+  return (
+    <div className={`w-full relative z-20 flex flex-col sm:flex-row gap-4 items-center justify-between p-4 glass bg-bg-card/90 border border-border-app rounded-2xl transition-colors duration-300 ${className} ${
+      disabled ? 'opacity-80' : ''
+    }`}>
+      
+      {/* Search Input Box */}
+      {showSearch && (
+        <div className={`relative w-full sm:max-w-xs rounded-xl overflow-hidden group transition-all duration-300 ${
+          disabled ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' : ''
+        }`}>
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-text-muted/60 group-focus-within:text-accent transition-colors duration-200">
+            <Search className="w-4 h-4" />
+          </div>
+          <input
+            type="text"
+            placeholder="Buscar registros..."
+            value={searchTerm}
+            onChange={(e) => onSearchChange(e.target.value)}
+            disabled={disabled}
+            className={`w-full bg-bg-app/40 border border-border-app/50 hover:border-border-app rounded-xl pl-9 pr-4 py-2.5 text-xs text-text-main placeholder-text-muted/50 focus:outline-hidden focus:border-accent transition-all duration-300 ${
+              disabled ? 'cursor-not-allowed' : ''
+            }`}
+          />
+        </div>
+      )}
+
+      {/* Status Filter Selector */}
+      {showStatusFilter && (
+        <div className="flex flex-col gap-1.5 w-full sm:w-44 sm:flex-shrink-0">
+          <span className="text-[10px] uppercase font-bold text-text-muted font-mono tracking-wider px-0.5">
+            Filtrar por
+          </span>
+          <GlowSelect
+            options={[
+              { value: 'All', label: 'Todos los estados' },
+              { value: 'Active', label: 'Activos' },
+              { value: 'Inactive', label: 'Inactivos' },
+              { value: 'Pending', label: 'Pendientes' }
+            ]}
+            value={statusFilter}
+            onChange={onStatusFilterChange}
+            size="sm"
+            disabled={disabled}
+            className="w-full"
+          />
+        </div>
+      )}
+
+    </div>
+  );
+};
+

package/components/TablePagination.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+export interface TablePaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+export const TablePagination: React.FC<TablePaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  className = ''
+}) => {
+  if (totalPages <= 1) return null;
+
+  const pages = Array.from({ length: totalPages }, (_, idx) => idx + 1);
+
+  return (
+    <div className={`w-full flex items-center justify-between p-4 glass bg-bg-card/50 border border-border-app rounded-2xl transition-colors duration-300 ${className}`}>
+      
+      {/* Page Info */}
+      <span className="text-[10px] font-bold text-text-muted font-mono tracking-wider">
+        PÁGINA {currentPage} DE {totalPages}
+      </span>
+
+      {/* Pagination control buttons */}
+      <div className="flex items-center gap-1.5">
+        
+        {/* Previous Button */}
+        <motion.button
+          whileTap={{ scale: 0.94 }}
+          onClick={() => onPageChange(Math.max(currentPage - 1, 1))}
+          disabled={currentPage === 1}
+          className={`p-2 rounded-xl border transition-all duration-300 cursor-pointer ${
+            currentPage === 1
+              ? 'bg-transparent border-border-app/20 text-text-muted/30 cursor-not-allowed'
+              : 'bg-bg-card border-border-app text-text-muted hover:border-accent hover:text-accent shadow-xs'
+          }`}
+          aria-label="Página anterior"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </motion.button>
+
+        {/* Numeric page triggers */}
+        <div className="hidden sm:flex items-center gap-1">
+          {pages.map((p) => {
+            const isSelected = p === currentPage;
+            return (
+              <motion.button
+                key={p}
+                whileTap={{ scale: 0.94 }}
+                onClick={() => onPageChange(p)}
+                className={`w-8 h-8 rounded-xl border text-xs font-bold transition-all duration-300 cursor-pointer ${
+                  isSelected
+                    ? 'bg-accent border-accent text-white shadow-md'
+                    : 'bg-bg-card border-border-app text-text-muted hover:border-accent hover:text-accent shadow-xs'
+                }`}
+              >
+                {p}
+              </motion.button>
+            );
+          })}
+        </div>
+
+        {/* Next Button */}
+        <motion.button
+          whileTap={{ scale: 0.94 }}
+          onClick={() => onPageChange(Math.min(currentPage + 1, totalPages))}
+          disabled={currentPage === totalPages}
+          className={`p-2 rounded-xl border transition-all duration-300 cursor-pointer ${
+            currentPage === totalPages
+              ? 'bg-transparent border-border-app/20 text-text-muted/30 cursor-not-allowed'
+              : 'bg-bg-card border-border-app text-text-muted hover:border-accent hover:text-accent shadow-xs'
+          }`}
+          aria-label="Página siguiente"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </motion.button>
+
+      </div>
+
+    </div>
+  );
+};