@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/BestPracticesSection-Dcf1Ecin.js

@@ -0,0 +1,151 @@
+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-DoxeCFUJ.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";
+import "react-dom";
+const C = () => {
+  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"
+  ], l = [
+    "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"
+  ], o = [
+    {
+      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: /* @__PURE__ */ e(g, { 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: /* @__PURE__ */ e(x, { 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: /* @__PURE__ */ e(y, { 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: /* @__PURE__ */ e(f, { className: "w-5 h-5 text-purple-500" })
+    }
+  ];
+  return /* @__PURE__ */ s(d, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "Best Practices",
+        description: "Guidelines for optimal icon usage — performance, accessibility, consistency, and maintainability patterns.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Do's and Don'ts" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Quick reference for icon best practices"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
+            /* @__PURE__ */ e(c, { className: "w-5 h-5 text-green-500" }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "font-semibold text-green-700 dark:text-green-400",
+                children: "Do"
+              }
+            )
+          ] }),
+          r.map((t, i) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ e(h, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "span",
+                className: "text-sm text-gray-600 dark:text-gray-400",
+                children: t
+              }
+            )
+          ] }, i))
+        ] }) }),
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
+            /* @__PURE__ */ e(p, { className: "w-5 h-5 text-red-500" }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h3",
+                className: "font-semibold text-red-700 dark:text-red-400",
+                children: "Don't"
+              }
+            )
+          ] }),
+          l.map((t, i) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ e(u, { className: "w-4 h-4 text-red-500 shrink-0 mt-0.5" }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "span",
+                className: "text-sm text-gray-600 dark:text-gray-400",
+                children: t
+              }
+            )
+          ] }, i))
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Performance Tips" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "How the icon system affects bundle size"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: o.map((t, i) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-2", children: [
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+          t.icon,
+          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: t.title })
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed",
+            children: t.description
+          }
+        )
+      ] }) }, i)) })
+    ] })
+  ] });
+};
+export {
+  C as default
+};

package/documentation/BestPracticesSection-WftLca9v.js

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

@@ -0,0 +1,61 @@
+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-DoxeCFUJ.js";
+import { ShieldCheck as d, Check as h, X as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => {
+  const l = [
+    "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"
+  ], o = [
+    "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 /* @__PURE__ */ t(c, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "Best Practices",
+        description: "Recommended patterns and anti-patterns for working with the theme system effectively.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Guidelines" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            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"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(n, { title: "Do's", children: /* @__PURE__ */ e("ul", { className: "space-y-2", children: l.map((s, a) => /* @__PURE__ */ t("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ e(h, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
+          /* @__PURE__ */ e("span", { className: "text-sm", children: s })
+        ] }, a)) }) }) }),
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(n, { title: "Don'ts", children: /* @__PURE__ */ e("ul", { className: "space-y-2", children: o.map((s, a) => /* @__PURE__ */ t("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ e(p, { className: "w-4 h-4 text-red-500 mt-0.5 shrink-0" }),
+          /* @__PURE__ */ e("span", { className: "text-sm", children: s })
+        ] }, a)) }) }) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  N as default
+};

package/documentation/BestPracticesSection-kFMiJLRj.js

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

@@ -0,0 +1,58 @@
+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-DoxeCFUJ.js";
+import { Circle as n } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const f = () => /* @__PURE__ */ d("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(
+    l,
+    {
+      title: "Border Radius",
+      description: "Border radius scale using Tailwind arbitrary values for consistent rounded corners.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { 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(
+    ([s, r]) => {
+      const t = r.replace("rounded-[", "").replace("]", "");
+      return /* @__PURE__ */ d(
+        "div",
+        {
+          className: "border border-border rounded-lg p-4 space-y-3",
+          children: [
+            /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: s }),
+              /* @__PURE__ */ e(a, { tag: "h4", className: "text-muted text-[10px]", children: t })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e("div", { className: `w-20 h-20 bg-primary ${r}` }) }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "h4",
+                className: "text-muted text-[9px] break-all px-1 text-center",
+                children: r
+              }
+            )
+          ]
+        },
+        s
+      );
+    }
+  ) }) }) }) })
+] });
+export {
+  f as default
+};

package/documentation/BorderRadiusSection-CQ2ET4Kp.js

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

