@e-burgos/tucu-ui 2.0.9 → 2.0.10

package/documentation/{CustomIconsSection-8d02BzFW.js → CustomIconsSection-BNBsaI1Y.js}

@@ -1,6 +1,6 @@
 import { jsxs as o, Fragment as d, jsx as a } from "react/jsx-runtime";
 import { useState as h } from "react";
-import { H as p, T as s, C as w, a as u, B as N, E as g, aN as b, aO as y, f, aP as I, aQ as x, aR as C, aS as k, aT as v, aU as S, aV as T, aW as L, aX as B, aY as E, aZ as P, a_ as F, a$ as U, b0 as M, b1 as $, b2 as j, b3 as D, b4 as G, b5 as H, b6 as V, b7 as R, b8 as W, b9 as z, ba as O, bb as Q, bc as X, bd as Y, be as Z, bf as _, bg as q, bh as A, bi as J, bj as K } from "../index-lfg6LZ1p.js";
+import { H as p, T as s, C as w, a as u, B as N, E as g, aP as b, aQ as y, f, aR as I, aS as x, aT as C, aU as k, aV as v, aW as S, aX as T, aY as L, aZ as B, a_ as E, a$ as P, b0 as F, b1 as U, b2 as M, b3 as $, b4 as j, b5 as D, b6 as G, b7 as H, b8 as V, b9 as R, ba as W, bb as z, bc as Q, bd as X, be as Y, bf as Z, bg as _, bh as q, bi as A, bj as J, bk as K, bl as O } from "../index-19KsCnyX.js";
 import { Palette as aa, Coins as ea, Layout as oa, Share2 as na, Component as sa } from "lucide-react";
 import "react-router-dom";
 import "react-dom";
@@ -76,22 +76,22 @@ const da = () => {
         { name: "Star", component: /* @__PURE__ */ a(R, { className: "w-6 h-6" }) },
         { name: "StarFill", component: /* @__PURE__ */ a(W, { className: "w-6 h-6" }) },
         { name: "Verified", component: /* @__PURE__ */ a(z, { className: "w-6 h-6" }) },
-        { name: "Warning", component: /* @__PURE__ */ a(O, { className: "w-6 h-6" }) },
-        { name: "InfoCircle", component: /* @__PURE__ */ a(Q, { className: "w-6 h-6" }) },
+        { name: "Warning", component: /* @__PURE__ */ a(Q, { className: "w-6 h-6" }) },
+        { name: "InfoCircle", component: /* @__PURE__ */ a(X, { className: "w-6 h-6" }) },
         {
           name: "DocumentIcon",
-          component: /* @__PURE__ */ a(X, { className: "w-6 h-6" })
+          component: /* @__PURE__ */ a(Y, { className: "w-6 h-6" })
         },
-        { name: "BookIcon", component: /* @__PURE__ */ a(Y, { className: "w-6 h-6" }) },
-        { name: "PlayIcon", component: /* @__PURE__ */ a(Z, { className: "w-6 h-6" }) },
-        { name: "ProfileIcon", component: /* @__PURE__ */ a(_, { className: "w-6 h-6" }) },
-        { name: "EyeIcon", component: /* @__PURE__ */ a(q, { className: "w-6 h-6" }) },
+        { name: "BookIcon", component: /* @__PURE__ */ a(Z, { className: "w-6 h-6" }) },
+        { name: "PlayIcon", component: /* @__PURE__ */ a(_, { className: "w-6 h-6" }) },
+        { name: "ProfileIcon", component: /* @__PURE__ */ a(q, { className: "w-6 h-6" }) },
+        { name: "EyeIcon", component: /* @__PURE__ */ a(A, { className: "w-6 h-6" }) },
         {
           name: "EyeSlashIcon",
-          component: /* @__PURE__ */ a(A, { className: "w-6 h-6" })
+          component: /* @__PURE__ */ a(J, { className: "w-6 h-6" })
         },
-        { name: "LockIcon", component: /* @__PURE__ */ a(J, { className: "w-6 h-6" }) },
-        { name: "Unlocked", component: /* @__PURE__ */ a(K, { className: "w-6 h-6" }) }
+        { name: "LockIcon", component: /* @__PURE__ */ a(K, { className: "w-6 h-6" }) },
+        { name: "Unlocked", component: /* @__PURE__ */ a(O, { className: "w-6 h-6" }) }
       ]
     }
   ], r = (e) => {

package/documentation/{DefiAppLogoSection-DeVkbZnS.js → DefiAppLogoSection-CJ_WaEEM.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const a=[{key:"prop",label:"Prop",render:i=>e.jsx("code",{className:"text-xs text-brand",children:String(i)})},{key:"type",label:"Type",render:i=>e.jsx("code",{className:"text-xs",children:String(i)})},{key:"default",label:"Default",render:i=>{const t=String(i);return t==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:t})}},{key:"description",label:"Description"}],r=[{prop:"...SVGAttributes",type:"React.SVGAttributes<SVGElement>",default:"-",description:"All standard SVG attributes are supported"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"DefiAppLogo",description:`An animated brain-inspired logo component designed for DeFi
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const a=[{key:"prop",label:"Prop",render:i=>e.jsx("code",{className:"text-xs text-brand",children:String(i)})},{key:"type",label:"Type",render:i=>e.jsx("code",{className:"text-xs",children:String(i)})},{key:"default",label:"Default",render:i=>{const t=String(i);return t==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:t})}},{key:"description",label:"Description"}],r=[{prop:"...SVGAttributes",type:"React.SVGAttributes<SVGElement>",default:"-",description:"All standard SVG attributes are supported"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"DefiAppLogo",description:`An animated brain-inspired logo component designed for DeFi
           applications, featuring pulsing nodes and signal flows that represent
           financial data processing.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-rose-600 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Diamond,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(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:"Default Animated Logo"}),e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(s.DefiAppLogo,{width:100,height:100})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Different Sizes"}),e.jsxs("div",{className:"flex items-center gap-4 flex-wrap justify-center",children:[e.jsx(s.DefiAppLogo,{width:60,height:60}),e.jsx(s.DefiAppLogo,{width:100,height:100}),e.jsx(s.DefiAppLogo,{width:150,height:150})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom Classes"}),e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(s.DefiAppLogo,{width:120,height:120,className:"opacity-90 hover:opacity-100 transition-opacity"})})]})]})})})}),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:a,data:r})})})}),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 { DefiAppLogo } from '@e-burgos/tucu-ui';
 

