@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/BestPracticesSection-B_tSX3Jz.js

@@ -1,43 +0,0 @@
-import { jsx as e, Fragment as t, jsxs as a } from "react/jsx-runtime";
-import { C as c, a as m, T as i } from "../index-B919yoKU.js";
-import { CheckCircle as n, Check as o, Code as l } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const b = () => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(m, { title: "Best Practices", className: "mt-2 mb-6", children: /* @__PURE__ */ e("div", { className: "space-y-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-  /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ e("div", { className: "p-2 bg-linear-to-br from-green-500 to-emerald-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-      /* @__PURE__ */ e(i, { tag: "h4", className: "font-semibold", children: "Performance & UX" })
-    ] }),
-    /* @__PURE__ */ e("ul", { className: "space-y-2", children: [
-      'Use mode: "onBlur" for better performance on large forms',
-      "Provide clear, helpful error messages",
-      "Show validation feedback in real-time",
-      "Use loading states during submission",
-      "Implement proper focus management"
-    ].map((s, r) => /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(o, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
-      /* @__PURE__ */ e("span", { className: "text-sm", children: s })
-    ] }, r)) })
-  ] }),
-  /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ e("div", { className: "p-2 bg-linear-to-br from-blue-500 to-cyan-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-      /* @__PURE__ */ e(i, { tag: "h4", className: "font-semibold", children: "Development" })
-    ] }),
-    /* @__PURE__ */ e("ul", { className: "space-y-2", children: [
-      "Define TypeScript interfaces for form data",
-      "Use generic types with Form and FormField components",
-      "Leverage centralized validation schemas",
-      "Always provide labels for accessibility",
-      "Maintain logical tab order for keyboard navigation"
-    ].map((s, r) => /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(l, { className: "w-4 h-4 text-blue-500 mt-0.5 shrink-0" }),
-      /* @__PURE__ */ e("span", { className: "text-sm", children: s })
-    ] }, r)) })
-  ] })
-] }) }) }) }) });
-export {
-  b as default
-};

package/documentation/BestPracticesSection-BgqLgEsR.js

@@ -1,41 +0,0 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { ag as t, T as l } from "../index-B919yoKU.js";
-import { Lightbulb as i, Check as a } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const p = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "space-y-4", children: [
-  /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ e(i, { className: "w-5 h-5 text-yellow-500" }),
-    /* @__PURE__ */ e(l, { tag: "h6", className: "font-semibold", children: "Accessibility Best Practices" })
-  ] }),
-  /* @__PURE__ */ s("ul", { className: "space-y-2 text-sm", children: [
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(a, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "Use semantic HTML elements whenever possible" })
-    ] }),
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(a, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "Provide alternative text for all images" })
-    ] }),
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(a, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "Ensure sufficient color contrast (4.5:1 for normal text)" })
-    ] }),
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(a, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "Make all functionality keyboard accessible" })
-    ] }),
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(a, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "Use ARIA labels and descriptions appropriately" })
-    ] }),
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(a, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "Test with real users who use assistive technologies" })
-    ] })
-  ] })
-] }) }) });
-export {
-  p as default
-};

package/documentation/BestPracticesSection-CJxGoR3b.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-COj1N7FC.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=[{category:"Performance",items:["Use useCallback and useMemo with hooks that trigger frequent updates","Prefer useElementSize over useMeasure for simple dimension tracking","Debounce rapid state changes with toast notifications","Leverage tree-shaking by importing only needed hooks"]},{category:"TypeScript",items:["Leverage generic types in useElementSize<HTMLCanvasElement>()","Use proper event types with useEventListener","Define custom interfaces for toast variants","Take advantage of full IntelliSense support"]},{category:"Accessibility",items:["Combine useLockBodyScroll with focus management for modals","Use useEventListener for keyboard navigation","Implement proper ARIA attributes with responsive hooks","Test with screen readers and keyboard navigation"]},{category:"Error Handling",items:["Use useIsMounted to prevent memory leaks in async operations","Handle edge cases in measurement hooks","Provide fallbacks for unsupported features","Always validate external data sources"]}];return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Best Practices"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Guidelines for optimal hook implementation and usage"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:r.map((a,i)=>e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-lg",children:e.jsx(t.CheckCircle,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-lg",children:a.category})]}),e.jsx("ul",{className:"space-y-2",children:a.items.map((n,o)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(t.ArrowRight,{className:"w-4 h-4 text-primary mt-0.5 shrink-0"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:n})]},o))})]})},i))})]})};exports.default=l;

