@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/LucideIconsSection-C8zgDfWJ.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-DWDUS-PU.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const h=()=>{const[r,t]=d.useState(null),l=[{category:"Navigation & Layout",description:"Essential navigation and layout icons",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:"Grid3X3",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 interactive control icons",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"})}]},{category:"Status & Feedback",description:"Icons for status indicators and user feedback",icon:e.jsx(s.Bell,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),color:"from-green-500 via-emerald-500 to-teal-500",icons:[{name:"CheckCircle",component:e.jsx(s.CheckCircle,{className:"w-6 h-6"})},{name:"AlertCircle",component:e.jsx(s.AlertCircle,{className:"w-6 h-6"})},{name:"AlertTriangle",component:e.jsx(s.AlertTriangle,{className:"w-6 h-6"})},{name:"Info",component:e.jsx(s.Info,{className:"w-6 h-6"})},{name:"Loader2",component:e.jsx(s.Loader2,{className:"w-6 h-6"})},{name:"Clock",component:e.jsx(s.Clock,{className:"w-6 h-6"})},{name:"Eye",component:e.jsx(s.Eye,{className:"w-6 h-6"})},{name:"EyeOff",component:e.jsx(s.EyeOff,{className:"w-6 h-6"})}]}],i=a=>{const c=`<LucideIcons.${a} className="w-6 h-6" />`;navigator.clipboard.writeText(c),t(a),setTimeout(()=>t(null),2e3)};return e.jsxs(e.Fragment,{children:[e.jsx(o.HeroCard,{title:"Lucide React Icons",description:"Access to 1500+ high-quality open-source icons through the LucideIcons namespace. Stroke-based, consistent, and fully compatible with Tailwind CSS.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-cyan-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Sparkles,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(o.Typography,{tag:"h2",className:"mb-2",children:"Popular Icons"}),e.jsx(o.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"A sample of commonly used Lucide icons — click to copy usage code"})]}),e.jsx("div",{className:"space-y-6",children:l.map((a,c)=>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-base 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-100 dark:hover:bg-gray-800 transition-colors cursor-pointer group relative",onClick:()=>i(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))})]})})},c))})]})]})};exports.default=h;

package/documentation/LucideIconsSection-kEaPLh0V.js

