@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/ParamTabSection-DEcMYPi2.mjs

@@ -0,0 +1,561 @@
+import { jsxs as t, Fragment as y, jsx as e } from "react/jsx-runtime";
+import { T as a, C as i, a as l, ae as n, ac as r, B as h, c as f } from "./index-Hq6IUBmn.mjs";
+import { Home as p, BarChart as b, FileText as g, Settings as c, User as v, Bell as N } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const R = () => {
+  const o = [
+    { title: "Overview", path: "overview" },
+    { title: "Details", path: "details" },
+    { title: "Settings", path: "settings" }
+  ], u = [
+    {
+      title: "Dashboard",
+      path: "dashboard",
+      icon: /* @__PURE__ */ e(p, { size: 16 })
+    },
+    {
+      title: "Analytics",
+      path: "analytics",
+      icon: /* @__PURE__ */ e(b, { size: 16 })
+    },
+    {
+      title: "Reports",
+      path: "reports",
+      icon: /* @__PURE__ */ e(g, { size: 16 })
+    },
+    {
+      title: "Settings",
+      path: "settings",
+      icon: /* @__PURE__ */ e(c, { size: 16 })
+    }
+  ], x = [
+    {
+      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 })
+    }
+  ], d = [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (s) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(s) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (s) => {
+        const m = String(s);
+        return m === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: m });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ];
+  return /* @__PURE__ */ t(y, { 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__ */ 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(n, { tabMenu: o, variant: "underline", children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-xl 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(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-xl 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(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-xl 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(n, { tabMenu: u, variant: "pills", size: "medium", children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
+              /* @__PURE__ */ e(p, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl 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(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
+              /* @__PURE__ */ e(b, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl 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(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
+              /* @__PURE__ */ e(g, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl 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(r, { 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: "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(n, { tabMenu: x, variant: "bordered", children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-xl 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(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-xl 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(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "text-xl 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(n, { tabMenu: o, variant: "solid", size: "small", children: [
+          /* @__PURE__ */ e(r, { 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(r, { 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(r, { 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(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__ */ 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(l, { title: "TabMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(h, { columns: d, 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"
+      }
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(h, { columns: d, data: [
+      {
+        prop: "tabMenu",
+        type: "TabMenuItem[]",
+        default: "required",
+        description: "Array of tab menu items with title, path, and optional icon"
+      },
+      {
+        prop: "children",
+        type: "React.ReactNode",
+        default: "required",
+        description: "TabPanel components for each tab content"
+      },
+      {
+        prop: "variant",
+        type: "'underline' | 'pills' | 'bordered' | 'solid'",
+        default: "'underline'",
+        description: "Visual style variant of the tabs"
+      },
+      {
+        prop: "size",
+        type: "'small' | 'medium' | 'large'",
+        default: "'medium'",
+        description: "Size of the tab items"
+      },
+      {
+        prop: "tabListClassName",
+        type: "string",
+        default: "-",
+        description: "Additional CSS classes for tab list container"
+      },
+      {
+        prop: "showMobileSelect",
+        type: "boolean",
+        default: "true",
+        description: "Whether to show TabSelect on mobile devices"
+      }
+    ] }) }) }) }),
+    /* @__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(
+      f,
+      {
+        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 {
+  R as default
+};

package/ParamTabSection-fAirqQfE.js

@@ -0,0 +1,92 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const p=()=>{const i=[{title:"Overview",path:"overview"},{title:"Details",path:"details"},{title:"Settings",path:"settings"}],l=[{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})}],o=[{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})}],r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const n=String(s);return n==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:n})}},{key:"description",label:"Description"}],c=[{prop:"tabMenu",type:"TabMenuItem[]",default:"required",description:"Array of tab menu items with title, path, and optional icon"},{prop:"children",type:"React.ReactNode",default:"required",description:"TabPanel components for each tab content"},{prop:"variant",type:"'underline' | 'pills' | 'bordered' | 'solid'",default:"'underline'",description:"Visual style variant of the tabs"},{prop:"size",type:"'small' | 'medium' | 'large'",default:"'medium'",description:"Size of the tab items"},{prop:"tabListClassName",type:"string",default:"-",description:"Additional CSS classes for tab list container"},{prop:"showMobileSelect",type:"boolean",default:"true",description:"Whether to show TabSelect on mobile devices"}],d=[{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: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-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:l,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:o,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: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:r,data:d})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:r,data:c})})})}),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=p;