@e-burgos/tucu-ui 2.0.11 → 2.1.0

package/documentation/{AuthorCardSection-DD1rPOTi.js → AuthorCardSection-CLommrNn.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=require("../1-CArqgiQa.js"),s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"AuthorCard",description:`A card component for displaying author information with avatar, name,
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DEZRGktf.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=require("../1-CArqgiQa.js"),s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"AuthorCard",description:`A card component for displaying author information with avatar, name,
           and role.`,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-violet-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.UserCircle,{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(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:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Name and Role"}),e.jsx(a.AuthorCard,{image:r.avatar1Img,name:"John Doe",authorRole:"Senior Developer"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Name Only"}),e.jsx(a.AuthorCard,{image:r.avatar1Img,name:"Jane Smith"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Avatar Only"}),e.jsx(a.AuthorCard,{image:r.avatar1Img})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"AuthorCard",defaultValues:{name:"John Doe",authorRole:"Developer",image:"https://randomuser.me/api/portraits/men/1.jpg"},excludeProps:[],children:t=>e.jsx(a.AuthorCard,{...t})}),e.jsx(a.AutoPropsTable,{componentName:"AuthorCard"}),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 { AuthorCard } from '@e-burgos/tucu-ui';
 
 // With name and role

package/documentation/{AvatarSection-D6q5cCro.js → AvatarSection-B_K97AUc.js}

@@ -1,5 +1,5 @@
 import { jsxs as s, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { H as c, C as i, a as t, T as l, X as e, P as o, A as n, c as g } from "../index-4GONhZIF.js";
+import { H as c, C as i, a as t, T as l, X as e, P as o, A as n, c as g } from "../index-sdOMz8GW.js";
 import { CircleUser as h } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AvatarSection-CEy3tSFZ.js → AvatarSection-ghx2Hdtx.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-C0NugKZs.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=require("../1-CArqgiQa.js"),t=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Avatar",description:`A versatile avatar component for displaying user profile images with
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-DEZRGktf.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=require("../1-CArqgiQa.js"),t=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Avatar",description:`A versatile avatar component for displaying user profile images with
           multiple sizes and shapes.`,icon:a.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(i.CircleUser,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Default Avatar"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar",border:!1})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XS",size:"xs"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"SM",size:"sm"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"MD",size:"md"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"LG",size:"lg"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XL",size:"xl"})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Shapes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Circle",shape:"circle"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Rounded",shape:"rounded"})]})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"Avatar",defaultValues:{size:"md",shape:"circle",border:!0,image:"https://randomuser.me/api/portraits/men/1.jpg",alt:"Avatar"},children:r=>a.jsx(e.Avatar,{...r})}),a.jsx(e.AutoPropsTable,{componentName:"Avatar"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Avatar } from '@e-burgos/tucu-ui';
 
 // Basic usage

package/documentation/BackgroundsSection-BvORWpfY.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DEZRGktf.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=[{id:"base",name:"Base",type:"css",desc:"Spatial radial gradient. Default body/window background that adapts between light and dark.",usage:"Body, root window, app shell"},{id:"sonoma",name:"Sonoma",type:"css",desc:"Flat neutral surface matching macOS Sonoma system colors.",usage:"System-like flat interfaces"},{id:"radial",name:"Radial",type:"css",desc:"Vibrant radial gradient with brand colors for expressive surfaces.",usage:"Hero sections, expressive cards"},{id:"aurora",name:"Aurora",type:"css",desc:"Spatial aurora with animated-style blurred color orbs.",usage:"Landing pages, immersive UIs"},{id:"depth",name:"Depth",type:"css",desc:"Sober linear gradient, data-focused and subtle.",usage:"Dashboards, data-heavy layouts"},{id:"demo",name:"Demo",type:"css",desc:"Expressive dual-ellipse gradient for showcases and presentations.",usage:"Demos, showcases, marketing"},{id:"window",name:"Window",type:"css",desc:"Frosted glass surface with subtle backdrop blur.",usage:"Modal backdrops, floating panels"},{id:"wave",name:"Wave",type:"svg",desc:"Full-width decorative flowing shapes for desktop/tablet viewports.",usage:"Hero sections, landing pages, desktop full-screen"},{id:"wallpaper",name:"Wallpaper",type:"svg",desc:"Compact landscape format for banners and contained sections.",usage:"Banners, feature sections, contained backgrounds"},{id:"mobile",name:"Mobile",type:"svg",desc:"Portrait-oriented asset optimized for mobile viewports.",usage:"Mobile screens, narrow containers, portrait layouts"}],o=d.filter(t=>t.type==="css"),n=()=>{const{mode:t}=a.useTheme(),r=t==="dark";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(a.HeroCard,{title:"Backgrounds",description:"Unified background system with 10 variants available across all theme layouts. CSS-only gradients and SVG assets that adapt automatically between light and dark modes.",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-cyan-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-400/50",children:e.jsx(l.Image,{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(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"All Background Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:["The"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"ThemeBackground"})," ","component supports ",e.jsx("strong",{children:"10 variants"})," (7 CSS-only + 3 SVG assets). All are available in every theme layout via the"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"backgroundVariant"})," ","store value."]}),e.jsx(a.BasicTable,{columns:[{key:"name",label:"Variant"},{key:"type",label:"Type",className:"font-mono"},{key:"desc",label:"Description"},{key:"usage",label:"Usage"}],data:d.map(s=>({name:s.name,type:s.type.toUpperCase(),desc:s.desc,usage:s.usage})),hoverable:!0,striped:!1})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"CSS Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Pure CSS backgrounds generated with gradients and custom properties. No image downloads required."}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",children:o.map(s=>e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"relative w-full h-32 rounded-xl overflow-hidden border border-border",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:s.id,className:"!z-0"})}),e.jsx("p",{className:"text-xs font-semibold text-center text-gray-700 dark:text-gray-300",children:s.name}),e.jsx("p",{className:"text-[10px] text-center text-gray-400",children:s.desc})]},s.id))})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"SVG Asset Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"SVG backgrounds loaded from CDN. Optimized for specific viewport sizes. The component handles loading states and fallback gracefully."}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Wave"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"1512 × 982 — Landscape (desktop full-screen)"})]}),e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border h-[200px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"wave",className:"!z-0"})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("wave",r)]})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Wallpaper"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"1080 × 560 — Landscape (contained sections)"})]}),e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border h-[180px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"wallpaper",className:"!z-0"})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("wallpaper",r)]})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Mobile"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"402 × 874 — Portrait (mobile screens)"})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border w-[180px] h-[390px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"mobile",className:"!z-0"})})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("mobile",r)]})})]})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:["Use"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"ThemeBackground"})," ","with two positioning modes:"]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs("div",{className:"p-4 rounded-xl border border-border space-y-2",children:[e.jsx("p",{className:"text-xs font-semibold text-gray-700 dark:text-gray-300",children:"Fixed Mode (Default Layouts)"}),e.jsx("p",{className:"text-[11px] text-gray-500 dark:text-gray-400",children:"Fullscreen fixed layer behind content. Content is wrapped automatically."}),e.jsx("pre",{className:"text-[10px] font-mono bg-gray-100 dark:bg-gray-800 rounded-lg p-3 overflow-x-auto",children:`<ThemeBackground>
+  {children}
+</ThemeBackground>`})]}),e.jsxs("div",{className:"p-4 rounded-xl border border-border space-y-2",children:[e.jsx("p",{className:"text-xs font-semibold text-gray-700 dark:text-gray-300",children:"Absolute Mode (macOS Layouts)"}),e.jsx("p",{className:"text-[11px] text-gray-500 dark:text-gray-400",children:"Absolute layer within parent container. No children wrapper."}),e.jsx("pre",{className:"text-[10px] font-mono bg-gray-100 dark:bg-gray-800 rounded-lg p-3 overflow-x-auto",children:`<div className="relative">
+  <ThemeBackground mode="absolute" />
+  {/* your content */}
+</div>`})]})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"ThemeBackground Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:[{key:"prop",label:"Prop"},{key:"type",label:"Type",className:"font-mono text-xs"},{key:"default",label:"Default",className:"font-mono"},{key:"desc",label:"Description"}],data:[{prop:"mode",type:"'fixed' | 'absolute'",default:"'fixed'",desc:"Positioning mode."},{prop:"variant",type:"BackgroundVariant",default:"store value",desc:"Override variant (defaults to theme store)."},{prop:"cdnBase",type:"string",default:"CDN URL",desc:"Override CDN base for SVG assets."},{prop:"className",type:"string",default:"—",desc:"Additional CSS class for the bg container."},{prop:"style",type:"CSSProperties",default:"—",desc:"Inline styles for the bg container."},{prop:"children",type:"ReactNode",default:"—",desc:"Content (only wrapped in fixed mode)."}],hoverable:!0,striped:!1})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Viewport Recommendations",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Recommended SVG background variant per viewport breakpoint for responsive implementations."}),e.jsx(a.BasicTable,{columns:[{key:"viewport",label:"Viewport"},{key:"breakpoint",label:"Breakpoint",className:"font-mono"},{key:"variant",label:"Variant"},{key:"asset",label:"Asset",className:"font-mono"}],data:[{viewport:"Mobile",breakpoint:"< 640px",variant:"mobile",asset:`${r?"dark":"light"}-mobile.svg`},{viewport:"Tablet",breakpoint:"640–1024px",variant:"wallpaper",asset:`${r?"dark":"light"}-wallpaper.svg`},{viewport:"Desktop",breakpoint:"> 1024px",variant:"wave",asset:`${r?"dark":"light"}-wave.svg`},{viewport:"Any",breakpoint:"All",variant:"CSS variants",asset:"No asset needed"}],hoverable:!0,striped:!1})]})})})]})};exports.default=n;

package/documentation/{BackgroundsSection-ml2K7sVT.js → BackgroundsSection-Cgjhw6BR.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { ay as p, H as g, C as s, a as l, T as o, y as i, az as n, aA as c } from "../index-4GONhZIF.js";
+import { ay as p, H as g, C as s, a as l, T as d, y as i, az as o, aA as c } from "../index-sdOMz8GW.js";
 import { Image as y } from "lucide-react";
 import "react-router-dom";
 import "react";
@@ -75,10 +75,8 @@ const m = [
     desc: "Portrait-oriented asset optimized for mobile viewports.",
     usage: "Mobile screens, narrow containers, portrait layouts"
   }
-], h = m.filter((d) => d.type === "css");
-m.filter((d) => d.type === "svg");
-const k = () => {
-  const { mode: d } = p(), t = d === "dark";
+], h = m.filter((n) => n.type === "css"), k = () => {
+  const { mode: n } = p(), t = n === "dark";
   return /* @__PURE__ */ a("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: [
     /* @__PURE__ */ e(
       g,
@@ -90,7 +88,7 @@ const k = () => {
     ),
     /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "All Background Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ a(
-        o,
+        d,
         {
           tag: "p",
           className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
@@ -131,7 +129,7 @@ const k = () => {
     ] }) }) }),
     /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "CSS Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ e(
-        o,
+        d,
         {
           tag: "p",
           className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
@@ -140,7 +138,7 @@ const k = () => {
       ),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: h.map((r) => /* @__PURE__ */ a("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e("div", { className: "relative w-full h-32 rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ e(
-          n,
+          o,
           {
             mode: "absolute",
             variant: r.id,
@@ -153,7 +151,7 @@ const k = () => {
     ] }) }) }),
     /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "SVG Asset Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ e(
-        o,
+        d,
         {
           tag: "p",
           className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
@@ -168,7 +166,7 @@ const k = () => {
             /* @__PURE__ */ e("span", { className: "text-[10px] font-mono font-normal text-gray-400", children: "1512 × 982 — Landscape (desktop full-screen)" })
           ] }),
           /* @__PURE__ */ e("div", { className: "relative rounded-xl overflow-hidden border border-border h-[200px]", children: /* @__PURE__ */ e(
-            n,
+            o,
             {
               mode: "absolute",
               variant: "wave",
@@ -188,7 +186,7 @@ const k = () => {
             /* @__PURE__ */ e("span", { className: "text-[10px] font-mono font-normal text-gray-400", children: "1080 × 560 — Landscape (contained sections)" })
           ] }),
           /* @__PURE__ */ e("div", { className: "relative rounded-xl overflow-hidden border border-border h-[180px]", children: /* @__PURE__ */ e(
-            n,
+            o,
             {
               mode: "absolute",
               variant: "wallpaper",
@@ -208,7 +206,7 @@ const k = () => {
             /* @__PURE__ */ e("span", { className: "text-[10px] font-mono font-normal text-gray-400", children: "402 × 874 — Portrait (mobile screens)" })
           ] }),
           /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e("div", { className: "relative rounded-xl overflow-hidden border border-border w-[180px] h-[390px]", children: /* @__PURE__ */ e(
-            n,
+            o,
             {
               mode: "absolute",
               variant: "mobile",
@@ -225,7 +223,7 @@ const k = () => {
     ] }) }) }),
     /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
       /* @__PURE__ */ a(
-        o,
+        d,
         {
           tag: "p",
           className: "text-sm text-gray-500 dark:text-gray-400",
@@ -309,7 +307,7 @@ const k = () => {
     ) }) }) }),
     /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Viewport Recommendations", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ e(
-        o,
+        d,
         {
           tag: "p",
           className: "text-sm text-gray-500 dark:text-gray-400 mb-4",

package/documentation/{BadgeSection-D87SEfxH.js → BadgeSection-BKL7OzXP.js}

@@ -1,5 +1,5 @@
 import { jsxs as i, Fragment as t, jsx as e } from "react/jsx-runtime";
-import { H as d, C as s, a as l, T as r, K as a, P as n, A as o, c as m } from "../index-4GONhZIF.js";
+import { H as d, C as s, a as l, T as r, K as a, P as n, A as o, c as m } from "../index-sdOMz8GW.js";
 import { Award as h } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BadgeSection-Nan3Lkev.js → BadgeSection-Ck4SCu_x.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Badge",description:`A badge component for displaying status indicators and labels with
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DEZRGktf.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Badge",description:`A badge component for displaying status indicators and labels with
           various styles and sizes.`,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-teal-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.Award,{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(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-6",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Status Badges"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{status:"active",children:"Active"}),e.jsx(a.Badge,{status:"inactive",children:"Inactive"}),e.jsx(a.Badge,{status:"pending",children:"Pending"}),e.jsx(a.Badge,{status:"default",children:"Default"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Status Indicators (Dots Only)"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Badge,{status:"active",withDot:!0}),e.jsx("span",{className:"text-sm",children:"Online"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Badge,{status:"inactive",withDot:!0}),e.jsx("span",{className:"text-sm",children:"Offline"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Badge,{status:"pending",withDot:!0}),e.jsx("span",{className:"text-sm",children:"Away"})]})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Dot Indicator"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{status:"active",withDot:!0,children:"Active"}),e.jsx(a.Badge,{status:"inactive",withDot:!0,children:"Inactive"}),e.jsx(a.Badge,{status:"pending",withDot:!0,children:"Pending"})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{color:"primary",children:"Primary"}),e.jsx(a.Badge,{color:"success",children:"Success"}),e.jsx(a.Badge,{color:"info",children:"Info"}),e.jsx(a.Badge,{color:"warning",children:"Warning"}),e.jsx(a.Badge,{color:"danger",children:"Danger"}),e.jsx(a.Badge,{color:"gray",children:"Gray"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{size:"tiny",color:"primary",children:"Tiny"}),e.jsx(a.Badge,{size:"small",color:"primary",children:"Small"}),e.jsx(a.Badge,{size:"medium",color:"primary",children:"Medium"}),e.jsx(a.Badge,{size:"large",color:"primary",children:"Large"})]})})})}),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-4",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"solid",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"solid",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"solid",color:"danger",children:"Danger"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Soft"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"soft",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"soft",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"soft",color:"danger",children:"Danger"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Outline"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"outline",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"outline",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"outline",color:"danger",children:"Danger"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"ghost",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"ghost",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"ghost",color:"danger",children:"Danger"})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Shapes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{shape:"rounded",color:"primary",children:"Rounded"}),e.jsx(a.Badge,{shape:"pill",color:"success",children:"Pill"}),e.jsx(a.Badge,{shape:"circle",color:"danger",size:"large",withDot:!0})]})})})}),e.jsx(a.PropPlayground,{componentName:"Badge",defaultValues:{variant:"solid",size:"small",shape:"pill",color:"primary",withDot:!1},excludeProps:["status"],children:s=>e.jsx(a.Badge,{...s,children:"Badge"})}),e.jsx(a.AutoPropsTable,{componentName:"Badge"}),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 { Badge } from '@e-burgos/tucu-ui';
 
 // Basic usage with status

package/documentation/{BarChartSection-kjXT_9gz.js → BarChartSection-BOyuN-eY.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=[{name:"Jan",sales:4e3,returns:400,target:4500},{name:"Feb",sales:3e3,returns:300,target:3500},{name:"Mar",sales:5e3,returns:500,target:4800},{name:"Apr",sales:4780,returns:478,target:5e3},{name:"May",sales:5890,returns:589,target:5500},{name:"Jun",sales:6390,returns:639,target:6e3}],t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"BarChart"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Bar chart component for comparing categorical data with support for stacking, horizontal layout, and custom bar styling."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Bar Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BarChart,{data:s,series:[{dataKey:"sales",name:"Sales"},{dataKey:"returns",name:"Returns"}],height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Stacked Bars",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BarChart,{data:s,series:[{dataKey:"sales",name:"Sales",stackId:"a"},{dataKey:"returns",name:"Returns",stackId:"a"}],stacked:!0,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Horizontal Layout",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BarChart,{data:s,series:[{dataKey:"sales",name:"Sales"}],layout:"vertical",height:350})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{code:`import { BarChart } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DEZRGktf.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=[{name:"Jan",sales:4e3,returns:400,target:4500},{name:"Feb",sales:3e3,returns:300,target:3500},{name:"Mar",sales:5e3,returns:500,target:4800},{name:"Apr",sales:4780,returns:478,target:5e3},{name:"May",sales:5890,returns:589,target:5500},{name:"Jun",sales:6390,returns:639,target:6e3}],t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"BarChart"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Bar chart component for comparing categorical data with support for stacking, horizontal layout, and custom bar styling."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Bar Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BarChart,{data:s,series:[{dataKey:"sales",name:"Sales"},{dataKey:"returns",name:"Returns"}],height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Stacked Bars",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BarChart,{data:s,series:[{dataKey:"sales",name:"Sales",stackId:"a"},{dataKey:"returns",name:"Returns",stackId:"a"}],stacked:!0,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Horizontal Layout",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BarChart,{data:s,series:[{dataKey:"sales",name:"Sales"}],layout:"vertical",height:350})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{code:`import { BarChart } from '@e-burgos/tucu-ui';
 
 const data = [
   { name: 'Jan', sales: 4000, returns: 400 },

package/documentation/{BarChartSection-CDVExS5W.js → BarChartSection-b03WjDmh.js}

@@ -1,5 +1,5 @@
 import { jsxs as l, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { T as n, C as e, a as s, l as t, c as i, P as m, A as c } from "../index-4GONhZIF.js";
+import { T as n, C as e, a as s, l as t, c as i, P as m, A as c } from "../index-sdOMz8GW.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BasicTableSection-6_00z3Ow.js → BasicTableSection-CRHzSccH.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const s=[{key:"name",label:"Name"},{key:"age",label:"Age"},{key:"city",label:"City"}],l=[{name:"John Doe",age:30,city:"New York"},{name:"Jane Smith",age:25,city:"Los Angeles"},{name:"Bob Johnson",age:35,city:"Chicago"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"BasicTable",description:`A flexible and customizable table component with support for custom
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DEZRGktf.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const s=[{key:"name",label:"Name"},{key:"age",label:"Age"},{key:"city",label:"City"}],l=[{name:"John Doe",age:30,city:"New York"},{name:"Jane Smith",age:25,city:"Los Angeles"},{name:"Bob Johnson",age:35,city:"Chicago"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"BasicTable",description:`A flexible and customizable table component with support for custom
           rendering, styling, and interactions.`,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-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.Table2,{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(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 Table"}),e.jsx(a.BasicTable,{columns:s,data:l})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Striped Table"}),e.jsx(a.BasicTable,{columns:s,data:l,striped:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),e.jsx(a.BasicTable,{columns:s,data:l,border:!1})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"BasicTable",title:"BasicTable Playground",defaultValues:{border:!1,hoverable:!0,rounded:!0,striped:!1,showHeader:!0,resizable:!1},excludeProps:["columns","data","className","containerClassName","headerClassName","tableClassName","rowClassName","maxRows"],children:t=>e.jsx(a.BasicTable,{...t,columns:[{key:"name",label:"Name"},{key:"role",label:"Role"},{key:"status",label:"Status"}],data:[{name:"Alice",role:"Developer",status:"Active"},{name:"Bob",role:"Designer",status:"Inactive"},{name:"Carol",role:"Manager",status:"Active"}]})}),e.jsx(a.AutoPropsTable,{componentName:"BasicTable"}),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 { BasicTable } from '@e-burgos/tucu-ui';
 
 const columns = [

package/documentation/{BasicTableSection-BZZ4LZPr.js → BasicTableSection-CTkVC_ZF.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { H as i, C as l, a as n, T as r, y as s, P as d, A as u, c as h } from "../index-4GONhZIF.js";
+import { H as i, C as l, a as n, T as r, y as s, P as d, A as u, c as h } from "../index-sdOMz8GW.js";
 import { Table2 as b } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BasicUsageSection-C0jPVah2.js → BasicUsageSection-DAQXomgL.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Basic Usage",description:"Get started with the form system in three steps: define your types, set defaults, and compose your form with Form + FormField.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.Code,{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(a.Typography,{tag:"h2",className:"mb-2",children:"Step by Step"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Three steps to create a fully typed, validated form"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"1. Define Form Values Interface",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Start by defining a TypeScript interface for your form data. This enables type-safe field names and submission handlers."}),e.jsx(a.CodeBlock,{language:"tsx",code:`export interface FormValues {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DEZRGktf.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Basic Usage",description:"Get started with the form system in three steps: define your types, set defaults, and compose your form with Form + FormField.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.Code,{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(a.Typography,{tag:"h2",className:"mb-2",children:"Step by Step"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Three steps to create a fully typed, validated form"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"1. Define Form Values Interface",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Start by defining a TypeScript interface for your form data. This enables type-safe field names and submission handlers."}),e.jsx(a.CodeBlock,{language:"tsx",code:`export interface FormValues {
   name: string;
   email: string;
   password: string;

package/documentation/{BasicUsageSection-DxI1q1Q2.js → BasicUsageSection-DRtyl0DW.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as l, jsx as e } from "react/jsx-runtime";
-import { H as d, T as r, C as t, a as s, c as o } from "../index-4GONhZIF.js";
+import { H as d, T as r, C as t, a as s, c as o } from "../index-sdOMz8GW.js";
 import { Code as m } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BestPracticesSection-DFD5nxVx.js → BestPracticesSection-0o5pXtB_.js}

@@ -1,5 +1,5 @@
 import { jsxs as s, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as m, T as a, C as n } from "../index-4GONhZIF.js";
+import { H as m, T as a, C as n } from "../index-sdOMz8GW.js";
 import { CheckCircle as c, Check as h, XCircle as p, X as u, Package as g, HardDrive as x, Zap as y, TreeDeciduous as f } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BestPracticesSection-Dk8CWxop.js → BestPracticesSection-BQd9D5IR.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-C0NugKZs.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const i=[{category:"Layout Selection",items:["Admin: Use for complex applications with many navigation items and sidebar menus","Horizontal: Use for content-focused sites and simple applications with top navigation","Clean: Use for authentication flows, landing pages, and standalone content"]},{category:"ThemeProvider Setup",items:["Always wrap your application with ThemeProvider before using layouts","Provide menuItems prop for Admin and Horizontal layouts","Use layout prop to control which layout is rendered","Theme settings are automatically persisted to localStorage"]},{category:"Responsive Design",items:["Always test layouts on mobile devices","Use provided breakpoint system for responsive behavior","Consider touch interactions for mobile navigation","Admin layout automatically shows drawer on mobile"]},{category:"Accessibility",items:["Provide meaningful menu item names","Use semantic HTML structure","Test keyboard navigation","Ensure proper color contrast in all themes","Support RTL/LTR for international users"]}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Best Practices",description:"Guidelines for optimal layout system implementation and common patterns.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Star,{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("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Best Practices"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Guidelines for optimal layout system implementation"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:i.map((a,r)=>e.jsx(t.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-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-md",children:e.jsx(s.CheckCircle,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg",children:a.category})]}),e.jsx("ul",{className:"space-y-2",children:a.items.map((o,n)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.ArrowRight,{className:"w-4 h-4 text-primary mt-0.5 shrink-0"}),e.jsx(t.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:o})]},n))})]})},r))})]})};exports.default=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DEZRGktf.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const i=[{category:"Layout Selection",items:["Admin: Use for complex applications with many navigation items and sidebar menus","Horizontal: Use for content-focused sites and simple applications with top navigation","Clean: Use for authentication flows, landing pages, and standalone content"]},{category:"ThemeProvider Setup",items:["Always wrap your application with ThemeProvider before using layouts","Provide menuItems prop for Admin and Horizontal layouts","Use layout prop to control which layout is rendered","Theme settings are automatically persisted to localStorage"]},{category:"Responsive Design",items:["Always test layouts on mobile devices","Use provided breakpoint system for responsive behavior","Consider touch interactions for mobile navigation","Admin layout automatically shows drawer on mobile"]},{category:"Accessibility",items:["Provide meaningful menu item names","Use semantic HTML structure","Test keyboard navigation","Ensure proper color contrast in all themes","Support RTL/LTR for international users"]}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Best Practices",description:"Guidelines for optimal layout system implementation and common patterns.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Star,{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("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Best Practices"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Guidelines for optimal layout system implementation"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:i.map((a,r)=>e.jsx(t.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-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-md",children:e.jsx(s.CheckCircle,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg",children:a.category})]}),e.jsx("ul",{className:"space-y-2",children:a.items.map((o,n)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.ArrowRight,{className:"w-4 h-4 text-primary mt-0.5 shrink-0"}),e.jsx(t.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:o})]},n))})]})},r))})]})};exports.default=l;

