@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/ArchitecturalPatternsComparisonSection-BGoc7LRz.mjs

@@ -0,0 +1,325 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { C as i, a as d, T as t, a4 as m, B as p, c as r } from "./index-Hq6IUBmn.mjs";
+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/ArchitecturalPatternsComparisonSection-bFhTZY--.js

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.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/ArchitectureOverviewSection-0kw6rJQn.mjs

@@ -0,0 +1,88 @@
+import { jsxs as r, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { T as i, C as l } from "./index-Hq6IUBmn.mjs";
+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/ArchitectureOverviewSection-DI3j5QrY.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-CjRk4ezu.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/AuthorCardSection-C9nyTm-Y.js

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=require("./1-CArqgiQa.js"),n=()=>{const l=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>{const s=String(r);return s==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:s})}},{key:"description",label:"Description"}],i=[{prop:"image",type:"string",default:"required",description:"URL or path to the author avatar image"},{prop:"name",type:"string",default:"-",description:"Author name"},{prop:"authorRole",type:"string",default:"-",description:"Author role or title"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"AuthorCard"}),e.jsx(a.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."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Name and Role"}),e.jsx(a.AuthorCard,{image:t.avatar1Img,name:"John Doe",authorRole:"Senior Developer"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Name Only"}),e.jsx(a.AuthorCard,{image:t.avatar1Img,name:"Jane Smith"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Avatar Only"}),e.jsx(a.AuthorCard,{image:t.avatar1Img})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:l,data:i})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.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=n;

package/AuthorCardSection-CdrGEAlv.mjs

@@ -0,0 +1,110 @@
+import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { T as l, C as r, a as o, A as i, B as d, c } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+import { a as s } from "./1-Df9CGZha.mjs";
+const b = () => /* @__PURE__ */ a(m, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "AuthorCard" }),
+    /* @__PURE__ */ e(
+      l,
+      {
+        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__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Name and Role" }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          image: s,
+          name: "John Doe",
+          authorRole: "Senior Developer"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Name Only" }),
+      /* @__PURE__ */ e(i, { image: s, name: "Jane Smith" })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Avatar Only" }),
+      /* @__PURE__ */ e(i, { image: s })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(t) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (t) => {
+        const n = String(t);
+        return n === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: n });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "image",
+      type: "string",
+      default: "required",
+      description: "URL or path to the author avatar image"
+    },
+    {
+      prop: "name",
+      type: "string",
+      default: "-",
+      description: "Author name"
+    },
+    {
+      prop: "authorRole",
+      type: "string",
+      default: "-",
+      description: "Author role or title"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    c,
+    {
+      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 {
+  b as default
+};

package/AvatarSection-DurCy8Tv.js

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=require("./1-CArqgiQa.js"),d=()=>{const i=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const t=String(s);return t==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:t})}},{key:"description",label:"Description"}],l=[{prop:"image",type:"string",default:"required",description:"URL or path to the avatar image"},{prop:"alt",type:"string",default:"required",description:"Alt text for the image"},{prop:"size",type:"'xl' | 'lg' | 'md' | 'sm' | 'xs'",default:"'md'",description:"Size of the avatar"},{prop:"shape",type:"'rounded' | 'circle'",default:"'circle'",description:"Shape of the avatar"},{prop:"border",type:"boolean",default:"true",description:"Whether to show border"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Avatar"}),e.jsx(a.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."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Default Avatar"}),e.jsx(a.Avatar,{image:r.avatar1Img,alt:"User avatar"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),e.jsx(a.Avatar,{image:r.avatar1Img,alt:"User avatar",border:!1})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(a.Avatar,{image:r.avatar1Img,alt:"XS",size:"xs"}),e.jsx(a.Avatar,{image:r.avatar1Img,alt:"SM",size:"sm"}),e.jsx(a.Avatar,{image:r.avatar1Img,alt:"MD",size:"md"}),e.jsx(a.Avatar,{image:r.avatar1Img,alt:"LG",size:"lg"}),e.jsx(a.Avatar,{image:r.avatar1Img,alt:"XL",size:"xl"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Shapes"}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(a.Avatar,{image:r.avatar1Img,alt:"Circle",shape:"circle"}),e.jsx(a.Avatar,{image:r.avatar1Img,alt:"Rounded",shape:"rounded"})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:i,data:l})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.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=d;