alexui 1.0.0

package/registry.json

@@ -0,0 +1,1133 @@
+{
+  "version": "3.2",
+  "componentCount": 86,
+  "components": [
+    {
+      "id": "actiontable",
+      "title": "Action Table & Actions Menu",
+      "group": "completos",
+      "category": "tablas",
+      "description": "Tabla de datos interactiva ampliada con avatares de fotos de gran tamaño, búsqueda en tiempo real, filtrado por estado y paginación modular integrada.",
+      "file": "ActionTable.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "skeleton",
+        "tablecontrols",
+        "tablepagination"
+      ]
+    },
+    {
+      "id": "alertbanner",
+      "title": "Dismissible Alert Banners",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Alertas glassmorphic con iconos semánticos, título opcional, cierre manual y stack animado con AnimatePresence.",
+      "file": "AlertBanner.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "animatedaccordion",
+      "title": "Animated dynamic Accordion",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Acordeón colapsable para menús o preguntas frecuentes que se adapta suavemente a contenidos con alturas variables.",
+      "file": "AnimatedAccordion.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "autocomplete",
+      "title": "Smart Autocomplete Suggestions",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Caja de texto combinada con dropdown de sugerencias que se filtran al escribir para autocompletar rápidamente.",
+      "file": "Autocomplete.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "avatar",
+      "title": "Avatar & Avatar Group",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Avatares con fallback de iniciales, anillo de acento, indicador de estado online/offline y grupo apilado con overflow.",
+      "file": "Avatar.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "badge",
+      "title": "Animated Status Badges",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Etiquetas de estado con variantes semánticas, punto indicador opcional y animación de entrada elástica.",
+      "file": "Badge.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "breadcrumb",
+      "title": "Animated Breadcrumb Trail",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Rastro de navegación con ícono de inicio, separadores personalizables y resaltado elástico del ítem activo.",
+      "file": "Breadcrumb.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "calendar",
+      "title": "Premium Calendar & DatePicker",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Calendario mensual interactivo con selección de fecha única, rangos, bloqueos de fechas, navegación y versión popover Datepicker.",
+      "file": "Calendar.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "card3d",
+      "title": "3D Hover Card & Gloss Effect",
+      "group": "individuales",
+      "category": "animaciones",
+      "description": "Tarjeta tridimensional con física de inclinación al pasar el cursor y un spotlight de brillo dinámico que sigue la posición del puntero.",
+      "file": "Card3D.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": [
+        "skeleton"
+      ]
+    },
+    {
+      "id": "carousel3d",
+      "title": "Infinite 3D Carousel",
+      "group": "completos",
+      "category": "multimedia",
+      "description": "Carrusel infinito en 3D. Las tarjetas laterales se curvan hacia atrás en profundidad, bajando su escala y opacidad.",
+      "file": "Carousel3D.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "cascadeselect",
+      "title": "Hierarchical Cascade Select",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Selector jerárquico multinivel en cascada que abre paneles laterales dinámicos con spinners de carga específicos por nivel.",
+      "file": "CascadeSelect.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "chartshowcase",
+      "title": "Interactive SVG Native Charts",
+      "group": "completos",
+      "category": "complejos",
+      "description": "Gráficos interactivos SVG nativos hiper-animados de Línea, Barra y Dona con tooltips dinámicos elásticos y hovers elásticos.",
+      "file": "ChartShowcase.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "checkbox",
+      "title": "Interactive Checkbox Suites",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Checkboxes animados con Framer Motion. Soporta modo individual, grupos de selección y listas de tareas con tachado.",
+      "file": "Checkbox.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "chipsinput",
+      "title": "Interactive Tag Chips Input",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Entrada para agregar múltiples etiquetas (tags/chips) usando Enter o Coma, con remoción y filtros de palabras prohibidas.",
+      "file": "ChipsInput.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "circularknob",
+      "title": "Rotary Circular Dial & Meter",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Perilla dial circular interactiva basada en gestos de arrastre físico de mouse o toque. Modos 360 y medidor semicircular de 270 grados.",
+      "file": "CircularKnob.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "codevisualizer",
+      "title": "Syntax Highlight Visualizer",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Visualizador de código con lexer regex custom para TSX/JSX. Resalta keywords, strings, componentes y props.",
+      "file": "CodeVisualizer.tsx",
+      "npmDependencies": [],
+      "internalDependencies": []
+    },
+    {
+      "id": "collapsible",
+      "title": "Collapsible",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Expand/collapse ligero con trigger custom, modo controlado y animación spring.",
+      "file": "Collapsible.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "colorthememanager",
+      "title": "Live Color Theme Engine",
+      "group": "completos",
+      "category": "complejos",
+      "description": "Motor de temas dinámicos con 10 presets, editor de paleta custom, preview en vivo y exportación CSS.",
+      "file": "ColorThemeManager.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "commandmenu",
+      "title": "Command Menu (Cmd+K)",
+      "group": "completos",
+      "category": "estructura",
+      "description": "Buscador y paleta de comandos global invocada mediante atajos de teclado. Navegación por teclado y desenfoque profundo.",
+      "file": "CommandMenu.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "confirmdialog",
+      "title": "Confirm Action Dialog",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Diálogo de confirmación glassmorphic con variantes semánticas danger/warning/info, portal y bloqueo de scroll.",
+      "file": "ConfirmDialog.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "contextmenu",
+      "title": "Custom Context Menu",
+      "group": "completos",
+      "category": "estructura",
+      "description": "Menú de clic derecho personalizado, renderizado exactamente en el cursor. Reemplaza el menú gris aburrido del sistema operativo.",
+      "file": "ContextMenu.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "dashboardlayout",
+      "title": "Dashboard Layout",
+      "group": "completos",
+      "category": "complejos",
+      "description": "Plantilla de dashboard con métricas, gráfico de barras y tabla de acciones integrada.",
+      "file": "DashboardLayout.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "glasscard",
+        "chartshowcase",
+        "actiontable",
+        "badge",
+        "skeleton"
+      ]
+    },
+    {
+      "id": "datepicker",
+      "title": "Date Picker Popover",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Input de fecha con popover calendario. Soporta fecha única o rango con cierre automático.",
+      "file": "DatePicker.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "calendar"
+      ]
+    },
+    {
+      "id": "divider",
+      "title": "Animated Section Divider",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Separador horizontal o vertical con variantes solid, dashed y gradient, más etiqueta central opcional.",
+      "file": "Divider.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "dock",
+      "title": "macOS Dock Magnification",
+      "group": "individuales",
+      "category": "animaciones",
+      "description": "Menú flotante estilo macOS altamente interactivo. Los iconos se magnifican fluidamente al acercar el puntero del mouse utilizando física de resortes.",
+      "file": "Dock.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "skeleton"
+      ]
+    },
+    {
+      "id": "dragdroplists",
+      "title": "Dual List Drag & Drop",
+      "group": "completos",
+      "category": "complejos",
+      "description": "Transferencia interactiva de elementos entre dos listas mediante arrastrar y soltar con animaciones físicas de reordenamiento.",
+      "file": "DragDropLists.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "drawer",
+      "title": "Slide-out Drawer Panel",
+      "group": "completos",
+      "category": "estructura",
+      "description": "Panel deslizante lateral o inferior ideal para opciones densas de navegación o filtros.",
+      "file": "Drawer.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "dropdownplus",
+      "title": "Multi-Select Categorized Dropdown",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Selector desplegable expandido con soporte para selección múltiple con chips, filtro de búsqueda interno y grupos categorizados.",
+      "file": "DropdownPlus.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "emptystate",
+      "title": "Empty State",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Estado vacío con icono, título, descripción y slot de acción para listas y dashboards.",
+      "file": "EmptyState.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "errorpage",
+      "title": "Error Page",
+      "group": "completos",
+      "category": "feedback",
+      "description": "Página de error 404/500 glassmorphic con código grande, mensaje y acciones de navegación.",
+      "file": "ErrorPage.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "glassbutton"
+      ]
+    },
+    {
+      "id": "filedropzone",
+      "title": "Interactive File Dropzone",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Zona de arrastrar y soltar (Drag & Drop) para subir archivos con validación visual reactiva.",
+      "file": "FileDropzone.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "forgotpassword",
+      "title": "Forgot Password Form",
+      "group": "completos",
+      "category": "complejos",
+      "description": "Flujo de recuperación de contraseña con estado de éxito y navegación de vuelta al login.",
+      "file": "ForgotPassword.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "glowinput",
+        "magneticbutton",
+        "skeleton"
+      ]
+    },
+    {
+      "id": "formfield",
+      "title": "Label & Form Field",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Wrapper de campo con label, descripción, error animado y enlace automático al input hijo.",
+      "file": "FormField.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "glassbutton",
+      "title": "Atomic Glassmorphic Button",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Botón glassmorphic atómico con múltiples variantes (primary, secondary, ghost), escala de toque elástica y soporte de iconos.",
+      "file": "GlassButton.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "glasscard",
+      "title": "Glass Card",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Card glassmorphic reutilizable con header, footer, variantes de elevación y hover opcional.",
+      "file": "GlassCard.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "glassinput",
+      "title": "Atomic Glassmorphic Input",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Campo de texto glassmorphic atómico y limpio, con anillo brillante de foco y soporte nativo para iconos de acompañamiento.",
+      "file": "GlassInput.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "glassmorphicmodal",
+      "title": "Glassmorphic Overlay Dialog",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Ventana emergente modal que no se cierra al cliquear el fondo (solo por ESC, cruz o botones) y posee animaciones elásticas.",
+      "file": "GlassmorphicModal.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "glowinput",
+      "title": "Glow Border Input & Floating Label",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Campo de texto con animación inteligente. Al ganar foco, desplaza la etiqueta y activa un trazado brillante alrededor del campo.",
+      "file": "GlowInput.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "glowselect",
+      "title": "Glow Select Dropdown",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Selector de menú desplegable personalizado con animaciones de apertura fluidas de sus opciones y soporte para bordes activos de gradientes.",
+      "file": "GlowSelect.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "glowtextarea",
+      "title": "Glow Border Text Area",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Área de texto de entrada multilínea que comparte las mismas físicas de borde brillante y label flotante que GlowInput.",
+      "file": "GlowTextArea.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "horizontaltimeline",
+      "title": "Interactive Horizontal Timeline",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Línea de tiempo horizontal interactiva con hitos cliqueables y barra de progreso que se llena fluidamente.",
+      "file": "HorizontalTimeline.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "hovercard",
+      "title": "Rich Hover Card",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Previsualización elegante de contenido extra cuando se pasa el cursor sobre un elemento de interés.",
+      "file": "HoverCard.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "imagelightbox",
+      "title": "Image Lightbox Grid Gallery",
+      "group": "completos",
+      "category": "multimedia",
+      "description": "Galería de fotos interactiva. Se expande a pantalla completa (Lightbox) y permite navegar de forma fluida mediante gestos y flechas.",
+      "file": "ImageLightbox.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "skeleton"
+      ]
+    },
+    {
+      "id": "inputgroup",
+      "title": "Unified Input Adornments",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Caja contenedora de unión para adosar iconos, botones, textos fijos, o checks a los lados de un campo de texto de forma fluida.",
+      "file": "InputGroup.tsx",
+      "npmDependencies": [],
+      "internalDependencies": []
+    },
+    {
+      "id": "inputotp",
+      "title": "Consecutive Input OTP",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Campos de entrada consecutivos para códigos de verificación (One-Time Password) de 4 o 6 dígitos, con foco automático y pegado.",
+      "file": "InputOTP.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "interactivenavbar",
+      "title": "Interactive Modular Navbar",
+      "group": "completos",
+      "category": "estructura",
+      "description": "Barra de navegación responsiva glassmorphic de altura fija. Cuenta con menús desplegables elásticos de notificaciones y sesión de usuario.",
+      "file": "InteractiveNavbar.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "themeswitcher"
+      ]
+    },
+    {
+      "id": "interactivesidebar",
+      "title": "Interactive Elastic Sidebar",
+      "group": "completos",
+      "category": "estructura",
+      "description": "Barra lateral de navegación colapsable glassmorphic. Ajusta su ancho dinámicamente y expone sesión de usuario y control de temas.",
+      "file": "InteractiveSidebar.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "themeswitcher"
+      ]
+    },
+    {
+      "id": "kbd",
+      "title": "Keyboard Key",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Tecla estilizada para mostrar atajos de teclado. Incluye KbdGroup para combinaciones.",
+      "file": "Kbd.tsx",
+      "npmDependencies": [],
+      "internalDependencies": []
+    },
+    {
+      "id": "liteyoutube",
+      "title": "Lite YouTube Player (Zero Initial Burden)",
+      "group": "completos",
+      "category": "multimedia",
+      "description": "Reproductor ligero de YouTube. Descarga la miniatura en HD y inyecta el iframe real al hacer clic, ahorrando megabytes de carga.",
+      "file": "LiteYouTube.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "skeleton"
+      ]
+    },
+    {
+      "id": "loadercollection",
+      "title": "Elite Elastic Loader Collection",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Colección de 6 micro-cargadores elásticos premium alternativos al spinner clásico (Barras de pulso, puntos rebotadores, malla, etc).",
+      "file": "LoaderCollection.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "loginform",
+      "title": "Staggered Login Form Template",
+      "group": "completos",
+      "category": "complejos",
+      "description": "Plantilla de Login glassmorphic avanzada. Staggereará la entrada de todos sus componentes (inputs, toggle switch, botón magnético) para dar una gran bienvenida.",
+      "file": "LoginForm.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "glowinput",
+        "morphingswitch",
+        "magneticbutton",
+        "skeleton"
+      ]
+    },
+    {
+      "id": "magneticbutton",
+      "title": "Magnetic Button & Parallax Text",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Botón con atracción magnética hacia el cursor del mouse que genera un efecto de paralaje tridimensional interactivo con su texto interno.",
+      "file": "MagneticButton.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "maskedinput",
+      "title": "Live Masked Input Formatter",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Entrada de texto con máscara de formateo interactiva en vivo para Teléfonos, CUIT, DNI y Tarjetas de Crédito.",
+      "file": "MaskedInput.tsx",
+      "npmDependencies": [],
+      "internalDependencies": [
+        "glassinput"
+      ]
+    },
+    {
+      "id": "mentioninput",
+      "title": "Live Mentions Suggestion Input",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Entrada de texto y comentarios que despliega un dropdown elástico de sugerencias al detectar el carácter @.",
+      "file": "MentionInput.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "morphingswitch",
+      "title": "Morphing Knob Elastic Switch",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Interruptor de palanca táctil que deforma el knob deslizador elásticamente en la dirección de la aceleración mientras cambia de estado.",
+      "file": "MorphingSwitch.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "multiselect",
+      "title": "Multi Select",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Selector múltiple con chips removibles, límite máximo y lista desplegable con checks.",
+      "file": "MultiSelect.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "numberinput",
+      "title": "Formatted Multi-Currency Number Input",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Campo numérico controlado con botones de incremento laterales o verticales, formateo de divisas y límites numéricos estrictos.",
+      "file": "NumberInput.tsx",
+      "npmDependencies": [
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "panel",
+      "title": "Collapsible Glass Panel",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Panel glassmorphic colapsable con header, subtítulo, ícono y animación de altura. Incluye Fieldset para formularios.",
+      "file": "Panel.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "passwordinput",
+      "title": "Secure Strength Password Input",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Campo de contraseña premium con indicador visual de seguridad de clave y checklist de requisitos de validación en tiempo real.",
+      "file": "PasswordInput.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "popover",
+      "title": "Click-Triggered Popover",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Panel flotante activado por clic con cierre al hacer clic fuera, placement configurable y modo controlado.",
+      "file": "Popover.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "pricingtable",
+      "title": "Pricing Table",
+      "group": "completos",
+      "category": "estructura",
+      "description": "Tabla de precios de 3 columnas con plan destacado, features y CTAs glassmorphic.",
+      "file": "PricingTable.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "glasscard",
+        "glassbutton",
+        "badge"
+      ]
+    },
+    {
+      "id": "progressbar",
+      "title": "Dynamic Glowing ProgressBar",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Barra de progreso con porcentajes, variantes de color de tema, efecto de flujo brillante, rayas animadas y modo indeterminado.",
+      "file": "ProgressBar.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "radiobutton",
+      "title": "Elastic Radio Button Groups",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Botón de radio interactivo con knob elástico y deslizamiento compartido por layoutId. Variantes clásica y tarjeta glassmorphic.",
+      "file": "RadioButton.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "rating",
+      "title": "Interactive Star Rating",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Calificación por estrellas con hover preview, animación de resorte al interactuar y modo solo lectura.",
+      "file": "Rating.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "resizablepanel",
+      "title": "Resizable Split Panels",
+      "group": "completos",
+      "category": "estructura",
+      "description": "Paneles ajustables arrastrando una manija central (Drag Handle). Estilo VSCode o Arc Browser.",
+      "file": "ResizablePanel.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "scrollpanel",
+      "title": "Custom Scroll Panel",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Área de scroll con thumb personalizado arrastrable, métricas sincronizadas y altura configurable.",
+      "file": "ScrollPanel.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "settingspage",
+      "title": "Settings Page",
+      "group": "completos",
+      "category": "complejos",
+      "description": "Página de ajustes con navegación lateral y secciones de perfil, notificaciones, seguridad y apariencia.",
+      "file": "SettingsPage.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "panel",
+        "glowinput",
+        "morphingswitch",
+        "glassbutton",
+        "skeleton"
+      ]
+    },
+    {
+      "id": "signupform",
+      "title": "Staggered Signup Form",
+      "group": "completos",
+      "category": "complejos",
+      "description": "Plantilla de registro glassmorphic con validación, términos y animación staggered.",
+      "file": "SignupForm.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "glowinput",
+        "morphingswitch",
+        "magneticbutton",
+        "skeleton"
+      ]
+    },
+    {
+      "id": "skeleton",
+      "title": "Skeleton Loader Shimmer",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Cajas de carga temporal (Skeleton loader) con sweeps de brillos de gradiente y variantes de formas.",
+      "file": "Skeleton.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "slider",
+      "title": "Elastic Range Slider",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Control deslizante con track relleno animado, thumb elástico y soporte de variantes de color semánticas.",
+      "file": "Slider.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "slidingtabs",
+      "title": "Sliding Active Tabs",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Selector de pestañas deslizantes que utiliza layout animado para desplazar un pill de fondo detrás de la pestaña seleccionada.",
+      "file": "SlidingTabs.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "sortablelist",
+      "title": "Framer Drag & Drop",
+      "group": "completos",
+      "category": "complejos",
+      "description": "Listas y grillas arrastrables y reordenables. Usando Framer Motion Reorder, sin dependencias pesadas.",
+      "file": "SortableList.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "speeddial",
+      "title": "Radial Speed Dial FAB",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Botón flotante que despliega acciones radiales en 4 direcciones con etiquetas y animación escalonada.",
+      "file": "SpeedDial.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "spinner",
+      "title": "Glow Loading Spinner",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Spinner circular continuo elástico con núcleo brillante difuminado para retroalimentación visual de procesamiento.",
+      "file": "Spinner.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "stepper",
+      "title": "Animated Stepper Wizard",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Indicador de pasos interactivo para formularios multi-paso. Línea de progreso SVG que se llena animada.",
+      "file": "Stepper.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "tablecontrols",
+      "title": "Atomic Table Controls",
+      "group": "individuales",
+      "category": "tablas",
+      "description": "Controles atómicos de tabla. Proporciona una barra de búsqueda rápida y filtro por estados en un contenedor glassmorphic.",
+      "file": "TableControls.tsx",
+      "npmDependencies": [
+        "lucide-react"
+      ],
+      "internalDependencies": [
+        "glowselect"
+      ]
+    },
+    {
+      "id": "tablepagination",
+      "title": "Atomic Table Pagination",
+      "group": "individuales",
+      "category": "tablas",
+      "description": "Controles de paginación atómicos con botones interactivos glassmorphic y selección directa por páginas.",
+      "file": "TablePagination.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "tabmenu",
+      "title": "Elastic Sliding Tab Menu",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Menú de pestañas con un indicador deslizante elástico debajo o detrás de la pestaña seleccionada mediante layoutId.",
+      "file": "TabMenu.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "texteditor",
+      "title": "Native WYSIWYG Rich Text Editor",
+      "group": "completos",
+      "category": "complejos",
+      "description": "Editor de texto enriquecido ligero basado en contentEditable nativo, con barra de herramientas de formato, inserción de links/imágenes y conteos.",
+      "file": "TextEditor.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "textreveal",
+      "title": "GSAP Scroll-Trigger Text Reveal",
+      "group": "individuales",
+      "category": "animaciones",
+      "description": "Efecto de revelado de texto letra por letra o palabra por palabra gatillado al hacer scroll por el viewport usando el motor GSAP ScrollTrigger.",
+      "file": "TextReveal.tsx",
+      "npmDependencies": [
+        "gsap"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "themeswitcher",
+      "title": "Theme Mode Switcher Dropdown",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Selector de modo de color (Claro, Oscuro, Sistema) mediante un botón interactivo y un menú de opciones con transiciones de resorte.",
+      "file": "ThemeSwitcher.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "timelinegsap",
+      "title": "Scroll Timeline (GSAP)",
+      "group": "completos",
+      "category": "estructura",
+      "description": "Línea de tiempo conectada al scroll de la página. Rellena una línea de progreso y revela tarjetas de forma asíncrona mediante GSAP ScrollTrigger.",
+      "file": "TimelineGSAP.tsx",
+      "npmDependencies": [
+        "gsap"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "toastsystem",
+      "title": "Interactive Toast Notification System",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Sistema ligero de notificaciones Toast de éxito, error o informativos, que se apilan de forma ordenada y se descartan automáticamente.",
+      "file": "ToastSystem.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "togglebutton",
+      "title": "Segmented Toggle Button",
+      "group": "individuales",
+      "category": "entradas",
+      "description": "Grupo de botones tipo segmented control con indicador deslizante elástico (layoutId) y soporte de íconos.",
+      "file": "ToggleButton.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "tooltip",
+      "title": "Reactive Placement Tooltip",
+      "group": "individuales",
+      "category": "feedback",
+      "description": "Tooltip flotante premium con orientación estática y opción auto que recalcula el espacio en pantalla para no desbordar.",
+      "file": "Tooltip.tsx",
+      "npmDependencies": [
+        "framer-motion"
+      ],
+      "internalDependencies": []
+    },
+    {
+      "id": "tree",
+      "title": "Expandable File Tree",
+      "group": "individuales",
+      "category": "estructura",
+      "description": "Árbol jerárquico con carpetas/archivos, expansión animada, selección activa e íconos personalizables.",
+      "file": "Tree.tsx",
+      "npmDependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "internalDependencies": []
+    }
+  ]
+}