package/documentation/{BestPracticesSection-BgPOX_gI.js → BestPracticesSection-C2qWSaaK.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["Always define a TypeScript interface for your form values","Use generic types: Form<FormValues>, FormField<FormValues>","Prefer centralized validationSchema for consistency","Provide clear, user-friendly error messages",'Use mode: "onBlur" for large forms (fewer re-renders)','Use mode: "onChange" when real-time feedback is needed',"Always add labels for accessibility (FormField label prop)","Use reset() to clear forms after successful submission"],l=["Don't use uncontrolled inputs outside FormField — they won't register","Don't call setValue without shouldValidate: true if you need instant feedback","Don't put useFormContext in a component outside Form — it will crash","Don't mix controlled and uncontrolled patterns in the same field","Don't use watch() for values you only read on submit — use getValues() instead","Don't forget defaultValues — required for reset() and initial state","Don't validate on every keystroke for complex async checks — use debounce","Don't skip FormField for inputs that need error display"],n=[{title:"Isolated Re-renders",description:"react-hook-form only re-renders the field that changed, not the whole form. This is automatic.",icon:e.jsx(r.Zap,{className:"w-5 h-5 text-amber-500"})},{title:"Use onBlur Mode",description:'For forms with 10+ fields, mode: "onBlur" validates only when the user leaves a field, reducing re-renders.',icon:e.jsx(r.Timer,{className:"w-5 h-5 text-blue-500"})},{title:"Avoid watch() Overuse",description:"Each watch() call subscribes to re-renders. Use getValues() for one-time reads in handlers.",icon:e.jsx(r.Eye,{className:"w-5 h-5 text-purple-500"})},{title:"Split Large Forms",description:"For wizard/multi-step flows, split into multiple Form instances or conditional sections.",icon:e.jsx(r.Layers,{className:"w-5 h-5 text-green-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for building performant, accessible, and maintainable forms with the tucu-ui form system.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.CheckCircle,{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:"Do's and Don'ts"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick reference for form development"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(r.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-green-700 dark:text-green-400",children:"Do"})]}),i.map((t,a)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(r.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:t})]},a))]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(r.XCircle,{className:"w-5 h-5 text-red-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-red-700 dark:text-red-400",children:"Don't"})]}),l.map((t,a)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(r.X,{className:"w-4 h-4 text-red-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:t})]},a))]})})]})]}),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:"Performance Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How to keep forms fast as they grow in complexity"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:n.map((t,a)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[t.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:t.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:t.description})]})},a))})]})]})};exports.default=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DEZRGktf.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["Always define a TypeScript interface for your form values","Use generic types: Form<FormValues>, FormField<FormValues>","Prefer centralized validationSchema for consistency","Provide clear, user-friendly error messages",'Use mode: "onBlur" for large forms (fewer re-renders)','Use mode: "onChange" when real-time feedback is needed',"Always add labels for accessibility (FormField label prop)","Use reset() to clear forms after successful submission"],l=["Don't use uncontrolled inputs outside FormField — they won't register","Don't call setValue without shouldValidate: true if you need instant feedback","Don't put useFormContext in a component outside Form — it will crash","Don't mix controlled and uncontrolled patterns in the same field","Don't use watch() for values you only read on submit — use getValues() instead","Don't forget defaultValues — required for reset() and initial state","Don't validate on every keystroke for complex async checks — use debounce","Don't skip FormField for inputs that need error display"],n=[{title:"Isolated Re-renders",description:"react-hook-form only re-renders the field that changed, not the whole form. This is automatic.",icon:e.jsx(r.Zap,{className:"w-5 h-5 text-amber-500"})},{title:"Use onBlur Mode",description:'For forms with 10+ fields, mode: "onBlur" validates only when the user leaves a field, reducing re-renders.',icon:e.jsx(r.Timer,{className:"w-5 h-5 text-blue-500"})},{title:"Avoid watch() Overuse",description:"Each watch() call subscribes to re-renders. Use getValues() for one-time reads in handlers.",icon:e.jsx(r.Eye,{className:"w-5 h-5 text-purple-500"})},{title:"Split Large Forms",description:"For wizard/multi-step flows, split into multiple Form instances or conditional sections.",icon:e.jsx(r.Layers,{className:"w-5 h-5 text-green-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for building performant, accessible, and maintainable forms with the tucu-ui form system.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.CheckCircle,{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:"Do's and Don'ts"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick reference for form development"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(r.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-green-700 dark:text-green-400",children:"Do"})]}),i.map((t,a)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(r.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:t})]},a))]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(r.XCircle,{className:"w-5 h-5 text-red-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-red-700 dark:text-red-400",children:"Don't"})]}),l.map((t,a)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(r.X,{className:"w-4 h-4 text-red-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:t})]},a))]})})]})]}),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:"Performance Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How to keep forms fast as they grow in complexity"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:n.map((t,a)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[t.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:t.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:t.description})]})},a))})]})]})};exports.default=o;

package/documentation/{BestPracticesSection-CJYUqkS3.js → BestPracticesSection-CErhrvMA.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["Use descriptive route names and paths","Keep route hierarchy shallow (max 2-3 levels)","Use consistent naming conventions across routes","Leverage TypeScript for type-safe route definitions","Use useMemo for dynamic route generation","Include icons for better navigation UX","Test routes with different user roles and permissions","Use basePath for MFE applications","Provide isAuthenticated and loginUrl in MFE mode","Use enableNestedRoutes when child components need internal routing"],n=["Create overly deep nesting (>3 levels)",'Use generic names like "Page" or "Component"',"Hardcode paths in components — use ReactRouter hooks","Forget to handle 404 pages with customRoutes","Mix routing logic with business logic","Skip accessibility considerations in navigation","Ignore mobile navigation UX patterns","Mix Standalone and MFE props in the same ThemeProvider","Import directly from react-router-dom — use ReactRouter namespace","Use StandaloneAppThemeProvider directly — use ThemeProvider"];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for building maintainable, accessible, and type-safe routing configurations.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.ShieldCheck,{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:"Recommendations"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these guidelines for robust routing"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 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-green-500 to-emerald-500 shadow-lg",children:e.jsx(a.Check,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Do's"})]}),e.jsx("ul",{className:"space-y-2",children:i.map((t,r)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},r))})]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 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-red-500 to-rose-500 shadow-lg",children:e.jsx(a.X,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Don'ts"})]}),e.jsx("ul",{className:"space-y-2",children:n.map((t,r)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},r))})]})})]})]})]})};exports.default=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DEZRGktf.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["Use descriptive route names and paths","Keep route hierarchy shallow (max 2-3 levels)","Use consistent naming conventions across routes","Leverage TypeScript for type-safe route definitions","Use useMemo for dynamic route generation","Include icons for better navigation UX","Test routes with different user roles and permissions","Use basePath for MFE applications","Provide isAuthenticated and loginUrl in MFE mode","Use enableNestedRoutes when child components need internal routing"],n=["Create overly deep nesting (>3 levels)",'Use generic names like "Page" or "Component"',"Hardcode paths in components — use ReactRouter hooks","Forget to handle 404 pages with customRoutes","Mix routing logic with business logic","Skip accessibility considerations in navigation","Ignore mobile navigation UX patterns","Mix Standalone and MFE props in the same ThemeProvider","Import directly from react-router-dom — use ReactRouter namespace","Use StandaloneAppThemeProvider directly — use ThemeProvider"];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for building maintainable, accessible, and type-safe routing configurations.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.ShieldCheck,{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:"Recommendations"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these guidelines for robust routing"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 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-green-500 to-emerald-500 shadow-lg",children:e.jsx(a.Check,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Do's"})]}),e.jsx("ul",{className:"space-y-2",children:i.map((t,r)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},r))})]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 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-red-500 to-rose-500 shadow-lg",children:e.jsx(a.X,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Don'ts"})]}),e.jsx("ul",{className:"space-y-2",children:n.map((t,r)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},r))})]})})]})]})]})};exports.default=o;