@@ -0,0 +1,169 @@
+import { jsxs as o, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { H as p, T as s, C as w, a as g } from "../index-DoxeCFUJ.js";
+import { Sparkles as N, Home as u, Menu as f, ArrowLeft as x, ArrowRight as y, ChevronUp as v, ChevronDown as C, Grid3X3 as b, List as k, Navigation as I, Plus as L, Minus as A, X as T, Check as S, Edit as E, Trash2 as D, Download as H, Upload as M, Zap as U, CheckCircle as X, AlertCircle as j, AlertTriangle as P, Info as R, Loader2 as $, Clock as F, Eye as G, EyeOff as O, Bell as q } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const V = () => {
+  const [r, c] = h(null), l = [
+    {
+      category: "Navigation & Layout",
+      description: "Essential navigation and layout icons",
+      icon: /* @__PURE__ */ e(I, { 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(u, { className: "w-6 h-6" }) },
+        { name: "Menu", component: /* @__PURE__ */ e(f, { className: "w-6 h-6" }) },
+        {
+          name: "ArrowLeft",
+          component: /* @__PURE__ */ e(x, { className: "w-6 h-6" })
+        },
+        {
+          name: "ArrowRight",
+          component: /* @__PURE__ */ e(y, { className: "w-6 h-6" })
+        },
+        {
+          name: "ChevronUp",
+          component: /* @__PURE__ */ e(v, { className: "w-6 h-6" })
+        },
+        {
+          name: "ChevronDown",
+          component: /* @__PURE__ */ e(C, { className: "w-6 h-6" })
+        },
+        {
+          name: "Grid3X3",
+          component: /* @__PURE__ */ e(b, { className: "w-6 h-6" })
+        },
+        { name: "List", component: /* @__PURE__ */ e(k, { className: "w-6 h-6" }) }
+      ]
+    },
+    {
+      category: "Actions & Controls",
+      description: "Common action and interactive control icons",
+      icon: /* @__PURE__ */ e(U, { 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(L, { className: "w-6 h-6" }) },
+        { name: "Minus", component: /* @__PURE__ */ e(A, { className: "w-6 h-6" }) },
+        { name: "X", component: /* @__PURE__ */ e(T, { className: "w-6 h-6" }) },
+        { name: "Check", component: /* @__PURE__ */ e(S, { className: "w-6 h-6" }) },
+        { name: "Edit", component: /* @__PURE__ */ e(E, { className: "w-6 h-6" }) },
+        {
+          name: "Trash2",
+          component: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+        },
+        {
+          name: "Download",
+          component: /* @__PURE__ */ e(H, { className: "w-6 h-6" })
+        },
+        {
+          name: "Upload",
+          component: /* @__PURE__ */ e(M, { className: "w-6 h-6" })
+        }
+      ]
+    },
+    {
+      category: "Status & Feedback",
+      description: "Icons for status indicators and user feedback",
+      icon: /* @__PURE__ */ e(q, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-green-500 via-emerald-500 to-teal-500",
+      icons: [
+        {
+          name: "CheckCircle",
+          component: /* @__PURE__ */ e(X, { className: "w-6 h-6" })
+        },
+        {
+          name: "AlertCircle",
+          component: /* @__PURE__ */ e(j, { className: "w-6 h-6" })
+        },
+        {
+          name: "AlertTriangle",
+          component: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
+        },
+        { name: "Info", component: /* @__PURE__ */ e(R, { className: "w-6 h-6" }) },
+        {
+          name: "Loader2",
+          component: /* @__PURE__ */ e($, { className: "w-6 h-6" })
+        },
+        { name: "Clock", component: /* @__PURE__ */ e(F, { className: "w-6 h-6" }) },
+        { name: "Eye", component: /* @__PURE__ */ e(G, { className: "w-6 h-6" }) },
+        {
+          name: "EyeOff",
+          component: /* @__PURE__ */ e(O, { className: "w-6 h-6" })
+        }
+      ]
+    }
+  ], i = (a) => {
+    const t = `<LucideIcons.${a} className="w-6 h-6" />`;
+    navigator.clipboard.writeText(t), c(a), setTimeout(() => c(null), 2e3);
+  };
+  return /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ e(
+      p,
+      {
+        title: "Lucide React Icons",
+        description: "Access to 1500+ high-quality open-source icons through the LucideIcons namespace. Stroke-based, consistent, and fully compatible with Tailwind CSS.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-cyan-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(N, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ o("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ o("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Popular Icons" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "A sample of commonly used Lucide icons — click to copy usage code"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "space-y-6", children: l.map((a, t) => /* @__PURE__ */ e(w, { className: "overflow-hidden", children: /* @__PURE__ */ e(g, { 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(s, { tag: "h3", className: "text-base font-semibold", children: a.category }),
+            /* @__PURE__ */ e(
+              s,
+              {
+                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-100 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(
+                s,
+                {
+                  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
+        )) })
+      ] }) }) }, t)) })
+    ] })
+  ] });
+};
+export {
+  V as default
+};

package/documentation/MFESupportSection-Bv716SHU.js

