@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/PanelActionCardSection-BdiVGZct.js

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"PanelActionCard",description:`A panel card component with a scrollable content area and action
+          buttons at the bottom.`,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-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(l.PanelLeft,{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:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Panel with Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Title",actions:[{label:"Cancel",variant:"ghost",onClick:()=>console.log("Cancel")},{label:"Save",variant:"solid",color:"primary",onClick:()=>console.log("Save")}],children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Content line 1"}),e.jsx(a.Typography,{tag:"p",children:"Content line 2"}),e.jsx(a.Typography,{tag:"p",children:"Content line 3"})]})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Without Actions",children:e.jsx("div",{className:"space-y-2",children:e.jsx(a.Typography,{tag:"p",children:"This panel has no action buttons."})})})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"PanelActionCard",defaultValues:{title:"Panel Title"},excludeProps:["actions"],children:n=>e.jsx(a.PanelActionCard,{...n,actions:[{label:"Action",onClick:()=>{}}]})}),e.jsx(a.AutoPropsTable,{componentName:"PanelActionCard"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { PanelActionCard, Typography } from '@e-burgos/tucu-ui';
+
+// With actions
+<PanelActionCard
+  title="Panel Title"
+  actions={[
+    {
+      label: 'Cancel',
+      variant: 'ghost',
+      onClick: () => handleCancel(),
+    },
+    {
+      label: 'Save',
+      variant: 'solid',
+      color: 'primary',
+      onClick: () => handleSave(),
+    },
+  ]}
+>
+  <div className="space-y-2">
+    <Typography tag="p">Content here</Typography>
+  </div>
+</PanelActionCard>
+
+// Without actions
+<PanelActionCard title="Panel Title">
+  <Typography tag="p">Content without actions</Typography>
+</PanelActionCard>`})})})})]});exports.default=t;

package/documentation/{PanelActionCardSection-CC-DAySo.js → PanelActionCardSection-BgBQ-yk0.js}

@@ -1,21 +1,19 @@
 import { jsxs as l, Fragment as c, jsx as a } from "react/jsx-runtime";
-import { T as e, C as t, a as i, M as n, P as r, A as s, c as d } from "../index-D3gBsvbO.js";
-import "lucide-react";
+import { H as s, C as t, a as i, T as e, O as n, P as r, A as d, c as h } from "../index-19KsCnyX.js";
+import { PanelLeft as m } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const u = () => /* @__PURE__ */ l(c, { children: [
-  /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ a(e, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "PanelActionCard" }),
-    /* @__PURE__ */ a(
-      e,
-      {
-        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."
-      }
-    )
-  ] }),
+const v = () => /* @__PURE__ */ l(c, { children: [
+  /* @__PURE__ */ a(
+    s,
+    {
+      title: "PanelActionCard",
+      description: `A panel card component with a scrollable content area and action
+          buttons at the bottom.`,
+      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-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(m, { 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(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "space-y-4", children: [
     /* @__PURE__ */ l(t, { className: "p-4", children: [
       /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Basic Panel with Actions" }),
@@ -65,9 +63,9 @@ const u = () => /* @__PURE__ */ l(c, { children: [
       )
     }
   ),
-  /* @__PURE__ */ a(s, { componentName: "PanelActionCard" }),
+  /* @__PURE__ */ a(d, { 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,
+    h,
     {
       language: "tsx",
       code: `import { PanelActionCard, Typography } from '@e-burgos/tucu-ui';
@@ -102,5 +100,5 @@ const u = () => /* @__PURE__ */ l(c, { children: [
   ) }) }) })
 ] });
 export {
-  u as default
+  v as default
 };

package/documentation/{PanelCardSection-OBm47mh0.js → PanelCardSection-CxgguBdn.js}