package/documentation/{BestPracticesSection-DjiIOPo0.js → BestPracticesSection-Csdk_trd.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["Use semantic HTML elements (button, nav, main, aside, header)","Always provide label prop on Input, Select, and Checkbox","Use helperText to give additional context to form fields","Test with keyboard-only navigation before shipping","Use aria-label when visual label is not possible","Set dismissible={true} on non-critical alerts","Use the correct variant on Alert (info/warning/error/success)","Trust built-in ARIA — components auto-wire roles and attributes"],l=["Don't use div or span for interactive elements — use Button","Don't rely on color alone to convey information","Don't suppress focus outlines (outline-none without replacement)","Don't use aria-label when a visible label exists (duplicates)","Don't auto-play animations without prefers-reduced-motion check","Don't trap focus in elements that shouldn't trap (non-modal)","Don't use placeholder as a substitute for label","Don't disable zoom on mobile viewports"],n=[{title:"Color Contrast",description:"Maintain minimum 4.5:1 ratio for normal text, 3:1 for large text. Use browser DevTools to check.",icon:e.jsx(t.Palette,{className:"w-5 h-5 text-purple-500"})},{title:"Focus Order",description:"Ensure Tab order follows visual reading order. Never use positive tabIndex values.",icon:e.jsx(t.ArrowDownUp,{className:"w-5 h-5 text-blue-500"})},{title:"Error Messages",description:"Connect errors to fields via aria-describedby. tucu-ui Input/Select/Checkbox do this automatically.",icon:e.jsx(t.AlertCircle,{className:"w-5 h-5 text-red-500"})},{title:"Live Regions",description:'Use Alert component for dynamic content — it includes role="alert" and aria-live="assertive" built-in.',icon:e.jsx(t.Bell,{className:"w-5 h-5 text-amber-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for maintaining accessibility when building with tucu-ui. Follow these patterns to ensure your application is usable by everyone.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.ShieldCheck,{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:"Do's and Don'ts"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick reference for accessible patterns"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(t.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-green-700 dark:text-green-400",children:"Do"})]}),i.map((a,r)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:a})]},r))]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(t.XCircle,{className:"w-5 h-5 text-red-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-red-700 dark:text-red-400",children:"Don't"})]}),l.map((a,r)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.X,{className:"w-4 h-4 text-red-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:a})]},r))]})})]})]}),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:"Quick Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Common accessibility patterns to keep in mind"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:n.map((a,r)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[a.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:a.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:a.description})]})},r))})]})]})};exports.default=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DEZRGktf.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["Use semantic HTML elements (button, nav, main, aside, header)","Always provide label prop on Input, Select, and Checkbox","Use helperText to give additional context to form fields","Test with keyboard-only navigation before shipping","Use aria-label when visual label is not possible","Set dismissible={true} on non-critical alerts","Use the correct variant on Alert (info/warning/error/success)","Trust built-in ARIA — components auto-wire roles and attributes"],l=["Don't use div or span for interactive elements — use Button","Don't rely on color alone to convey information","Don't suppress focus outlines (outline-none without replacement)","Don't use aria-label when a visible label exists (duplicates)","Don't auto-play animations without prefers-reduced-motion check","Don't trap focus in elements that shouldn't trap (non-modal)","Don't use placeholder as a substitute for label","Don't disable zoom on mobile viewports"],n=[{title:"Color Contrast",description:"Maintain minimum 4.5:1 ratio for normal text, 3:1 for large text. Use browser DevTools to check.",icon:e.jsx(t.Palette,{className:"w-5 h-5 text-purple-500"})},{title:"Focus Order",description:"Ensure Tab order follows visual reading order. Never use positive tabIndex values.",icon:e.jsx(t.ArrowDownUp,{className:"w-5 h-5 text-blue-500"})},{title:"Error Messages",description:"Connect errors to fields via aria-describedby. tucu-ui Input/Select/Checkbox do this automatically.",icon:e.jsx(t.AlertCircle,{className:"w-5 h-5 text-red-500"})},{title:"Live Regions",description:'Use Alert component for dynamic content — it includes role="alert" and aria-live="assertive" built-in.',icon:e.jsx(t.Bell,{className:"w-5 h-5 text-amber-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for maintaining accessibility when building with tucu-ui. Follow these patterns to ensure your application is usable by everyone.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.ShieldCheck,{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:"Do's and Don'ts"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick reference for accessible patterns"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(t.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-green-700 dark:text-green-400",children:"Do"})]}),i.map((a,r)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:a})]},r))]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(t.XCircle,{className:"w-5 h-5 text-red-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-red-700 dark:text-red-400",children:"Don't"})]}),l.map((a,r)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.X,{className:"w-4 h-4 text-red-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:a})]},r))]})})]})]}),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:"Quick Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Common accessibility patterns to keep in mind"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:n.map((a,r)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[a.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:a.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:a.description})]})},r))})]})]})};exports.default=o;

package/documentation/{BestPracticesSection-DCIOp37N.js → BestPracticesSection-CtRRWADg.js}

@@ -1,5 +1,5 @@
 import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { H as h, T as a, C as t, c as l } from "../index-4GONhZIF.js";
+import { H as h, T as a, C as t, c as l } from "../index-sdOMz8GW.js";
 import { ShieldCheck as p, Check as i, X as n, Puzzle as u, Monitor as g } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BestPracticesSection-CDbUzkng.js → BestPracticesSection-D3qcavnw.js}

@@ -1,5 +1,5 @@
 import { jsxs as s, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as m, T as a, C as r } from "../index-4GONhZIF.js";
+import { H as m, T as a, C as r } from "../index-sdOMz8GW.js";
 import { ShieldCheck as h, Check as n, X as o } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BestPracticesSection-BR4dbFpB.js → BestPracticesSection-DXdC__GI.js}