package/documentation/{DefiAppLogoSection-BloxEw2r.js → DefiAppLogoSection-bB5g79Z4.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { H as c, C as s, a as o, T as l, ai as t, y as d, c as p, P as m, ah as h, A as f } from "../index-lfg6LZ1p.js";
+import { H as c, C as s, a as o, T as l, ai as t, y as d, c as p, P as m, ah as h, A as f } from "../index-19KsCnyX.js";
 import { Diamond as g } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{DesignPrinciplesSection-DnXrx_3r.js → DesignPrinciplesSection-DeSp3YGO.js}

@@ -1,5 +1,5 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { H as t, T as a, ax as o } from "../index-lfg6LZ1p.js";
+import { H as t, T as a, ax as o } from "../index-19KsCnyX.js";
 import { Compass as n, CheckCircle as l, Minimize2 as r, Layers as c, Eye as m } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{DesignPrinciplesSection-AGfHYdRQ.js → DesignPrinciplesSection-Zl0xFCt6.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const a=[{title:"Consistency",description:"Unified visual language and interaction patterns across all components.",icon:e.jsx(s.CheckCircle,{className:"h-6 w-6"}),iconBgClassName:"from-emerald-500 via-green-500 to-teal-500"},{title:"Simplicity",description:"Clean, intuitive interfaces that reduce cognitive load.",icon:e.jsx(s.Minimize2,{className:"h-6 w-6"}),iconBgClassName:"from-blue-500 via-cyan-500 to-sky-500"},{title:"Flexibility",description:"Adaptable components that work across different contexts.",icon:e.jsx(s.Layers,{className:"h-6 w-6"}),iconBgClassName:"from-purple-500 via-violet-500 to-indigo-500"},{title:"Accessibility",description:"Inclusive design that works for everyone.",icon:e.jsx(s.Eye,{className:"h-6 w-6"}),iconBgClassName:"from-orange-500 via-amber-500 to-yellow-500"}];return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(t.HeroCard,{title:"Design Principles",description:"Core principles that guide our design decisions and ensure consistency.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Compass,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Core Principles"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"The foundational values behind every design decision"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:a.map(i=>e.jsx(t.FeatureCard,{layout:"horizontal",title:i.title,description:i.description,icon:i.icon,iconBgClassName:i.iconBgClassName},i.title))})]})]})};exports.default=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const a=[{title:"Consistency",description:"Unified visual language and interaction patterns across all components.",icon:e.jsx(s.CheckCircle,{className:"h-6 w-6"}),iconBgClassName:"from-emerald-500 via-green-500 to-teal-500"},{title:"Simplicity",description:"Clean, intuitive interfaces that reduce cognitive load.",icon:e.jsx(s.Minimize2,{className:"h-6 w-6"}),iconBgClassName:"from-blue-500 via-cyan-500 to-sky-500"},{title:"Flexibility",description:"Adaptable components that work across different contexts.",icon:e.jsx(s.Layers,{className:"h-6 w-6"}),iconBgClassName:"from-purple-500 via-violet-500 to-indigo-500"},{title:"Accessibility",description:"Inclusive design that works for everyone.",icon:e.jsx(s.Eye,{className:"h-6 w-6"}),iconBgClassName:"from-orange-500 via-amber-500 to-yellow-500"}];return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(t.HeroCard,{title:"Design Principles",description:"Core principles that guide our design decisions and ensure consistency.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Compass,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Core Principles"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"The foundational values behind every design decision"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:a.map(i=>e.jsx(t.FeatureCard,{layout:"horizontal",title:i.title,description:i.description,icon:i.icon,iconBgClassName:i.iconBgClassName},i.title))})]})]})};exports.default=n;

package/documentation/{DrawerSection-C5umOiTH.js → DrawerSection-CrMh4USZ.js}

@@ -1,6 +1,6 @@
 import { jsxs as r, Fragment as w, jsx as e } from "react/jsx-runtime";
 import { useState as a } from "react";
