@axzydev/axzy_ui_system 1.2.12 → 1.2.14

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

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

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

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITDialog from './dialog';
+import type { Meta } from '@storybook/react';
+import ITDialog from '@/components/organisms/dialog/dialog';
 import { useState } from 'react';
-import ITButton from '../button/button';
+import ITButton from '@/components/atoms/button/button';
 
 const meta = {
   title: 'Components/Feedback/ITDialog',
@@ -9,7 +9,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     isOpen: { control: 'boolean' },
     onClose: { action: 'closed' },
@@ -19,7 +18,6 @@ const meta = {
 } satisfies Meta<typeof ITDialog>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 // Wrapper to handle open/close state
 const DialogWrapper = (args: any) => {

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

@@ -4,8 +4,8 @@ import { useEffect, useRef } from "react";
 import { FaRegTimesCircle } from "react-icons/fa";
 import { ITDialogProps } from "./dialog.props";
 import useClickOutside from "@/hooks/useClickOutside";
-import ITFormHeader from "../form-header/form-header";
-import ITText from "@/components/text/text";
+import ITFormHeader from "@/components/molecules/form-header/form-header";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Modal dialog rendered via React portal with overlay backdrop.

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

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

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

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import ITDrawer from "./drawer";
-import ITButton from "../button/button";
+import ITDrawer from "@/components/organisms/drawer/drawer";
+import ITButton from "@/components/atoms/button/button";
 
 const meta: Meta<typeof ITDrawer> = {
   title: "Components/Overlay/ITDrawer",
   component: ITDrawer,
-  tags: ["autodocs"],
 };
 
 export default meta;

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

@@ -3,7 +3,7 @@ import { ITDrawerProps } from "./drawer.props";
 import { FaTimes } from "react-icons/fa";
 import useClickOutside from "@/hooks/useClickOutside";
 import { useRef } from "react";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Sliding panel drawer from the left or right screen edge.

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

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './dropfile.stories';
+import * as StoriesData from './dropfile.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITDropfile
 
@@ -21,6 +21,9 @@ A drag-and-drop file upload zone with preview support for images. Tracks upload
 | `uploadStatus` | `UploadStatus` | — | Externally controlled upload status. |
 | `onStatusChange` | `(status: UploadStatus) => void` | — | Callback when upload status changes. |
 | `initialPreviewUrl` | `string \| null` | — | Initial preview URL shown before any file is selected (e.g., editing an existing entry). |
+| `view` | `"drop" \| "button"` | `"drop"` | `"drop"` renders the dropzone/preview inline. `"button"` renders a compact trigger button that opens the same UI inside an `ITDialog` modal. |
+| `buttonLabel` | `string` | `"Subir archivo"` | Label for the trigger button when `view="button"` and no file is selected yet. |
+| `modalTitle` | `string` | `buttonLabel` | Title of the modal opened when `view="button"`. |
 
 ### Enums
 
@@ -44,6 +47,18 @@ import { ITDropfile, UploadStatus, FileTypeEnum } from '@axzydev/axzy_ui_system'
 />
 ```
 
+### `view="button"`
+
+```tsx
+<ITDropfile
+  view="button"
+  buttonLabel="Subir archivos"
+  onFileSelect={(file) => setSelectedFile(file)}
+/>
+```
+
+Use this when you'd otherwise write your own button + modal wrapper around `ITDropfile` — it's built in. The button shows the picked file's name (and status badge, if `showStatusBadge`) once one is selected, and reopens the same dropzone/preview to change it. ~900ms after a successful confirm the modal closes **and the selection resets**, so the button goes back to `buttonLabel`, ready to upload another file — this mode is built for repeated uploads (e.g. an attachments list), replacing the old pattern of remounting `ITDropfile` with a changing `key` after each upload.
+
 ## Notes
 
 - Displays image preview for image file types; shows a file icon for non-image types.

package/src/components/{dropfile → organisms/dropfile}/dropfile.props.ts

@@ -44,4 +44,21 @@ export interface ITDropfileProps {
   onStatusChange?: (status: UploadStatus) => void;
   /** An initial preview URL to display before any file is selected. */
   initialPreviewUrl?: string | null;
+  /**
+   * Presentation mode. `"drop"` renders the dropzone/preview inline (default,
+   * current behavior, unaffected by anything below). `"button"` renders a
+   * compact trigger button instead — clicking it opens the same
+   * dropzone/preview UI inside an `ITDialog`, so callers don't need to build
+   * their own "open a modal" button around `ITDropfile`. Meant for repeated
+   * uploads (e.g. an attachments list): ~900ms after a successful confirm,
+   * the modal closes AND the selection resets, so the trigger goes back to
+   * `buttonLabel` ready for the next file — same effect callers previously
+   * got by remounting `ITDropfile` with a changing `key`.
+   * @default "drop"
+   */
+  view?: "drop" | "button";
+  /** Label for the trigger button when `view="button"` and no file is selected yet. @default "Subir archivo" */
+  buttonLabel?: string;
+  /** Title of the modal opened when `view="button"`. Defaults to `buttonLabel`. */
+  modalTitle?: string;
 }

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

@@ -1,6 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITDropfile, { FileTypeEnum, UploadStatus } from './dropfile';
-import { useState } from 'react';
+import type { Meta } from '@storybook/react';
+import ITDropfile, { UploadStatus } from '@/components/organisms/dropfile/dropfile';
 
 const meta = {
   title: 'Components/Actions/ITDropfile',
@@ -8,7 +7,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     onFileSelect: { action: 'file selected' },
     onCancel: { action: 'cancelled' },
@@ -18,11 +16,14 @@ const meta = {
       control: 'select',
       options: Object.values(UploadStatus),
     },
+    view: {
+      control: 'radio',
+      options: ['drop', 'button'],
+    },
   },
 } satisfies Meta<typeof ITDropfile>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 // Wrapper for stateful file handling in story
 const DropfileWrapper = (args: any) => {
@@ -64,6 +65,23 @@ export const Uploading: any = {
   },
 };
 
+export const ButtonView: any = {
+  render: (args) => <DropfileWrapper {...args} />,
+  args: {
+    view: 'button',
+    buttonLabel: 'Subir archivos',
+    showStatusBadge: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Compact trigger button that opens the dropzone/preview inside a modal (`ITDialog`) — use this instead of wrapping `ITDropfile` in your own "open a modal" button.',
+      },
+    },
+  },
+};
+
 export const ErrorState: any = {
   render: (args) => <DropfileWrapper {...args} />,
   args: {

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

@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import { useDropzone } from "react-dropzone";
 // import pdfjsLib from "@/hooks/pdf"; // Disabled as hook is missing
 import clsx from "clsx";
-import ITText from "@/components/text/text";
-import ITButton from "@/components/button/button";
+import ITText from "@/components/atoms/text/text";
+import ITButton from "@/components/atoms/button/button";
+import ITDialog from "@/components/organisms/dialog/dialog";
 import { ITDropfileProps, FileTypeEnum, UploadStatus } from "./dropfile.props";
 export { FileTypeEnum, UploadStatus } from "./dropfile.props";
 
@@ -25,6 +26,17 @@ export { FileTypeEnum, UploadStatus } from "./dropfile.props";
  *   showStatusBadge
  * />
  * ```
+ *
+ * @example
+ * Compact trigger button that opens the dropzone in a modal — no need to
+ * build your own "open a modal" button around `ITDropfile`:
+ * ```tsx
+ * <ITDropfile
+ *   view="button"
+ *   buttonLabel="Subir archivos"
+ *   onFileSelect={(file) => setSelectedFile(file)}
+ * />
+ * ```
  */
 const ITDropfile: React.FC<ITDropfileProps> = ({
   onFileSelect,
@@ -37,7 +49,11 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   uploadStatus: externalStatus,
   onStatusChange,
   initialPreviewUrl,
+  view = "drop",
+  buttonLabel = "Subir archivo",
+  modalTitle,
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [fileType, setFileType] = useState<string | null>(null);
   // Initialize preview with prop if available
@@ -47,8 +63,6 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   const [internalUploadStatus, setInternalUploadStatus] = useState<UploadStatus>(
     initialPreviewUrl ? UploadStatus.UPLOADED : UploadStatus.PENDING
   );
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
   // Sync initialPreviewUrl if it changes
   useEffect(() => {
     if (initialPreviewUrl && !selectedFile) {
@@ -278,20 +292,43 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
     handleCancel();
   };
 
-  const isImage = fileType && fileType.startsWith('image/');
+  // In "button" view, close the modal a moment after a successful upload and
+  // clear the selection so the trigger collapses back to its compact,
+  // ready-for-the-next-file state — mirrors what consumers previously did by
+  // hand (closing their own modal + remounting ITDropfile via a `key`) to
+  // upload attachments one after another.
+  useEffect(() => {
+    if (view === "button" && isConfirmed && uploadStatus === UploadStatus.UPLOADED) {
+      const timeout = setTimeout(() => {
+        setIsModalOpen(false);
+        setSelectedFile(null);
+        setFileType(null);
+        setIsConfirmed(false);
+        if (externalStatus === undefined) setInternalUploadStatus(UploadStatus.PENDING);
+        onStatusChange?.(UploadStatus.PENDING);
+        setImagePreview((current) => {
+          if (current) URL.revokeObjectURL(current);
+          return null;
+        });
+      }, 900);
+      return () => clearTimeout(timeout);
+    }
+  }, [view, isConfirmed, uploadStatus, externalStatus, onStatusChange]);
 
-  return (
-    <div className={clsx("w-full transition-all duration-300", containerClassName)}>
-      <div className="flex items-center justify-between mb-2">
-        <label className="block text-sm font-semibold text-secondary-700">
-          <ITText as="span">Subir archivo </ITText><ITText as="span" className="text-secondary-400 font-normal text-xs">({getFileExtensions()})</ITText>
-        </label>
-        
-        {showStatusBadge && selectedFile && (
-          <StatusBadge status={uploadStatus} />
-        )}
-      </div>
+  const headerRow = (
+    <div className="flex items-center justify-between mb-2">
+      <label className="block text-sm font-semibold text-secondary-700">
+        <ITText as="span">Subir archivo </ITText><ITText as="span" className="text-secondary-400 font-normal text-xs">({getFileExtensions()})</ITText>
+      </label>
 
+      {showStatusBadge && selectedFile && (
+        <StatusBadge status={uploadStatus} />
+      )}
+    </div>
+  );
+
+  const dropZoneOrPreview = (
+    <>
       {!selectedFile && !imagePreview ? (
         <div
           {...getRootProps()}
@@ -372,7 +409,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                   type="button"
                   variant="outlined"
                   color="secondary"
-                  size="small"
+                  size="sm"
                   onClick={handleCancel}
                 >
                   <ITText>Cancelar</ITText>
@@ -381,7 +418,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                   type="button"
                   variant="filled"
                   color="primary"
-                  size="small"
+                  size="sm"
                   onClick={handleConfirm}
                 >
                   <div className="flex items-center gap-2">
@@ -397,7 +434,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                 type="button"
                 variant="outlined"
                 color="danger"
-                size="small"
+                size="sm"
                 onClick={handleDelete}
               >
                 <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -423,6 +460,45 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
           )}
         </div>
       )}
+    </>
+  );
+
+  if (view === "button") {
+    const hasFile = Boolean(selectedFile || imagePreview);
+    return (
+      <div className={clsx("inline-block", containerClassName)}>
+        <ITButton
+          type="button"
+          variant="outlined"
+          color={hasFile ? "primary" : "secondary"}
+          size="sm"
+          onClick={() => setIsModalOpen(true)}
+        >
+          <div className="flex items-center gap-2 max-w-[220px]">
+            <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+            </svg>
+            <ITText className="truncate">
+              {selectedFile?.name || (hasFile ? "Archivo cargado" : buttonLabel)}
+            </ITText>
+            {showStatusBadge && hasFile && <StatusBadge status={uploadStatus} />}
+          </div>
+        </ITButton>
+
+        <ITDialog isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title={modalTitle ?? buttonLabel}>
+          <div className="w-full transition-all duration-300">
+            {headerRow}
+            {dropZoneOrPreview}
+          </div>
+        </ITDialog>
+      </div>
+    );
+  }
+
+  return (
+    <div className={clsx("w-full transition-all duration-300", containerClassName)}>
+      {headerRow}
+      {dropZoneOrPreview}
     </div>
   );
 };

package/src/components/{form-builder → organisms/form-builder}/fieldRenderer.tsx

@@ -1,31 +1,36 @@
-import React, { memo, useCallback, useEffect, useState } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useState, useRef } from "react";
 import clsx from "clsx";
 import { FieldConfigV2 } from "@/types/field.types";
 import { useITFormBuilderContext } from "./formBuilder.context";
-import ITInput from "../input/input";
-import ITSelect from "../select/select";
-import ITDatePicker from "../date-picker/datePicker";
-import ITTimePicker from "../time-picker/timePicker";
-import ITSearchSelect from "../search-select/search-select";
+import ITInput from "@/components/atoms/input/input";
+import ITSelect from "@/components/molecules/select/select";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
+import ITTimePicker from "@/components/molecules/time-picker/timePicker";
+import ITSearchSelect from "@/components/molecules/search-select/search-select";
 import { useFieldRules } from "./useFormBuilder";
 import { getColSpanClass, getGridColsClass } from "@/utils/styles";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 import { FaSpinner } from "react-icons/fa";
 
 function useAsyncOptions(options: FieldConfigV2["options"], depends: any[]) {
   const [resolved, setResolved] = useState<{ value: string; label: string }[]>([]);
   const [loading, setLoading] = useState(false);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
 
   useEffect(() => {
-    if (typeof options === "function") {
+    const opts = optionsRef.current;
+    if (typeof opts === "function") {
       setLoading(true);
-      options().then((result) => {
+      opts().then((result) => {
         setResolved(result.map(o => ({ value: String(o.value), label: o.label })));
         setLoading(false);
       });
-    } else if (Array.isArray(options)) {
-      setResolved(options.map(o => ({ value: String(o.value), label: o.label })));
+    } else if (Array.isArray(opts)) {
+      setResolved(opts.map(o => ({ value: String(o.value), label: o.label })));
     }
+    // Dependencias dinámicas por diseño (campos dependientes) — no verificables estáticamente.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, depends);
 
   return { options: resolved, loading };
@@ -61,16 +66,19 @@ const ITFieldRenderer = ({
     return () => {
       context.unregisterField(config.name);
     };
+    // `config`/`context` son estables en el provider; solo el name define el registro.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config.name]);
 
-  if (!isVisible) return null;
-
-  const activeConfig = {
-    ...config,
-    ...dynamicProps,
-    required: isRequired,
-    disabled: isDisabled,
-  };
+  const activeConfig = useMemo(
+    () => ({
+      ...config,
+      ...dynamicProps,
+      required: isRequired,
+      disabled: isDisabled,
+    }),
+    [config, dynamicProps, isRequired, isDisabled],
+  );
 
   const {
     name,
@@ -96,9 +104,11 @@ const ITFieldRenderer = ({
         await activeConfig.onChangeAction(finalValue, context);
       }
     },
-    [name, context]
+    [name, context, activeConfig]
   );
 
+  if (!isVisible) return null;
+
   const renderField = () => {
     switch (type) {
       case "text":

package/src/components/{form-builder → organisms/form-builder}/formBuilder.context.tsx

@@ -1,6 +1,5 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 import { FieldConfigV2, FieldContextV2 } from '@/types/field.types';
-import * as Yup from 'yup';
 
 interface ITFormBuilderContextType extends FieldContextV2 {
   config: FieldConfigV2[];
@@ -61,6 +60,8 @@ export const ITFormBuilderProvider = ({
   );
 };
 
+// Hook de acceso al contexto — patrón requerido junto al provider en el mismo archivo.
+// eslint-disable-next-line react-refresh/only-export-components
 export const useITFormBuilderContext = () => {
   const context = useContext(ITFormBuilderContext);
   if (!context) {

package/src/components/{form-builder → organisms/form-builder}/formBuilder.doc.mdx

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

package/src/components/{form-builder → organisms/form-builder}/formBuilder.stories.tsx

@@ -17,7 +17,6 @@ const meta: Meta<typeof ITFormBuilder> = {
       },
     },
   },
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/{form-builder → organisms/form-builder}/formBuilder.tsx

@@ -1,8 +1,7 @@
-import clsx from "clsx";
-import ITInput from "../input/input";
-import ITSelect from "../select/select";
+import ITInput from "@/components/atoms/input/input";
+import ITSelect from "@/components/molecules/select/select";
 import { ITFormBuilderProps } from "./formBuilder.props";
-import ITDatePicker from "../date-picker/datePicker";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
 import { useEffect, useState, useMemo } from "react";
 import { ITFormBuilderProvider } from "./formBuilder.context";
 import ITFieldRenderer from "./fieldRenderer";
@@ -65,7 +64,7 @@ export default function ITFormBuilder({
   setFieldError = () => {},
   isSubmitting = false,
 }: ITFormBuilderProps) {
-  const [mounted, setMounted] = useState(false);
+  const [, setMounted] = useState(false);
 
   useEffect(() => {
     setMounted(true);

package/src/components/{form-builder → organisms/form-builder}/useFormBuilder.ts

@@ -53,12 +53,12 @@ export const useFieldRules = (
   const isVisible = useMemo(() => {
     if (!fieldConfig.renderWhen) return true;
     return fieldConfig.renderWhen(dependentValues);
-  }, [fieldConfig.renderWhen, dependentValues]);
+  }, [fieldConfig, dependentValues]);
 
   const dynamicProps = useMemo(() => {
     if (!fieldConfig.dynamicProps) return {};
     return fieldConfig.dynamicProps(dependentValues);
-  }, [fieldConfig.dynamicProps, dependentValues]);
+  }, [fieldConfig, dependentValues]);
 
   const isRequired = useMemo(() => {
     if (typeof dynamicProps.required !== 'undefined') return dynamicProps.required;
@@ -66,7 +66,7 @@ export const useFieldRules = (
       return fieldConfig.required(dependentValues);
     }
     return fieldConfig.required || false;
-  }, [fieldConfig.required, dynamicProps.required, dependentValues]);
+  }, [fieldConfig, dynamicProps.required, dependentValues]);
 
   const isDisabled = useMemo(() => {
     if (typeof dynamicProps.disabled !== 'undefined') return dynamicProps.disabled;
@@ -74,7 +74,7 @@ export const useFieldRules = (
       return fieldConfig.disabled(dependentValues);
     }
     return fieldConfig.disabled || false;
-  }, [fieldConfig.disabled, dynamicProps.disabled, dependentValues]);
+  }, [fieldConfig, dynamicProps.disabled, dependentValues]);
 
   return { isVisible, dynamicProps, isRequired, isDisabled };
 };

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

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

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

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITNavbar from './navbar';
+import ITNavbar from '@/components/organisms/navbar/navbar';
 import { FaHome, FaChartBar, FaCog, FaUsers } from 'react-icons/fa';
 
 const meta = {
   title: 'Components/Layout & Navigation/ITNavbar',
   component: ITNavbar,
   parameters: { layout: 'fullscreen' },
-  tags: ['autodocs'],
   argTypes: {
     logoText: { control: 'text', description: 'Text displayed next to the logo' },
     navigationItems: { control: false, description: 'Navigation items with optional sub-items' },

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

@@ -2,7 +2,7 @@ import useClickOutside from "@/hooks/useClickOutside";
 import { useRef, useState } from "react";
 import { FaChevronDown, FaChevronRight, FaUserCircle } from "react-icons/fa";
 import { ITNavbarProps, ITNavigationItem } from "./navbar.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 import { theme } from "@/theme/theme";
 
 /**

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

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

package/src/components/{page-header → organisms/page-header}/page-header.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 ITPageHeader component. */
 export interface ITPageHeaderProps {

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

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FaUsers } from "react-icons/fa";
-import ITPageHeader from "./page-header";
-import ITButton from "../button/button";
+import ITPageHeader from "@/components/organisms/page-header/page-header";
+import ITButton from "@/components/atoms/button/button";
 
 const meta: Meta<typeof ITPageHeader> = {
   title: "Components/Layout/ITPageHeader",
   component: ITPageHeader,
-  tags: ["autodocs"],
 };
 
 export default meta;
@@ -41,8 +40,8 @@ export const WithActions: Story = {
     ],
     actions: (
       <>
-        <ITButton label="Exportar" variant="outlined" size="small" />
-        <ITButton label="Nueva Orden" size="small" />
+        <ITButton label="Exportar" variant="outlined" size="sm" />
+        <ITButton label="Nueva Orden" size="sm" />
       </>
     ),
   },
@@ -57,7 +56,7 @@ export const WithBackAction: Story = {
       { label: "Productos", href: "#" },
       { label: "Detalle" },
     ],
-    actions: <ITButton label="Editar" size="small" />,
+    actions: <ITButton label="Editar" size="sm" />,
   },
 };