@@ -1,5 +1,5 @@
 import { jsxs as s, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as m, T as t, C as i } from "../index-4GONhZIF.js";
+import { H as m, T as t, C as i } from "../index-sdOMz8GW.js";
 import { CheckCircle as l, Check as h, XCircle as p, X as f, Zap as u, Timer as g, Eye as x, Layers as y } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BestPracticesSection-CxMpa6p1.js → BestPracticesSection-DZOYBU7b.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const i=["Use the useTheme hook to access theme state","Utilize built-in color presets for consistency","Test your application in both light and dark modes","Use the settings panel for user customization","Leverage persistent storage for user preferences","Use semantic Tailwind classes (bg-brand, text-secondary)","Respect THEME_STYLE_LAYOUTS constraints when changing layouts"],n=["Directly manipulate CSS custom properties","Hardcode colors that don't adapt to themes","Override theme state without using setters","Ignore RTL support for international apps","Disable all settings without providing alternatives","Use arbitrary hex values instead of design tokens","Assign layouts incompatible with the current theme style"];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Recommended patterns and anti-patterns for working with the theme system effectively.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.ShieldCheck,{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:"Guidelines"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these patterns to keep your theming consistent and maintainable"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Do's",children:e.jsx("ul",{className:"space-y-2",children:i.map((t,a)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(r.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},a))})})}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Don'ts",children:e.jsx("ul",{className:"space-y-2",children:n.map((t,a)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(r.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},a))})})})]})]})]})};exports.default=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DEZRGktf.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const i=["Use the useTheme hook to access theme state","Utilize built-in color presets for consistency","Test your application in both light and dark modes","Use the settings panel for user customization","Leverage persistent storage for user preferences","Use semantic Tailwind classes (bg-brand, text-secondary)","Respect THEME_STYLE_LAYOUTS constraints when changing layouts"],n=["Directly manipulate CSS custom properties","Hardcode colors that don't adapt to themes","Override theme state without using setters","Ignore RTL support for international apps","Disable all settings without providing alternatives","Use arbitrary hex values instead of design tokens","Assign layouts incompatible with the current theme style"];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Recommended patterns and anti-patterns for working with the theme system effectively.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.ShieldCheck,{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:"Guidelines"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these patterns to keep your theming consistent and maintainable"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Do's",children:e.jsx("ul",{className:"space-y-2",children:i.map((t,a)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(r.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},a))})})}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Don'ts",children:e.jsx("ul",{className:"space-y-2",children:n.map((t,a)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(r.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},a))})})})]})]})]})};exports.default=l;