-import { H as u, C as s, a as p, T as i, x as c, a5 as o, P as f, A as g, c as O } from "../index-lfg6LZ1p.js";
+import { H as u, C as s, a as p, T as i, x as c, a5 as o, P as f, A as g, c as O } from "../index-19KsCnyX.js";
 import { PanelRightOpen as b } from "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/documentation/{DrawerSection-0xOnVMih.js → DrawerSection-DsqcxtDs.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("../index-BaGqriuz.js"),d=require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[r,s]=i.useState(!1),[o,n]=i.useState(!1),[,a]=i.useState("sidebar");return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Drawer",description:`A drawer component that slides in from the side, supporting both
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("../index-DMs_SmPq.js"),d=require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[r,s]=i.useState(!1),[o,n]=i.useState(!1),[,a]=i.useState("sidebar");return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Drawer",description:`A drawer component that slides in from the side, supporting both
           simple sidebar and sidebar-menu variants.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-amber-600 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(d.PanelRightOpen,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Left Position"}),e.jsx(t.Button,{onClick:()=>{a("sidebar"),s(!0)},children:"Open Left Drawer"}),e.jsx(t.Drawer,{isOpen:r,setIsOpen:s,type:"sidebar",title:"Sidebar Title",position:"left",children:e.jsx(t.Typography,{tag:"p",children:"Sidebar content goes here"})})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Right Position"}),e.jsx(t.Button,{onClick:()=>{a("sidebar"),n(!0)},children:"Open Right Drawer"}),e.jsx(t.Drawer,{isOpen:o,setIsOpen:n,type:"sidebar",position:"right",title:"Right Drawer",children:e.jsx(t.Typography,{tag:"p",children:"Content on the right"})})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"Drawer",defaultValues:{isOpen:r,setIsOpen:s,position:"left",backdrop:!0},excludeProps:["setIsOpen","onClose","actionContent","logo","menuItems","type"],children:l=>e.jsx("div",{style:{position:"relative",height:300,overflow:"hidden"},children:e.jsx(t.Drawer,{...l,setIsOpen:s,isOpen:r,title:"Drawer Preview",children:e.jsx("p",{className:"text-sm p-4",children:"Drawer content"})})})}),e.jsx(t.AutoPropsTable,{componentName:"Drawer"}),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 { Drawer, Button } from '@e-burgos/tucu-ui';
 import { useState } from 'react';
 

