@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/LogoSection-BwE_ImN2.mjs

@@ -0,0 +1,319 @@
+import { jsxs as a, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { T as s, C as o, a as i, a1 as t, B as d, c as m } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = () => /* @__PURE__ */ a(r, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(s, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Logo" }),
+    /* @__PURE__ */ e(
+      s,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A flexible logo component that automatically adapts to light/dark mode and supports various sizes and configurations."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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: "space-y-4", children: [
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Default Logo (uses defaults)" }),
+      /* @__PURE__ */ e(t, {})
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Custom Names" }),
+      /* @__PURE__ */ e(t, { name: "Custom", secondName: "App" })
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-4 flex-wrap", children: [
+        /* @__PURE__ */ e(t, { name: "TUCU", size: "small" }),
+        /* @__PURE__ */ e(t, { name: "TUCU", size: "medium" }),
+        /* @__PURE__ */ e(t, { name: "TUCU", size: "large" }),
+        /* @__PURE__ */ e(t, { name: "TUCU", size: "xlarge" })
+      ] })
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Custom Link Path" }),
+      /* @__PURE__ */ e(t, { name: "TUCU", path: "/home" })
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Isotype Mode (First Letters Only)" }),
+      /* @__PURE__ */ e(t, { name: "TUCU", secondName: "UI", isoType: !0 })
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Custom Classes" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          name: "TUCU",
+          className: "opacity-80 hover:opacity-100 transition-opacity"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Custom Logo Component" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          name: "MY",
+          secondName: "APP",
+          logo: /* @__PURE__ */ e("div", { className: "w-16 h-16 bg-linear-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-lg", children: "M" })
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Advanced Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Custom Logo with SVG Icon" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          name: "COMPANY",
+          secondName: "LLC",
+          logo: /* @__PURE__ */ a(
+            "svg",
+            {
+              width: "64",
+              height: "64",
+              viewBox: "0 0 64 64",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "rounded-lg",
+              children: [
+                /* @__PURE__ */ e(
+                  "rect",
+                  {
+                    width: "64",
+                    height: "64",
+                    rx: "12",
+                    fill: "url(#gradient)"
+                  }
+                ),
+                /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ a(
+                  "linearGradient",
+                  {
+                    id: "gradient",
+                    x1: "0",
+                    y1: "0",
+                    x2: "64",
+                    y2: "64",
+                    children: [
+                      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#3B82F6" }),
+                      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#8B5CF6" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ e("path", { d: "M32 20L40 28L32 36L24 28L32 20Z", fill: "white" }),
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: "M20 32L28 40L36 32L28 24L20 32Z",
+                    fill: "white",
+                    opacity: "0.8"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Custom Logo with Image" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          name: "COMPANY",
+          secondName: "",
+          logo: /* @__PURE__ */ e("div", { className: "w-16 h-16 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20", children: "C" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Only Primary Name" }),
+      /* @__PURE__ */ e(t, { name: "MYAPP", secondName: "" })
+    ] }),
+    /* @__PURE__ */ a(o, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Only Secondary Name" }),
+      /* @__PURE__ */ e(t, { name: "", secondName: "BRAND" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (l) => {
+        const n = String(l);
+        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: "name",
+      type: "string",
+      default: "-",
+      description: 'Primary logo text. Defaults to "TUCU" if not provided'
+    },
+    {
+      prop: "secondName",
+      type: "string",
+      default: "-",
+      description: 'Secondary logo text. Defaults to "UI" if not provided'
+    },
+    {
+      prop: "path",
+      type: "string",
+      default: "'/'",
+      description: "Link path for the logo anchor link"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Additional CSS classes for the logo container"
+    },
+    {
+      prop: "size",
+      type: "'small' | 'medium' | 'large' | 'xlarge'",
+      default: "'medium'",
+      description: "Size of the logo. Affects both icon and text sizes"
+    },
+    {
+      prop: "logo",
+      type: "React.ReactNode | null",
+      default: "null",
+      description: "Custom logo component to replace the default TucuUiLogo"
+    },
+    {
+      prop: "isoType",
+      type: "boolean",
+      default: "false",
+      description: "Show only the first letter of each name (isotype mode)"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    m,
+    {
+      language: "tsx",
+      code: `import { Logo } from '@e-burgos/tucu-ui';
+
+// Default usage (uses "TUCU" and "UI" as defaults)
+<Logo />
+
+// Custom names
+<Logo name="Custom" secondName="App" />
+
+// Different sizes
+<Logo name="TUCU" size="small" />
+<Logo name="TUCU" size="medium" />
+<Logo name="TUCU" size="large" />
+<Logo name="TUCU" size="xlarge" />
+
+// With custom link path
+<Logo name="TUCU" path="/home" />
+
+// Isotype mode (shows only first letters)
+<Logo name="TUCU" secondName="UI" isoType />
+
+// With custom CSS classes
+<Logo 
+  name="TUCU" 
+  className="opacity-80 hover:opacity-100 transition-opacity" 
+/>
+
+// With custom logo component (ReactNode)
+<Logo
+  name="MY"
+  secondName="APP"
+  logo={
+    <div className="w-16 h-16 bg-linear-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-lg">
+      M
+    </div>
+  }
+/>
+
+// With custom SVG logo
+<Logo
+  name="COMPANY"
+  secondName="LLC"
+  logo={
+    <svg
+      width="64"
+      height="64"
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="rounded-lg"
+    >
+      <rect
+        width="64"
+        height="64"
+        rx="12"
+        fill="url(#gradient)"
+      />
+      <defs>
+        <linearGradient
+          id="gradient"
+          x1="0"
+          y1="0"
+          x2="64"
+          y2="64"
+        >
+          <stop offset="0%" stopColor="#3B82F6" />
+          <stop offset="100%" stopColor="#8B5CF6" />
+        </linearGradient>
+      </defs>
+      <path d="M32 20L40 28L32 36L24 28L32 20Z" fill="white" />
+      <path
+        d="M20 32L28 40L36 32L28 24L20 32Z"
+        fill="white"
+        opacity="0.8"
+      />
+    </svg>
+  }
+/>
+
+// Custom logo with image/div component
+<Logo
+  name="COMPANY"
+  secondName=""
+  logo={
+    <div className="w-16 h-16 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20">
+      C
+    </div>
+  }
+/>
+
+// Only primary name (empty secondName)
+<Logo name="MYAPP" secondName="" />
+
+// Only secondary name (empty name)
+<Logo name="" secondName="BRAND" />
+
+// The component automatically:
+// - Adapts to light/dark mode
+// - Shows TucuUiLogo icon when no custom logo is provided
+// - Defaults to "TUCU" and "UI" if names are undefined
+// - Handles empty strings for name or secondName`
+    }
+  ) }) }) })
+] });
+export {
+  y as default
+};