package/documentation/BestPracticesSection-CNxmULJM.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-COj1N7FC.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(t.Alert,{children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Lightbulb,{className:"w-5 h-5 text-yellow-500"}),e.jsx(t.Typography,{tag:"h6",className:"font-semibold",children:"Accessibility Best Practices"})]}),e.jsxs("ul",{className:"space-y-2 text-sm",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"Use semantic HTML elements whenever possible"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"Provide alternative text for all images"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"Ensure sufficient color contrast (4.5:1 for normal text)"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"Make all functionality keyboard accessible"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"Use ARIA labels and descriptions appropriately"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"Test with real users who use assistive technologies"})]})]})]})})});exports.default=a;

package/documentation/BestPracticesSection-CYQxggWQ.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-COj1N7FC.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const a=[{category:"Icon Sizing",items:["Use consistent sizing patterns (xs: 12px, sm: 16px, md: 24px, lg: 32px, xl: 48px)","Follow responsive design principles with size variants","Maintain visual hierarchy with appropriate icon sizes","Use Tailwind utility classes for sizing (w-4 h-4, w-6 h-6, etc.)"]},{category:"Accessibility",items:["Always provide aria-label for interactive icons",'Use aria-hidden="true" for decorative icons',"Ensure sufficient color contrast in all themes","Test with screen readers and keyboard navigation","Provide text alternatives when icons convey meaning"]},{category:"Performance",items:["Use the LucideIcons namespace for automatic tree-shaking","Import custom icons directly when needed","Leverage the unified import pattern for better bundling","Avoid importing entire icon libraries"]},{category:"Theme Integration",items:["Use theme-aware custom icons when available","Apply brand colors using text-brand utility class","Ensure icons work well in both light and dark themes","Use currentColor for flexible theming"]}];return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Best Practices"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Guidelines for optimal icon system implementation"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:a.map((i,r)=>e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg",children:e.jsx(t.CheckCircle,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-lg",children:i.category})]}),e.jsx("ul",{className:"space-y-2",children:i.items.map((n,l)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(t.ArrowRight,{className:"w-4 h-4 text-brand mt-0.5 shrink-0"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:n})]},l))})]})},r))})]})};exports.default=c;

package/documentation/BestPracticesSection-CufdR26r.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-COj1N7FC.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Best Practices",className:"mt-2 mb-6",children:e.jsx("div",{className:"space-y-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 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:"h4",className:"font-semibold",children:"Do's"})]}),e.jsx("ul",{className:"space-y-2",children:["Use descriptive route names and paths","Keep route hierarchy logical and shallow (max 2-3 levels)","Use consistent naming conventions","Leverage TypeScript for type safety","Use useMemo for dynamic route generation","Include icons for better UX","Test routes with different user roles","Use basePath for MFE applications"].map((i,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:i})]},r))})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-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:"h4",className:"font-semibold",children:"Don'ts"})]}),e.jsx("ul",{className:"space-y-2",children:["Create overly deep nesting (>3 levels)",'Use generic names like "Page" or "Component"',"Hardcode routes in components","Forget to handle 404 pages","Mix routing logic with business logic","Skip accessibility considerations","Ignore mobile navigation UX","Mix StandaloneApp and MFE patterns"].map((i,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:i})]},r))})]})]})})})})});exports.default=t;

package/documentation/BestPracticesSection-DUw_zF3Z.js

