@e-burgos/tucu-ui 2.0.1 → 2.0.3

package/documentation/MenuItemsGuideSection-B4A_sWeX.js

@@ -0,0 +1,126 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-D874Kozv.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const s=[{key:"property",label:"Property"},{key:"type",label:"Type"},{key:"required",label:"Required"},{key:"description",label:"Description"}],o=[{property:"name",type:"string",required:"Yes",description:"Display name of the menu item"},{property:"path",type:"string",required:"Yes",description:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"Internal route path"})," for React Router navigation (e.g., ",e.jsx("code",{children:"/dashboard"}),"). Used for routing and active state detection."]})},{property:"href",type:"string?",required:"No",description:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"External URL"})," for redirection (e.g.,"," ",e.jsx("code",{children:"https://example.com"}),"). If provided, clicking will redirect to this URL instead of using React Router. Falls back to"," ",e.jsx("code",{children:"path"})," if not provided."]})},{property:"component",type:"JSX.Element?",required:"No",description:e.jsxs(e.Fragment,{children:["React component to render when this route is active. Required for automatic routing. Not needed if using ",e.jsx("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 e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"MenuItems Guide"}),e.jsx(t.Typography,{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"})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"MenuItem Properties",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Each menu item is an object with the following properties:"}),e.jsx(t.BasicTable,{columns:s.map(i=>({...i,render:(n,c)=>i.key==="property"?e.jsx("code",{className:"text-xs text-brand",children:String(n??"")}):i.key==="type"?e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(n??"")}):i.key==="required"?e.jsx(t.Badge,{variant:"outline",className:`text-xs ${n==="Yes"?"":"bg-gray-200"}`,children:String(n??"")}):i.key==="description"?e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:n}):String(n??"")})),data:o,containerClassName:"mb-4"}),e.jsx(t.Alert,{variant:"info",children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[e.jsx(a.Info,{className:"h-4 w-4"}),"Important: path vs href"]}),e.jsxs("div",{className:"text-sm mt-1",children:[e.jsx("strong",{children:"path"})," is used for internal React Router navigation and active state detection. ",e.jsx("strong",{children:"href"})," ","is for external URLs (starts with ",e.jsx("code",{children:"http://"})," or"," ",e.jsx("code",{children:"https://"}),"). If both are provided,"," ",e.jsx("code",{children:"href"})," takes precedence for navigation, but"," ",e.jsx("code",{children:"path"})," is still used for active state matching."]})]})})]})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"MenuItems Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"1. Simple Menu Item"}),e.jsx(t.CodeBlock,{language:"tsx",code:`const menuItems = [
+  {
+    name: 'Dashboard',
+    path: '/dashboard',
+    icon: <LucideIcons.Home />,
+    component: <Dashboard />,
+  },
+];`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"2. Menu Item with External Link"}),e.jsx(t.CodeBlock,{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
+  },
+];`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"3. Menu Item with Dropdown"}),e.jsx(t.CodeBlock,{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 />,
+      },
+    ],
+  },
+];`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"4. Complete Example with All Features"}),e.jsx(t.CodeBlock,{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} />
+  );
+}`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"5. Conditional Menu Items"}),e.jsx(t.CodeBlock,{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} />
+  );
+}`})]})]})})})})]})};exports.default=r;

package/{MenuItemsGuideSection-Dl7WlJPq.mjs → documentation/MenuItemsGuideSection-CubWhWBg.js}

@@ -1,5 +1,5 @@
 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-DAzR4tRy.mjs";
+import { T as n, C as s, a as c, l, G as p, a4 as h, c as a } from "../index-DsiBIFwo.js";
 import { Info as u } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/ModalSection-BLJU61yb.js

@@ -0,0 +1,122 @@
+import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { T as o, C as n, a as i, r as c, Q as s, s as p, A as u, c as h } from "../index-DsiBIFwo.js";
+import "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const g = () => {
+  const [l, a] = m(!1);
+  return /* @__PURE__ */ t(d, { children: [
+    /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(o, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Modal" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A modal dialog component for displaying content in an overlay with customizable buttons and close functionality."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(n, { 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__ */ t("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ t(n, { className: "p-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-3", children: "Basic Modal" }),
+        /* @__PURE__ */ e(c, { onClick: () => a(!0), children: "Open Modal" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            isOpen: l,
+            setIsOpen: a,
+            text: {
+              title: "Modal Title",
+              content: "This is the modal content.",
+              button: "Confirm"
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(n, { className: "p-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-3", children: "Modal with Custom Content" }),
+        /* @__PURE__ */ e(c, { onClick: () => a(!0), children: "Open Custom Modal" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            isOpen: l,
+            setIsOpen: a,
+            text: { title: "Custom Modal" },
+            children: /* @__PURE__ */ e(o, { tag: "p", children: "Custom content goes here" })
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(
+      p,
+      {
+        componentName: "Modal",
+        defaultValues: { isOpen: !0, closeable: !0, hideButtons: !1 },
+        excludeProps: [
+          "setIsOpen",
+          "onBack",
+          "onClose",
+          "onSubmit",
+          "buttonContainer",
+          "text",
+          "contentClassName",
+          "titleContainerClassName"
+        ],
+        children: (r) => /* @__PURE__ */ e(
+          s,
+          {
+            ...r,
+            setIsOpen: () => {
+            },
+            text: {
+              title: "Modal Preview",
+              content: "This is a preview of the modal component."
+            },
+            children: /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Modal body content" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(u, { componentName: "Modal" }),
+    /* @__PURE__ */ e(n, { 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(
+      h,
+      {
+        language: "tsx",
+        code: `import { Modal, Button } from '@e-burgos/tucu-ui';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+      <Modal
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        text={{
+          title: 'Modal Title',
+          content: 'This is the modal content.',
+          button: 'Confirm',
+        }}
+      />
+    </>
+  );
+}
+
+// With custom content
+<Modal isOpen={isOpen} setIsOpen={setIsOpen} text={{ title: 'Custom Modal' }}>
+  <div>Custom content here</div>
+</Modal>
+
+// Non-closeable
+<Modal isOpen={isOpen} setIsOpen={setIsOpen} closeable={false} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  g as default
+};