package/documentation/{DynamicRoutesSection-D9cAVioz.js → DynamicRoutesSection-C9QESfkX.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const o=`import { useMemo } from 'react';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const o=`import { useMemo } from 'react';
 import { StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';
 
 export const useMenuItems = () => {

package/documentation/{DynamicRoutesSection-CplA4H_-.js → DynamicRoutesSection-mzGjrsjc.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { H as n, T as a, C as r, a as i, c as m, ax as c } from "../index-lfg6LZ1p.js";
+import { H as n, T as a, C as r, a as i, c as m, ax as c } from "../index-19KsCnyX.js";
 import { Shuffle as l, Shield as d, Flag as u, Database as p } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{FileInputSection-DiFwCplu.js → FileInputSection-5T-xJxsP.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const i=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}];return e.jsxs(e.Fragment,{children:[e.jsx(l.HeroCard,{title:"FileInput",description:"An advanced file input component with native HTML5 drag-and-drop support, image preview, and flexible file type validation. The component implements native drag and drop functionality without external dependencies.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-fuchsia-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg border border-purple-500/50",children:e.jsx(t.Upload,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.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(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"Images Only"}),e.jsx(l.FileInputWithRef,{label:"Upload Images",accept:"img",placeholderText:"PNG, JPG, GIF, WEBP. Max 100mb."})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"Multiple Images"}),e.jsx(l.FileInputWithRef,{label:"Upload Multiple Images",accept:"img",multiple:!0,placeholderText:"Select multiple images"})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"PDF Documents"}),e.jsx(l.FileInputWithRef,{label:"Upload PDF",accept:"pdf",placeholderText:"PDF files only. Max 100mb."})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"CSV & Excel Files"}),e.jsx(l.FileInputWithRef,{label:"Upload CSV or Excel",accept:"csvAndExcel",multiple:!0,placeholderText:"CSV, XLSX, or XLS files. Max 100mb."})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"Images & PDFs"}),e.jsx(l.FileInputWithRef,{label:"Upload Images or PDFs",accept:"imgAndPdf",multiple:!0,placeholderText:"Images or PDF documents"})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"All File Types"}),e.jsx(l.FileInputWithRef,{label:"Upload Any File",accept:"all",multiple:!0,placeholderText:"Drag and drop any file type or click to browse"})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"Any File (No Restriction)"}),e.jsx(l.FileInputWithRef,{label:"Upload Files",multiple:!0,placeholderText:"Accept any file type - no restrictions"})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(l.FileInputWithRef,{accept:"img",disabled:!0})]})]})})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Colors",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 gap-4 md:grid-cols-2",children:i.map(({label:a,color:s})=>e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:a}),e.jsx(l.FileInputWithRef,{label:`Upload ${a}`,color:s,accept:"img",placeholderText:"PNG, JPG, GIF, WEBP. Max 100mb."})]},s))})})})}),e.jsx(l.PropPlayground,{componentName:"FileInput",defaultValues:{label:"Upload Assets",accept:"img",multiple:!1,disabled:!1,color:"primary",placeholderText:"PNG, JPG, GIF or PDF. Max 100mb."},includeProps:["label","accept","multiple","disabled","color","placeholderText"],excludeProps:["children","containerProps","additionalInputProps","wrapperClassName","className","labelClassName","containerClassName"],children:a=>e.jsx("div",{className:"w-full max-w-2xl",children:e.jsx(l.FileInputWithRef,{...a})})}),e.jsx(l.AutoPropsTable,{componentName:"FileInput"}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(l.CodeBlock,{language:"tsx",code:`import { FileInput } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const i=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}];return e.jsxs(e.Fragment,{children:[e.jsx(l.HeroCard,{title:"FileInput",description:"An advanced file input component with native HTML5 drag-and-drop support, image preview, and flexible file type validation. The component implements native drag and drop functionality without external dependencies.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-fuchsia-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg border border-purple-500/50",children:e.jsx(t.Upload,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.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(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"Images Only"}),e.jsx(l.FileInputWithRef,{label:"Upload Images",accept:"img",placeholderText:"PNG, JPG, GIF, WEBP. Max 100mb."})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"Multiple Images"}),e.jsx(l.FileInputWithRef,{label:"Upload Multiple Images",accept:"img",multiple:!0,placeholderText:"Select multiple images"})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"PDF Documents"}),e.jsx(l.FileInputWithRef,{label:"Upload PDF",accept:"pdf",placeholderText:"PDF files only. Max 100mb."})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"CSV & Excel Files"}),e.jsx(l.FileInputWithRef,{label:"Upload CSV or Excel",accept:"csvAndExcel",multiple:!0,placeholderText:"CSV, XLSX, or XLS files. Max 100mb."})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"Images & PDFs"}),e.jsx(l.FileInputWithRef,{label:"Upload Images or PDFs",accept:"imgAndPdf",multiple:!0,placeholderText:"Images or PDF documents"})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"All File Types"}),e.jsx(l.FileInputWithRef,{label:"Upload Any File",accept:"all",multiple:!0,placeholderText:"Drag and drop any file type or click to browse"})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"Any File (No Restriction)"}),e.jsx(l.FileInputWithRef,{label:"Upload Files",multiple:!0,placeholderText:"Accept any file type - no restrictions"})]}),e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(l.FileInputWithRef,{accept:"img",disabled:!0})]})]})})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Colors",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 gap-4 md:grid-cols-2",children:i.map(({label:a,color:s})=>e.jsxs(l.CardContainer,{className:"p-4",children:[e.jsx(l.Typography,{tag:"h5",className:"mb-3",children:a}),e.jsx(l.FileInputWithRef,{label:`Upload ${a}`,color:s,accept:"img",placeholderText:"PNG, JPG, GIF, WEBP. Max 100mb."})]},s))})})})}),e.jsx(l.PropPlayground,{componentName:"FileInput",defaultValues:{label:"Upload Assets",accept:"img",multiple:!1,disabled:!1,color:"primary",placeholderText:"PNG, JPG, GIF or PDF. Max 100mb."},includeProps:["label","accept","multiple","disabled","color","placeholderText"],excludeProps:["children","containerProps","additionalInputProps","wrapperClassName","className","labelClassName","containerClassName"],children:a=>e.jsx("div",{className:"w-full max-w-2xl",children:e.jsx(l.FileInputWithRef,{...a})})}),e.jsx(l.AutoPropsTable,{componentName:"FileInput"}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(l.CodeBlock,{language:"tsx",code:`import { FileInput } from '@e-burgos/tucu-ui';
 
 // Images only
 <FileInput

package/documentation/{FileInputSection-DYnf_T8n.js → FileInputSection-Ct4GqFfT.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { H as p, C as l, a as t, T as i, F as c, P as m, A as d, c as n } from "../index-lfg6LZ1p.js";
+import { H as p, C as l, a as t, T as i, F as c, P as m, A as d, c as n } from "../index-19KsCnyX.js";
 import { Upload as u } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{FileStructureSection-C7CT7MLA.js → FileStructureSection-14xCYpSc.js}

@@ -1,6 +1,6 @@
 import { jsxs as s, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { H as i, T as t, C as l, a as n, c as d, aj as a } from "../index-lfg6LZ1p.js";
-import { FolderTree as c } from "lucide-react";
+import { H as i, T as t, C as l, a as n, c as d, aj as a } from "../index-19KsCnyX.js";
+import { FolderTree as o } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
@@ -10,7 +10,7 @@ const u = () => /* @__PURE__ */ s(r, { children: [
     {
       title: "File Structure",
       description: "Understand the theme system's file organization and important architectural notes.",
-      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-gray-500 via-slate-500 to-zinc-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-gray-500 via-slate-500 to-zinc-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
     }
   ),
   /* @__PURE__ */ s("section", { className: "space-y-8", children: [
@@ -76,7 +76,7 @@ const u = () => /* @__PURE__ */ s(r, { children: [
         /* @__PURE__ */ s(t, { tag: "p", className: "text-xs", children: [
           "All spacing classes use arbitrary values (e.g.,",
           " ",
-          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded", children: "p-[16px]" }),
+          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border dark:border-border rounded", children: "p-[16px]" }),
           ") instead of Tailwind defaults to maintain original spacing values."
         ] })
       ] }),
@@ -85,7 +85,7 @@ const u = () => /* @__PURE__ */ s(r, { children: [
         /* @__PURE__ */ s(t, { tag: "p", className: "text-xs", children: [
           "Theme settings are automatically persisted to localStorage using Zustand's persist middleware. Storage key:",
           " ",
-          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded", children: "theme-storage" }),
+          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border dark:border-border rounded", children: "theme-storage" }),
           "."
         ] })
       ] }),

package/documentation/{FileStructureSection-qyFRzFR7.js → FileStructureSection-9lInEOF5.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"File Structure",description:"Understand the theme system's file organization and important architectural notes.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-gray-500 via-slate-500 to-zinc-600 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.FolderTree,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Theme File Organization"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Key directories and files in the theme system"})]}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Directory Tree",children:e.jsx(s.CodeBlock,{language:"markdown",code:`ui/tucu-ui/src/
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"File Structure",description:"Understand the theme system's file organization and important architectural notes.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-gray-500 via-slate-500 to-zinc-600 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.FolderTree,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Theme File Organization"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Key directories and files in the theme system"})]}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Directory Tree",children:e.jsx(s.CodeBlock,{language:"markdown",code:`ui/tucu-ui/src/
 ├── themes/
 │   ├── components/
 │   │   ├── theme-provider/
@@ -23,4 +23,4 @@
 │   ├── types/
 │   └── index.ts
 └── assets/css/
-    └── globals.css`})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Important Notes"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Key architectural details to keep in mind"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.Alert,{variant:"info",dismissible:!1,children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"Spacing Classes"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs",children:["All spacing classes use arbitrary values (e.g.,"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded",children:"p-[16px]"}),") instead of Tailwind defaults to maintain original spacing values."]})]}),e.jsxs(s.Alert,{variant:"warning",dismissible:!1,children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"Theme Persistence"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs",children:["Theme settings are automatically persisted to localStorage using Zustand's persist middleware. Storage key:"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded",children:"theme-storage"}),"."]})]}),e.jsxs(s.Alert,{variant:"success",dismissible:!1,children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"CSS Variables"}),e.jsx(s.Typography,{tag:"p",className:"text-xs",children:"Theme colors are injected as CSS variables on the document root. These variables are used by Tailwind utilities and can be referenced directly in CSS or inline styles."})]})]})]})]});exports.default=a;
+    └── globals.css`})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Important Notes"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Key architectural details to keep in mind"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.Alert,{variant:"info",dismissible:!1,children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"Spacing Classes"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs",children:["All spacing classes use arbitrary values (e.g.,"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border dark:border-border rounded",children:"p-[16px]"}),") instead of Tailwind defaults to maintain original spacing values."]})]}),e.jsxs(s.Alert,{variant:"warning",dismissible:!1,children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"Theme Persistence"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs",children:["Theme settings are automatically persisted to localStorage using Zustand's persist middleware. Storage key:"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border dark:border-border rounded",children:"theme-storage"}),"."]})]}),e.jsxs(s.Alert,{variant:"success",dismissible:!1,children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"CSS Variables"}),e.jsx(s.Typography,{tag:"p",className:"text-xs",children:"Theme colors are injected as CSS variables on the document root. These variables are used by Tailwind utilities and can be referenced directly in CSS or inline styles."})]})]})]})]});exports.default=r;

package/documentation/{FormComponentsSection-D8FXeYch.js → FormComponentsSection-BjJY47h7.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as n, T as r, C as i, K as c } from "../index-lfg6LZ1p.js";
+import { H as n, T as o, C as i, K as c } from "../index-19KsCnyX.js";
 import { LayoutGrid as m, Type as p, List as h, CheckSquare as g, Upload as u, Hash as x } from "lucide-react";
 import "react-router-dom";
 import "react";
@@ -15,9 +15,9 @@ const C = () => /* @__PURE__ */ t(d, { children: [
   ),
   /* @__PURE__ */ t("section", { className: "space-y-8", children: [
     /* @__PURE__ */ t("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Available Inputs" }),
+      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Available Inputs" }),
       /* @__PURE__ */ e(
-        r,
+        o,
         {
           tag: "p",
           className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
@@ -61,7 +61,7 @@ const C = () => /* @__PURE__ */ t(d, { children: [
         color: "from-indigo-500 to-purple-500",
         components: ["PinCode", "ToggleBar"]
       }
-    ].map((a, o) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
+    ].map((a, r) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
       /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ e(
           "div",
@@ -71,9 +71,9 @@ const C = () => /* @__PURE__ */ t(d, { children: [
           }
         ),
         /* @__PURE__ */ t("div", { children: [
-          /* @__PURE__ */ e(r, { tag: "h3", className: "font-semibold", children: a.title }),
+          /* @__PURE__ */ e(o, { tag: "h3", className: "font-semibold", children: a.title }),
           /* @__PURE__ */ e(
-            r,
+            o,
             {
               tag: "p",
               className: "text-sm text-gray-500 dark:text-gray-400",
@@ -92,13 +92,13 @@ const C = () => /* @__PURE__ */ t(d, { children: [
         },
         s
       )) })
-    ] }) }, o)) })
+    ] }) }, r)) })
   ] }),
   /* @__PURE__ */ t("section", { className: "space-y-8", children: [
     /* @__PURE__ */ t("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Usage with FormField" }),
+      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Usage with FormField" }),
       /* @__PURE__ */ e(
-        r,
+        o,
         {
           tag: "p",
           className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
@@ -123,13 +123,13 @@ const C = () => /* @__PURE__ */ t(d, { children: [
         label: "InputSearcher",
         code: '<FormField name="city"><InputSearcher options={cities} /></FormField>'
       }
-    ].map((a, o) => /* @__PURE__ */ t(
+    ].map((a, r) => /* @__PURE__ */ t(
       "div",
       {
-        className: "p-3 bg-gray-100 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700",
+        className: "p-3 bg-gray-100 dark:bg-gray-800/50 rounded-lg border border-border",
         children: [
           /* @__PURE__ */ e(
-            r,
+            o,
             {
               tag: "span",
               className: "text-xs font-semibold text-brand block mb-2",
@@ -139,7 +139,7 @@ const C = () => /* @__PURE__ */ t(d, { children: [
           /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400 break-all", children: a.code })
         ]
       },
-      o
+      r
     )) }) }) })
   ] })
 ] });