@@ -1,83 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { T as t, C as n } from "../index-B919yoKU.js";
-import { CheckCircle as l, ArrowRight as c } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const f = () => /* @__PURE__ */ a("div", { className: "space-y-8", children: [
-  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Best Practices" }),
-    /* @__PURE__ */ e(
-      t,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Guidelines for optimal hook implementation and usage"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
-    {
-      category: "Performance",
-      items: [
-        "Use useCallback and useMemo with hooks that trigger frequent updates",
-        "Prefer useElementSize over useMeasure for simple dimension tracking",
-        "Debounce rapid state changes with toast notifications",
-        "Leverage tree-shaking by importing only needed hooks"
-      ]
-    },
-    {
-      category: "TypeScript",
-      items: [
-        "Leverage generic types in useElementSize<HTMLCanvasElement>()",
-        "Use proper event types with useEventListener",
-        "Define custom interfaces for toast variants",
-        "Take advantage of full IntelliSense support"
-      ]
-    },
-    {
-      category: "Accessibility",
-      items: [
-        "Combine useLockBodyScroll with focus management for modals",
-        "Use useEventListener for keyboard navigation",
-        "Implement proper ARIA attributes with responsive hooks",
-        "Test with screen readers and keyboard navigation"
-      ]
-    },
-    {
-      category: "Error Handling",
-      items: [
-        "Use useIsMounted to prevent memory leaks in async operations",
-        "Handle edge cases in measurement hooks",
-        "Provide fallbacks for unsupported features",
-        "Always validate external data sources"
-      ]
-    }
-  ].map((s, r) => /* @__PURE__ */ e(
-    n,
-    {
-      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
-      children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(t, { tag: "h3", className: "font-semibold text-lg", children: s.category })
-        ] }),
-        /* @__PURE__ */ e("ul", { className: "space-y-2", children: s.items.map((i, o) => /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ e(c, { className: "w-4 h-4 text-primary mt-0.5 shrink-0" }),
-          /* @__PURE__ */ e(
-            t,
-            {
-              tag: "span",
-              className: "text-sm text-gray-600 dark:text-gray-400",
-              children: i
-            }
-          )
-        ] }, o)) })
-      ] })
-    },
-    r
-  )) })
-] });
-export {
-  f as default
-};

package/documentation/BestPracticesSection-Ds5tgGhx.js

@@ -1,84 +0,0 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { T as i, C as o } from "../index-B919yoKU.js";
-import { CheckCircle as l, ArrowRight as c } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const y = () => /* @__PURE__ */ t("div", { className: "space-y-8", children: [
-  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(i, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Best Practices" }),
-    /* @__PURE__ */ e(
-      i,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Guidelines for optimal icon system implementation"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
-    {
-      category: "Icon Sizing",
-      items: [
-        "Use consistent sizing patterns (xs: 12px, sm: 16px, md: 24px, lg: 32px, xl: 48px)",
-        "Follow responsive design principles with size variants",
-        "Maintain visual hierarchy with appropriate icon sizes",
-        "Use Tailwind utility classes for sizing (w-4 h-4, w-6 h-6, etc.)"
-      ]
-    },
-    {
-      category: "Accessibility",
-      items: [
-        "Always provide aria-label for interactive icons",
-        'Use aria-hidden="true" for decorative icons',
-        "Ensure sufficient color contrast in all themes",
-        "Test with screen readers and keyboard navigation",
-        "Provide text alternatives when icons convey meaning"
-      ]
-    },
-    {
-      category: "Performance",
-      items: [
-        "Use the LucideIcons namespace for automatic tree-shaking",
-        "Import custom icons directly when needed",
-        "Leverage the unified import pattern for better bundling",
-        "Avoid importing entire icon libraries"
-      ]
-    },
-    {
-      category: "Theme Integration",
-      items: [
-        "Use theme-aware custom icons when available",
-        "Apply brand colors using text-brand utility class",
-        "Ensure icons work well in both light and dark themes",
-        "Use currentColor for flexible theming"
-      ]
-    }
-  ].map((a, s) => /* @__PURE__ */ e(
-    o,
-    {
-      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
-      children: /* @__PURE__ */ t("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(i, { tag: "h3", className: "font-semibold text-lg", children: a.category })
-        ] }),
-        /* @__PURE__ */ e("ul", { className: "space-y-2", children: a.items.map((r, n) => /* @__PURE__ */ t("li", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ e(c, { className: "w-4 h-4 text-brand mt-0.5 shrink-0" }),
-          /* @__PURE__ */ e(
-            i,
-            {
-              tag: "span",
-              className: "text-sm text-gray-600 dark:text-gray-400",
-              children: r
-            }
-          )
-        ] }, n)) })
-      ] })
-    },
-    s
-  )) })
-] });
-export {
-  y as default
-};

