@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/TabSelectSection-CaGKQfWS.js

@@ -0,0 +1,100 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("./index-CjRk4ezu.js"),l=require("lucide-react");require("react-router-dom");require("react-dom");const y=()=>{const[i,x]=r.useState(0),[d,h]=r.useState(0),[s,g]=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(l.Home,{size:16}),"Home"]}),path:"home"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(l.User,{size:16}),"Profile"]}),path:"profile"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(l.Settings,{size:16}),"Settings"]}),path:"settings"}],n=[{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"}],p=[{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=>{const m=String(a);return m==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:m})}},{key:"description",label:"Description"}],b=[{prop:"tabMenu",type:"TabSelectMenuItem[]",default:"required",description:"Array of menu items with title and path"},{prop:"selectedTabIndex",type:"number",default:"required",description:"Currently selected tab index (0-based)"},{prop:"onChange",type:"(index: number) => void",default:"required",description:"Callback function when tab selection changes"},{prop:"ref",type:"React.Ref<HTMLElement | null>",default:"-",description:"Forward ref to the select element"}],u=[{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.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"TabSelect"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A mobile-friendly dropdown tab selector with smooth animations and transitions, designed for responsive tab navigation in constrained spaces."})]}),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:x})}),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: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:["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:n,selectedTabIndex:s,onChange:g})}),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:n[s].title})," ","(",s+1," of ",n.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-gray-300 dark:border-gray-600 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:p,data:u})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:p,data:b})})})}),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=y;

package/TabSelectSection-M0E_Atxn.mjs

@@ -0,0 +1,418 @@
+import { jsxs as t, Fragment as S, jsx as e } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { T as a, C as s, a as l, ad as d, B as x, c as T } from "./index-Hq6IUBmn.mjs";
+import { Home as w, User as I, Settings as k } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const O = () => {
+  const [o, u] = c(0), [m, f] = c(0), [i, N] = c(0), p = [
+    { title: "Dashboard", path: "dashboard" },
+    { title: "Analytics", path: "analytics" },
+    { title: "Reports", path: "reports" },
+    { title: "Settings", path: "settings" }
+  ], h = [
+    {
+      title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(w, { size: 16 }),
+        "Home"
+      ] }),
+      path: "home"
+    },
+    {
+      title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(I, { size: 16 }),
+        "Profile"
+      ] }),
+      path: "profile"
+    },
+    {
+      title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(k, { size: 16 }),
+        "Settings"
+      ] }),
+      path: "settings"
+    }
+  ], r = [
+    { 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" }
+  ], b = [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (n) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(n) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (n) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(n) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (n) => {
+        const g = String(n);
+        return g === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: g });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], y = [
+    {
+      prop: "tabMenu",
+      type: "TabSelectMenuItem[]",
+      default: "required",
+      description: "Array of menu items with title and path"
+    },
+    {
+      prop: "selectedTabIndex",
+      type: "number",
+      default: "required",
+      description: "Currently selected tab index (0-based)"
+    },
+    {
+      prop: "onChange",
+      type: "(index: number) => void",
+      default: "required",
+      description: "Callback function when tab selection changes"
+    },
+    {
+      prop: "ref",
+      type: "React.Ref<HTMLElement | null>",
+      default: "-",
+      description: "Forward ref to the select element"
+    }
+  ], v = [
+    {
+      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 /* @__PURE__ */ t(S, { 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: "TabSelect" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A mobile-friendly dropdown tab selector with smooth animations and transitions, designed for responsive tab navigation in constrained spaces."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic TabSelect" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            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."
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
+          d,
+          {
+            tabMenu: p,
+            selectedTabIndex: o,
+            onChange: u
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+          "Selected:",
+          " ",
+          /* @__PURE__ */ e("span", { className: "font-semibold text-brand", children: p[o].title })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Icons" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
+            children: "Enhanced dropdown with icon support for better visual clarity."
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
+          d,
+          {
+            tabMenu: h,
+            selectedTabIndex: m,
+            onChange: f
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+          "Current selection:",
+          " ",
+          /* @__PURE__ */ e("span", { className: "font-semibold text-brand", children: h[m].path })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Many Options" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
+            children: "Handles large lists efficiently with scrollable dropdown."
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
+          d,
+          {
+            tabMenu: r,
+            selectedTabIndex: i,
+            onChange: N
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+          "Selected option:",
+          " ",
+          /* @__PURE__ */ e("span", { className: "font-semibold text-brand", children: r[i].title }),
+          " ",
+          "(",
+          i + 1,
+          " of ",
+          r.length,
+          ")"
+        ] }) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Use Cases", 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__ */ e(a, { tag: "h5", className: "mb-2", children: "Mobile Navigation" }),
+        /* @__PURE__ */ t(
+          a,
+          {
+            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.",
+              /* @__PURE__ */ e("code", { className: "ml-1 text-xs border border-gray-300 dark:border-gray-600 px-2 py-1 rounded", children: "ParamTab" }),
+              " ",
+              "automatically switches to TabSelect on mobile breakpoints."
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(s, { 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:" }),
+          " Use TabSelect when you have 4+ tabs and limited horizontal space."
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-2", children: "Form Filters" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            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."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-2", children: "Settings Panels" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Navigate between different settings sections in a compact, accessible dropdown format."
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Features", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ t(s, { className: "p-4", children: [
+        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
+          /* @__PURE__ */ e("span", { role: "img", "aria-label": "palette", children: "🎨" }),
+          " ",
+          "Smooth Animations"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Chevron rotation and dropdown transitions with translate-y effects."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(s, { className: "p-4", children: [
+        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
+          /* @__PURE__ */ e("span", { role: "img", "aria-label": "moon", children: "🌙" }),
+          " ",
+          "Dark Mode"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Full dark mode support with automatic theme adaptation."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(s, { className: "p-4", children: [
+        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
+          /* @__PURE__ */ e("span", { role: "img", "aria-label": "lightning", children: "⚡" }),
+          " ",
+          "Performance"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Optimized rendering with proper key management for large lists."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(s, { className: "p-4", children: [
+        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
+          /* @__PURE__ */ e("span", { role: "img", "aria-label": "target", children: "🎯" }),
+          " ",
+          "Accessibility"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Keyboard navigation and focus management built-in."
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "TabSelectMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(x, { columns: b, data: v }) }) }) }),
+    /* @__PURE__ */ e(s, { 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(x, { columns: b, data: y }) }) }) }),
+    /* @__PURE__ */ e(s, { 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(
+      T,
+      {
+        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>
+  );
+}`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  O as default
+};

package/TailwindConfigSection-BreVbZy8.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-CjRk4ezu.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Tailwind CSS Configuration"}),e.jsx(s.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Built on Tailwind CSS v4 with Tucu UI Design Tokens"})]}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Design Tokens & Configuration",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"grid grid-cols-1 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-lg",children:e.jsx(a.Palette,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Color Spectrums"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm",children:"The system uses Tucu UI Design Tokens organized into color spectrums:"}),e.jsxs("ul",{className:"space-y-2 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Circle,{className:"w-2 h-2 mt-1.5 shrink-0 text-brand"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Color Spectrums:"})," Blue, Green, Orange, Gray, Indigo, Pink, Purple, Red, Teal, Yellow, Chartreuse"]})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Circle,{className:"w-2 h-2 mt-1.5 shrink-0 text-brand"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Color Scale:"})," Each spectrum has values from 0-100 (e.g., blue-0 to blue-100)"]})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Circle,{className:"w-2 h-2 mt-1.5 shrink-0 text-brand"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Light & Dark Variants:"})," Separate color sets for light and dark modes"]})]})]})]}),e.jsxs("div",{className:"space-y-4 mt-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-lg shadow-lg",children:e.jsx(a.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Semantic Colors"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm mb-3",children:"Semantic colors map design tokens to functional purposes:"}),e.jsx(s.CodeBlock,{language:"css",code:`/* Semantic Background Colors */
+--color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
+--color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
+--color-semantic-bg-positive: var(--color-tucu-ui-green-60);
+--color-semantic-bg-negative: var(--color-tucu-ui-red-60);
+
+/* Semantic Foreground Colors */
+--color-semantic-fg: var(--color-tucu-ui-gray-100);
+--color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
+--color-semantic-fg-primary: var(--color-tucu-ui-blue-60);`})]})]}),e.jsxs("div",{className:"space-y-4 mt-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg shadow-lg",children:e.jsx(a.Ruler,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Spacing Scale"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm mb-3",children:"The spacing scale is mapped to Tucu UI Design Tokens. All spacing values use arbitrary values in pixels to maintain consistency:"}),e.jsx(s.CodeBlock,{language:"css",code:`/* Spacing Scale - Mapped to Tucu UI Design Tokens */
+--spacing-0: 0px;
+--spacing-1: 8px;    /* --spacing-tucu-ui-1 */
+--spacing-2: 16px;   /* --spacing-tucu-ui-2 */
+--spacing-3: 24px;   /* --spacing-tucu-ui-3 */
+--spacing-4: 32px;   /* --spacing-tucu-ui-4 */
+--spacing-5: 40px;   /* --spacing-tucu-ui-5 */
+--spacing-6: 48px;   /* --spacing-tucu-ui-6 */
+--spacing-8: 64px;   /* --spacing-tucu-ui-8 */
+--spacing-10: 80px;  /* --spacing-tucu-ui-10 */`}),e.jsxs(s.Alert,{variant:"info",children:[" ",e.jsxs(s.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Note:"})," Components use arbitrary values like"," ",e.jsx("code",{className:"p-1 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"p-[16px]"})," ","instead of"," ",e.jsx("code",{className:"p-1 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"p-4"})," ","to maintain original Tailwind spacing values."]})]})]})]})})})]});exports.default=r;