package/documentation/{FormComponentsSection-BGNG7LT5.js → FormComponentsSection-CVdYFyUi.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const o=[{icon:e.jsx(s.Type,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Text Inputs",description:"Standard text entry with validation and helper text",color:"from-blue-500 to-cyan-500",components:["Input","Textarea"]},{icon:e.jsx(s.List,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Selection",description:"Dropdown and autocomplete with search support",color:"from-green-500 to-emerald-500",components:["Select","InputSearcher"]},{icon:e.jsx(s.CheckSquare,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Choice Controls",description:"Boolean and group selection inputs",color:"from-purple-500 to-violet-500",components:["Checkbox","Radio","RadioGroup","Switch"]},{icon:e.jsx(s.Upload,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"File Upload",description:"File input with drag & drop support",color:"from-pink-500 to-rose-500",components:["FileInput"]},{icon:e.jsx(s.Hash,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Specialized",description:"PIN codes and toggle selection bars",color:"from-indigo-500 to-purple-500",components:["PinCode","ToggleBar"]}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Form Components",description:"11 input components ready for use with FormField. Each integrates automatically with validation, error display, and form state.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.LayoutGrid,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Available Inputs"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"All form inputs organized by category"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:o.map((r,a)=>e.jsx(t.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:`p-2.5 rounded-xl bg-linear-to-br ${r.color} shadow-lg`,children:r.icon}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h3",className:"font-semibold",children:r.title}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:r.description})]})]}),e.jsx("div",{className:"flex flex-wrap gap-1.5",children:r.components.map((i,l)=>e.jsx(t.Badge,{color:"success",variant:"outline",className:"text-xs",children:i},l))})]})},a))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Usage with FormField"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Any input wrapped in FormField gets automatic registration and error handling"})]}),e.jsx(t.CardContainer,{children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4",children:[{label:"Input",code:'<FormField name="email"><Input type="email" /></FormField>'},{label:"Select",code:'<FormField name="country"><Select options={countries} /></FormField>'},{label:"Checkbox",code:'<FormField name="terms"><Checkbox label="Accept" /></FormField>'},{label:"InputSearcher",code:'<FormField name="city"><InputSearcher options={cities} /></FormField>'}].map((r,a)=>e.jsxs("div",{className:"p-3 bg-gray-100 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700",children:[e.jsx(t.Typography,{tag:"span",className:"text-xs font-semibold text-brand block mb-2",children:r.label}),e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400 break-all",children:r.code})]},a))})})})]})]})};exports.default=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const o=[{icon:e.jsx(r.Type,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Text Inputs",description:"Standard text entry with validation and helper text",color:"from-blue-500 to-cyan-500",components:["Input","Textarea"]},{icon:e.jsx(r.List,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Selection",description:"Dropdown and autocomplete with search support",color:"from-green-500 to-emerald-500",components:["Select","InputSearcher"]},{icon:e.jsx(r.CheckSquare,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Choice Controls",description:"Boolean and group selection inputs",color:"from-purple-500 to-violet-500",components:["Checkbox","Radio","RadioGroup","Switch"]},{icon:e.jsx(r.Upload,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"File Upload",description:"File input with drag & drop support",color:"from-pink-500 to-rose-500",components:["FileInput"]},{icon:e.jsx(r.Hash,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Specialized",description:"PIN codes and toggle selection bars",color:"from-indigo-500 to-purple-500",components:["PinCode","ToggleBar"]}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Form Components",description:"11 input components ready for use with FormField. Each integrates automatically with validation, error display, and form state.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.LayoutGrid,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Available Inputs"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"All form inputs organized by category"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:o.map((s,a)=>e.jsx(t.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:`p-2.5 rounded-xl bg-linear-to-br ${s.color} shadow-lg`,children:s.icon}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h3",className:"font-semibold",children:s.title}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:s.description})]})]}),e.jsx("div",{className:"flex flex-wrap gap-1.5",children:s.components.map((i,l)=>e.jsx(t.Badge,{color:"success",variant:"outline",className:"text-xs",children:i},l))})]})},a))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Usage with FormField"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Any input wrapped in FormField gets automatic registration and error handling"})]}),e.jsx(t.CardContainer,{children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4",children:[{label:"Input",code:'<FormField name="email"><Input type="email" /></FormField>'},{label:"Select",code:'<FormField name="country"><Select options={countries} /></FormField>'},{label:"Checkbox",code:'<FormField name="terms"><Checkbox label="Accept" /></FormField>'},{label:"InputSearcher",code:'<FormField name="city"><InputSearcher options={cities} /></FormField>'}].map((s,a)=>e.jsxs("div",{className:"p-3 bg-gray-100 dark:bg-gray-800/50 rounded-lg border border-border",children:[e.jsx(t.Typography,{tag:"span",className:"text-xs font-semibold text-brand block mb-2",children:s.label}),e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400 break-all",children:s.code})]},a))})})})]})]})};exports.default=n;

