@e-burgos/tucu-ui 2.0.2 → 2.0.4

package/documentation/BarChartSection-CdcAAYG-.js

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

package/documentation/BarChartSection-EN1OqYoj.js

@@ -0,0 +1,127 @@
+import { jsxs as l, Fragment as d, jsx as a } from "react/jsx-runtime";
+import { T as n, C as e, a as t, l as s, c as i, P as m, A as c } from "../index-B6CStnMG.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const r = [
+  { name: "Jan", sales: 4e3, returns: 400, target: 4500 },
+  { name: "Feb", sales: 3e3, returns: 300, target: 3500 },
+  { name: "Mar", sales: 5e3, returns: 500, target: 4800 },
+  { name: "Apr", sales: 4780, returns: 478, target: 5e3 },
+  { name: "May", sales: 5890, returns: 589, target: 5500 },
+  { name: "Jun", sales: 6390, returns: 639, target: 6e3 }
+], f = () => /* @__PURE__ */ l(d, { children: [
+  /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ a(n, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "BarChart" }),
+    /* @__PURE__ */ a(
+      n,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Bar chart component for comparing categorical data with support for stacking, horizontal layout, and custom bar styling."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Basic Bar Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    s,
+    {
+      data: r,
+      series: [
+        { dataKey: "sales", name: "Sales" },
+        { dataKey: "returns", name: "Returns" }
+      ],
+      height: 300
+    }
+  ) }) }) }),
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Stacked Bars", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    s,
+    {
+      data: r,
+      series: [
+        { dataKey: "sales", name: "Sales", stackId: "a" },
+        { dataKey: "returns", name: "Returns", stackId: "a" }
+      ],
+      stacked: !0,
+      height: 300
+    }
+  ) }) }) }),
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Horizontal Layout", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    s,
+    {
+      data: r,
+      series: [{ dataKey: "sales", name: "Sales" }],
+      layout: "vertical",
+      height: 350
+    }
+  ) }) }) }),
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    i,
+    {
+      code: `import { BarChart } from '@e-burgos/tucu-ui';
+
+const data = [
+  { name: 'Jan', sales: 4000, returns: 400 },
+  { name: 'Feb', sales: 3000, returns: 300 },
+  { name: 'Mar', sales: 5000, returns: 500 },
+];
+
+<BarChart
+  data={data}
+  series={[
+    { dataKey: 'sales', name: 'Sales' },
+    { dataKey: 'returns', name: 'Returns' },
+  ]}
+  height={300}
+  layout="horizontal"
+  stacked={false}
+  barRadius={4}
+  barGap={4}
+  showGrid
+  showTooltip
+  showLegend
+/>`,
+      language: "tsx"
+    }
+  ) }) }) }),
+  /* @__PURE__ */ a(
+    m,
+    {
+      componentName: "BarChart",
+      defaultValues: {
+        height: 300,
+        stacked: !1,
+        layout: "horizontal",
+        showGrid: !0,
+        showTooltip: !0,
+        showLegend: !0,
+        barRadius: 4,
+        barGap: 4,
+        animate: !0
+      },
+      excludeProps: [
+        "data",
+        "series",
+        "colors",
+        "className",
+        "xAxisKey",
+        "emptyMessage"
+      ],
+      children: (o) => /* @__PURE__ */ a(
+        s,
+        {
+          data: r,
+          series: [
+            { dataKey: "sales", name: "Sales" },
+            { dataKey: "returns", name: "Returns" }
+          ],
+          ...o
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ a(c, { componentName: "BarChart" })
+] });
+export {
+  f as default
+};

package/documentation/BasicTableSection-B-BGv1Tg.js

@@ -0,0 +1,103 @@
+import { jsxs as a, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { T as l, C as s, a as n, q as o, A as m, c as r } from "../index-B6CStnMG.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = () => {
+  const t = [
+    { key: "name", label: "Name" },
+    { key: "age", label: "Age" },
+    { key: "city", label: "City" }
+  ], c = [
+    { name: "John Doe", age: 30, city: "New York" },
+    { name: "Jane Smith", age: 25, city: "Los Angeles" },
+    { name: "Bob Johnson", age: 35, city: "Chicago" }
+  ];
+  return /* @__PURE__ */ a(i, { children: [
+    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "BasicTable" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A flexible and customizable table component with support for custom rendering, styling, and interactions."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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: "space-y-4", children: [
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Basic Table" }),
+        /* @__PURE__ */ e(o, { columns: t, data: c })
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Striped Table" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            columns: t,
+            data: c,
+            striped: !0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Without Border" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            columns: t,
+            data: c,
+            border: !1
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(m, { componentName: "BasicTable" }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      r,
+      {
+        language: "tsx",
+        code: `import { BasicTable } from '@e-burgos/tucu-ui';
+
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'age', label: 'Age' },
+  { key: 'city', label: 'City' },
+];
+
+const data = [
+  { name: 'John Doe', age: 30, city: 'New York' },
+  { name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+  { name: 'Bob Johnson', age: 35, city: 'Chicago' },
+];
+
+// Basic usage
+<BasicTable columns={columns} data={data} />
+
+// With custom render
+const columnsWithRender = [
+  {
+    key: 'name',
+    label: 'Name',
+    render: (value) => <strong>{value}</strong>,
+  },
+  { key: 'age', label: 'Age' },
+];
+
+// Striped table
+<BasicTable columns={columns} data={data} striped />
+
+// Without border
+<BasicTable columns={columns} data={data} border={false} />
+
+// Without hover effect
+<BasicTable columns={columns} data={data} hoverable={false} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  y as default
+};

package/documentation/BasicTableSection-DZASBtqv.js

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-QnI4b7wS.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const s=[{key:"name",label:"Name"},{key:"age",label:"Age"},{key:"city",label:"City"}],l=[{name:"John Doe",age:30,city:"New York"},{name:"Jane Smith",age:25,city:"Los Angeles"},{name:"Bob Johnson",age:35,city:"Chicago"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"BasicTable"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A flexible and customizable table component with support for custom rendering, styling, and interactions."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Table"}),e.jsx(a.BasicTable,{columns:s,data:l})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Striped Table"}),e.jsx(a.BasicTable,{columns:s,data:l,striped:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),e.jsx(a.BasicTable,{columns:s,data:l,border:!1})]})]})})})}),e.jsx(a.AutoPropsTable,{componentName:"BasicTable"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { BasicTable } from '@e-burgos/tucu-ui';
+
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'age', label: 'Age' },
+  { key: 'city', label: 'City' },
+];
+
+const data = [
+  { name: 'John Doe', age: 30, city: 'New York' },
+  { name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+  { name: 'Bob Johnson', age: 35, city: 'Chicago' },
+];
+
+// Basic usage
+<BasicTable columns={columns} data={data} />
+
+// With custom render
+const columnsWithRender = [
+  {
+    key: 'name',
+    label: 'Name',
+    render: (value) => <strong>{value}</strong>,
+  },
+  { key: 'age', label: 'Age' },
+];
+
+// Striped table
+<BasicTable columns={columns} data={data} striped />
+
+// Without border
+<BasicTable columns={columns} data={data} border={false} />
+
+// Without hover effect
+<BasicTable columns={columns} data={data} hoverable={false} />`})})})})]})};exports.default=t;

