@e-burgos/tucu-ui 2.0.2 → 2.0.3

package/documentation/BestPracticesSection-Dlv7tr8A.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-D874Kozv.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-FNEhFmPF.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-DsiBIFwo.js";
 import { CheckCircle as l, ArrowRight as c } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/BestPracticesSection-Y7WVzfHX.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-D874Kozv.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/{BorderRadiusSection-DMscu-5M.mjs → documentation/BorderRadiusSection-B7LfzLmt.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-DsiBIFwo.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/BorderRadiusSection-CuLZQqX2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-D874Kozv.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-BaIO6Rop.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, r as o, s as c, A as s, c as p } from "../index-DsiBIFwo.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-Rv6xpiKS.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:"text-center space-y-4",children:[t.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ButtonDrip"}),t.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A button effect component that creates a ripple animation on click."})]}),t.jsx(e.CardContainer,{className:"overflow-hidden",children:t.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsxs("div",{className:"space-y-4",children:[t.jsxs(e.CardContainer,{className:"p-4",children:[t.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Button with Drip Effect"}),t.jsx(e.Button,{children:"Click me"})]}),t.jsxs(e.CardContainer,{className:"p-4",children:[t.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Button with Tooltip"}),t.jsxs("div",{className:"flex flex-wrap gap-4",children:[t.jsx(e.Button,{tooltip:"Save changes",tooltipPlacement:"top",children:"Top"}),t.jsx(e.Button,{tooltip:"Delete item",tooltipPlacement:"bottom",tooltipColor:"light",color:"danger",children:"Bottom (light)"}),t.jsx(e.Button,{tooltip:"Go back",tooltipPlacement:"left",variant:"ghost",children:"Left"}),t.jsx(e.Button,{tooltip:"More info",tooltipPlacement:"right",variant:"ghost",color:"info",children:"Right"})]})]})]})})})}),t.jsx(e.PropPlayground,{componentName:"Button",defaultValues:{variant:"solid",color:"primary",size:"medium",shape:"rounded",tooltip:"",tooltipPlacement:"top"},excludeProps:["onClick","loaderSize","loaderVariant","aria-label","aria-describedby"],children:o=>t.jsx(e.Button,{...o,children:"Click me"})}),t.jsx(e.AutoPropsTable,{componentName:"Button"}),t.jsx(e.CardContainer,{className:"overflow-hidden",children:t.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:t.jsx("div",{className:"w-full p-4 sm:p-6",children:t.jsx(e.CodeBlock,{language:"tsx",code:`import { ButtonDrip } from '@e-burgos/tucu-ui';
+
+// ButtonDrip is typically used internally by Button component
+// It creates a ripple effect when a button is clicked
+
+<ButtonDrip
+  x={50}
+  y={50}
+  color="#3b82f6"
+  fullWidth={false}
+  onCompleted={() => console.log('Animation completed')}
+/>
+
+// Button with tooltip (portal-based, renders above all DOM)
+<Button tooltip="Save changes" tooltipPlacement="top">
+  Save
+</Button>
+
+<Button tooltip="Delete" tooltipPlacement="bottom" tooltipColor="light" color="danger">
+  Delete
+</Button>`})})})})]});exports.default=l;

package/documentation/ButtonLoaderSection-Bkzh89oP.js

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

package/{ButtonLoaderSection-5Yu15Qui.mjs → documentation/ButtonLoaderSection-DGVKD9wI.js}

@@ -1,14 +1,14 @@
-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-HwvOEWI7.mjs";
+import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { T as t, C as l, a as s, r as i, s as d, l as c, c as m } from "../index-DsiBIFwo.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const x = () => /* @__PURE__ */ a(o, { children: [
+const f = () => /* @__PURE__ */ a(n, { 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(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ButtonLoader" }),
     /* @__PURE__ */ e(
-      l,
+      t,
       {
         tag: "p",
         className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
@@ -16,39 +16,67 @@ const x = () => /* @__PURE__ */ a(o, { children: [
       }
     )
   ] }),
-  /* @__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(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Button with Loading State" }),
       /* @__PURE__ */ e(i, { isLoading: !0 })
     ] }),
-    /* @__PURE__ */ a(t, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Button with Custom Loader" }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Button with Custom Loader" }),
       /* @__PURE__ */ e(i, { isLoading: !0, loaderSize: "small", loaderVariant: "blink" })
     ] }),
-    /* @__PURE__ */ a(t, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Large Button with Loader" }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Large Button with Loader" }),
       /* @__PURE__ */ e(i, { isLoading: !0, size: "large", loaderSize: "large" })
     ] }),
-    /* @__PURE__ */ a(t, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Small Button with Loader" }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Small Button with Loader" }),
       /* @__PURE__ */ e(i, { isLoading: !0, size: "small", loaderSize: "small" })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(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(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Blink Variant" }),
       /* @__PURE__ */ e(i, { isLoading: !0, loaderVariant: "blink" })
     ] }),
-    /* @__PURE__ */ a(t, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Scale Up Variant" }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Scale Up Variant" }),
       /* @__PURE__ */ e(i, { isLoading: !0, loaderVariant: "scaleUp" })
     ] }),
-    /* @__PURE__ */ a(t, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Move Up Variant" }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Move Up Variant" }),
       /* @__PURE__ */ e(i, { isLoading: !0, loaderVariant: "moveUp" })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(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: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      componentName: "Button",
+      title: "Button Loader Playground",
+      defaultValues: {
+        variant: "solid",
+        color: "primary",
+        size: "medium",
+        isLoading: !0,
+        loaderSize: "small",
+        loaderVariant: "scaleUp"
+      },
+      excludeProps: [
+        "onClick",
+        "aria-label",
+        "aria-describedby",
+        "tooltip",
+        "tooltipArrow",
+        "tooltipColor",
+        "tooltipPlacement",
+        "shape",
+        "fullWidth",
+        "disabled"
+      ],
+      children: (r) => /* @__PURE__ */ e(i, { ...r, children: "Loading..." })
+    }
+  ),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(c, { columns: [
     {
       key: "prop",
       label: "Prop",
@@ -63,8 +91,8 @@ const x = () => /* @__PURE__ */ a(o, { children: [
       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 });
+        const o = String(r);
+        return o === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: o });
       }
     },
     {
@@ -85,8 +113,8 @@ const x = () => /* @__PURE__ */ a(o, { children: [
       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,
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    m,
     {
       language: "tsx",
       code: `import { Button } from '@e-burgos/tucu-ui';
@@ -123,5 +151,5 @@ const x = () => /* @__PURE__ */ a(o, { children: [
   ) }) }) })
 ] });
 export {
-  x as default
+  f as default
 };

