@axzydev/axzy_ui_system 1.2.13 → 1.2.14

package/src/index.css

@@ -124,90 +124,40 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
-.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
-.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
-.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
-.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
-.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
-.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
-
-.col-span-full { grid-column: 1 / -1; }
-
-.col-span-1 { grid-column: span 1 / span 1; }
-.col-span-2 { grid-column: span 2 / span 2; }
-.col-span-3 { grid-column: span 3 / span 3; }
-.col-span-4 { grid-column: span 4 / span 4; }
-.col-span-5 { grid-column: span 5 / span 5; }
-.col-span-6 { grid-column: span 6 / span 6; }
-.col-span-7 { grid-column: span 7 / span 7; }
-.col-span-8 { grid-column: span 8 / span 8; }
-.col-span-9 { grid-column: span 9 / span 9; }
-.col-span-10 { grid-column: span 10 / span 10; }
-.col-span-11 { grid-column: span 11 / span 11; }
-.col-span-12 { grid-column: span 12 / span 12; }
-
-@media (width >= 40rem) {
-  .sm\:col-span-1 { grid-column: span 1 / span 1; }
-  .sm\:col-span-2 { grid-column: span 2 / span 2; }
-  .sm\:col-span-3 { grid-column: span 3 / span 3; }
-  .sm\:col-span-4 { grid-column: span 4 / span 4; }
-  .sm\:col-span-5 { grid-column: span 5 / span 5; }
-  .sm\:col-span-6 { grid-column: span 6 / span 6; }
-  .sm\:col-span-7 { grid-column: span 7 / span 7; }
-  .sm\:col-span-8 { grid-column: span 8 / span 8; }
-  .sm\:col-span-9 { grid-column: span 9 / span 9; }
-  .sm\:col-span-10 { grid-column: span 10 / span 10; }
-  .sm\:col-span-11 { grid-column: span 11 / span 11; }
-  .sm\:col-span-12 { grid-column: span 12 / span 12; }
-}
-
-@media (width >= 48rem) {
-  .md\:col-span-1 { grid-column: span 1 / span 1; }
-  .md\:col-span-2 { grid-column: span 2 / span 2; }
-  .md\:col-span-3 { grid-column: span 3 / span 3; }
-  .md\:col-span-4 { grid-column: span 4 / span 4; }
-  .md\:col-span-5 { grid-column: span 5 / span 5; }
-  .md\:col-span-6 { grid-column: span 6 / span 6; }
-  .md\:col-span-7 { grid-column: span 7 / span 7; }
-  .md\:col-span-8 { grid-column: span 8 / span 8; }
-  .md\:col-span-9 { grid-column: span 9 / span 9; }
-  .md\:col-span-10 { grid-column: span 10 / span 10; }
-  .md\:col-span-11 { grid-column: span 11 / span 11; }
-  .md\:col-span-12 { grid-column: span 12 / span 12; }
-}
-
-@media (width >= 64rem) {
-  .lg\:col-span-1 { grid-column: span 1 / span 1; }
-  .lg\:col-span-2 { grid-column: span 2 / span 2; }
-  .lg\:col-span-3 { grid-column: span 3 / span 3; }
-  .lg\:col-span-4 { grid-column: span 4 / span 4; }
-  .lg\:col-span-5 { grid-column: span 5 / span 5; }
-  .lg\:col-span-6 { grid-column: span 6 / span 6; }
-  .lg\:col-span-7 { grid-column: span 7 / span 7; }
-  .lg\:col-span-8 { grid-column: span 8 / span 8; }
-  .lg\:col-span-9 { grid-column: span 9 / span 9; }
-  .lg\:col-span-10 { grid-column: span 10 / span 10; }
-  .lg\:col-span-11 { grid-column: span 11 / span 11; }
-  .lg\:col-span-12 { grid-column: span 12 / span 12; }
-}
-
-@media (width >= 80rem) {
-  .xl\:col-span-1 { grid-column: span 1 / span 1; }
-  .xl\:col-span-2 { grid-column: span 2 / span 2; }
-  .xl\:col-span-3 { grid-column: span 3 / span 3; }
-  .xl\:col-span-4 { grid-column: span 4 / span 4; }
-  .xl\:col-span-5 { grid-column: span 5 / span 5; }
-  .xl\:col-span-6 { grid-column: span 6 / span 6; }
-  .xl\:col-span-7 { grid-column: span 7 / span 7; }
-  .xl\:col-span-8 { grid-column: span 8 / span 8; }
-  .xl\:col-span-9 { grid-column: span 9 / span 9; }
-  .xl\:col-span-10 { grid-column: span 10 / span 10; }
-  .xl\:col-span-11 { grid-column: span 11 / span 11; }
-  .xl\:col-span-12 { grid-column: span 12 / span 12; }
+/* ──────────────────────────────────────────────
+   GRID DINÁMICO (grid-cols-* / col-span-*)
+   Tailwind v4 ya genera estas utilities nativamente (incl. variants sm/md/lg/xl).
+   Estas @source inline son un safelist: fuerzan la generación de los valores
+   dinámicos construidos en runtime (grid.tsx, styles.ts → `col-span-${n}`),
+   que el scanner estático no puede ver. Sin esto, las clases dinámicas no
+   existirían en el bundle.
+   ────────────────────────────────────────────── */
+@source inline("grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-5 grid-cols-6 grid-cols-7 grid-cols-8 grid-cols-9 grid-cols-10 grid-cols-11 grid-cols-12");
+@source inline("col-span-1 col-span-2 col-span-3 col-span-4 col-span-5 col-span-6 col-span-7 col-span-8 col-span-9 col-span-10 col-span-11 col-span-12 col-span-full");
+@source inline("sm:col-span-1 sm:col-span-2 sm:col-span-3 sm:col-span-4 sm:col-span-5 sm:col-span-6 sm:col-span-7 sm:col-span-8 sm:col-span-9 sm:col-span-10 sm:col-span-11 sm:col-span-12 sm:col-span-full");
+@source inline("md:col-span-1 md:col-span-2 md:col-span-3 md:col-span-4 md:col-span-5 md:col-span-6 md:col-span-7 md:col-span-8 md:col-span-9 md:col-span-10 md:col-span-11 md:col-span-12 md:col-span-full");
+@source inline("lg:col-span-1 lg:col-span-2 lg:col-span-3 lg:col-span-4 lg:col-span-5 lg:col-span-6 lg:col-span-7 lg:col-span-8 lg:col-span-9 lg:col-span-10 lg:col-span-11 lg:col-span-12 lg:col-span-full");
+@source inline("xl:col-span-1 xl:col-span-2 xl:col-span-3 xl:col-span-4 xl:col-span-5 xl:col-span-6 xl:col-span-7 xl:col-span-8 xl:col-span-9 xl:col-span-10 xl:col-span-11 xl:col-span-12 xl:col-span-full");
+
+/* ──────────────────────────────────────────────
+   ANIMACIONES DE COMPONENTES (scoped it-*)
+   Antes vivían en toast.css / stepper.css sueltos que NUNCA llegaban al bundle
+   de dist (bug: animaciones muertas para consumidores) y usaban clases
+   genéricas sin prefijo. Ahora van en @layer components con prefijo it-*.
+   ────────────────────────────────────────────── */
+@layer components {
+  @keyframes it-slide-in-right {
+    from { opacity: 0; transform: translateX(24px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+  @keyframes it-slide-in-left {
+    from { opacity: 0; transform: translateX(-24px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+  .it-stepper-slide-in-right {
+    animation: it-slide-in-right 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  }
+  .it-stepper-slide-in-left {
+    animation: it-slide-in-left 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  }
 }

package/src/index.ts

@@ -7,110 +7,110 @@ import { useEditableRow } from "./hooks/useEditableRow";
 import { useTableState, UseTableStateOptions, UseTableStateResult } from "./hooks/useTableState";
 
 // COMPONENTES
-import ITAlert from "./components/alert/alert";
-import ITAvatar from "./components/avatar/avatar";
-import ITBadget from "./components/badget/badget";
-import ITBreadcrumbs from "./components/breadcrumbs/breadcrumbs";
-import ITButton from "./components/button/button";
-import ITCalendar from "./components/calendar/calendar";
-import ITCard from "./components/card/card";
-import ITCheckbox from "./components/checkbox/checkbox";
-import ITConfirmDialog from "./components/confirm-dialog/confirm-dialog";
-import ITDataTable from "./components/data-table/dataTable";
-import ITDatePicker from "./components/date-picker/datePicker";
-import ITDialog from "./components/dialog/dialog";
-import ITDivider from "./components/divider/divider";
-import ITDrawer from "./components/drawer/drawer";
-import ITEmptyState from "./components/empty-state/empty-state";
-import ITFlex from "./components/flex/flex";
-import ITFormBuilder from "./components/form-builder/formBuilder";
-import ITFormHeader from "./components/form-header/form-header";
-import ITGrid from "./components/grid/grid";
-import ITImage from "./components/image/image";
-import ITInput from "./components/input/input";
-import ITNavbar from "./components/navbar/navbar";
-import ITPage from "./components/page/page";
-import ITPageHeader from "./components/page-header/page-header";
-import ITPagination from "./components/pagination/pagination";
-import ITPopover from "./components/popover/popover";
-import ITProgress from "./components/progress/progress";
-import ITRadioGroup from "./components/radio/radio";
-import ITSearchSelect from "./components/search-select/search-select";
-import ITSelect from "./components/select/select";
-import ITSearchTable from "./components/searchTable/searchTable";
-import ITSegmentedControl from "./components/segmented-control/segmented-control";
-import ITSidebar from "./components/sidebar/sidebar";
-import ITSkeleton from "./components/skeleton/skeleton";
-import ITSlideToggle from "./components/slide/slide";
-import ITSlider from "./components/slider/slider";
-import ITStack from "./components/stack/stack";
-import ITStatCard from "./components/stat-card/stat-card";
-import ITTable from "./components/table/table";
-import ITText from "./components/text/text";
-import ITTextarea from "./components/textarea/textarea";
-import ITTabs from "./components/tabs/tabs";
-import ITTripleFilter from "./components/triple-filter/tripleFilter";
-import ITToast from "./components/toast/toast";
+import ITAlert from "./components/molecules/alert/alert";
+import ITAvatar from "./components/atoms/avatar/avatar";
+import ITBadget from "./components/atoms/badget/badget";
+import ITBreadcrumbs from "./components/molecules/breadcrumbs/breadcrumbs";
+import ITButton from "./components/atoms/button/button";
+import ITCalendar from "./components/molecules/calendar/calendar";
+import ITCard from "./components/molecules/card/card";
+import ITCheckbox from "./components/atoms/checkbox/checkbox";
+import ITConfirmDialog from "./components/organisms/confirm-dialog/confirm-dialog";
+import ITDataTable from "./components/organisms/data-table/dataTable";
+import ITDatePicker from "./components/molecules/date-picker/datePicker";
+import ITDialog from "./components/organisms/dialog/dialog";
+import ITDivider from "./components/atoms/divider/divider";
+import ITDrawer from "./components/organisms/drawer/drawer";
+import ITEmptyState from "./components/molecules/empty-state/empty-state";
+import ITFlex from "./components/atoms/flex/flex";
+import ITFormBuilder from "./components/organisms/form-builder/formBuilder";
+import ITFormHeader from "./components/molecules/form-header/form-header";
+import ITGrid from "./components/atoms/grid/grid";
+import ITImage from "./components/atoms/image/image";
+import ITInput from "./components/atoms/input/input";
+import ITNavbar from "./components/organisms/navbar/navbar";
+import ITPage from "./components/templates/page/page";
+import ITPageHeader from "./components/organisms/page-header/page-header";
+import ITPagination from "./components/molecules/pagination/pagination";
+import ITPopover from "./components/atoms/popover/popover";
+import ITProgress from "./components/atoms/progress/progress";
+import ITRadioGroup from "./components/atoms/radio/radio";
+import ITSearchSelect from "./components/molecules/search-select/search-select";
+import ITSelect from "./components/molecules/select/select";
+import ITSearchTable from "./components/organisms/searchTable/searchTable";
+import ITSegmentedControl from "./components/atoms/segmented-control/segmented-control";
+import ITSidebar from "./components/organisms/sidebar/sidebar";
+import ITSkeleton from "./components/atoms/skeleton/skeleton";
+import ITSlideToggle from "./components/atoms/slide/slide";
+import ITSlider from "./components/atoms/slider/slider";
+import ITStack from "./components/atoms/stack/stack";
+import ITStatCard from "./components/molecules/stat-card/stat-card";
+import ITTable from "./components/molecules/table/table";
+import ITText from "./components/atoms/text/text";
+import ITTextarea from "./components/atoms/textarea/textarea";
+import ITTabs from "./components/molecules/tabs/tabs";
+import ITTripleFilter from "./components/organisms/triple-filter/tripleFilter";
+import ITToast from "./components/organisms/toast/toast";
 
 // PROPS
-import type { ITAlertProps } from "./components/alert/alert.props";
-import type { ITAvatarProps } from "./components/avatar/avatar.props";
-import type { ITBadgetProps } from "./components/badget/badget.props";
-import type { ITBreadcrumbsProps, ITBreadcrumbItem } from "./components/breadcrumbs/breadcrumbs.props";
-import type { ITButtonProps } from "./components/button/button.props";
-import type { ITCalendarProps } from "./components/calendar/calendar.props";
-import type { ITCardProps } from "./components/card/card.props";
-import type { ITCheckboxProps } from "./components/checkbox/checkbox.props";
-import type { ITConfirmDialogProps } from "./components/confirm-dialog/confirm-dialog.props";
-import type { ITDataTableFetchParams, ITDataTableProps, ITDataTableResponse } from "./components/data-table/dataTable.props";
-import type { ITDatePickerProps } from "./components/date-picker/date-picker.props";
-import type { ITDialogProps } from "./components/dialog/dialog.props";
-import type { ITDividerProps } from "./components/divider/divider.props";
-import type { ITDrawerProps } from "./components/drawer/drawer.props";
-import type { ITEmptyStateProps } from "./components/empty-state/empty-state.props";
-import type { ITFlexProps } from "./components/flex/flex.props";
-import type { ITFormBuilderProps } from "./components/form-builder/formBuilder.props";
-import type { ITFormHeaderProps } from "./components/form-header/form-header.props";
-import type { ITGridProps } from "./components/grid/grid.props";
-import type { ITImageProps } from "./components/image/image.props";
-import type { ITInputProps } from "./components/input/input.props";
-import type { ITNavbarProps } from "./components/navbar/navbar.props";
-import type { ITPageProps } from "./components/page/page.props";
-import type { ITPageHeaderProps } from "./components/page-header/page-header.props";
-import type { ITPaginationProps } from "./components/pagination/pagination.props";
-import type { ITPopoverProps } from "./components/popover/popover.props";
-import type { ITProgressProps } from "./components/progress/progress.props";
-import type { ITRadioGroupProps, ITRadioOption } from "./components/radio/radio.props";
-import type { ITSearchSelectProps } from "./components/search-select/search-select.props";
-import type { ITSelectProps } from "./components/select/select.props";
-import type { ITSearchTableProps } from "./components/searchTable/searchTable.props";
-import type { ITSegmentedControlProps } from "./components/segmented-control/segmented-control.props";
-import type { ITSidebarProps, ITNavigationItem, ITNavigationSubItem } from "./components/sidebar/sidebar.props";
-import type { ITSkeletonProps } from "./components/skeleton/skeleton.props";
-import type { ITSlideToggleProps } from "./components/slide/slide.props";
-import type { ITSliderProps } from "./components/slider/slider.props";
-import type { ITStackProps } from "./components/stack/stack.props";
-import type { ITStatCardProps } from "./components/stat-card/stat-card.props";
-import type { ITTableProps, Column } from "./components/table/table.props";
-import type { ITTextProps } from "./components/text/text.props";
-import type { ITTextareaProps } from "./components/textarea/textarea.props";
-import type { ITTabsProps, ITTabItem } from "./components/tabs/tabs.props";
-import type { ITTripleFilterProps, ITTripleFilterOption } from "./components/triple-filter/tripleFilter.props";
-import type { ITToastProps } from "./components/toast/toast.props";
+import type { ITAlertProps } from "./components/molecules/alert/alert.props";
+import type { ITAvatarProps } from "./components/atoms/avatar/avatar.props";
+import type { ITBadgetProps } from "./components/atoms/badget/badget.props";
+import type { ITBreadcrumbsProps, ITBreadcrumbItem } from "./components/molecules/breadcrumbs/breadcrumbs.props";
+import type { ITButtonProps } from "./components/atoms/button/button.props";
+import type { ITCalendarProps } from "./components/molecules/calendar/calendar.props";
+import type { ITCardProps } from "./components/molecules/card/card.props";
+import type { ITCheckboxProps } from "./components/atoms/checkbox/checkbox.props";
+import type { ITConfirmDialogProps } from "./components/organisms/confirm-dialog/confirm-dialog.props";
+import type { ITDataTableFetchParams, ITDataTableProps, ITDataTableResponse } from "./components/organisms/data-table/dataTable.props";
+import type { ITDatePickerProps } from "./components/molecules/date-picker/date-picker.props";
+import type { ITDialogProps } from "./components/organisms/dialog/dialog.props";
+import type { ITDividerProps } from "./components/atoms/divider/divider.props";
+import type { ITDrawerProps } from "./components/organisms/drawer/drawer.props";
+import type { ITEmptyStateProps } from "./components/molecules/empty-state/empty-state.props";
+import type { ITFlexProps } from "./components/atoms/flex/flex.props";
+import type { ITFormBuilderProps } from "./components/organisms/form-builder/formBuilder.props";
+import type { ITFormHeaderProps } from "./components/molecules/form-header/form-header.props";
+import type { ITGridProps } from "./components/atoms/grid/grid.props";
+import type { ITImageProps } from "./components/atoms/image/image.props";
+import type { ITInputProps } from "./components/atoms/input/input.props";
+import type { ITNavbarProps } from "./components/organisms/navbar/navbar.props";
+import type { ITPageProps } from "./components/templates/page/page.props";
+import type { ITPageHeaderProps } from "./components/organisms/page-header/page-header.props";
+import type { ITPaginationProps } from "./components/molecules/pagination/pagination.props";
+import type { ITPopoverProps } from "./components/atoms/popover/popover.props";
+import type { ITProgressProps } from "./components/atoms/progress/progress.props";
+import type { ITRadioGroupProps, ITRadioOption } from "./components/atoms/radio/radio.props";
+import type { ITSearchSelectProps } from "./components/molecules/search-select/search-select.props";
+import type { ITSelectProps } from "./components/molecules/select/select.props";
+import type { ITSearchTableProps } from "./components/organisms/searchTable/searchTable.props";
+import type { ITSegmentedControlProps } from "./components/atoms/segmented-control/segmented-control.props";
+import type { ITSidebarProps, ITNavigationItem, ITNavigationSubItem } from "./components/organisms/sidebar/sidebar.props";
+import type { ITSkeletonProps } from "./components/atoms/skeleton/skeleton.props";
+import type { ITSlideToggleProps } from "./components/atoms/slide/slide.props";
+import type { ITSliderProps } from "./components/atoms/slider/slider.props";
+import type { ITStackProps } from "./components/atoms/stack/stack.props";
+import type { ITStatCardProps } from "./components/molecules/stat-card/stat-card.props";
+import type { ITTableProps, Column } from "./components/molecules/table/table.props";
+import type { ITTextProps } from "./components/atoms/text/text.props";
+import type { ITTextareaProps } from "./components/atoms/textarea/textarea.props";
+import type { ITTabsProps, ITTabItem } from "./components/molecules/tabs/tabs.props";
+import type { ITTripleFilterProps, ITTripleFilterOption } from "./components/organisms/triple-filter/tripleFilter.props";
+import type { ITToastProps } from "./components/organisms/toast/toast.props";
 import type { FieldConfig, FieldConfigV2 } from "./types/field.types";
 
 // UTILS
-import ITDropfile, { UploadStatus, FileTypeEnum } from "./components/dropfile/dropfile";
-import ITLayout from "./components/layout/layout";
-import { ITLayoutProps } from "./components/layout/layout.props";
-import ITLoader from "./components/loader/loader";
-import type { LoaderProps as ITLoaderProps } from "./components/loader/loader.props";
-import ITStepper from "./components/stepper/stepper";
-import type { ITStepperProps } from "./components/stepper/stepper.props";
+import ITDropfile, { UploadStatus, FileTypeEnum } from "./components/organisms/dropfile/dropfile";
+import ITLayout from "./components/templates/layout/layout";
+import { ITLayoutProps } from "./components/templates/layout/layout.props";
+import ITLoader from "./components/atoms/loader/loader";
+import type { LoaderProps as ITLoaderProps } from "./components/atoms/loader/loader.props";
+import ITStepper from "./components/molecules/stepper/stepper";
+import type { ITStepperProps } from "./components/molecules/stepper/stepper.props";
 import ITThemeProvider, { useITTheme, useITThemeSafe } from "./components/theme-provider/themeProvider";
 import type { ITThemeProviderProps, ITThemePalette } from "./components/theme-provider/themeProvider.props";
-import ITTimePicker from "./components/time-picker/timePicker";
-import type { ITTimePickerProps } from "./components/time-picker/timePicker.props";
+import ITTimePicker from "./components/molecules/time-picker/timePicker";
+import type { ITTimePickerProps } from "./components/molecules/time-picker/timePicker.props";
 import type { ITThemeConfig } from "./theme/theme.types";
 import { createValidationSchema } from "./types/yup.types";
 

package/src/showcases/DataShowcases.tsx

@@ -4,10 +4,6 @@ import {
   ITDataTable,
   ITBadget,
   ITAvatar,
-  ITButton,
-  ITFlex,
-  ITStack,
-  ITText,
   ITImage,
   ITInput,
   ITSelect,
@@ -147,7 +143,7 @@ export const TableShowcase = () => {
       key: "actions",
       label: "",
       type: "actions",
-      actions: (row: any) => (
+      actions: () => (
         <div className="flex gap-1">
           <button className="p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-400 hover:text-primary-600 transition-colors" title="View">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
@@ -697,9 +693,9 @@ export const BadgetShowcase = () => {
           <ITBadget label="Warning" color="warning" />
           <ITBadget label="Info" color="info" />
           <span className="mx-4 text-slate-300">|</span>
-          <ITBadget label="Small" color="primary" size="small" />
-          <ITBadget label="Medium" color="primary" size="medium" />
-          <ITBadget label="Large" color="primary" size="large" />
+          <ITBadget label="Small" color="primary" size="sm" />
+          <ITBadget label="Medium" color="primary" size="md" />
+          <ITBadget label="Large" color="primary" size="lg" />
         </div>
       }
     />

package/src/showcases/FeedbackShowcases.tsx

@@ -11,7 +11,7 @@ import {
   ITStack,
   useITTheme
 } from "../index";
-import { PRESETS } from "../components/theme-provider/themeProvider";
+import { PRESETS } from "../components/theme-provider/themePresets";
 import { ShowcaseLayout } from "./ShowcaseLayout";
 
 // 1. ITDialog Showcase
@@ -104,10 +104,10 @@ export const ToastShowcase = () => {
       }
       gallery={
         <div className="flex flex-wrap gap-3">
-          <ITButton label="Toast Exito" color="success" size="small" onClick={() => { setMsg("Operación exitosa!"); setType("success"); setVisible(true); }} />
-          <ITButton label="Toast Error" color="danger" size="small" onClick={() => { setMsg("Ocurrió un fallo de red."); setType("error"); setVisible(true); }} />
-          <ITButton label="Toast Warning" color="warning" size="small" onClick={() => { setMsg("Licencia por expirar."); setType("warning"); setVisible(true); }} />
-          <ITButton label="Toast Info" color="info" size="small" onClick={() => { setMsg("Actualización disponible."); setType("info"); setVisible(true); }} />
+          <ITButton label="Toast Exito" color="success" size="sm" onClick={() => { setMsg("Operación exitosa!"); setType("success"); setVisible(true); }} />
+          <ITButton label="Toast Error" color="danger" size="sm" onClick={() => { setMsg("Ocurrió un fallo de red."); setType("error"); setVisible(true); }} />
+          <ITButton label="Toast Warning" color="warning" size="sm" onClick={() => { setMsg("Licencia por expirar."); setType("warning"); setVisible(true); }} />
+          <ITButton label="Toast Info" color="info" size="sm" onClick={() => { setMsg("Actualización disponible."); setType("info"); setVisible(true); }} />
         </div>
       }
     />
@@ -211,7 +211,7 @@ export const ThemeProviderShowcase = () => {
                   label={mode === "light" ? "☀️ Claro" : mode === "dark" ? "🌙 Oscuro" : "💻 Sistema"}
                   color={darkModeMode === mode ? "primary" : "secondary"}
                   onClick={() => setDarkModeMode(mode)}
-                  size="small"
+                  size="sm"
                 />
               ))}
             </div>

package/src/showcases/FormShowcases.tsx

@@ -14,7 +14,7 @@ import {
   UploadStatus
 } from "../index";
 import { ShowcaseLayout, CodeViewer } from "./ShowcaseLayout";
-import ITFlex from "../components/flex/flex";
+import ITFlex from "../components/atoms/flex/flex";
 
 const CodeExampleBlock = ({ title, desc, code, children }: { title: string; desc: string; code: string; children: React.ReactNode }) => {
   const [showCode, setShowCode] = useState(false);
@@ -26,7 +26,7 @@ const CodeExampleBlock = ({ title, desc, code, children }: { title: string; desc
             <h3 className="text-sm font-bold text-slate-800 dark:text-white">{title}</h3>
             <p className="text-xs text-slate-500 mt-1">{desc}</p>
           </div>
-          <ITButton variant="outlined" color="gray" size="small" onClick={() => setShowCode(!showCode)}>
+          <ITButton variant="outlined" color="gray" size="sm" onClick={() => setShowCode(!showCode)}>
             <ITFlex align="center" gap={1}>
               <FaCode size={9} />
               {showCode ? "Ocultar código" : "Ver código"}
@@ -268,7 +268,7 @@ export const InputShowcase = () => {
       return `<ITDropfile\n  onFileSelect={(file) => setFile(file)}\n  uploadStatus={${fileVal ? "UploadStatus.UPLOADED" : "UploadStatus.PENDING"}}\n/>`;
     }
     return `// Formulario Completo AXZY con todos los tipos de Input:\n<form onSubmit={handleSubmit} className="space-y-4">\n  <ITInput label="Nombre Completo" name="name" value={name} onChange={...} />\n  <ITInput label="Correo" name="email" value={email} onChange={...} />\n  <ITInput label="Contraseña" type="password" name="password" value={password} onChange={...} />\n  \n  <ITSelect label="Rol de Usuario" value={role} options={roles} onChange={...} />\n  <ITSearchSelect label="País" value={country} options={countries} onChange={...} />\n  \n  <ITDatePicker label="Nacimiento" value={birthday} onChange={...} />\n  <ITTimePicker label="Hora de Entrada" value={time} onChange={...} />\n  \n  <ITSlideToggle label="Boletín" isOn={newsletter} onToggle={...} />\n  <ITDropfile label="Documento" onFileSelect={...} />\n  \n  <ITButton type="submit" label="Enviar Formulario" />\n</form>`;
-  }, [selectedInput, label, placeholder, variant, disabled, required, errorInput, textVal, passVal, selectVal, searchSelectVal, dateVal, timeVal, toggleVal, fileVal]);
+  }, [selectedInput, label, placeholder, variant, disabled, required, errorInput, textVal, passVal, selectVal, searchSelectVal, timeVal, toggleVal, fileVal]);
 
   const tabs = [
     { id: "text", label: "Texto" },
@@ -1179,10 +1179,10 @@ export const FormBuilderShowcase = () => {
                 setFieldValue={(field, val) => { setValues(prev => ({ ...prev, [field]: val })); return Promise.resolve(); }}
               />
               <div className="pt-4 flex justify-end gap-3">
-                <ITButton variant="outlined" color="gray" size="small" onClick={() => { setValues({ name: "", email: "", country: "MX", accept: false }); setSubmitted(null); }}>
+                <ITButton variant="outlined" color="gray" size="sm" onClick={() => { setValues({ name: "", email: "", country: "MX", accept: false }); setSubmitted(null); }}>
                   Limpiar
                 </ITButton>
-                <ITButton variant="filled" color="primary" size="small" type="submit">
+                <ITButton variant="filled" color="primary" size="sm" type="submit">
                   Enviar
                 </ITButton>
               </div>
@@ -1384,7 +1384,7 @@ const FormFillFromApi = () => {
           setFieldValue={(field, val) => { setValues(prev => ({ ...prev, [field]: val })); return Promise.resolve(); }}
         />
         <div className="flex justify-end">
-          <ITButton variant="filled" color="primary" size="small" type="submit">Guardar Cambios</ITButton>
+          <ITButton variant="filled" color="primary" size="sm" type="submit">Guardar Cambios</ITButton>
         </div>
       </form>
       {submitted && (
@@ -1458,7 +1458,7 @@ const CascadingSelectsExample = () => {
           setFieldValue={(field, val) => { setValues(prev => ({ ...prev, [field]: val })); return Promise.resolve(); }}
         />
         <div className="flex justify-end">
-          <ITButton variant="filled" color="primary" size="small" type="submit">Enviar</ITButton>
+          <ITButton variant="filled" color="primary" size="sm" type="submit">Enviar</ITButton>
         </div>
       </form>
       {submitted && (

package/src/showcases/GettingStartedShowcase.tsx

@@ -1,14 +1,13 @@
 import { FaNpm, FaReact, FaCheck } from "react-icons/fa";
 import { SiTailwindcss, SiTypescript, SiVite } from "react-icons/si";
 import { useState } from "react";
-import ITBadget from "../components/badget/badget";
-import ITButton from "../components/button/button";
-import ITCard from "../components/card/card";
-import ITDivider from "../components/divider/divider";
-import ITFlex from "../components/flex/flex";
-import ITGrid from "../components/grid/grid";
-import ITStack from "../components/stack/stack";
-import ITText from "../components/text/text";
+import ITBadget from "../components/atoms/badget/badget";
+import ITButton from "../components/atoms/button/button";
+import ITCard from "../components/molecules/card/card";
+import ITFlex from "../components/atoms/flex/flex";
+import ITGrid from "../components/atoms/grid/grid";
+import ITStack from "../components/atoms/stack/stack";
+import ITText from "../components/atoms/text/text";
 
 const CopyButton = ({ text }: { text: string }) => {
   const [copied, setCopied] = useState(false);
@@ -16,7 +15,7 @@ const CopyButton = ({ text }: { text: string }) => {
     <ITButton
       variant="text"
       color="gray"
-      size="small"
+      size="sm"
       onClick={() => { navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); }}
     >
       <ITFlex align="center" gap={1.5}>

package/src/showcases/HomeShowcase.tsx

@@ -1,14 +1,14 @@
 import { useState } from "react";
 import { FaArrowRight, FaCheck, FaCloud, FaCode, FaDatabase, FaDownload, FaExternalLinkAlt, FaGithub, FaLayerGroup, FaLinkedin, FaMapMarkerAlt, FaMobileAlt, FaSearch, FaServer, FaMedium } from "react-icons/fa";
 import { SiReact, SiNodedotjs } from "react-icons/si";
-import ITBadget from "../components/badget/badget";
-import ITButton from "../components/button/button";
-import ITCard from "../components/card/card";
-import ITDivider from "../components/divider/divider";
-import ITFlex from "../components/flex/flex";
-import ITGrid from "../components/grid/grid";
-import ITStack from "../components/stack/stack";
-import ITText from "../components/text/text";
+import ITBadget from "../components/atoms/badget/badget";
+import ITButton from "../components/atoms/button/button";
+import ITCard from "../components/molecules/card/card";
+import ITDivider from "../components/atoms/divider/divider";
+import ITFlex from "../components/atoms/flex/flex";
+import ITGrid from "../components/atoms/grid/grid";
+import ITStack from "../components/atoms/stack/stack";
+import ITText from "../components/atoms/text/text";
 
 export const HomeShowcase = () => {
   const [techSearch, setTechSearch] = useState("");
@@ -144,7 +144,7 @@ export const HomeShowcase = () => {
                 {/* CTAs */}
                 <ITFlex gap={2.5} wrap="wrap" align="center">
                   <a href="/Martin_Amaro_CV_ES_2026.pdf" download>
-                    <ITButton variant="filled" color="primary" size="small">
+                    <ITButton variant="filled" color="primary" size="sm">
                       <ITFlex align="center" gap={2}>
                         <FaDownload size={12} />
                         Descargar CV
@@ -153,7 +153,7 @@ export const HomeShowcase = () => {
                   </a>
                   <ITText as="span" muted className="text-xs">|</ITText>
                   <a href="https://github.com/maag070208" target="_blank" rel="noopener noreferrer">
-                    <ITButton variant="text" color="gray" size="small">
+                    <ITButton variant="text" color="gray" size="sm">
                       <ITFlex align="center" gap={1.5}>
                         <FaGithub size={14} />
                         GitHub
@@ -161,7 +161,7 @@ export const HomeShowcase = () => {
                     </ITButton>
                   </a>
                   <a href="https://www.linkedin.com/in/maag070208/" target="_blank" rel="noopener noreferrer">
-                    <ITButton variant="text" color="gray" size="small">
+                    <ITButton variant="text" color="gray" size="sm">
                       <ITFlex align="center" gap={1.5}>
                         <FaLinkedin size={14} />
                         LinkedIn
@@ -169,7 +169,7 @@ export const HomeShowcase = () => {
                     </ITButton>
                   </a>
                   <a href="https://medium.com/@axzydev" target="_blank" rel="noopener noreferrer">
-                    <ITButton variant="text" color="gray" size="small">
+                    <ITButton variant="text" color="gray" size="sm">
                       <ITFlex align="center" gap={1.5}>
                         <FaMedium size={14} />
                         Medium