@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/NFTGridSection-BNFbcFZG.js

@@ -0,0 +1,160 @@
+import { jsxs as o, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { H as c, C as i, a as r, N as t, P as p, A as n, c as m } from "../index-19KsCnyX.js";
+import { Grid3x3 as l } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const T = () => /* @__PURE__ */ o(s, { children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      title: "NFTGrid",
+      description: "Grid card component for displaying NFT items with author information, image, collection, and price.",
+      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-cyan-500 via-blue-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50", 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__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Grid Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5", children: [
+    /* @__PURE__ */ e(
+      t,
+      {
+        author: "CryptoPunk",
+        authorImage: "https://i.pravatar.cc/80?img=1",
+        image: "https://picsum.photos/seed/nft1/400/300",
+        name: "CryptoPunk #1234",
+        collection: "Crypto Punks",
+        price: "45 ETH"
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        author: "BoredApe",
+        authorImage: "https://i.pravatar.cc/80?img=12",
+        image: "https://picsum.photos/seed/nft2/400/300",
+        name: "Bored Ape #8821",
+        collection: "BAYC",
+        price: "72 ETH"
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        author: "Azuki",
+        authorImage: "https://i.pravatar.cc/80?img=25",
+        image: "https://picsum.photos/seed/nft3/400/300",
+        name: "Azuki #5501",
+        collection: "Azuki",
+        price: "18.5 ETH"
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        author: "Doodles",
+        authorImage: "https://i.pravatar.cc/80?img=33",
+        image: "https://picsum.photos/seed/nft4/400/300",
+        name: "Doodle #3120",
+        collection: "Doodles",
+        price: "8.2 ETH"
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        author: "CloneX",
+        authorImage: "https://i.pravatar.cc/80?img=44",
+        image: "https://picsum.photos/seed/nft5/400/300",
+        name: "CloneX #12882",
+        collection: "CloneX",
+        price: "5.8 ETH"
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        author: "Moonbird",
+        authorImage: "https://i.pravatar.cc/80?img=56",
+        image: "https://picsum.photos/seed/nft6/400/300",
+        name: "Moonbird #7744",
+        collection: "Moonbirds",
+        price: "12 ETH",
+        profilePath: "/profile/moonbird"
+      }
+    )
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    p,
+    {
+      componentName: "NFTGrid",
+      defaultValues: {
+        author: "CryptoPunk",
+        authorImage: "https://i.pravatar.cc/80?img=1",
+        image: "https://picsum.photos/seed/nft1/400/300",
+        name: "CryptoPunk #1234",
+        collection: "Crypto Punks",
+        price: "45 ETH",
+        profilePath: ""
+      },
+      controlOverrides: [
+        {
+          name: "author",
+          type: "text",
+          description: "NFT author name"
+        },
+        {
+          name: "name",
+          type: "text",
+          description: "NFT item name"
+        },
+        {
+          name: "collection",
+          type: "text",
+          description: "Collection name"
+        },
+        {
+          name: "price",
+          type: "text",
+          description: "Price display text"
+        }
+      ],
+      includeProps: ["author", "name", "collection", "price", "profilePath"],
+      children: (a) => /* @__PURE__ */ e("div", { className: "w-full max-w-xs", children: /* @__PURE__ */ e(
+        t,
+        {
+          ...a,
+          authorImage: "https://i.pravatar.cc/80?img=1",
+          image: "https://picsum.photos/seed/nft1/400/300"
+        }
+      ) })
+    }
+  ),
+  /* @__PURE__ */ e(n, { componentName: "NFTGrid" }),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    m,
+    {
+      language: "tsx",
+      code: `import { NFTGrid } from '@e-burgos/tucu-ui';
+
+// Single card
+<NFTGrid
+  author="CryptoPunk"
+  authorImage="/avatars/cryptopunk.jpg"
+  image="/nfts/punk-1234.jpg"
+  name="CryptoPunk #1234"
+  collection="Crypto Punks"
+  price="45 ETH"
+  profilePath="/profile/cryptopunk"
+/>
+
+// Grid layout
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+  <NFTGrid {...nft1} />
+  <NFTGrid {...nft2} />
+  <NFTGrid {...nft3} />
+</div>`
+    }
+  ) }) }) })
+] });
+export {
+  T as default
+};

