@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/ArchitecturalPatternsComparisonSection-C-eRoUaS.js

@@ -1,325 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { C as i, a as d, T as t, ag as m, q as p, c as r } from "../index-D3gBsvbO.js";
-import { GitCompare as h, Lightbulb as l, Package as u, Check as s, Circle as n, Box as g, ArrowRight as o } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const C = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
-  d,
-  {
-    title: "Architectural Patterns: Standalone vs MFE",
-    className: "mt-2 mb-6",
-    children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-indigo-500 to-purple-500 shadow-lg", children: /* @__PURE__ */ e(h, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-        /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold", children: "Pattern Comparison & Selection Guide" })
-      ] }),
-      /* @__PURE__ */ a(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: [
-        "Understanding the differences between Standalone and MFE patterns helps you choose the right architecture for your project. Both patterns use the same",
-        " ",
-        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "ThemeProvider" }),
-        " ",
-        "component, but with different configuration approaches and use cases."
-      ] }),
-      /* @__PURE__ */ e(m, { variant: "info", dismissible: !1, children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ e(l, { className: "w-4 h-4" }),
-          /* @__PURE__ */ e(t, { tag: "span", className: "font-semibold", children: "TypeScript Safety" })
-        ] }),
-        /* @__PURE__ */ a(t, { tag: "p", className: "text-sm", children: [
-          "Both patterns use TypeScript discriminated unions to enforce the correct props. The",
-          " ",
-          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "architecturalPatterns" }),
-          " ",
-          "prop determines which props are available, preventing configuration errors at compile time."
-        ] })
-      ] }) }),
-      /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-        /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold text-lg", children: "Feature Comparison" }),
-          /* @__PURE__ */ e(
-            p,
-            {
-              columns: [
-                {
-                  key: "feature",
-                  label: "Feature",
-                  render: (c) => /* @__PURE__ */ e(t, { tag: "span", className: "font-medium", children: String(c) })
-                },
-                {
-                  key: "standalone",
-                  label: "Standalone App"
-                },
-                {
-                  key: "mfe",
-                  label: "Micro Frontends (MFE)"
-                }
-              ],
-              data: [
-                {
-                  feature: "Route Configuration",
-                  standalone: "menuItems (automatic generation)",
-                  mfe: "appRoutesConfig (explicit configuration)"
-                },
-                {
-                  feature: "Base Path",
-                  standalone: "Not required (uses root /)",
-                  mfe: "Required (e.g., /my-app)"
-                },
-                {
-                  feature: "Route Generation",
-                  standalone: "Automatic from menuItems",
-                  mfe: "Manual via appRoutesConfig"
-                },
-                {
-                  feature: "Nested Routes",
-                  standalone: "Supported via dropdownItems",
-                  mfe: "Supported via nested routes in config"
-                },
-                {
-                  feature: "Custom Routes",
-                  standalone: "Optional customRoutes prop",
-                  mfe: "Not available"
-                },
-                {
-                  feature: "Authentication",
-                  standalone: "Basic support via isPublic",
-                  mfe: "Advanced support with isPublic per route"
-                },
-                {
-                  feature: "Route Disabling",
-                  standalone: "Not directly supported",
-                  mfe: "Supported via disabled prop"
-                },
-                {
-                  feature: "Deployment",
-                  standalone: "Single deployment",
-                  mfe: "Independent deployments per app"
-                },
-                {
-                  feature: "Use Case",
-                  standalone: "Traditional SPAs, monolithic apps",
-                  mfe: "Distributed architectures, micro frontends"
-                },
-                {
-                  feature: "TypeScript Safety",
-                  standalone: "Enforced via discriminated unions",
-                  mfe: "Enforced via discriminated unions"
-                }
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
-          /* @__PURE__ */ a(i, { className: "p-4", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-3 mb-4", children: [
-              /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-              /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold", children: "Standalone App Pattern" })
-            ] }),
-            /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-              /* @__PURE__ */ a("div", { children: [
-                /* @__PURE__ */ e(
-                  t,
-                  {
-                    tag: "h5",
-                    className: "font-semibold text-sm mb-2",
-                    children: "When to Use:"
-                  }
-                ),
-                /* @__PURE__ */ a("ul", { className: "space-y-2 text-sm text-gray-600 dark:text-gray-400", children: [
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(s, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ e("span", { children: "Traditional single-page applications" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(s, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ e("span", { children: "All routes in one codebase" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(s, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ e("span", { children: "Simple deployment model" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(s, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ e("span", { children: "Want automatic route generation" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(s, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ e("span", { children: "No need for route isolation" })
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ a("div", { children: [
-                /* @__PURE__ */ e(
-                  t,
-                  {
-                    tag: "h5",
-                    className: "font-semibold text-sm mb-2",
-                    children: "Key Advantages:"
-                  }
-                ),
-                /* @__PURE__ */ a("ul", { className: "space-y-1 text-sm text-gray-600 dark:text-gray-400", children: [
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(n, { className: "w-3 h-3 mt-1 shrink-0 fill-current" }),
-                    /* @__PURE__ */ e("span", { children: "Simple configuration with menuItems" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(n, { className: "w-3 h-3 mt-1 shrink-0 fill-current" }),
-                    /* @__PURE__ */ e("span", { children: "Automatic route generation" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(n, { className: "w-3 h-3 mt-1 shrink-0 fill-current" }),
-                    /* @__PURE__ */ e("span", { children: "Nested routes via dropdownItems" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(n, { className: "w-3 h-3 mt-1 shrink-0 fill-current" }),
-                    /* @__PURE__ */ e("span", { children: "Optional customRoutes override" })
-                  ] })
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ e("div", { className: "mt-4 p-3 bg-light-dark rounded-lg", children: /* @__PURE__ */ e(r, { language: "tsx", code: `// Use Standalone App Pattern when:
-// ✅ Building a traditional single-page application
-// ✅ All routes are in one codebase
-// ✅ You want automatic route generation
-// ✅ Simple deployment model
-// ✅ No need for route isolation
-
-function MyStandaloneApp() {
-  return (
-    <ThemeProvider
-      menuItems={menuItems}  // Simple configuration
-      logo={{ name: 'My', secondName: 'App' }}
-    />
-  );
-}` }) })
-          ] }),
-          /* @__PURE__ */ a(i, { className: "p-4", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-3 mb-4", children: [
-              /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-purple-500 to-indigo-500 shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-              /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold", children: "Micro Frontends (MFE) Pattern" })
-            ] }),
-            /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-              /* @__PURE__ */ a("div", { children: [
-                /* @__PURE__ */ e(
-                  t,
-                  {
-                    tag: "h5",
-                    className: "font-semibold text-sm mb-2",
-                    children: "When to Use:"
-                  }
-                ),
-                /* @__PURE__ */ a("ul", { className: "space-y-2 text-sm text-gray-600 dark:text-gray-400", children: [
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(s, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ e("span", { children: "Micro frontend architecture" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(s, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ e("span", { children: "Multiple teams working independently" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(s, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ e("span", { children: "Need independent deployments" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(s, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ e("span", { children: "Require route isolation" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(s, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ e("span", { children: "Need explicit route control" })
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ a("div", { children: [
-                /* @__PURE__ */ e(
-                  t,
-                  {
-                    tag: "h5",
-                    className: "font-semibold text-sm mb-2",
-                    children: "Key Advantages:"
-                  }
-                ),
-                /* @__PURE__ */ a("ul", { className: "space-y-1 text-sm text-gray-600 dark:text-gray-400", children: [
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(n, { className: "w-3 h-3 mt-1 shrink-0 fill-current" }),
-                    /* @__PURE__ */ e("span", { children: "Explicit route configuration" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(n, { className: "w-3 h-3 mt-1 shrink-0 fill-current" }),
-                    /* @__PURE__ */ e("span", { children: "Route isolation with basePath" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(n, { className: "w-3 h-3 mt-1 shrink-0 fill-current" }),
-                    /* @__PURE__ */ e("span", { children: "Advanced authentication support" })
-                  ] }),
-                  /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ e(n, { className: "w-3 h-3 mt-1 shrink-0 fill-current" }),
-                    /* @__PURE__ */ e("span", { children: "Route disabling capability" })
-                  ] })
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ e("div", { className: "mt-4 p-3 bg-light-dark rounded-lg", children: /* @__PURE__ */ e(r, { language: "tsx", code: `// Use MFE Pattern when:
-// ✅ Building micro frontend architecture
-// ✅ Multiple teams working independently
-// ✅ Need independent deployments
-// ✅ Require route isolation
-// ✅ Need explicit route control
-
-function MyMfeApp() {
-  return (
-    <ThemeProvider
-      architecturalPatterns="mfe"
-      basePath="/my-app"  // Required for MFE
-      appRoutesConfig={appRoutesConfig}  // Explicit routes
-      logo={{ name: 'My', secondName: 'App' }}
-    />
-  );
-}` }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ e(i, { className: "p-4", children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ e(l, { className: "w-5 h-5 text-yellow-500 shrink-0 mt-0.5" }),
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e(t, { tag: "p", className: "text-sm font-semibold mb-2", children: "Decision Guide" }),
-            /* @__PURE__ */ a(
-              t,
-              {
-                tag: "p",
-                className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-                children: [
-                  "Choose ",
-                  /* @__PURE__ */ e("strong", { children: "Standalone App Pattern" }),
-                  " if you're building a traditional SPA with all routes in one codebase. Choose ",
-                  /* @__PURE__ */ e("strong", { children: "MFE Pattern" }),
-                  " if you need independent deployments, route isolation, or are building a micro frontend architecture."
-                ]
-              }
-            ),
-            /* @__PURE__ */ a("div", { className: "space-y-2 text-sm", children: [
-              /* @__PURE__ */ a("div", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ e(o, { className: "w-4 h-4 text-blue-500 shrink-0 mt-0.5" }),
-                /* @__PURE__ */ a("span", { children: [
-                  /* @__PURE__ */ e("strong", { children: "Start with Standalone" }),
-                  " if you're unsure - it's simpler and can be migrated to MFE later if needed."
-                ] })
-              ] }),
-              /* @__PURE__ */ a("div", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ e(o, { className: "w-4 h-4 text-purple-500 shrink-0 mt-0.5" }),
-                /* @__PURE__ */ a("span", { children: [
-                  /* @__PURE__ */ e("strong", { children: "Use MFE" }),
-                  " from the start if you know you'll need independent deployments or route isolation."
-                ] })
-              ] })
-            ] })
-          ] })
-        ] }) })
-      ] })
-    ] })
-  }
-) }) });
-export {
-  C as default
-};

package/documentation/ArchitecturalPatternsComparisonSection-FO_wmSbl.js

@@ -1,31 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-VrMogvDN.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const t=[{key:"feature",label:"Feature",render:i=>e.jsx(a.Typography,{tag:"span",className:"font-medium",children:String(i)})},{key:"standalone",label:"Standalone App"},{key:"mfe",label:"Micro Frontends (MFE)"}],r=[{feature:"Route Configuration",standalone:"menuItems (automatic generation)",mfe:"appRoutesConfig (explicit configuration)"},{feature:"Base Path",standalone:"Not required (uses root /)",mfe:"Required (e.g., /my-app)"},{feature:"Route Generation",standalone:"Automatic from menuItems",mfe:"Manual via appRoutesConfig"},{feature:"Nested Routes",standalone:"Supported via dropdownItems",mfe:"Supported via nested routes in config"},{feature:"Custom Routes",standalone:"Optional customRoutes prop",mfe:"Not available"},{feature:"Authentication",standalone:"Basic support via isPublic",mfe:"Advanced support with isPublic per route"},{feature:"Route Disabling",standalone:"Not directly supported",mfe:"Supported via disabled prop"},{feature:"Deployment",standalone:"Single deployment",mfe:"Independent deployments per app"},{feature:"Use Case",standalone:"Traditional SPAs, monolithic apps",mfe:"Distributed architectures, micro frontends"},{feature:"TypeScript Safety",standalone:"Enforced via discriminated unions",mfe:"Enforced via discriminated unions"}];return e.jsx("div",{className:"space-y-8",children:e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Architectural Patterns: Standalone vs MFE",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-indigo-500 to-purple-500 shadow-lg",children:e.jsx(s.GitCompare,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Pattern Comparison & Selection Guide"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["Understanding the differences between Standalone and MFE patterns helps you choose the right architecture for your project. Both patterns use the same"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"ThemeProvider"})," ","component, but with different configuration approaches and use cases."]}),e.jsx(a.Alert,{variant:"info",dismissible:!1,children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Lightbulb,{className:"w-4 h-4"}),e.jsx(a.Typography,{tag:"span",className:"font-semibold",children:"TypeScript Safety"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:["Both patterns use TypeScript discriminated unions to enforce the correct props. The"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"architecturalPatterns"})," ","prop determines which props are available, preventing configuration errors at compile time."]})]})}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-lg",children:"Feature Comparison"}),e.jsx(a.BasicTable,{columns:t,data:r})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(s.Package,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Standalone App Pattern"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"When to Use:"}),e.jsxs("ul",{className:"space-y-2 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Traditional single-page applications"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"All routes in one codebase"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Simple deployment model"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Want automatic route generation"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"No need for route isolation"})]})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"Key Advantages:"}),e.jsxs("ul",{className:"space-y-1 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Simple configuration with menuItems"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Automatic route generation"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Nested routes via dropdownItems"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Optional customRoutes override"})]})]})]})]}),e.jsx("div",{className:"mt-4 p-3 bg-light-dark rounded-lg",children:e.jsx(a.CodeBlock,{language:"tsx",code:`// Use Standalone App Pattern when:
-// ✅ Building a traditional single-page application
-// ✅ All routes are in one codebase
-// ✅ You want automatic route generation
-// ✅ Simple deployment model
-// ✅ No need for route isolation
-
-function MyStandaloneApp() {
-  return (
-    <ThemeProvider
-      menuItems={menuItems}  // Simple configuration
-      logo={{ name: 'My', secondName: 'App' }}
-    />
-  );
-}`})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-purple-500 to-indigo-500 shadow-lg",children:e.jsx(s.Box,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Micro Frontends (MFE) Pattern"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"When to Use:"}),e.jsxs("ul",{className:"space-y-2 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Micro frontend architecture"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Multiple teams working independently"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Need independent deployments"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Require route isolation"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Need explicit route control"})]})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"Key Advantages:"}),e.jsxs("ul",{className:"space-y-1 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Explicit route configuration"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Route isolation with basePath"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Advanced authentication support"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Route disabling capability"})]})]})]})]}),e.jsx("div",{className:"mt-4 p-3 bg-light-dark rounded-lg",children:e.jsx(a.CodeBlock,{language:"tsx",code:`// Use MFE Pattern when:
-// ✅ Building micro frontend architecture
-// ✅ Multiple teams working independently
-// ✅ Need independent deployments
-// ✅ Require route isolation
-// ✅ Need explicit route control
-
-function MyMfeApp() {
-  return (
-    <ThemeProvider
-      architecturalPatterns="mfe"
-      basePath="/my-app"  // Required for MFE
-      appRoutesConfig={appRoutesConfig}  // Explicit routes
-      logo={{ name: 'My', secondName: 'App' }}
-    />
-  );
-}`})})]})]}),e.jsx(a.CardContainer,{className:"p-4",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(s.Lightbulb,{className:"w-5 h-5 text-yellow-500 shrink-0 mt-0.5"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"p",className:"text-sm font-semibold mb-2",children:"Decision Guide"}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:["Choose ",e.jsx("strong",{children:"Standalone App Pattern"})," if you're building a traditional SPA with all routes in one codebase. Choose ",e.jsx("strong",{children:"MFE Pattern"})," if you need independent deployments, route isolation, or are building a micro frontend architecture."]}),e.jsxs("div",{className:"space-y-2 text-sm",children:[e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(s.ArrowRight,{className:"w-4 h-4 text-blue-500 shrink-0 mt-0.5"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Start with Standalone"})," if you're unsure - it's simpler and can be migrated to MFE later if needed."]})]}),e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(s.ArrowRight,{className:"w-4 h-4 text-purple-500 shrink-0 mt-0.5"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Use MFE"})," from the start if you know you'll need independent deployments or route isolation."]})]})]})]})]})})]})]})})})})};exports.default=n;

package/documentation/ArchitectureOverviewSection-DGvqMSQ0.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-VrMogvDN.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(r.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Architecture Overview"}),e.jsx(r.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Built on React Hook Form for performance and developer experience"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6",children:[{icon:e.jsx(i.Box,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Form Container",description:"Main wrapper with built-in state management and submission handling",color:"from-blue-500 via-indigo-500 to-purple-500"},{icon:e.jsx(i.Layers,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"FormField Wrapper",description:"Connects inputs to validation with automatic error handling",color:"from-green-500 via-emerald-500 to-teal-500"},{icon:e.jsx(i.CheckCircle,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Validation System",description:"Built-in and custom validation rules with TypeScript support",color:"from-orange-500 via-red-500 to-pink-500"},{icon:e.jsx(i.Zap,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Performance",description:"Minimal re-renders with optimized form state management",color:"from-purple-500 via-violet-500 to-indigo-500"}].map((t,a)=>e.jsx(r.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,children:t.icon}),e.jsx(r.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:t.title})]}),e.jsx(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed text-sm",children:t.description})]})},a))})]});exports.default=o;

package/documentation/ArchitectureOverviewSection-eB86uJbU.js

@@ -1,88 +0,0 @@
-import { jsxs as r, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { T as i, C as l } from "../index-D3gBsvbO.js";
-import { Box as s, Layers as n, CheckCircle as d, Zap as c } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const w = () => /* @__PURE__ */ r(o, { children: [
-  /* @__PURE__ */ r("div", { className: "text-center", children: [
-    /* @__PURE__ */ e(
-      i,
-      {
-        tag: "h2",
-        className: "mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",
-        children: "Architecture Overview"
-      }
-    ),
-    /* @__PURE__ */ e(
-      i,
-      {
-        tag: "p",
-        className: "text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",
-        children: "Built on React Hook Form for performance and developer experience"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", children: [
-    {
-      icon: /* @__PURE__ */ e(s, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      title: "Form Container",
-      description: "Main wrapper with built-in state management and submission handling",
-      color: "from-blue-500 via-indigo-500 to-purple-500"
-    },
-    {
-      icon: /* @__PURE__ */ e(n, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      title: "FormField Wrapper",
-      description: "Connects inputs to validation with automatic error handling",
-      color: "from-green-500 via-emerald-500 to-teal-500"
-    },
-    {
-      icon: /* @__PURE__ */ e(d, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      title: "Validation System",
-      description: "Built-in and custom validation rules with TypeScript support",
-      color: "from-orange-500 via-red-500 to-pink-500"
-    },
-    {
-      icon: /* @__PURE__ */ e(c, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      title: "Performance",
-      description: "Minimal re-renders with optimized form state management",
-      color: "from-purple-500 via-violet-500 to-indigo-500"
-    }
-  ].map((t, a) => /* @__PURE__ */ e(
-    l,
-    {
-      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
-      children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: `p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,
-              children: t.icon
-            }
-          ),
-          /* @__PURE__ */ e(
-            i,
-            {
-              tag: "h3",
-              className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
-              children: t.title
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          i,
-          {
-            tag: "p",
-            className: "text-gray-600 dark:text-gray-400 leading-relaxed text-sm",
-            children: t.description
-          }
-        )
-      ] })
-    },
-    a
-  )) })
-] });
-export {
-  w as default
-};

package/documentation/AreaChartSection-BdHkWEIb.js

@@ -1,22 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=[{name:"Jan",users:400,sessions:2400,pageViews:4400},{name:"Feb",users:300,sessions:1398,pageViews:3210},{name:"Mar",users:500,sessions:3800,pageViews:5400},{name:"Apr",users:780,sessions:3908,pageViews:6200},{name:"May",users:890,sessions:4800,pageViews:7100},{name:"Jun",users:1200,sessions:5800,pageViews:9400},{name:"Jul",users:1500,sessions:6300,pageViews:11e3}],t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"AreaChart"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Area chart component for visualizing volume and trends over time with gradient fills, stacking, and smooth curves."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Basic Area Chart with Gradient",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],height:300,gradient:!0})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Stacked Area Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users",stackId:"a"},{dataKey:"sessions",name:"Sessions",stackId:"a"},{dataKey:"pageViews",name:"Page Views",stackId:"a"}],stacked:!0,height:300})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Without Gradient (Flat)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],gradient:!1,curved:!1,height:300})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{code:`import { AreaChart } from '@e-burgos/tucu-ui';
-
-const data = [
-  { name: 'Jan', users: 400, sessions: 2400 },
-  { name: 'Feb', users: 300, sessions: 1398 },
-  { name: 'Mar', users: 500, sessions: 3800 },
-];
-
-<AreaChart
-  data={data}
-  series={[
-    { dataKey: 'users', name: 'Users' },
-    { dataKey: 'sessions', name: 'Sessions' },
-  ]}
-  height={300}
-  curved
-  gradient
-  stacked={false}
-  showGrid
-  showTooltip
-  showLegend
-/>`,language:"tsx"})})})}),e.jsx(s.PropPlayground,{componentName:"AreaChart",defaultValues:{height:300,curved:!0,gradient:!0,stacked:!1,showGrid:!0,showTooltip:!0,showLegend:!0,animate:!0},excludeProps:["data","series","colors","className","xAxisKey","emptyMessage"],children:r=>e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],...r})}),e.jsx(s.AutoPropsTable,{componentName:"AreaChart"})]});exports.default=t;

package/documentation/AuthorCardSection-Bt0zkOUD.js

@@ -1,17 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=require("../1-CArqgiQa.js"),o=()=>a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"AuthorCard"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A card component for displaying author information with avatar, name, and role."})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Name and Role"}),a.jsx(e.AuthorCard,{image:r.avatar1Img,name:"John Doe",authorRole:"Senior Developer"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Name Only"}),a.jsx(e.AuthorCard,{image:r.avatar1Img,name:"Jane Smith"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Avatar Only"}),a.jsx(e.AuthorCard,{image:r.avatar1Img})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"AuthorCard",defaultValues:{name:"John Doe",authorRole:"Developer",image:"https://randomuser.me/api/portraits/men/1.jpg"},excludeProps:[],children:t=>a.jsx(e.AuthorCard,{...t})}),a.jsx(e.AutoPropsTable,{componentName:"AuthorCard"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { AuthorCard } from '@e-burgos/tucu-ui';
-
-// With name and role
-<AuthorCard
-  image="/path/to/avatar.jpg"
-  name="John Doe"
-  authorRole="Senior Developer"
-/>
-
-// With name only
-<AuthorCard
-  image="/path/to/avatar.jpg"
-  name="Jane Smith"
-/>
-
-// Avatar only
-<AuthorCard image="/path/to/avatar.jpg" />`})})})})]});exports.default=o;