package/{BasicUsageSection-DzJXFb3O.js → documentation/BasicUsageSection-9USFmdGa.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-BOfUOCHe.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>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:"Basic Usage"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Get started with forms in just a few steps"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"1. Define Form Values Interface",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Start by defining a TypeScript interface for your form data:"}),e.jsx(a.CodeBlock,{language:"tsx",code:`export interface FormValues {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-QnI4b7wS.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>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:"Basic Usage"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Get started with forms in just a few steps"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"1. Define Form Values Interface",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Start by defining a TypeScript interface for your form data:"}),e.jsx(a.CodeBlock,{language:"tsx",code:`export interface FormValues {
   name: string;
   email: string;
   password: string;

package/{BasicUsageSection-Cqw9mQqJ.mjs → documentation/BasicUsageSection-Cyj_uLkj.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { T as t, C as r, a as s, c as l } from "./index-HwvOEWI7.mjs";
+import { T as t, C as r, a as s, c as l } from "../index-B6CStnMG.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/BestPracticesSection-B9Ok_QEu.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-QnI4b7wS.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>e.jsx(e.Fragment,{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 bg-linear-to-br from-green-500 to-emerald-500 rounded-lg shadow-lg",children:e.jsx(a.CheckCircle,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Performance & UX"})]}),e.jsx("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((r,i)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:r})]},i))})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-linear-to-br from-blue-500 to-cyan-500 rounded-lg shadow-lg",children:e.jsx(a.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Development"})]}),e.jsx("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((r,i)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Code,{className:"w-4 h-4 text-blue-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:r})]},i))})]})]})})})})});exports.default=l;