@@ -1,21 +1,19 @@
 import { jsxs as l, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { T as a, C as t, a as n, O as r, P as d, A as c, c as o } from "../index-D3gBsvbO.js";
-import "lucide-react";
+import { H as o, C as t, a as n, T as a, Q as r, P as d, A as c, c as p } from "../index-19KsCnyX.js";
+import { PanelTop as m } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const x = () => /* @__PURE__ */ l(i, { children: [
-  /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "PanelCard" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        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."
-      }
-    )
-  ] }),
+const N = () => /* @__PURE__ */ l(i, { children: [
+  /* @__PURE__ */ e(
+    o,
+    {
+      title: "PanelCard",
+      description: `A simple panel card component with a title header and scrollable
+          content area.`,
+      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-fuchsia-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { 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(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ l(t, { className: "p-4", children: [
     /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic Panel Card" }),
     /* @__PURE__ */ e(r, { title: "Panel Title", children: /* @__PURE__ */ l("div", { className: "space-y-2", children: [
@@ -36,7 +34,7 @@ const x = () => /* @__PURE__ */ l(i, { children: [
   ),
   /* @__PURE__ */ e(c, { componentName: "PanelCard" }),
   /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    o,
+    p,
     {
       language: "tsx",
       code: `import { PanelCard, Typography } from '@e-burgos/tucu-ui';
@@ -58,5 +56,5 @@ const x = () => /* @__PURE__ */ l(i, { children: [
   ) }) }) })
 ] });
 export {
-  x as default
+  N as default
 };

package/documentation/PanelCardSection-DepwDiot.js

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"PanelCard",description:`A simple panel card component with a title header and scrollable
+          content area.`,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-fuchsia-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(n.PanelTop,{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:"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">
+  <div className="space-y-2">
+    <Typography tag="p">Content line 1</Typography>
+    <Typography tag="p">Content line 2</Typography>
+    <Typography tag="p">Content line 3</Typography>
+  </div>
+</PanelCard>
+
+// With custom className
+<PanelCard title="Custom Panel" className="max-w-md">
+  <Typography tag="p">Custom styled panel</Typography>
+</PanelCard>`})})})})]});exports.default=r;

package/documentation/{ParamTabSection-TcsbnNAx.js → ParamTabSection-7WqNq93W.js}

@@ -1,28 +1,27 @@
 import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
-import { T as a, C as i, a as l, aq as n, ao as s, A as b, c as g } from "../index-D3gBsvbO.js";
-import { Home as o, BarChart as m, FileText as h, Settings as c, User as x, Bell as y } from "lucide-react";
+import { H as b, C as i, a as n, T as a, at as l, ar as s, y as g, P as u, A as y, c as x } from "../index-19KsCnyX.js";
+import { Hash as f, Home as d, BarChart as m, FileText as h, Settings as c, User as v, Bell as N } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const S = () => {
-  const d = [
+const U = () => {
+  const o = [
     { title: "Overview", path: "overview" },
     { title: "Details", path: "details" },
     { title: "Settings", path: "settings" }
   ];
   return /* @__PURE__ */ t(p, { children: [
-    /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ParamTab" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          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."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ e(
+      b,
+      {
+        title: "ParamTab",
+        description: `A powerful tab component that automatically syncs with URL query
+          parameters and switches to a dropdown selector on mobile devices for
+          optimal responsive behavior.`,
+        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-purple-600 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(f, { 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(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-8", children: [
       /* @__PURE__ */ t("div", { children: [
         /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Underline Variant (Default)" }),
         /* @__PURE__ */ e(
@@ -33,13 +32,13 @@ const S = () => {
             children: "Classic underline style with animated indicator. URL syncs with ?view=overview, ?view=details, etc."
           }
         ),
-        /* @__PURE__ */ t(n, { tabMenu: d, variant: "underline", children: [
+        /* @__PURE__ */ t(l, { tabMenu: o, variant: "underline", children: [
           /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ e(
               a,
               {
                 tag: "h3",
-                className: "text-xl font-semibold mb-2",
+                className: "text-base font-semibold mb-2",
                 children: "Overview Dashboard"
               }
             ),
@@ -57,7 +56,7 @@ const S = () => {
               a,
               {
                 tag: "h3",
-                className: "text-xl font-semibold mb-2",
+                className: "text-base font-semibold mb-2",
                 children: "Detailed Information"
               }
             ),
@@ -75,7 +74,7 @@ const S = () => {
               a,
               {
                 tag: "h3",
-                className: "text-xl font-semibold mb-2",
+                className: "text-base font-semibold mb-2",
                 children: "Configuration Settings"
               }
             ),
@@ -100,11 +99,11 @@ const S = () => {
             children: "Modern rounded pills with icon support for enhanced visual clarity."
           }
         ),
-        /* @__PURE__ */ t(n, { tabMenu: [
+        /* @__PURE__ */ t(l, { tabMenu: [
           {
             title: "Dashboard",
             path: "dashboard",
-            icon: /* @__PURE__ */ e(o, { size: 16 })
+            icon: /* @__PURE__ */ e(d, { size: 16 })
           },
           {
             title: "Analytics",
@@ -124,8 +123,15 @@ const S = () => {
         ], variant: "pills", size: "medium", children: [
           /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
-              /* @__PURE__ */ e(o, { className: "text-brand", size: 24 }),
-              /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Dashboard Home" })
+              /* @__PURE__ */ e(d, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(
+                a,
+                {
+                  tag: "h3",
+                  className: "text-base font-semibold",
+                  children: "Dashboard Home"
+                }
+              )
             ] }),
             /* @__PURE__ */ e(
               a,
@@ -139,7 +145,14 @@ const S = () => {
           /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
               /* @__PURE__ */ e(m, { className: "text-brand", size: 24 }),
-              /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Analytics Overview" })
+              /* @__PURE__ */ e(
+                a,
+                {
+                  tag: "h3",
+                  className: "text-base font-semibold",
+                  children: "Analytics Overview"
+                }
+              )
             ] }),
             /* @__PURE__ */ e(
               a,
@@ -153,7 +166,14 @@ const S = () => {
           /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
               /* @__PURE__ */ e(h, { className: "text-brand", size: 24 }),
-              /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Reports Center" })
+              /* @__PURE__ */ e(
+                a,
+                {
+                  tag: "h3",
+                  className: "text-base font-semibold",
+                  children: "Reports Center"
+                }
+              )
             ] }),
             /* @__PURE__ */ e(
               a,
@@ -167,7 +187,14 @@ const S = () => {
           /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
               /* @__PURE__ */ e(c, { className: "text-brand", size: 24 }),
-              /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Application Settings" })
+              /* @__PURE__ */ e(
+                a,
+                {
+                  tag: "h3",
+                  className: "text-base font-semibold",
+                  children: "Application Settings"
+                }
+              )
             ] }),
             /* @__PURE__ */ e(
               a,
@@ -190,16 +217,16 @@ const S = () => {
             children: "Distinct bordered style with highlighted selection state."
           }
         ),
-        /* @__PURE__ */ t(n, { tabMenu: [
+        /* @__PURE__ */ t(l, { tabMenu: [
           {
             title: "Profile",
             path: "profile",
-            icon: /* @__PURE__ */ e(x, { size: 16 })
+            icon: /* @__PURE__ */ e(v, { size: 16 })
           },
           {
             title: "Notifications",
             path: "notifications",
-            icon: /* @__PURE__ */ e(y, { size: 16 })
+            icon: /* @__PURE__ */ e(N, { size: 16 })
           },
           {
             title: "Settings",
@@ -212,7 +239,7 @@ const S = () => {
               a,
               {
                 tag: "h3",
-                className: "text-xl font-semibold mb-2",
+                className: "text-base font-semibold mb-2",
                 children: "User Profile"
               }
             ),
@@ -230,7 +257,7 @@ const S = () => {
               a,
               {
                 tag: "h3",
-                className: "text-xl font-semibold mb-2",
+                className: "text-base font-semibold mb-2",
                 children: "Notifications"
               }
             ),
@@ -248,7 +275,7 @@ const S = () => {
               a,
               {
                 tag: "h3",
-                className: "text-xl font-semibold mb-2",
+                className: "text-base font-semibold mb-2",
                 children: "Account Settings"
               }
             ),
@@ -273,7 +300,7 @@ const S = () => {
             children: "Compact solid background style perfect for space-constrained layouts."
           }
         ),
-        /* @__PURE__ */ t(n, { tabMenu: d, variant: "solid", size: "small", children: [
+        /* @__PURE__ */ t(l, { tabMenu: o, variant: "solid", size: "small", children: [
           /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
             a,
             {
@@ -301,7 +328,7 @@ const S = () => {
         ] })
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Key Features", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Key Features", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
       /* @__PURE__ */ t("div", { children: [
         /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
           /* @__PURE__ */ e("span", { role: "img", "aria-label": "link", children: "🔗" }),
@@ -375,49 +402,82 @@ const S = () => {
         )
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "TabMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("table", { className: "w-full text-sm text-left", children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: [
-        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Prop" }),
-        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Type" }),
-        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Default" }),
-        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Description" })
-      ] }) }),
-      /* @__PURE__ */ e("tbody", { children: [
-        {
-          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"
-        }
-      ].map((r) => /* @__PURE__ */ t(
-        "tr",
-        {
-          className: "border-b border-gray-100 dark:border-gray-800",
-          children: [
-            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: r.prop }) }),
-            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("code", { className: "text-xs", children: r.type }) }),
-            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: r.default === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: r.default }) }),
-            /* @__PURE__ */ e("td", { className: "px-3 py-2 text-gray-600 dark:text-gray-400", children: r.description })
-          ]
-        },
-        r.prop
-      )) })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(b, { componentName: "ParamTab" }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "TabMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
       g,
+      {
+        columns: [
+          {
+            key: "prop",
+            label: "Prop",
+            render: (r) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: r })
+          },
+          {
+            key: "type",
+            label: "Type",
+            render: (r) => /* @__PURE__ */ e("code", { className: "text-xs", children: r })
+          },
+          {
+            key: "default",
+            label: "Default",
+            render: (r) => r === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: r })
+          },
+          {
+            key: "description",
+            label: "Description",
+            className: "text-gray-600 dark:text-gray-400"
+          }
+        ],
+        data: [
+          {
+            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"
+          }
+        ],
+        maxRows: 10,
+        resizable: !1
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        componentName: "ParamTab",
+        title: "ParamTab Playground",
+        defaultValues: {
+          variant: "solid",
+          size: "medium",
+          showMobileSelect: !1
+        },
+        excludeProps: ["tabMenu", "tabListClassName"],
+        children: (r) => /* @__PURE__ */ e(
+          l,
+          {
+            ...r,
+            tabMenu: [
+              { title: "Tab 1", path: "#tab1" },
+              { title: "Tab 2", path: "#tab2" },
+              { title: "Tab 3", path: "#tab3" }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(y, { componentName: "ParamTab" }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      x,
       {
         language: "tsx",
         code: `import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
@@ -517,5 +577,5 @@ function CompactExample() {
   ] });
 };
 export {
-  S as default
+  U as default
 };

package/documentation/ParamTabSection-CRAA5456.js

@@ -0,0 +1,94 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=[{title:"Overview",path:"overview"},{title:"Details",path:"details"},{title:"Settings",path:"settings"}],r=[{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.jsx(a.HeroCard,{title:"ParamTab",description:`A powerful tab component that automatically syncs with URL query
+          parameters and switches to a dropdown selector on mobile devices for
+          optimal responsive behavior.`,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-purple-600 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Hash,{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:"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:i,variant:"underline",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-base 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-base 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-base 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:r,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-base 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-base 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-base 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-base 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-base 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-base 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-base 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:i,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.jsx(a.BasicTable,{columns:[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:s})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:s})},{key:"default",label:"Default",render:s=>s==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:s})},{key:"description",label:"Description",className:"text-gray-600 dark:text-gray-400"}],data:l,maxRows:10,resizable:!1})})})}),e.jsx(a.PropPlayground,{componentName:"ParamTab",title:"ParamTab Playground",defaultValues:{variant:"solid",size:"medium",showMobileSelect:!1},excludeProps:["tabMenu","tabListClassName"],children:s=>e.jsx(a.ParamTab,{...s,tabMenu:[{title:"Tab 1",path:"#tab1"},{title:"Tab 2",path:"#tab2"},{title:"Tab 3",path:"#tab3"}]})}),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
+function BasicExample() {
+const tabMenu = [
+  { title: 'Overview', path: 'overview' },
+  { title: 'Details', path: 'details' },
+  { title: 'Settings', path: 'settings' },
+];
+
+  return (
+<ParamTab tabMenu={tabMenu}>
+  <TabPanel>
+    <div>Overview content</div>
+  </TabPanel>
+  <TabPanel>
+    <div>Details content</div>
+  </TabPanel>
+  <TabPanel>
+    <div>Settings content</div>
+  </TabPanel>
+</ParamTab>
+  );
+}
+
+// Pills variant with icons
+function PillsWithIcons() {
+  const tabMenu = [
+    {
+      title: 'Dashboard',
+      path: 'dashboard',
+      icon: <Home size={16} />,
+    },
+    {
+      title: 'Profile',
+      path: 'profile',
+      icon: <User size={16} />,
+    },
+    {
+      title: 'Settings',
+      path: 'settings',
+      icon: <Settings size={16} />,
+    },
+  ];
+
+  return (
+    <ParamTab tabMenu={tabMenu} variant="pills" size="medium">
+      <TabPanel>Dashboard content</TabPanel>
+      <TabPanel>Profile content</TabPanel>
+      <TabPanel>Settings content</TabPanel>
+    </ParamTab>
+  );
+}
+
+// Bordered variant
+function BorderedExample() {
+  const tabMenu = [
+    { title: 'Tab 1', path: 'tab1' },
+    { title: 'Tab 2', path: 'tab2' },
+  ];
+
+  return (
+    <ParamTab tabMenu={tabMenu} variant="bordered">
+      <TabPanel>Content 1</TabPanel>
+      <TabPanel>Content 2</TabPanel>
+    </ParamTab>
+  );
+}
+
+// Solid variant with small size
+function CompactExample() {
+  const tabMenu = [
+    { title: 'View 1', path: 'view1' },
+    { title: 'View 2', path: 'view2' },
+  ];
+
+  return (
+    <ParamTab tabMenu={tabMenu} variant="solid" size="small">
+      <TabPanel>Compact content 1</TabPanel>
+      <TabPanel>Compact content 2</TabPanel>
+    </ParamTab>
+  );
+}
+
+// How it works:
+// 1. Component reads current URL parameter (?view=overview)
+// 2. Matches it with tabMenu path to set active tab
+// 3. When user clicks tab, URL updates automatically
+// 4. On mobile (xs, sm), shows TabSelect dropdown
+// 5. On desktop, shows regular tab bar
+// 6. Browser back/forward buttons work seamlessly`})})})})]})};exports.default=o;