@e-burgos/tucu-ui 1.5.0 → 2.0.1

package/{MFESupportSection-aHAWy-oc.js → MFESupportSection-D6oq7xes.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-BoEJRnmP.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"Micro Frontends (MFE) Support",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-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-purple-500 to-indigo-500 shadow-lg",children:e.jsx(a.Box,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"Micro Frontend (MFE) Pattern"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["The ",e.jsx("strong",{children:"Micro Frontend (MFE) Pattern"})," is designed for distributed architectures where multiple applications need to be deployed independently. It requires explicit route configuration with"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"appRoutesConfig"})," ","and a"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"basePath"}),". Perfect for micro frontend architectures that need route isolation, authentication boundaries, and independent deployments."]}),e.jsx(r.Alert,{variant:"info",dismissible:!1,children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Info,{className:"w-4 h-4"}),e.jsx(r.Typography,{tag:"span",className:"font-semibold",children:"MFE Mode Requirements"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm",children:["When using"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:'architecturalPatterns="mfe"'}),", you must provide"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"basePath"})," ","and"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"appRoutesConfig"}),". TypeScript will enforce these requirements at compile time."]})]})}),e.jsxs("div",{className:"space-y-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 rounded-lg bg-linear-to-br from-indigo-500 to-purple-500 shadow-lg",children:e.jsx(a.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"Conditional TypeScript Types"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["The ThemeProvider uses discriminated unions to automatically enforce the correct props based on"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"architecturalPatterns"}),'. When set to "mfe", TypeScript requires MFE-specific props.']}),e.jsx(r.CodeBlock,{language:"typescript",code:`// Conditional TypeScript Types
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-Cj89iBVR.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"Micro Frontends (MFE) Support",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-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-purple-500 to-indigo-500 shadow-lg",children:e.jsx(a.Box,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"Micro Frontend (MFE) Pattern"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["The ",e.jsx("strong",{children:"Micro Frontend (MFE) Pattern"})," is designed for distributed architectures where multiple applications need to be deployed independently. It requires explicit route configuration with"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"appRoutesConfig"})," ","and a"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"basePath"}),". Perfect for micro frontend architectures that need route isolation, authentication boundaries, and independent deployments."]}),e.jsx(r.Alert,{variant:"info",dismissible:!1,children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Info,{className:"w-4 h-4"}),e.jsx(r.Typography,{tag:"span",className:"font-semibold",children:"MFE Mode Requirements"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm",children:["When using"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:'architecturalPatterns="mfe"'}),", you must provide"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"basePath"})," ","and"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"appRoutesConfig"}),". TypeScript will enforce these requirements at compile time."]})]})}),e.jsxs("div",{className:"space-y-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 rounded-lg bg-linear-to-br from-indigo-500 to-purple-500 shadow-lg",children:e.jsx(a.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"Conditional TypeScript Types"})]}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["The ThemeProvider uses discriminated unions to automatically enforce the correct props based on"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"architecturalPatterns"}),'. When set to "mfe", TypeScript requires MFE-specific props.']}),e.jsx(r.CodeBlock,{language:"typescript",code:`// Conditional TypeScript Types
 // The ThemeProvider automatically infers the correct props based on architecturalPatterns
 
 // MFE Pattern

package/{MenuItemsGuideSection-CfkMoYWs.js → MenuItemsGuideSection-B96jpxsc.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-BoEJRnmP.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const s=[{key:"property",label:"Property"},{key:"type",label:"Type"},{key:"required",label:"Required"},{key:"description",label:"Description"}],o=[{property:"name",type:"string",required:"Yes",description:"Display name of the menu item"},{property:"path",type:"string",required:"Yes",description:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"Internal route path"})," for React Router navigation (e.g., ",e.jsx("code",{children:"/dashboard"}),"). Used for routing and active state detection."]})},{property:"href",type:"string?",required:"No",description:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"External URL"})," for redirection (e.g.,"," ",e.jsx("code",{children:"https://example.com"}),"). If provided, clicking will redirect to this URL instead of using React Router. Falls back to"," ",e.jsx("code",{children:"path"})," if not provided."]})},{property:"component",type:"JSX.Element?",required:"No",description:e.jsxs(e.Fragment,{children:["React component to render when this route is active. Required for automatic routing. Not needed if using ",e.jsx("code",{children:"customRoutes"}),"."]})},{property:"icon",type:"React.ReactNode?",required:"No",description:"Icon element to display next to the menu item name (typically a Lucide icon)"},{property:"dropdownItems",type:"DropdownItemProps[]?",required:"No",description:"Array of sub-menu items for nested navigation. Creates a dropdown menu when provided."},{property:"isActive",type:"boolean?",required:"No",description:"Manually set active state. Usually handled automatically by matching the current pathname."},{property:"hide",type:"boolean?",required:"No",description:"Hide this menu item from navigation (useful for conditional rendering)"},{property:"onClick",type:"() => void?",required:"No",description:"Callback function executed when the menu item is clicked"}];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:"MenuItems Guide"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Complete guide to configuring menu items for navigation and routing"})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"MenuItem Properties",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Each menu item is an object with the following properties:"}),e.jsx(t.BasicTable,{columns:s.map(i=>({...i,render:(n,c)=>i.key==="property"?e.jsx("code",{className:"text-xs text-brand",children:String(n??"")}):i.key==="type"?e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(n??"")}):i.key==="required"?e.jsx(t.Badge,{variant:"outline",className:`text-xs ${n==="Yes"?"":"bg-gray-200"}`,children:String(n??"")}):i.key==="description"?e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:n}):String(n??"")})),data:o,containerClassName:"mb-4"}),e.jsx(t.Alert,{variant:"info",children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[e.jsx(a.Info,{className:"h-4 w-4"}),"Important: path vs href"]}),e.jsxs("div",{className:"text-sm mt-1",children:[e.jsx("strong",{children:"path"})," is used for internal React Router navigation and active state detection. ",e.jsx("strong",{children:"href"})," ","is for external URLs (starts with ",e.jsx("code",{children:"http://"})," or"," ",e.jsx("code",{children:"https://"}),"). If both are provided,"," ",e.jsx("code",{children:"href"})," takes precedence for navigation, but"," ",e.jsx("code",{children:"path"})," is still used for active state matching."]})]})})]})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"MenuItems Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"1. Simple Menu Item"}),e.jsx(t.CodeBlock,{language:"tsx",code:`const menuItems = [
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-Cj89iBVR.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const s=[{key:"property",label:"Property"},{key:"type",label:"Type"},{key:"required",label:"Required"},{key:"description",label:"Description"}],o=[{property:"name",type:"string",required:"Yes",description:"Display name of the menu item"},{property:"path",type:"string",required:"Yes",description:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"Internal route path"})," for React Router navigation (e.g., ",e.jsx("code",{children:"/dashboard"}),"). Used for routing and active state detection."]})},{property:"href",type:"string?",required:"No",description:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"External URL"})," for redirection (e.g.,"," ",e.jsx("code",{children:"https://example.com"}),"). If provided, clicking will redirect to this URL instead of using React Router. Falls back to"," ",e.jsx("code",{children:"path"})," if not provided."]})},{property:"component",type:"JSX.Element?",required:"No",description:e.jsxs(e.Fragment,{children:["React component to render when this route is active. Required for automatic routing. Not needed if using ",e.jsx("code",{children:"customRoutes"}),"."]})},{property:"icon",type:"React.ReactNode?",required:"No",description:"Icon element to display next to the menu item name (typically a Lucide icon)"},{property:"dropdownItems",type:"DropdownItemProps[]?",required:"No",description:"Array of sub-menu items for nested navigation. Creates a dropdown menu when provided."},{property:"isActive",type:"boolean?",required:"No",description:"Manually set active state. Usually handled automatically by matching the current pathname."},{property:"hide",type:"boolean?",required:"No",description:"Hide this menu item from navigation (useful for conditional rendering)"},{property:"onClick",type:"() => void?",required:"No",description:"Callback function executed when the menu item is clicked"}];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:"MenuItems Guide"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Complete guide to configuring menu items for navigation and routing"})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"MenuItem Properties",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Each menu item is an object with the following properties:"}),e.jsx(t.BasicTable,{columns:s.map(i=>({...i,render:(n,c)=>i.key==="property"?e.jsx("code",{className:"text-xs text-brand",children:String(n??"")}):i.key==="type"?e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(n??"")}):i.key==="required"?e.jsx(t.Badge,{variant:"outline",className:`text-xs ${n==="Yes"?"":"bg-gray-200"}`,children:String(n??"")}):i.key==="description"?e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:n}):String(n??"")})),data:o,containerClassName:"mb-4"}),e.jsx(t.Alert,{variant:"info",children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[e.jsx(a.Info,{className:"h-4 w-4"}),"Important: path vs href"]}),e.jsxs("div",{className:"text-sm mt-1",children:[e.jsx("strong",{children:"path"})," is used for internal React Router navigation and active state detection. ",e.jsx("strong",{children:"href"})," ","is for external URLs (starts with ",e.jsx("code",{children:"http://"})," or"," ",e.jsx("code",{children:"https://"}),"). If both are provided,"," ",e.jsx("code",{children:"href"})," takes precedence for navigation, but"," ",e.jsx("code",{children:"path"})," is still used for active state matching."]})]})})]})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"MenuItems Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"1. Simple Menu Item"}),e.jsx(t.CodeBlock,{language:"tsx",code:`const menuItems = [
   {
     name: 'Dashboard',
     path: '/dashboard',

package/{MenuItemsGuideSection-DtqEz3te.mjs → MenuItemsGuideSection-Dl7WlJPq.mjs}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { T as n, C as s, a as c, B as l, D as p, a4 as h, c as a } from "./index-DCf83AyI.mjs";
+import { T as n, C as s, a as c, B as l, D as p, a4 as h, c as a } from "./index-DAzR4tRy.mjs";
 import { Info as u } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{ModalSection-DoA3JVZO.mjs → ModalSection-3fV5mNMe.mjs}

@@ -1,6 +1,6 @@
 import { jsxs as o, Fragment as p, jsx as e } from "react/jsx-runtime";
 import { useState as m } from "react";
-import { T as s, C as l, a, s as d, Q as c, B as u, c as h } from "./index-DCf83AyI.mjs";
+import { T as s, C as l, a, s as d, Q as c, B as u, c as h } from "./index-DAzR4tRy.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/{ModalSection-vV4oaIXq.js → ModalSection-eRNTuRpQ.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react-dom");const d=()=>{const[o,n]=r.useState(!1),a=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const l=String(s);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],i=[{prop:"isOpen",type:"boolean",default:"required",description:"Whether the modal is open"},{prop:"setIsOpen",type:"(isOpen: boolean) => void",default:"required",description:"Function to control modal state"},{prop:"closeable",type:"boolean",default:"true",description:"Whether the modal can be closed"},{prop:"hideButtons",type:"boolean",default:"false",description:"Hide default buttons"},{prop:"text",type:"{ title?: string; content?: string; button?: string; backButton?: string }",default:"-",description:"Text content for modal"},{prop:"onClose",type:"() => void",default:"-",description:"Callback when modal closes"},{prop:"onSubmit",type:"() => void",default:"-",description:"Callback when submit button is clicked"}];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:"Modal"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A modal dialog component for displaying content in an overlay with customizable buttons and close functionality."})]}),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-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic Modal"}),e.jsx(t.Button,{onClick:()=>n(!0),children:"Open Modal"}),e.jsx(t.Modal,{isOpen:o,setIsOpen:n,text:{title:"Modal Title",content:"This is the modal content.",button:"Confirm"}})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Modal with Custom Content"}),e.jsx(t.Button,{onClick:()=>n(!0),children:"Open Custom Modal"}),e.jsx(t.Modal,{isOpen:o,setIsOpen:n,text:{title:"Custom Modal"},children:e.jsx(t.Typography,{tag:"p",children:"Custom content goes here"})})]})]})})})}),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:a,data:i})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",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 { Modal, Button } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react-dom");const d=()=>{const[o,n]=r.useState(!1),a=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const l=String(s);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],i=[{prop:"isOpen",type:"boolean",default:"required",description:"Whether the modal is open"},{prop:"setIsOpen",type:"(isOpen: boolean) => void",default:"required",description:"Function to control modal state"},{prop:"closeable",type:"boolean",default:"true",description:"Whether the modal can be closed"},{prop:"hideButtons",type:"boolean",default:"false",description:"Hide default buttons"},{prop:"text",type:"{ title?: string; content?: string; button?: string; backButton?: string }",default:"-",description:"Text content for modal"},{prop:"onClose",type:"() => void",default:"-",description:"Callback when modal closes"},{prop:"onSubmit",type:"() => void",default:"-",description:"Callback when submit button is clicked"}];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:"Modal"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A modal dialog component for displaying content in an overlay with customizable buttons and close functionality."})]}),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-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic Modal"}),e.jsx(t.Button,{onClick:()=>n(!0),children:"Open Modal"}),e.jsx(t.Modal,{isOpen:o,setIsOpen:n,text:{title:"Modal Title",content:"This is the modal content.",button:"Confirm"}})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Modal with Custom Content"}),e.jsx(t.Button,{onClick:()=>n(!0),children:"Open Custom Modal"}),e.jsx(t.Modal,{isOpen:o,setIsOpen:n,text:{title:"Custom Modal"},children:e.jsx(t.Typography,{tag:"p",children:"Custom content goes here"})})]})]})})})}),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:a,data:i})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",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 { Modal, Button } from '@e-burgos/tucu-ui';
 import { useState } from 'react';
 
 function MyComponent() {

package/{NFTGridSection-DmpbDmFp.js → NFTGridSection-CRvfnF5Y.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=require("./collection-1-BIsLOX9N.js"),o=require("./1-CArqgiQa.js"),n=()=>{const i=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const a=String(t);return a==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:a})}},{key:"description",label:"Description"}],s=[{prop:"author",type:"string",default:"required",description:"NFT author/creator name"},{prop:"authorImage",type:"string",default:"required",description:"URL to author avatar image"},{prop:"image",type:"string",default:"required",description:"URL to NFT image"},{prop:"name",type:"string",default:"required",description:"NFT name"},{prop:"collection",type:"string",default:"required",description:"Collection name"},{prop:"price",type:"string",default:"required",description:"NFT price"},{prop:"profilePath",type:"string",default:"'/'",description:"Path to profile page"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(r.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"NFTGrid"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Grid card component for displaying NFT items with author information, image, collection, and price."})]}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Basic NFT"}),e.jsx(r.NFTGrid,{author:"CryptoPunk",authorImage:o.avatar1Img,image:l.collection1Img,name:"CryptoPunk #1234",collection:"Crypto Punks",price:"45 ETH"})]})})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.BasicTable,{columns:i,data:s})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { NFTGrid } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=require("./collection-1-BIsLOX9N.js"),o=require("./1-CArqgiQa.js"),n=()=>{const i=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const a=String(t);return a==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:a})}},{key:"description",label:"Description"}],s=[{prop:"author",type:"string",default:"required",description:"NFT author/creator name"},{prop:"authorImage",type:"string",default:"required",description:"URL to author avatar image"},{prop:"image",type:"string",default:"required",description:"URL to NFT image"},{prop:"name",type:"string",default:"required",description:"NFT name"},{prop:"collection",type:"string",default:"required",description:"Collection name"},{prop:"price",type:"string",default:"required",description:"NFT price"},{prop:"profilePath",type:"string",default:"'/'",description:"Path to profile page"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(r.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"NFTGrid"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Grid card component for displaying NFT items with author information, image, collection, and price."})]}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Basic NFT"}),e.jsx(r.NFTGrid,{author:"CryptoPunk",authorImage:o.avatar1Img,image:l.collection1Img,name:"CryptoPunk #1234",collection:"Crypto Punks",price:"45 ETH"})]})})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.BasicTable,{columns:i,data:s})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { NFTGrid } from '@e-burgos/tucu-ui';
 
 <NFTGrid
   author="CryptoPunk"