package/documentation/BestPracticesSection-pnOXAOcz.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-COj1N7FC.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.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Best Practices"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 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-gradient-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/BorderRadiusSection-B-xRRmpt.js

@@ -1,72 +0,0 @@
-import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
-import { T as d, C as i, a as c } from "../index-B919yoKU.js";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const u = (o) => {
-  if (typeof window > "u") return "";
-  const r = document.documentElement;
-  return getComputedStyle(r).getPropertyValue(o).trim() || "";
-}, y = () => /* @__PURE__ */ t(l, { children: [
-  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(d, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Border Radius" }),
-    /* @__PURE__ */ e(
-      d,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Border radius values from Tucu UI Design Tokens"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Border Radius Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-8 p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: Object.entries({
-    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]"
-  }).map(
-    ([r, a]) => {
-      const n = `--radius-tucu-ui-${r}`, s = u(n);
-      return /* @__PURE__ */ t(
-        "div",
-        {
-          className: "border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",
-          children: [
-            /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ e(d, { tag: "h4", className: "font-semibold", children: r }),
-              s && /* @__PURE__ */ e(
-                d,
-                {
-                  tag: "h4",
-                  className: "text-muted text-[10px]",
-                  children: s
-                }
-              )
-            ] }),
-            /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e("div", { className: `w-20 h-20 bg-primary ${a}` }) }),
-            /* @__PURE__ */ e(
-              d,
-              {
-                tag: "h4",
-                className: "text-muted text-[9px] break-all px-1 text-center",
-                children: a
-              }
-            )
-          ]
-        },
-        r
-      );
-    }
-  ) }) }) }) })
-] });
-export {
-  y as default
-};

package/documentation/BorderRadiusSection-D3_hite-.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-COj1N7FC.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=t=>{if(typeof window>"u")return"";const d=document.documentElement;return getComputedStyle(d).getPropertyValue(t).trim()||""},l=()=>{const t={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(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(r.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Border Radius"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Border radius values from Tucu UI Design Tokens"})]}),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(t).map(([d,s])=>{const n=`--radius-tucu-ui-${d}`,a=o(n);return e.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 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:d}),a&&e.jsx(r.Typography,{tag:"h4",className:"text-muted text-[10px]",children:a})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:`w-20 h-20 bg-primary ${s}`})}),e.jsx(r.Typography,{tag:"h4",className:"text-muted text-[9px] break-all px-1 text-center",children:s})]},d)})})})})})]})};exports.default=l;

package/documentation/ButtonDripSection-Bq2trgi9.js

