@axzydev/axzy_ui_system 1.2.12 → 1.2.14

package/src/components/{page-header → organisms/page-header}/page-header.tsx

@@ -1,7 +1,7 @@
 import { FaChevronLeft } from "react-icons/fa";
 import { ITPageHeaderProps } from "./page-header.props";
-import ITBreadcrumbs from "../breadcrumbs/breadcrumbs";
-import ITText from "@/components/text/text";
+import ITBreadcrumbs from "@/components/molecules/breadcrumbs/breadcrumbs";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Page title bar with breadcrumbs, description, back button, and action buttons.

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { SearchColumn } from "../searchTable.props";
-import ITInput from "@/components/input/input";
-import ITSelect from "@/components/select/select";
-import ITDatePicker from "@/components/date-picker/datePicker";
-import ITText from "@/components/text/text";
+import ITInput from "@/components/atoms/input/input";
+import ITSelect from "@/components/molecules/select/select";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
+import ITText from "@/components/atoms/text/text";
 
 interface EditableCellProps<T> {
   column: SearchColumn<T>;
@@ -18,7 +18,6 @@ export default function EditableCell<T>({
   value,
   onChange,
   error,
-  row,
 }: EditableCellProps<T>) {
   const validate = (val: any) => {
     if (column.validation) return column.validation(val);

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 import PaginationInfo from "./PaginationInfo";
-import ITSelect from "@/components/select/select";
-import ITButton from "@/components/button/button";
-import ITText from "@/components/text/text";
+import ITSelect from "@/components/molecules/select/select";
+import ITButton from "@/components/atoms/button/button";
+import ITText from "@/components/atoms/text/text";
 
 interface PaginationControlsProps {
   pageIndex: number;
@@ -46,7 +46,7 @@ export default function PaginationControls({
             value={String(itemsPerPage)}
             onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
             onBlur={() => {}}
-            size="small"
+            size="sm"
             className="w-20"
           />
         </div>
@@ -55,7 +55,7 @@ export default function PaginationControls({
       <div className="flex items-center space-x-2">
         <ITButton
           color="secondary"
-          size="small"
+          size="sm"
           onClick={() => onPageChange(pageIndex - 1)}
           disabled={!hasPreviousPage}
           className="min-w-[32px]"
@@ -70,7 +70,7 @@ export default function PaginationControls({
         </ITText>
 
         <ITButton
-          size="small"
+          size="sm"
           color="secondary"
           onClick={() => onPageChange(pageIndex + 1)}
           disabled={!hasNextPage}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 interface PaginationInfoProps {
   currentCount: number;

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

@@ -1,8 +1,8 @@
 import React from "react";
 import SearchInput from "./SearchInput";
 import SortButton from "./SortButton";
-import ITButton from "@/components/button/button";
-import ITText from "@/components/text/text";
+import ITButton from "@/components/atoms/button/button";
+import ITText from "@/components/atoms/text/text";
 
 interface SearchAndSortBarProps {
   searchTerm: string;
@@ -37,7 +37,7 @@ export default function SearchAndSortBar({
 
         {searchTerm && (
           <ITButton
-            size="small"
+            size="sm"
             variant="outlined"
             color="danger"
             onClick={onClearSearch}

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

@@ -1,4 +1,4 @@
-import ITInput from "@/components/input/input";
+import ITInput from "@/components/atoms/input/input";
 import React from "react";
 import { FaSearch } from "react-icons/fa";
 

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 interface SortButtonProps {
   sortConfig?: {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 interface TableEmptyStateProps {
   colSpan: number;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import SortButton from "./SortButton";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 interface TableHeaderCellProps {
   label: string;

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;