@@ -0,0 +1,97 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const r=`import { RouteProps } from 'react-router-dom';
+
+// Extends React Router's RouteProps (provides path, element, index, etc.)
+type IAppRouteConfig = RouteProps & {
+  key: string;           // Unique identifier for the route
+  isPublic?: boolean;    // Whether the route is publicly accessible
+  disabled?: boolean;    // Whether the route is temporarily disabled
+};`,s=`import { ThemeProvider, IAppRouteConfig } from '@e-burgos/tucu-ui';
+import '@e-burgos/tucu-ui/styles';
+
+const appRoutesConfig: IAppRouteConfig[] = [
+  {
+    key: 'home',
+    path: '/',
+    element: <HomePage />,
+    isPublic: true,
+  },
+  {
+    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"
+      basePath="/my-app"
+      appRoutesConfig={appRoutesConfig}
+      isAuthenticated={true}    // Required: authentication state
+      loginUrl="/auth/login"    // Required: redirect URL for unauthenticated users
+      logo={{ name: 'My', secondName: 'App' }}
+      showSettings
+    />
+  );
+}`,o=`import { ThemeProvider, IAppRouteConfig } from '@e-burgos/tucu-ui';
+
+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 /> },
+  { key: 'settings', path: '/settings', element: <SettingsPage /> },
+
+  // Disabled routes (temporarily unavailable)
+  { key: 'beta', path: '/beta', element: <BetaPage />, disabled: true },
+];
+
+function MfeApp() {
+  const { isLoggedIn } = useAuth();
+
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"
+      basePath="/mfe-app"
+      appRoutesConfig={appRoutesConfig}
+      isAuthenticated={isLoggedIn}
+      loginUrl="/mfe-app/login"
+      logo={{ name: 'MFE', secondName: 'App' }}
+      showSettings
+    />
+  );
+}`,n=`// ✅ Correct — MFE with all required props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  basePath="/app"
+  appRoutesConfig={routes}
+  isAuthenticated={isLoggedIn}
+  loginUrl="/login"
+/>
+
+// ❌ Error — Missing required props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  basePath="/app"
+  appRoutesConfig={routes}
+  // TS Error: Property 'isAuthenticated' is missing
+  // TS Error: Property 'loginUrl' is missing
+/>
+
+// ❌ Error — Mixing MFE with Standalone props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  menuItems={[...]}  // Error: not allowed in MFE mode
+  basePath="/app"
+  appRoutesConfig={routes}
+/>`,l=[{icon:e.jsx(a.Settings,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Explicit Route Config",description:"Full control over each route via appRoutesConfig with access control.",iconBgClassName:"from-purple-500 to-indigo-500"},{icon:e.jsx(a.Split,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Route Isolation",description:"Each MFE has its own basePath ensuring complete route isolation.",iconBgClassName:"from-blue-500 to-cyan-500"},{icon:e.jsx(a.Lock,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Auth Integration",description:"Built-in public/private routes with isAuthenticated and loginUrl.",iconBgClassName:"from-red-500 to-rose-500"},{icon:e.jsx(a.Rocket,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Independent Deploy",description:"Each app can be developed, built, and deployed independently.",iconBgClassName:"from-green-500 to-emerald-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Micro Frontends (MFE)",description:"Designed for distributed architectures where multiple applications are deployed independently. Uses explicit route configuration with appRoutesConfig, basePath, and built-in authentication.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-indigo-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Box,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"IAppRouteConfig Interface"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Extends React Router's RouteProps with access control"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Interface Definition",children:e.jsx(t.CodeBlock,{language:"TS",code:r})})}),e.jsx(t.Alert,{variant:"warning",dismissible:!1,children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx(a.AlertTriangle,{className:"w-4 h-4 inline mr-2"}),"MFE mode requires"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"isAuthenticated"})," ","(boolean) and"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"loginUrl"})," ","(string) as mandatory props. TypeScript enforces this at compile time."]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Basic Usage"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Minimal MFE setup with authentication"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"MFE ThemeProvider",children:e.jsx(t.CodeBlock,{language:"tsx",code:s})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Advanced: Public/Private Routes"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Authentication handling with disabled routes"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Advanced Configuration",children:e.jsx(t.CodeBlock,{language:"tsx",code:o})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Type Safety"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"TypeScript enforces correct prop combinations"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Compile-Time Validation",children:e.jsx(t.CodeBlock,{language:"tsx",code:n})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Key Features"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Benefits of the MFE architectural pattern"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6",children:l.map(i=>e.jsx(t.FeatureCard,{layout:"vertical",...i},i.title))})]})]})};exports.default=c;

package/documentation/MFESupportSection-Du1uqyKB.js

@@ -0,0 +1,222 @@
+import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { H as l, T as a, C as i, a as r, c as o, aj as c, ax as d } from "../index-DoxeCFUJ.js";
+import { Box as p, AlertTriangle as m, Settings as u, Split as h, Lock as g, Rocket as f } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const T = () => /* @__PURE__ */ t(n, { children: [
+  /* @__PURE__ */ e(
+    l,
+    {
+      title: "Micro Frontends (MFE)",
+      description: "Designed for distributed architectures where multiple applications are deployed independently. Uses explicit route configuration with appRoutesConfig, basePath, and built-in authentication.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-indigo-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "IAppRouteConfig Interface" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Extends React Router's RouteProps with access control"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "Interface Definition", children: /* @__PURE__ */ e(o, { language: "TS", code: `import { RouteProps } from 'react-router-dom';
+
+// Extends React Router's RouteProps (provides path, element, index, etc.)
+type IAppRouteConfig = RouteProps & {
+  key: string;           // Unique identifier for the route
+  isPublic?: boolean;    // Whether the route is publicly accessible
+  disabled?: boolean;    // Whether the route is temporarily disabled
+};` }) }) }),
+    /* @__PURE__ */ e(c, { variant: "warning", dismissible: !1, children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+      /* @__PURE__ */ e(m, { className: "w-4 h-4 inline mr-2" }),
+      "MFE mode requires",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "isAuthenticated" }),
+      " ",
+      "(boolean) and",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "loginUrl" }),
+      " ",
+      "(string) as mandatory props. TypeScript enforces this at compile time."
+    ] }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Basic Usage" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Minimal MFE setup with authentication"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "MFE ThemeProvider", children: /* @__PURE__ */ e(o, { language: "tsx", code: `import { ThemeProvider, IAppRouteConfig } from '@e-burgos/tucu-ui';
+import '@e-burgos/tucu-ui/styles';
+
+const appRoutesConfig: IAppRouteConfig[] = [
+  {
+    key: 'home',
+    path: '/',
+    element: <HomePage />,
+    isPublic: true,
+  },
+  {
+    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"
+      basePath="/my-app"
+      appRoutesConfig={appRoutesConfig}
+      isAuthenticated={true}    // Required: authentication state
+      loginUrl="/auth/login"    // Required: redirect URL for unauthenticated users
+      logo={{ name: 'My', secondName: 'App' }}
+      showSettings
+    />
+  );
+}` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Advanced: Public/Private Routes" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Authentication handling with disabled routes"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "Advanced Configuration", children: /* @__PURE__ */ e(o, { language: "tsx", code: `import { ThemeProvider, IAppRouteConfig } from '@e-burgos/tucu-ui';
+
+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 /> },
+  { key: 'settings', path: '/settings', element: <SettingsPage /> },
+
+  // Disabled routes (temporarily unavailable)
+  { key: 'beta', path: '/beta', element: <BetaPage />, disabled: true },
+];
+
+function MfeApp() {
+  const { isLoggedIn } = useAuth();
+
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"
+      basePath="/mfe-app"
+      appRoutesConfig={appRoutesConfig}
+      isAuthenticated={isLoggedIn}
+      loginUrl="/mfe-app/login"
+      logo={{ name: 'MFE', secondName: 'App' }}
+      showSettings
+    />
+  );
+}` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Type Safety" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "TypeScript enforces correct prop combinations"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "Compile-Time Validation", children: /* @__PURE__ */ e(o, { language: "tsx", code: `// ✅ Correct — MFE with all required props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  basePath="/app"
+  appRoutesConfig={routes}
+  isAuthenticated={isLoggedIn}
+  loginUrl="/login"
+/>
+
+// ❌ Error — Missing required props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  basePath="/app"
+  appRoutesConfig={routes}
+  // TS Error: Property 'isAuthenticated' is missing
+  // TS Error: Property 'loginUrl' is missing
+/>
+
+// ❌ Error — Mixing MFE with Standalone props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  menuItems={[...]}  // Error: not allowed in MFE mode
+  basePath="/app"
+  appRoutesConfig={routes}
+/>` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Key Features" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Benefits of the MFE architectural pattern"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Explicit Route Config",
+        description: "Full control over each route via appRoutesConfig with access control.",
+        iconBgClassName: "from-purple-500 to-indigo-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Route Isolation",
+        description: "Each MFE has its own basePath ensuring complete route isolation.",
+        iconBgClassName: "from-blue-500 to-cyan-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Auth Integration",
+        description: "Built-in public/private routes with isAuthenticated and loginUrl.",
+        iconBgClassName: "from-red-500 to-rose-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(f, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Independent Deploy",
+        description: "Each app can be developed, built, and deployed independently.",
+        iconBgClassName: "from-green-500 to-emerald-500"
+      }
+    ].map((s) => /* @__PURE__ */ e(d, { layout: "vertical", ...s }, s.title)) })
+  ] })
+] });
+export {
+  T as default
+};

package/documentation/MacOSBackgroundsSection-BCOYwP0T.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=[{id:"base",name:"Base",desc:"CSS-only spatial gradient generated with tokens. Used as the default body/window background. No image assets needed — adapts automatically between light and dark modes via CSS custom properties.",dimensions:"Fluid (CSS gradient)",usage:"Body, root window, app shell background"},{id:"wave",name:"Wave",desc:"Full-width decorative background with flowing organic shapes. Designed for desktop/tablet viewports as hero sections or immersive landing pages.",dimensions:"1512 × 982",usage:"Hero sections, landing pages, desktop full-screen"},{id:"wallpaper",name:"Wallpaper",desc:"Compact landscape format optimized for card-like areas, banners, or contained sections where a spatial background adds depth without covering the full viewport.",dimensions:"1080 × 560",usage:"Banners, feature sections, contained backgrounds"},{id:"mobile",name:"Mobile",desc:"Portrait-oriented background asset optimized for mobile viewports and tall narrow containers.",dimensions:"402 × 874",usage:"Mobile screens, narrow containers, portrait layouts"}],t=()=>{const{mode:d}=a.useTheme(),r=d==="dark";return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Backgrounds",description:"macOS Tahoe provides 4 background types optimized for different viewport sizes and use cases. All adapt between light and dark automatically.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-400/50",children:e.jsx(l.Image,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Background Types",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:"Each background type is designed for a specific screen context. Choose the appropriate format based on your layout's viewport and orientation requirements."}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",children:n.map(s=>e.jsxs("div",{className:"p-4 rounded-xl border border-border space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:s.id==="base"?r?"#0a84ff":"#007aff":s.id==="wave"?r?"#30d158":"#34c759":s.id==="wallpaper"?r?"#ff9f0a":"#ff9500":r?"#bf5af2":"#af52de"}}),e.jsx("span",{className:"text-sm font-semibold text-gray-900 dark:text-gray-100",children:s.name})]}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:s.desc}),e.jsxs("div",{className:"pt-2 border-t border-[var(--color-border)] space-y-1",children:[e.jsx("p",{className:"text-[10px] font-mono text-gray-400",children:s.dimensions}),e.jsx("p",{className:"text-[10px] text-gray-400",children:s.usage})]})]},s.id))})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Base (CSS Spatial Gradient)",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Generated entirely with CSS custom properties. Currently used as the body background in the demo. Available classes:"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"macos-bg-spatial-aurora"}),","," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"macos-bg-spatial-depth"}),","," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"macos-bg-spatial-demo"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"relative w-full h-40 rounded-xl overflow-hidden border border-border",style:{backgroundColor:r?"#131318":"#f0f2f7"},children:e.jsx("div",{className:"absolute inset-0 rounded-xl",style:{background:r?"radial-gradient(circle at 28% 32%, rgba(18, 60, 100, 0.8) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(55, 30, 100, 0.6) 0%, transparent 42%)":"radial-gradient(circle at 28% 32%, rgba(142, 200, 255, 0.45) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(170, 150, 255, 0.28) 0%, transparent 42%)",filter:"blur(30px)"}})}),e.jsx("p",{className:"text-xs font-medium text-center text-gray-700 dark:text-gray-300",children:"Aurora"}),e.jsx("p",{className:"text-[10px] text-center text-gray-400",children:"Animated spatial aurora"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"w-full h-40 rounded-xl border border-border",style:{background:r?"linear-gradient(160deg, #141418 0%, #18181e 40%, #191520 70%, #141418 100%)":"linear-gradient(160deg, #f0f2f6 0%, #eaedf4 40%, #f2f0f8 70%, #eef2f6 100%)"}}),e.jsx("p",{className:"text-xs font-medium text-center text-gray-700 dark:text-gray-300",children:"Depth"}),e.jsx("p",{className:"text-[10px] text-center text-gray-400",children:"Sober, data-focused"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"w-full h-40 rounded-xl border border-border",style:{background:r?"radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 60, 160, 0.55) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(80, 0, 160, 0.4) 0%, transparent 55%), #101014":"radial-gradient(ellipse 80% 60% at 20% 10%, rgba(100, 180, 255, 0.4) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(160, 120, 255, 0.3) 0%, transparent 55%), #f0f2f7"}}),e.jsx("p",{className:"text-xs font-medium text-center text-gray-700 dark:text-gray-300",children:"Demo"}),e.jsx("p",{className:"text-[10px] text-center text-gray-400",children:"Expressive, showcases"})]})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Wave",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-2",children:"Full-width decorative background for desktop/tablet hero sections."}),e.jsx("p",{className:"text-[10px] font-mono text-gray-400 mb-4",children:"1512 × 982 — Landscape (desktop full-screen)"}),e.jsx("div",{className:"rounded-xl overflow-hidden border border-border",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"wave",className:"rounded-xl !relative !inset-auto !z-auto",style:{height:"320px"}})}),e.jsx("div",{className:"mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("wave",r)]})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Wallpaper",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-2",children:"Compact landscape format for banners, feature sections, and contained areas."}),e.jsx("p",{className:"text-[10px] font-mono text-gray-400 mb-4",children:"1080 × 560 — Landscape (contained sections)"}),e.jsx("div",{className:"rounded-xl overflow-hidden border border-border",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"wallpaper",className:"rounded-xl !relative !inset-auto !z-auto",style:{height:"280px"}})}),e.jsx("div",{className:"mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("wallpaper",r)]})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Mobile",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-2",children:"Portrait-oriented asset for mobile viewports and narrow containers."}),e.jsx("p",{className:"text-[10px] font-mono text-gray-400 mb-4",children:"402 × 874 — Portrait (mobile screens)"}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:"rounded-xl overflow-hidden border border-border",style:{width:"220px",height:"478px"},children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"mobile",className:"rounded-xl w-full h-full !relative !inset-auto !z-auto"})})}),e.jsx("div",{className:"mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("mobile",r)]})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Screen Size Mapping",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Recommended background type per viewport breakpoint."}),e.jsx(a.BasicTable,{columns:[{key:"viewport",label:"Viewport"},{key:"breakpoint",label:"Breakpoint",className:"font-mono"},{key:"background",label:"Background"},{key:"asset",label:"Asset",className:"font-mono"}],data:[{viewport:"Mobile",breakpoint:"< 640px",background:"Mobile",asset:`${r?"dark":"light"}-mobile.svg`},{viewport:"Tablet",breakpoint:"640–1024px",background:"Wallpaper",asset:`${r?"dark":"light"}-wallpaper.svg`},{viewport:"Desktop",breakpoint:"> 1024px",background:"Wave",asset:`${r?"dark":"light"}-wave.svg`},{viewport:"Any",breakpoint:"All",background:"Base (CSS)",asset:"No asset needed"}],hoverable:!0,striped:!1})]})})})]})};exports.MacOSBackgroundsSection=t;exports.default=t;