@@ -1,21 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../index-COj1N7FC.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:"text-center space-y-4",children:[t.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ButtonDrip"}),t.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A button effect component that creates a ripple animation on click."})]}),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
-
-<ButtonDrip
-  x={50}
-  y={50}
-  color="#3b82f6"
-  fullWidth={false}
-  onCompleted={() => console.log('Animation completed')}
-/>
-
-// Button with tooltip (portal-based, renders above all DOM)
-<Button tooltip="Save changes" tooltipPlacement="top">
-  Save
-</Button>
-
-<Button tooltip="Delete" tooltipPlacement="bottom" tooltipColor="light" color="danger">
-  Delete
-</Button>`})})})})]});exports.default=l;

package/documentation/ButtonLoaderSection-BkZR40rr.js

@@ -1,155 +0,0 @@
-import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { T as t, C as l, a as s, y as i, P as d, q as c, c as m } from "../index-B919yoKU.js";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const f = () => /* @__PURE__ */ a(n, { children: [
-  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ButtonLoader" }),
-    /* @__PURE__ */ e(
-      t,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "A loader component designed specifically for buttons, providing visual feedback during loading states."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ a(l, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Button with Loading State" }),
-      /* @__PURE__ */ e(i, { isLoading: !0 })
-    ] }),
-    /* @__PURE__ */ a(l, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Button with Custom Loader" }),
-      /* @__PURE__ */ e(i, { isLoading: !0, loaderSize: "small", loaderVariant: "blink" })
-    ] }),
-    /* @__PURE__ */ a(l, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Large Button with Loader" }),
-      /* @__PURE__ */ e(i, { isLoading: !0, size: "large", loaderSize: "large" })
-    ] }),
-    /* @__PURE__ */ a(l, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Small Button with Loader" }),
-      /* @__PURE__ */ e(i, { isLoading: !0, size: "small", loaderSize: "small" })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
-    /* @__PURE__ */ a(l, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Blink Variant" }),
-      /* @__PURE__ */ e(i, { isLoading: !0, loaderVariant: "blink" })
-    ] }),
-    /* @__PURE__ */ a(l, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Scale Up Variant" }),
-      /* @__PURE__ */ e(i, { isLoading: !0, loaderVariant: "scaleUp" })
-    ] }),
-    /* @__PURE__ */ a(l, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Move Up Variant" }),
-      /* @__PURE__ */ e(i, { isLoading: !0, loaderVariant: "moveUp" })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(
-    d,
-    {
-      componentName: "Button",
-      title: "Button Loader Playground",
-      defaultValues: {
-        variant: "solid",
-        color: "primary",
-        size: "medium",
-        isLoading: !0,
-        loaderSize: "small",
-        loaderVariant: "scaleUp"
-      },
-      excludeProps: [
-        "onClick",
-        "aria-label",
-        "aria-describedby",
-        "tooltip",
-        "tooltipArrow",
-        "tooltipColor",
-        "tooltipPlacement",
-        "shape",
-        "fullWidth",
-        "disabled"
-      ],
-      children: (r) => /* @__PURE__ */ e(i, { ...r, children: "Loading..." })
-    }
-  ),
-  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(c, { columns: [
-    {
-      key: "prop",
-      label: "Prop",
-      render: (r) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(r) })
-    },
-    {
-      key: "type",
-      label: "Type",
-      render: (r) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(r) })
-    },
-    {
-      key: "default",
-      label: "Default",
-      render: (r) => {
-        const o = String(r);
-        return o === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: o });
-      }
-    },
-    {
-      key: "description",
-      label: "Description"
-    }
-  ], data: [
-    {
-      prop: "size",
-      type: "'large' | 'medium' | 'small'",
-      default: "required",
-      description: "Size of the loader"
-    },
-    {
-      prop: "variant",
-      type: "'blink' | 'scaleUp' | 'moveUp'",
-      default: "required",
-      description: "Animation variant of the loader"
-    }
-  ] }) }) }) }),
-  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    m,
-    {
-      language: "tsx",
-      code: `import { Button } from '@e-burgos/tucu-ui';
-
-// Basic usage with loading state
-<Button isLoading>Loading...</Button>
-
-// With custom loader size
-<Button 
-  isLoading 
-  loaderSize="small"
-  loaderVariant="blink"
->
-  Processing
-</Button>
-
-// Large button with loader
-<Button 
-  isLoading 
-  size="large" 
-  loaderSize="large"
->
-  Saving...
-</Button>
-
-// Different loader variants
-<Button isLoading loaderVariant="blink">Blink</Button>
-<Button isLoading loaderVariant="scaleUp">Scale Up</Button>
-<Button isLoading loaderVariant="moveUp">Move Up</Button>
-
-// ButtonLoader is used internally by Button component
-// when isLoading prop is set to true`
-    }
-  ) }) }) })
-] });
-export {
-  f as default
-};