@@ -0,0 +1,110 @@
+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-DoxeCFUJ.js";
+import { MousePointerClick as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const w = () => /* @__PURE__ */ o(n, { children: [
+  /* @__PURE__ */ t(
+    c,
+    {
+      title: "ButtonDrip",
+      description: "A button effect component that creates a ripple animation on click.",
+      icon: /* @__PURE__ */ t("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: /* @__PURE__ */ t(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ t(l, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ o(l, { className: "p-4", children: [
+      /* @__PURE__ */ t(a, { tag: "h5", className: "mb-3", children: "Button with Drip Effect" }),
+      /* @__PURE__ */ t(e, { children: "Click me" })
+    ] }),
+    /* @__PURE__ */ o(l, { className: "p-4", children: [
+      /* @__PURE__ */ t(a, { tag: "h5", className: "mb-3", children: "Button with Tooltip" }),
+      /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-4", children: [
+        /* @__PURE__ */ t(e, { tooltip: "Save changes", tooltipPlacement: "top", children: "Top" }),
+        /* @__PURE__ */ t(
+          e,
+          {
+            tooltip: "Delete item",
+            tooltipPlacement: "bottom",
+            tooltipColor: "light",
+            color: "danger",
+            children: "Bottom (light)"
+          }
+        ),
+        /* @__PURE__ */ t(
+          e,
+          {
+            tooltip: "Go back",
+            tooltipPlacement: "left",
+            variant: "ghost",
+            children: "Left"
+          }
+        ),
+        /* @__PURE__ */ t(
+          e,
+          {
+            tooltip: "More info",
+            tooltipPlacement: "right",
+            variant: "ghost",
+            color: "info",
+            children: "Right"
+          }
+        )
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ t(
+    s,
+    {
+      componentName: "Button",
+      defaultValues: {
+        variant: "solid",
+        color: "primary",
+        size: "medium",
+        shape: "rounded",
+        tooltip: "",
+        tooltipPlacement: "top"
+      },
+      excludeProps: [
+        "onClick",
+        "loaderSize",
+        "loaderVariant",
+        "aria-label",
+        "aria-describedby"
+      ],
+      children: (r) => /* @__PURE__ */ t(e, { ...r, children: "Click me" })
+    }
+  ),
+  /* @__PURE__ */ t(m, { componentName: "Button" }),
+  /* @__PURE__ */ t(l, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t(
+    d,
+    {
+      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>`
+    }
+  ) }) }) })
+] });
+export {
+  w as default
+};

package/documentation/ButtonDripSection-ZXvRsatv.js

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

package/documentation/ButtonLoaderSection-BZuT9Xfl.js

@@ -0,0 +1,153 @@
+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-DoxeCFUJ.js";
+import { Loader2 as u } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const v = () => /* @__PURE__ */ i(n, { children: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      title: "ButtonLoader",
+      description: `A loader component designed specifically for buttons, providing visual
+          feedback during loading states.`,
+      icon: /* @__PURE__ */ e("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-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ i(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Button with Loading State" }),
+      /* @__PURE__ */ e(l, { isLoading: !0 })
+    ] }),
+    /* @__PURE__ */ i(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Button with Custom Loader" }),
+      /* @__PURE__ */ e(l, { isLoading: !0, loaderSize: "small", loaderVariant: "blink" })
+    ] }),
+    /* @__PURE__ */ i(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Large Button with Loader" }),
+      /* @__PURE__ */ e(l, { isLoading: !0, size: "large", loaderSize: "large" })
+    ] }),
+    /* @__PURE__ */ i(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Small Button with Loader" }),
+      /* @__PURE__ */ e(l, { isLoading: !0, size: "small", loaderSize: "small" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+    /* @__PURE__ */ i(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Blink Variant" }),
+      /* @__PURE__ */ e(l, { isLoading: !0, loaderVariant: "blink" })
+    ] }),
+    /* @__PURE__ */ i(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Scale Up Variant" }),
+      /* @__PURE__ */ e(l, { isLoading: !0, loaderVariant: "scaleUp" })
+    ] }),
+    /* @__PURE__ */ i(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Move Up Variant" }),
+      /* @__PURE__ */ e(l, { isLoading: !0, loaderVariant: "moveUp" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    c,
+    {
+      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) => /* @__PURE__ */ e(l, { ...t, children: "Loading..." })
+    }
+  ),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(m, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(t) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (t) => {
+        const s = String(t);
+        return s === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: s });
+      }
+    },
+    {
+      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(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    p,
+    {
+      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 {
+  v as default
+};

package/documentation/ButtonLoaderSection-ZUjulNxT.js

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{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.jsx(a.HeroCard,{title:"ButtonLoader",description:`A loader component designed specifically for buttons, providing visual
+          feedback during loading states.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(l.Loader2,{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:"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=n;