@e-burgos/tucu-ui 2.0.3 → 2.0.5

package/documentation/{ModalSection-BLJU61yb.js → ModalSection-B88ZyCk1.js}

@@ -1,16 +1,16 @@
-import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, Fragment as r, 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 { T as a, C as s, a as i, y as c, a2 as l, P as p, A as u, c as h } from "../index-kms4xY-n.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" }),
+const N = () => {
+  const [n, t] = m(!1);
+  return /* @__PURE__ */ o(r, { children: [
+    /* @__PURE__ */ o("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Modal" }),
       /* @__PURE__ */ e(
-        o,
+        a,
         {
           tag: "p",
           className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
@@ -18,15 +18,15 @@ const g = () => {
         }
       )
     ] }),
-    /* @__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, { 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__ */ o("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ o(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic Modal" }),
+        /* @__PURE__ */ e(c, { onClick: () => t(!0), children: "Open Modal" }),
         /* @__PURE__ */ e(
-          s,
+          l,
           {
-            isOpen: l,
-            setIsOpen: a,
+            isOpen: n,
+            setIsOpen: t,
             text: {
               title: "Modal Title",
               content: "This is the modal content.",
@@ -35,16 +35,16 @@ const g = () => {
           }
         )
       ] }),
-      /* @__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__ */ o(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Modal with Custom Content" }),
+        /* @__PURE__ */ e(c, { onClick: () => t(!0), children: "Open Custom Modal" }),
         /* @__PURE__ */ e(
-          s,
+          l,
           {
-            isOpen: l,
-            setIsOpen: a,
+            isOpen: n,
+            setIsOpen: t,
             text: { title: "Custom Modal" },
-            children: /* @__PURE__ */ e(o, { tag: "p", children: "Custom content goes here" })
+            children: /* @__PURE__ */ e(a, { tag: "p", children: "Custom content goes here" })
           }
         )
       ] })
