@axzydev/axzy_ui_system 1.2.3 → 1.2.6

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.2.3",
+  "version": "1.2.6",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -29,9 +29,10 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "build:app": "tsc -b && vite build -c vite.app.config.ts",
+    "build:css": "node scripts/build-css.mjs",
     "lint": "eslint .",
     "preview": "vite preview",
-    "bundle": "tsup src/index.ts",
+    "bundle": "tsup src/index.ts && node scripts/build-css.mjs",
     "watch": "tsup src/index.ts --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"

package/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from "react";
 import {
   FaCreditCard,
-  FaHome,
+FaHome,
   FaKeyboard,
   FaRegBell,
   FaSearch,

package/src/components/data-table/dataTable.tsx

@@ -196,7 +196,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
 
   return (
     <div className={clsx("space-y-4 w-full relative", containerClassName)}>
-      <div className="rounded-xl shadow-sm border border-secondary-200 overflow-hidden" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+      <div className="rounded-xl shadow-sm overflow-hidden" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
         {title && (
           <div className="px-6 py-5 border-b border-secondary-100 flex justify-between items-center" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
             <ITText as="h2" className="text-xl font-bold text-secondary-900 leading-tight">{title}</ITText>
@@ -232,7 +232,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
             )}
           >
             <thead>
-              <tr className="bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500">
+              <tr className="bg-white border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500">
                 {columns.map((col) => (
                   <th key={col.key} scope="col" className={clsx("px-4 py-4 align-top", col.className)}>
                     <div className="flex flex-col gap-3 min-w-[150px]">

package/src/components/layout/layout.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import clsx from "clsx";
 import ITTopBar from "../topbar/topbar";
 import ITSidebar from "../sidebar/sidebar";
 import { ITLayoutProps } from "./layout.props";
@@ -69,7 +70,7 @@ export default function ITLayout({
 
         {/* MAIN CONTENT AREA */}
         <main className="flex-1 overflow-y-auto w-full custom-scrollbar relative z-0">
-          <div className={`mx-auto w-full h-full ${contentClassName}`}>
+          <div className={clsx("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName)}>
             {children}
           </div>
         </main>

package/src/components/page/page.props.ts

@@ -9,6 +9,8 @@ export interface ITPageProps {
   backAction?: () => void;
   loading?: boolean;
   error?: string | null;
+  errorTitle?: string;
+  errorActionLabel?: string;
   onRetry?: () => void;
   empty?: boolean;
   emptyTitle?: string;

package/src/components/page/page.tsx

@@ -6,51 +6,66 @@ import ITEmptyState from "../empty-state/empty-state";
 import ITButton from "../button/button";
 import ITStack from "../stack/stack";
 
-export default function ITPage({
-  title,
-  description,
-  breadcrumbs,
-  actions,
-  backAction,
-  loading = false,
-  error = null,
-  onRetry,
-  empty = false,
-  emptyTitle,
-  emptyDescription,
-  emptyAction,
-  className,
-  children,
-}: ITPageProps) {
+const hasHeader = (props: ITPageProps) =>
+  !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction);
+
+const renderHeader = (props: ITPageProps) => {
+  if (!hasHeader(props)) return null;
+  return (
+    <ITPageHeader
+      title={props.title || ""}
+      description={props.description}
+      breadcrumbs={props.breadcrumbs}
+      actions={props.actions}
+      backAction={props.backAction}
+    />
+  );
+};
+
+export default function ITPage(props: ITPageProps) {
+  const {
+    loading = false,
+    error = null,
+    errorTitle,
+    errorActionLabel,
+    onRetry,
+    empty = false,
+    emptyTitle,
+    emptyDescription,
+    emptyAction,
+    className,
+    children,
+  } = props;
+
+  const wrapperClass = clsx("space-y-6", className);
+
   if (loading) {
     return (
-      <div className={className}>
-        {title && (
-          <ITPageHeader title={title} />
-        )}
-        <div className="mt-6">
-          <ITStack spacing={4}>
-            <ITSkeleton variant="rectangular" height={40} width="40%" />
-            <ITSkeleton variant="rectangular" height={200} />
-            <ITSkeleton variant="rectangular" height={200} />
-          </ITStack>
-        </div>
+      <div className={wrapperClass}>
+        {renderHeader(props)}
+        <ITStack spacing={4}>
+          <ITSkeleton variant="rectangular" height={40} width="40%" />
+          <ITSkeleton variant="rectangular" height={200} />
+          <ITSkeleton variant="rectangular" height={200} />
+        </ITStack>
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className={className}>
-        {title && (
-          <ITPageHeader title={title} />
-        )}
+      <div className={wrapperClass}>
+        {renderHeader(props)}
         <ITEmptyState
-          title="Error"
+          title={errorTitle || "Error"}
           description={error}
           action={
             onRetry ? (
-              <ITButton label="Reintentar" onClick={onRetry} size="small" />
+              <ITButton
+                label={errorActionLabel || "Reintentar"}
+                onClick={onRetry}
+                size="small"
+              />
             ) : undefined
           }
         />
@@ -60,10 +75,8 @@ export default function ITPage({
 
   if (empty) {
     return (
-      <div className={className}>
-        {title && (
-          <ITPageHeader title={title} />
-        )}
+      <div className={wrapperClass}>
+        {renderHeader(props)}
         <ITEmptyState
           title={emptyTitle || "Sin datos"}
           description={emptyDescription || "No hay información para mostrar"}
@@ -74,16 +87,8 @@ export default function ITPage({
   }
 
   return (
-    <div className={clsx("space-y-6", className)}>
-      {(title || breadcrumbs || actions || backAction) && (
-        <ITPageHeader
-          title={title || ""}
-          description={description}
-          breadcrumbs={breadcrumbs}
-          actions={actions}
-          backAction={backAction}
-        />
-      )}
+    <div className={wrapperClass}>
+      {renderHeader(props)}
       {children}
     </div>
   );

package/src/components/page-header/page-header.tsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { FaChevronLeft } from "react-icons/fa";
 import { ITPageHeaderProps } from "./page-header.props";
 import ITBreadcrumbs from "../breadcrumbs/breadcrumbs";
@@ -15,7 +14,7 @@ export default function ITPageHeader({
   const showTopRow = breadcrumbs?.length || backAction;
 
   return (
-    <div className={clsx(className)}>
+    <div className={className}>
       {showTopRow && (
         <div className="flex items-center justify-between gap-4 mb-1">
           <div className="flex items-center gap-2 min-w-0">

package/src/components/table/table.tsx

@@ -68,7 +68,7 @@ export default function ITTable<T extends Record<string, unknown>>({
           comparison =
             new Date(aValue as string).getTime() -
             new Date(bValue as string).getTime();
-          break; 
+          break;
         case "boolean":
           comparison = aValue === bValue ? 0 : aValue ? 1 : -1;
           break;
@@ -142,48 +142,48 @@ export default function ITTable<T extends Record<string, unknown>>({
         currentValue === undefined
           ? true
           : currentValue === true
-          ? false
-          : undefined;
+            ? false
+            : undefined;
 
-             const getToggleLabel = () => {
-         if (currentValue === undefined) return "Mostrar todos";
-         if (currentValue === true) return "Filtrar solo verdaderos";
-         return "Filtrar solo falsos";
-       };
+      const getToggleLabel = () => {
+        if (currentValue === undefined) return "Mostrar todos";
+        if (currentValue === true) return "Filtrar solo verdaderos";
+        return "Filtrar solo falsos";
+      };
 
-       return (
-         <button
-           className="flex items-center justify-center cursor-pointer focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 rounded-full p-1 transition-all duration-200"
-           onClick={() => handleFilterChange(col.key, nextValue)}
-           aria-label={`${getToggleLabel()} para ${col.label}`}
-           title={`${getToggleLabel()} para ${col.label}`}
-         >
-           <div className="relative w-10 h-5 bg-gray-300 rounded-full">
-             <div
-               className={clsx(
-                 "absolute top-0.5 w-4 h-4 rounded-full transition-all duration-300 shadow-sm",
-                 {
-                   "left-0.5 bg-gray-400": currentValue === undefined,
-                   "left-5 bg-slate-500": currentValue === true,
-                   "left-0.5 bg-gray-500": currentValue === false,
-                 }
-               )}
-             />
-           </div>
-         </button>
-       );
+      return (
+        <button
+          className="flex items-center justify-center cursor-pointer focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 rounded-full p-1 transition-all duration-200"
+          onClick={() => handleFilterChange(col.key, nextValue)}
+          aria-label={`${getToggleLabel()} para ${col.label}`}
+          title={`${getToggleLabel()} para ${col.label}`}
+        >
+          <div className="relative w-10 h-5 bg-gray-300 rounded-full">
+            <div
+              className={clsx(
+                "absolute top-0.5 w-4 h-4 rounded-full transition-all duration-300 shadow-sm",
+                {
+                  "left-0.5 bg-gray-400": currentValue === undefined,
+                  "left-5 bg-slate-500": currentValue === true,
+                  "left-0.5 bg-gray-500": currentValue === false,
+                }
+              )}
+            />
+          </div>
+        </button>
+      );
     }
 
-         if (col.filter === "catalog" && col.catalogOptions) {
-       if (col.catalogOptions.loading) {
-         return (
-           <FaSpinner 
-             className="animate-spin" 
-             aria-label="Cargando opciones"
-             title="Cargando opciones"
-           />
-         );
-       }
+    if (col.filter === "catalog" && col.catalogOptions) {
+      if (col.catalogOptions.loading) {
+        return (
+          <FaSpinner
+            className="animate-spin"
+            aria-label="Cargando opciones"
+            title="Cargando opciones"
+          />
+        );
+      }
 
       if (col.catalogOptions.error) {
         return <ITText as="span" className="text-red-500 text-xs">Error cargando</ITText>;
@@ -204,7 +204,7 @@ export default function ITTable<T extends Record<string, unknown>>({
             const value = e.target.value === "" ? undefined : e.target.value;
             handleFilterChange(col.key, value);
           }}
-          onBlur={() => {}}
+          onBlur={() => { }}
           className="w-full text-xs"
         />
       );
@@ -217,7 +217,7 @@ export default function ITTable<T extends Record<string, unknown>>({
         placeholder="Buscar..."
         value={String(filters[col.key] || "")}
         onChange={(e) => handleFilterChange(col.key, e.target.value)}
-        onBlur={() => {}}
+        onBlur={() => { }}
       />
     );
   };
@@ -230,22 +230,22 @@ export default function ITTable<T extends Record<string, unknown>>({
     }
 
     switch (col.type) {
-      case "number": 
-        return (typeof value === "number") && col.currencyMX ?formatCurrencyMX(value)  : value;
-             case "boolean":
-         return value ? (
-           <FaCheck 
-             className="text-green-500" 
-             aria-label="Verdadero"
-             title="Verdadero"
-           />
-         ) : (
-           <FaTimes 
-             className="text-red-500"
-             aria-label="Falso" 
-             title="Falso"
-           />
-         );
+      case "number":
+        return (typeof value === "number") && col.currencyMX ? formatCurrencyMX(value) : value;
+      case "boolean":
+        return value ? (
+          <FaCheck
+            className="text-green-500"
+            aria-label="Verdadero"
+            title="Verdadero"
+          />
+        ) : (
+          <FaTimes
+            className="text-red-500"
+            aria-label="Falso"
+            title="Falso"
+          />
+        );
       case "actions":
         return col.actions ? col.actions(row) : null;
       case "catalog":
@@ -261,116 +261,115 @@ export default function ITTable<T extends Record<string, unknown>>({
     }
   };
 
-     return (
-<div className={clsx("space-y-4 w-full", containerClassName)}>
-  <div className="rounded-xl shadow-sm border border-secondary-200 overflow-hidden" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
-    {/* Header outside overflow */}
-    {title && (
-      <div className="px-6 py-5 border-b border-secondary-100" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
-        <ITText as="h2" className="text-xl font-bold text-secondary-900 leading-tight">{title}</ITText>
-      </div>
-    )}
-
-    {/* Scrollable Table */}
-    <div className="overflow-x-auto">
-      <table
-        className={clsx(
-          "min-w-max w-full text-sm text-left text-secondary-600",
-          variantStyles[variant],
-          sizeStyles[size]
+  return (
+    <div className={clsx("space-y-4 w-full", containerClassName)}>
+      <div className="rounded-xl shadow-sm overflow-hidden" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+        {/* Header outside overflow */}
+        {title && (
+          <div className="px-6 py-5 border-b border-secondary-100" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+            <ITText as="h2" className="text-xl font-bold text-secondary-900 leading-tight">{title}</ITText>
+          </div>
         )}
-      >
 
-           <thead>
-             <tr className="bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500">
-               {columns.map((col) => (
-                 <th
-                   key={col.key}
-                   scope="col"
-                   className={clsx("px-4 py-4 align-top", col.className)}
-                 >
-                   <div className="flex flex-col gap-3 min-w-[150px]">
-                     {/* Column header */}
-                     <div className="flex items-center justify-between gap-2">
+        {/* Scrollable Table */}
+        <div className="overflow-x-auto">
+          <table
+            className={clsx(
+              "min-w-max w-full text-sm text-left text-secondary-600",
+              variantStyles[variant],
+              sizeStyles[size]
+            )}
+          >
+
+            <thead>
+              <tr className="bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500">
+                {columns.map((col) => (
+                  <th
+                    key={col.key}
+                    scope="col"
+                    className={clsx("px-4 py-4 align-top", col.className)}
+                  >
+                    <div className="flex flex-col gap-3 min-w-[150px]">
+                      {/* Column header */}
+                      <div className="flex items-center justify-between gap-2">
                         <ITText as="span" className="text-secondary-700 font-bold">{col.label}</ITText>
-                       {col.sortable && col.type !== "actions" && (
-                         <button
-                           onClick={() => handleSort(col.key)}
-                           className={`p-1 rounded-md transition-colors ${
-                             sortConfig?.key === col.key
-                               ? "bg-secondary-200 text-secondary-900" 
-                               : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"
-                           }`}
-                           title={`Ordenar por ${col.label}`}
-                         >
-                           <MdOutlineSwapVert className="w-4 h-4" aria-hidden="true" />
-                         </button>
-                       )}
-                     </div>
-                     
-                     {/* Filter section */}
-                     <div className="w-full">
-                       {col.filter ? renderFilterInput(col) : null}
-                     </div>
-                   </div>
-                 </th>
-               ))}
-             </tr>
-           </thead>
-          <tbody className="divide-y divide-secondary-100">
-            {currentData.length > 0 ? (
-                             currentData.map((row, rowIndex) => (
-                 <tr
-                   key={rowIndex}
-                   className="hover:bg-secondary-50/50 transition-colors duration-150 group"
-                 >
-                                     {columns.map((col) => (
-                     <td
-                       key={`${rowIndex}-${col.key}`}
-                       className={clsx("px-4 py-3 align-middle", col.className)}
-                     >
-                       {col.type === "actions" ? (
-                         <div className="flex items-center justify-center gap-2">
-                           {renderCellContent(col, row) as React.ReactNode}
-                         </div>
-                       ) : (
-                         <div className="text-secondary-700 font-medium">
+                        {col.sortable && col.type !== "actions" && (
+                          <button
+                            onClick={() => handleSort(col.key)}
+                            className={`p-1 rounded-md transition-colors ${sortConfig?.key === col.key
+                                ? "bg-secondary-200 text-secondary-900"
+                                : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"
+                              }`}
+                            title={`Ordenar por ${col.label}`}
+                          >
+                            <MdOutlineSwapVert className="w-4 h-4" aria-hidden="true" />
+                          </button>
+                        )}
+                      </div>
+
+                      {/* Filter section */}
+                      <div className="w-full">
+                        {col.filter ? renderFilterInput(col) : null}
+                      </div>
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-secondary-100">
+              {currentData.length > 0 ? (
+                currentData.map((row, rowIndex) => (
+                  <tr
+                    key={rowIndex}
+                    className="hover:bg-secondary-50/50 transition-colors duration-150 group"
+                  >
+                    {columns.map((col) => (
+                      <td
+                        key={`${rowIndex}-${col.key}`}
+                        className={clsx("px-4 py-3 align-middle", col.className)}
+                      >
+                        {col.type === "actions" ? (
+                          <div className="flex items-center justify-center gap-2">
                             {renderCellContent(col, row) as React.ReactNode}
-                         </div>
-                       )}
-                     </td>
-                   ))}
+                          </div>
+                        ) : (
+                          <div className="text-secondary-700 font-medium">
+                            {renderCellContent(col, row) as React.ReactNode}
+                          </div>
+                        )}
+                      </td>
+                    ))}
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={columns.length} className="px-6 py-12 text-center">
+                    <div className="flex flex-col items-center justify-center text-secondary-400">
+                      <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
+                      <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
+                    </div>
+                  </td>
                 </tr>
-              ))
-            ) : (
-              <tr>
-                <td colSpan={columns.length} className="px-6 py-12 text-center">
-                  <div className="flex flex-col items-center justify-center text-secondary-400">
-                    <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
-                    <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
-                  </div>
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
+              )}
+            </tbody>
+          </table>
+        </div>
 
 
-      {/* Pagination */}
-      <div className="rounded-b-xl border-t border-secondary-200 px-6 py-4" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
-        <ITPagination
-          currentPage={currentPage}
-          totalPages={computedTotalPages}
-          onPageChange={goToPage}
-          color="primary"
-          itemsPerPageOptions={itemsPerPageOptions}
-          itemsPerPage={itemsPerPage}
-          onItemsPerPageChange={handleItemsPerPageChange}
-          totalItems={filteredData.length}
-        />
+        {/* Pagination */}
+        <div className="rounded-b-xl border-t border-secondary-200 px-6 py-4" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+          <ITPagination
+            currentPage={currentPage}
+            totalPages={computedTotalPages}
+            onPageChange={goToPage}
+            color="primary"
+            itemsPerPageOptions={itemsPerPageOptions}
+            itemsPerPage={itemsPerPage}
+            onItemsPerPageChange={handleItemsPerPageChange}
+            totalItems={filteredData.length}
+          />
+        </div>
       </div>
     </div>
-</div>
   );
 }

package/src/index.css

@@ -1,3 +1,8 @@
+@import "tailwindcss";
+
+@source "./**/*.{ts,tsx}";
+@source "../.storybook/**/*.{ts,tsx}";
+
 @variant dark (&:is(.dark &));
 
 :root, :host {

package/src/showcases/DataShowcases.tsx

@@ -49,7 +49,7 @@ export const TableShowcase = () => {
       description="Base de renderizado de tablas estructuradas con soporte de alineamiento y tipado estricto."
       code={code}
       demo={
-        <div className="w-full bg-white dark:bg-slate-900 border rounded-xl overflow-hidden shadow-sm">
+        <div className="w-full bg-white dark:bg-slate-900  rounded-xl overflow-hidden shadow-sm">
           <ITTable
             columns={columns}
             data={data}