@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/MFESupportSection-CMTM8pC1.mjs

@@ -0,0 +1,354 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { C as t, a as o, T as a, a4 as d, c as s } from "./index-Hq6IUBmn.mjs";
+import { Box as n, Info as c, Code as l, Settings as p, Play as m, Zap as h, Shield as g, CheckCircle as i } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(o, { title: "Micro Frontends (MFE) Support", className: "mt-2 mb-6", children: /* @__PURE__ */ r("div", { className: "space-y-6", children: [
+  /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-purple-500 to-indigo-500 shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+    /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: "Micro Frontend (MFE) Pattern" })
+  ] }),
+  /* @__PURE__ */ r(a, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: [
+    "The ",
+    /* @__PURE__ */ e("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",
+    " ",
+    /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "appRoutesConfig" }),
+    " ",
+    "and a",
+    " ",
+    /* @__PURE__ */ e("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."
+  ] }),
+  /* @__PURE__ */ e(d, { variant: "info", dismissible: !1, children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(c, { className: "w-4 h-4" }),
+      /* @__PURE__ */ e(a, { tag: "span", className: "font-semibold", children: "MFE Mode Requirements" })
+    ] }),
+    /* @__PURE__ */ r(a, { tag: "p", className: "text-sm", children: [
+      "When using",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: 'architecturalPatterns="mfe"' }),
+      ", you must provide",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "basePath" }),
+      " ",
+      "and",
+      " ",
+      /* @__PURE__ */ e("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."
+    ] })
+  ] }) }),
+  /* @__PURE__ */ r("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r("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(l, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: "Conditional TypeScript Types" })
+      ] }),
+      /* @__PURE__ */ r(
+        a,
+        {
+          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",
+            " ",
+            /* @__PURE__ */ e("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.'
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(s, { 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"` })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-purple-500 to-indigo-500 shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: "IAppRouteConfig Interface" })
+      ] }),
+      /* @__PURE__ */ r(
+        a,
+        {
+          tag: "p",
+          className: "text-sm text-gray-600 dark:text-gray-400",
+          children: [
+            "MFE pattern uses the",
+            " ",
+            /* @__PURE__ */ e("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."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(s, { 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
+}` })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: "Basic MFE Usage" })
+      ] }),
+      /* @__PURE__ */ r(
+        a,
+        {
+          tag: "p",
+          className: "text-sm text-gray-600 dark:text-gray-400",
+          children: [
+            "Set",
+            " ",
+            /* @__PURE__ */ e("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",
+            " ",
+            /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "basePath" }),
+            " ",
+            "and",
+            " ",
+            /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "appRoutesConfig" }),
+            "."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(s, { 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
+    />
+  );
+}` })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-orange-500 to-amber-500 shadow-lg", children: /* @__PURE__ */ e(h, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: "Advanced: Public/Private Routes" })
+      ] }),
+      /* @__PURE__ */ r(
+        a,
+        {
+          tag: "p",
+          className: "text-sm text-gray-600 dark:text-gray-400",
+          children: [
+            "MFE pattern automatically handles authentication for private routes. Use",
+            " ",
+            /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "isPublic" }),
+            " ",
+            "to control access and",
+            " ",
+            /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "disabled" }),
+            " ",
+            "to temporarily disable routes."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(s, { 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
+    />
+  );
+}` })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 to-pink-500 shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: "Type Safety Examples" })
+      ] }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          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."
+        }
+      ),
+      /* @__PURE__ */ e(s, { 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={[...]}
+/>` })
+    ] })
+  ] }),
+  /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold text-lg", children: "Key Features" }),
+    /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ r(t, { className: "p-4", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ e(i, { className: "w-5 h-5 text-green-500" }),
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-semibold", children: "Explicit Route Configuration" })
+        ] }),
+        /* @__PURE__ */ r(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: [
+              "Full control over route configuration with",
+              " ",
+              /* @__PURE__ */ e("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."
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(t, { className: "p-4", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ e(i, { className: "w-5 h-5 text-green-500" }),
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-semibold", children: "Route Isolation" })
+        ] }),
+        /* @__PURE__ */ r(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: [
+              "Each micro frontend has its own",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "basePath" }),
+              ", ensuring complete route isolation."
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(t, { className: "p-4", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ e(i, { className: "w-5 h-5 text-green-500" }),
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-semibold", children: "Authentication Integration" })
+        ] }),
+        /* @__PURE__ */ r(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: [
+              "Built-in support for public/private routes with",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "isPublic" }),
+              ". Automatic authentication handling."
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(t, { className: "p-4", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ e(i, { className: "w-5 h-5 text-green-500" }),
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-semibold", children: "Independent Deployment" })
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            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."
+          }
+        )
+      ] })
+    ] })
+  ] })
+] }) }) }) });
+export {
+  C as default
+};

