@axzydev/axzy_ui_system 1.2.13 → 1.2.14

package/src/components/{searchTable → organisms/searchTable}/searchTable.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './searchTable.stories';
+import * as StoriesData from './searchTable.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITSearchTable
 

package/src/components/{searchTable → organisms/searchTable}/searchTable.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITSearchTable from './searchTable';
+import ITSearchTable from '@/components/organisms/searchTable/searchTable';
 import { SearchColumn } from './searchTable.props';
 
 interface SampleRow {
@@ -26,7 +26,6 @@ const meta = {
   title: 'Components/Data Display/ITSearchTable',
   component: ITSearchTable,
   parameters: { layout: 'padded' },
-  tags: ['autodocs'],
   argTypes: {
     columns: { control: false, description: 'Column definitions' },
     data: { control: false, description: 'Row data array' },

package/src/components/{searchTable → organisms/searchTable}/searchTable.tsx

@@ -10,7 +10,7 @@ import TableRow from "./components/TableRow";
 import { getNestedValue } from "@/utils/table.utils";
 import TableEmptyState from "./components/TableEmptyState";
 import PaginationControls from "./components/PaginationControls";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 interface CustomITSearchTableProps<T> extends ITSearchTableProps<T> {
   editingRow?: number | null;
@@ -54,7 +54,6 @@ export default function ITSearchTable<T extends Record<string, unknown>>({
   containerClassName,
   searchTermInitial = "",
   searchInputPlaceholder = "Buscar en todos los campos...",
-  className,
   variant = "default",
   size = "md",
   itemsPerPageOptions = [10, 20, 50, 100],

package/src/components/{sidebar → organisms/sidebar}/sidebar.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './sidebar.stories';
+import * as StoriesData from './sidebar.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITSidebar
 

package/src/components/{sidebar → organisms/sidebar}/sidebar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITSidebar from './sidebar';
+import ITSidebar from '@/components/organisms/sidebar/sidebar';
 import { FaHome, FaUsers, FaCog, FaChartBar, FaShieldAlt } from 'react-icons/fa';
 
 const meta: Meta<typeof ITSidebar> = {
@@ -13,7 +13,6 @@ const meta: Meta<typeof ITSidebar> = {
       },
     },
   },
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/components/{sidebar → organisms/sidebar}/sidebar.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { FaChevronDown } from "react-icons/fa";
 import { ITNavigationItem, ITSidebarProps } from "./sidebar.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Vertical navigation sidebar with submenu expand/collapse, hover tooltips in collapsed mode,
@@ -28,7 +28,6 @@ import ITText from "@/components/text/text";
 export default function ITSidebar({
   navigationItems = [],
   isCollapsed = false,
-  onToggleCollapse,
   className = "",
   visibleOnMobile = false,
   onItemClick,
@@ -42,6 +41,9 @@ export default function ITSidebar({
   const leaveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
+    const hoverTimer = hoverTimeoutRef.current;
+    const leaveTimer = leaveTimeoutRef.current;
+
     const handleMouseEnter = () => {
       if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
       if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
@@ -64,8 +66,8 @@ export default function ITSidebar({
         sidebar.removeEventListener("mouseenter", handleMouseEnter);
         sidebar.removeEventListener("mouseleave", handleMouseLeave);
       }
-      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
-      if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+      if (hoverTimer) clearTimeout(hoverTimer);
+      if (leaveTimer) clearTimeout(leaveTimer);
     };
   }, [isCollapsed]);
 
@@ -125,30 +127,30 @@ export default function ITSidebar({
       `}
       style={{
         zIndex: 50,
-        backgroundColor: "var(--sidebar-bg, rgba(255, 255, 255, 0.90))",
-        borderRight: "1px solid var(--sidebar-border, var(--color-secondary-200))",
+        backgroundColor: "var(--it-sidebar-bg, rgba(255, 255, 255, 0.90))",
+        borderRight: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
         WebkitBackdropFilter: 'blur(12px)',
         backdropFilter: 'blur(12px)',
       }}
     >
       {/* Navigation Items */}
-      <nav className="flex-1 py-6 overflow-y-auto overflow-x-hidden custom-scrollbar px-4">
-        <ul className="space-y-2">
+      <nav className="flex-1 py-4 overflow-y-auto overflow-x-hidden custom-scrollbar px-4">
+        <ul className="space-y-1">
           {navigationItems.map((item) => (
             <li key={item.id} className="relative group/navitem">
               <div
                 className={`flex items-center cursor-pointer 
                   transition-all duration-300 ease-[cubic-bezier(0.2,0,0,1)]
                   rounded-xl relative overflow-visible
-                  ${isSidebarCollapsed ? "justify-center p-2.5 mb-2" : "justify-between px-3.5 py-3 mb-1"}
+                  ${isSidebarCollapsed ? "justify-center p-2 mb-1" : "justify-between px-3 py-2 mb-0.5"}
                 `}
                 style={{
-                  backgroundColor: item.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
+                  backgroundColor: item.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
                   boxShadow: item.isActive ? 'var(--shadow-xs)' : 'none',
-                  border: item.isActive ? "1px solid var(--sidebar-border, var(--color-secondary-200))" : '1px solid transparent'
+                  border: item.isActive ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : '1px solid transparent'
                 }}
                 onMouseEnter={(e) => {
-                  if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, var(--color-secondary-100))";
+                  if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
                 }}
                 onMouseLeave={(e) => {
                   if (!item.isActive) e.currentTarget.style.backgroundColor = 'transparent';
@@ -158,18 +160,18 @@ export default function ITSidebar({
                 {item.isActive && !isSidebarCollapsed && (
                   <div
                     className="absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all"
-                    style={{ backgroundColor: "var(--sidebar-active-icon, var(--color-primary-500))", boxShadow: "0 0 10px var(--sidebar-active-icon, var(--color-primary-500))" }}
+                    style={{ backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))", boxShadow: "0 0 10px var(--it-sidebar-active-icon, var(--color-primary-500))" }}
                   />
                 )}
 
-                <div className={`flex items-center ${!isSidebarCollapsed ? "gap-3.5" : "justify-center"} relative z-10 w-full`}>
+                <div className={`flex items-center ${!isSidebarCollapsed ? "gap-2.5" : "justify-center"} relative z-10 w-full`}>
                   {item.icon && (
                     <div
                       className={`transition-all duration-300 flex-shrink-0 flex items-center justify-center`}
                       style={{
-                        color: item.isActive ? "var(--sidebar-active-icon, var(--color-primary-500))" : "var(--sidebar-icon-color, #9ca3af)",
+                        color: item.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, #9ca3af)",
                         opacity: item.isActive ? 1 : 0.8,
-                        fontSize: item.isActive ? '1.35rem' : '1.25rem',
+                        fontSize: item.isActive ? '1.12rem' : '1.05rem',
                         filter: item.isActive ? 'drop-shadow(0 0 8px rgba(255,255,255,0.2))' : 'none'
                       }}
                     >
@@ -181,8 +183,8 @@ export default function ITSidebar({
                     <ITText as="span"
                       className={`transition-all duration-300 truncate tracking-wide`}
                       style={{
-                        color: item.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, var(--color-secondary-300))",
-                        fontSize: '0.9rem',
+                        color: item.isActive ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
+                        fontSize: '0.8rem',
                         fontWeight: item.isActive ? '600' : '500'
                       }}
                     >
@@ -193,7 +195,7 @@ export default function ITSidebar({
 
                 {!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && (
                   <div className={`flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`}
-                    style={{ color: item.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 }}>
+                    style={{ color: item.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 }}>
                     <FaChevronDown className="w-3 h-3" />
                   </div>
                 )}
@@ -204,12 +206,12 @@ export default function ITSidebar({
                       absolute flex items-center justify-center font-bold shadow-md
                       ${isSidebarCollapsed
                         ? "top-1 right-1 w-2.5 h-2.5 rounded-full ring-2 ring-white"
-                        : "right-3 top-1/2 transform -translate-y-1/2 px-2 py-0.5 text-[10px] rounded-full backdrop-blur-sm"}
+                        : "right-3 top-1/2 transform -translate-y-1/2 px-1.5 py-0 text-[9px] rounded-full backdrop-blur-sm"}
                     `}
                     style={{
-                      backgroundColor: "var(--sidebar-badge-bg, var(--color-primary-500))",
-                      color: "var(--sidebar-badge-color, #ffffff)",
-                      boxShadow: isSidebarCollapsed ? "0 0 0 2px var(--sidebar-bg, var(--color-secondary-900))" : 'none'
+                      backgroundColor: "var(--it-sidebar-badge-bg, var(--color-primary-500))",
+                      color: "var(--it-sidebar-badge-color, #ffffff)",
+                      boxShadow: isSidebarCollapsed ? "0 0 0 2px var(--it-sidebar-bg, var(--color-secondary-900))" : 'none'
                     }}
                   >
                     {isSidebarCollapsed ? "" : item.badge}
@@ -222,14 +224,14 @@ export default function ITSidebar({
                 <div
                   className="absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-[70] min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]"
                   style={{
-                    backgroundColor: "var(--sidebar-bg, #ffffff)",
-                    border: "1px solid var(--sidebar-border, var(--color-secondary-200))",
+                    backgroundColor: "var(--it-sidebar-bg, #ffffff)",
+                    border: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
                     WebkitBackdropFilter: 'blur(16px)',
                     backdropFilter: 'blur(16px)',
                   }}
                 >
-                  <div className="px-5 py-4 flex items-center gap-3 font-semibold border-b" style={{ borderColor: "var(--sidebar-border, var(--color-secondary-200))", color: "var(--sidebar-active-color, var(--color-secondary-900))" }}>
-                    {item.icon && <span style={{ color: "var(--sidebar-active-icon, var(--color-primary-500))" }} className="text-xl drop-shadow-sm">{item.icon}</span>}
+                  <div className="px-5 py-4 flex items-center gap-3 font-semibold border-b" style={{ borderColor: "var(--it-sidebar-border, var(--color-secondary-200))", color: "var(--it-sidebar-active-color, var(--color-secondary-900))" }}>
+                    {item.icon && <span style={{ color: "var(--it-sidebar-active-icon, var(--color-primary-500))" }} className="text-xl drop-shadow-sm">{item.icon}</span>}
                     <ITText as="span" className="tracking-wide text-[15px]">{item.label}</ITText>
                   </div>
 
@@ -244,18 +246,18 @@ export default function ITSidebar({
                             <div
                               className="absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full"
                               style={{
-                                backgroundColor: "var(--sidebar-active-icon, var(--color-primary-500))",
-                                boxShadow: "0 0 6px color-mix(in srgb, var(--sidebar-active-icon, var(--color-primary-500)) 25%, transparent)",
+                                backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))",
+                                boxShadow: "0 0 6px color-mix(in srgb, var(--it-sidebar-active-icon, var(--color-primary-500)) 25%, transparent)",
                               }}
                             />
                           )}
-                          <span className={`w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`} style={{ backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, var(--color-primary-500))" : "var(--sidebar-icon-color, var(--color-secondary-400))" }} />
-                          <ITText as="span" style={{ color: subitem.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-label-color, var(--color-secondary-600))", fontWeight: subitem.isActive ? 600 : 500 }}>{subitem.label}</ITText>
+                          <span className={`w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`} style={{ backgroundColor: subitem.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, var(--color-secondary-400))" }} />
+                          <ITText as="span" style={{ color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))", fontWeight: subitem.isActive ? 600 : 500 }}>{subitem.label}</ITText>
                         </div>
                       ))}
                     </div>
                   ) : (
-                    <ITText as="div" className="px-5 py-3 text-sm italic" style={{ color: "var(--sidebar-label-color, var(--color-secondary-400))" }}>No hay submenú</ITText>
+                    <ITText as="div" className="px-5 py-3 text-sm italic" style={{ color: "var(--it-sidebar-label-color, var(--color-secondary-400))" }}>No hay submenú</ITText>
                   )}
                 </div>
               )}
@@ -264,10 +266,10 @@ export default function ITSidebar({
               {!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && (
                 <div className={`overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`}>
                   <ul
-                    className="ml-5 flex flex-col gap-0.5 py-1"
+                    className="ml-4 flex flex-col gap-0 py-0.5"
                     style={{
                       borderLeft: subitemConnector === '|'
-                        ? "1px solid var(--sidebar-border, var(--color-secondary-200))"
+                        ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))"
                         : 'none'
                     }}
                   >
@@ -278,18 +280,18 @@ export default function ITSidebar({
                             if (subitem.action) subitem.action();
                             if (onSubItemClick) onSubItemClick(subitem);
                           }}
-                          className={`flex items-center gap-2.5 w-full text-left px-3 py-2 rounded-xl transition-all duration-300`}
+                          className={`flex items-center gap-2 w-full text-left px-3 py-1.5 rounded-xl transition-all duration-300`}
                           style={{
-                            color: subitem.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-label-color, var(--color-secondary-600))",
-                            backgroundColor: subitem.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
-                            fontSize: '0.85rem',
+                            color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
+                            backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
+                            fontSize: '0.78rem',
                             fontWeight: subitem.isActive ? 600 : 500,
                             letterSpacing: '0.01em',
                             marginLeft: subitemConnector === '|' ? '-1px' : '0',
                           }}
                           onMouseEnter={(e) => {
                             if (!subitem.isActive) {
-                              e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, var(--color-secondary-100))";
+                              e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
                               e.currentTarget.style.transform = 'translateX(3px)';
                             }
                           }}
@@ -304,8 +306,8 @@ export default function ITSidebar({
                             <div
                               className="absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all"
                               style={{
-                                backgroundColor: "var(--sidebar-active-icon, var(--color-primary-500))",
-                                boxShadow: "0 0 6px color-mix(in srgb, var(--sidebar-active-icon, var(--color-primary-500)) 25%, transparent)",
+                                backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))",
+                                boxShadow: "0 0 6px color-mix(in srgb, var(--it-sidebar-active-icon, var(--color-primary-500)) 25%, transparent)",
                               }}
                             />
                           )}
@@ -314,8 +316,8 @@ export default function ITSidebar({
                               className={`w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 ${subitem.isActive ? 'scale-125' : ''}`}
                               style={{
                                 backgroundColor: subitem.isActive
-                                  ? "var(--sidebar-active-icon, var(--color-primary-500))"
-                                  : "var(--sidebar-icon-color, var(--color-secondary-400))"
+                                  ? "var(--it-sidebar-active-icon, var(--color-primary-500))"
+                                  : "var(--it-sidebar-icon-color, var(--color-secondary-400))"
                               }}
                             />
                           )}

package/src/components/{toast → organisms/toast}/toast.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './toast.stories';
+import * as StoriesData from './toast.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITToast
 

package/src/components/{toast → organisms/toast}/toast.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITToast from "./toast";
+import ITToast from "@/components/organisms/toast/toast";
 import { useState } from "react";
-import ITButton from "../button/button";
+import ITButton from "@/components/atoms/button/button";
 
 const meta: Meta<typeof ITToast> = {
   title: "Components/Feedback/ITToast",
@@ -9,7 +9,6 @@ const meta: Meta<typeof ITToast> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     type: {
       control: "select",

package/src/components/{toast → organisms/toast}/toast.tsx

@@ -2,10 +2,9 @@ import { positionStyles } from "@/types/toast.types";
 import { theme } from "@/theme/theme";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
-import "./toast.css";
 import { ITToastProps } from "./toast.props";
 import { FaTimesCircle, FaCheckCircle, FaExclamationTriangle, FaInfoCircle, FaTimes } from "react-icons/fa";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * ITToast — floating notification with automatic dismiss and severity-based styling.

package/src/components/{topbar → organisms/topbar}/topbar.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './topbar.stories';
+import * as StoriesData from './topbar.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITTopBar
 

package/src/components/{topbar → organisms/topbar}/topbar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITTopBar from './topbar';
+import ITTopBar from '@/components/organisms/topbar/topbar';
 import { FaShieldAlt, FaChartBar, FaUserCog } from 'react-icons/fa';
 
 const meta: Meta<typeof ITTopBar> = {
@@ -13,7 +13,6 @@ const meta: Meta<typeof ITTopBar> = {
       },
     },
   },
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/components/{topbar → organisms/topbar}/topbar.tsx

@@ -1,8 +1,8 @@
 import { FaUserCircle, FaBars } from "react-icons/fa";
-import useClickOutside from "../../hooks/useClickOutside";
+import useClickOutside from "@/hooks/useClickOutside";
 import { useRef, useState } from "react";
 import { ITTopBarProps } from "./topbar.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * ITTopBar — sticky top navigation bar with logo, nav items, and user avatar dropdown.
@@ -60,8 +60,8 @@ export default function ITTopBar({
     <header 
       className="sticky top-0 z-40 backdrop-blur-md transition-all duration-300"
       style={{
-        backgroundColor: "var(--topbar-bg, rgba(255, 255, 255, 0.9))",
-        borderBottom: "1px solid var(--topbar-border, rgba(15, 23, 42, 0.06))",
+        backgroundColor: "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
+        borderBottom: "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
         boxShadow: "var(--shadow-xs)",
       }}
     >
@@ -75,9 +75,9 @@ export default function ITTopBar({
             <button
               className="lg:hidden p-2.5 rounded-xl transition-colors duration-200"
               style={{
-                 color: "var(--topbar-icon, #64748b)",
+                 color: "var(--it-topbar-icon, #64748b)",
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = "var(--topbar-user-hover, #f1f5f9)"}
+              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)"}
               onMouseLeave={(e) => e.currentTarget.style.backgroundColor = "transparent"}
               onClick={onToggleMobileMenu}
             >
@@ -96,7 +96,7 @@ export default function ITTopBar({
             {logoText && (
               <ITText as="span" 
                  className="text-[1.15rem] font-bold tracking-tight"
-                 style={{ color: "var(--topbar-text, #0f172a)" }}
+                 style={{ color: "var(--it-topbar-text, #0f172a)" }}
               >
                 {logoText}
               </ITText>
@@ -105,19 +105,19 @@ export default function ITTopBar({
 
           {/* Top Navigation Items (Desktop) */}
           {navItems && navItems.length > 0 && (
-            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--topbar-border, rgba(15, 23, 42, 0.06))" }}>
+            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" }}>
               {navItems.map((item) => (
                 <button
                   key={item.id}
                   onClick={() => onNavItemClick?.(item.id)}
                   className="px-4 py-2 rounded-lg font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]"
-                  style={{ color: "var(--topbar-text, #475569)" }}
+                  style={{ color: "var(--it-topbar-text, #475569)" }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.color = "var(--topbar-text, #0f172a)";
-                    e.currentTarget.style.backgroundColor = "var(--topbar-user-hover, #f1f5f9)";
+                    e.currentTarget.style.color = "var(--it-topbar-text, #0f172a)";
+                    e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
                   }}
                   onMouseLeave={(e) => {
-                    e.currentTarget.style.color = "var(--topbar-text, #475569)";
+                    e.currentTarget.style.color = "var(--it-topbar-text, #475569)";
                     e.currentTarget.style.backgroundColor = "transparent";
                   }}
                 >
@@ -138,10 +138,10 @@ export default function ITTopBar({
               type="button"
               className="flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200"
               style={{
-                backgroundColor: isUserMenuOpen ? "var(--topbar-user-hover, #f1f5f9)" : "transparent",
+                backgroundColor: isUserMenuOpen ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent",
               }}
               onMouseEnter={(e) => {
-                if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--topbar-user-hover, #f1f5f9)";
+                if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
               }}
               onMouseLeave={(e) => {
                 if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "transparent";
@@ -158,7 +158,7 @@ export default function ITTopBar({
                   />
                 ) : (
                   <div className="w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm">
-                     <FaUserCircle className="w-6 h-6" style={{ color: "var(--topbar-icon, #94a3b8)" }} />
+                     <FaUserCircle className="w-6 h-6" style={{ color: "var(--it-topbar-icon, #94a3b8)" }} />
                   </div>
                 )}
                 {/* Active dot indicator */}
@@ -169,13 +169,13 @@ export default function ITTopBar({
               <div className="hidden sm:flex flex-col text-left py-0.5">
                 <ITText as="span" 
                   className="font-semibold text-[0.85rem] leading-tight"
-                  style={{ color: "var(--topbar-user-text, #0f172a)" }}
+                  style={{ color: "var(--it-topbar-user-text, #0f172a)" }}
                 >
                   {userMenu.userName}
                 </ITText>
                 <ITText as="span" 
                   className="text-[0.7rem] font-medium"
-                  style={{ color: "var(--topbar-user-subtitle, #64748b)" }}
+                  style={{ color: "var(--it-topbar-user-subtitle, #64748b)" }}
                 >
                   {userMenu.userEmail}
                 </ITText>
@@ -190,16 +190,16 @@ export default function ITTopBar({
                 ${isUserMenuOpen ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-2 pointer-events-none"}
               `}
               style={{ 
-                backgroundColor: "var(--topbar-user-dropdown-bg, #ffffff)",
-                border: "1px solid var(--topbar-user-dropdown-border, #f1f5f9)"
+                backgroundColor: "var(--it-topbar-user-dropdown-bg, #ffffff)",
+                border: "1px solid var(--it-topbar-user-dropdown-border, #f1f5f9)"
               }}
             >
                {/* Dropdown Header */}
-              <div className="px-5 py-4 border-b" style={{ borderColor: "var(--topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--topbar-user-bg, #f8fafc)" }}>
-                <ITText as="span" className="block font-bold text-[0.9rem]" style={{ color: "var(--topbar-user-text, #0f172a)" }}>
+              <div className="px-5 py-4 border-b" style={{ borderColor: "var(--it-topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--it-topbar-user-bg, #f8fafc)" }}>
+                <ITText as="span" className="block font-bold text-[0.9rem]" style={{ color: "var(--it-topbar-user-text, #0f172a)" }}>
                   {userMenu.userName}
                 </ITText>
-                <ITText as="span" className="block text-xs font-medium truncate mt-0.5" style={{ color: "var(--topbar-user-subtitle, #64748b)" }}>
+                <ITText as="span" className="block text-xs font-medium truncate mt-0.5" style={{ color: "var(--it-topbar-user-subtitle, #64748b)" }}>
                   {userMenu.userEmail}
                 </ITText>
               </div>
@@ -215,14 +215,14 @@ export default function ITTopBar({
                           <div className="h-px bg-slate-100 my-1 mx-2"></div>
                        )}
                       <button
-                        onClick={(e) => {
+                        onClick={() => {
                            m.onClick();
                            setIsUserMenuOpen(false);
                         }}
                         className="block w-full text-left px-3 py-2.5 rounded-xl text-[0.875rem] font-medium transition-colors duration-150"
-                        style={{ color: isDestructive ? 'var(--color-danger-500)' : "var(--topbar-user-text, #334155)" }}
+                        style={{ color: isDestructive ? 'var(--color-danger-500)' : "var(--it-topbar-user-text, #334155)" }}
                         onMouseEnter={(e) => {
-                          e.currentTarget.style.backgroundColor = isDestructive ? 'var(--color-danger-50)' : "var(--topbar-user-item-hover, #f8fafc)";
+                          e.currentTarget.style.backgroundColor = isDestructive ? 'var(--color-danger-50)' : "var(--it-topbar-user-item-hover, #f8fafc)";
                         }}
                         onMouseLeave={(e) => {
                           e.currentTarget.style.backgroundColor = "transparent";

package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './tripleFilter.stories';
+import * as StoriesData from './tripleFilter.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITTripleFilter
 

package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.props.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ColorsTypes } from "@/types/colors.types";
 
 export interface ITTripleFilterOption<T> {

package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.stories.tsx

@@ -4,7 +4,6 @@ import ITTripleFilter from './tripleFilter';
 const meta: Meta<typeof ITTripleFilter> = {
   title: 'Components/ITTripleFilter',
   component: ITTripleFilter,
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/components/{triple-filter → organisms/triple-filter}/tripleFilter.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ITTripleFilterProps } from "./tripleFilter.props";
 import { ColorsTypes } from "@/types/colors.types";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 const colorMap: Record<ColorsTypes, string> = {
   primary: "text-primary-600",

package/src/components/{layout → templates/layout}/layout.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './layout.stories';
+import * as StoriesData from './layout.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITLayout
 

package/src/components/{layout → templates/layout}/layout.props.ts

@@ -1,5 +1,5 @@
-import { ITTopBarProps } from "../topbar/topbar.props";
-import { ITSidebarProps } from "../sidebar/sidebar.props";
+import { ITTopBarProps } from "@/components/organisms/topbar/topbar.props";
+import { ITSidebarProps } from "@/components/organisms/sidebar/sidebar.props";
 
 export interface ITLayoutProps {
   /** Top bar configuration and props */

package/src/components/{layout → templates/layout}/layout.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITLayout from './layout';
+import ITLayout from '@/components/templates/layout/layout';
 import { FaHome, FaUsers, FaChartBar, FaCog, FaShieldAlt } from 'react-icons/fa';
 
 const meta: Meta<typeof ITLayout> = {
@@ -17,7 +17,6 @@ const meta: Meta<typeof ITLayout> = {
       },
     },
   },
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/components/{layout → templates/layout}/layout.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import clsx from "clsx";
-import ITTopBar from "../topbar/topbar";
-import ITSidebar from "../sidebar/sidebar";
+import ITTopBar from "@/components/organisms/topbar/topbar";
+import ITSidebar from "@/components/organisms/sidebar/sidebar";
 import { ITLayoutProps } from "./layout.props";
 import { theme } from "@/theme/theme";
 

package/src/components/{page → templates/page}/page.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './page.stories';
+import * as StoriesData from './page.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITPage
 

package/src/components/{page → templates/page}/page.props.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { ITBreadcrumbItem } from "../breadcrumbs/breadcrumbs.props";
+import { ITBreadcrumbItem } from "@/components/molecules/breadcrumbs/breadcrumbs.props";
 
 /** Props for the ITPage component. */
 export interface ITPageProps {