package/LucideIconsSection-BQH5Dipy.mjs

@@ -0,0 +1,128 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { T as t, C as p, a as h } from "./index-Hq6IUBmn.mjs";
+import { Home as w, Menu as g, ArrowLeft as x, ArrowRight as N, ChevronUp as u, ChevronDown as v, Grid3X3 as f, List as y, Navigation as C, Plus as b, Minus as L, X as k, Check as I, Edit as T, Trash2 as A, Download as D, Upload as M, Zap as R } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const j = () => {
+  const [r, c] = d(null), l = [
+    {
+      category: "Navigation & Layout",
+      description: "Essential navigation and layout icons from Lucide",
+      icon: /* @__PURE__ */ e(C, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-blue-500 via-indigo-500 to-purple-500",
+      icons: [
+        { name: "Home", component: /* @__PURE__ */ e(w, { className: "w-6 h-6" }) },
+        { name: "Menu", component: /* @__PURE__ */ e(g, { className: "w-6 h-6" }) },
+        {
+          name: "ArrowLeft",
+          component: /* @__PURE__ */ e(x, { className: "w-6 h-6" })
+        },
+        {
+          name: "ArrowRight",
+          component: /* @__PURE__ */ e(N, { className: "w-6 h-6" })
+        },
+        {
+          name: "ChevronUp",
+          component: /* @__PURE__ */ e(u, { className: "w-6 h-6" })
+        },
+        {
+          name: "ChevronDown",
+          component: /* @__PURE__ */ e(v, { className: "w-6 h-6" })
+        },
+        {
+          name: "Grid",
+          component: /* @__PURE__ */ e(f, { className: "w-6 h-6" })
+        },
+        { name: "List", component: /* @__PURE__ */ e(y, { className: "w-6 h-6" }) }
+      ]
+    },
+    {
+      category: "Actions & Controls",
+      description: "Common action and control icons from Lucide",
+      icon: /* @__PURE__ */ e(R, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-purple-500 via-pink-500 to-rose-500",
+      icons: [
+        { name: "Plus", component: /* @__PURE__ */ e(b, { className: "w-6 h-6" }) },
+        { name: "Minus", component: /* @__PURE__ */ e(L, { className: "w-6 h-6" }) },
+        { name: "X", component: /* @__PURE__ */ e(k, { className: "w-6 h-6" }) },
+        { name: "Check", component: /* @__PURE__ */ e(I, { className: "w-6 h-6" }) },
+        { name: "Edit", component: /* @__PURE__ */ e(T, { className: "w-6 h-6" }) },
+        {
+          name: "Trash2",
+          component: /* @__PURE__ */ e(A, { className: "w-6 h-6" })
+        },
+        {
+          name: "Download",
+          component: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+        },
+        {
+          name: "Upload",
+          component: /* @__PURE__ */ e(M, { className: "w-6 h-6" })
+        }
+      ]
+    }
+  ], i = (a) => {
+    const s = `<LucideIcons.${a} className="w-6 h-6" />`;
+    navigator.clipboard.writeText(s), c(a), setTimeout(() => c(null), 2e3);
+  };
+  return /* @__PURE__ */ o("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ o("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Lucide React Icons" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Popular icons from the Lucide React library (5000+ available)"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "space-y-8", children: l.map((a, s) => /* @__PURE__ */ e(p, { className: "overflow-hidden", children: /* @__PURE__ */ e(h, { title: a.category, className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: `p-2 rounded-lg bg-linear-to-br ${a.color} shadow-lg`,
+            children: a.icon
+          }
+        ),
+        /* @__PURE__ */ o("div", { children: [
+          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: a.category }),
+          /* @__PURE__ */ e(
+            t,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400",
+              children: a.description
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4", children: a.icons.map((n, m) => /* @__PURE__ */ o(
+        "div",
+        {
+          className: "flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer group relative",
+          onClick: () => i(n.name),
+          title: `Click to copy: LucideIcons.${n.name}`,
+          children: [
+            /* @__PURE__ */ e("div", { className: "text-gray-700 dark:text-gray-300 group-hover:text-brand transition-colors", children: n.component }),
+            /* @__PURE__ */ e(
+              t,
+              {
+                tag: "span",
+                className: "text-xs text-center text-gray-500 dark:text-gray-400",
+                children: n.name
+              }
+            ),
+            r === n.name && /* @__PURE__ */ e("div", { className: "absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-green-500 text-white text-xs rounded whitespace-nowrap z-10", children: "Copied!" })
+          ]
+        },
+        m
+      )) })
+    ] }) }) }, s)) })
+  ] });
+};
+export {
+  j as default
+};

