@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/DesignPrinciplesSection-AGfHYdRQ.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const a=[{title:"Consistency",description:"Unified visual language and interaction patterns across all components.",icon:e.jsx(s.CheckCircle,{className:"h-6 w-6"}),iconBgClassName:"from-emerald-500 via-green-500 to-teal-500"},{title:"Simplicity",description:"Clean, intuitive interfaces that reduce cognitive load.",icon:e.jsx(s.Minimize2,{className:"h-6 w-6"}),iconBgClassName:"from-blue-500 via-cyan-500 to-sky-500"},{title:"Flexibility",description:"Adaptable components that work across different contexts.",icon:e.jsx(s.Layers,{className:"h-6 w-6"}),iconBgClassName:"from-purple-500 via-violet-500 to-indigo-500"},{title:"Accessibility",description:"Inclusive design that works for everyone.",icon:e.jsx(s.Eye,{className:"h-6 w-6"}),iconBgClassName:"from-orange-500 via-amber-500 to-yellow-500"}];return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(t.HeroCard,{title:"Design Principles",description:"Core principles that guide our design decisions and ensure consistency.",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-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Compass,{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:"Core Principles"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"The foundational values behind every design decision"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:a.map(i=>e.jsx(t.FeatureCard,{layout:"horizontal",title:i.title,description:i.description,icon:i.icon,iconBgClassName:i.iconBgClassName},i.title))})]})]})};exports.default=n;

package/documentation/DesignPrinciplesSection-DnXrx_3r.js

@@ -0,0 +1,68 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { H as t, T as a, ax as o } from "../index-lfg6LZ1p.js";
+import { Compass as n, CheckCircle as l, Minimize2 as r, Layers as c, Eye as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ s("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      title: "Design Principles",
+      description: "Core principles that guide our design decisions and ensure consistency.",
+      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-violet-500 to-indigo-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__ */ s("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ s("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Core Principles" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "The foundational values behind every design decision"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: [
+      {
+        title: "Consistency",
+        description: "Unified visual language and interaction patterns across all components.",
+        icon: /* @__PURE__ */ e(l, { className: "h-6 w-6" }),
+        iconBgClassName: "from-emerald-500 via-green-500 to-teal-500"
+      },
+      {
+        title: "Simplicity",
+        description: "Clean, intuitive interfaces that reduce cognitive load.",
+        icon: /* @__PURE__ */ e(r, { className: "h-6 w-6" }),
+        iconBgClassName: "from-blue-500 via-cyan-500 to-sky-500"
+      },
+      {
+        title: "Flexibility",
+        description: "Adaptable components that work across different contexts.",
+        icon: /* @__PURE__ */ e(c, { className: "h-6 w-6" }),
+        iconBgClassName: "from-purple-500 via-violet-500 to-indigo-500"
+      },
+      {
+        title: "Accessibility",
+        description: "Inclusive design that works for everyone.",
+        icon: /* @__PURE__ */ e(m, { className: "h-6 w-6" }),
+        iconBgClassName: "from-orange-500 via-amber-500 to-yellow-500"
+      }
+    ].map((i) => /* @__PURE__ */ e(
+      o,
+      {
+        layout: "horizontal",
+        title: i.title,
+        description: i.description,
+        icon: i.icon,
+        iconBgClassName: i.iconBgClassName
+      },
+      i.title
+    )) })
+  ] })
+] });
+export {
+  x as default
+};