package/{NFTGridSection-BiqoU8o6.mjs → NFTGridSection-CZtLuyxm.mjs}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { T as i, C as t, a as o, N as n, B as p, c } from "./index-DCf83AyI.mjs";
+import { T as i, C as t, a as o, N as n, B as p, c } from "./index-DAzR4tRy.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/{NestedRoutesSection-BjrHulvK.mjs → NestedRoutesSection-YTdNVbSk.mjs}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { C as t, a as i, T as a, c as n, a4 as o } from "./index-DCf83AyI.mjs";
+import { C as t, a as i, T as a, c as n, a4 as o } from "./index-DAzR4tRy.mjs";
 import { Component as c, MousePointerClick as r, FileText as l, Wrench as d, Zap as m, Info as p } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{NestedRoutesSection-CwHxcPIB.js → NestedRoutesSection-uykhv0dq.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-BoEJRnmP.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Nested Routes & Dropdown Menus",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Create hierarchical navigation with unlimited nesting levels. Each menu item can have dropdown sub-items that appear in the sidebar navigation."}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Nested Routes Example"}),e.jsx(s.CodeBlock,{language:"tsx",code:`const menuItems = [
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-Cj89iBVR.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Nested Routes & Dropdown Menus",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Create hierarchical navigation with unlimited nesting levels. Each menu item can have dropdown sub-items that appear in the sidebar navigation."}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Nested Routes Example"}),e.jsx(s.CodeBlock,{language:"tsx",code:`const menuItems = [
   {
     name: 'Components',
     path: '/components',

package/{NotificationCardSection-yrGz8e61.mjs → NotificationCardSection-TFhZR2E5.mjs}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { T as r, C as t, a as o, a5 as n, B as d, c as p } from "./index-DCf83AyI.mjs";
+import { T as r, C as t, a as o, a5 as n, B as d, c as p } from "./index-DAzR4tRy.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/{NotificationCardSection-BTvGBUp5.js → NotificationCardSection-vwCuNn1e.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=require("./1-CArqgiQa.js"),n=()=>{const o=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const r=String(t);return r==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:r})}},{key:"description",label:"Description"}],s=[{prop:"type",type:"'followed' | 'liked' | 'purchased'",default:"required",description:"Type of notification"},{prop:"actor",type:"{ name: string; avatar: string }",default:"required",description:"Actor information"},{prop:"time",type:"string",default:"required",description:"Time of the notification"},{prop:"url",type:"string",default:"required",description:"Link URL"},{prop:"notifier",type:"string",default:"required",description:"What was notified"}];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:"NotificationCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A notification card component for displaying user activity notifications with avatar, action type, and timestamp."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Followed Notification"}),e.jsx(a.NotificationCard,{type:"followed",actor:{name:"john_doe",avatar:i.avatar1Img},time:"2 hours ago",url:"/profile/john_doe",notifier:"you"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Liked Notification"}),e.jsx(a.NotificationCard,{type:"liked",actor:{name:"jane_smith",avatar:i.avatar1Img},time:"5 minutes ago",url:"/post/123",notifier:"your post"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Purchased Notification"}),e.jsx(a.NotificationCard,{type:"purchased",actor:{name:"alice_wonder",avatar:i.avatar1Img},time:"1 day ago",url:"/item/456",notifier:"your item"})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:o,data:s})})})}),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 { NotificationCard } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=require("./1-CArqgiQa.js"),n=()=>{const o=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const r=String(t);return r==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:r})}},{key:"description",label:"Description"}],s=[{prop:"type",type:"'followed' | 'liked' | 'purchased'",default:"required",description:"Type of notification"},{prop:"actor",type:"{ name: string; avatar: string }",default:"required",description:"Actor information"},{prop:"time",type:"string",default:"required",description:"Time of the notification"},{prop:"url",type:"string",default:"required",description:"Link URL"},{prop:"notifier",type:"string",default:"required",description:"What was notified"}];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:"NotificationCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A notification card component for displaying user activity notifications with avatar, action type, and timestamp."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Followed Notification"}),e.jsx(a.NotificationCard,{type:"followed",actor:{name:"john_doe",avatar:i.avatar1Img},time:"2 hours ago",url:"/profile/john_doe",notifier:"you"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Liked Notification"}),e.jsx(a.NotificationCard,{type:"liked",actor:{name:"jane_smith",avatar:i.avatar1Img},time:"5 minutes ago",url:"/post/123",notifier:"your post"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Purchased Notification"}),e.jsx(a.NotificationCard,{type:"purchased",actor:{name:"alice_wonder",avatar:i.avatar1Img},time:"1 day ago",url:"/item/456",notifier:"your item"})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:o,data:s})})})}),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 { NotificationCard } from '@e-burgos/tucu-ui';
 
 // Followed notification
 <NotificationCard

package/{PanelActionCardSection-DtKYzJRz.mjs → PanelActionCardSection-BPKAmVjO.mjs}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { T as a, C as n, a as i, u as s, B as c, c as d } from "./index-DCf83AyI.mjs";
+import { T as a, C as n, a as i, u as s, B as c, c as d } from "./index-DAzR4tRy.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/{PanelActionCardSection-De_RT7Xx.js → PanelActionCardSection-CahHbMCf.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>{const n=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const l=String(t);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],r=[{prop:"title",type:"string",default:"required",description:"Title of the panel"},{prop:"actions",type:"Array<{ label: string; variant?: string; color?: string; size?: string; onClick: () => void }>",default:"-",description:"Array of action buttons"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display in the scrollable area"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];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:"PanelActionCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A panel card component with a scrollable content area and action buttons at the bottom."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Panel with Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Title",actions:[{label:"Cancel",variant:"ghost",onClick:()=>console.log("Cancel")},{label:"Save",variant:"solid",color:"primary",onClick:()=>console.log("Save")}],children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Content line 1"}),e.jsx(a.Typography,{tag:"p",children:"Content line 2"}),e.jsx(a.Typography,{tag:"p",children:"Content line 3"})]})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Without Actions",children:e.jsx("div",{className:"space-y-2",children:e.jsx(a.Typography,{tag:"p",children:"This panel has no action buttons."})})})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:n,data:r})})})}),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 { PanelActionCard, Typography } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>{const n=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const l=String(t);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],r=[{prop:"title",type:"string",default:"required",description:"Title of the panel"},{prop:"actions",type:"Array<{ label: string; variant?: string; color?: string; size?: string; onClick: () => void }>",default:"-",description:"Array of action buttons"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display in the scrollable area"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];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:"PanelActionCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A panel card component with a scrollable content area and action buttons at the bottom."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Panel with Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Title",actions:[{label:"Cancel",variant:"ghost",onClick:()=>console.log("Cancel")},{label:"Save",variant:"solid",color:"primary",onClick:()=>console.log("Save")}],children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Content line 1"}),e.jsx(a.Typography,{tag:"p",children:"Content line 2"}),e.jsx(a.Typography,{tag:"p",children:"Content line 3"})]})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Without Actions",children:e.jsx("div",{className:"space-y-2",children:e.jsx(a.Typography,{tag:"p",children:"This panel has no action buttons."})})})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:n,data:r})})})}),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 { PanelActionCard, Typography } from '@e-burgos/tucu-ui';
 
 // With actions
 <PanelActionCard

