@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/BestPracticesSection-DXd2F40Q.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-19KsCnyX.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-V_icrn3I.js

@@ -0,0 +1,137 @@
+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-19KsCnyX.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";
+import "react-dom";
+const T = () => {
+  const l = [
+    "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"
+  ], n = [
+    "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"
+  ], o = [
+    {
+      title: "Color Contrast",
+      description: "Maintain minimum 4.5:1 ratio for normal text, 3:1 for large text. Use browser DevTools to check.",
+      icon: /* @__PURE__ */ e(x, { 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: /* @__PURE__ */ e(b, { 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: /* @__PURE__ */ e(f, { 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: /* @__PURE__ */ e(w, { className: "w-5 h-5 text-amber-500" })
+    }
+  ];
+  return /* @__PURE__ */ t(c, { children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        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: /* @__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(m, { 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(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 accessible patterns"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-4", children: [
+            /* @__PURE__ */ e(h, { 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" })
+          ] }),
+          l.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ e(p, { 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: s
+              }
+            )
+          ] }, i))
+        ] }) }),
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-4", children: [
+            /* @__PURE__ */ e(u, { 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" })
+          ] }),
+          n.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ e(g, { 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: s
+              }
+            )
+          ] }, i))
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Quick Tips" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Common accessibility patterns to keep in mind"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: o.map((s, i) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-2", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+          s.icon,
+          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: s.title })
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed",
+            children: s.description
+          }
+        )
+      ] }) }, i)) })
+    ] })
+  ] });
+};
+export {
+  T as default
+};

package/documentation/BestPracticesSection-WJyPTPT5.js

@@ -0,0 +1,79 @@
+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-19KsCnyX.js";
+import { ShieldCheck as h, Check as n, X as o } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => {
+  const l = [
+    "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"
+  ], c = [
+    "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 /* @__PURE__ */ s(d, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "Best Practices",
+        description: "Guidelines for building maintainable, accessible, and type-safe routing configurations.",
+        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(h, { 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: "Recommendations" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Follow these guidelines for robust routing"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Do's" })
+          ] }),
+          /* @__PURE__ */ e("ul", { className: "space-y-2", children: l.map((t, i) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ e(n, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
+            /* @__PURE__ */ e("span", { className: "text-sm", children: t })
+          ] }, i)) })
+        ] }) }),
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 to-rose-500 shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Don'ts" })
+          ] }),
+          /* @__PURE__ */ e("ul", { className: "space-y-2", children: c.map((t, i) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ e(o, { className: "w-4 h-4 text-red-500 mt-0.5 shrink-0" }),
+            /* @__PURE__ */ e("span", { className: "text-sm", children: t })
+          ] }, i)) })
+        ] }) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  x as default
+};

package/documentation/BorderRadiusSection-DnrQs0UO.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-19KsCnyX.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-DtqKxbF6.js

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

@@ -1,32 +1,29 @@
-import { jsxs as e, Fragment as r, jsx as t } from "react/jsx-runtime";
-import { T as l, C as a, a as i, y as o, P as c, A as s, c as p } from "../index-D3gBsvbO.js";
-import "lucide-react";
+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-19KsCnyX.js";
+import { MousePointerClick as p } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const x = () => /* @__PURE__ */ e(r, { children: [
-  /* @__PURE__ */ e("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ t(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ButtonDrip" }),
-    /* @__PURE__ */ t(
-      l,
-      {
-        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."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ t(a, { 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__ */ e("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ e(a, { className: "p-4", children: [
-      /* @__PURE__ */ t(l, { tag: "h5", className: "mb-3", children: "Button with Drip Effect" }),
-      /* @__PURE__ */ t(o, { children: "Click me" })
+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__ */ e(a, { className: "p-4", children: [
-      /* @__PURE__ */ t(l, { tag: "h5", className: "mb-3", children: "Button with Tooltip" }),
-      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4", children: [
-        /* @__PURE__ */ t(o, { tooltip: "Save changes", tooltipPlacement: "top", children: "Top" }),
+    /* @__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(
-          o,
+          e,
           {
             tooltip: "Delete item",
             tooltipPlacement: "bottom",
@@ -36,7 +33,7 @@ const x = () => /* @__PURE__ */ e(r, { children: [
           }
         ),
         /* @__PURE__ */ t(
-          o,
+          e,
           {
             tooltip: "Go back",
             tooltipPlacement: "left",
@@ -45,7 +42,7 @@ const x = () => /* @__PURE__ */ e(r, { children: [
           }
         ),
         /* @__PURE__ */ t(
-          o,
+          e,
           {
             tooltip: "More info",
             tooltipPlacement: "right",
@@ -58,7 +55,7 @@ const x = () => /* @__PURE__ */ e(r, { children: [
     ] })
   ] }) }) }) }),
   /* @__PURE__ */ t(
-    c,
+    s,
     {
       componentName: "Button",
       defaultValues: {
@@ -76,12 +73,12 @@ const x = () => /* @__PURE__ */ e(r, { children: [
         "aria-label",
         "aria-describedby"
       ],
-      children: (n) => /* @__PURE__ */ t(o, { ...n, children: "Click me" })
+      children: (r) => /* @__PURE__ */ t(e, { ...r, children: "Click me" })
     }
   ),
-  /* @__PURE__ */ t(s, { componentName: "Button" }),
-  /* @__PURE__ */ t(a, { 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(
-    p,
+  /* @__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';
@@ -109,5 +106,5 @@ const x = () => /* @__PURE__ */ e(r, { children: [
   ) }) }) })
 ] });
 export {
-  x as default
+  w as default
 };

package/documentation/ButtonDripSection-DEZ07Ezd.js

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