package/documentation/DrawerSection-0xOnVMih.js

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("../index-BaGqriuz.js"),d=require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[r,s]=i.useState(!1),[o,n]=i.useState(!1),[,a]=i.useState("sidebar");return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Drawer",description:`A drawer component that slides in from the side, supporting both
+          simple sidebar and sidebar-menu variants.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-amber-600 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(d.PanelRightOpen,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Left Position"}),e.jsx(t.Button,{onClick:()=>{a("sidebar"),s(!0)},children:"Open Left Drawer"}),e.jsx(t.Drawer,{isOpen:r,setIsOpen:s,type:"sidebar",title:"Sidebar Title",position:"left",children:e.jsx(t.Typography,{tag:"p",children:"Sidebar content goes here"})})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Right Position"}),e.jsx(t.Button,{onClick:()=>{a("sidebar"),n(!0)},children:"Open Right Drawer"}),e.jsx(t.Drawer,{isOpen:o,setIsOpen:n,type:"sidebar",position:"right",title:"Right Drawer",children:e.jsx(t.Typography,{tag:"p",children:"Content on the right"})})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"Drawer",defaultValues:{isOpen:r,setIsOpen:s,position:"left",backdrop:!0},excludeProps:["setIsOpen","onClose","actionContent","logo","menuItems","type"],children:l=>e.jsx("div",{style:{position:"relative",height:300,overflow:"hidden"},children:e.jsx(t.Drawer,{...l,setIsOpen:s,isOpen:r,title:"Drawer Preview",children:e.jsx("p",{className:"text-sm p-4",children:"Drawer content"})})})}),e.jsx(t.AutoPropsTable,{componentName:"Drawer"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { Drawer, Button } from '@e-burgos/tucu-ui';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+      <Drawer
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        type="sidebar"
+        title="Drawer Title"
+      >
+        <div>Drawer content</div>
+      </Drawer>
+    </>
+  );
+}
+
+// Right position
+<Drawer
+  isOpen={isOpen}
+  setIsOpen={setIsOpen}
+  type="sidebar"
+  position="right"
+  title="Right Drawer"
+>
+  <div>Content</div>
+</Drawer>
+
+// Without backdrop
+<Drawer
+  isOpen={isOpen}
+  setIsOpen={setIsOpen}
+  type="sidebar"
+  backdrop={false}
+>
+  <div>Content</div>
+</Drawer>`})})})})]})};exports.default=p;

package/documentation/{DrawerSection-D5pDeoKz.js → DrawerSection-C5umOiTH.js}

@@ -1,78 +1,75 @@
-import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { useState as l } from "react";
-import { T as r, C as i, a as d, y as p, a4 as n, P as h, A as u, c as w } from "../index-D3gBsvbO.js";
-import "lucide-react";
+import { jsxs as r, Fragment as w, jsx as e } from "react/jsx-runtime";
+import { useState as a } from "react";
+import { H as u, C as s, a as p, T as i, x as c, a5 as o, P as f, A as g, c as O } from "../index-lfg6LZ1p.js";
+import { PanelRightOpen as b } from "lucide-react";
 import "react-router-dom";
 import "react-dom";
-const v = () => {
-  const [s, t] = l(!1), [g, o] = l(
-    "sidebar"
-  );
-  return /* @__PURE__ */ a(m, { children: [
-    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Drawer" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "A drawer component that slides in from the side, supporting both simple sidebar and sidebar-menu variants."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { 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(i, { className: "p-4", children: [
-        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Sidebar Drawer" }),
+const x = () => {
+  const [n, t] = a(!1), [m, l] = a(!1), [, d] = a("sidebar");
+  return /* @__PURE__ */ r(w, { children: [
+    /* @__PURE__ */ e(
+      u,
+      {
+        title: "Drawer",
+        description: `A drawer component that slides in from the side, supporting both
+          simple sidebar and sidebar-menu variants.`,
+        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-amber-600 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(p, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Left Position" }),
         /* @__PURE__ */ e(
-          p,
+          c,
           {
             onClick: () => {
-              o("sidebar"), t(!0);
+              d("sidebar"), t(!0);
             },
-            children: "Open Sidebar"
+            children: "Open Left Drawer"
           }
         ),
         /* @__PURE__ */ e(
-          n,
+          o,
           {
-            isOpen: s,
+            isOpen: n,
             setIsOpen: t,
             type: "sidebar",
             title: "Sidebar Title",
-            children: /* @__PURE__ */ e(r, { tag: "p", children: "Sidebar content goes here" })
+            position: "left",
+            children: /* @__PURE__ */ e(i, { tag: "p", children: "Sidebar content goes here" })
           }
         )
       ] }),
-      /* @__PURE__ */ a(i, { className: "p-4", children: [
-        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Right Position" }),
+      /* @__PURE__ */ r(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Right Position" }),
         /* @__PURE__ */ e(
-          p,
+          c,
           {
             onClick: () => {
-              o("sidebar"), t(!0);
+              d("sidebar"), l(!0);
             },
             children: "Open Right Drawer"
           }
         ),
         /* @__PURE__ */ e(
-          n,
+          o,
           {
-            isOpen: s,
-            setIsOpen: t,
+            isOpen: m,
+            setIsOpen: l,
             type: "sidebar",
             position: "right",
             title: "Right Drawer",
-            children: /* @__PURE__ */ e(r, { tag: "p", children: "Content on the right" })
+            children: /* @__PURE__ */ e(i, { tag: "p", children: "Content on the right" })
           }
         )
       ] })
     ] }) }) }) }),
     /* @__PURE__ */ e(
-      h,
+      f,
       {
         componentName: "Drawer",
         defaultValues: {
-          isOpen: s,
+          isOpen: n,
           setIsOpen: t,
           position: "left",
           backdrop: !0
@@ -85,16 +82,16 @@ const v = () => {
           "menuItems",
           "type"
         ],
-        children: (c) => /* @__PURE__ */ e(
+        children: (h) => /* @__PURE__ */ e(
           "div",
           {
             style: { position: "relative", height: 300, overflow: "hidden" },
             children: /* @__PURE__ */ e(
-              n,
+              o,
               {
-                ...c,
+                ...h,
                 setIsOpen: t,
-                isOpen: s,
+                isOpen: n,
                 title: "Drawer Preview",
                 children: /* @__PURE__ */ e("p", { className: "text-sm p-4", children: "Drawer content" })
               }
@@ -103,9 +100,9 @@ const v = () => {
         )
       }
     ),
-    /* @__PURE__ */ e(u, { componentName: "Drawer" }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      w,
+    /* @__PURE__ */ e(g, { componentName: "Drawer" }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(p, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      O,
       {
         language: "tsx",
         code: `import { Drawer, Button } from '@e-burgos/tucu-ui';