package/{PanelCardSection-BhHyd_RU.mjs → PanelCardSection-DQM97Xvm.mjs}

@@ -1,5 +1,5 @@
 import { jsxs as l, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { T as a, C as r, a as n, v as d, B as c, c as p } from "./index-DCf83AyI.mjs";
+import { T as a, C as r, a as n, v as d, B as c, c as p } from "./index-DAzR4tRy.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/{PanelCardSection-BwdNRgHL.js → PanelCardSection-OBsiDHxD.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const r=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const l=String(t);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],s=[{prop:"title",type:"string",default:"required",description:"Title of the panel"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display in the scrollable area"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];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:"PanelCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A simple panel card component with a title header and scrollable content area."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"space-y-4",children:e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Panel Card"}),e.jsx(a.PanelCard,{title:"Panel Title",children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Content line 1"}),e.jsx(a.Typography,{tag:"p",children:"Content line 2"}),e.jsx(a.Typography,{tag:"p",children:"Content line 3"}),e.jsx(a.Typography,{tag:"p",children:"Content line 4"}),e.jsx(a.Typography,{tag:"p",children:"Content line 5"})]})})]})})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:r,data:s})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { PanelCard, Typography } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const r=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const l=String(t);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],s=[{prop:"title",type:"string",default:"required",description:"Title of the panel"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display in the scrollable area"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];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:"PanelCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A simple panel card component with a title header and scrollable content area."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"space-y-4",children:e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Panel Card"}),e.jsx(a.PanelCard,{title:"Panel Title",children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Content line 1"}),e.jsx(a.Typography,{tag:"p",children:"Content line 2"}),e.jsx(a.Typography,{tag:"p",children:"Content line 3"}),e.jsx(a.Typography,{tag:"p",children:"Content line 4"}),e.jsx(a.Typography,{tag:"p",children:"Content line 5"})]})})]})})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:r,data:s})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { PanelCard, Typography } from '@e-burgos/tucu-ui';
 
 // Basic usage
 <PanelCard title="Panel Title">

package/{ParamTabSection-D-64gIJ0.js → ParamTabSection-CVJ7p8sy.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-BoEJRnmP.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const p=()=>{const i=[{title:"Overview",path:"overview"},{title:"Details",path:"details"},{title:"Settings",path:"settings"}],l=[{title:"Dashboard",path:"dashboard",icon:e.jsx(t.Home,{size:16})},{title:"Analytics",path:"analytics",icon:e.jsx(t.BarChart,{size:16})},{title:"Reports",path:"reports",icon:e.jsx(t.FileText,{size:16})},{title:"Settings",path:"settings",icon:e.jsx(t.Settings,{size:16})}],o=[{title:"Profile",path:"profile",icon:e.jsx(t.User,{size:16})},{title:"Notifications",path:"notifications",icon:e.jsx(t.Bell,{size:16})},{title:"Settings",path:"settings",icon:e.jsx(t.Settings,{size:16})}],r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const n=String(s);return n==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:n})}},{key:"description",label:"Description"}],c=[{prop:"tabMenu",type:"TabMenuItem[]",default:"required",description:"Array of tab menu items with title, path, and optional icon"},{prop:"children",type:"React.ReactNode",default:"required",description:"TabPanel components for each tab content"},{prop:"variant",type:"'underline' | 'pills' | 'bordered' | 'solid'",default:"'underline'",description:"Visual style variant of the tabs"},{prop:"size",type:"'small' | 'medium' | 'large'",default:"'medium'",description:"Size of the tab items"},{prop:"tabListClassName",type:"string",default:"-",description:"Additional CSS classes for tab list container"},{prop:"showMobileSelect",type:"boolean",default:"true",description:"Whether to show TabSelect on mobile devices"}],d=[{prop:"title",type:"React.ReactNode",default:"required",description:"Tab label (can be text, JSX, or components)"},{prop:"path",type:"string",default:"required",description:'Unique path for URL parameter (e.g., "overview")'},{prop:"icon",type:"React.ReactNode",default:"-",description:"Optional icon to display before tab label"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ParamTab"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A powerful tab component that automatically syncs with URL query parameters and switches to a dropdown selector on mobile devices for optimal responsive behavior."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Underline Variant (Default)"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Classic underline style with animated indicator. URL syncs with ?view=overview, ?view=details, etc."}),e.jsxs(a.ParamTab,{tabMenu:i,variant:"underline",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Overview Dashboard"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Main dashboard content with key metrics and overview information. The URL parameter updates to ?view=overview when this tab is active."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Detailed Information"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Comprehensive details and in-depth analysis. URL parameter: ?view=details"})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Configuration Settings"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your preferences and application settings. URL parameter: ?view=settings"})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Pills Variant with Icons"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Modern rounded pills with icon support for enhanced visual clarity."}),e.jsxs(a.ParamTab,{tabMenu:l,variant:"pills",size:"medium",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.Home,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Dashboard Home"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Welcome to your dashboard! Here you'll find a summary of your most important information."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.BarChart,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Analytics Overview"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Track your performance with detailed analytics and insights."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.FileText,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Reports Center"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Generate and view comprehensive reports for your data."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.Settings,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Application Settings"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Customize your application preferences and configuration."})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Bordered Variant"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Distinct bordered style with highlighted selection state."}),e.jsxs(a.ParamTab,{tabMenu:o,variant:"bordered",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"User Profile"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your personal information and profile settings."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Notifications"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Configure how and when you receive notifications."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Account Settings"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your account security and privacy settings."})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid Variant (Small Size)"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Compact solid background style perfect for space-constrained layouts."}),e.jsxs(a.ParamTab,{tabMenu:i,variant:"solid",size:"small",children:[e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Compact overview content with small tab size."})})}),e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Detailed information in a compact format."})})}),e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Settings panel with space-efficient design."})})})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Key Features",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"link",children:"🔗"})," ","URL Synchronization"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically syncs tab state with URL query parameters (e.g., ?view=overview). This enables:"}),e.jsxs("ul",{className:"list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1 ml-4",children:[e.jsx("li",{children:"Deep linking to specific tabs"}),e.jsx("li",{children:"Browser back/forward navigation"}),e.jsx("li",{children:"Shareable URLs with selected tab state"}),e.jsx("li",{children:"Bookmark support for specific views"})]})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"mobile",children:"📱"})," ","Responsive Mobile Adaptation"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically switches to TabSelect dropdown on mobile devices (xs, sm breakpoints) for optimal space usage and better UX."}),e.jsx(a.CardContainer,{className:"p-4 bg-blue-50 dark:bg-blue-900/20",children:e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:[e.jsx("span",{role:"img","aria-label":"tip",children:"💡"})," ",e.jsx("span",{className:"font-semibold",children:"Tip:"})," Resize your browser window to see the automatic switch between tab bar and dropdown selector!"]})})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"styles",children:"🎨"})," ","Multiple Style Variants"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Choose from 4 distinct visual styles (underline, pills, bordered, solid) and 3 sizes (small, medium, large) to match your design system."})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"icons",children:"✨"})," ","Icon Support"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Add icons to tabs for better visual communication and improved scannability. Works seamlessly with Lucide Icons."})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"TabMenuItem Interface",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:r,data:d})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:r,data:c})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-Cj89iBVR.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const p=()=>{const i=[{title:"Overview",path:"overview"},{title:"Details",path:"details"},{title:"Settings",path:"settings"}],l=[{title:"Dashboard",path:"dashboard",icon:e.jsx(t.Home,{size:16})},{title:"Analytics",path:"analytics",icon:e.jsx(t.BarChart,{size:16})},{title:"Reports",path:"reports",icon:e.jsx(t.FileText,{size:16})},{title:"Settings",path:"settings",icon:e.jsx(t.Settings,{size:16})}],o=[{title:"Profile",path:"profile",icon:e.jsx(t.User,{size:16})},{title:"Notifications",path:"notifications",icon:e.jsx(t.Bell,{size:16})},{title:"Settings",path:"settings",icon:e.jsx(t.Settings,{size:16})}],r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const n=String(s);return n==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:n})}},{key:"description",label:"Description"}],c=[{prop:"tabMenu",type:"TabMenuItem[]",default:"required",description:"Array of tab menu items with title, path, and optional icon"},{prop:"children",type:"React.ReactNode",default:"required",description:"TabPanel components for each tab content"},{prop:"variant",type:"'underline' | 'pills' | 'bordered' | 'solid'",default:"'underline'",description:"Visual style variant of the tabs"},{prop:"size",type:"'small' | 'medium' | 'large'",default:"'medium'",description:"Size of the tab items"},{prop:"tabListClassName",type:"string",default:"-",description:"Additional CSS classes for tab list container"},{prop:"showMobileSelect",type:"boolean",default:"true",description:"Whether to show TabSelect on mobile devices"}],d=[{prop:"title",type:"React.ReactNode",default:"required",description:"Tab label (can be text, JSX, or components)"},{prop:"path",type:"string",default:"required",description:'Unique path for URL parameter (e.g., "overview")'},{prop:"icon",type:"React.ReactNode",default:"-",description:"Optional icon to display before tab label"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ParamTab"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A powerful tab component that automatically syncs with URL query parameters and switches to a dropdown selector on mobile devices for optimal responsive behavior."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Underline Variant (Default)"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Classic underline style with animated indicator. URL syncs with ?view=overview, ?view=details, etc."}),e.jsxs(a.ParamTab,{tabMenu:i,variant:"underline",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Overview Dashboard"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Main dashboard content with key metrics and overview information. The URL parameter updates to ?view=overview when this tab is active."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Detailed Information"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Comprehensive details and in-depth analysis. URL parameter: ?view=details"})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Configuration Settings"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your preferences and application settings. URL parameter: ?view=settings"})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Pills Variant with Icons"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Modern rounded pills with icon support for enhanced visual clarity."}),e.jsxs(a.ParamTab,{tabMenu:l,variant:"pills",size:"medium",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.Home,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Dashboard Home"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Welcome to your dashboard! Here you'll find a summary of your most important information."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.BarChart,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Analytics Overview"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Track your performance with detailed analytics and insights."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.FileText,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Reports Center"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Generate and view comprehensive reports for your data."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.Settings,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Application Settings"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Customize your application preferences and configuration."})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Bordered Variant"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Distinct bordered style with highlighted selection state."}),e.jsxs(a.ParamTab,{tabMenu:o,variant:"bordered",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"User Profile"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your personal information and profile settings."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Notifications"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Configure how and when you receive notifications."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Account Settings"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your account security and privacy settings."})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid Variant (Small Size)"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Compact solid background style perfect for space-constrained layouts."}),e.jsxs(a.ParamTab,{tabMenu:i,variant:"solid",size:"small",children:[e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Compact overview content with small tab size."})})}),e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Detailed information in a compact format."})})}),e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Settings panel with space-efficient design."})})})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Key Features",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"link",children:"🔗"})," ","URL Synchronization"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically syncs tab state with URL query parameters (e.g., ?view=overview). This enables:"}),e.jsxs("ul",{className:"list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1 ml-4",children:[e.jsx("li",{children:"Deep linking to specific tabs"}),e.jsx("li",{children:"Browser back/forward navigation"}),e.jsx("li",{children:"Shareable URLs with selected tab state"}),e.jsx("li",{children:"Bookmark support for specific views"})]})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"mobile",children:"📱"})," ","Responsive Mobile Adaptation"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically switches to TabSelect dropdown on mobile devices (xs, sm breakpoints) for optimal space usage and better UX."}),e.jsx(a.CardContainer,{className:"p-4 bg-blue-50 dark:bg-blue-900/20",children:e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:[e.jsx("span",{role:"img","aria-label":"tip",children:"💡"})," ",e.jsx("span",{className:"font-semibold",children:"Tip:"})," Resize your browser window to see the automatic switch between tab bar and dropdown selector!"]})})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"styles",children:"🎨"})," ","Multiple Style Variants"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Choose from 4 distinct visual styles (underline, pills, bordered, solid) and 3 sizes (small, medium, large) to match your design system."})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"icons",children:"✨"})," ","Icon Support"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Add icons to tabs for better visual communication and improved scannability. Works seamlessly with Lucide Icons."})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"TabMenuItem Interface",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:r,data:d})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:r,data:c})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
 import { Home, Settings, User } from 'lucide-react';
 
 // Basic usage with URL sync