package/documentation/ButtonLoaderSection-TA9F06jI.js

@@ -1,30 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-COj1N7FC.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const s=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const r=String(t);return r==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:r})}},{key:"description",label:"Description"}],i=[{prop:"size",type:"'large' | 'medium' | 'small'",default:"required",description:"Size of the loader"},{prop:"variant",type:"'blink' | 'scaleUp' | 'moveUp'",default:"required",description:"Animation variant of the loader"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ButtonLoader"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A loader component designed specifically for buttons, providing visual feedback during loading states."})]}),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:"Button with Loading State"}),e.jsx(a.Button,{isLoading:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Button with Custom Loader"}),e.jsx(a.Button,{isLoading:!0,loaderSize:"small",loaderVariant:"blink"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Large Button with Loader"}),e.jsx(a.Button,{isLoading:!0,size:"large",loaderSize:"large"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Small Button with Loader"}),e.jsx(a.Button,{isLoading:!0,size:"small",loaderSize:"small"})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Blink Variant"}),e.jsx(a.Button,{isLoading:!0,loaderVariant:"blink"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Scale Up Variant"}),e.jsx(a.Button,{isLoading:!0,loaderVariant:"scaleUp"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Move Up Variant"}),e.jsx(a.Button,{isLoading:!0,loaderVariant:"moveUp"})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"Button",title:"Button Loader Playground",defaultValues:{variant:"solid",color:"primary",size:"medium",isLoading:!0,loaderSize:"small",loaderVariant:"scaleUp"},excludeProps:["onClick","aria-label","aria-describedby","tooltip","tooltipArrow","tooltipColor","tooltipPlacement","shape","fullWidth","disabled"],children:t=>e.jsx(a.Button,{...t,children:"Loading..."})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:s,data:i})})})}),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 { Button } from '@e-burgos/tucu-ui';
-
-// Basic usage with loading state
-<Button isLoading>Loading...</Button>
-
-// With custom loader size
-<Button 
-  isLoading 
-  loaderSize="small"
-  loaderVariant="blink"
->
-  Processing
-</Button>
-
-// Large button with loader
-<Button 
-  isLoading 
-  size="large" 
-  loaderSize="large"
->
-  Saving...
-</Button>
-
-// Different loader variants
-<Button isLoading loaderVariant="blink">Blink</Button>
-<Button isLoading loaderVariant="scaleUp">Scale Up</Button>
-<Button isLoading loaderVariant="moveUp">Move Up</Button>
-
-// ButtonLoader is used internally by Button component
-// when isLoading prop is set to true`})})})})]})};exports.default=l;

package/documentation/CardContainerSection-C9HSknEx.js

@@ -1,21 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-COj1N7FC.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"CardContainer"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A container component that provides consistent styling and layout for card-based content."})]}),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:"Basic Card"}),a.jsx(e.CardContainer,{children:a.jsx(e.Typography,{tag:"p",children:"Card content goes here"})})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Custom Content"}),a.jsxs(e.CardContainer,{children:[a.jsx(e.Typography,{tag:"h3",className:"font-bold mb-2",children:"Card Title"}),a.jsx(e.Typography,{tag:"p",children:"This is a card with custom content including a title and description."})]})]})]})})})}),a.jsx(e.AutoPropsTable,{componentName:"CardContainer"}),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 { CardContainer, Typography } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<CardContainer>
-  <Typography tag="p">Card content goes here</Typography>
-</CardContainer>
-
-// With custom content
-<CardContainer>
-  <Typography tag="h3" className="font-bold mb-2">
-    Card Title
-  </Typography>
-  <Typography tag="p">
-    Card description and content
-  </Typography>
-</CardContainer>
-
-// With custom className
-<CardContainer className="bg-blue-50">
-  <Typography tag="p">Custom styled card</Typography>
-</CardContainer>`})})})})]});exports.default=r;