@e-burgos/tucu-ui 2.0.2 → 2.0.4

package/{TabSelectSection-DKuGHY6b.mjs → documentation/TabSelectSection-C3uSu4Tb.js}

@@ -1,11 +1,11 @@
-import { jsxs as t, Fragment as S, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, Fragment as N, 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-HwvOEWI7.mjs";
-import { Home as w, User as I, Settings as k } from "lucide-react";
+import { T as a, C as s, a as n, ap as d, A as f, c as y } from "../index-B6CStnMG.js";
+import { Home as v, User as S, Settings as T } 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 = [
+const z = () => {
+  const [o, b] = c(0), [m, g] = c(0), [i, x] = c(0), p = [
     { title: "Dashboard", path: "dashboard" },
     { title: "Analytics", path: "analytics" },
     { title: "Reports", path: "reports" },
@@ -13,21 +13,21 @@ const O = () => {
   ], h = [
     {
       title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(w, { size: 16 }),
+        /* @__PURE__ */ e(v, { size: 16 }),
         "Home"
       ] }),
       path: "home"
     },
     {
       title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(I, { size: 16 }),
+        /* @__PURE__ */ e(S, { size: 16 }),
         "Profile"
       ] }),
       path: "profile"
     },
     {
       title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(k, { size: 16 }),
+        /* @__PURE__ */ e(T, { size: 16 }),
         "Settings"
       ] }),
       path: "settings"
@@ -41,55 +41,7 @@ const O = () => {
     { 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 = [
+  ], u = [
     {
       prop: "title",
       type: "React.ReactNode",
@@ -103,7 +55,7 @@ const O = () => {
       description: "Unique identifier/route path for the tab"
     }
   ];
-  return /* @__PURE__ */ t(S, { children: [
+  return /* @__PURE__ */ t(N, { 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(
@@ -115,7 +67,7 @@ const O = () => {
         }
       )
     ] }),
-    /* @__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__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-8", children: [
       /* @__PURE__ */ t("div", { children: [
         /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic TabSelect" }),
         /* @__PURE__ */ e(
@@ -131,7 +83,7 @@ const O = () => {
           {
             tabMenu: p,
             selectedTabIndex: o,
-            onChange: u
+            onChange: b
           }
         ) }),
         /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
@@ -155,7 +107,7 @@ const O = () => {
           {
             tabMenu: h,
             selectedTabIndex: m,
-            onChange: f
+            onChange: g
           }
         ) }),
         /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
@@ -179,7 +131,7 @@ const O = () => {
           {
             tabMenu: r,
             selectedTabIndex: i,
-            onChange: N
+            onChange: x
           }
         ) }),
         /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
@@ -195,7 +147,7 @@ const O = () => {
         ] }) })
       ] })
     ] }) }) }) }),
