@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/BestPracticesSection-n_GJKuXp.mjs

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

package/BorderRadiusSection-BqRzkDYG.js

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

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

package/ButtonDripSection-BLa_mdeq.mjs

@@ -0,0 +1,99 @@
+import { jsxs as r, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { T as a, C as l, a as o, s as n, B as c, c as d } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => /* @__PURE__ */ r(s, { children: [
+  /* @__PURE__ */ r("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ButtonDrip" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        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__ */ e(l, { 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__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ r(l, { className: "p-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Button with Drip Effect" }),
+    /* @__PURE__ */ e(n, { children: "Click me" })
+  ] }) }) }) }) }),
+  /* @__PURE__ */ e(l, { 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(c, { 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 i = String(t);
+        return i === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: i });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "x",
+      type: "number",
+      default: "0",
+      description: "X coordinate for the drip effect"
+    },
+    {
+      prop: "y",
+      type: "number",
+      default: "0",
+      description: "Y coordinate for the drip effect"
+    },
+    {
+      prop: "color",
+      type: "string",
+      default: "required",
+      description: "Color of the drip effect"
+    },
+    {
+      prop: "fullWidth",
+      type: "boolean",
+      default: "false",
+      description: "Whether the button is full width"
+    },
+    {
+      prop: "onCompleted",
+      type: "() => void",
+      default: "required",
+      description: "Callback when animation completes"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(l, { 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(
+    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')}
+/>`
+    }
+  ) }) }) })
+] });
+export {
+  N as default
+};

package/ButtonDripSection-D62t7cNU.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const a=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>{const l=String(r);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],s=[{prop:"x",type:"number",default:"0",description:"X coordinate for the drip effect"},{prop:"y",type:"number",default:"0",description:"Y coordinate for the drip effect"},{prop:"color",type:"string",default:"required",description:"Color of the drip effect"},{prop:"fullWidth",type:"boolean",default:"false",description:"Whether the button is full width"},{prop:"onCompleted",type:"() => void",default:"required",description:"Callback when animation completes"}];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:"ButtonDrip"}),e.jsx(t.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."})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"space-y-4",children:e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Button with Drip Effect"}),e.jsx(t.Button,{children:"Click me"})]})})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:a,data:s})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.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')}
+/>`})})})})]})};exports.default=i;

package/ButtonLoaderSection-BAEAsnOQ.js

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

package/ButtonLoaderSection-dY9Ctlyf.mjs

@@ -0,0 +1,127 @@
+import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { T as l, C as t, a as s, s as i, B as d, c } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ a(o, { 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: "ButtonLoader" }),
+    /* @__PURE__ */ e(
+      l,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A loader component designed specifically for buttons, providing visual feedback during loading states."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Button with Loading State" }),
+      /* @__PURE__ */ e(i, { isLoading: !0 })
+    ] }),
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Button with Custom Loader" }),
+      /* @__PURE__ */ e(i, { isLoading: !0, loaderSize: "small", loaderVariant: "blink" })
+    ] }),
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Large Button with Loader" }),
+      /* @__PURE__ */ e(i, { isLoading: !0, size: "large", loaderSize: "large" })
+    ] }),
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Small Button with Loader" }),
+      /* @__PURE__ */ e(i, { isLoading: !0, size: "small", loaderSize: "small" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Blink Variant" }),
+      /* @__PURE__ */ e(i, { isLoading: !0, loaderVariant: "blink" })
+    ] }),
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Scale Up Variant" }),
+      /* @__PURE__ */ e(i, { isLoading: !0, loaderVariant: "scaleUp" })
+    ] }),
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Move Up Variant" }),
+      /* @__PURE__ */ e(i, { isLoading: !0, loaderVariant: "moveUp" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (r) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(r) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (r) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(r) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (r) => {
+        const n = String(r);
+        return n === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: n });
+      }
+    },
+    {
+      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(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    c,
+    {
+      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 {
+  x as default
+};