package/documentation/ModalSection-DgxQhNE3.js

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>{const[n,s]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Modal"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A modal dialog component for displaying content in an overlay with customizable buttons and close functionality."})]}),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:"Basic Modal"}),e.jsx(t.Button,{onClick:()=>s(!0),children:"Open Modal"}),e.jsx(t.Modal,{isOpen:n,setIsOpen:s,text:{title:"Modal Title",content:"This is the modal content.",button:"Confirm"}})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Modal with Custom Content"}),e.jsx(t.Button,{onClick:()=>s(!0),children:"Open Custom Modal"}),e.jsx(t.Modal,{isOpen:n,setIsOpen:s,text:{title:"Custom Modal"},children:e.jsx(t.Typography,{tag:"p",children:"Custom content goes here"})})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"Modal",defaultValues:{isOpen:!0,closeable:!0,hideButtons:!1},excludeProps:["setIsOpen","onBack","onClose","onSubmit","buttonContainer","text","contentClassName","titleContainerClassName"],children:o=>e.jsx(t.Modal,{...o,setIsOpen:()=>{},text:{title:"Modal Preview",content:"This is a preview of the modal component."},children:e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Modal body content"})})}),e.jsx(t.AutoPropsTable,{componentName:"Modal"}),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 { Modal, Button } from '@e-burgos/tucu-ui';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+      <Modal
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        text={{
+          title: 'Modal Title',
+          content: 'This is the modal content.',
+          button: 'Confirm',
+        }}
+      />
+    </>
+  );
+}
+
+// With custom content
+<Modal isOpen={isOpen} setIsOpen={setIsOpen} text={{ title: 'Custom Modal' }}>
+  <div>Custom content here</div>
+</Modal>
+
+// Non-closeable
+<Modal isOpen={isOpen} setIsOpen={setIsOpen} closeable={false} />`})})})})]})};exports.default=l;

package/documentation/NFTGridSection-CUDnvifG.js

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=require("../collection-1-BIsLOX9N.js"),t=require("../1-CArqgiQa.js"),i=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(r.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"NFTGrid"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Grid card component for displaying NFT items with author information, image, collection, and price."})]}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Basic NFT"}),e.jsx(r.NFTGrid,{author:"CryptoPunk",authorImage:t.avatar1Img,image:a.collection1Img,name:"CryptoPunk #1234",collection:"Crypto Punks",price:"45 ETH"})]})})})})}),e.jsx(r.AutoPropsTable,{componentName:"NFTGrid"}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { NFTGrid } from '@e-burgos/tucu-ui';
+
+<NFTGrid
+  author="CryptoPunk"
+  authorImage="/avatars/cryptopunk.jpg"
+  image="/nfts/punk-1234.jpg"
+  name="CryptoPunk #1234"
+  collection="Crypto Punks"
+  price="45 ETH"
+  profilePath="/profile/cryptopunk" // Optional
+/>`})})})})]});exports.default=i;