package/documentation/{BestPracticesSection-CSnNKGOl.js → BestPracticesSection-DjfYNmcE.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=["Use LucideIcons namespace for general UI icons (1500+ available)","Use custom icons for domain-specific needs (crypto, layouts, brands)","Size icons with Tailwind classes: w-4 h-4, w-5 h-5, w-6 h-6","Use currentColor via text-* classes for theme-aware coloring",'Add aria-hidden="true" on decorative icons next to text',"Add aria-label on buttons containing only an icon","Use consistent sizes within the same context (buttons, nav, etc.)","Prefer className over inline style for sizing and color"],n=["Don't import Lucide icons individually — use LucideIcons.* namespace","Don't mix sizing approaches (className vs size prop) in same project","Don't use icon-only buttons without aria-label","Don't use color alone to convey meaning (pair with text or shape)","Don't hardcode colors with fill/stroke — use Tailwind text-* classes","Don't import the entire icon set manually — rely on tree-shaking","Don't use custom Tucu icons when Lucide has an equivalent","Don't forget hover/focus states on interactive icons"],c=[{title:"Lucide is External",description:"lucide-react is not bundled inside tucu-ui — your bundler tree-shakes it. Only icons you reference are included.",icon:e.jsx(a.Package,{className:"w-5 h-5 text-green-500"})},{title:"Custom Icons Are Bundled",description:"All 96 custom icons are always included in the tucu-ui bundle. They are small SVGs (~200B each).",icon:e.jsx(a.HardDrive,{className:"w-5 h-5 text-blue-500"})},{title:"Avoid Dynamic Imports",description:"Don't lazy-load individual icons. SVGs are tiny and the network overhead outweighs the savings.",icon:e.jsx(a.Zap,{className:"w-5 h-5 text-amber-500"})},{title:"Use Namespace Pattern",description:"LucideIcons.Home is a single import. Your bundler only includes Home, not the entire library.",icon:e.jsx(a.TreeDeciduous,{className:"w-5 h-5 text-purple-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for optimal icon usage — performance, accessibility, consistency, and maintainability patterns.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.CheckCircle,{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:"Do's and Don'ts"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick reference for icon best practices"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(a.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-green-700 dark:text-green-400",children:"Do"})]}),r.map((t,i)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:t})]},i))]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(a.XCircle,{className:"w-5 h-5 text-red-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-red-700 dark:text-red-400",children:"Don't"})]}),n.map((t,i)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(a.X,{className:"w-4 h-4 text-red-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:t})]},i))]})})]})]}),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:"Performance Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How the icon system affects bundle size"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:c.map((t,i)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[t.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:t.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:t.description})]})},i))})]})]})};exports.default=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DEZRGktf.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=["Use LucideIcons namespace for general UI icons (1500+ available)","Use custom icons for domain-specific needs (crypto, layouts, brands)","Size icons with Tailwind classes: w-4 h-4, w-5 h-5, w-6 h-6","Use currentColor via text-* classes for theme-aware coloring",'Add aria-hidden="true" on decorative icons next to text',"Add aria-label on buttons containing only an icon","Use consistent sizes within the same context (buttons, nav, etc.)","Prefer className over inline style for sizing and color"],n=["Don't import Lucide icons individually — use LucideIcons.* namespace","Don't mix sizing approaches (className vs size prop) in same project","Don't use icon-only buttons without aria-label","Don't use color alone to convey meaning (pair with text or shape)","Don't hardcode colors with fill/stroke — use Tailwind text-* classes","Don't import the entire icon set manually — rely on tree-shaking","Don't use custom Tucu icons when Lucide has an equivalent","Don't forget hover/focus states on interactive icons"],c=[{title:"Lucide is External",description:"lucide-react is not bundled inside tucu-ui — your bundler tree-shakes it. Only icons you reference are included.",icon:e.jsx(a.Package,{className:"w-5 h-5 text-green-500"})},{title:"Custom Icons Are Bundled",description:"All 96 custom icons are always included in the tucu-ui bundle. They are small SVGs (~200B each).",icon:e.jsx(a.HardDrive,{className:"w-5 h-5 text-blue-500"})},{title:"Avoid Dynamic Imports",description:"Don't lazy-load individual icons. SVGs are tiny and the network overhead outweighs the savings.",icon:e.jsx(a.Zap,{className:"w-5 h-5 text-amber-500"})},{title:"Use Namespace Pattern",description:"LucideIcons.Home is a single import. Your bundler only includes Home, not the entire library.",icon:e.jsx(a.TreeDeciduous,{className:"w-5 h-5 text-purple-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for optimal icon usage — performance, accessibility, consistency, and maintainability patterns.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.CheckCircle,{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:"Do's and Don'ts"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick reference for icon best practices"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(a.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-green-700 dark:text-green-400",children:"Do"})]}),r.map((t,i)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:t})]},i))]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(a.XCircle,{className:"w-5 h-5 text-red-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-red-700 dark:text-red-400",children:"Don't"})]}),n.map((t,i)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(a.X,{className:"w-4 h-4 text-red-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:t})]},i))]})})]})]}),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:"Performance Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How the icon system affects bundle size"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:c.map((t,i)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[t.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:t.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:t.description})]})},i))})]})]})};exports.default=l;

package/documentation/{BestPracticesSection-Bi5xrYmy.js → BestPracticesSection-DjhMum8X.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { H as l, T as a, C as m } from "../index-4GONhZIF.js";
+import { H as l, T as a, C as m } from "../index-sdOMz8GW.js";
 import { Star as c, CheckCircle as d, ArrowRight as p } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BestPracticesSection-p6yKTAKz.js → BestPracticesSection-DmYdH0Lr.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const o=["Use useIsMounted to guard async state updates and prevent memory leaks","Prefer useElementSize over useMeasure for simple width/height tracking","Leverage generic types: useElementSize<HTMLCanvasElement>()","Debounce rapid state changes when using useToastStore","Import only needed hooks for optimal tree-shaking","Combine useLockBodyScroll with focus management for accessible modals","Use useEventListener for keyboard navigation instead of inline handlers","Pass proper event types to useEventListener for type safety","Use useClickAway with a RefObject for dropdown/popover close behavior","Call useAnchorScroll once at root level for smooth scroll navigation"],i=["Destructure useCopyToClipboard as [value, fn] — it returns [stateObj, fn]","Forget that useScrollableSlider requires react-router-dom context","Use useMeasure when you only need width/height — it has more overhead","Lock body scroll without preserving scrollbar width (useLockBodyScroll handles this)","Create multiple useToastStore instances — it is a singleton Zustand store","Ignore the noUserInteraction field in useCopyToClipboard state","Use useIsMounted as a function — it returns a boolean directly","Mix up useElementSize ref (callback ref) with useRef (RefObject)","Hardcode breakpoint pixel values — use useBreakpoint named values instead","Forget cleanup when using useEventListener with custom elements"];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for optimal hook usage, common pitfalls to avoid, and patterns that ensure performance, type safety, and accessibility.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.ShieldCheck,{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:"Recommendations"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these guidelines for robust hook implementations"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 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-green-500 to-emerald-500 shadow-lg",children:e.jsx(a.Check,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Do's"})]}),e.jsx("ul",{className:"space-y-2",children:o.map((r,t)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:r})]},t))})]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 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-red-500 to-rose-500 shadow-lg",children:e.jsx(a.X,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Don'ts"})]}),e.jsx("ul",{className:"space-y-2",children:i.map((r,t)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:r})]},t))})]})})]})]}),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:"Common Patterns"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Recommended hook composition patterns"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 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-indigo-500 to-purple-500 shadow-lg",children:e.jsx(a.Puzzle,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Accessible Modal Pattern"})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`function Modal({ isOpen, onClose, children }) {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DEZRGktf.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const o=["Use useIsMounted to guard async state updates and prevent memory leaks","Prefer useElementSize over useMeasure for simple width/height tracking","Leverage generic types: useElementSize<HTMLCanvasElement>()","Debounce rapid state changes when using useToastStore","Import only needed hooks for optimal tree-shaking","Combine useLockBodyScroll with focus management for accessible modals","Use useEventListener for keyboard navigation instead of inline handlers","Pass proper event types to useEventListener for type safety","Use useClickAway with a RefObject for dropdown/popover close behavior","Call useAnchorScroll once at root level for smooth scroll navigation"],i=["Destructure useCopyToClipboard as [value, fn] — it returns [stateObj, fn]","Forget that useScrollableSlider requires react-router-dom context","Use useMeasure when you only need width/height — it has more overhead","Lock body scroll without preserving scrollbar width (useLockBodyScroll handles this)","Create multiple useToastStore instances — it is a singleton Zustand store","Ignore the noUserInteraction field in useCopyToClipboard state","Use useIsMounted as a function — it returns a boolean directly","Mix up useElementSize ref (callback ref) with useRef (RefObject)","Hardcode breakpoint pixel values — use useBreakpoint named values instead","Forget cleanup when using useEventListener with custom elements"];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for optimal hook usage, common pitfalls to avoid, and patterns that ensure performance, type safety, and accessibility.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.ShieldCheck,{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:"Recommendations"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these guidelines for robust hook implementations"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 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-green-500 to-emerald-500 shadow-lg",children:e.jsx(a.Check,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Do's"})]}),e.jsx("ul",{className:"space-y-2",children:o.map((r,t)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:r})]},t))})]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 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-red-500 to-rose-500 shadow-lg",children:e.jsx(a.X,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Don'ts"})]}),e.jsx("ul",{className:"space-y-2",children:i.map((r,t)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:r})]},t))})]})})]})]}),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:"Common Patterns"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Recommended hook composition patterns"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 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-indigo-500 to-purple-500 shadow-lg",children:e.jsx(a.Puzzle,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Accessible Modal Pattern"})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`function Modal({ isOpen, onClose, children }) {
   const modalRef = useRef<HTMLDivElement>(null);
   
   // Lock scroll when modal opens

package/documentation/{BestPracticesSection-LF77lB2o.js → BestPracticesSection-PTedcEGr.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { H as m, T as r, C as i, a as n } from "../index-4GONhZIF.js";
+import { H as m, T as r, C as i, a as n } from "../index-sdOMz8GW.js";
 import { ShieldCheck as d, Check as h, X as p } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BestPracticesSection-CKgzm1wF.js → BestPracticesSection-gfNzvO5h.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { H as d, T as a, C as r } from "../index-4GONhZIF.js";
+import { H as d, T as a, C as r } from "../index-sdOMz8GW.js";
 import { ShieldCheck as m, CheckCircle as h, Check as p, XCircle as u, X as g, Palette as x, ArrowDownUp as b, AlertCircle as f, Bell as w } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BorderRadiusSection-zrkMx4HO.js → BorderRadiusSection-6DM9OQEX.js}

@@ -1,5 +1,5 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { H as l, C as i, a as o, T as a } from "../index-4GONhZIF.js";
+import { H as l, C as i, a as o, T as a } from "../index-sdOMz8GW.js";
 import { Circle as n } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BorderRadiusSection--NQ7VUFN.js → BorderRadiusSection-Ca_L-a9T.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-C0NugKZs.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const a={0:"rounded-[0px]",100:"rounded-[4px]",200:"rounded-[8px]",300:"rounded-[12px]",400:"rounded-[16px]",500:"rounded-[24px]",600:"rounded-[32px]",700:"rounded-[40px]",800:"rounded-[48px]",900:"rounded-[56px]",1e3:"rounded-[100000px]"};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(r.HeroCard,{title:"Border Radius",description:"Border radius scale using Tailwind arbitrary values for consistent rounded corners.",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-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(l.Circle,{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(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Border Radius Scale",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",children:Object.entries(a).map(([s,d])=>{const i=d.replace("rounded-[","").replace("]","");return e.jsxs("div",{className:"border border-border rounded-lg p-4 space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:s}),e.jsx(r.Typography,{tag:"h4",className:"text-muted text-[10px]",children:i})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:`w-20 h-20 bg-primary ${d}`})}),e.jsx(r.Typography,{tag:"h4",className:"text-muted text-[9px] break-all px-1 text-center",children:d})]},s)})})})})})]})};exports.default=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-DEZRGktf.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const a={0:"rounded-[0px]",100:"rounded-[4px]",200:"rounded-[8px]",300:"rounded-[12px]",400:"rounded-[16px]",500:"rounded-[24px]",600:"rounded-[32px]",700:"rounded-[40px]",800:"rounded-[48px]",900:"rounded-[56px]",1e3:"rounded-[100000px]"};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(r.HeroCard,{title:"Border Radius",description:"Border radius scale using Tailwind arbitrary values for consistent rounded corners.",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-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(l.Circle,{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(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Border Radius Scale",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",children:Object.entries(a).map(([s,d])=>{const i=d.replace("rounded-[","").replace("]","");return e.jsxs("div",{className:"border border-border rounded-lg p-4 space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:s}),e.jsx(r.Typography,{tag:"h4",className:"text-muted text-[10px]",children:i})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:`w-20 h-20 bg-primary ${d}`})}),e.jsx(r.Typography,{tag:"h4",className:"text-muted text-[9px] break-all px-1 text-center",children:d})]},s)})})})})})]})};exports.default=t;

