@axzydev/axzy_ui_system 1.2.2 → 1.2.4

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "type": "module",
   "sideEffects": [
     "*.css"

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/text/text.tsx

@@ -11,7 +11,7 @@ export default function ITText({
   return (
     <Tag
       className={className}
-      style={muted ? { color: "var(--color-text-muted)", ...style } : { color: "var(--color-text-default)", ...style }}
+      style={muted ? { color: "var(--color-text-muted)", ...style } : style}
       {...rest}
     >
       {children}

package/src/dev.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "./index.css";

package/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
+import "./dev.css";
 import App from "./App";
 createRoot(document.getElementById("root")!).render(
   <StrictMode>