package/{ParamTabSection-DW95bROn.mjs → ParamTabSection-Doy0IQ4S.mjs}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as y, jsx as e } from "react/jsx-runtime";
-import { T as a, C as i, a as l, ae as n, ac as r, B as h, c as f } from "./index-DCf83AyI.mjs";
+import { T as a, C as i, a as l, ae as n, ac as r, B as h, c as f } from "./index-DAzR4tRy.mjs";
 import { Home as p, BarChart as b, FileText as g, Settings as c, User as v, Bell as N } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{PinCodeSection-DRvKUePb.mjs → PinCodeSection-BUq70uA5.mjs}

@@ -1,6 +1,6 @@
 import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
 import { useState as h } from "react";
-import { T as l, C as i, a as r, P as s, B as p, c as m } from "./index-DCf83AyI.mjs";
+import { T as l, C as i, a as r, P as s, B as p, c as m } from "./index-DAzR4tRy.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/{PinCodeSection-DLxT1qlT.js → PinCodeSection-DObGVIFj.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),s=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react-dom");const o=()=>{const[i,r]=d.useState(""),l=[{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 n=String(a);return n==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:n})}},{key:"description",label:"Description"}],t=[{prop:"length",type:"number",default:"required",description:"Number of pin code digits"},{prop:"value",type:"string",default:"-",description:"Current pin code value"},{prop:"onChange",type:"(value: string) => void",default:"-",description:"Callback when pin code changes"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the pin code inputs"},{prop:"size",type:"'sm' | 'md' | 'lg' | 'xl'",default:"'md'",description:"Size of the pin code inputs"},{prop:"color",type:"'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'primary'",description:"Color theme of the pin code inputs"},{prop:"type",type:"'text' | 'number'",default:"'text'",description:"Input type for pin code fields"},{prop:"mask",type:"boolean",default:"false",description:"Mask the pin code values"},{prop:"center",type:"boolean",default:"false",description:"Center the pin code horizontally"},{prop:"disabled",type:"boolean",default:"false",description:"Disables all pin code inputs"},{prop:"error",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"string",default:"-",description:"Helper text displayed below the pin code"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"PinCode"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A pin code input component for entering numeric codes digit by digit."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"4 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"6 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Verification Code"}),e.jsx(s.PinCode,{length:6,value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Security Code"}),e.jsx(s.PinCode,{length:4,helperText:"Enter the 4-digit code",value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,error:"Invalid pin code",value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,disabled:!0})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Ghost (default)"}),e.jsx(s.PinCode,{length:4,variant:"ghost"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Solid"}),e.jsx(s.PinCode,{length:4,variant:"solid"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Transparent"}),e.jsx(s.PinCode,{length:4,variant:"transparent"})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Colors & Sizes",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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Different Colors"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Primary"}),e.jsx(s.PinCode,{length:4,color:"primary"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Danger"}),e.jsx(s.PinCode,{length:4,color:"danger"})]})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Different Sizes"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Small"}),e.jsx(s.PinCode,{length:4,size:"sm"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Medium"}),e.jsx(s.PinCode,{length:4,size:"md"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Large"}),e.jsx(s.PinCode,{length:4,size:"lg"})]})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:l,data:t})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { PinCode } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),s=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react-dom");const o=()=>{const[i,r]=d.useState(""),l=[{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 n=String(a);return n==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:n})}},{key:"description",label:"Description"}],t=[{prop:"length",type:"number",default:"required",description:"Number of pin code digits"},{prop:"value",type:"string",default:"-",description:"Current pin code value"},{prop:"onChange",type:"(value: string) => void",default:"-",description:"Callback when pin code changes"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the pin code inputs"},{prop:"size",type:"'sm' | 'md' | 'lg' | 'xl'",default:"'md'",description:"Size of the pin code inputs"},{prop:"color",type:"'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'primary'",description:"Color theme of the pin code inputs"},{prop:"type",type:"'text' | 'number'",default:"'text'",description:"Input type for pin code fields"},{prop:"mask",type:"boolean",default:"false",description:"Mask the pin code values"},{prop:"center",type:"boolean",default:"false",description:"Center the pin code horizontally"},{prop:"disabled",type:"boolean",default:"false",description:"Disables all pin code inputs"},{prop:"error",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"string",default:"-",description:"Helper text displayed below the pin code"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"PinCode"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A pin code input component for entering numeric codes digit by digit."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"4 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"6 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Verification Code"}),e.jsx(s.PinCode,{length:6,value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Security Code"}),e.jsx(s.PinCode,{length:4,helperText:"Enter the 4-digit code",value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,error:"Invalid pin code",value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,disabled:!0})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Ghost (default)"}),e.jsx(s.PinCode,{length:4,variant:"ghost"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Solid"}),e.jsx(s.PinCode,{length:4,variant:"solid"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Transparent"}),e.jsx(s.PinCode,{length:4,variant:"transparent"})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Colors & Sizes",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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Different Colors"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Primary"}),e.jsx(s.PinCode,{length:4,color:"primary"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Danger"}),e.jsx(s.PinCode,{length:4,color:"danger"})]})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Different Sizes"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Small"}),e.jsx(s.PinCode,{length:4,size:"sm"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Medium"}),e.jsx(s.PinCode,{length:4,size:"md"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Large"}),e.jsx(s.PinCode,{length:4,size:"lg"})]})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:l,data:t})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { PinCode } from '@e-burgos/tucu-ui';
 
 <PinCode
   length={4}

package/{ProgressbarSection-CRCYjRpw.js → ProgressbarSection-CH46pHrg.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),s=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react-dom");const n=()=>{const[r,l]=c.useState(45),o=[{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 i=String(a);return i==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],t=[{prop:"value",type:"number",default:"-",description:"Percentage value (0-100)"},{prop:"label",type:"React.ReactNode",default:"''",description:"Label to display inside the bar"},{prop:"size",type:"'sm' | 'DEFAULT' | 'lg' | 'xl'",default:"'DEFAULT'",description:"Size of the progressbar"},{prop:"rounded",type:"'none' | 'sm' | 'md' | 'lg' | 'DEFAULT'",default:"'DEFAULT'",description:"Border radius"},{prop:"color",type:"'DEFAULT' | 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'DEFAULT'",description:"Color variant"},{prop:"variant",type:"'solid' | 'flat'",default:"'solid'",description:"Visual variant"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Progressbar"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A progress bar component for displaying completion status with customizable colors, sizes, and variants."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Basic Progressbar"}),e.jsx(s.Progressbar,{value:r})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Label"}),e.jsx(s.Progressbar,{value:r,label:`${r}%`,size:"xl"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Interactive Example"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:r,label:`${r}%`,size:"xl"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{onClick:()=>l(Math.max(0,r-10)),className:"px-3 py-1 bg-light-dark rounded border border-gray-300 dark:border-gray-600 hover:opacity-80 transition-opacity",children:"-10"}),e.jsx("button",{onClick:()=>l(Math.min(100,r+10)),className:"px-3 py-1 bg-light-dark rounded border border-gray-300 dark:border-gray-600 hover:opacity-80 transition-opacity",children:"+10"})]})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Colors"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,color:"primary"}),e.jsx(s.Progressbar,{value:60,color:"success"}),e.jsx(s.Progressbar,{value:60,color:"danger"}),e.jsx(s.Progressbar,{value:60,color:"info"}),e.jsx(s.Progressbar,{value:60,color:"warning"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Variants"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,variant:"solid"}),e.jsx(s.Progressbar,{value:60,variant:"flat"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,size:"sm"}),e.jsx(s.Progressbar,{value:60,size:"DEFAULT"}),e.jsx(s.Progressbar,{value:60,size:"lg"}),e.jsx(s.Progressbar,{value:60,size:"xl"})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:o,data:t})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { Progressbar } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),s=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react-dom");const n=()=>{const[r,l]=c.useState(45),o=[{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 i=String(a);return i==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],t=[{prop:"value",type:"number",default:"-",description:"Percentage value (0-100)"},{prop:"label",type:"React.ReactNode",default:"''",description:"Label to display inside the bar"},{prop:"size",type:"'sm' | 'DEFAULT' | 'lg' | 'xl'",default:"'DEFAULT'",description:"Size of the progressbar"},{prop:"rounded",type:"'none' | 'sm' | 'md' | 'lg' | 'DEFAULT'",default:"'DEFAULT'",description:"Border radius"},{prop:"color",type:"'DEFAULT' | 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'DEFAULT'",description:"Color variant"},{prop:"variant",type:"'solid' | 'flat'",default:"'solid'",description:"Visual variant"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Progressbar"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A progress bar component for displaying completion status with customizable colors, sizes, and variants."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Basic Progressbar"}),e.jsx(s.Progressbar,{value:r})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Label"}),e.jsx(s.Progressbar,{value:r,label:`${r}%`,size:"xl"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Interactive Example"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:r,label:`${r}%`,size:"xl"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{onClick:()=>l(Math.max(0,r-10)),className:"px-3 py-1 bg-light-dark rounded border border-gray-300 dark:border-gray-600 hover:opacity-80 transition-opacity",children:"-10"}),e.jsx("button",{onClick:()=>l(Math.min(100,r+10)),className:"px-3 py-1 bg-light-dark rounded border border-gray-300 dark:border-gray-600 hover:opacity-80 transition-opacity",children:"+10"})]})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Colors"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,color:"primary"}),e.jsx(s.Progressbar,{value:60,color:"success"}),e.jsx(s.Progressbar,{value:60,color:"danger"}),e.jsx(s.Progressbar,{value:60,color:"info"}),e.jsx(s.Progressbar,{value:60,color:"warning"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Variants"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,variant:"solid"}),e.jsx(s.Progressbar,{value:60,variant:"flat"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,size:"sm"}),e.jsx(s.Progressbar,{value:60,size:"DEFAULT"}),e.jsx(s.Progressbar,{value:60,size:"lg"}),e.jsx(s.Progressbar,{value:60,size:"xl"})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:o,data:t})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { Progressbar } from '@e-burgos/tucu-ui';
 
 // Basic usage
 <Progressbar value={45} />

package/{ProgressbarSection-CKbkhmQS.mjs → ProgressbarSection-m3qAbDyh.mjs}

@@ -1,6 +1,6 @@
 import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
 import { useState as u } from "react";
-import { T as s, C as i, a as o, $ as r, B as h, c as g } from "./index-DCf83AyI.mjs";
+import { T as s, C as i, a as o, $ as r, B as h, c as g } from "./index-DAzR4tRy.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react-dom";