package/documentation/{ButtonDripSection-8b--VA4e.js → ButtonDripSection-BX9PrDGJ.js}

@@ -1,5 +1,5 @@
 import { jsxs as o, Fragment as n, jsx as t } from "react/jsx-runtime";
-import { H as c, C as l, a as i, T as a, x as e, P as s, A as m, c as d } from "../index-4GONhZIF.js";
+import { H as c, C as l, a as i, T as a, x as e, P as s, A as m, c as d } from "../index-sdOMz8GW.js";
 import { MousePointerClick as p } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{ButtonDripSection-DDKo9R2R.js → ButtonDripSection-BydjDqT3.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../index-C0NugKZs.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>t.jsxs(t.Fragment,{children:[t.jsx(e.HeroCard,{title:"ButtonDrip",description:"A button effect component that creates a ripple animation on click.",icon:t.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-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:t.jsx(l.MousePointerClick,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),t.jsx(e.CardContainer,{className:"overflow-hidden",children:t.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsxs("div",{className:"space-y-4",children:[t.jsxs(e.CardContainer,{className:"p-4",children:[t.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Button with Drip Effect"}),t.jsx(e.Button,{children:"Click me"})]}),t.jsxs(e.CardContainer,{className:"p-4",children:[t.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Button with Tooltip"}),t.jsxs("div",{className:"flex flex-wrap gap-4",children:[t.jsx(e.Button,{tooltip:"Save changes",tooltipPlacement:"top",children:"Top"}),t.jsx(e.Button,{tooltip:"Delete item",tooltipPlacement:"bottom",tooltipColor:"light",color:"danger",children:"Bottom (light)"}),t.jsx(e.Button,{tooltip:"Go back",tooltipPlacement:"left",variant:"ghost",children:"Left"}),t.jsx(e.Button,{tooltip:"More info",tooltipPlacement:"right",variant:"ghost",color:"info",children:"Right"})]})]})]})})})}),t.jsx(e.PropPlayground,{componentName:"Button",defaultValues:{variant:"solid",color:"primary",size:"medium",shape:"rounded",tooltip:"",tooltipPlacement:"top"},excludeProps:["onClick","loaderSize","loaderVariant","aria-label","aria-describedby"],children:o=>t.jsx(e.Button,{...o,children:"Click me"})}),t.jsx(e.AutoPropsTable,{componentName:"Button"}),t.jsx(e.CardContainer,{className:"overflow-hidden",children:t.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsx(e.CodeBlock,{language:"tsx",code:`import { ButtonDrip } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../index-DEZRGktf.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>t.jsxs(t.Fragment,{children:[t.jsx(e.HeroCard,{title:"ButtonDrip",description:"A button effect component that creates a ripple animation on click.",icon:t.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-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:t.jsx(l.MousePointerClick,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),t.jsx(e.CardContainer,{className:"overflow-hidden",children:t.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsxs("div",{className:"space-y-4",children:[t.jsxs(e.CardContainer,{className:"p-4",children:[t.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Button with Drip Effect"}),t.jsx(e.Button,{children:"Click me"})]}),t.jsxs(e.CardContainer,{className:"p-4",children:[t.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Button with Tooltip"}),t.jsxs("div",{className:"flex flex-wrap gap-4",children:[t.jsx(e.Button,{tooltip:"Save changes",tooltipPlacement:"top",children:"Top"}),t.jsx(e.Button,{tooltip:"Delete item",tooltipPlacement:"bottom",tooltipColor:"light",color:"danger",children:"Bottom (light)"}),t.jsx(e.Button,{tooltip:"Go back",tooltipPlacement:"left",variant:"ghost",children:"Left"}),t.jsx(e.Button,{tooltip:"More info",tooltipPlacement:"right",variant:"ghost",color:"info",children:"Right"})]})]})]})})})}),t.jsx(e.PropPlayground,{componentName:"Button",defaultValues:{variant:"solid",color:"primary",size:"medium",shape:"rounded",tooltip:"",tooltipPlacement:"top"},excludeProps:["onClick","loaderSize","loaderVariant","aria-label","aria-describedby"],children:o=>t.jsx(e.Button,{...o,children:"Click me"})}),t.jsx(e.AutoPropsTable,{componentName:"Button"}),t.jsx(e.CardContainer,{className:"overflow-hidden",children:t.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsx(e.CodeBlock,{language:"tsx",code:`import { ButtonDrip } from '@e-burgos/tucu-ui';
 
 // ButtonDrip is typically used internally by Button component
 // It creates a ripple effect when a button is clicked

package/documentation/{ButtonLoaderSection-CBA_ZHhE.js → ButtonLoaderSection-B_zzpnWT.js}

@@ -1,5 +1,5 @@
 import { jsxs as i, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { H as d, C as a, a as o, T as r, x as l, P as c, y as m, c as p } from "../index-4GONhZIF.js";
+import { H as d, C as a, a as o, T as r, x as l, P as c, y as m, c as p } from "../index-sdOMz8GW.js";
 import { Loader2 as u } from "lucide-react";
 import "react-router-dom";
 import "react";