@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/documentation/TabSection-CPijk6Ta.js

@@ -1,293 +0,0 @@
-import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { H as m, C as n, a as c, T as i, an as t, ao as d, ap as l, aq as s, ar as r, P as b, A as p, c as v } from "../index-DYDFy1df.js";
-import { LayoutList as T, Home as g, User as u, Settings as N, Mail as P, Bell as f, Calendar as w } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const A = () => /* @__PURE__ */ a(o, { children: [
-  /* @__PURE__ */ e(
-    m,
-    {
-      title: "Tabs",
-      description: `A flexible tab component system with multiple variants, smooth
-          animations, and mobile-responsive design built on Headless UI.`,
-      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-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(T, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Underline Variant (Default)" }),
-      /* @__PURE__ */ a(t, { variant: "underline", children: [
-        /* @__PURE__ */ a(d, { variant: "underline", children: [
-          /* @__PURE__ */ e(l, { variant: "underline", children: "Overview" }),
-          /* @__PURE__ */ e(l, { variant: "underline", children: "Details" }),
-          /* @__PURE__ */ e(l, { variant: "underline", children: "Settings" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Overview content with clean underline design." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Detailed information with professional styling." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Settings panel with modern appearance." }) }) })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Pills Variant" }),
-      /* @__PURE__ */ a(t, { variant: "pills", children: [
-        /* @__PURE__ */ a(d, { variant: "pills", children: [
-          /* @__PURE__ */ e(l, { variant: "pills", children: "Dashboard" }),
-          /* @__PURE__ */ e(l, { variant: "pills", children: "Analytics" }),
-          /* @__PURE__ */ e(l, { variant: "pills", children: "Reports" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Dashboard with rounded pill tabs for a modern look." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Analytics data with smooth transitions." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Reports section with clean design." }) }) })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Bordered Variant" }),
-      /* @__PURE__ */ a(t, { variant: "bordered", children: [
-        /* @__PURE__ */ a(d, { variant: "bordered", children: [
-          /* @__PURE__ */ e(l, { variant: "bordered", children: "Account" }),
-          /* @__PURE__ */ e(l, { variant: "bordered", children: "Security" }),
-          /* @__PURE__ */ e(l, { variant: "bordered", children: "Billing" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Account settings with bordered tab style." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Security options with clear visual distinction." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Billing information with professional appearance." }) }) })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Solid Variant" }),
-      /* @__PURE__ */ a(t, { variant: "solid", children: [
-        /* @__PURE__ */ a(d, { variant: "solid", children: [
-          /* @__PURE__ */ e(l, { variant: "solid", children: "Profile" }),
-          /* @__PURE__ */ e(l, { variant: "solid", children: "Notifications" }),
-          /* @__PURE__ */ e(l, { variant: "solid", children: "Privacy" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Profile section with solid background tabs." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Notifications center with modern design." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Privacy settings with clean interface." }) }) })
-        ] })
-      ] })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "With Icons", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Pills with Icons" }),
-      /* @__PURE__ */ a(t, { variant: "pills", children: [
-        /* @__PURE__ */ a(d, { variant: "pills", children: [
-          /* @__PURE__ */ e(l, { variant: "pills", icon: /* @__PURE__ */ e(g, { size: 16 }), children: "Home" }),
-          /* @__PURE__ */ e(l, { variant: "pills", icon: /* @__PURE__ */ e(u, { size: 16 }), children: "Profile" }),
-          /* @__PURE__ */ e(l, { variant: "pills", icon: /* @__PURE__ */ e(N, { size: 16 }), children: "Settings" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Home dashboard content." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "User profile information." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Application settings." }) }) })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Bordered with Icons" }),
-      /* @__PURE__ */ a(t, { variant: "bordered", children: [
-        /* @__PURE__ */ a(d, { variant: "bordered", children: [
-          /* @__PURE__ */ e(l, { variant: "bordered", icon: /* @__PURE__ */ e(P, { size: 16 }), children: "Messages" }),
-          /* @__PURE__ */ e(l, { variant: "bordered", icon: /* @__PURE__ */ e(f, { size: 16 }), children: "Alerts" }),
-          /* @__PURE__ */ e(l, { variant: "bordered", icon: /* @__PURE__ */ e(w, { size: 16 }), children: "Schedule" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Your messages and conversations." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "System alerts and notifications." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Calendar and scheduled events." }) }) })
-        ] })
-      ] })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Small Size" }),
-      /* @__PURE__ */ a(t, { variant: "pills", children: [
-        /* @__PURE__ */ a(d, { variant: "pills", children: [
-          /* @__PURE__ */ e(l, { variant: "pills", size: "small", children: "Tab 1" }),
-          /* @__PURE__ */ e(l, { variant: "pills", size: "small", children: "Tab 2" }),
-          /* @__PURE__ */ e(l, { variant: "pills", size: "small", children: "Tab 3" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Small size tabs content." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Compact design for space-constrained layouts." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Perfect for dense information displays." }) }) })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Large Size" }),
-      /* @__PURE__ */ a(t, { variant: "pills", children: [
-        /* @__PURE__ */ a(d, { variant: "pills", children: [
-          /* @__PURE__ */ e(l, { variant: "pills", size: "large", children: "Tab 1" }),
-          /* @__PURE__ */ e(l, { variant: "pills", size: "large", children: "Tab 2" }),
-          /* @__PURE__ */ e(l, { variant: "pills", size: "large", children: "Tab 3" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Large size tabs content." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Prominent design for main navigation." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Great for primary interface elements." }) }) })
-        ] })
-      ] })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "States", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Disabled Tab" }),
-      /* @__PURE__ */ a(t, { variant: "pills", children: [
-        /* @__PURE__ */ a(d, { variant: "pills", children: [
-          /* @__PURE__ */ e(l, { variant: "pills", children: "Active" }),
-          /* @__PURE__ */ e(l, { variant: "pills", disabled: !0, children: "Disabled" }),
-          /* @__PURE__ */ e(l, { variant: "pills", children: "Available" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Active tab content." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "This tab is disabled." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Available tab content." }) }) })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Color Variants" }),
-      /* @__PURE__ */ a(t, { variant: "underline", children: [
-        /* @__PURE__ */ a(d, { variant: "underline", children: [
-          /* @__PURE__ */ e(l, { variant: "underline", color: "primary", children: "Primary" }),
-          /* @__PURE__ */ e(l, { variant: "underline", color: "success", children: "Success" }),
-          /* @__PURE__ */ e(l, { variant: "underline", color: "danger", children: "Danger" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Primary color theme." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Success color theme." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Danger color theme." }) }) })
-        ] })
-      ] })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(
-    b,
-    {
-      componentName: "TabGroup",
-      title: "Tab Playground",
-      defaultValues: {
-        variant: "solid",
-        defaultIndex: 0
-      },
-      excludeProps: ["onChange", "selectedIndex", "className"],
-      children: (h) => /* @__PURE__ */ a(t, { ...h, children: [
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(l, { children: "Tab 1" }),
-          /* @__PURE__ */ e(l, { children: "Tab 2" }),
-          /* @__PURE__ */ e(l, { children: "Tab 3" })
-        ] }),
-        /* @__PURE__ */ a(s, { children: [
-          /* @__PURE__ */ e(r, { children: "Content 1" }),
-          /* @__PURE__ */ e(r, { children: "Content 2" }),
-          /* @__PURE__ */ e(r, { children: "Content 3" })
-        ] })
-      ] })
-    }
-  ),
-  /* @__PURE__ */ e(p, { componentName: "Tab" }),
-  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    v,
-    {
-      language: "tsx",
-      code: `import {
-  TabGroup,
-  TabList,
-  TabItem,
-  TabPanels,
-  TabPanel,
-} from '@e-burgos/tucu-ui';
-import { Home, User, Settings } from 'lucide-react';
-
-// Basic underline tabs
-<TabGroup variant="underline">
-  <TabList variant="underline">
-    <TabItem variant="underline">Tab 1</TabItem>
-    <TabItem variant="underline">Tab 2</TabItem>
-    <TabItem variant="underline">Tab 3</TabItem>
-  </TabList>
-  <TabPanels>
-    <TabPanel>Content 1</TabPanel>
-    <TabPanel>Content 2</TabPanel>
-    <TabPanel>Content 3</TabPanel>
-  </TabPanels>
-</TabGroup>
-
-// Pills variant with icons
-<TabGroup variant="pills">
-  <TabList variant="pills">
-    <TabItem variant="pills" icon={<Home size={16} />}>
-      Home
-    </TabItem>
-    <TabItem variant="pills" icon={<User size={16} />}>
-      Profile
-    </TabItem>
-    <TabItem variant="pills" icon={<Settings size={16} />}>
-      Settings
-    </TabItem>
-  </TabList>
-  <TabPanels>
-    <TabPanel>Home content</TabPanel>
-    <TabPanel>Profile content</TabPanel>
-    <TabPanel>Settings content</TabPanel>
-  </TabPanels>
-</TabGroup>
-
-// Bordered variant with sizes
-<TabGroup variant="bordered">
-  <TabList variant="bordered">
-    <TabItem variant="bordered" size="small">Small</TabItem>
-    <TabItem variant="bordered" size="medium">Medium</TabItem>
-    <TabItem variant="bordered" size="large">Large</TabItem>
-  </TabList>
-  <TabPanels>
-    <TabPanel>Small content</TabPanel>
-    <TabPanel>Medium content</TabPanel>
-    <TabPanel>Large content</TabPanel>
-  </TabPanels>
-</TabGroup>
-
-// Solid variant with disabled tab
-<TabGroup variant="solid">
-  <TabList variant="solid">
-    <TabItem variant="solid">Active</TabItem>
-    <TabItem variant="solid" disabled>Disabled</TabItem>
-    <TabItem variant="solid">Available</TabItem>
-  </TabList>
-  <TabPanels>
-    <TabPanel>Active content</TabPanel>
-    <TabPanel>Disabled content</TabPanel>
-    <TabPanel>Available content</TabPanel>
-  </TabPanels>
-</TabGroup>
-
-// With color variants
-<TabGroup variant="underline">
-  <TabList variant="underline">
-    <TabItem variant="underline" color="primary">Primary</TabItem>
-    <TabItem variant="underline" color="success">Success</TabItem>
-    <TabItem variant="underline" color="danger">Danger</TabItem>
-  </TabList>
-  <TabPanels>
-    <TabPanel>Primary content</TabPanel>
-    <TabPanel>Success content</TabPanel>
-    <TabPanel>Danger content</TabPanel>
-  </TabPanels>
-</TabGroup>`
-    }
-  ) }) }) })
-] });
-export {
-  A as default
-};

package/documentation/TabSection-qGiMXnBi.js

@@ -1,85 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-COp_AWCS.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Tabs",description:`A flexible tab component system with multiple variants, smooth
-          animations, and mobile-responsive design built on Headless UI.`,icon:a.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-purple-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(n.LayoutList,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-8",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Underline Variant (Default)"}),a.jsxs(e.TabGroup,{variant:"underline",children:[a.jsxs(e.TabList,{variant:"underline",children:[a.jsx(e.TabItem,{variant:"underline",children:"Overview"}),a.jsx(e.TabItem,{variant:"underline",children:"Details"}),a.jsx(e.TabItem,{variant:"underline",children:"Settings"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Overview content with clean underline design."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Detailed information with professional styling."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Settings panel with modern appearance."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Pills Variant"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",children:"Dashboard"}),a.jsx(e.TabItem,{variant:"pills",children:"Analytics"}),a.jsx(e.TabItem,{variant:"pills",children:"Reports"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Dashboard with rounded pill tabs for a modern look."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Analytics data with smooth transitions."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Reports section with clean design."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Bordered Variant"}),a.jsxs(e.TabGroup,{variant:"bordered",children:[a.jsxs(e.TabList,{variant:"bordered",children:[a.jsx(e.TabItem,{variant:"bordered",children:"Account"}),a.jsx(e.TabItem,{variant:"bordered",children:"Security"}),a.jsx(e.TabItem,{variant:"bordered",children:"Billing"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Account settings with bordered tab style."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Security options with clear visual distinction."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Billing information with professional appearance."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Solid Variant"}),a.jsxs(e.TabGroup,{variant:"solid",children:[a.jsxs(e.TabList,{variant:"solid",children:[a.jsx(e.TabItem,{variant:"solid",children:"Profile"}),a.jsx(e.TabItem,{variant:"solid",children:"Notifications"}),a.jsx(e.TabItem,{variant:"solid",children:"Privacy"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Profile section with solid background tabs."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Notifications center with modern design."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Privacy settings with clean interface."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"With Icons",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Pills with Icons"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.Home,{size:16}),children:"Home"}),a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.User,{size:16}),children:"Profile"}),a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.Settings,{size:16}),children:"Settings"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Home dashboard content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"User profile information."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Application settings."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Bordered with Icons"}),a.jsxs(e.TabGroup,{variant:"bordered",children:[a.jsxs(e.TabList,{variant:"bordered",children:[a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Mail,{size:16}),children:"Messages"}),a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Bell,{size:16}),children:"Alerts"}),a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Calendar,{size:16}),children:"Schedule"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Your messages and conversations."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"System alerts and notifications."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Calendar and scheduled events."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Small Size"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 1"}),a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 2"}),a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 3"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Small size tabs content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Compact design for space-constrained layouts."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Perfect for dense information displays."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Large Size"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 1"}),a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 2"}),a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 3"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Large size tabs content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Prominent design for main navigation."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Great for primary interface elements."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"States",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Disabled Tab"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",children:"Active"}),a.jsx(e.TabItem,{variant:"pills",disabled:!0,children:"Disabled"}),a.jsx(e.TabItem,{variant:"pills",children:"Available"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Active tab content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"This tab is disabled."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Available tab content."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Color Variants"}),a.jsxs(e.TabGroup,{variant:"underline",children:[a.jsxs(e.TabList,{variant:"underline",children:[a.jsx(e.TabItem,{variant:"underline",color:"primary",children:"Primary"}),a.jsx(e.TabItem,{variant:"underline",color:"success",children:"Success"}),a.jsx(e.TabItem,{variant:"underline",color:"danger",children:"Danger"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Primary color theme."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Success color theme."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Danger color theme."})})})]})]})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"TabGroup",title:"Tab Playground",defaultValues:{variant:"solid",defaultIndex:0},excludeProps:["onChange","selectedIndex","className"],children:i=>a.jsxs(e.TabGroup,{...i,children:[a.jsxs(e.TabList,{children:[a.jsx(e.TabItem,{children:"Tab 1"}),a.jsx(e.TabItem,{children:"Tab 2"}),a.jsx(e.TabItem,{children:"Tab 3"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:"Content 1"}),a.jsx(e.TabPanel,{children:"Content 2"}),a.jsx(e.TabPanel,{children:"Content 3"})]})]})}),a.jsx(e.AutoPropsTable,{componentName:"Tab"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import {
-  TabGroup,
-  TabList,
-  TabItem,
-  TabPanels,
-  TabPanel,
-} from '@e-burgos/tucu-ui';
-import { Home, User, Settings } from 'lucide-react';
-
-// Basic underline tabs
-<TabGroup variant="underline">
-  <TabList variant="underline">
-    <TabItem variant="underline">Tab 1</TabItem>
-    <TabItem variant="underline">Tab 2</TabItem>
-    <TabItem variant="underline">Tab 3</TabItem>
-  </TabList>
-  <TabPanels>
-    <TabPanel>Content 1</TabPanel>
-    <TabPanel>Content 2</TabPanel>
-    <TabPanel>Content 3</TabPanel>
-  </TabPanels>
-</TabGroup>
-
-// Pills variant with icons
-<TabGroup variant="pills">
-  <TabList variant="pills">
-    <TabItem variant="pills" icon={<Home size={16} />}>
-      Home
-    </TabItem>
-    <TabItem variant="pills" icon={<User size={16} />}>
-      Profile
-    </TabItem>
-    <TabItem variant="pills" icon={<Settings size={16} />}>
-      Settings
-    </TabItem>
-  </TabList>
-  <TabPanels>
-    <TabPanel>Home content</TabPanel>
-    <TabPanel>Profile content</TabPanel>
-    <TabPanel>Settings content</TabPanel>
-  </TabPanels>
-</TabGroup>
-
-// Bordered variant with sizes
-<TabGroup variant="bordered">
-  <TabList variant="bordered">
-    <TabItem variant="bordered" size="small">Small</TabItem>
-    <TabItem variant="bordered" size="medium">Medium</TabItem>
-    <TabItem variant="bordered" size="large">Large</TabItem>
-  </TabList>
-  <TabPanels>
-    <TabPanel>Small content</TabPanel>
-    <TabPanel>Medium content</TabPanel>
-    <TabPanel>Large content</TabPanel>
-  </TabPanels>
-</TabGroup>
-
-// Solid variant with disabled tab
-<TabGroup variant="solid">
-  <TabList variant="solid">
-    <TabItem variant="solid">Active</TabItem>
-    <TabItem variant="solid" disabled>Disabled</TabItem>
-    <TabItem variant="solid">Available</TabItem>
-  </TabList>
-  <TabPanels>
-    <TabPanel>Active content</TabPanel>
-    <TabPanel>Disabled content</TabPanel>
-    <TabPanel>Available content</TabPanel>
-  </TabPanels>
-</TabGroup>
-
-// With color variants
-<TabGroup variant="underline">
-  <TabList variant="underline">
-    <TabItem variant="underline" color="primary">Primary</TabItem>
-    <TabItem variant="underline" color="success">Success</TabItem>
-    <TabItem variant="underline" color="danger">Danger</TabItem>
-  </TabList>
-  <TabPanels>
-    <TabPanel>Primary content</TabPanel>
-    <TabPanel>Success content</TabPanel>
-    <TabPanel>Danger content</TabPanel>
-  </TabPanels>
-</TabGroup>`})})})})]});exports.default=s;

package/documentation/TabSelectSection-Bk-DIJad.js

@@ -1,102 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("../index-COp_AWCS.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const g=()=>{const[i,m]=r.useState(0),[d,p]=r.useState(0),[n,h]=r.useState(0),c=[{title:"Dashboard",path:"dashboard"},{title:"Analytics",path:"analytics"},{title:"Reports",path:"reports"},{title:"Settings",path:"settings"}],o=[{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(s.Home,{size:16}),"Home"]}),path:"home"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(s.User,{size:16}),"Profile"]}),path:"profile"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(s.Settings,{size:16}),"Settings"]}),path:"settings"}],l=[{title:"Orders",path:"orders"},{title:"Products",path:"products"},{title:"Customers",path:"customers"},{title:"Analytics",path:"analytics"},{title:"Marketing",path:"marketing"},{title:"Reports",path:"reports"},{title:"Integrations",path:"integrations"},{title:"Settings",path:"settings"}],x=[{prop:"title",type:"React.ReactNode",default:"required",description:"Tab label (can be text, JSX, or components)"},{prop:"path",type:"string",default:"required",description:"Unique identifier/route path for the tab"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"TabSelect",description:`A mobile-friendly dropdown tab selector with smooth animations and
-          transitions, designed for responsive tab navigation in constrained
-          spaces.`,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-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.ChevronDown,{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(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic TabSelect"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Standard dropdown selector with text options. Click to expand and select a tab."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:c,selectedTabIndex:i,onChange:m})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Selected:"," ",e.jsx("span",{className:"font-semibold text-brand",children:c[i].title})]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Icons"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Enhanced dropdown with icon support for better visual clarity."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:o,selectedTabIndex:d,onChange:p})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Current selection:"," ",e.jsx("span",{className:"font-semibold text-brand",children:o[d].path})]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Many Options"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Handles large lists efficiently with scrollable dropdown."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:l,selectedTabIndex:n,onChange:h})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Selected option:"," ",e.jsx("span",{className:"font-semibold text-brand",children:l[n].title})," ","(",n+1," of ",l.length,")"]})})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Use Cases",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.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Mobile Navigation"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:["Perfect for replacing horizontal tab bars on mobile devices where space is limited.",e.jsx("code",{className:"ml-1 text-xs border border-border px-2 py-1 rounded",children:"ParamTab"})," ","automatically switches to TabSelect on mobile breakpoints."]}),e.jsx(t.CardContainer,{className:"p-4 bg-blue-50 dark:bg-blue-900/20",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx("span",{role:"img","aria-label":"tip",children:"💡"})," ",e.jsx("span",{className:"font-semibold",children:"Tip:"})," Use TabSelect when you have 4+ tabs and limited horizontal space."]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Form Filters"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Use as a filter selector in forms and data tables to switch between different views or data categories."})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Settings Panels"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Navigate between different settings sections in a compact, accessible dropdown format."})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Features",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"palette",children:"🎨"})," ","Smooth Animations"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Chevron rotation and dropdown transitions with translate-y effects."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"moon",children:"🌙"})," ","Dark Mode"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Full dark mode support with automatic theme adaptation."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"lightning",children:"⚡"})," ","Performance"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Optimized rendering with proper key management for large lists."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"target",children:"🎯"})," ","Accessibility"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Keyboard navigation and focus management built-in."})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"TabSelectMenuItem Interface",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"text-xs text-brand",children:String(a??"")})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"text-xs",children:String(a??"")})},{key:"default",label:"Default",render:a=>a==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:String(a??"")})},{key:"description",label:"Description",render:a=>e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(a??"")})}],data:x})})})}),e.jsx(t.PropPlayground,{componentName:"TabSelect",title:"TabSelect Playground",defaultValues:{selectedTabIndex:0},excludeProps:["onChange","tabMenu"],children:a=>e.jsx(t.TabSelect,{...a,onChange:()=>{},tabMenu:[{title:"Option A"},{title:"Option B"},{title:"Option C"}]})}),e.jsx(t.AutoPropsTable,{componentName:"TabSelect"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { TabSelect } from '@e-burgos/tucu-ui';
-import { useState } from 'react';
-import { Home, Settings, User } from 'lucide-react';
-
-// Basic usage
-function BasicExample() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const tabMenu = [
-    { title: 'Dashboard', path: 'dashboard' },
-    { title: 'Analytics', path: 'analytics' },
-    { title: 'Reports', path: 'reports' },
-    { title: 'Settings', path: 'settings' },
-  ];
-
-  return (
-    <TabSelect
-      tabMenu={tabMenu}
-      selectedTabIndex={selectedIndex}
-      onChange={setSelectedIndex}
-    />
-  );
-}
-
-// With icons
-function IconExample() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const tabMenu = [
-    { 
-      title: (
-        <span className="flex items-center gap-2">
-          <Home size={16} />
-          Home
-        </span>
-      ), 
-      path: 'home' 
-    },
-    { 
-      title: (
-        <span className="flex items-center gap-2">
-          <User size={16} />
-          Profile
-        </span>
-      ), 
-      path: 'profile' 
-    },
-  ];
-
-  return (
-    <TabSelect
-      tabMenu={tabMenu}
-      selectedTabIndex={selectedIndex}
-      onChange={setSelectedIndex}
-    />
-  );
-}
-
-// Integration with ParamTab
-// ParamTab automatically uses TabSelect on mobile devices
-import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
-
-function ResponsiveTabs() {
-  const tabMenu = [
-    { title: 'Overview', path: 'overview' },
-    { title: 'Details', path: 'details' },
-    { title: 'Settings', path: 'settings' },
-  ];
-
-  return (
-    <ParamTab tabMenu={tabMenu}>
-      <TabPanel>Overview content</TabPanel>
-      <TabPanel>Details content</TabPanel>
-      <TabPanel>Settings content</TabPanel>
-    </ParamTab>
-  );
-}
-
-// Custom styling
-function CustomExample() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const tabMenu = [
-    { title: 'Option 1', path: 'opt1' },
-    { title: 'Option 2', path: 'opt2' },
-  ];
-
-  return (
-    <div className="max-w-md">
-      <TabSelect
-        tabMenu={tabMenu}
-        selectedTabIndex={selectedIndex}
-        onChange={(index) => {
-          console.log('Selected:', tabMenu[index].path);
-          setSelectedIndex(index);
-        }}
-      />
-    </div>
-  );
-}`})})})})]})};exports.default=g;