package/LucideIconsSection-DYNzZsEN.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),o=require("./index-CjRk4ezu.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[r,c]=d.useState(null),i=[{category:"Navigation & Layout",description:"Essential navigation and layout icons from Lucide",icon:e.jsx(s.Navigation,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),color:"from-blue-500 via-indigo-500 to-purple-500",icons:[{name:"Home",component:e.jsx(s.Home,{className:"w-6 h-6"})},{name:"Menu",component:e.jsx(s.Menu,{className:"w-6 h-6"})},{name:"ArrowLeft",component:e.jsx(s.ArrowLeft,{className:"w-6 h-6"})},{name:"ArrowRight",component:e.jsx(s.ArrowRight,{className:"w-6 h-6"})},{name:"ChevronUp",component:e.jsx(s.ChevronUp,{className:"w-6 h-6"})},{name:"ChevronDown",component:e.jsx(s.ChevronDown,{className:"w-6 h-6"})},{name:"Grid",component:e.jsx(s.Grid3X3,{className:"w-6 h-6"})},{name:"List",component:e.jsx(s.List,{className:"w-6 h-6"})}]},{category:"Actions & Controls",description:"Common action and control icons from Lucide",icon:e.jsx(s.Zap,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),color:"from-purple-500 via-pink-500 to-rose-500",icons:[{name:"Plus",component:e.jsx(s.Plus,{className:"w-6 h-6"})},{name:"Minus",component:e.jsx(s.Minus,{className:"w-6 h-6"})},{name:"X",component:e.jsx(s.X,{className:"w-6 h-6"})},{name:"Check",component:e.jsx(s.Check,{className:"w-6 h-6"})},{name:"Edit",component:e.jsx(s.Edit,{className:"w-6 h-6"})},{name:"Trash2",component:e.jsx(s.Trash2,{className:"w-6 h-6"})},{name:"Download",component:e.jsx(s.Download,{className:"w-6 h-6"})},{name:"Upload",component:e.jsx(s.Upload,{className:"w-6 h-6"})}]}],l=a=>{const t=`<LucideIcons.${a} className="w-6 h-6" />`;navigator.clipboard.writeText(t),c(a),setTimeout(()=>c(null),2e3)};return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(o.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Lucide React Icons"}),e.jsx(o.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Popular icons from the Lucide React library (5000+ available)"})]}),e.jsx("div",{className:"space-y-8",children:i.map((a,t)=>e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:a.category,className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:`p-2 rounded-lg bg-linear-to-br ${a.color} shadow-lg`,children:a.icon}),e.jsxs("div",{children:[e.jsx(o.Typography,{tag:"h3",className:"text-xl font-semibold",children:a.category}),e.jsx(o.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:a.description})]})]}),e.jsx("div",{className:"grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4",children:a.icons.map((n,m)=>e.jsxs("div",{className:"flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer group relative",onClick:()=>l(n.name),title:`Click to copy: LucideIcons.${n.name}`,children:[e.jsx("div",{className:"text-gray-700 dark:text-gray-300 group-hover:text-brand transition-colors",children:n.component}),e.jsx(o.Typography,{tag:"span",className:"text-xs text-center text-gray-500 dark:text-gray-400",children:n.name}),r===n.name&&e.jsx("div",{className:"absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-green-500 text-white text-xs rounded whitespace-nowrap z-10",children:"Copied!"})]},m))})]})})},t))})]})};exports.default=p;

package/MFESupportSection-C1rBEqCL.js

@@ -0,0 +1,122 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-CjRk4ezu.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"Micro Frontends (MFE) Support",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-purple-500 to-indigo-500 shadow-lg",children:e.jsx(a.Box,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"Micro Frontend (MFE) Pattern"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["The ",e.jsx("strong",{children:"Micro Frontend (MFE) Pattern"})," is designed for distributed architectures where multiple applications need to be deployed independently. It requires explicit route configuration with"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"appRoutesConfig"})," ","and a"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"basePath"}),". Perfect for micro frontend architectures that need route isolation, authentication boundaries, and independent deployments."]}),e.jsx(r.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(a.Info,{className:"w-4 h-4"}),e.jsx(r.Typography,{tag:"span",className:"font-semibold",children:"MFE Mode Requirements"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm",children:["When using"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:'architecturalPatterns="mfe"'}),", you must provide"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"basePath"})," ","and"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"appRoutesConfig"}),". TypeScript will enforce these requirements at compile time."]})]})}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",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(a.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"Conditional TypeScript Types"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["The ThemeProvider uses discriminated unions to automatically enforce the correct props based on"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"architecturalPatterns"}),'. When set to "mfe", TypeScript requires MFE-specific props.']}),e.jsx(r.CodeBlock,{language:"typescript",code:`// Conditional TypeScript Types
+// The ThemeProvider automatically infers the correct props based on architecturalPatterns
+
+// MFE Pattern
+type MfeThemeProviderProps = MfeAppThemeProviderProps & {
+  architecturalPatterns: 'mfe';
+};
+
+// TypeScript enforces required props for MFE mode
+// basePath and appRoutesConfig are required when architecturalPatterns="mfe"`})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-purple-500 to-indigo-500 shadow-lg",children:e.jsx(a.Settings,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"IAppRouteConfig Interface"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["MFE pattern uses the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"IAppRouteConfig"})," ","interface for explicit route configuration with access control and route management."]}),e.jsx(r.CodeBlock,{language:"typescript",code:`interface IAppRouteConfig extends RouteProps {
+  key: string;           // Unique identifier for the route
+  isPublic?: boolean;    // Whether the route is publicly accessible
+  disabled?: boolean;    // Whether the route is disabled
+  element: JSX.Element;  // The component to render
+}`})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg",children:e.jsx(a.Play,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"Basic MFE Usage"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Set"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:'architecturalPatterns="mfe"'})," ","to activate MFE mode. TypeScript will require"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"basePath"})," ","and"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"appRoutesConfig"}),"."]}),e.jsx(r.CodeBlock,{language:"tsx",code:`import { ThemeProvider } from '@e-burgos/tucu-ui';
+import '@e-burgos/tucu-ui/styles';
+
+const appRoutesConfig: IAppRouteConfig[] = [
+  {
+    key: 'home',
+    path: '/',
+    element: <HomePage />,
+    isPublic: true, // Public route, no authentication required
+  },
+  {
+    key: 'dashboard',
+    path: '/dashboard',
+    element: <DashboardPage />,
+    isPublic: false, // Private route, requires authentication
+  },
+  {
+    key: 'profile',
+    path: '/profile',
+    element: <ProfilePage />,
+    isPublic: false,
+  },
+];
+
+function MfeApp() {
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"  // Activates MFE mode
+      basePath="/my-app"           // Base path for the micro frontend
+      appRoutesConfig={appRoutesConfig}  // Required for MFE
+      logo={{ name: 'My', secondName: 'App' }}
+      showSettings
+    />
+  );
+}`})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-orange-500 to-amber-500 shadow-lg",children:e.jsx(a.Zap,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"Advanced: Public/Private Routes"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["MFE pattern automatically handles authentication for private routes. Use"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"isPublic"})," ","to control access and"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"disabled"})," ","to temporarily disable routes."]}),e.jsx(r.CodeBlock,{language:"tsx",code:`import { ThemeProvider } from '@e-burgos/tucu-ui';
+import '@e-burgos/tucu-ui/styles';
+
+const appRoutesConfig: IAppRouteConfig[] = [
+  // Public routes (accessible without authentication)
+  {
+    key: 'login',
+    path: '/login',
+    element: <LoginPage />,
+    isPublic: true,
+  },
+  {
+    key: 'register',
+    path: '/register',
+    element: <RegisterPage />,
+    isPublic: true,
+  },
+  
+  // Private routes (require authentication)
+  {
+    key: 'dashboard',
+    path: '/dashboard',
+    element: <DashboardPage />,
+    isPublic: false,
+  },
+  {
+    key: 'settings',
+    path: '/settings',
+    element: <SettingsPage />,
+    isPublic: false,
+  },
+  
+  // Disabled routes (temporarily unavailable)
+  {
+    key: 'beta-feature',
+    path: '/beta',
+    element: <BetaFeaturePage />,
+    disabled: true,
+  },
+];
+
+function MfeApp() {
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"
+      basePath="/mfe-app"
+      appRoutesConfig={appRoutesConfig}
+      logo={{ name: 'MFE', secondName: 'App' }}
+      showSettings
+      // Note: menuItems and customRoutes are NOT allowed in MFE mode
+      // TypeScript will show an error if you try to use them
+    />
+  );
+}`})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-red-500 to-pink-500 shadow-lg",children:e.jsx(a.Shield,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"Type Safety Examples"})]}),e.jsx(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"TypeScript prevents invalid prop combinations at compile time, ensuring type safety and preventing configuration errors."}),e.jsx(r.CodeBlock,{language:"tsx",code:`// ✅ Correct - MFE Pattern with required props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  basePath="/app"
+  appRoutesConfig={[...]}
+/>
+
+// ❌ Error - MFE Pattern without required props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  // TypeScript Error: Property 'basePath' is missing
+  // TypeScript Error: Property 'appRoutesConfig' is missing
+/>
+
+// ❌ Error - Mixing MFE with Standalone App props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  menuItems={[...]}  // Error: Property does not exist on MFE type
+  basePath="/app"
+  appRoutesConfig={[...]}
+/>`})]})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold text-lg",children:"Key Features"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(a.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(r.Typography,{tag:"h5",className:"font-semibold",children:"Explicit Route Configuration"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Full control over route configuration with"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"appRoutesConfig"}),". Each route is explicitly defined."]})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(a.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(r.Typography,{tag:"h5",className:"font-semibold",children:"Route Isolation"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Each micro frontend has its own"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"basePath"}),", ensuring complete route isolation."]})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(a.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(r.Typography,{tag:"h5",className:"font-semibold",children:"Authentication Integration"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Built-in support for public/private routes with"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"isPublic"}),". Automatic authentication handling."]})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(a.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(r.Typography,{tag:"h5",className:"font-semibold",children:"Independent Deployment"})]}),e.jsx(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Perfect for micro frontend architectures where each app can be developed, built, and deployed independently."})]})]})]})]})})})});exports.default=t;