-    /* @__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__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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(
@@ -241,7 +193,7 @@ const O = () => {
         )
       ] })
     ] }) }) }) }),
-    /* @__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__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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: "🎨" }),
@@ -303,10 +255,30 @@ const O = () => {
         )
       ] })
     ] }) }) }) }),
-    /* @__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,
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "TabSelectMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("table", { className: "w-full text-sm text-left", children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: [
+        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Prop" }),
+        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Type" }),
+        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Default" }),
+        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Description" })
+      ] }) }),
+      /* @__PURE__ */ e("tbody", { children: u.map((l) => /* @__PURE__ */ t(
+        "tr",
+        {
+          className: "border-b border-gray-100 dark:border-gray-800",
+          children: [
+            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: l.prop }) }),
+            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("code", { className: "text-xs", children: l.type }) }),
+            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: l.default === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: l.default }) }),
+            /* @__PURE__ */ e("td", { className: "px-3 py-2 text-gray-600 dark:text-gray-400", children: l.description })
+          ]
+        },
+        l.prop
+      )) })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(f, { componentName: "TabSelect" }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      y,
       {
         language: "tsx",
         code: `import { TabSelect } from '@e-burgos/tucu-ui';
@@ -414,5 +386,5 @@ function CustomExample() {
   ] });
 };
 export {
-  O as default
+  z as default
 };

package/documentation/TabSelectSection-DovVypr5.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-QnI4b7wS.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");const g=()=>{const[i,p]=r.useState(0),[d,m]=r.useState(0),[s,x]=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(n.Home,{size:16}),"Home"]}),path:"home"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(n.User,{size:16}),"Profile"]}),path:"profile"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(n.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"}],h=[{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: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:["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: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:["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:s,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 option:"," ",e.jsx("span",{className:"font-semibold text-brand",children:l[s].title})," ","(",s+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-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.jsxs("table",{className:"w-full text-sm text-left",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-gray-200 dark:border-gray-700",children:[e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Prop"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Type"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Default"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Description"})]})}),e.jsx("tbody",{children:h.map(a=>e.jsxs("tr",{className:"border-b border-gray-100 dark:border-gray-800",children:[e.jsx("td",{className:"px-3 py-2",children:e.jsx("code",{className:"text-xs text-brand",children:a.prop})}),e.jsx("td",{className:"px-3 py-2",children:e.jsx("code",{className:"text-xs",children:a.type})}),e.jsx("td",{className:"px-3 py-2",children:a.default==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:a.default})}),e.jsx("td",{className:"px-3 py-2 text-gray-600 dark:text-gray-400",children:a.description})]},a.prop))})]})})})}),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;

package/documentation/TailwindConfigSection-Cae-h3MW.js

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

package/{TailwindConfigSection-BH8ioMgX.mjs → documentation/TailwindConfigSection-DhBuW-uS.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { T as s, C as c, a as l, c as t, a4 as n } from "./index-HwvOEWI7.mjs";
+import { T as s, C as c, a as l, c as t, ag as n } from "../index-B6CStnMG.js";
 import { Palette as o, Circle as r, Code as d, Ruler as g } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{TestingSection-BKbTYqsd.mjs → documentation/TestingSection-Bv6OBqHc.js}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { C as r, a as l, T as s, c as o } from "./index-HwvOEWI7.mjs";
+import { C as r, a as l, T as s, c as o } from "../index-B6CStnMG.js";
 import { TestTube as c, Check as n } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/TestingSection-D76WU2E_.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-QnI4b7wS.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Accessibility Testing",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-orange-500 via-amber-500 to-yellow-500 shadow-lg",children:e.jsx(a.TestTube,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Testing Guidelines"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Manual Testing Checklist"}),e.jsx("div",{className:"space-y-2",children:["Navigate using only keyboard","Test with screen reader (NVDA, JAWS, VoiceOver)","Check color contrast ratios","Verify focus indicators are visible","Test at 200% zoom level","Validate HTML markup","Check for proper heading hierarchy","Test form labels and error messages"].map((i,t)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500"}),e.jsx(s.Typography,{tag:"p",className:"text-sm",children:i})]},t))})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Automated Testing Example"}),e.jsx(s.CodeBlock,{code:`import { render, screen } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+test('Input has no accessibility violations', async () => {
+  const { container } = render(
+    <Input label="Email" required error="Invalid email" />
+  );
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});`,language:"js"})]})]})]})})})});exports.default=r;

package/documentation/TextareaSection-BAc73Q3K.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("../index-QnI4b7wS.js");require("lucide-react");require("react-router-dom");require("react-dom");const i=()=>{const[r,s]=l.useState("");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:"Textarea"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A multi-line text input component for longer text content."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",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(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Textarea"}),e.jsx(a.Textarea,{label:"Message",placeholder:"Write your message here",value:r,onChange:t=>s(t.target.value),rows:4})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Textarea,{label:"Description",placeholder:"Enter description",helperText:"Provide a detailed description",rows:4})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Textarea,{label:"Comments",placeholder:"Enter comments",error:"Comments are required",rows:4})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Textarea,{label:"Notes",placeholder:"Disabled textarea",disabled:!0,rows:4})]})]})})})}),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:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.Textarea,{label:"Ghost Variant",placeholder:"Enter text",variant:"ghost",rows:3})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Textarea,{label:"Solid Variant",placeholder:"Enter text",variant:"solid",rows:3})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Textarea,{label:"Transparent Variant",placeholder:"Enter text",variant:"transparent",rows:3})]})]})})})}),e.jsx(a.AutoPropsTable,{componentName:"Textarea"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { Textarea } from '@e-burgos/tucu-ui';
+
+<Textarea
+  label="Message"
+  placeholder="Write your message here"
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+  rows={4}
+/>
+
+<Textarea
+  label="Description"
+  placeholder="Enter description"
+  helperText="Provide a detailed description"
+  rows={4}
+/>
+
+// Variants
+<Textarea label="Ghost" variant="ghost" rows={4} />
+<Textarea label="Solid" variant="solid" rows={4} />
+<Textarea label="Transparent" variant="transparent" rows={4} />`})})})})]})};exports.default=i;

package/{TextareaSection-COE_iT0W.mjs → documentation/TextareaSection-BXDH8mQI.js}

@@ -1,16 +1,16 @@
 import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { T as t, C as r, a as i, q as s, B as m, c as h } from "./index-HwvOEWI7.mjs";
+import { useState as d } from "react";
+import { T as l, C as r, a as s, w as t, A as m, c as h } from "../index-B6CStnMG.js";
 import "lucide-react";
 import "react-router-dom";
 import "react-dom";