package/documentation/{FormMethodsSection-KJIlWtlf.js → FormMethodsSection-DlBnV-Aj.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { H as m, T as t, C as r, c as h } from "../index-lfg6LZ1p.js";
+import { H as m, T as t, C as r, c as h } from "../index-19KsCnyX.js";
 import { Terminal as u, Activity as p, Circle as l, Wrench as f } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{FormMethodsSection-D7QrdOOf.js → FormMethodsSection-R2SW4g00.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=`import { useFormContext } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=`import { useFormContext } from '@e-burgos/tucu-ui';
 
 function FormActions() {
   const {

package/documentation/{HamburgerSection-B4QTD7QB.js → HamburgerSection-BpoVoDOi.js}

@@ -1,6 +1,6 @@
 import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
 import { useState as c } from "react";
-import { H as d, C as i, a as o, T as s, z as r, P as p, A as u, c as h } from "../index-lfg6LZ1p.js";
+import { H as d, C as i, a as o, T as s, z as r, P as p, A as u, c as h } from "../index-19KsCnyX.js";
 import { Menu as g } from "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/documentation/{HamburgerSection-1Co0vSYI.js → HamburgerSection-VxfOCf7c.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("../index-BaGqriuz.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>{const[s,a]=t.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"Hamburger",description:`An animated hamburger menu button component, perfect for mobile
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("../index-DMs_SmPq.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>{const[s,a]=t.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"Hamburger",description:`An animated hamburger menu button component, perfect for mobile
           navigation menus.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-blue-600 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(n.Menu,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(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.jsxs("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:"Closed State"}),e.jsx(r.Hamburger,{isOpen:!1,onClick:()=>a(!1)})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Open State"}),e.jsx(r.Hamburger,{isOpen:!0,onClick:()=>a(!0)})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Interactive Example"}),e.jsx(r.Hamburger,{isOpen:s,onClick:()=>a(!s)})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"With Different Variants"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(r.Hamburger,{variant:"solid",color:"primary"}),e.jsx(r.Hamburger,{variant:"ghost",color:"primary"}),e.jsx(r.Hamburger,{variant:"transparent"})]})]})]})})})}),e.jsx(r.PropPlayground,{componentName:"Hamburger",defaultValues:{isOpen:!1,color:"primary",size:"medium",variant:"solid"},excludeProps:["onClick","aria-label","aria-describedby","tooltip","tooltipArrow","tooltipColor","tooltipPlacement","isLoading","loaderSize","loaderVariant","fullWidth","disabled"],children:i=>e.jsx(r.Hamburger,{...i})}),e.jsx(r.AutoPropsTable,{componentName:"Hamburger"}),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 { Hamburger } from '@e-burgos/tucu-ui';
 import { useState } from 'react';
 

package/documentation/{HookCategoriesSection-BgTUwS4d.js → HookCategoriesSection-B_TOE9Dl.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
-import { H as n, T as a, C as c, K as d } from "../index-lfg6LZ1p.js";
+import { H as n, T as a, C as c, K as d } from "../index-19KsCnyX.js";
 import { FolderTree as m, Monitor as h, MousePointer as p, Layout as u, Wrench as g } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{HookCategoriesSection-DT7PsLf5.js → HookCategoriesSection-GgKNpxrq.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=[{icon:e.jsx(o.Monitor,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Responsive & Layout",description:"Screen size detection and element measurement hooks",color:"from-blue-500 via-cyan-500 to-teal-500",hooks:[{name:"useBreakpoint",desc:"Returns current breakpoint (xs–4xl)"},{name:"useIsMobile",desc:"Returns { isMobile: boolean }"},{name:"useElementSize",desc:"Tracks element width/height via ResizeObserver"},{name:"useMeasure",desc:"Full bounds (x, y, width, height, top, right, bottom, left)"},{name:"useWindowScroll",desc:"Returns { x, y } scroll position"}]},{icon:e.jsx(o.MousePointer,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"User Interaction",description:"Click detection, clipboard, and event handling",color:"from-purple-500 via-violet-500 to-indigo-500",hooks:[{name:"useClickAway",desc:"Detects clicks outside a ref element"},{name:"useCopyToClipboard",desc:"Clipboard copy with state tracking"},{name:"useEventListener",desc:"Type-safe event listener with auto-cleanup"}]},{icon:e.jsx(o.Layout,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"UI State Management",description:"Global Zustand-based state for UI behavior",color:"from-green-500 via-emerald-500 to-teal-500",hooks:[{name:"useGridSwitcher",desc:"Toggle compact/normal grid layout"},{name:"useLockBodyScroll",desc:"Lock body scroll (preserves scrollbar)"},{name:"useToastStore",desc:"Global toast notifications (Zustand)"},{name:"useScrollableSlider",desc:"Horizontal slider with prev/next controls"}]},{icon:e.jsx(o.Wrench,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Utilities",description:"Lifecycle and navigation helpers",color:"from-orange-500 via-amber-500 to-yellow-500",hooks:[{name:"useIsMounted",desc:"Returns boolean for component mount state"},{name:"useAnchorScroll",desc:"Smooth scroll to anchor links automatically"}]}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Hook Categories",description:"14 hooks organized into 4 categories: Responsive & Layout, User Interaction, UI State Management, and Utilities.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.FolderTree,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Organized Collection"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Each hook category addresses a different development need"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:r.map((t,i)=>e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,children:t.icon}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:t.title}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:t.description})]})]}),e.jsx("div",{className:"space-y-2",children:t.hooks.map((a,n)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Badge,{className:"text-dark dark:text-white shrink-0",children:a.name}),e.jsx("span",{className:"text-xs text-gray-500 dark:text-gray-400",children:a.desc})]},n))})]})},i))})]})]})};exports.default=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=[{icon:e.jsx(o.Monitor,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Responsive & Layout",description:"Screen size detection and element measurement hooks",color:"from-blue-500 via-cyan-500 to-teal-500",hooks:[{name:"useBreakpoint",desc:"Returns current breakpoint (xs–4xl)"},{name:"useIsMobile",desc:"Returns { isMobile: boolean }"},{name:"useElementSize",desc:"Tracks element width/height via ResizeObserver"},{name:"useMeasure",desc:"Full bounds (x, y, width, height, top, right, bottom, left)"},{name:"useWindowScroll",desc:"Returns { x, y } scroll position"}]},{icon:e.jsx(o.MousePointer,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"User Interaction",description:"Click detection, clipboard, and event handling",color:"from-purple-500 via-violet-500 to-indigo-500",hooks:[{name:"useClickAway",desc:"Detects clicks outside a ref element"},{name:"useCopyToClipboard",desc:"Clipboard copy with state tracking"},{name:"useEventListener",desc:"Type-safe event listener with auto-cleanup"}]},{icon:e.jsx(o.Layout,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"UI State Management",description:"Global Zustand-based state for UI behavior",color:"from-green-500 via-emerald-500 to-teal-500",hooks:[{name:"useGridSwitcher",desc:"Toggle compact/normal grid layout"},{name:"useLockBodyScroll",desc:"Lock body scroll (preserves scrollbar)"},{name:"useToastStore",desc:"Global toast notifications (Zustand)"},{name:"useScrollableSlider",desc:"Horizontal slider with prev/next controls"}]},{icon:e.jsx(o.Wrench,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Utilities",description:"Lifecycle and navigation helpers",color:"from-orange-500 via-amber-500 to-yellow-500",hooks:[{name:"useIsMounted",desc:"Returns boolean for component mount state"},{name:"useAnchorScroll",desc:"Smooth scroll to anchor links automatically"}]}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Hook Categories",description:"14 hooks organized into 4 categories: Responsive & Layout, User Interaction, UI State Management, and Utilities.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.FolderTree,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Organized Collection"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Each hook category addresses a different development need"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:r.map((t,i)=>e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,children:t.icon}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:t.title}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:t.description})]})]}),e.jsx("div",{className:"space-y-2",children:t.hooks.map((a,n)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Badge,{className:"text-dark dark:text-white shrink-0",children:a.name}),e.jsx("span",{className:"text-xs text-gray-500 dark:text-gray-400",children:a.desc})]},n))})]})},i))})]})]})};exports.default=l;