package/documentation/NFTGridSection-Wl711fIz.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"NFTGrid",description:"Grid card component for displaying NFT items with author information, image, collection, and price.",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-500 via-blue-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50",children:e.jsx(i.Grid3x3,{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(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Grid Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5",children:[e.jsx(t.NFTGrid,{author:"CryptoPunk",authorImage:"https://i.pravatar.cc/80?img=1",image:"https://picsum.photos/seed/nft1/400/300",name:"CryptoPunk #1234",collection:"Crypto Punks",price:"45 ETH"}),e.jsx(t.NFTGrid,{author:"BoredApe",authorImage:"https://i.pravatar.cc/80?img=12",image:"https://picsum.photos/seed/nft2/400/300",name:"Bored Ape #8821",collection:"BAYC",price:"72 ETH"}),e.jsx(t.NFTGrid,{author:"Azuki",authorImage:"https://i.pravatar.cc/80?img=25",image:"https://picsum.photos/seed/nft3/400/300",name:"Azuki #5501",collection:"Azuki",price:"18.5 ETH"}),e.jsx(t.NFTGrid,{author:"Doodles",authorImage:"https://i.pravatar.cc/80?img=33",image:"https://picsum.photos/seed/nft4/400/300",name:"Doodle #3120",collection:"Doodles",price:"8.2 ETH"}),e.jsx(t.NFTGrid,{author:"CloneX",authorImage:"https://i.pravatar.cc/80?img=44",image:"https://picsum.photos/seed/nft5/400/300",name:"CloneX #12882",collection:"CloneX",price:"5.8 ETH"}),e.jsx(t.NFTGrid,{author:"Moonbird",authorImage:"https://i.pravatar.cc/80?img=56",image:"https://picsum.photos/seed/nft6/400/300",name:"Moonbird #7744",collection:"Moonbirds",price:"12 ETH",profilePath:"/profile/moonbird"})]})})})}),e.jsx(t.PropPlayground,{componentName:"NFTGrid",defaultValues:{author:"CryptoPunk",authorImage:"https://i.pravatar.cc/80?img=1",image:"https://picsum.photos/seed/nft1/400/300",name:"CryptoPunk #1234",collection:"Crypto Punks",price:"45 ETH",profilePath:""},controlOverrides:[{name:"author",type:"text",description:"NFT author name"},{name:"name",type:"text",description:"NFT item name"},{name:"collection",type:"text",description:"Collection name"},{name:"price",type:"text",description:"Price display text"}],includeProps:["author","name","collection","price","profilePath"],children:r=>e.jsx("div",{className:"w-full max-w-xs",children:e.jsx(t.NFTGrid,{...r,authorImage:"https://i.pravatar.cc/80?img=1",image:"https://picsum.photos/seed/nft1/400/300"})})}),e.jsx(t.AutoPropsTable,{componentName:"NFTGrid"}),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 { NFTGrid } from '@e-burgos/tucu-ui';
+
+// Single card
+<NFTGrid
+  author="CryptoPunk"
+  authorImage="/avatars/cryptopunk.jpg"
+  image="/nfts/punk-1234.jpg"
+  name="CryptoPunk #1234"
+  collection="Crypto Punks"
+  price="45 ETH"
+  profilePath="/profile/cryptopunk"
+/>
+
+// Grid layout
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+  <NFTGrid {...nft1} />
+  <NFTGrid {...nft2} />
+  <NFTGrid {...nft3} />
+</div>`})})})})]});exports.default=o;

package/documentation/NestedRoutesSection-D8PkxU8h.js

@@ -0,0 +1,120 @@
+import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { H as o, T as a, C as s, a as i, c as r, aj as d } from "../index-19KsCnyX.js";
+import { Layers3 as c, Component as l, MousePointerClick as m, FileText as h, Wrench as p, Zap as u, Info as g } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => /* @__PURE__ */ t(n, { children: [
+  /* @__PURE__ */ e(
+    o,
+    {
+      title: "Nested Routes",
+      description: "Create hierarchical navigation with unlimited nesting levels. Each menu item supports dropdownItems that automatically render as sidebar dropdown menus.",
+      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(c, { 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: "Nested Routes Example" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Parent routes with dropdownItems generate hierarchical navigation"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { title: "Configuration", children: /* @__PURE__ */ e(r, { language: "tsx", code: `import { ThemeProvider, StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';
+
+const menuItems: StandaloneAppRoutesMenuItem[] = [
+  {
+    name: 'Components',
+    path: '/components',
+    icon: <LucideIcons.Component />,
+    component: <ComponentsPage />,
+    enableNestedRoutes: true, // Adds /* to path for nested routing
+    dropdownItems: [
+      {
+        name: 'Buttons',
+        path: '/components/buttons',
+        icon: <LucideIcons.MousePointerClick />,
+        component: <ButtonsPage />,
+      },
+      {
+        name: 'Forms',
+        path: '/components/forms',
+        icon: <LucideIcons.FileText />,
+        component: <FormsPage />,
+      },
+    ],
+  },
+  {
+    name: 'Utilities',
+    path: '/utilities',
+    icon: <LucideIcons.Wrench />,
+    component: <UtilitiesPage />,
+    dropdownItems: [
+      {
+        name: 'Hooks',
+        path: '/utilities/hooks',
+        icon: <LucideIcons.Zap />,
+        component: <HooksPage />,
+      },
+    ],
+  },
+];` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Navigation Structure" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Visual representation of the generated sidebar"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t("div", { className: "space-y-3 p-4", children: [
+      /* @__PURE__ */ t("div", { className: "p-3 bg-light-dark rounded-lg", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-2", children: [
+          /* @__PURE__ */ e("div", { className: "p-1.5 rounded bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-3 h-3 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e("span", { className: "font-medium", children: "Components" })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "ml-6 space-y-1", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
+            /* @__PURE__ */ e(m, { className: "w-3 h-3" }),
+            "Buttons"
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
+            /* @__PURE__ */ e(h, { className: "w-3 h-3" }),
+            "Forms"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "p-3 bg-light-dark rounded-lg", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-2", children: [
+          /* @__PURE__ */ e("div", { className: "p-1.5 rounded bg-linear-to-br from-purple-500 to-indigo-500 shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-3 h-3 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e("span", { className: "font-medium", children: "Utilities" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "ml-6 space-y-1", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
+          /* @__PURE__ */ e(u, { className: "w-3 h-3" }),
+          "Hooks"
+        ] }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(d, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+      /* @__PURE__ */ e(g, { className: "w-4 h-4 inline mr-2" }),
+      "Use",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "enableNestedRoutes: true" }),
+      " ",
+      "on parent routes when child components need their own internal routing (e.g., tabs, sub-pages)."
+    ] }) })
+  ] })
+] });
+export {
+  C as default
+};

package/documentation/NestedRoutesSection-wmlrMDJq.js

@@ -0,0 +1,39 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Nested Routes",description:"Create hierarchical navigation with unlimited nesting levels. Each menu item supports dropdownItems that automatically render as sidebar dropdown menus.",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(t.Layers3,{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:"Nested Routes Example"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Parent routes with dropdownItems generate hierarchical navigation"})]}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Configuration",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { ThemeProvider, StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';
+
+const menuItems: StandaloneAppRoutesMenuItem[] = [
+  {
+    name: 'Components',
+    path: '/components',
+    icon: <LucideIcons.Component />,
+    component: <ComponentsPage />,
+    enableNestedRoutes: true, // Adds /* to path for nested routing
+    dropdownItems: [
+      {
+        name: 'Buttons',
+        path: '/components/buttons',
+        icon: <LucideIcons.MousePointerClick />,
+        component: <ButtonsPage />,
+      },
+      {
+        name: 'Forms',
+        path: '/components/forms',
+        icon: <LucideIcons.FileText />,
+        component: <FormsPage />,
+      },
+    ],
+  },
+  {
+    name: 'Utilities',
+    path: '/utilities',
+    icon: <LucideIcons.Wrench />,
+    component: <UtilitiesPage />,
+    dropdownItems: [
+      {
+        name: 'Hooks',
+        path: '/utilities/hooks',
+        icon: <LucideIcons.Zap />,
+        component: <HooksPage />,
+      },
+    ],
+  },
+];`})})})]}),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:"Navigation Structure"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Visual representation of the generated sidebar"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"space-y-3 p-4",children:[e.jsxs("div",{className:"p-3 bg-light-dark rounded-lg",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx("div",{className:"p-1.5 rounded bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(t.Component,{className:"w-3 h-3 text-white filter drop-shadow-sm"})}),e.jsx("span",{className:"font-medium",children:"Components"})]}),e.jsxs("div",{className:"ml-6 space-y-1",children:[e.jsxs("div",{className:"flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400",children:[e.jsx(t.MousePointerClick,{className:"w-3 h-3"}),"Buttons"]}),e.jsxs("div",{className:"flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400",children:[e.jsx(t.FileText,{className:"w-3 h-3"}),"Forms"]})]})]}),e.jsxs("div",{className:"p-3 bg-light-dark rounded-lg",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx("div",{className:"p-1.5 rounded bg-linear-to-br from-purple-500 to-indigo-500 shadow-lg",children:e.jsx(t.Wrench,{className:"w-3 h-3 text-white filter drop-shadow-sm"})}),e.jsx("span",{className:"font-medium",children:"Utilities"})]}),e.jsx("div",{className:"ml-6 space-y-1",children:e.jsxs("div",{className:"flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400",children:[e.jsx(t.Zap,{className:"w-3 h-3"}),"Hooks"]})})]})]})}),e.jsx(s.Alert,{variant:"info",dismissible:!1,children:e.jsxs(s.Typography,{tag:"p",className:"text-sm",children:[e.jsx(t.Info,{className:"w-4 h-4 inline mr-2"}),"Use"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"enableNestedRoutes: true"})," ","on parent routes when child components need their own internal routing (e.g., tabs, sub-pages)."]})})]})]});exports.default=a;