package/documentation/CardContainerSection-DLXPs9aW.js

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

package/documentation/CardContainerSection-t72sN0zL.js

@@ -0,0 +1,63 @@
+import { jsxs as t, Fragment as o, jsx as a } from "react/jsx-runtime";
+import { T as e, C as r, a as n, A as s, c as i } from "../index-DsiBIFwo.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const g = () => /* @__PURE__ */ t(o, { children: [
+  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ a(e, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "CardContainer" }),
+    /* @__PURE__ */ a(
+      e,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A container component that provides consistent styling and layout for card-based content."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ a(r, { className: "overflow-hidden", children: /* @__PURE__ */ a(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ t(r, { className: "p-4", children: [
+      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Basic Card" }),
+      /* @__PURE__ */ a(r, { children: /* @__PURE__ */ a(e, { tag: "p", children: "Card content goes here" }) })
+    ] }),
+    /* @__PURE__ */ t(r, { className: "p-4", children: [
+      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "With Custom Content" }),
+      /* @__PURE__ */ t(r, { children: [
+        /* @__PURE__ */ a(e, { tag: "h3", className: "font-bold mb-2", children: "Card Title" }),
+        /* @__PURE__ */ a(e, { tag: "p", children: "This is a card with custom content including a title and description." })
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ a(s, { componentName: "CardContainer" }),
+  /* @__PURE__ */ a(r, { className: "overflow-hidden", children: /* @__PURE__ */ a(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    i,
+    {
+      language: "tsx",
+      code: `import { CardContainer, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<CardContainer>
+  <Typography tag="p">Card content goes here</Typography>
+</CardContainer>
+
+// With custom content
+<CardContainer>
+  <Typography tag="h3" className="font-bold mb-2">
+    Card Title
+  </Typography>
+  <Typography tag="p">
+    Card description and content
+  </Typography>
+</CardContainer>
+
+// With custom className
+<CardContainer className="bg-blue-50">
+  <Typography tag="p">Custom styled card</Typography>
+</CardContainer>`
+    }
+  ) }) }) })
+] });
+export {
+  g as default
+};