package/documentation/BestPracticesSection-Bbsf74bT.js

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-QnI4b7wS.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>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 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg shadow-lg",children:e.jsx(t.Check,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold text-green-600 dark:text-green-400",children:"Do's"})]}),e.jsx("ul",{className:"space-y-2",children:["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"].map((a,r)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(t.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:a})]},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 bg-gradient-to-br from-red-500 to-rose-500 rounded-lg shadow-lg",children:e.jsx(t.X,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold text-red-600 dark:text-red-400",children:"Don'ts"})]}),e.jsx("ul",{className:"space-y-2",children:["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 alternatives"].map((a,r)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(t.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:a})]},r))})]})]})})})});exports.default=i;

package/{BestPracticesSection-BVDNKve6.mjs → documentation/BestPracticesSection-CnVEvflQ.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { T as t, C as n } from "./index-HwvOEWI7.mjs";
+import { T as t, C as n } from "../index-B6CStnMG.js";
 import { CheckCircle as l, ArrowRight as c } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/BestPracticesSection-DDSMtR6c.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-QnI4b7wS.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/{BestPracticesSection-BbK7lnbj.mjs → documentation/BestPracticesSection-DIYdJV66.js}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { a4 as t, T as l } from "./index-HwvOEWI7.mjs";
+import { ag as t, T as l } from "../index-B6CStnMG.js";
 import { Lightbulb as i, Check as a } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/BestPracticesSection-DOLkJn-G.js

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

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { T as i, C as o } from "./index-HwvOEWI7.mjs";
+import { T as i, C as o } from "../index-B6CStnMG.js";
 import { CheckCircle as l, ArrowRight as c } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{BestPracticesSection-Pnux3-yB.mjs → documentation/BestPracticesSection-NsZAn0RE.js}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { C as n, a as c, T as r } from "./index-HwvOEWI7.mjs";
+import { C as n, a as c, T as r } from "../index-B6CStnMG.js";
 import { Check as t, X as l } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{BestPracticesSection-BuiTuJJa.mjs → documentation/BestPracticesSection-aJyw2jIF.js}

@@ -1,5 +1,5 @@
 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-HwvOEWI7.mjs";
+import { C as c, a as m, T as i } from "../index-B6CStnMG.js";
 import { CheckCircle as n, Check as o, Code as l } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{BestPracticesSection-CeDkvrdJ.mjs → documentation/BestPracticesSection-c2rhfHLA.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { T as a, C as l } from "./index-HwvOEWI7.mjs";
+import { T as a, C as l } from "../index-B6CStnMG.js";
 import { CheckCircle as m, ArrowRight as c } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{BestPracticesSection-qddzHZ3e.mjs → documentation/BestPracticesSection-uZIOlRpC.js}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { C as c, a as o, T as r } from "./index-HwvOEWI7.mjs";
+import { C as c, a as o, T as r } from "../index-B6CStnMG.js";
 import { Check as i, X as l } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{BorderRadiusSection-DMscu-5M.mjs → documentation/BorderRadiusSection-BhNShk2O.js}

@@ -1,5 +1,5 @@
 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-HwvOEWI7.mjs";
+import { T as d, C as i, a as c } from "../index-B6CStnMG.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/BorderRadiusSection-D1lTcnl0.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-QnI4b7wS.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-0",100:"rounded-100",200:"rounded-200",300:"rounded-300",400:"rounded-400",500:"rounded-500",600:"rounded-600",700:"rounded-700",800:"rounded-800",900:"rounded-900",1e3:"rounded-1000"};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-C1vY2CzY.js

@@ -0,0 +1,113 @@
+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-B6CStnMG.js";
+import "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" })
+    ] }),
+    /* @__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__ */ t(
+          o,
+          {
+            tooltip: "Delete item",
+            tooltipPlacement: "bottom",
+            tooltipColor: "light",
+            color: "danger",
+            children: "Bottom (light)"
+          }
+        ),
+        /* @__PURE__ */ t(
+          o,
+          {
+            tooltip: "Go back",
+            tooltipPlacement: "left",
+            variant: "ghost",
+            children: "Left"
+          }
+        ),
+        /* @__PURE__ */ t(
+          o,
+          {
+            tooltip: "More info",
+            tooltipPlacement: "right",
+            variant: "ghost",
+            color: "info",
+            children: "Right"
+          }
+        )
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ t(
+    c,
+    {
+      componentName: "Button",
+      defaultValues: {
+        variant: "solid",
+        color: "primary",
+        size: "medium",
+        shape: "rounded",
+        tooltip: "",
+        tooltipPlacement: "top"
+      },
+      excludeProps: [
+        "onClick",
+        "loaderSize",
+        "loaderVariant",
+        "aria-label",
+        "aria-describedby"
+      ],
+      children: (n) => /* @__PURE__ */ t(o, { ...n, 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,
+    {
+      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 {
+  x as default
+};

package/documentation/ButtonDripSection-CKYJay9N.js

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