@@ -154,5 +151,5 @@ function MyComponent() {
   ] });
 };
 export {
-  v as default
+  x as default
 };

package/documentation/DynamicRoutesSection-CplA4H_-.js

@@ -0,0 +1,112 @@
+import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { H as n, T as a, C as r, a as i, c as m, ax as c } from "../index-lfg6LZ1p.js";
+import { Shuffle as l, Shield as d, Flag as u, Database as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => /* @__PURE__ */ t(o, { children: [
+  /* @__PURE__ */ e(
+    n,
+    {
+      title: "Dynamic Routes",
+      description: "Create conditional routing based on user permissions, feature flags, or application state using useMemo patterns.",
+      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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(l, { 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: "Dynamic Route Generation" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Use useMemo to generate menuItems dynamically based on runtime conditions"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { title: "Dynamic Menu Hook", children: /* @__PURE__ */ e(m, { language: "tsx", code: `import { useMemo } from 'react';
+import { StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';
+
+export const useMenuItems = () => {
+  const { userRole, featureFlags } = useAppState();
+
+  const menuItems: StandaloneAppRoutesMenuItem[] = useMemo(() => [
+    // Static routes
+    {
+      name: 'Home',
+      path: '/',
+      icon: <LucideIcons.Home />,
+      component: <HomePage />,
+    },
+
+    // Dynamic routes based on user permissions
+    ...(userRole === 'admin' ? [{
+      name: 'Admin',
+      path: '/admin',
+      icon: <LucideIcons.Shield />,
+      component: <AdminPage />,
+      enableNestedRoutes: true,
+      dropdownItems: [
+        {
+          name: 'Users',
+          path: '/admin/users',
+          component: <UsersPage />,
+        },
+        {
+          name: 'Settings',
+          path: '/admin/settings',
+          component: <AdminSettingsPage />,
+        },
+      ],
+    }] : []),
+
+    // Feature-flagged routes
+    ...(featureFlags.newFeature ? [{
+      name: 'New Feature',
+      path: '/new-feature',
+      icon: <LucideIcons.Sparkles />,
+      component: <NewFeaturePage />,
+    }] : []),
+  ], [userRole, featureFlags]);
+
+  return { menuItems };
+};` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Use Cases" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Common patterns for conditional route rendering"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Role-Based Access",
+        description: "Show/hide routes based on user permissions and roles.",
+        iconBgClassName: "from-red-500 to-rose-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Feature Flags",
+        description: "Enable routes conditionally based on feature toggles.",
+        iconBgClassName: "from-blue-500 to-cyan-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "State-Driven",
+        description: "Routes that dynamically change based on application state.",
+        iconBgClassName: "from-green-500 to-emerald-500"
+      }
+    ].map((s) => /* @__PURE__ */ e(c, { layout: "vertical", ...s }, s.title)) })
+  ] })
+] });
+export {
+  C as default
+};

package/documentation/DynamicRoutesSection-D9cAVioz.js

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const o=`import { useMemo } from 'react';
+import { StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';
+
+export const useMenuItems = () => {
+  const { userRole, featureFlags } = useAppState();
+
+  const menuItems: StandaloneAppRoutesMenuItem[] = useMemo(() => [
+    // Static routes
+    {
+      name: 'Home',
+      path: '/',
+      icon: <LucideIcons.Home />,
+      component: <HomePage />,
+    },
+
+    // Dynamic routes based on user permissions
+    ...(userRole === 'admin' ? [{
+      name: 'Admin',
+      path: '/admin',
+      icon: <LucideIcons.Shield />,
+      component: <AdminPage />,
+      enableNestedRoutes: true,
+      dropdownItems: [
+        {
+          name: 'Users',
+          path: '/admin/users',
+          component: <UsersPage />,
+        },
+        {
+          name: 'Settings',
+          path: '/admin/settings',
+          component: <AdminSettingsPage />,
+        },
+      ],
+    }] : []),
+
+    // Feature-flagged routes
+    ...(featureFlags.newFeature ? [{
+      name: 'New Feature',
+      path: '/new-feature',
+      icon: <LucideIcons.Sparkles />,
+      component: <NewFeaturePage />,
+    }] : []),
+  ], [userRole, featureFlags]);
+
+  return { menuItems };
+};`,n=[{icon:e.jsx(t.Shield,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Role-Based Access",description:"Show/hide routes based on user permissions and roles.",iconBgClassName:"from-red-500 to-rose-500"},{icon:e.jsx(t.Flag,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Feature Flags",description:"Enable routes conditionally based on feature toggles.",iconBgClassName:"from-blue-500 to-cyan-500"},{icon:e.jsx(t.Database,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"State-Driven",description:"Routes that dynamically change based on application state.",iconBgClassName:"from-green-500 to-emerald-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Dynamic Routes",description:"Create conditional routing based on user permissions, feature flags, or application state using useMemo patterns.",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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Shuffle,{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(s.Typography,{tag:"h2",className:"mb-2",children:"Dynamic Route Generation"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Use useMemo to generate menuItems dynamically based on runtime conditions"})]}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Dynamic Menu Hook",children:e.jsx(s.CodeBlock,{language:"tsx",code:o})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Use Cases"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Common patterns for conditional route rendering"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6",children:n.map(a=>e.jsx(s.FeatureCard,{layout:"vertical",...a},a.title))})]})]})};exports.default=r;