-const T = () => {
-  const [n, d] = p("");
+const v = () => {
+  const [i, o] = d("");
   return /* @__PURE__ */ a(c, { children: [
     /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Textarea" }),
+      /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Textarea" }),
       /* @__PURE__ */ e(
-        t,
+        l,
         {
           tag: "p",
           className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
@@ -18,24 +18,24 @@ const T = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
       /* @__PURE__ */ a(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Basic Textarea" }),
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Basic Textarea" }),
         /* @__PURE__ */ e(
-          s,
+          t,
           {
             label: "Message",
             placeholder: "Write your message here",
-            value: n,
-            onChange: (l) => d(l.target.value),
+            value: i,
+            onChange: (n) => o(n.target.value),
             rows: 4
           }
         )
       ] }),
       /* @__PURE__ */ a(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
         /* @__PURE__ */ e(
-          s,
+          t,
           {
             label: "Description",
             placeholder: "Enter description",
@@ -45,9 +45,9 @@ const T = () => {
         )
       ] }),
       /* @__PURE__ */ a(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Error" }),
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Error" }),
         /* @__PURE__ */ e(
-          s,
+          t,
           {
             label: "Comments",
             placeholder: "Enter comments",
@@ -57,9 +57,9 @@ const T = () => {
         )
       ] }),
       /* @__PURE__ */ a(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Disabled" }),
         /* @__PURE__ */ e(
-          s,
+          t,
           {
             label: "Notes",
             placeholder: "Disabled textarea",
@@ -69,11 +69,11 @@ const T = () => {
         )
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
       /* @__PURE__ */ a(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
         /* @__PURE__ */ e(
-          s,
+          t,
           {
             label: "Ghost Variant",
             placeholder: "Enter text",
@@ -83,9 +83,9 @@ const T = () => {
         )
       ] }),
       /* @__PURE__ */ a(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Solid" }),
         /* @__PURE__ */ e(
-          s,
+          t,
           {
             label: "Solid Variant",
             placeholder: "Enter text",
@@ -95,9 +95,9 @@ const T = () => {
         )
       ] }),
       /* @__PURE__ */ a(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Transparent" }),
         /* @__PURE__ */ e(
-          s,
+          t,
           {
             label: "Transparent Variant",
             placeholder: "Enter text",
@@ -107,86 +107,8 @@ const T = () => {
         )
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(m, { columns: [
-      {
-        key: "prop",
-        label: "Prop",
-        render: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
-      },
-      {
-        key: "type",
-        label: "Type",
-        render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
-      },
-      {
-        key: "default",
-        label: "Default",
-        render: (l) => {
-          const o = String(l);
-          return o === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: o });
-        }
-      },
-      {
-        key: "description",
-        label: "Description"
-      }
-    ], data: [
-      {
-        prop: "label",
-        type: "string",
-        default: "-",
-        description: "Field label text"
-      },
-      {
-        prop: "variant",
-        type: "'ghost' | 'solid' | 'transparent'",
-        default: "'ghost'",
-        description: "Visual variant of the textarea"
-      },
-      {
-        prop: "error",
-        type: "string",
-        default: "-",
-        description: "Error message to display"
-      },
-      {
-        prop: "helperText",
-        type: "string",
-        default: "-",
-        description: "Helper text displayed below the textarea"
-      },
-      {
-        prop: "disabled",
-        type: "boolean",
-        default: "false",
-        description: "Disables the textarea field"
-      },
-      {
-        prop: "rows",
-        type: "number",
-        default: "-",
-        description: "Number of visible text lines"
-      },
-      {
-        prop: "useUppercaseLabel",
-        type: "boolean",
-        default: "false",
-        description: "Display label in uppercase"
-      },
-      {
-        prop: "className",
-        type: "string",
-        default: "-",
-        description: "Custom CSS classes for the container"
-      },
-      {
-        prop: "inputClassName",
-        type: "string",
-        default: "-",
-        description: "Custom CSS classes for the textarea element"
-      }
-    ] }) }) }) }),
-    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(m, { componentName: "Textarea" }),
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
       h,
       {
         language: "tsx",
@@ -216,5 +138,5 @@ const T = () => {
   ] });
 };
 export {
-  T as default
+  v as default
 };

package/{ThemeArchitectureSection-D8dWZO_Q.mjs → documentation/ThemeArchitectureSection-DEqHdCLa.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { T as r, C as n, D as c } from "./index-HwvOEWI7.mjs";
+import { T as r, C as n, J as c } from "../index-B6CStnMG.js";
 import { Zap as d, Palette as m, Moon as p } from "lucide-react";
 import "react-router-dom";
 import "react";