package/documentation/AuthorCardSection-C9h7A21b.js

@@ -1,81 +0,0 @@
-import { jsxs as e, Fragment as n, jsx as a } from "react/jsx-runtime";
-import { T as r, C as t, a as m, D as o, P as s, A as d, c as h } from "../index-D3gBsvbO.js";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-import { a as l } from "../1-Df9CGZha.js";
-const C = () => /* @__PURE__ */ e(n, { children: [
-  /* @__PURE__ */ e("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ a(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "AuthorCard" }),
-    /* @__PURE__ */ a(
-      r,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "A card component for displaying author information with avatar, name, and role."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(m, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ e(t, { className: "p-4", children: [
-      /* @__PURE__ */ a(r, { tag: "h5", className: "mb-3", children: "With Name and Role" }),
-      /* @__PURE__ */ a(
-        o,
-        {
-          image: l,
-          name: "John Doe",
-          authorRole: "Senior Developer"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(t, { className: "p-4", children: [
-      /* @__PURE__ */ a(r, { tag: "h5", className: "mb-3", children: "With Name Only" }),
-      /* @__PURE__ */ a(o, { image: l, name: "Jane Smith" })
-    ] }),
-    /* @__PURE__ */ e(t, { className: "p-4", children: [
-      /* @__PURE__ */ a(r, { tag: "h5", className: "mb-3", children: "Avatar Only" }),
-      /* @__PURE__ */ a(o, { image: l })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(
-    s,
-    {
-      componentName: "AuthorCard",
-      defaultValues: {
-        name: "John Doe",
-        authorRole: "Developer",
-        image: "https://randomuser.me/api/portraits/men/1.jpg"
-      },
-      excludeProps: [],
-      children: (i) => /* @__PURE__ */ a(o, { ...i })
-    }
-  ),
-  /* @__PURE__ */ a(d, { componentName: "AuthorCard" }),
-  /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(m, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
-    h,
-    {
-      language: "tsx",
-      code: `import { AuthorCard } from '@e-burgos/tucu-ui';
-
-// With name and role
-<AuthorCard
-  image="/path/to/avatar.jpg"
-  name="John Doe"
-  authorRole="Senior Developer"
-/>
-
-// With name only
-<AuthorCard
-  image="/path/to/avatar.jpg"
-  name="Jane Smith"
-/>
-
-// Avatar only
-<AuthorCard image="/path/to/avatar.jpg" />`
-    }
-  ) }) }) })
-] });
-export {
-  C as default
-};

package/documentation/AvatarSection-CrG4z7NV.js

@@ -1,18 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=require("../1-CArqgiQa.js"),t=()=>a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Avatar"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A versatile avatar component for displaying user profile images with multiple sizes and shapes."})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Default Avatar"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar",border:!1})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XS",size:"xs"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"SM",size:"sm"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"MD",size:"md"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"LG",size:"lg"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XL",size:"xl"})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Shapes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Circle",shape:"circle"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Rounded",shape:"rounded"})]})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"Avatar",defaultValues:{size:"md",shape:"circle",border:!0,image:"https://randomuser.me/api/portraits/men/1.jpg",alt:"Avatar"},children:r=>a.jsx(e.Avatar,{...r})}),a.jsx(e.AutoPropsTable,{componentName:"Avatar"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Avatar } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<Avatar image="/path/to/image.jpg" alt="User name" />
-
-// Different sizes
-<Avatar image={image} alt="User" size="xs" />
-<Avatar image={image} alt="User" size="sm" />
-<Avatar image={image} alt="User" size="md" />
-<Avatar image={image} alt="User" size="lg" />
-<Avatar image={image} alt="User" size="xl" />
-
-// Different shapes
-<Avatar image={image} alt="User" shape="circle" />
-<Avatar image={image} alt="User" shape="rounded" />
-
-// Without border
-<Avatar image={image} alt="User" border={false} />`})})})})]});exports.default=t;