package/documentation/NotificationCardSection-CbQt_XUN.js

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-DMs_SmPq.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=require("../1-CArqgiQa.js"),r=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"NotificationCard",description:`A notification card component for displaying user activity
+          notifications with avatar, action type, and timestamp.`,icon:a.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-orange-500 to-red-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(o.Bell,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.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(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Followed Notification"}),a.jsx(e.NotificationCard,{type:"followed",actor:{name:"john_doe",avatar:t.avatar1Img},time:"2 hours ago",url:"/profile/john_doe",notifier:"you"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Liked Notification"}),a.jsx(e.NotificationCard,{type:"liked",actor:{name:"jane_smith",avatar:t.avatar1Img},time:"5 minutes ago",url:"/post/123",notifier:"your post"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Purchased Notification"}),a.jsx(e.NotificationCard,{type:"purchased",actor:{name:"alice_wonder",avatar:t.avatar1Img},time:"1 day ago",url:"/item/456",notifier:"your item"})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"NotificationCard",defaultValues:{notifier:"CryptoKing",type:"liked",time:"2 hours ago",url:"#"},excludeProps:["actor"],children:i=>a.jsx(e.NotificationCard,{...i,actor:{name:"John Doe",avatar:"https://randomuser.me/api/portraits/men/1.jpg"}})}),a.jsx(e.AutoPropsTable,{componentName:"NotificationCard"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.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=r;

package/documentation/{NotificationCardSection-B5CPgG4B.js → NotificationCardSection-Dd1DGkKw.js}

@@ -1,27 +1,25 @@
 import { jsxs as t, Fragment as l, jsx as a } from "react/jsx-runtime";
-import { T as e, C as o, a as n, ah as i, P as s, A as m, c as d } from "../index-D3gBsvbO.js";
-import "lucide-react";
+import { H as m, C as o, a as n, T as i, ak as e, P as c, A as d, c as p } from "../index-19KsCnyX.js";
+import { Bell as h } from "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."
-      }
-    )
-  ] }),
+const C = () => /* @__PURE__ */ t(l, { children: [
+  /* @__PURE__ */ a(
+    m,
+    {
+      title: "NotificationCard",
+      description: `A notification card component for displaying user activity
+          notifications with avatar, action type, and timestamp.`,
+      icon: /* @__PURE__ */ a("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-orange-500 to-red-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(h, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
   /* @__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, { tag: "h5", className: "mb-3", children: "Followed Notification" }),
       /* @__PURE__ */ a(
-        i,
+        e,
         {
           type: "followed",
           actor: { name: "john_doe", avatar: r },
@@ -32,9 +30,9 @@ const v = () => /* @__PURE__ */ t(l, { children: [
       )
     ] }),
     /* @__PURE__ */ t(o, { className: "p-4", children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Liked Notification" }),
+      /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Liked Notification" }),
       /* @__PURE__ */ a(
-        i,
+        e,
         {
           type: "liked",
           actor: { name: "jane_smith", avatar: r },
@@ -45,9 +43,9 @@ const v = () => /* @__PURE__ */ t(l, { children: [
       )
     ] }),
     /* @__PURE__ */ t(o, { className: "p-4", children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Purchased Notification" }),
+      /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Purchased Notification" }),
       /* @__PURE__ */ a(
-        i,
+        e,
         {
           type: "purchased",
           actor: { name: "alice_wonder", avatar: r },
@@ -59,7 +57,7 @@ const v = () => /* @__PURE__ */ t(l, { children: [
     ] })
   ] }) }) }) }),
   /* @__PURE__ */ a(
-    s,
+    c,
     {
       componentName: "NotificationCard",
       defaultValues: {
@@ -69,10 +67,10 @@ const v = () => /* @__PURE__ */ t(l, { children: [
         url: "#"
       },
       excludeProps: ["actor"],
-      children: (c) => /* @__PURE__ */ a(
-        i,
+      children: (s) => /* @__PURE__ */ a(
+        e,
         {
-          ...c,
+          ...s,
           actor: {
             name: "John Doe",
             avatar: "https://randomuser.me/api/portraits/men/1.jpg"
@@ -81,9 +79,9 @@ const v = () => /* @__PURE__ */ t(l, { children: [
       )
     }
   ),
-  /* @__PURE__ */ a(m, { componentName: "NotificationCard" }),
+  /* @__PURE__ */ a(d, { 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,
+    p,
     {
       language: "tsx",
       code: `import { NotificationCard } from '@e-burgos/tucu-ui';
@@ -118,5 +116,5 @@ const v = () => /* @__PURE__ */ t(l, { children: [
   ) }) }) })
 ] });
 export {
-  v as default
+  C as default
 };

package/documentation/PaginationSection-BUPepKIu.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("../index-DMs_SmPq.js"),c=require("lucide-react");require("react-router-dom");require("react-dom");const d=()=>{const[s,i]=t.useState(1),[n,o]=t.useState(5),[r,g]=t.useState(1);return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Pagination",description:`A pagination component with page number buttons, ellipsis for large
+          ranges, and previous/next navigation.`,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-emerald-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(c.ArrowLeftRight,{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(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-8",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Few Pages"}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Page ",s," of 5"]}),e.jsx(a.Pagination,{currentPage:s,totalPages:5,onPageChange:i})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Many Pages (with ellipsis)"}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Page ",n," of 20"]}),e.jsx(a.Pagination,{currentPage:n,totalPages:20,onPageChange:o})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Custom Window Size"}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Page ",r," of 50 (windowSize=3)"]}),e.jsx(a.Pagination,{currentPage:r,totalPages:50,onPageChange:g,windowSize:3})]})]})})}),e.jsx(a.PropPlayground,{componentName:"Pagination",title:"Pagination Playground",defaultValues:{currentPage:1,totalPages:10,windowSize:5},excludeProps:["onPageChange","className"],children:l=>e.jsx(a.Pagination,{...l,onPageChange:()=>{}})}),e.jsx(a.AutoPropsTable,{componentName:"Pagination"}),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 { Pagination } from '@e-burgos/tucu-ui';
+import { useState } from 'react';
+
+const [currentPage, setCurrentPage] = useState(1);
+
+<Pagination
+  currentPage={currentPage}
+  totalPages={20}
+  onPageChange={setCurrentPage}
+/>
+
+// With custom window size (more visible page numbers)
+<Pagination
+  currentPage={currentPage}
+  totalPages={50}
+  onPageChange={setCurrentPage}
+  windowSize={3}
+/>`})})})})]})};exports.default=d;

package/documentation/{PaginationSection-30WC5ZN7.js → PaginationSection-lSE7L18v.js}

@@ -1,25 +1,23 @@
-import { jsxs as a, Fragment as p, jsx as e } from "react/jsx-runtime";
-import { useState as n } from "react";
-import { T as t, C as s, a as l, a0 as r, A as P, c as h } from "../index-D3gBsvbO.js";
-import "lucide-react";
+import { jsxs as a, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { H as p, C as n, a as l, T as t, a1 as r, P as u, A as w, c as f } from "../index-19KsCnyX.js";
+import { ArrowLeftRight as N } from "lucide-react";
 import "react-router-dom";
 import "react-dom";
-const C = () => {
-  const [i, c] = n(1), [o, m] = n(5), [g, d] = n(1);
-  return /* @__PURE__ */ a(p, { children: [
-    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Pagination" }),
-      /* @__PURE__ */ e(
-        t,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "A pagination component with page number buttons, ellipsis for large ranges, and previous/next navigation."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6 space-y-8", children: [
-      /* @__PURE__ */ a(s, { className: "p-4", children: [
+const z = () => {
+  const [o, m] = s(1), [i, c] = s(5), [g, d] = s(1);
+  return /* @__PURE__ */ a(h, { children: [
+    /* @__PURE__ */ e(
+      p,
+      {
+        title: "Pagination",
+        description: `A pagination component with page number buttons, ellipsis for large
+          ranges, and previous/next navigation.`,
+        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-emerald-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(N, { 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(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6 space-y-8", children: [
+      /* @__PURE__ */ a(n, { className: "p-4", children: [
         /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Few Pages" }),
         /* @__PURE__ */ a(
           t,
@@ -28,7 +26,7 @@ const C = () => {
             className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
             children: [
               "Page ",
-              i,
+              o,
               " of 5"
             ]
           }
@@ -36,13 +34,13 @@ const C = () => {
         /* @__PURE__ */ e(
           r,
           {
-            currentPage: i,
+            currentPage: o,
             totalPages: 5,
-            onPageChange: c
+            onPageChange: m
           }
         )
       ] }),
-      /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ a(n, { className: "p-4", children: [
         /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Many Pages (with ellipsis)" }),
         /* @__PURE__ */ a(
           t,
@@ -51,7 +49,7 @@ const C = () => {
             className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
             children: [
               "Page ",
-              o,
+              i,
               " of 20"
             ]
           }
@@ -59,13 +57,13 @@ const C = () => {
         /* @__PURE__ */ e(
           r,
           {
-            currentPage: o,
+            currentPage: i,
             totalPages: 20,
-            onPageChange: m
+            onPageChange: c
           }
         )
       ] }),
-      /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ a(n, { className: "p-4", children: [
         /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Window Size" }),
         /* @__PURE__ */ a(
           t,
@@ -90,9 +88,24 @@ const C = () => {
         )
       ] })
     ] }) }) }),
-    /* @__PURE__ */ e(P, { componentName: "Pagination" }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      h,
+    /* @__PURE__ */ e(
+      u,
+      {
+        componentName: "Pagination",
+        title: "Pagination Playground",
+        defaultValues: {
+          currentPage: 1,
+          totalPages: 10,
+          windowSize: 5
+        },
+        excludeProps: ["onPageChange", "className"],
+        children: (P) => /* @__PURE__ */ e(r, { ...P, onPageChange: () => {
+        } })
+      }
+    ),
+    /* @__PURE__ */ e(w, { componentName: "Pagination" }),
+    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      f,
       {
         language: "tsx",
         code: `import { Pagination } from '@e-burgos/tucu-ui';
@@ -118,5 +131,5 @@ const [currentPage, setCurrentPage] = useState(1);
   ] });
 };
 export {
-  C as default
+  z as default
 };