@axzydev/axzy_ui_system 1.2.13 → 1.2.14

package/src/components/{alert → molecules/alert}/alert.stories.tsx

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import ITAlert from "./alert";
+import ITAlert from "@/components/molecules/alert/alert";
 
 const meta: Meta<typeof ITAlert> = {
   title: "Components/Feedback/ITAlert",
   component: ITAlert,
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/{alert → molecules/alert}/alert.tsx

@@ -1,8 +1,7 @@
 import clsx from "clsx";
 import { ITAlertProps, AlertVariant } from "./alert.props";
 import { FaInfoCircle, FaCheckCircle, FaExclamationTriangle, FaTimesCircle, FaTimes } from "react-icons/fa";
-import { theme } from "@/theme/theme";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 const config: Record<AlertVariant, { icon: React.ReactNode; classes: string }> = {
   info: {

package/src/components/{breadcrumbs → molecules/breadcrumbs}/breadcrumbs.doc.mdx

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

package/src/components/{breadcrumbs → molecules/breadcrumbs}/breadcrumbs.stories.tsx

@@ -1,10 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITBreadcrumbs from "./breadcrumbs";
+import ITBreadcrumbs from "@/components/molecules/breadcrumbs/breadcrumbs";
 
 const meta: Meta<typeof ITBreadcrumbs> = {
   title: "Components/Navigation/ITBreadcrumbs",
   component: ITBreadcrumbs,
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/{breadcrumbs → molecules/breadcrumbs}/breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ITBreadcrumbsProps } from "./breadcrumbs.props";
 import { FaChevronRight } from "react-icons/fa";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Navigation breadcrumb trail with automatic link/button rendering and custom separator.

package/src/components/{calendar → molecules/calendar}/calendar.doc.mdx

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

package/src/components/{calendar → molecules/calendar}/calendar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITCalendar from './calendar';
+import ITCalendar from '@/components/molecules/calendar/calendar';
 import { addHours, format, startOfDay, addDays } from 'date-fns';
 
 const meta = {
@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'padded',
   },
-  tags: ['autodocs'],
   argTypes: {
     mode: {
         control: 'select',

package/src/components/{calendar → molecules/calendar}/calendar.tsx

@@ -23,7 +23,7 @@ import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { ITCalendarProps, CalendarEvent } from './calendar.props';
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -258,8 +258,8 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
     <div 
         className={cn("flex flex-col h-full rounded-lg shadow-sm overflow-hidden select-none", className)}
         style={{
-          backgroundColor: 'var(--calendar-bg, #ffffff)',
-          border: '1px solid var(--calendar-border, #e2e8f0)',
+          backgroundColor: 'var(--it-calendar-bg, #ffffff)',
+          border: '1px solid var(--it-calendar-border, #e2e8f0)',
           ...getVariantStyles(),
         }}
         onMouseUp={handleMouseUp}
@@ -273,19 +273,19 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
       <div 
         className="flex items-center justify-between px-2 py-2 border-b" 
         style={{ 
-          backgroundColor: 'var(--calendar-bg, #ffffff)',
-          borderBottomColor: 'var(--calendar-border, #e2e8f0)'
+          backgroundColor: 'var(--it-calendar-bg, #ffffff)',
+          borderBottomColor: 'var(--it-calendar-border, #e2e8f0)'
         }}
       >
         <ITText
             as="h2"
             className="text-sm font-bold capitalize cursor-pointer transition-colors select-none px-2 py-1 rounded"
             style={{ 
-              color: 'var(--calendar-header-text, #1e293b)',
+              color: 'var(--it-calendar-header-text, #1e293b)',
             }}
              onClick={() => setView(view === 'calendar' ? 'years' : 'calendar')}
              onMouseEnter={(e) => {
-               e.currentTarget.style.backgroundColor = 'var(--calendar-header-hover, #f1f5f9)';
+               e.currentTarget.style.backgroundColor = 'var(--it-calendar-header-hover, #f1f5f9)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.backgroundColor = 'transparent';
@@ -301,8 +301,8 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
             onClick={handlePrev} 
             type="button" 
             className="p-1.5 rounded-md transition-colors"
-            style={{ color: 'var(--calendar-days-text, #334155)' }}
-            onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--calendar-header-hover, #f1f5f9)'; }}
+            style={{ color: 'var(--it-calendar-days-text, #334155)' }}
+            onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--it-calendar-header-hover, #f1f5f9)'; }}
             onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
           >
             <FaChevronLeft size={14} />
@@ -311,8 +311,8 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
             onClick={handleToday} 
             type="button" 
             className="text-sm font-medium px-3 py-1.5 rounded-md transition-colors"
-            style={{ color: 'var(--calendar-days-text, #334155)' }}
-            onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--calendar-header-hover, #f1f5f9)'; }}
+            style={{ color: 'var(--it-calendar-days-text, #334155)' }}
+            onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--it-calendar-header-hover, #f1f5f9)'; }}
             onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
           >
             <ITText as="span">Hoy</ITText>
@@ -321,8 +321,8 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
             onClick={handleNext} 
             type="button" 
             className="p-1.5 rounded-md transition-colors"
-            style={{ color: 'var(--calendar-days-text, #334155)' }}
-            onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--calendar-header-hover, #f1f5f9)'; }}
+            style={{ color: 'var(--it-calendar-days-text, #334155)' }}
+            onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = 'var(--it-calendar-header-hover, #f1f5f9)'; }}
             onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
           >
             <FaChevronRight size={14} />
@@ -333,7 +333,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
       {/* Content */}
       <div 
         className="flex-1 overflow-auto relative"
-        style={{ backgroundColor: 'var(--calendar-bg, #ffffff)' }}
+        style={{ backgroundColor: 'var(--it-calendar-bg, #ffffff)' }}
       >
         
         {view === 'years' ? (
@@ -345,13 +345,13 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                           className={cn(
                               "h-10 rounded-md text-sm font-medium transition-colors border border-transparent",
                               year === currentDate.getFullYear() 
-                                ? "bg-[var(--calendar-selected-bg)] text-[var(--calendar-selected-text)]" 
-                                : "hover:bg-[var(--calendar-today-bg)] hover:text-[var(--calendar-today-text)]"
+                                ? "bg-[var(--it-calendar-selected-bg)] text-[var(--it-calendar-selected-text)]" 
+                                : "hover:bg-[var(--it-calendar-today-bg)] hover:text-[var(--it-calendar-today-text)]"
                           )}
                           style={{
                               color: year === currentDate.getFullYear() 
-                                ? 'var(--calendar-selected-text, #ffffff)' 
-                                : 'var(--calendar-days-text, #334155)'
+                                ? 'var(--it-calendar-selected-text, #ffffff)' 
+                                : 'var(--it-calendar-days-text, #334155)'
                           }}
                           onClick={() => {
                               setCurrentDate((d) => {
@@ -401,17 +401,17 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                       )}
                       style={{
                         backgroundColor: isSelected || isRangeStart || isRangeEnd 
-                          ? 'var(--calendar-selected-bg, #2563eb)' 
+                          ? 'var(--it-calendar-selected-bg, #2563eb)' 
                           : isInRange 
-                            ? 'var(--calendar-range-bg, #eff6ff)'
+                            ? 'var(--it-calendar-range-bg, #eff6ff)'
                             : isToday(day)
-                              ? 'var(--calendar-today-bg, #eff6ff)'
+                              ? 'var(--it-calendar-today-bg, #eff6ff)'
                               : 'transparent',
                         color: isSelected || isRangeStart || isRangeEnd
-                          ? 'var(--calendar-selected-text, #ffffff)'
+                          ? 'var(--it-calendar-selected-text, #ffffff)'
                           : isToday(day)
-                            ? 'var(--calendar-today-text, #2563eb)'
-                            : 'var(--calendar-days-text, #334155)',
+                            ? 'var(--it-calendar-today-text, #2563eb)'
+                            : 'var(--it-calendar-days-text, #334155)',
                         fontWeight: isSelected || isRangeStart || isRangeEnd || isToday(day) ? '700' : '400',
                       }}
                     >
@@ -419,10 +419,10 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                       
                       {/* Connection for range selection to make it look continuous */}
                       {selectionMode === 'range' && isRangeStart && endDate && (
-                        <div className="absolute right-0 top-0 bottom-0 w-2 bg-[var(--calendar-range-bg)] -z-10" />
+                        <div className="absolute right-0 top-0 bottom-0 w-2 bg-[var(--it-calendar-range-bg)] -z-10" />
                       )}
                       {selectionMode === 'range' && isRangeEnd && startDate && (
-                        <div className="absolute left-0 top-0 bottom-0 w-2 bg-[var(--calendar-range-bg)] -z-10" />
+                        <div className="absolute left-0 top-0 bottom-0 w-2 bg-[var(--it-calendar-range-bg)] -z-10" />
                       )}
                     </button>
                   );
@@ -436,8 +436,8 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
              <div 
                className="flex-none w-16 pt-10 select-none"
                style={{
-                 backgroundColor: 'var(--calendar-header-hover, #f1f5f9)',
-                 borderRight: '1px solid var(--calendar-border, #e2e8f0)',
+                 backgroundColor: 'var(--it-calendar-header-hover, #f1f5f9)',
+                 borderRight: '1px solid var(--it-calendar-border, #e2e8f0)',
                }}
              >
                {TIME_SLOTS.map((hour) => (
@@ -457,22 +457,22 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                 <div 
                   key={day.toISOString()} 
                   className="flex-1 min-w-[120px] relative"
-                  style={{ borderRight: '1px solid var(--calendar-border, #e2e8f0)' }}
+                  style={{ borderRight: '1px solid var(--it-calendar-border, #e2e8f0)' }}
                 >
                   
                   {/* Day Header */}
                   <div 
                     className="h-10 flex flex-col items-center justify-center sticky top-0 z-10"
                     style={{
-                      backgroundColor: isToday(day) ? 'var(--calendar-today-bg, #eff6ff)' : 'var(--calendar-bg, #ffffff)',
-                      borderBottom: '1px solid var(--calendar-border, #e2e8f0)',
+                      backgroundColor: isToday(day) ? 'var(--it-calendar-today-bg, #eff6ff)' : 'var(--it-calendar-bg, #ffffff)',
+                      borderBottom: '1px solid var(--it-calendar-border, #e2e8f0)',
                     }}
                   >
                     <ITText
                       as="span"
                       className="text-xs font-semibold uppercase"
                       style={{
-                        color: isToday(day) ? 'var(--calendar-today-text, #2563eb)' : 'var(--calendar-days-text, #334155)',
+                        color: isToday(day) ? 'var(--it-calendar-today-text, #2563eb)' : 'var(--it-calendar-days-text, #334155)',
                         opacity: isToday(day) ? 1 : 0.6,
                       }}
                     >
@@ -482,8 +482,8 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                       as="span"
                       className="text-sm font-bold w-6 h-6 flex items-center justify-center rounded-full mt-0.5"
                       style={{
-                        color: isToday(day) ? 'var(--calendar-selected-text, #ffffff)' : 'var(--calendar-days-text, #334155)',
-                        backgroundColor: isToday(day) ? 'var(--calendar-selected-bg, #2563eb)' : 'transparent',
+                        color: isToday(day) ? 'var(--it-calendar-selected-text, #ffffff)' : 'var(--it-calendar-days-text, #334155)',
+                        backgroundColor: isToday(day) ? 'var(--it-calendar-selected-bg, #2563eb)' : 'transparent',
                       }}
                     >
                       {format(day, 'd')}
@@ -497,11 +497,11 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                         <div 
                           key={hour} 
                           className="h-20 relative group"
-                          style={{ borderBottom: '1px dashed var(--calendar-border, #e2e8f0)' }}
+                          style={{ borderBottom: '1px dashed var(--it-calendar-border, #e2e8f0)' }}
                         >
                            {/* Slot 00 */}
                            <div 
-                            className="absolute inset-x-0 top-0 h-10 border-b border-transparent hover:border-[var(--calendar-today-bg)] hover:bg-[var(--calendar-today-bg)] transition-colors cursor-pointer z-0"
+                            className="absolute inset-x-0 top-0 h-10 border-b border-transparent hover:border-[var(--it-calendar-today-bg)] hover:bg-[var(--it-calendar-today-bg)] transition-colors cursor-pointer z-0"
                              onMouseDown={(e) => {
                                  const d = new Date(day); d.setHours(hour, 0, 0, 0);
                                  handleMouseDown(d, e);
@@ -513,13 +513,13 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                              onClick={() => {
                                if (!isDraggingRef.current) { 
                                    const d = new Date(day); d.setHours(hour, 0, 0, 0);
-                                   onSlotClick && onSlotClick(d);
+                                   if (onSlotClick) onSlotClick(d);
                                }
                              }}
                            />
                            {/* Slot 30 */}
                            <div 
-                            className="absolute inset-x-0 bottom-0 h-10 hover:border-[var(--calendar-today-bg)] hover:bg-[var(--calendar-today-bg)] transition-colors cursor-pointer z-0"
+                            className="absolute inset-x-0 bottom-0 h-10 hover:border-[var(--it-calendar-today-bg)] hover:bg-[var(--it-calendar-today-bg)] transition-colors cursor-pointer z-0"
                              onMouseDown={(e) => {
                                  const d = new Date(day); d.setHours(hour, 30, 0, 0);
                                  handleMouseDown(d, e);
@@ -531,7 +531,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                              onClick={() => {
                                if (!isDraggingRef.current) {
                                    const d = new Date(day); d.setHours(hour, 30, 0, 0);
-                                   onSlotClick && onSlotClick(d);
+                                   if (onSlotClick) onSlotClick(d);
                                }
                              }}
                            />
@@ -555,7 +555,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
 
                              return (
                                  <div 
-                                     className="absolute left-1 right-1 bg-[var(--calendar-selected-bg)]/30 border border-[var(--calendar-selected-bg)] rounded z-10 pointer-events-none"
+                                     className="absolute left-1 right-1 bg-[var(--it-calendar-selected-bg)]/30 border border-[var(--it-calendar-selected-bg)] rounded z-10 pointer-events-none"
                                      style={{ top: `${top}px`, height: `${height}px` }}
                                  />
                              );
@@ -572,7 +572,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                             key={event.id}
                              className={cn(
                                "absolute left-1 right-1 rounded px-2 py-1 text-xs cursor-pointer hover:brightness-95 transition-all shadow-sm overflow-hidden z-20 border-l-4",
-                               !event.color && "bg-[var(--calendar-today-bg)] text-[var(--calendar-today-text)] border-[var(--calendar-selected-bg)]"
+                               !event.color && "bg-[var(--it-calendar-today-bg)] text-[var(--it-calendar-today-text)] border-[var(--it-calendar-selected-bg)]"
                              )}
                             style={{ 
                               top: style.top, 
@@ -583,7 +583,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
                              }}
                             onClick={(e) => {
                               e.stopPropagation();
-                              onEventClick && onEventClick(event);
+                              if (onEventClick) onEventClick(event);
                             }}
                           >
                             <ITText as="div" className="font-semibold truncate">{event.title}</ITText>

package/src/components/molecules/calendar/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./calendar";
+export * from "./calendar";

package/src/components/{card → molecules/card}/card.doc.mdx

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

package/src/components/{card → molecules/card}/card.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITCard from './card';
-import ITButton from '../button/button';
+import ITCard from '@/components/molecules/card/card';
+import ITButton from '@/components/atoms/button/button';
 
 const meta = {
   title: 'Components/Layout & Navigation/ITCard',
@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     onClick: { action: 'clicked' },
   },

package/src/components/{card → molecules/card}/card.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ITCardProps } from "./card.props";
 import { useState } from "react";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states.
@@ -32,10 +32,10 @@ export default function ITCard({
   const [isHovered, setIsHovered] = useState(false);
 
   const containerStyle: React.CSSProperties = {
-    backgroundColor: "var(--card-bg, #ffffff)",
-    borderColor: "var(--card-border, rgba(15, 23, 42, 0.06))",
+    backgroundColor: "var(--it-card-bg, #ffffff)",
+    borderColor: "var(--it-card-border, rgba(15, 23, 42, 0.06))",
     borderWidth: "1px",
-    borderRadius: "var(--card-radius, var(--radius-2xl))",
+    borderRadius: "var(--it-card-radius, var(--radius-2xl))",
     // Soft depth: every card floats a little at rest; interactive cards
     // gain visual weight on hover instead of appearing flat until clicked.
     boxShadow: onClick

package/src/components/{date-picker → molecules/date-picker}/date-picker.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './date-picker.stories';
+import * as StoriesData from './date-picker.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITDatePicker
 
@@ -17,7 +17,7 @@ A date picker supporting single date and date range selection. Includes built-in
 | `onBlur` | `(event) => void` | — | Callback when the input loses focus. |
 | `range` | `boolean` | `false` | Enable date-range selection mode. |
 | `variant` | `ColorsTypes` | `"primary"` | Color variant from design system. |
-| `size` | `SizesTypes` | `"medium"` | Size variant from design system. |
+| `size` | `SizesTypes` | `"md"` | Size preset: `"sm"`, `"md"`, `"lg"`. |
 | `className` | `string` | — | CSS classes for the wrapper. |
 | `calendarClassName` | `string` | — | CSS classes for the calendar popover. |
 | `disabled` | `boolean` | `false` | Disables the date picker. |

package/src/components/{date-picker → molecules/date-picker}/date-picker.props.ts

@@ -22,7 +22,7 @@ export interface ITDatePickerProps {
   range?: boolean;
   /** Color variant matching the design system (ColorsTypes). @default "primary" */
   variant?: ColorsTypes;
-  /** Size variant matching the design system (SizesTypes). @default "medium" */
+  /** Size preset: "sm" | "md" | "lg". @default "md" */
   size?: SizesTypes;
   /** Additional CSS classes for the wrapper element. */
   className?: string;

package/src/components/{date-picker → molecules/date-picker}/date-picker.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import ITDatePicker from './datePicker';
 import { useState } from 'react';
 
@@ -8,7 +8,6 @@ const meta = {
   parameters: {
     layout: 'padded',
   },
-  tags: ['autodocs'],
   argTypes: {
     value: { control: 'date' },
     minDate: { control: 'date' },
@@ -21,7 +20,6 @@ const meta = {
 } satisfies Meta<typeof ITDatePicker>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 // Wrapper for controlled component state
 const DatePickerWrapper = (args: any) => {

package/src/components/{date-picker → molecules/date-picker}/datePicker.tsx

@@ -2,8 +2,8 @@ import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
 import { FaCalendarAlt } from "react-icons/fa";
 import { isBefore } from "date-fns";
-import ITCalendar from "../calendar/calendar";
-import ITInput from "../input/input";
+import ITCalendar from "@/components/molecules/calendar/calendar";
+import ITInput from "@/components/atoms/input/input";
 import { ITDatePickerProps } from "./date-picker.props";
 import { theme } from "@/theme/theme";
 
@@ -43,7 +43,7 @@ export default function ITDatePicker({
   onChange,
   onBlur,
   variant = "primary",
-  size = "medium",
+  size = "md",
   className,
   calendarClassName,
   disabled = false,

package/src/components/{empty-state → molecules/empty-state}/empty-state.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './empty-state.stories';
+import * as StoriesData from './empty-state.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITEmptyState
 
@@ -25,7 +25,7 @@ import { ITEmptyState } from '@axzydev/axzy_ui_system';
 <ITEmptyState
   title="No results"
   description="No data found for the selected filters."
-  action={<ITButton label="Clear filters" variant="outlined" size="small" />}
+  action={<ITButton label="Clear filters" variant="outlined" size="sm" />}
 />
 
 <ITEmptyState

package/src/components/{empty-state → molecules/empty-state}/empty-state.stories.tsx

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITEmptyState from "./empty-state";
-import ITButton from "../button/button";
+import ITEmptyState from "@/components/molecules/empty-state/empty-state";
+import ITButton from "@/components/atoms/button/button";
 
 const meta: Meta<typeof ITEmptyState> = {
   title: "Components/Data Display/ITEmptyState",
   component: ITEmptyState,
-  tags: ["autodocs"],
 };
 
 export default meta;
@@ -15,6 +14,6 @@ export const Default: Story = {
   args: {
     title: "Sin resultados",
     description: "No se encontraron datos para los filtros seleccionados.",
-    action: <ITButton label="Limpiar filtros" variant="outlined" size="small" />,
+    action: <ITButton label="Limpiar filtros" variant="outlined" size="sm" />,
   },
 };

package/src/components/{empty-state → molecules/empty-state}/empty-state.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ITEmptyStateProps } from "./empty-state.props";
 import { FaInbox } from "react-icons/fa";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Placeholder display for empty data sets.

package/src/components/{form-header → molecules/form-header}/form-header.doc.mdx

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

package/src/components/{form-header → molecules/form-header}/form-header.stories.tsx

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITFormHeader from './form-header';
+import ITFormHeader from '@/components/molecules/form-header/form-header';
 
 const meta = {
   title: 'Components/Feedback/ITFormHeader',
   component: ITFormHeader,
   parameters: { layout: 'centered' },
-  tags: ['autodocs'],
   argTypes: {
     title: { control: 'text', description: 'The title displayed in the header' },
     onClose: { control: false, description: 'Optional close button handler' },

package/src/components/{form-header → molecules/form-header}/form-header.tsx

@@ -1,8 +1,8 @@
 import { FaTimes } from "react-icons/fa";
 import { ITFormHeaderProps } from "./form-header.props";
-import { useITThemeSafe } from "../theme-provider/themeProvider";
+import { useITThemeSafe } from "@/theme/theme-context";
 import { getContrastTextColor } from "@/utils/color.utils";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Colored header bar for modals and forms with an optional close button.

package/src/components/{pagination → molecules/pagination}/pagination.doc.mdx

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

package/src/components/{pagination → molecules/pagination}/pagination.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITPagination from "./pagination";
+import ITPagination from "@/components/molecules/pagination/pagination";
 import { useState } from "react";
 
 const meta: Meta<typeof ITPagination> = {
@@ -8,7 +8,6 @@ const meta: Meta<typeof ITPagination> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     currentPage: { control: "number" },
     totalPages: { control: "number" },

package/src/components/{pagination → molecules/pagination}/pagination.tsx

@@ -3,8 +3,8 @@ import clsx from "clsx";
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 import { ITPaginationProps } from "./pagination.props";
 import { theme } from "@/theme/theme";
-import ITSelect from "../select/select";
-import ITText from "@/components/text/text";
+import ITSelect from "@/components/molecules/select/select";
+import ITText from "@/components/atoms/text/text";
 
 const DOTS = "...";
 
@@ -44,8 +44,8 @@ const usePagination = ({
       Case 2: No left dots to show, but rights dots to be shown
     */
     if (!shouldShowLeftDots && shouldShowRightDots) {
-      let leftItemCount = 3 + 2 * siblingCount;
-      let leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+      const leftItemCount = 3 + 2 * siblingCount;
+      const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
       return [...leftRange, DOTS, totalPages];
     }
 
@@ -53,8 +53,8 @@ const usePagination = ({
       Case 3: No right dots to show, but left dots to be shown
     */
     if (shouldShowLeftDots && !shouldShowRightDots) {
-      let rightItemCount = 3 + 2 * siblingCount;
-      let rightRange = Array.from(
+      const rightItemCount = 3 + 2 * siblingCount;
+      const rightRange = Array.from(
         { length: rightItemCount },
         (_, i) => totalPages - rightItemCount + i + 1
       );
@@ -65,7 +65,7 @@ const usePagination = ({
       Case 4: Both left and right dots to be shown
     */
     if (shouldShowLeftDots && shouldShowRightDots) {
-      let middleRange = Array.from(
+      const middleRange = Array.from(
         { length: rightSiblingIndex - leftSiblingIndex + 1 },
         (_, i) => leftSiblingIndex + i
       );
@@ -226,7 +226,7 @@ export default function ITPagination({
               value={String(itemsPerPage)}
               onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
               onBlur={() => {}}
-              size="small"
+              size="sm"
               className="!w-14 !h-6 !text-xs !py-0 !px-1! !border-none !bg-transparent !ring-0 focus:!ring-0 cursor-pointer font-bold text-secondary-700"
               placeholder=""
             />