package/documentation/CardTitleSection-BEHmdfF6.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>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:"CardTitle"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A card component with an integrated title that appears above the card border."})]}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.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(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"With Title"}),e.jsx(r.CardTitle,{title:"Card Title",children:e.jsx(r.Typography,{tag:"p",children:"Card content goes here"})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),e.jsx(r.CardTitle,{title:"No Border",border:!1,children:e.jsx(r.Typography,{tag:"p",children:"Card without border"})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"With Rich Content"}),e.jsx(r.CardTitle,{title:"Rich Content",children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(r.Typography,{tag:"p",children:"First paragraph"}),e.jsx(r.Typography,{tag:"p",children:"Second paragraph"})]})})]})]})})})}),e.jsx(r.PropPlayground,{componentName:"CardTitle",defaultValues:{title:"Card Title",border:!0},excludeProps:[],children:a=>e.jsx(r.CardTitle,{...a,children:e.jsx("div",{className:"p-4",children:"Card Content"})})}),e.jsx(r.AutoPropsTable,{componentName:"CardTitle"}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { CardTitle, Typography } from '@e-burgos/tucu-ui';
+
+// With title
+<CardTitle title="Card Title">
+  <Typography tag="p">Card content goes here</Typography>
+</CardTitle>
+
+// Without border
+<CardTitle title="No Border" border={false}>
+  <Typography tag="p">Card without border</Typography>
+</CardTitle>
+
+// With rich content
+<CardTitle title="Rich Content">
+  <div className="space-y-2">
+    <Typography tag="p">First paragraph</Typography>
+    <Typography tag="p">Second paragraph</Typography>
+  </div>
+</CardTitle>`})})})})]});exports.default=t;

package/documentation/CardTitleSection-CTcugicF.js

@@ -0,0 +1,74 @@
+import { jsxs as r, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { T as a, C as l, a as t, s as o, A as c, c as s } from "../index-DsiBIFwo.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const T = () => /* @__PURE__ */ r(d, { 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: "CardTitle" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A card component with an integrated title that appears above the card border."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ r(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Title" }),
+      /* @__PURE__ */ e(t, { title: "Card Title", children: /* @__PURE__ */ e(a, { tag: "p", children: "Card content goes here" }) })
+    ] }),
+    /* @__PURE__ */ r(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Without Border" }),
+      /* @__PURE__ */ e(t, { title: "No Border", border: !1, children: /* @__PURE__ */ e(a, { tag: "p", children: "Card without border" }) })
+    ] }),
+    /* @__PURE__ */ r(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Rich Content" }),
+      /* @__PURE__ */ e(t, { title: "Rich Content", children: /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(a, { tag: "p", children: "First paragraph" }),
+        /* @__PURE__ */ e(a, { tag: "p", children: "Second paragraph" })
+      ] }) })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    o,
+    {
+      componentName: "CardTitle",
+      defaultValues: { title: "Card Title", border: !0 },
+      excludeProps: [],
+      children: (i) => /* @__PURE__ */ e(t, { ...i, children: /* @__PURE__ */ e("div", { className: "p-4", children: "Card Content" }) })
+    }
+  ),
+  /* @__PURE__ */ e(c, { componentName: "CardTitle" }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    s,
+    {
+      language: "tsx",
+      code: `import { CardTitle, Typography } from '@e-burgos/tucu-ui';
+
+// With title
+<CardTitle title="Card Title">
+  <Typography tag="p">Card content goes here</Typography>
+</CardTitle>
+
+// Without border
+<CardTitle title="No Border" border={false}>
+  <Typography tag="p">Card without border</Typography>
+</CardTitle>
+
+// With rich content
+<CardTitle title="Rich Content">
+  <div className="space-y-2">
+    <Typography tag="p">First paragraph</Typography>
+    <Typography tag="p">Second paragraph</Typography>
+  </div>
+</CardTitle>`
+    }
+  ) }) }) })
+] });
+export {
+  T as default
+};