@@ -53,23 +53,17 @@ const g = () => {
       p,
       {
         componentName: "Modal",
-        defaultValues: { isOpen: !0, closeable: !0, hideButtons: !1 },
-        excludeProps: [
-          "setIsOpen",
-          "onBack",
-          "onClose",
-          "onSubmit",
-          "buttonContainer",
-          "text",
-          "contentClassName",
-          "titleContainerClassName"
-        ],
-        children: (r) => /* @__PURE__ */ e(
-          s,
+        defaultValues: {
+          isOpen: n,
+          setIsOpen: t,
+          closeable: !0,
+          hideButtons: !1
+        },
+        excludeProps: ["setIsOpen", "onBack", "onClose", "onSubmit"],
+        children: (d) => /* @__PURE__ */ e(
+          l,
           {
-            ...r,
-            setIsOpen: () => {
-            },
+            ...d,
             text: {
               title: "Modal Preview",
               content: "This is a preview of the modal component."
@@ -80,7 +74,7 @@ const g = () => {
       }
     ),
     /* @__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(
+    /* @__PURE__ */ e(s, { 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",
@@ -118,5 +112,5 @@ function MyComponent() {
   ] });
 };
 export {
-  g as default
+  N as default
 };

package/documentation/{ModalSection-DgxQhNE3.js → ModalSection-_bluxlpe.js}

@@ -1,4 +1,4 @@
-"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';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("../index-DWDrAbog.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:n,setIsOpen:s,closeable:!0,hideButtons:!1},excludeProps:["setIsOpen","onBack","onClose","onSubmit"],children:o=>e.jsx(t.Modal,{...o,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() {

package/documentation/NFTGridSection-BBn-BSxV.js

@@ -0,0 +1,117 @@
+import { jsxs as a, Fragment as s, jsx as t } from "react/jsx-runtime";
+import { T as o, C as r, a as i, N as e, A as c, c as p } from "../index-kms4xY-n.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const u = () => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ t(o, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "NFTGrid" }),
+    /* @__PURE__ */ t(
+      o,
+      {
+        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__ */ t(r, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Grid Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5", children: [
+    /* @__PURE__ */ t(
+      e,
+      {
+        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__ */ t(
+      e,
+      {
+        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__ */ t(
+      e,
+      {
+        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__ */ t(
+      e,
+      {
+        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__ */ t(
+      e,
+      {
+        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__ */ t(
+      e,
+      {
+        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__ */ t(c, { componentName: "NFTGrid" }),
+  /* @__PURE__ */ t(r, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t(
+    p,
+    {
+      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 {
+  u as default
+};

package/documentation/NFTGridSection-DuqL8orZ.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-DWDrAbog.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(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:"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(r.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(r.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(r.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(r.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(r.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(r.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(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';
+
+// 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=t;

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

@@ -1,4 +1,4 @@
-"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 = [
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDrAbog.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/{NestedRoutesSection-DG9vKpBw.js → NestedRoutesSection-CNb6PpdJ.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-DsiBIFwo.js";
+import { C as t, a as i, T as a, c as n, ag as o } from "../index-kms4xY-n.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/documentation/{NotificationCardSection-cE-g6SEH.js → NotificationCardSection-Bhd6YH-F.js}

@@ -1,5 +1,5 @@
 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 { T as e, C as o, a as n, ah as i, P as s, A as m, c as d } from "../index-kms4xY-n.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{NotificationCardSection-Db-RrZ16.js → NotificationCardSection-Dr40YILh.js}

@@ -1,4 +1,4 @@
-"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';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("../index-DWDrAbog.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

package/documentation/PaginationSection-DZQzrh1r.js

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("../index-DWDrAbog.js");require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>{const[s,i]=t.useState(1),[r,o]=t.useState(5),[n,g]=t.useState(1);return 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:"Pagination"}),e.jsx(a.Typography,{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."})]}),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 ",r," of 20"]}),e.jsx(a.Pagination,{currentPage:r,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 ",n," of 50 (windowSize=3)"]}),e.jsx(a.Pagination,{currentPage:n,totalPages:50,onPageChange:g,windowSize:3})]})]})})}),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=l;

package/documentation/PaginationSection-DaeYPA4C.js

@@ -0,0 +1,122 @@
+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-kms4xY-n.js";
+import "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: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Few Pages" }),
+        /* @__PURE__ */ a(
+          t,
+          {
+            tag: "p",
+            className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+            children: [
+              "Page ",
+              i,
+              " of 5"
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            currentPage: i,
+            totalPages: 5,
+            onPageChange: c
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Many Pages (with ellipsis)" }),
+        /* @__PURE__ */ a(
+          t,
+          {
+            tag: "p",
+            className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+            children: [
+              "Page ",
+              o,
+              " of 20"
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            currentPage: o,
+            totalPages: 20,
+            onPageChange: m
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Window Size" }),
+        /* @__PURE__ */ a(
+          t,
+          {
+            tag: "p",
+            className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+            children: [
+              "Page ",
+              g,
+              " of 50 (windowSize=3)"
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            currentPage: g,
+            totalPages: 50,
+            onPageChange: d,
+            windowSize: 3
+          }
+        )
+      ] })
+    ] }) }) }),
+    /* @__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,
+      {
+        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}
+/>`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  C as default
+};

package/documentation/{PanelActionCardSection-CL8Moio7.js → PanelActionCardSection-Ie-VVm_6.js}

@@ -1,5 +1,5 @@
 import { jsxs as l, Fragment as c, jsx as a } from "react/jsx-runtime";
-import { T as e, C as t, a as i, v as n, s, A as r, c as d } from "../index-DsiBIFwo.js";
+import { T as e, C as t, a as i, M as n, P as r, A as s, c as d } from "../index-kms4xY-n.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
@@ -50,7 +50,7 @@ const u = () => /* @__PURE__ */ l(c, { children: [
     ] })
   ] }) }) }) }),
   /* @__PURE__ */ a(
-    s,
+    r,
     {
       componentName: "PanelActionCard",
       defaultValues: { title: "Panel Title" },
@@ -65,7 +65,7 @@ const u = () => /* @__PURE__ */ l(c, { children: [
       )
     }
   ),
-  /* @__PURE__ */ a(r, { componentName: "PanelActionCard" }),
+  /* @__PURE__ */ a(s, { componentName: "PanelActionCard" }),
   /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
     d,
     {

package/documentation/{PanelActionCardSection-Bjxx99WR.js → PanelActionCardSection-eVZpdoU4.js}

@@ -1,4 +1,4 @@
-"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';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDrAbog.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

package/documentation/{PanelCardSection-Ci9bDcSV.js → PanelCardSection-B4QTB7gx.js}

@@ -1,5 +1,5 @@
 import { jsxs as l, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { T as a, C as t, a as n, w as r, s as d, A as c, c as o } from "../index-DsiBIFwo.js";
+import { T as a, C as t, a as n, O as r, P as d, A as c, c as o } from "../index-kms4xY-n.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{PanelCardSection-wO7ZobnL.js → PanelCardSection-Bnvutn7v.js}

@@ -1,4 +1,4 @@
-"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:"PanelCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A simple panel card component with a title header and scrollable content area."})]}),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.jsx("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 Card"}),e.jsx(a.PanelCard,{title:"Panel Title",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.jsx(a.Typography,{tag:"p",children:"Content line 4"}),e.jsx(a.Typography,{tag:"p",children:"Content line 5"})]})})]})})})})}),e.jsx(a.PropPlayground,{componentName:"PanelCard",defaultValues:{title:"Panel Card"},children:l=>e.jsx(a.PanelCard,{...l,children:e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Panel content goes here"})})}),e.jsx(a.AutoPropsTable,{componentName:"PanelCard"}),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 { PanelCard, Typography } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDrAbog.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:"PanelCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A simple panel card component with a title header and scrollable content area."})]}),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.jsx("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 Card"}),e.jsx(a.PanelCard,{title:"Panel Title",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.jsx(a.Typography,{tag:"p",children:"Content line 4"}),e.jsx(a.Typography,{tag:"p",children:"Content line 5"})]})})]})})})})}),e.jsx(a.PropPlayground,{componentName:"PanelCard",defaultValues:{title:"Panel Card"},children:l=>e.jsx(a.PanelCard,{...l,children:e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Panel content goes here"})})}),e.jsx(a.AutoPropsTable,{componentName:"PanelCard"}),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 { PanelCard, Typography } from '@e-burgos/tucu-ui';
 
 // Basic usage
 <PanelCard title="Panel Title">

package/documentation/{ParamTabSection-DzCeT2jc.js → ParamTabSection-BboYSU6I.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
-import { T as a, C as i, a as l, ae as n, ac as s, A as b, c as g } from "../index-DsiBIFwo.js";
+import { T as a, C as i, a as l, aq as n, ao as s, A as b, c as g } from "../index-kms4xY-n.js";
 import { Home as o, BarChart as m, FileText as h, Settings as c, User as x, Bell as y } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{ParamTabSection-Bi80ttg5.js → ParamTabSection-Cxjr0T-p.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-D874Kozv.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const r=[{title:"Overview",path:"overview"},{title:"Details",path:"details"},{title:"Settings",path:"settings"}],i=[{title:"Dashboard",path:"dashboard",icon:e.jsx(t.Home,{size:16})},{title:"Analytics",path:"analytics",icon:e.jsx(t.BarChart,{size:16})},{title:"Reports",path:"reports",icon:e.jsx(t.FileText,{size:16})},{title:"Settings",path:"settings",icon:e.jsx(t.Settings,{size:16})}],n=[{title:"Profile",path:"profile",icon:e.jsx(t.User,{size:16})},{title:"Notifications",path:"notifications",icon:e.jsx(t.Bell,{size:16})},{title:"Settings",path:"settings",icon:e.jsx(t.Settings,{size:16})}],l=[{prop:"title",type:"React.ReactNode",default:"required",description:"Tab label (can be text, JSX, or components)"},{prop:"path",type:"string",default:"required",description:'Unique path for URL parameter (e.g., "overview")'},{prop:"icon",type:"React.ReactNode",default:"-",description:"Optional icon to display before tab label"}];return 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:"ParamTab"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A powerful tab component that automatically syncs with URL query parameters and switches to a dropdown selector on mobile devices for optimal responsive behavior."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Underline Variant (Default)"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Classic underline style with animated indicator. URL syncs with ?view=overview, ?view=details, etc."}),e.jsxs(a.ParamTab,{tabMenu:r,variant:"underline",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Overview Dashboard"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Main dashboard content with key metrics and overview information. The URL parameter updates to ?view=overview when this tab is active."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Detailed Information"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Comprehensive details and in-depth analysis. URL parameter: ?view=details"})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Configuration Settings"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your preferences and application settings. URL parameter: ?view=settings"})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Pills Variant with Icons"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Modern rounded pills with icon support for enhanced visual clarity."}),e.jsxs(a.ParamTab,{tabMenu:i,variant:"pills",size:"medium",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.Home,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Dashboard Home"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Welcome to your dashboard! Here you'll find a summary of your most important information."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.BarChart,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Analytics Overview"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Track your performance with detailed analytics and insights."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.FileText,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Reports Center"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Generate and view comprehensive reports for your data."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.Settings,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Application Settings"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Customize your application preferences and configuration."})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Bordered Variant"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Distinct bordered style with highlighted selection state."}),e.jsxs(a.ParamTab,{tabMenu:n,variant:"bordered",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"User Profile"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your personal information and profile settings."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Notifications"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Configure how and when you receive notifications."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Account Settings"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your account security and privacy settings."})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid Variant (Small Size)"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Compact solid background style perfect for space-constrained layouts."}),e.jsxs(a.ParamTab,{tabMenu:r,variant:"solid",size:"small",children:[e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Compact overview content with small tab size."})})}),e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Detailed information in a compact format."})})}),e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Settings panel with space-efficient design."})})})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Key Features",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"link",children:"🔗"})," ","URL Synchronization"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically syncs tab state with URL query parameters (e.g., ?view=overview). This enables:"}),e.jsxs("ul",{className:"list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1 ml-4",children:[e.jsx("li",{children:"Deep linking to specific tabs"}),e.jsx("li",{children:"Browser back/forward navigation"}),e.jsx("li",{children:"Shareable URLs with selected tab state"}),e.jsx("li",{children:"Bookmark support for specific views"})]})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"mobile",children:"📱"})," ","Responsive Mobile Adaptation"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically switches to TabSelect dropdown on mobile devices (xs, sm breakpoints) for optimal space usage and better UX."}),e.jsx(a.CardContainer,{className:"p-4 bg-blue-50 dark:bg-blue-900/20",children:e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:[e.jsx("span",{role:"img","aria-label":"tip",children:"💡"})," ",e.jsx("span",{className:"font-semibold",children:"Tip:"})," Resize your browser window to see the automatic switch between tab bar and dropdown selector!"]})})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"styles",children:"🎨"})," ","Multiple Style Variants"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Choose from 4 distinct visual styles (underline, pills, bordered, solid) and 3 sizes (small, medium, large) to match your design system."})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"icons",children:"✨"})," ","Icon Support"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Add icons to tabs for better visual communication and improved scannability. Works seamlessly with Lucide Icons."})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"TabMenuItem Interface",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("table",{className:"w-full text-sm text-left",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-gray-200 dark:border-gray-700",children:[e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Prop"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Type"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Default"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Description"})]})}),e.jsx("tbody",{children:l.map(s=>e.jsxs("tr",{className:"border-b border-gray-100 dark:border-gray-800",children:[e.jsx("td",{className:"px-3 py-2",children:e.jsx("code",{className:"text-xs text-brand",children:s.prop})}),e.jsx("td",{className:"px-3 py-2",children:e.jsx("code",{className:"text-xs",children:s.type})}),e.jsx("td",{className:"px-3 py-2",children:s.default==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:s.default})}),e.jsx("td",{className:"px-3 py-2 text-gray-600 dark:text-gray-400",children:s.description})]},s.prop))})]})})})}),e.jsx(a.AutoPropsTable,{componentName:"ParamTab"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Examples",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 { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDrAbog.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const r=[{title:"Overview",path:"overview"},{title:"Details",path:"details"},{title:"Settings",path:"settings"}],i=[{title:"Dashboard",path:"dashboard",icon:e.jsx(t.Home,{size:16})},{title:"Analytics",path:"analytics",icon:e.jsx(t.BarChart,{size:16})},{title:"Reports",path:"reports",icon:e.jsx(t.FileText,{size:16})},{title:"Settings",path:"settings",icon:e.jsx(t.Settings,{size:16})}],n=[{title:"Profile",path:"profile",icon:e.jsx(t.User,{size:16})},{title:"Notifications",path:"notifications",icon:e.jsx(t.Bell,{size:16})},{title:"Settings",path:"settings",icon:e.jsx(t.Settings,{size:16})}],l=[{prop:"title",type:"React.ReactNode",default:"required",description:"Tab label (can be text, JSX, or components)"},{prop:"path",type:"string",default:"required",description:'Unique path for URL parameter (e.g., "overview")'},{prop:"icon",type:"React.ReactNode",default:"-",description:"Optional icon to display before tab label"}];return 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:"ParamTab"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A powerful tab component that automatically syncs with URL query parameters and switches to a dropdown selector on mobile devices for optimal responsive behavior."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Underline Variant (Default)"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Classic underline style with animated indicator. URL syncs with ?view=overview, ?view=details, etc."}),e.jsxs(a.ParamTab,{tabMenu:r,variant:"underline",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Overview Dashboard"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Main dashboard content with key metrics and overview information. The URL parameter updates to ?view=overview when this tab is active."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Detailed Information"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Comprehensive details and in-depth analysis. URL parameter: ?view=details"})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Configuration Settings"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your preferences and application settings. URL parameter: ?view=settings"})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Pills Variant with Icons"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Modern rounded pills with icon support for enhanced visual clarity."}),e.jsxs(a.ParamTab,{tabMenu:i,variant:"pills",size:"medium",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.Home,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Dashboard Home"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Welcome to your dashboard! Here you'll find a summary of your most important information."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.BarChart,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Analytics Overview"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Track your performance with detailed analytics and insights."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.FileText,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Reports Center"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Generate and view comprehensive reports for your data."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.Settings,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Application Settings"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Customize your application preferences and configuration."})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Bordered Variant"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Distinct bordered style with highlighted selection state."}),e.jsxs(a.ParamTab,{tabMenu:n,variant:"bordered",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"User Profile"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your personal information and profile settings."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Notifications"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Configure how and when you receive notifications."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Account Settings"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your account security and privacy settings."})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid Variant (Small Size)"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Compact solid background style perfect for space-constrained layouts."}),e.jsxs(a.ParamTab,{tabMenu:r,variant:"solid",size:"small",children:[e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Compact overview content with small tab size."})})}),e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Detailed information in a compact format."})})}),e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Settings panel with space-efficient design."})})})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Key Features",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"link",children:"🔗"})," ","URL Synchronization"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically syncs tab state with URL query parameters (e.g., ?view=overview). This enables:"}),e.jsxs("ul",{className:"list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1 ml-4",children:[e.jsx("li",{children:"Deep linking to specific tabs"}),e.jsx("li",{children:"Browser back/forward navigation"}),e.jsx("li",{children:"Shareable URLs with selected tab state"}),e.jsx("li",{children:"Bookmark support for specific views"})]})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"mobile",children:"📱"})," ","Responsive Mobile Adaptation"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically switches to TabSelect dropdown on mobile devices (xs, sm breakpoints) for optimal space usage and better UX."}),e.jsx(a.CardContainer,{className:"p-4 bg-blue-50 dark:bg-blue-900/20",children:e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:[e.jsx("span",{role:"img","aria-label":"tip",children:"💡"})," ",e.jsx("span",{className:"font-semibold",children:"Tip:"})," Resize your browser window to see the automatic switch between tab bar and dropdown selector!"]})})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"styles",children:"🎨"})," ","Multiple Style Variants"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Choose from 4 distinct visual styles (underline, pills, bordered, solid) and 3 sizes (small, medium, large) to match your design system."})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"icons",children:"✨"})," ","Icon Support"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Add icons to tabs for better visual communication and improved scannability. Works seamlessly with Lucide Icons."})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"TabMenuItem Interface",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("table",{className:"w-full text-sm text-left",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-gray-200 dark:border-gray-700",children:[e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Prop"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Type"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Default"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Description"})]})}),e.jsx("tbody",{children:l.map(s=>e.jsxs("tr",{className:"border-b border-gray-100 dark:border-gray-800",children:[e.jsx("td",{className:"px-3 py-2",children:e.jsx("code",{className:"text-xs text-brand",children:s.prop})}),e.jsx("td",{className:"px-3 py-2",children:e.jsx("code",{className:"text-xs",children:s.type})}),e.jsx("td",{className:"px-3 py-2",children:s.default==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:s.default})}),e.jsx("td",{className:"px-3 py-2 text-gray-600 dark:text-gray-400",children:s.description})]},s.prop))})]})})})}),e.jsx(a.AutoPropsTable,{componentName:"ParamTab"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Examples",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 { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
 import { Home, Settings, User } from 'lucide-react';
 
 // Basic usage with URL sync