package/documentation/NFTGridSection-DMCh4Qbs.js

@@ -0,0 +1,56 @@
+import { jsxs as r, Fragment as i, jsx as a } from "react/jsx-runtime";
+import { T as e, C as t, a as o, N as l, A as c, c as m } from "../index-DsiBIFwo.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+import { c as s } from "../collection-1-NeFANkbk.js";
+import { a as n } from "../1-Df9CGZha.js";
+const y = () => /* @__PURE__ */ r(i, { children: [
+  /* @__PURE__ */ r("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ a(e, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "NFTGrid" }),
+    /* @__PURE__ */ a(
+      e,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Grid card component for displaying NFT items with author information, image, collection, and price."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: /* @__PURE__ */ r(t, { className: "p-4", children: [
+    /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Basic NFT" }),
+    /* @__PURE__ */ a(
+      l,
+      {
+        author: "CryptoPunk",
+        authorImage: n,
+        image: s,
+        name: "CryptoPunk #1234",
+        collection: "Crypto Punks",
+        price: "45 ETH"
+      }
+    )
+  ] }) }) }) }) }),
+  /* @__PURE__ */ a(c, { componentName: "NFTGrid" }),
+  /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    m,
+    {
+      language: "tsx",
+      code: `import { NFTGrid } from '@e-burgos/tucu-ui';
+
+<NFTGrid
+  author="CryptoPunk"
+  authorImage="/avatars/cryptopunk.jpg"
+  image="/nfts/punk-1234.jpg"
+  name="CryptoPunk #1234"
+  collection="Crypto Punks"
+  price="45 ETH"
+  profilePath="/profile/cryptopunk" // Optional
+/>`
+    }
+  ) }) }) })
+] });
+export {
+  y as default
+};

