@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/PanelCardSection-PoZLivo5.js

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

@@ -1,60 +0,0 @@
-import { jsxs as l, Fragment as i, jsx as e } from "react/jsx-runtime";
-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-DYDFy1df.js";
-import { PanelTop as m } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-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: [
-      /* @__PURE__ */ e(a, { tag: "p", children: "Content line 1" }),
-      /* @__PURE__ */ e(a, { tag: "p", children: "Content line 2" }),
-      /* @__PURE__ */ e(a, { tag: "p", children: "Content line 3" }),
-      /* @__PURE__ */ e(a, { tag: "p", children: "Content line 4" }),
-      /* @__PURE__ */ e(a, { tag: "p", children: "Content line 5" })
-    ] }) })
-  ] }) }) }) }) }),
-  /* @__PURE__ */ e(
-    d,
-    {
-      componentName: "PanelCard",
-      defaultValues: { title: "Panel Card" },
-      children: (s) => /* @__PURE__ */ e(r, { ...s, children: /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Panel content goes here" }) })
-    }
-  ),
-  /* @__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(
-    p,
-    {
-      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>`
-    }
-  ) }) }) })
-] });
-export {
-  N as default
-};

package/documentation/ParamTabSection-B8Ea5Jyo.js

@@ -1,581 +0,0 @@
-import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
-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-DYDFy1df.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 U = () => {
-  const o = [
-    { title: "Overview", path: "overview" },
-    { title: "Details", path: "details" },
-    { title: "Settings", path: "settings" }
-  ];
-  return /* @__PURE__ */ t(p, { 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(
-          a,
-          {
-            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."
-          }
-        ),
-        /* @__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-base font-semibold mb-2",
-                children: "Overview Dashboard"
-              }
-            ),
-            /* @__PURE__ */ e(
-              a,
-              {
-                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."
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h3",
-                className: "text-base font-semibold mb-2",
-                children: "Detailed Information"
-              }
-            ),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400",
-                children: "Comprehensive details and in-depth analysis. URL parameter: ?view=details"
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h3",
-                className: "text-base font-semibold mb-2",
-                children: "Configuration Settings"
-              }
-            ),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400",
-                children: "Manage your preferences and application settings. URL parameter: ?view=settings"
-              }
-            )
-          ] }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Pills Variant with Icons" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            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."
-          }
-        ),
-        /* @__PURE__ */ t(l, { tabMenu: [
-          {
-            title: "Dashboard",
-            path: "dashboard",
-            icon: /* @__PURE__ */ e(d, { size: 16 })
-          },
-          {
-            title: "Analytics",
-            path: "analytics",
-            icon: /* @__PURE__ */ e(m, { size: 16 })
-          },
-          {
-            title: "Reports",
-            path: "reports",
-            icon: /* @__PURE__ */ e(h, { size: 16 })
-          },
-          {
-            title: "Settings",
-            path: "settings",
-            icon: /* @__PURE__ */ e(c, { size: 16 })
-          }
-        ], 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(d, { className: "text-brand", size: 24 }),
-              /* @__PURE__ */ e(
-                a,
-                {
-                  tag: "h3",
-                  className: "text-base font-semibold",
-                  children: "Dashboard Home"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                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."
-              }
-            )
-          ] }) }),
-          /* @__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-base font-semibold",
-                  children: "Analytics Overview"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400",
-                children: "Track your performance with detailed analytics and insights."
-              }
-            )
-          ] }) }),
-          /* @__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-base font-semibold",
-                  children: "Reports Center"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400",
-                children: "Generate and view comprehensive reports for your data."
-              }
-            )
-          ] }) }),
-          /* @__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-base font-semibold",
-                  children: "Application Settings"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400",
-                children: "Customize your application preferences and configuration."
-              }
-            )
-          ] }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Bordered Variant" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
-            children: "Distinct bordered style with highlighted selection state."
-          }
-        ),
-        /* @__PURE__ */ t(l, { tabMenu: [
-          {
-            title: "Profile",
-            path: "profile",
-            icon: /* @__PURE__ */ e(v, { size: 16 })
-          },
-          {
-            title: "Notifications",
-            path: "notifications",
-            icon: /* @__PURE__ */ e(N, { size: 16 })
-          },
-          {
-            title: "Settings",
-            path: "settings",
-            icon: /* @__PURE__ */ e(c, { size: 16 })
-          }
-        ], variant: "bordered", children: [
-          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h3",
-                className: "text-base font-semibold mb-2",
-                children: "User Profile"
-              }
-            ),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400",
-                children: "Manage your personal information and profile settings."
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h3",
-                className: "text-base font-semibold mb-2",
-                children: "Notifications"
-              }
-            ),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400",
-                children: "Configure how and when you receive notifications."
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h3",
-                className: "text-base font-semibold mb-2",
-                children: "Account Settings"
-              }
-            ),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400",
-                children: "Manage your account security and privacy settings."
-              }
-            )
-          ] }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Solid Variant (Small Size)" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
-            children: "Compact solid background style perfect for space-constrained layouts."
-          }
-        ),
-        /* @__PURE__ */ t(l, { tabMenu: o, variant: "solid", size: "small", children: [
-          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
-            a,
-            {
-              tag: "p",
-              className: "text-gray-600 dark:text-gray-400",
-              children: "Compact overview content with small tab size."
-            }
-          ) }) }),
-          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
-            a,
-            {
-              tag: "p",
-              className: "text-gray-600 dark:text-gray-400",
-              children: "Detailed information in a compact format."
-            }
-          ) }) }),
-          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
-            a,
-            {
-              tag: "p",
-              className: "text-gray-600 dark:text-gray-400",
-              children: "Settings panel with space-efficient design."
-            }
-          ) }) })
-        ] })
-      ] })
-    ] }) }) }) }),
-    /* @__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: "🔗" }),
-          " ",
-          "URL Synchronization"
-        ] }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            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:"
-          }
-        ),
-        /* @__PURE__ */ t("ul", { className: "list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1 ml-4", children: [
-          /* @__PURE__ */ e("li", { children: "Deep linking to specific tabs" }),
-          /* @__PURE__ */ e("li", { children: "Browser back/forward navigation" }),
-          /* @__PURE__ */ e("li", { children: "Shareable URLs with selected tab state" }),
-          /* @__PURE__ */ e("li", { children: "Bookmark support for specific views" })
-        ] })
-      ] }),
-      /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
-          /* @__PURE__ */ e("span", { role: "img", "aria-label": "mobile", children: "📱" }),
-          " ",
-          "Responsive Mobile Adaptation"
-        ] }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            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."
-          }
-        ),
-        /* @__PURE__ */ e(i, { className: "p-4 bg-blue-50 dark:bg-blue-900/20", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
-          /* @__PURE__ */ e("span", { role: "img", "aria-label": "tip", children: "💡" }),
-          " ",
-          /* @__PURE__ */ e("span", { className: "font-semibold", children: "Tip:" }),
-          " Resize your browser window to see the automatic switch between tab bar and dropdown selector!"
-        ] }) })
-      ] }),
-      /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
-          /* @__PURE__ */ e("span", { role: "img", "aria-label": "styles", children: "🎨" }),
-          " ",
-          "Multiple Style Variants"
-        ] }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            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."
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
-          /* @__PURE__ */ e("span", { role: "img", "aria-label": "icons", children: "✨" }),
-          " ",
-          "Icon Support"
-        ] }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            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."
-          }
-        )
-      ] })
-    ] }) }) }) }),
-    /* @__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';
-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`
-      }
-    ) }) }) })
-  ] });
-};
-export {
-  U as default
-};