package/documentation/{HookDocumentationSection-B7eGJAtC.js → HookDocumentationSection-CBtlj0Xo.js}

@@ -1,5 +1,5 @@
 import { jsxs as r, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { H as d, T as a, C as s, a as l, c as t } from "../index-lfg6LZ1p.js";
+import { H as d, T as a, C as s, a as l, c as t } from "../index-19KsCnyX.js";
 import { BookOpen as n } from "lucide-react";
 import "react-router-dom";
 import "react";
@@ -36,7 +36,7 @@ const p = () => /* @__PURE__ */ r(o, { children: [
             children: "Returns the current screen breakpoint name. Built on createBreakpoint from react-use."
           }
         ),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
           t,
           {
             language: "tsx",
@@ -60,7 +60,7 @@ const p = () => /* @__PURE__ */ r(o, { children: [
             children: "Returns an object with isMobile boolean. True for xs, sm, md breakpoints (≤768px)."
           }
         ),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
           t,
           {
             language: "tsx",
@@ -88,7 +88,7 @@ return <DesktopLayout />;`
             children: "Tracks element dimensions. Returns a callback ref setter (not a RefObject) and size object."
           }
         ),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
           t,
           {
             language: "tsx",
@@ -115,7 +115,7 @@ return (
             children: "Advanced measurement with full bounds. Uses ResizeObserver internally (from react-use)."
           }
         ),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
           t,
           {
             language: "tsx",
@@ -143,7 +143,7 @@ return (
           children: "Returns current scroll position. Custom implementation that detects scroll on window, document, and overflow containers."
         }
       ),
-      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
         t,
         {
           language: "tsx",
@@ -184,7 +184,7 @@ return (
                 children: "Detects clicks outside a ref element. Re-exported from react-use. Defaults to mousedown + touchstart."
               }
             ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
               t,
               {
                 language: "tsx",
@@ -208,7 +208,7 @@ useClickAway(ref, () => {
                 children: "Clipboard functionality with state tracking. Re-exported from react-use."
               }
             ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
               t,
               {
                 language: "tsx",
@@ -237,7 +237,7 @@ if (state.error) console.error('Failed:', state.error);`
           children: "Type-safe event listener with automatic cleanup. Custom implementation with overloads for window, document, HTMLElement, and MediaQueryList."
         }
       ),
-      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
         t,
         {
           language: "tsx",
@@ -280,7 +280,7 @@ useEventListener('click', (event) => {
           children: "Zustand-based global toast notification system with 5 variants and auto-dismiss."
         }
       ),
-      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
         t,
         {
           language: "tsx",
@@ -316,7 +316,7 @@ dismissToast();             // dismiss all`
                 children: "Zustand store for global grid layout switching. Persists state across components."
               }
             ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
               t,
               {
                 language: "tsx",
@@ -338,7 +338,7 @@ const toggleLayout = () => setIsGridCompact(!isGridCompact);`
                 children: "Locks body scroll when active. Automatically preserves scrollbar width to prevent layout shift."
               }
             ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
               t,
               {
                 language: "tsx",
@@ -355,27 +355,22 @@ useLockBodyScroll(isOpen);`
         ] }) })
       }
     ) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(
-      l,
-      {
-        title: "useScrollableSlider",
-        className: "mt-2 mb-2",
-        children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
-          /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useScrollableSlider(defaultActivePath?)" }),
-          /* @__PURE__ */ e(
-            a,
-            {
-              tag: "p",
-              className: "text-gray-600 dark:text-gray-400 mb-4",
-              children: "Horizontal scrollable slider with navigation buttons. Uses react-router-dom internally for active path detection."
-            }
-          ),
-          /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
-            t,
-            {
-              language: "tsx",
-              noExpand: !0,
-              code: `const {
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "useScrollableSlider", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useScrollableSlider(defaultActivePath?)" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400 mb-4",
+          children: "Horizontal scrollable slider with navigation buttons. Uses react-router-dom internally for active path detection."
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
+        t,
+        {
+          language: "tsx",
+          noExpand: !0,
+          code: `const {
   sliderEl,        // RefObject<HTMLDivElement> — container ref
   sliderPrevBtn,   // RefObject<HTMLButtonElement> — prev button ref
   sliderNextBtn,   // RefObject<HTMLButtonElement> — next button ref
@@ -384,11 +379,9 @@ useLockBodyScroll(isOpen);`
 } = useScrollableSlider('/');
 // Parameter: defaultActivePath (string, default '/')
 // Note: Uses useLocation() from react-router-dom internally`
-            }
-          ) })
-        ] }) })
-      }
-    ) })
+        }
+      ) })
+    ] }) }) }) })
   ] }),
   /* @__PURE__ */ r("section", { className: "space-y-8", children: [
     /* @__PURE__ */ r("div", { className: "text-center", children: [
@@ -418,7 +411,7 @@ useLockBodyScroll(isOpen);`
                 children: "Returns a boolean indicating component mount state. Useful to prevent memory leaks in async operations."
               }
             ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
               t,
               {
                 language: "tsx",
@@ -446,7 +439,7 @@ useEffect(() => {
                 children: "Intercepts anchor link clicks and performs smooth scrolling to target elements."
               }
             ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
               t,
               {
                 language: "tsx",