package/{NestedRoutesSection-YTdNVbSk.mjs → documentation/NestedRoutesSection-DG9vKpBw.js}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { C as t, a as i, T as a, c as n, a4 as o } from "./index-DAzR4tRy.mjs";
+import { C as t, a as i, T as a, c as n, a4 as o } from "../index-DsiBIFwo.js";
 import { Component as c, MousePointerClick as r, FileText as l, Wrench as d, Zap as m, Info as p } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{NestedRoutesSection-uykhv0dq.js → documentation/NestedRoutesSection-ekOYspAL.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-Cj89iBVR.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(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Nested Routes & Dropdown Menus",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Create hierarchical navigation with unlimited nesting levels. Each menu item can have dropdown sub-items that appear in the sidebar navigation."}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Nested Routes Example"}),e.jsx(s.CodeBlock,{language:"tsx",code:`const menuItems = [
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-D874Kozv.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(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Nested Routes & Dropdown Menus",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Create hierarchical navigation with unlimited nesting levels. Each menu item can have dropdown sub-items that appear in the sidebar navigation."}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Nested Routes Example"}),e.jsx(s.CodeBlock,{language:"tsx",code:`const menuItems = [
   {
     name: 'Components',
     path: '/components',

package/documentation/NotificationCardSection-Db-RrZ16.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const e=require("../1-CArqgiQa.js"),o=()=>a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"NotificationCard"}),a.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A notification card component for displaying user activity notifications with avatar, action type, and timestamp."})]}),a.jsx(t.CardContainer,{className:"overflow-hidden",children:a.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-4",children:[a.jsxs(t.CardContainer,{className:"p-4",children:[a.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Followed Notification"}),a.jsx(t.NotificationCard,{type:"followed",actor:{name:"john_doe",avatar:e.avatar1Img},time:"2 hours ago",url:"/profile/john_doe",notifier:"you"})]}),a.jsxs(t.CardContainer,{className:"p-4",children:[a.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Liked Notification"}),a.jsx(t.NotificationCard,{type:"liked",actor:{name:"jane_smith",avatar:e.avatar1Img},time:"5 minutes ago",url:"/post/123",notifier:"your post"})]}),a.jsxs(t.CardContainer,{className:"p-4",children:[a.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Purchased Notification"}),a.jsx(t.NotificationCard,{type:"purchased",actor:{name:"alice_wonder",avatar:e.avatar1Img},time:"1 day ago",url:"/item/456",notifier:"your item"})]})]})})})}),a.jsx(t.PropPlayground,{componentName:"NotificationCard",defaultValues:{notifier:"CryptoKing",type:"liked",time:"2 hours ago",url:"#"},excludeProps:["actor"],children:i=>a.jsx(t.NotificationCard,{...i,actor:{name:"John Doe",avatar:"https://randomuser.me/api/portraits/men/1.jpg"}})}),a.jsx(t.AutoPropsTable,{componentName:"NotificationCard"}),a.jsx(t.CardContainer,{className:"overflow-hidden",children:a.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(t.CodeBlock,{language:"tsx",code:`import { NotificationCard } from '@e-burgos/tucu-ui';
+
+// Followed notification
+<NotificationCard
+  type="followed"
+  actor={{ name: 'john_doe', avatar: '/path/to/avatar.jpg' }}
+  time="2 hours ago"
+  url="/profile/john_doe"
+  notifier="you"
+/>
+
+// Liked notification
+<NotificationCard
+  type="liked"
+  actor={{ name: 'jane_smith', avatar: '/path/to/avatar.jpg' }}
+  time="5 minutes ago"
+  url="/post/123"
+  notifier="your post"
+/>
+
+// Purchased notification
+<NotificationCard
+  type="purchased"
+  actor={{ name: 'alice_wonder', avatar: '/path/to/avatar.jpg' }}
+  time="1 day ago"
+  url="/item/456"
+  notifier="your item"
+/>`})})})})]});exports.default=o;

package/documentation/NotificationCardSection-cE-g6SEH.js

@@ -0,0 +1,122 @@
+import { jsxs as t, Fragment as l, jsx as a } from "react/jsx-runtime";
+import { T as e, C as o, a as n, a5 as i, s, A as m, c as d } from "../index-DsiBIFwo.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+import { a as r } from "../1-Df9CGZha.js";
+const v = () => /* @__PURE__ */ t(l, { children: [
+  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ a(e, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "NotificationCard" }),
+    /* @__PURE__ */ a(
+      e,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A notification card component for displaying user activity notifications with avatar, action type, and timestamp."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ a(o, { className: "overflow-hidden", children: /* @__PURE__ */ a(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ t(o, { className: "p-4", children: [
+      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Followed Notification" }),
+      /* @__PURE__ */ a(
+        i,
+        {
+          type: "followed",
+          actor: { name: "john_doe", avatar: r },
+          time: "2 hours ago",
+          url: "/profile/john_doe",
+          notifier: "you"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(o, { className: "p-4", children: [
+      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Liked Notification" }),
+      /* @__PURE__ */ a(
+        i,
+        {
+          type: "liked",
+          actor: { name: "jane_smith", avatar: r },
+          time: "5 minutes ago",
+          url: "/post/123",
+          notifier: "your post"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(o, { className: "p-4", children: [
+      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Purchased Notification" }),
+      /* @__PURE__ */ a(
+        i,
+        {
+          type: "purchased",
+          actor: { name: "alice_wonder", avatar: r },
+          time: "1 day ago",
+          url: "/item/456",
+          notifier: "your item"
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ a(
+    s,
+    {
+      componentName: "NotificationCard",
+      defaultValues: {
+        notifier: "CryptoKing",
+        type: "liked",
+        time: "2 hours ago",
+        url: "#"
+      },
+      excludeProps: ["actor"],
+      children: (c) => /* @__PURE__ */ a(
+        i,
+        {
+          ...c,
+          actor: {
+            name: "John Doe",
+            avatar: "https://randomuser.me/api/portraits/men/1.jpg"
+          }
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ a(m, { componentName: "NotificationCard" }),
+  /* @__PURE__ */ a(o, { className: "overflow-hidden", children: /* @__PURE__ */ a(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    d,
+    {
+      language: "tsx",
+      code: `import { NotificationCard } from '@e-burgos/tucu-ui';
+
+// Followed notification
+<NotificationCard
+  type="followed"
+  actor={{ name: 'john_doe', avatar: '/path/to/avatar.jpg' }}
+  time="2 hours ago"
+  url="/profile/john_doe"
+  notifier="you"
+/>
+
+// Liked notification
+<NotificationCard
+  type="liked"
+  actor={{ name: 'jane_smith', avatar: '/path/to/avatar.jpg' }}
+  time="5 minutes ago"
+  url="/post/123"
+  notifier="your post"
+/>
+
+// Purchased notification
+<NotificationCard
+  type="purchased"
+  actor={{ name: 'alice_wonder', avatar: '/path/to/avatar.jpg' }}
+  time="1 day ago"
+  url="/item/456"
+  notifier="your item"
+/>`
+    }
+  ) }) }) })
+] });
+export {
+  v as default
+};

package/documentation/PanelActionCardSection-Bjxx99WR.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"PanelActionCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A panel card component with a scrollable content area and action buttons at the bottom."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Panel with Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Title",actions:[{label:"Cancel",variant:"ghost",onClick:()=>console.log("Cancel")},{label:"Save",variant:"solid",color:"primary",onClick:()=>console.log("Save")}],children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Content line 1"}),e.jsx(a.Typography,{tag:"p",children:"Content line 2"}),e.jsx(a.Typography,{tag:"p",children:"Content line 3"})]})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Without Actions",children:e.jsx("div",{className:"space-y-2",children:e.jsx(a.Typography,{tag:"p",children:"This panel has no action buttons."})})})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"PanelActionCard",defaultValues:{title:"Panel Title"},excludeProps:["actions"],children:n=>e.jsx(a.PanelActionCard,{...n,actions:[{label:"Action",onClick:()=>{}}]})}),e.jsx(a.AutoPropsTable,{componentName:"PanelActionCard"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { PanelActionCard, Typography } from '@e-burgos/tucu-ui';
+
+// With actions
+<PanelActionCard
+  title="Panel Title"
+  actions={[
+    {
+      label: 'Cancel',
+      variant: 'ghost',
+      onClick: () => handleCancel(),
+    },
+    {
+      label: 'Save',
+      variant: 'solid',
+      color: 'primary',
+      onClick: () => handleSave(),
+    },
+  ]}
+>
+  <div className="space-y-2">
+    <Typography tag="p">Content here</Typography>
+  </div>
+</PanelActionCard>
+
+// Without actions
+<PanelActionCard title="Panel Title">
+  <Typography tag="p">Content without actions</Typography>
+</PanelActionCard>`})})})})]});exports.default=t;