package/MenuItemsGuideSection-CFz7XSzU.mjs

@@ -0,0 +1,325 @@
+import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { T as n, C as s, a as c, B as l, D as p, a4 as h, c as a } from "./index-Hq6IUBmn.mjs";
+import { Info as u } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const v = () => {
+  const d = [
+    { key: "property", label: "Property" },
+    { key: "type", label: "Type" },
+    { key: "required", label: "Required" },
+    { key: "description", label: "Description" }
+  ], m = [
+    {
+      property: "name",
+      type: "string",
+      required: "Yes",
+      description: "Display name of the menu item"
+    },
+    {
+      property: "path",
+      type: "string",
+      required: "Yes",
+      description: /* @__PURE__ */ t(r, { children: [
+        /* @__PURE__ */ e("strong", { children: "Internal route path" }),
+        " for React Router navigation (e.g., ",
+        /* @__PURE__ */ e("code", { children: "/dashboard" }),
+        "). Used for routing and active state detection."
+      ] })
+    },
+    {
+      property: "href",
+      type: "string?",
+      required: "No",
+      description: /* @__PURE__ */ t(r, { children: [
+        /* @__PURE__ */ e("strong", { children: "External URL" }),
+        " for redirection (e.g.,",
+        " ",
+        /* @__PURE__ */ e("code", { children: "https://example.com" }),
+        "). If provided, clicking will redirect to this URL instead of using React Router. Falls back to",
+        " ",
+        /* @__PURE__ */ e("code", { children: "path" }),
+        " if not provided."
+      ] })
+    },
+    {
+      property: "component",
+      type: "JSX.Element?",
+      required: "No",
+      description: /* @__PURE__ */ t(r, { children: [
+        "React component to render when this route is active. Required for automatic routing. Not needed if using ",
+        /* @__PURE__ */ e("code", { children: "customRoutes" }),
+        "."
+      ] })
+    },
+    {
+      property: "icon",
+      type: "React.ReactNode?",
+      required: "No",
+      description: "Icon element to display next to the menu item name (typically a Lucide icon)"
+    },
+    {
+      property: "dropdownItems",
+      type: "DropdownItemProps[]?",
+      required: "No",
+      description: "Array of sub-menu items for nested navigation. Creates a dropdown menu when provided."
+    },
+    {
+      property: "isActive",
+      type: "boolean?",
+      required: "No",
+      description: "Manually set active state. Usually handled automatically by matching the current pathname."
+    },
+    {
+      property: "hide",
+      type: "boolean?",
+      required: "No",
+      description: "Hide this menu item from navigation (useful for conditional rendering)"
+    },
+    {
+      property: "onClick",
+      type: "() => void?",
+      required: "No",
+      description: "Callback function executed when the menu item is clicked"
+    }
+  ];
+  return /* @__PURE__ */ t(r, { children: [
+    /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(n, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "MenuItems Guide" }),
+      /* @__PURE__ */ e(
+        n,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Complete guide to configuring menu items for navigation and routing"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "MenuItem Properties", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(n, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Each menu item is an object with the following properties:" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          columns: d.map((o) => ({
+            ...o,
+            render: (i, g) => o.key === "property" ? /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i ?? "") }) : o.key === "type" ? /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(i ?? "") }) : o.key === "required" ? /* @__PURE__ */ e(
+              p,
+              {
+                variant: "outline",
+                className: `text-xs ${i === "Yes" ? "" : "bg-gray-200"}`,
+                children: String(i ?? "")
+              }
+            ) : o.key === "description" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: i }) : String(i ?? "")
+          })),
+          data: m,
+          containerClassName: "mb-4"
+        }
+      ),
+      /* @__PURE__ */ e(h, { variant: "info", children: /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 font-semibold", children: [
+          /* @__PURE__ */ e(u, { className: "h-4 w-4" }),
+          "Important: path vs href"
+        ] }),
+        /* @__PURE__ */ t("div", { className: "text-sm mt-1", children: [
+          /* @__PURE__ */ e("strong", { children: "path" }),
+          " is used for internal React Router navigation and active state detection. ",
+          /* @__PURE__ */ e("strong", { children: "href" }),
+          " ",
+          "is for external URLs (starts with ",
+          /* @__PURE__ */ e("code", { children: "http://" }),
+          " or",
+          " ",
+          /* @__PURE__ */ e("code", { children: "https://" }),
+          "). If both are provided,",
+          " ",
+          /* @__PURE__ */ e("code", { children: "href" }),
+          " takes precedence for navigation, but",
+          " ",
+          /* @__PURE__ */ e("code", { children: "path" }),
+          " is still used for active state matching."
+        ] })
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "MenuItems Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "1. Simple Menu Item" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            language: "tsx",
+            code: `const menuItems = [
+  {
+    name: 'Dashboard',
+    path: '/dashboard',
+    icon: <LucideIcons.Home />,
+    component: <Dashboard />,
+  },
+];`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "2. Menu Item with External Link" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            language: "tsx",
+            code: `const menuItems = [
+  {
+    name: 'Documentation',
+    path: '/docs', // Used for active state
+    href: 'https://docs.example.com', // External URL for navigation
+    icon: <LucideIcons.Book />,
+    // No component needed for external links
+  },
+];`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "3. Menu Item with Dropdown" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            language: "tsx",
+            code: `const menuItems = [
+  {
+    name: 'Design System',
+    path: '/design-system',
+    icon: <LucideIcons.Palette />,
+    component: <DesignSystem />,
+    dropdownItems: [
+      {
+        name: 'Layout',
+        path: '/design-system/layout',
+        icon: <LucideIcons.Layout />,
+        component: <LayoutSystem />,
+      },
+      {
+        name: 'Theming',
+        path: '/design-system/theming',
+        icon: <LucideIcons.Paintbrush />,
+        component: <ThemingGuide />,
+      },
+    ],
+  },
+];`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "4. Complete Example with All Features" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            language: "tsx",
+            code: `import { LucideIcons } from '@ui/tucu-ui';
+import { Dashboard } from './pages/Dashboard';
+import { Settings } from './pages/Settings';
+import { Profile } from './pages/Profile';
+
+const menuItems = [
+  {
+    name: 'Dashboard',
+    path: '/',
+    icon: <LucideIcons.Home />,
+    component: <Dashboard />,
+  },
+  {
+    name: 'Settings',
+    path: '/settings',
+    icon: <LucideIcons.Settings />,
+    component: <Settings />,
+    dropdownItems: [
+      {
+        name: 'General',
+        path: '/settings/general',
+        component: <GeneralSettings />,
+      },
+      {
+        name: 'Profile',
+        path: '/settings/profile',
+        component: <Profile />,
+      },
+    ],
+  },
+  {
+    name: 'Documentation',
+    path: '/docs',
+    href: 'https://docs.example.com', // External link
+    icon: <LucideIcons.Book />,
+  },
+  {
+    name: 'Help',
+    path: '/help',
+    icon: <LucideIcons.HelpCircle />,
+    component: <Help />,
+    onClick: () => {
+      console.log('Help clicked');
+      // Custom click handler
+    },
+  },
+  {
+    name: 'Hidden Item',
+    path: '/hidden',
+    component: <HiddenPage />,
+    hide: true, // Hidden from menu but route still works
+  },
+];
+
+function App() {
+  return (
+    <ThemeProvider menuItems={menuItems} layout={LAYOUT_OPTIONS.ADMIN} />
+  );
+}`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "5. Conditional Menu Items" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            language: "tsx",
+            code: `import { useAuth } from './hooks/useAuth';
+
+function App() {
+  const { isAdmin, isAuthenticated } = useAuth();
+
+  const menuItems = [
+    {
+      name: 'Home',
+      path: '/',
+      icon: <LucideIcons.Home />,
+      component: <Home />,
+    },
+    {
+      name: 'Dashboard',
+      path: '/dashboard',
+      icon: <LucideIcons.LayoutDashboard />,
+      component: <Dashboard />,
+      hide: !isAuthenticated, // Hide if not authenticated
+    },
+    {
+      name: 'Admin Panel',
+      path: '/admin',
+      icon: <LucideIcons.Shield />,
+      component: <AdminPanel />,
+      hide: !isAdmin, // Hide if not admin
+    },
+  ].filter((item) => !item.hide); // Filter out hidden items
+
+  return (
+    <ThemeProvider menuItems={menuItems} layout={LAYOUT_OPTIONS.ADMIN} />
+  );
+}`
+          }
+        )
+      ] })
+    ] }) }) }) })
+  ] });
+};
+export {
+  v as default
+};